/* =====================================================================
   ADMIN UI — shared visual system for admin pages.
   Opt in with <body class="admin-ui">. Loads after styles.css.
   Sections:
     1. Tokens          6. Drawers & tabs      11. Line items
     2. Base            7. Cards & headers     12. Garment cards
     3. Typography      8. Modals              13. Quote totals & menus
     4. Form controls   9. Ticket summary      14. Responsive (900 / 768 / 640)
     5. Buttons        10. Size table
   ===================================================================== */

/* 1. TOKENS ---------------------------------------------------------- */
body.admin-ui {
    /* Charcoal grays, darkest to lightest. Only these four. */
    --ui-canvas: #1a1a1a;
    --ui-surface: #222;
    --ui-raised: #2a2a2a;
    --ui-border: #444;

    --ui-text: #fff;
    --ui-accent: #98c46e;
    --ui-danger: #d64949;
    --ui-overlay: rgba(26, 26, 26, 0.92);

    --ui-font-body: 13px;
    --ui-font-label: 13px;
    --ui-font-title: 14px;
    --ui-font-emphasis: 15px;
    --ui-font-icon: 16px;
    --ui-label-opacity: 0.6;

    --ui-control-height: 34px;
    --ui-header-height: 52px;
    --ui-pad: 20px;
    --ui-pad-inner: 14px;
    --ui-gap: 8px;
    --ui-gap-lg: 12px;

    background-color: var(--ui-canvas);
    color: var(--ui-text);
}

/* 2. BASE ------------------------------------------------------------ */
body.admin-ui,
body.admin-ui * {
    border-radius: 0 !important;
}

body.admin-ui :is(h1, h2, h3, h4, h5, h6, p, label, span, strong) {
    color: inherit;
}

body.admin-ui :is(a, .file-link, .file-name) {
    color: var(--ui-accent);
}

body.admin-ui :is(a, .file-link, .file-name):hover {
    color: var(--ui-text);
}

body.admin-ui .d-none {
    display: none !important;
}

body.admin-ui .main-nav {
    background: var(--ui-surface);
    border: 0;
}

body.admin-ui :is(.nav-links a, .nav-info-item, .nav-info-divider, .mobile-fab, .mobile-menu a) {
    color: var(--ui-text);
}

body.admin-ui :is(.nav-links a:hover, .nav-info-item, .mobile-fab:hover) {
    color: var(--ui-accent);
}

body.admin-ui .mobile-menu {
    background: var(--ui-overlay);
}

body.admin-ui .mobile-call-btn {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-canvas);
}

body.admin-ui .mobile-call-btn:hover {
    background: var(--ui-surface);
    color: var(--ui-accent);
}

body.admin-ui :is(.modal-overlay, .mobile-menu-overlay.open) {
    background: var(--ui-overlay);
}

body.admin-ui .mobile-admin-btn {
    color: var(--ui-text);
}

body.admin-ui .mobile-admin-btn svg {
    fill: currentColor;
}

body.admin-ui :is(.mobile-admin-btn.active, .mobile-admin-btn:hover) {
    color: var(--ui-accent);
}

/* 3. TYPOGRAPHY ------------------------------------------------------ */
/* Legacy styles.css sizes vary widely; these four rules are the whole type scale. */
body.admin-ui :is(.ticket-detail-page, .invoice-modal, .proof-modal-content, .po-modal-content, .ticket-field-modal, .ticket-files-panel, .admin-menu-panel, .pricing-panel, .mobile-admin-bar, .mobile-menu-content, .add-item-menu),
body.admin-ui :is(.ticket-detail-page, .invoice-modal, .proof-modal-content, .po-modal-content, .ticket-field-modal, .ticket-files-panel, .admin-menu-panel, .pricing-panel, .mobile-admin-bar, .mobile-menu-content, .add-item-menu) * {
    font-size: var(--ui-font-body) !important;
}

body.admin-ui :is(.ticket-detail-page label, .invoice-modal .form-row label, .ticket-field-modal-label, .detail-label, .line-field > span:first-child, .garment-field > span:first-child, .totals-row label, .invoice-modal .line-items-header span, .admin-menu-label, .mobile-menu-label, .pricing-table th, .fee-item .label, .multiplier-item .label) {
    color: var(--ui-text);
    font-size: var(--ui-font-label) !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.admin-ui :is(.ticket-detail-page label, .invoice-modal .form-row label, .ticket-field-modal-label, .detail-label, .line-field > span:first-child, .garment-field > span:first-child, .totals-row label, .admin-menu-label, .mobile-menu-label, .ticket-files-loading, .ticket-files-empty, .pricing-subtitle, .pricing-table .na, .fee-item .label, .multiplier-item .label) {
    opacity: var(--ui-label-opacity);
}

body.admin-ui :is(.card > h3, .option-card-header, .sizes-card > .collapsible-toggle, .modal-header, .modal-content:not(.invoice-modal) > h3, .ticket-field-modal-header h3, .pricing-header h2, .pricing-fees h3, .pricing-multipliers h3) {
    font-size: var(--ui-font-title) !important;
}

body.admin-ui :is(.invoice-modal .total-amount, .invoice-modal .invoice-total-bar .total-label) {
    font-size: var(--ui-font-emphasis) !important;
}

body.admin-ui :is(.detail-value, .style-info, .invoice-number, .ticket-file-row, .po-file-item, .pricing-table td, .fee-item, .multiplier-item) {
    font-weight: 400;
}

body.admin-ui :is(.row-total, .grand-total-box, .invoice-modal .total-amount, .pricing-header h2, .fee-item .value, .multiplier-item .value) {
    font-weight: 600;
}

body.admin-ui :is(.pricing-header h2, .pricing-table th, .pricing-fees h3, .pricing-multipliers h3, .row-total, .grand-total-box, .sizes-saved-msg, .availability.available) {
    color: var(--ui-accent);
}

body.admin-ui :is(.availability.unavailable, .grand-total-box.total-mismatch, .invoice-status-badge.void, .invoice-status-badge.uncollectible) {
    color: var(--ui-danger);
}

/* Block labels above fields (low specificity so component labels can lay themselves out). */
body.admin-ui :where(.ticket-detail-page, .invoice-modal .form-row) label {
    display: block;
    margin-bottom: 6px;
}

/* 4. FORM CONTROLS --------------------------------------------------- */
/* !important beats styles.css's white input backgrounds at higher specificity. */
body.admin-ui :is(input, textarea, select) {
    background-color: var(--ui-raised) !important;
    border: 1px solid var(--ui-border);
    border-color: var(--ui-border) !important;
    box-sizing: border-box;
    color: var(--ui-text) !important;
}

body.admin-ui :is(input, select) {
    height: var(--ui-control-height);
    padding: 0 10px;
}

body.admin-ui textarea {
    min-height: 112px;
    padding: 10px 12px;
}

body.admin-ui :is(input, textarea, select):focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 1px var(--ui-accent);
    outline: none;
}

body.admin-ui :is(input, textarea)::placeholder {
    color: var(--ui-text);
    opacity: 0.45;
}

body.admin-ui select option {
    background: var(--ui-raised);
    color: var(--ui-text);
}

body.admin-ui input[type="checkbox"] {
    accent-color: var(--ui-accent);
    height: 14px;
    margin: 0;
    padding: 0;
    width: 14px;
}

body.admin-ui input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

body.admin-ui input[type="number"]::-webkit-inner-spin-button,
body.admin-ui input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

body.admin-ui .currency-input {
    display: contents;
}

body.admin-ui .currency-symbol {
    display: none;
}

/* 5. BUTTONS --------------------------------------------------------- */
body.admin-ui :is(.btn, .toggle-btn) {
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-sizing: border-box;
    color: var(--ui-text);
    cursor: pointer;
    display: inline-flex;
    font-weight: 500;
    gap: 6px;
    height: var(--ui-control-height);
    justify-content: center;
    line-height: 1;
    margin: 0;
    min-height: 0;
    padding: 0 14px;
    white-space: nowrap;
}

body.admin-ui :is(.btn:hover, .btn:focus-visible, .toggle-btn:hover, .toggle-btn.active) {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-canvas);
    outline: none;
}

/* Native file inputs: render the picker button exactly like .btn so every
   "Choose Files" control on the site matches the Create Ticket button. */
body.admin-ui input[type="file"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ui-text) !important;
    cursor: pointer;
    font: inherit;
    font-size: var(--ui-font-body);
    height: auto;
    max-width: 100%;
    padding: 0;
}

body.admin-ui input[type="file"]::file-selector-button {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 0;
    box-sizing: border-box;
    color: var(--ui-text);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    height: var(--ui-control-height);
    line-height: 1;
    margin: 0 var(--ui-gap-lg) 0 0;
    padding: 0 14px;
}

body.admin-ui input[type="file"]:is(:hover, :focus-visible)::file-selector-button {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-canvas);
}

body.admin-ui input[type="file"]:focus-visible {
    outline: 1px solid var(--ui-text);
    outline-offset: 2px;
}

/* Menu buttons: full-width, left-aligned list items at the standard height. */
body.admin-ui :is(.admin-nav-btn, .mobile-menu-btn) {
    justify-content: flex-start;
    width: 100%;
}

/* Red square icon buttons: delete and close. */
body.admin-ui :is(.btn-delete, .btn-remove-line, .close-pricing-btn, .ticket-field-modal-close, .modal-close, .mobile-menu-close) {
    align-items: center;
    background: var(--ui-danger);
    border: 0;
    color: var(--ui-text);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--ui-font-emphasis) !important;
    height: var(--ui-control-height);
    justify-content: center;
    line-height: 1;
    margin: 0;
    min-width: var(--ui-control-height);
    padding: 0;
    position: static;
    transition: none;
    width: var(--ui-control-height);
}

body.admin-ui :is(.btn-delete, .btn-remove-line, .close-pricing-btn, .ticket-field-modal-close, .modal-close, .mobile-menu-close):hover {
    background: var(--ui-danger);
    color: var(--ui-text);
    filter: brightness(1.15);
}

body.admin-ui :is(.btn-delete, .btn-remove-line, .close-pricing-btn, .ticket-field-modal-close, .modal-close, .mobile-menu-close):focus-visible {
    outline: 1px solid var(--ui-text);
    outline-offset: 2px;
}

/* Inline pencil icon next to editable values. */
body.admin-ui .edit-field-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ui-accent);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 22px;
    height: 22px;
    justify-content: center;
    opacity: 1;
    padding: 0;
    width: 22px;
}

body.admin-ui .edit-field-btn:focus-visible {
    outline: 1px solid var(--ui-accent);
    outline-offset: 2px;
}

/* Button rows. */
body.admin-ui :is(.modal-actions, .po-modal-actions, .ticket-field-modal-actions, .garment-line-item-actions, .quote-actions) {
    align-items: center;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap);
}

body.admin-ui :is(.modal-actions, .po-modal-actions, .ticket-field-modal-actions) {
    justify-content: flex-end;
}

/* 6. DRAWERS & TABS -------------------------------------------------- */
body.admin-ui :is(.pricing-panel-content, .admin-menu-content, .ticket-files-panel, .mobile-admin-bar, .mobile-menu-content) {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

/* Each tab keeps its own color; all share one rollover (grow outward + brighten). */
body.admin-ui :is(.pricing-panel-tab, .ticket-files-tab, .admin-menu-tab) {
    border: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: var(--ui-text);
    filter: none;
    transition: width 0.15s ease, left 0.15s ease, right 0.15s ease, filter 0.15s ease;
    width: 36px;
}

body.admin-ui .pricing-panel-tab { background: var(--ui-danger); left: -36px; }
body.admin-ui .ticket-files-tab { background: var(--ui-accent); color: var(--ui-canvas); left: -36px; }
body.admin-ui .admin-menu-tab { background: var(--ui-border); right: -36px; }

body.admin-ui :is(.pricing-panel-tab, .ticket-files-tab, .admin-menu-tab):is(:hover, :focus-visible) {
    filter: brightness(1.15);
    outline: none;
    width: 44px;
}

body.admin-ui :is(.pricing-panel-tab, .ticket-files-tab):is(:hover, :focus-visible) { left: -44px; }
body.admin-ui .admin-menu-tab:is(:hover, :focus-visible) { right: -44px; }

body.admin-ui :is(.pricing-panel-tab svg, .admin-menu-tab svg) {
    fill: currentColor;
}

body.admin-ui .ticket-files-tab svg {
    fill: none;
    stroke: currentColor;
}

body.admin-ui .close-pricing-btn {
    position: absolute;
    right: 9px;
    top: 9px;
}

body.admin-ui :is(.pricing-header, .pricing-fees h3, .pricing-multipliers h3, .admin-menu-divider) {
    border: 0;
}

body.admin-ui :is(.pricing-table th, .pricing-table td, .fee-item, .multiplier-item) {
    border-color: var(--ui-border);
}

body.admin-ui :is(.pricing-table th, .pricing-table tbody tr:nth-child(even), .pricing-table tbody tr:hover, .pricing-table td:first-child, .fee-item, .multiplier-item) {
    background: var(--ui-canvas);
    color: var(--ui-text);
}

/* 7. CARDS & HEADERS ------------------------------------------------- */
body.admin-ui :is(.ticket-detail-page .card, .pricing-options-container .option-card, .modal-content) {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    color: var(--ui-text);
    transition: border-color 160ms ease;
}

body.admin-ui :is(.ticket-detail-page .card, .pricing-options-container .option-card) {
    padding: var(--ui-pad);
}

body.admin-ui :is(.ticket-detail-page .card, .pricing-options-container .option-card):hover {
    border-color: var(--ui-border);
}

body.admin-ui :is(.ticket-detail-page .card, .pricing-options-container .option-card, .line-items-table tr:not(.preset-addon-row), .garment-line-items .size-row):focus-within {
    border-color: var(--ui-accent);
}

/* One header style for cards and modals. */
body.admin-ui :is(.card > h3, .option-card-header, .sizes-card > .collapsible-toggle, .invoice-modal .modal-header, .modal-content:not(.invoice-modal) > h3, .ticket-field-modal-header) {
    align-items: center;
    background: var(--ui-canvas);
    border: 0;
    box-sizing: border-box;
    color: var(--ui-text);
    display: flex;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: 0;
    line-height: 1;
    min-height: var(--ui-header-height);
    padding: 0 var(--ui-pad);
    text-transform: uppercase;
}

/* Headers holding a close X: center the X with equal space on top, bottom, and right. */
body.admin-ui :is(.invoice-modal .modal-header, .ticket-field-modal-header) {
    padding-right: calc((var(--ui-header-height) - var(--ui-control-height)) / 2);
}

body.admin-ui :is(.card > h3, .option-card-header, .sizes-card > .collapsible-toggle) {
    margin: calc(-1 * var(--ui-pad)) calc(-1 * var(--ui-pad)) var(--ui-pad);
}

body.admin-ui .modal-content:not(.invoice-modal):not(.ticket-field-modal) > h3 {
    margin: calc(-1 * var(--ui-pad)) calc(-1 * var(--ui-pad)) var(--ui-pad);
}

body.admin-ui :is(.option-card-header h4, .modal-header h3, .ticket-field-modal-header h3) {
    color: inherit;
    font: inherit;
    margin: 0;
    text-transform: inherit;
}

body.admin-ui :is(.garment-section, .detail-row-full) {
    border-bottom: 0;
    border-top: 0;
}

/* Garment groups are data containers; the nested Line Items card is the visible surface. */
body.admin-ui .ticket-detail-page .garment-group {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: var(--ui-pad) 0;
    padding: 0;
}

body.admin-ui .ticket-detail-page .garment-group > h3,
body.admin-ui .ticket-detail-page .garment-group > .garment-section:has(.quote-garments-mirror) {
    display: none;
}

body.admin-ui .ticket-detail-page .garment-group > .garment-group-remove-btn {
    position: absolute;
    right: var(--ui-gap);
    top: var(--ui-gap);
}

/* 8. MODALS ---------------------------------------------------------- */
body.admin-ui .invoice-modal {
    padding: 0;
}

body.admin-ui :is(.invoice-modal .invoice-section, .invoice-modal .line-items-header, .invoice-modal .invoice-total-bar) {
    border-color: var(--ui-border);
    color: var(--ui-text);
}

body.admin-ui .ticket-field-modal {
    max-width: min(520px, calc(100vw - 32px));
    padding: 0;
    width: 100%;
}

body.admin-ui .ticket-field-modal-body {
    display: grid;
    gap: var(--ui-gap);
    padding: var(--ui-pad);
}

body.admin-ui .ticket-field-modal-label {
    display: block;
    margin: 0;
}

body.admin-ui .ticket-field-modal-input {
    width: 100%;
}

body.admin-ui textarea.ticket-field-modal-input {
    min-height: 140px;
    resize: vertical;
}

body.admin-ui .ticket-field-modal-error {
    color: var(--ui-danger);
    margin: 0;
}

body.admin-ui .ticket-field-modal-error:empty {
    display: none;
}

body.admin-ui .ticket-field-modal-actions {
    padding: 0 var(--ui-pad) var(--ui-pad);
}

/* 9. TICKET SUMMARY -------------------------------------------------- */
body.admin-ui #ticketInfo .ticket-info-grid {
    display: grid;
    gap: var(--ui-gap-lg) 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-ui #ticketInfo .detail-row {
    background: var(--ui-canvas);
    border: 1px solid var(--ui-border);
    min-height: 68px;
    min-width: 0;
    padding: 10px var(--ui-gap-lg);
    transition: border-color 160ms ease;
}

body.admin-ui #ticketInfo .detail-row:focus-within {
    border-color: var(--ui-accent);
}

body.admin-ui #ticketInfo .detail-row-job-name {
    grid-column: span 2;
}

body.admin-ui #ticketInfo .detail-row-full {
    margin: var(--ui-gap-lg) 0 0;
    min-height: 82px;
}

body.admin-ui #ticketInfo .detail-label {
    margin-bottom: 5px;
}

body.admin-ui #ticketInfo .detail-value {
    color: var(--ui-text);
    line-height: 1.4;
    min-height: 20px;
}

body.admin-ui #ticketInfo .editable-field {
    align-items: flex-start;
    cursor: pointer;
    gap: var(--ui-gap);
}

body.admin-ui #ticketInfo .editable-text {
    overflow-wrap: anywhere;
}

body.admin-ui #ticketInfo .inline-edit-input {
    flex: 1;
    min-width: 0;
}

body.admin-ui :is(.invoice-status-badge.sent, .invoice-status-badge.open, .invoice-status-badge.draft) {
    background: var(--ui-canvas);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

body.admin-ui .invoice-status-badge.paid {
    background: var(--ui-canvas);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

body.admin-ui :is(.invoice-status-badge.void, .invoice-status-badge.uncollectible) {
    background: var(--ui-canvas);
    border-color: var(--ui-danger);
}

/* 10. SIZE TABLE ----------------------------------------------------- */
body.admin-ui .size-table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    min-width: 610px;
    table-layout: fixed;
    width: 100%;
}

body.admin-ui .size-table :is(th, td) {
    background: var(--ui-canvas);
    border-color: var(--ui-border);
    box-sizing: border-box;
    color: var(--ui-text);
    vertical-align: middle;
}

body.admin-ui .size-table input.qty {
    border: 0;
    min-width: 0;
}

body.admin-ui .size-table input.qty:focus {
    box-shadow: inset 0 0 0 1px var(--ui-accent);
}

body.admin-ui :is(.grand-total-box, .row-total) {
    background: var(--ui-canvas);
    border-color: var(--ui-accent);
}

body.admin-ui :is(.grand-total-box.total-mismatch, .size-row.sizes-incomplete .size-table, .size-row.sizes-incomplete .qty) {
    background: var(--ui-canvas);
    border-color: var(--ui-danger);
}

/* 11. LINE ITEMS ----------------------------------------------------- */
/* Table rows and garment cards share one flex list; JS sets each item's `order`. */
body.admin-ui .pricing-options-container {
    gap: var(--ui-gap-lg);
}

body.admin-ui .line-items-list {
    display: flex;
    flex-direction: column;
}

body.admin-ui .line-items-table,
body.admin-ui .line-items-table > tbody {
    display: block;
    width: 100%;
}

body.admin-ui .line-items-list > .line-items-table,
body.admin-ui .line-items-list > .line-items-table > tbody,
body.admin-ui .line-items-list > .garment-line-items,
body.admin-ui .line-items-list > .garment-line-items > .size-rows {
    display: contents;
}

body.admin-ui .line-items-table thead,
body.admin-ui .line-items-table tr[data-garment-key] {
    display: none !important;
}

body.admin-ui .line-items-table tr:not(.preset-addon-row) {
    align-items: end;
    background: var(--ui-canvas);
    border: 1px solid var(--ui-border);
    display: grid;
    gap: var(--ui-gap-lg);
    grid-template-areas: "description qty rate total remove";
    grid-template-columns: minmax(0, 1fr) 80px 110px 110px 120px;
    margin: 0 0 var(--ui-pad-inner);
    padding: var(--ui-pad-inner);
    position: relative;
}

body.admin-ui .line-items-table tr:not(.preset-addon-row) > td {
    align-self: end;
    background: transparent;
    border: 0;
    display: block;
    margin: 0;
    min-width: 0;
    overflow: visible;
    padding: 0;
    text-align: left;
    width: auto;
}

body.admin-ui .line-items-table tr:not(.preset-addon-row) > td::before {
    content: none;
}

body.admin-ui .line-items-table tr:not(.preset-addon-row) > td:nth-child(1) { display: flex; gap: 10px; align-items: end; grid-area: description; }
body.admin-ui .line-items-table tr:not(.preset-addon-row) > td:nth-child(2) { grid-area: qty; }
body.admin-ui .line-items-table tr:not(.preset-addon-row) > td:nth-child(3) { grid-area: rate; }
body.admin-ui .line-items-table tr:not(.preset-addon-row) > td:nth-child(4) { grid-area: total; }
body.admin-ui .line-items-table tr:not(.preset-addon-row) > td.del-cell { display: flex; gap: 6px; grid-area: remove; justify-content: flex-end; }

body.admin-ui :is(.duplicate-item-btn, .duplicate-garment-btn) {
    font-size: var(--ui-font-label) !important;
    margin: 0;
    padding: 0 8px !important;
    white-space: nowrap;
}

/* Labeled field: label row above a control row. */
body.admin-ui :is(.line-field, .garment-field) {
    display: grid;
    gap: 4px;
    grid-template-rows: 14px var(--ui-control-height);
    margin: 0;
    min-width: 0;
    width: 100%;
}

body.admin-ui :is(.line-field, .garment-field) > span:first-child {
    align-self: end;
    line-height: 1;
}

body.admin-ui :is(.line-field, .garment-field) > :is(input, select, .style-picker-wrapper) {
    max-width: none;
    min-width: 0;
    width: 100%;
}

body.admin-ui .line-description-field {
    flex: 1 1 auto;
}

body.admin-ui .line-colors-field {
    flex: 0 0 68px;
}

/* Light-ink checkbox row, visually attached to the printing card above it. */
body.admin-ui .line-items-table tr.preset-addon-row {
    background: var(--ui-canvas);
    border: 1px solid var(--ui-border);
    border-top: 0;
    display: block;
    margin: calc(-1 * var(--ui-pad-inner) - 1px) 0 var(--ui-pad-inner);
    padding: 6px var(--ui-pad-inner) 10px calc(var(--ui-pad-inner) + 30px);
}

body.admin-ui .line-items-table tr.preset-addon-row > td {
    background: transparent;
    border: 0;
    display: block;
    padding: 0;
}

body.admin-ui .preset-light-ink-label {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: var(--ui-gap);
    height: 24px;
    margin: 0;
    white-space: nowrap;
    width: max-content;
}

/* Alternating shades: odd = canvas, even = surface; raised inputs stay distinct on both. */
body.admin-ui :is(.line-items-table tr.alt, .garment-line-items .size-row.alt) {
    background: var(--ui-surface);
}

/* Drag handles (line items and garment cards). */
body.admin-ui .line-item-drag-handle {
    align-items: center;
    align-self: end;
    background: transparent;
    border: 0;
    color: var(--ui-text);
    cursor: grab;
    display: inline-flex;
    flex: 0 0 20px;
    font-size: var(--ui-font-icon) !important;
    height: var(--ui-control-height);
    justify-content: center;
    margin: 0;
    opacity: 0.5;
    padding: 0;
    position: static;
    transform: none;
    width: 20px;
}

body.admin-ui .line-item-drag-handle:active {
    cursor: grabbing;
}

body.admin-ui .line-item-dragging {
    opacity: 0.45;
}

/* 12. GARMENT CARDS -------------------------------------------------- */
body.admin-ui .garment-line-items .size-row {
    background: var(--ui-canvas);
    border: 1px solid var(--ui-border);
    margin: 0 0 var(--ui-pad-inner);
    padding: var(--ui-pad-inner);
    position: relative;
}

body.admin-ui .garment-line-items .size-row-header {
    align-items: end;
    display: grid;
    gap: var(--ui-gap-lg);
    grid-template-areas: "handle style color rate remove";
    grid-template-columns: 20px minmax(0, 1fr) 170px 110px 120px;
    margin: 0 0 var(--ui-pad-inner);
    padding: 0;
}

body.admin-ui .garment-line-items .garment-drag-handle { grid-area: handle; }
body.admin-ui .garment-line-items .garment-style-field { grid-area: style; }
body.admin-ui .garment-line-items .garment-color-field { grid-area: color; }
body.admin-ui .garment-line-items .garment-rate-field { grid-area: rate; }
body.admin-ui .garment-line-items .size-row-header > .btn-delete { grid-area: remove; justify-self: end; }

body.admin-ui .garment-item-actions {
    align-items: center;
    display: flex;
    gap: 6px;
    grid-area: remove;
    justify-content: flex-end;
}

body.admin-ui .garment-line-items .style-picker-wrapper {
    display: block;
    position: relative;
}

body.admin-ui .garment-line-items .style-picker-wrapper input {
    margin: 0;
    width: 100%;
}

body.admin-ui .ticket-detail-page .style-results {
    background: var(--ui-raised);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
}

body.admin-ui .style-result:hover {
    background: var(--ui-border);
}

body.admin-ui .garment-line-items .size-table-container {
    margin: 0;
    overflow-x: auto;
}

/* 13. QUOTE TOTALS & MENUS ------------------------------------------ */
body.admin-ui .quote-actions {
    margin: var(--ui-gap-lg) 0 0;
}

body.admin-ui .quote-actions .add-item-btn {
    min-width: 144px;
}

body.admin-ui .sizes-saved-msg {
    margin: 6px 0 0;
    min-height: 16px;
}

body.admin-ui .quote-totals {
    border: 0;
    display: grid;
    gap: var(--ui-gap);
    margin: 16px 0 0 auto;
    padding: 0;
    width: min(100%, 330px);
}

body.admin-ui .quote-totals .totals-row {
    align-items: center;
    display: grid;
    gap: var(--ui-gap-lg);
    grid-template-columns: minmax(0, 1fr) 132px;
    margin: 0;
}

body.admin-ui .quote-totals .totals-row label {
    margin: 0;
}

body.admin-ui .quote-totals .totals-row :is(input, select) {
    max-width: none;
    width: 100%;
}

body.admin-ui .quote-totals .totals-row:last-child {
    color: var(--ui-accent);
}

/* Add Line Item preset menu (appended to <body>). */
body.admin-ui .add-item-menu {
    background: var(--ui-raised);
    border: 1px solid var(--ui-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 4px;
    position: absolute;
    z-index: 1000;
}

body.admin-ui .add-item-menu-option {
    background: transparent;
    border: 0;
    color: var(--ui-text);
    cursor: pointer;
    font: inherit;
    padding: var(--ui-gap) var(--ui-gap-lg);
    text-align: left;
}

body.admin-ui .add-item-menu-option:is(:hover, :focus) {
    background: var(--ui-border);
    color: var(--ui-accent);
    outline: none;
}

body.admin-ui .quote-save-feedback {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap);
    margin-left: auto;
    min-height: var(--ui-control-height);
}

body.admin-ui .quote-save-status {
    color: var(--ui-text);
    font-size: var(--ui-font-body) !important;
    opacity: var(--ui-label-opacity);
}

body.admin-ui .quote-save-status[data-state="saved"] {
    color: var(--ui-accent);
    opacity: 1;
}

body.admin-ui .quote-save-status[data-state="error"],
body.admin-ui .quote-save-status[data-state="load-error"] {
    color: var(--ui-danger);
    opacity: 1;
}

/* Standard admin pages ---------------------------------------------- */
/* Shared layout for admin pages migrated off the legacy styles.css look.
   Opt in with <body class="admin-ui admin-standard">. Dashboard, Create Ticket,
   and Ticket Details keep their own rules below and do not use this class. */
body.admin-ui.admin-standard .page-container {
    max-width: 900px;
    padding-bottom: var(--ui-pad);
    padding-top: var(--ui-pad);
}

body.admin-ui.admin-standard .page-container .card,
body.admin-ui.admin-standard .page-container .card :is(p, label, input, select, textarea, th, td, li, .btn) {
    font-size: var(--ui-font-body) !important;
}

body.admin-ui.admin-standard .page-container .card {
    backdrop-filter: none;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    color: var(--ui-text);
    margin-bottom: var(--ui-pad);
    padding: var(--ui-pad);
}

body.admin-ui.admin-standard .page-container .card:hover {
    border-color: var(--ui-border);
}

body.admin-ui.admin-standard .page-container .card:focus-within {
    border-color: var(--ui-accent);
}

/* First heading in a card becomes the charcoal header band. */
body.admin-ui.admin-standard .page-container .card > :is(h1, h2, h3):first-child {
    align-items: center;
    background: var(--ui-canvas);
    color: var(--ui-text);
    display: flex;
    font-size: var(--ui-font-title) !important;
    font-weight: 600;
    gap: var(--ui-gap);
    justify-content: space-between;
    letter-spacing: 0;
    line-height: 1;
    margin: calc(-1 * var(--ui-pad)) calc(-1 * var(--ui-pad)) var(--ui-pad);
    min-height: var(--ui-header-height);
    padding: 0 var(--ui-pad);
    text-transform: uppercase;
}

body.admin-ui.admin-standard .page-container .card > :is(h1, h2, h3):only-child {
    margin-bottom: calc(-1 * var(--ui-pad));
}

body.admin-ui.admin-standard .page-container .card label {
    color: var(--ui-text);
    display: block;
    font-weight: 500;
    letter-spacing: 0;
    margin: var(--ui-gap-lg) 0 6px;
    opacity: var(--ui-label-opacity);
    text-transform: uppercase;
}

body.admin-ui.admin-standard .page-container .card > :is(input, select, textarea) {
    margin: 0;
    width: 100%;
}

body.admin-ui.admin-standard .page-container .card > :is(input, select, textarea) + :is(input, select, textarea) {
    margin-top: var(--ui-gap-lg);
}

body.admin-ui.admin-standard .page-container .card .fullwidth-btn {
    width: 100%;
}

body.admin-ui.admin-standard .page-container .card > p:empty {
    display: none;
}

body.admin-ui.admin-standard .page-container .card .btn {
    margin-top: var(--ui-pad-inner);
}

body.admin-ui.admin-standard .page-container > .btn {
    margin: 0;
}

body.admin-ui.admin-standard .page-container .card table {
    border-collapse: collapse;
    width: 100%;
}

body.admin-ui.admin-standard .page-container .card :is(th, td) {
    border: 0;
    padding: 0 var(--ui-gap) var(--ui-gap) 0;
    text-align: left;
    vertical-align: middle;
}

body.admin-ui.admin-standard .page-container .card th {
    background: transparent;
    color: var(--ui-text);
    font-weight: 500;
    opacity: var(--ui-label-opacity);
    text-transform: uppercase;
}

body.admin-ui.admin-standard .page-container .card :is(th, td):last-child {
    padding-right: 0;
}

body.admin-ui.admin-standard .page-container .card td input {
    margin: 0;
    width: 100%;
}

body.admin-ui.admin-standard .page-container .totals-row {
    align-items: center;
    display: flex;
    gap: var(--ui-gap-lg);
    margin: 0 0 var(--ui-gap);
}

body.admin-ui.admin-standard .page-container .totals-row label {
    flex: 0 0 120px;
    margin: 0;
    min-width: 0;
}

body.admin-ui.admin-standard .page-container .totals-row :is(input, select) {
    flex: 1 1 auto;
    margin: 0;
    width: auto;
}

@media (max-width: 600px) {
    body.admin-ui.admin-standard .page-container .card {
        padding: var(--ui-pad-inner);
    }

    body.admin-ui.admin-standard .page-container .card > :is(h1, h2, h3):first-child {
        margin: calc(-1 * var(--ui-pad-inner)) calc(-1 * var(--ui-pad-inner)) var(--ui-pad-inner);
        padding: 0 var(--ui-pad-inner);
    }

    body.admin-ui.admin-standard .page-container .card > :is(h1, h2, h3):only-child {
        margin-bottom: calc(-1 * var(--ui-pad-inner));
    }
}

/* Create ticket ----------------------------------------------------- */
body.admin-ui.create-ticket-page .page-container {
    max-width: 900px;
    padding-bottom: var(--ui-pad);
    padding-top: var(--ui-pad);
}

body.admin-ui.create-ticket-page .create-ticket-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    margin: 0 auto;
    max-width: 680px;
    padding: var(--ui-pad);
}

body.admin-ui.create-ticket-page .create-ticket-heading {
    align-items: center;
    background: var(--ui-canvas);
    color: var(--ui-text);
    display: flex;
    font-size: var(--ui-font-title) !important;
    font-weight: 600;
    letter-spacing: 0;
    margin: calc(-1 * var(--ui-pad)) calc(-1 * var(--ui-pad)) var(--ui-pad);
    min-height: var(--ui-header-height);
    padding: 0 var(--ui-pad);
    text-transform: uppercase;
}

body.admin-ui.create-ticket-page #createTicketForm > label {
    color: var(--ui-text);
    display: block;
    font-size: var(--ui-font-label) !important;
    font-weight: 500;
    margin: var(--ui-gap-lg) 0 6px;
    opacity: var(--ui-label-opacity);
    text-transform: uppercase;
}

body.admin-ui.create-ticket-page #createTicketForm .form-row {
    align-items: end;
    gap: var(--ui-gap-lg);
}

body.admin-ui.create-ticket-page #createTicketForm .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

body.admin-ui.create-ticket-page #createTicketForm .form-group label {
    color: var(--ui-text);
    font-size: var(--ui-font-label) !important;
    font-weight: 500;
    margin: 0;
    opacity: var(--ui-label-opacity);
    text-transform: uppercase;
}

body.admin-ui.create-ticket-page #createTicketForm > :is(input, select, textarea) {
    margin: 0;
    width: 100%;
}

body.admin-ui.create-ticket-page #fileContainer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap-lg);
}

body.admin-ui.create-ticket-page .artwork-file-button {
    cursor: pointer;
    flex: 0 0 auto;
    margin: 0;
}

body.admin-ui.create-ticket-page .artwork-file-button:focus-visible {
    outline: 1px solid var(--ui-text);
    outline-offset: 2px;
}

body.admin-ui.create-ticket-page .artwork-file-names {
    color: var(--ui-text);
    font-size: var(--ui-font-body) !important;
    min-width: 0;
    overflow-wrap: anywhere;
    opacity: var(--ui-label-opacity);
}

body.admin-ui.create-ticket-page #sourceTicketNumber {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

body.admin-ui.create-ticket-page #findSourceTicket {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
}

body.admin-ui.create-ticket-page .fullwidth-btn {
    margin: var(--ui-pad-inner) 0 0;
    width: 100%;
}

@media (max-width: 600px) {
    body.admin-ui.create-ticket-page .create-ticket-card {
        padding: var(--ui-pad-inner);
    }

    body.admin-ui.create-ticket-page .create-ticket-heading {
        margin: calc(-1 * var(--ui-pad-inner)) calc(-1 * var(--ui-pad-inner)) var(--ui-pad-inner);
        padding: 0 var(--ui-pad-inner);
    }

    body.admin-ui.create-ticket-page #createTicketForm .form-row {
        align-items: stretch;
    }
}

/* Dashboard --------------------------------------------------------- */
body.admin-ui.dashboard-page .dashboard-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    max-width: none;
    padding: var(--ui-pad);
    width: 100%;
}

body.admin-ui.dashboard-page .dashboard-search-row {
    margin-bottom: var(--ui-pad-inner);
}

body.admin-ui.dashboard-page .dashboard-search-input {
    font-size: var(--ui-font-body) !important;
    width: 100%;
}

body.admin-ui.dashboard-page :is(.dashboard-loading, .dashboard-empty) {
    color: var(--ui-text);
    opacity: var(--ui-label-opacity);
}

body.admin-ui.dashboard-page .status-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-pad);
}

body.admin-ui.dashboard-page .status-group-header {
    color: var(--ui-text);
    font-size: var(--ui-font-title) !important;
    letter-spacing: 0;
    margin: 0 0 var(--ui-gap-lg);
    text-transform: uppercase;
}

body.admin-ui.dashboard-page .status-group-count {
    color: var(--ui-text);
    font-weight: 400;
    margin-left: var(--ui-gap);
    opacity: var(--ui-label-opacity);
}

body.admin-ui.dashboard-page .jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-gap);
}

body.admin-ui.dashboard-page .jobs-list.drag-over-list {
    background: var(--ui-canvas);
    border-radius: 0;
    min-height: 60px;
    outline: 1px dashed var(--ui-accent);
    outline-offset: -2px;
}

body.admin-ui.dashboard-page .job-card {
    background: var(--ui-canvas);
    border: 1px solid var(--ui-border);
    gap: var(--ui-gap-lg);
    min-height: 56px;
    padding: var(--ui-pad-inner);
    transition: border-color 160ms ease, opacity 160ms ease;
}

body.admin-ui.dashboard-page .job-card:hover {
    background: var(--ui-canvas);
    border-color: var(--ui-accent);
}

body.admin-ui.dashboard-page .job-card.archived-job {
    border-left-color: var(--ui-border);
}

body.admin-ui.dashboard-page .job-card.has-notes {
    border-left-color: var(--ui-accent);
}

body.admin-ui.dashboard-page :is(.job-ticket, .job-customer, .job-name, .job-date) {
    color: var(--ui-text);
    font-size: var(--ui-font-body) !important;
}

body.admin-ui.dashboard-page .job-ticket {
    color: var(--ui-accent);
    font-weight: 600;
}

body.admin-ui.dashboard-page .job-label {
    color: var(--ui-text);
    font-size: var(--ui-font-label) !important;
    opacity: var(--ui-label-opacity);
    text-transform: uppercase;
}

body.admin-ui.dashboard-page .job-drag-handle {
    color: var(--ui-text);
    opacity: var(--ui-label-opacity);
}

body.admin-ui.dashboard-page .status-dropdown {
    font-size: var(--ui-font-body) !important;
    height: var(--ui-control-height) !important;
    line-height: 1 !important;
    padding: 0 30px 0 10px !important;
}

/* 13b. PUBLIC FORM CARDS --------------------------------------------- */
/* Any card that wraps a <form> on a public page (home quote, contact,
   presale contact) gets the same solid surface, labels and spacing as
   the admin Create Ticket form. Admin pages use admin-standard instead. */
body.admin-ui:not(.admin-page) .card:has(> form) {
    backdrop-filter: none;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    padding: 32px;
    transform: none;
}

body.admin-ui:not(.admin-page) .card:has(> form):hover {
    border-color: var(--ui-border);
    transform: none;
}

body.admin-ui:not(.admin-page) .card:has(> form):focus-within {
    border-color: var(--ui-accent);
}

body.admin-ui:not(.admin-page) .card > form label {
    color: var(--ui-text);
    display: block;
    font-size: var(--ui-font-label) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0 0 6px;
    opacity: var(--ui-label-opacity);
    text-transform: uppercase;
}

body.admin-ui:not(.admin-page) .card > form :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 14px;
    margin: 0 0 var(--ui-pad);
    width: 100%;
}

body.admin-ui:not(.admin-page) .card > form .field-hint-wrap {
    margin: 0 0 4px;
    padding-bottom: 20px;
}

body.admin-ui:not(.admin-page) .card > form .field-hint-wrap > :is(input, select, textarea) {
    margin-bottom: 0 !important;
}

body.admin-ui:not(.admin-page) .card > form .field-hint {
    font-size: 12px;
}

body.admin-ui:not(.admin-page) .card > form .form-row {
    gap: var(--ui-pad);
    margin: 0;
}

body.admin-ui:not(.admin-page) .card > form .form-row .form-group {
    margin: 0;
    min-width: 0;
}

body.admin-ui:not(.admin-page) .card > form #fileContainer {
    display: flex;
    flex-direction: column;
    gap: var(--ui-gap);
    margin: 0 0 var(--ui-pad);
}

body.admin-ui:not(.admin-page) .card > form #addFileBtn {
    margin: 0 0 var(--ui-pad) !important;
}

body.admin-ui:not(.admin-page) .card > form button[type="submit"] {
    margin-top: var(--ui-gap) !important;
}

body.admin-ui:not(.admin-page) .card > form button[type="submit"].fullwidth-btn {
    height: 42px;
    width: 100%;
}

/* 14. RESPONSIVE ----------------------------------------------------- */
@media (max-width: 900px) {
    body.admin-ui #ticketInfo .ticket-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-ui #ticketInfo .detail-row-job-name {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    body.admin-ui .line-items-table tr:not(.preset-addon-row) {
        grid-template-areas:
            "description description description"
            "qty rate total"
            "remove remove remove";
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.admin-ui .garment-line-items .size-row-header {
        grid-template-areas:
            "handle style style"
            "handle color rate"
            "remove remove remove";
        grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr);
    }

    body.admin-ui .quote-actions .add-item-btn {
        flex: 1 1 144px;
    }

    body.admin-ui .quote-totals {
        margin-left: 0;
        width: 100%;
    }

    /* styles.css turns size tables into stacked cards on mobile; keep them as scrollable tables. */
    body.admin-ui .size-table-container {
        overflow-x: auto;
    }

    body.admin-ui .size-table {
        display: table;
    }

    body.admin-ui .size-table :is(tr.size-headers, tr.size-inputs) {
        display: table-row;
    }

    body.admin-ui .size-table :is(th, td, td.row-total) {
        border: 1px solid var(--ui-border);
        display: table-cell;
        margin: 0;
        min-width: 60px;
        padding: 0;
        width: 60px;
    }

    body.admin-ui .size-table th {
        padding: 8px 6px;
    }

    body.admin-ui .size-table td::before {
        content: none;
        display: none;
    }

    body.admin-ui .size-table td.row-total {
        color: var(--ui-accent);
        font-weight: 600;
        min-width: 70px;
        padding: 0 6px;
        width: 70px;
    }
}

@media (max-width: 640px) {
    body.admin-ui #ticketInfo .ticket-info-grid {
        grid-template-columns: 1fr;
    }
}