/* Shared presentation layer. Specificity keeps this consistent after AJAX page styles load. */
/* Variables live in tokens.css. */
/* Tabular figures only where numbers line up in columns; everywhere else they
   spread codes like SKU-0042 apart. */
body {font-size:var(--text-base);line-height:var(--leading-normal);}
body :is(td.is-numeric,th.is-numeric,[class*="crud-cell--quantity"],[class*="crud-cell--unit_"],[class*="crud-cell--cost"],[class*="crud-cell--reorder"],[class*="crud-cell--total"],.crud-qty-in,.crud-qty-out,.crud-summary-card strong,.dashboard-widget-value,.pos-total strong,.pos-product-price){font-variant-numeric:tabular-nums;}
body :is(button,input,select,textarea){font:inherit;}
body :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid color-mix(in srgb,var(--link) 55%,transparent);outline-offset:3px;}
body :is(button,a){-webkit-tap-highlight-color:transparent;}
body button:disabled{cursor:not-allowed;opacity:.55;}
body .app{height:100dvh;border-top:0;}
body .brand{padding:0 var(--space-5);border-color:var(--color-border);background:var(--color-surface);}
body .brand-logo{height:32px;max-width:170px;}
body .topbar{padding:0 var(--space-8);background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-color:var(--color-border);gap:var(--space-5);}
body .sidebar{background:var(--color-surface);}
body :is(.content,.crud-content){background:var(--color-bg);}
body .topbar-meta{display:flex;flex-direction:column;gap:2px;font-weight:400;}
.topbar-workspace{font-weight:var(--weight-semibold);font-size:var(--text-md);letter-spacing:var(--tracking-snug);color:var(--color-text);}
.topbar-workspace-label{font-size:var(--text-xs);color:var(--color-text-muted);}
body .topbar-links{display:flex;align-items:center;gap:18px;font-size:12px;}
.topbar-account{display:flex;align-items:center;gap:10px;}
.topbar-account-copy{display:flex;flex-direction:column;max-width:175px;}
.topbar-account-copy strong{font-size:12px;font-weight:600;text-overflow:ellipsis;overflow:hidden;}
.topbar-account-copy small{color:var(--muted);font-size:10px;text-overflow:ellipsis;overflow:hidden;}
body .topbar-avatar,.topbar-initial{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.topbar-initial{display:grid;place-items:center;background:color-mix(in srgb,var(--link) 10%,var(--panel-bg));color:var(--link);font-weight:700;}
body .language-switcher{margin:0;border:1px solid var(--line-soft);border-radius:7px;padding:3px;gap:2px;}
body .language-option{border:0;border-radius:4px;background:transparent;font-size:10px;padding:2px 5px;}
body .language-option+.language-option{border:0;}
body .language-option.is-active{background:var(--top-accent);}
body .topbar-links>a,body .logout-form button{color:var(--muted);font-size:12px;}
body .logout-form button{padding:7px 0;}
body .sidebar{padding:18px 12px 24px;border-color:var(--line-soft);scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
body .sidebar-label{padding:0 12px 12px;border:0;color:var(--color-text-faint);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);}
body .nav{padding:0;}
body .nav-link{position:relative;padding:8px 12px;min-height:38px;margin:1px 0;border:0;border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);gap:10px;transition:background var(--duration-fast) ease,color var(--duration-fast) ease;}
body .nav-link .icon{font-size:16px;width:18px;flex-shrink:0;color:var(--color-icon);transition:color var(--duration-fast) ease;}
body .nav-link.active{background:var(--color-primary-soft);color:var(--color-primary);font-weight:var(--weight-semibold);}
body .nav-link.active .icon{color:var(--color-primary);}
body .nav-link:hover{background:var(--color-surface-sunken);color:var(--color-text);text-decoration:none;}
body .nav-link:hover .icon{color:var(--color-text-secondary);}
body .nav-link.active:hover{background:var(--color-primary-soft-strong);color:var(--color-primary);}
body .nav-link.active:hover .icon{color:var(--color-primary);}
body .nav-group-label{padding:20px 12px 6px;margin:0;color:var(--color-text-faint);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);}
body .nav-separator{margin:16px 12px;background:var(--color-border);}
.navigation-toggle,.navigation-backdrop{display:none;}
/* No status bar: record counts live in each list's own toolbar and footer,
   so the desktop-style strip along the bottom only cost vertical space. */
body .workspace{grid-template-rows:var(--tabs-height) minmax(0,1fr);}
body .workspace--no-tabs{grid-template-rows:minmax(0,1fr);}
body .statusbar{display:none;}
body .workspace--no-tabs:has(>.pos-page){grid-template-rows:minmax(0,1fr);}
body :is(.content,.crud-content,.pos-page){padding:30px 32px 36px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
body .content-inner{max-width:1600px;margin:0 auto;}
body :is(.tabs,.crud-tabs){padding:0 28px;background:var(--panel-bg);border-color:var(--line-soft);gap:24px;}
body :is(.tab,.crud-tabs a){padding:0 2px;border:0;border-bottom:2px solid transparent;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;}
body :is(.tab,.crud-tabs a):hover{color:var(--color-text);text-decoration:none;}
body :is(.tab.active,.crud-tabs a.active){background:transparent;border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:var(--weight-semibold);}
body .statusbar{padding:0 32px;background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-muted);font-size:var(--text-xs);}
body :is(.page-heading,.crud-heading,.pos-heading){margin-bottom:var(--space-6);gap:var(--space-5);}
body :is(.page-heading h1,.crud-heading h1,.pos-heading h1){font-size:var(--text-3xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--color-text);}
body :is(.page-heading p,.crud-heading p){margin:6px 0 0;font-size:var(--text-base);color:var(--color-text-muted);max-width:720px;line-height:var(--leading-normal);}
body .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;font-size:var(--text-xs);margin-bottom:var(--space-2);color:var(--color-text-muted);}
body .breadcrumb a{color:var(--color-text-muted);}
body .breadcrumb a:hover{color:var(--color-text);text-decoration:none;}
.dashboard-eyebrow{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--color-primary);font-weight:var(--weight-semibold);margin-bottom:var(--space-2);text-transform:uppercase;}
.dashboard-actions{display:flex;gap:var(--space-3);flex-shrink:0;}
.workspace-action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);background:var(--color-surface);box-shadow:var(--shadow-xs);color:var(--color-text-secondary);white-space:nowrap;transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease;}
.workspace-action:hover{background:var(--color-surface-muted);color:var(--color-text);text-decoration:none;}
.workspace-action--primary,.workspace-action--primary:hover{background:var(--color-primary);border-color:transparent;color:var(--color-on-primary);}
.workspace-action--primary:hover{background:var(--color-primary-hover);}
body :is(.panel,.crud-panel,.pos-panel){border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);background:var(--color-surface);}
body :is(.panel-head,.crud-panel-title){min-height:56px;padding:var(--space-4) var(--space-5);background:transparent;border-bottom:1px solid var(--color-border);color:var(--color-text);font-size:var(--text-md);font-weight:var(--weight-semibold);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
body :is(.crud-panel-title,.panel-head) .icon{color:var(--color-icon);}
body :is(.crud-button,.button,.settings-button,.settings-save-button,.app-confirm__button){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-xs);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1;text-decoration:none;cursor:pointer;transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease,color var(--duration-fast) ease;}
body :is(.crud-button,.button,.settings-button,.settings-save-button,.app-confirm__button):hover{background:var(--color-surface-muted);color:var(--color-text);text-decoration:none;}
body :is(.crud-button,.button,.settings-button,.settings-save-button,.app-confirm__button) .icon{color:currentColor;opacity:.85;}
body :is(.crud-button--primary,.settings-save-button,.app-confirm__button--accept){border-color:transparent;background:var(--color-primary);color:var(--color-on-primary);}
body :is(.crud-button--primary,.settings-save-button,.app-confirm__button--accept):hover{background:var(--color-primary-hover);color:var(--color-on-primary);}
body :is(.crud-button--primary,.settings-save-button,.app-confirm__button--accept):active{background:var(--color-primary-active);}
body :is(.crud-button--danger,.app-confirm__button--accept.is-danger){border-color:transparent;background:var(--color-danger);color:var(--color-on-primary);}
body :is(.crud-button--danger,.app-confirm__button--accept.is-danger):hover{background:var(--color-danger-hover);color:var(--color-on-primary);}
body .crud-summary{gap:var(--space-4);margin-bottom:var(--space-6);}
body .crud-summary-card{--card-tone:var(--color-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5) 64px var(--space-5) var(--space-5);min-height:112px;background:var(--color-surface);box-shadow:var(--shadow-xs);}
body .crud-summary-card>span{color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-medium);}
body .crud-summary-card strong{font-size:var(--text-3xl);margin-top:var(--space-2);color:var(--color-text);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);overflow-wrap:normal;}
body .crud-summary-card>.icon{right:var(--space-5);top:var(--space-5);width:36px;height:36px;padding:9px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--card-tone) 12%,transparent);color:var(--card-tone);opacity:1;}
body .crud-summary-value span{font-size:var(--text-xl);color:var(--color-text);}
/* Filters wrap onto as many rows as they need. A module with many filterable
   fields (inventory has nine) used to force one long row wider than the panel,
   which pushed the whole page sideways and cut off its left edge. */
body .crud-filter{flex-wrap:wrap;align-items:flex-end;padding:var(--space-4) var(--space-5);gap:var(--space-3) var(--space-4);background:transparent;border-color:var(--color-border);}
body .crud-filter>label{flex:1 1 180px;min-width:0;max-width:280px;}
body .crud-filter>label.crud-filter-search{flex:2 1 320px;max-width:none;}
body .crud-filter>:is(.crud-button,a.crud-button,button){flex:0 0 auto;}
body .crud-filter :is(input,select,.searchable-select){width:100%;min-width:0;}
body .crud-filter select{text-overflow:ellipsis;}
body :is(.crud-panel,.panel){min-width:0;max-width:100%;}
body .crud-table-wrap{max-width:100%;}

/* List toolbar: search, a Filters popover, and the record count on one line. */
body .crud-filter--toolbar{flex-wrap:nowrap;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);}
/* label.crud-filter-search matches the wrapping-filter rule above, so the same
   specificity is needed here or search stretches and shoves Filters to the far edge. */
body .crud-filter--toolbar>label.crud-filter-search{flex:0 1 340px;max-width:340px;min-width:160px;display:block;}
/* A popover must never widen the page: the list area clips sideways overflow,
   and the table keeps its own horizontal scroller. */
body .crud-content{overflow-x:hidden;}
body .crud-filter--toolbar .crud-filter-search>div{position:relative;}
body .crud-filter--toolbar .crud-filter-search input{height:36px;min-height:36px;padding-left:36px;font-size:var(--text-sm);}
body .crud-filter--toolbar .crud-filter-search .icon{left:12px;color:var(--color-icon);}
body .crud-filter--toolbar .crud-button{height:36px;min-height:36px;padding:0 var(--space-3);}
body .crud-button--ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--color-text-muted);}
body .crud-button--ghost:hover{background:var(--color-surface-sunken);color:var(--color-text);}
.crud-toolbar-meta{margin-left:auto;color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;}
.crud-filter-more{position:relative;}
.crud-filter-more>summary{list-style:none;user-select:none;}
.crud-filter-more>summary::-webkit-details-marker{display:none;}
.crud-filter-more[open]>summary{background:var(--color-surface-sunken);border-color:var(--color-border-strong);color:var(--color-text);}
.crud-filter-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-2xs);font-weight:var(--weight-semibold);line-height:1;}
.crud-filter-panel{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:min(580px,calc(100vw - var(--layout-sidebar) - 96px));min-width:280px;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.crud-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4);}
body .crud-filter-grid>label{display:grid;gap:6px;min-width:0;max-width:none;flex:none;font-weight:var(--weight-regular);}
body .crud-filter .crud-filter-grid>label>span{margin:0;color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--weight-medium);}
.crud-filter-panel-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border);}
@media(max-width:760px){
    body .crud-filter--toolbar{flex-wrap:wrap;}
    body .crud-filter--toolbar>label.crud-filter-search{flex:1 1 100%;max-width:none;}
    .crud-filter-grid{grid-template-columns:1fr;}
    .crud-filter-panel{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:70dvh;overflow:auto;}
}

/* Controls read as values, not labels: regular weight whatever their label says. */
body :is(.crud-field,.crud-filter,.crud-line-form,.settings-form,.settings-control,.access-form-row,.pos-field,.logs-filter,.logs-setting-field,.profile-field,.profile-password-form,.labels-field)
     :is(input,select,textarea),
body .searchable-select-input{font-weight:var(--weight-regular);}

/* Native selects get the same chevron as the searchable ones. */
body :is(.crud-field,.crud-filter,.crud-line-form,.settings-form,.settings-control,.access-form-row,.pos-field,.logs-filter,.logs-setting-field,.profile-field,.labels-field) select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2398a2b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px;text-overflow:ellipsis;}

/* Money on a summary card: the currency is a quiet prefix, so the figure fits one line. */
body .crud-summary-card strong{white-space:nowrap;}
body .crud-summary-card .crud-summary-currency{display:inline;margin-right:6px;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:0;vertical-align:.35em;}
body .crud-summary-value span{display:block;font-size:var(--text-3xl);}
/* Form controls: one appearance everywhere ------------------------------- */
/* Every screen's own stylesheet loads before this one, so this is the single
   place that decides how a field looks. Layout (label above, label beside)
   stays with each screen; only the control itself is unified here. */
body :is(.crud-field,.crud-filter,.crud-line-form,.settings-form,.settings-control,.login-form,.access-form-row,.pos-field,.pos-tender,.logs-filter,.logs-setting-field,.profile-field,.profile-password-form,.labels-field)
     :is(input:where(:not([type="checkbox"],[type="radio"],[type="file"],[type="hidden"])),select,textarea),
body :is(.searchable-select-input,.datepicker-input){
    min-height:var(--field-height);
    padding:var(--field-padding);
    border:1px solid var(--line);
    border-radius:var(--field-radius);
    background:var(--field-bg);
    color:var(--text);
    font-size:var(--field-font);
    box-shadow:none;
}
body :is(.crud-field,.crud-line-form,.settings-form,.settings-control,.access-form-row) textarea{min-height:104px;resize:vertical;}
body :is(.crud-field,.crud-filter,.crud-line-form,.settings-form,.settings-control,.login-form,.access-form-row,.pos-field,.pos-tender,.logs-filter,.logs-setting-field,.profile-field,.profile-password-form,.labels-field)
     :is(input,select,textarea)::placeholder,
body :is(.searchable-select-input,.datepicker-input)::placeholder{color:var(--muted);opacity:1;}

/* One focus ring, so tabbing through a form never changes character. */
body :is(.crud-field,.crud-filter,.crud-line-form,.settings-form,.settings-control,.login-form,.access-form-row,.pos-field,.pos-tender,.logs-filter,.logs-setting-field,.profile-field,.profile-password-form,.labels-field)
     :is(input,select,textarea):focus,
body :is(.searchable-select-input,.datepicker-input):focus,
body .searchable-select.is-open .searchable-select-input{
    outline:none;
    border-color:var(--link);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 18%,transparent);
}
body :is(.crud-field,.crud-filter,.crud-line-form,.settings-form,.settings-control,.login-form,.access-form-row,.pos-field,.logs-filter,.logs-setting-field,.profile-field,.profile-password-form,.labels-field)
     :is(input,select,textarea):disabled{background:var(--summary-bg);color:var(--muted);cursor:not-allowed;}

/* A rejected field reads the same on every screen. */
body :is(.crud-field,.crud-line-form,.settings-form,.settings-control,.access-form-row)
     :is(input,select,textarea)[aria-invalid="true"],
body :is(.crud-field,.crud-line-field).has-error :is(input,select,textarea,.searchable-select-input){border-color:var(--color-danger);}
body :is(.crud-field,.crud-line-form,.settings-form,.settings-control,.access-form-row)
     :is(input,select,textarea)[aria-invalid="true"]:focus,
body :is(.crud-field,.crud-line-field).has-error :is(input,select,textarea,.searchable-select-input):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 20%,transparent);}

body :is(.searchable-select-input,.datepicker-input){padding-right:34px;}
body :is(.crud-filter-search,.labels-search-box) input{padding-left:34px;}
body :is(.crud-filter label>span,.crud-field>span){color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);margin-bottom:6px;}
body .searchable-select-toggle{height:36px;}
body .searchable-select-list,body .datepicker-panel{border-color:var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lg);padding:6px;}
body .searchable-select-option{padding:8px 10px;border-radius:var(--radius-sm);font-size:var(--text-sm);}
body .searchable-select-option:hover,body .searchable-select-option.is-active{background:var(--color-surface-sunken);color:var(--color-text);}
body .searchable-select-option[aria-selected="true"]{color:var(--color-primary);font-weight:var(--weight-semibold);}
body .datepicker-day.is-selected{background:var(--color-primary);border-color:transparent;color:var(--color-on-primary);border-radius:var(--radius-sm);}
body :is(.datepicker-nav,.datepicker-action,.datepicker-day){border-radius:var(--radius-sm);}
body table{font-size:var(--text-sm);}
body :is(.crud-table th,.crud-table td){padding:12px 16px;border-right:0;border-color:var(--color-border);}
body .crud-table th{background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;}
body .crud-table th a{color:var(--color-text-muted);}
body .crud-table th a:hover{color:var(--color-text);text-decoration:none;}
body .crud-table td{height:52px;color:var(--color-text-secondary);}
body .crud-table tbody tr:last-child td{border-bottom:0;}
body .crud-record-title{font-weight:var(--weight-medium);color:var(--color-text);}
body .crud-table tbody tr:hover td{background:var(--color-surface-muted);}
/* The class sits on the <td>, so it must stay a table cell or its border
   stops lining up with the rest of the row. */
body td.crud-row-actions{white-space:nowrap;text-align:right;}
body .crud-table th.crud-actions-column{text-align:right;}
body .crud-row-actions a{display:inline-grid;place-items:center;vertical-align:middle;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--color-icon);}
body .crud-row-actions a+a{margin-left:2px;border:1px solid transparent;}
body .crud-row-actions a:hover{background:var(--color-surface-sunken);border-color:var(--color-border);color:var(--color-text);}
body .crud-pagination{border-top:1px solid var(--color-border);padding:var(--space-3) var(--space-5);background:transparent;border-radius:0 0 var(--radius-lg) var(--radius-lg);font-size:var(--text-sm);color:var(--color-text-muted);}
body .crud-empty{padding:64px 24px;}
body .crud-empty>.icon{width:48px;height:48px;padding:12px;border-radius:50%;background:var(--color-surface-sunken);color:var(--color-icon);}
body .crud-empty strong{font-size:var(--text-md);font-weight:var(--weight-semibold);}
body .crud-thumb{width:40px;height:40px;border:1px solid var(--color-border);border-radius:var(--radius-md);object-fit:cover;}
body .crud-form-grid{padding:var(--space-2);}
body .crud-field,body .crud-field:nth-child(even){padding:var(--space-3) var(--space-4);border:0;background:transparent;}
body .crud-field small{color:var(--color-text-muted);font-size:var(--text-xs);line-height:var(--leading-normal);margin-top:2px;}
body .crud-form-actions{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);background:var(--color-surface-muted);border-radius:0 0 var(--radius-lg) var(--radius-lg);gap:var(--space-3);}
body .crud-details>div,body .crud-details>div:nth-child(even){padding:var(--space-4) var(--space-5);background:transparent;border-color:var(--color-border);}
body .crud-details dt{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-medium);text-transform:none;margin-bottom:4px;}
body .crud-details dd{color:var(--color-text);font-size:var(--text-base);}
body :is(.crud-modal__container,.app-modal__container){border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-xl);overflow:hidden;}
body :is(.crud-modal__overlay,.app-modal__overlay){background:var(--color-overlay);backdrop-filter:blur(4px);padding:24px;}
body :is(.crud-modal__header,.app-modal__header){min-height:64px;padding:var(--space-4) var(--space-6);background:var(--color-surface);border-color:var(--color-border);}
body :is(.crud-modal__title,.app-modal__title){color:var(--color-text);font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);}
body :is(.crud-modal__close,.app-modal__close){border:0;border-radius:var(--radius-md);width:34px;height:34px;background:transparent;color:var(--color-text-muted);}
body :is(.crud-modal__close,.app-modal__close):hover{background:var(--color-surface-sunken);color:var(--color-text);}
body :is(.app-modal__footer){padding:var(--space-4) var(--space-6);background:var(--color-surface-muted);border-color:var(--color-border);gap:var(--space-3);}
body :is(.crud-alert,.settings-alert,.login-error){border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);line-height:var(--leading-normal);}
body .dashboard-panel{background:transparent;border:0;box-shadow:none;}
body .dashboard-widgets{grid-template-columns:repeat(4,minmax(0,1fr));padding:0;background:transparent;border:0;}
body .chart-grid{padding:0;margin-top:var(--space-6);gap:var(--space-5);border:0;background:transparent;}
body .chart-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:4px 12px 16px;background:var(--color-surface);}
body .chart-card>header{padding:var(--space-4) var(--space-2);border:0;background:transparent;}
body .chart-card>header strong{color:var(--color-text);font-size:var(--text-md);font-weight:var(--weight-semibold);}
body .chart-card>header span{font-size:var(--text-xs);color:var(--color-text-muted);}
body .settings-content{max-width:1150px;}
body :is(.settings-form-row,.settings-row){border-color:var(--color-border);padding-top:var(--space-5);padding-bottom:var(--space-5);}
body .settings-form-row>label{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);}
body .settings-control small{color:var(--color-text-muted);font-size:var(--text-xs);}
body .pos-products .pos-product{border-color:var(--color-border);border-radius:var(--radius-lg);min-height:145px;}
body .pos-product:hover:not(:disabled){border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-focus-ring);background:var(--color-surface);}
body .pos-product strong{font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);}
body .pos-panel{padding:var(--space-6);}
body .pos-panel h2{font-size:var(--text-lg);font-weight:var(--weight-semibold);}
body .pos-page .pos-primary{background:var(--color-primary);border-color:transparent;}
@media(max-width:1200px){body .topbar-account-copy{display:none;}body .dashboard-widgets{grid-template-columns:repeat(3,minmax(0,1fr));}body :is(.content,.crud-content,.pos-page){padding:24px;}body .dashboard-widget{padding:16px;gap:10px;}}
@media(max-width:1000px){body .dashboard-widgets{grid-template-columns:repeat(2,minmax(0,1fr));}body .dashboard-widget-value{font-size:23px;}body .topbar{padding:0 20px;}body .topbar-links{gap:12px;}body .crud-summary{grid-template-columns:repeat(2,minmax(0,1fr));}body .dashboard-actions{flex-wrap:wrap;}}
@media(max-width:760px){
    body{--topbar-height:64px;--tabs-height:48px;}body .app{grid-template-columns:minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);}
    body .brand{display:none;}body .topbar{grid-column:1;grid-row:1;padding:0 16px;gap:12px;}
    body .workspace{grid-column:1;grid-row:2;}body .topbar-workspace-label{display:none;}body .topbar-account{display:none;}body .topbar-links{margin-left:auto;gap:12px;}body .language-option .icon{display:none;}
    .navigation-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:0 0 36px;width:36px;height:36px;padding:9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-bg);color:var(--text);cursor:pointer;position:relative;z-index:502;}
    .navigation-toggle span{display:block;height:2px;background:currentColor;width:16px;}
    body .sidebar{position:fixed;z-index:501;left:0;top:64px;bottom:0;width:260px;max-width:85vw;transform:translateX(-100%);visibility:hidden;transition:transform .18s ease,visibility .18s;background:var(--panel-bg);box-shadow:10px 0 30px rgb(10 30 45 / 10%);}
    body.navigation-open .sidebar{transform:translateX(0);visibility:visible;}
    body.navigation-open .navigation-backdrop{display:block;position:fixed;z-index:500;inset:64px 0 0;width:100%;height:calc(100dvh - 64px);border:0;background:rgb(15 30 45 / 35%);}
    body :is(.content,.crud-content,.pos-page){padding:22px 16px 28px;}body :is(.page-heading,.crud-heading){align-items:flex-start;flex-wrap:wrap;gap:16px;}body :is(.page-heading h1,.crud-heading h1,.pos-heading h1){font-size:25px;}
    body :is(.tabs,.crud-tabs){padding:0 16px;gap:20px;}body .statusbar{padding:0 16px;}
    body .crud-filter{flex-wrap:wrap;gap:12px;padding:16px;}body .crud-filter>label{flex:1 1 140px;min-width:0;}body .crud-filter .crud-filter-search{flex-basis:100%;}
    body .crud-summary{gap:10px;}body .crud-summary-card{padding:16px;min-height:100px;}body .crud-summary-card>.icon{display:none;}body .crud-summary-card strong{font-size:23px;}
    body .crud-form-grid{grid-template-columns:1fr;}body .crud-field{grid-column:1!important;}body :is(.crud-modal__overlay,.app-modal__overlay){padding:12px;}body :is(.crud-modal__container,.app-modal__container){max-height:calc(100dvh - 24px);height:auto;border-radius:12px;}
    body .dashboard-widget{min-height:132px;}body .dashboard-widget-icon{display:none;}body .chart-grid{grid-template-columns:1fr;}body .chart-card{grid-column:auto!important;}body .pos-panel{padding:18px;}
}
@media(max-width:420px){body .topbar-meta{max-width:85px;}body .topbar-links{gap:9px;}body .language-switcher{display:none;}body .dashboard-widget-value{font-size:21px;}body .dashboard-widgets{gap:10px;}body .crud-heading>.crud-button{width:100%;}}
@media(prefers-reduced-motion:reduce){body .sidebar,body .dashboard-widget{transition:none;}body .app.is-ajax-entering{animation:none;}}
@media print{body .navigation-toggle,body .navigation-backdrop{display:none!important;}}

/* Scrollable tab strips ---------------------------------------------------
   The settings and CRUD tab rows hold more tabs than fit. The native
   horizontal scrollbar used to eat ~11px of the row and left the overflow
   undiscoverable, so the strip is scrolled through edge fades and buttons
   instead. .tabs-scroller is added by workspace-ui.js. */

body .tabs-scroller {
    position: relative;
    min-width: 0;
    display: flex;
    isolation: isolate;
}

body .tabs-scroller>:is(.tabs, .crud-tabs) {
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 44px;
}

body .tabs-scroller>:is(.tabs, .crud-tabs)::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Fades sit above the strip and mark the direction that still has tabs. */
body .tabs-scroller::before,
body .tabs-scroller::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 1px;
    width: 68px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

body .tabs-scroller::before {
    left: 0;
    background: linear-gradient(90deg, var(--panel-bg) 22%, transparent);
}

body .tabs-scroller::after {
    right: 0;
    background: linear-gradient(270deg, var(--panel-bg) 22%, transparent);
}

body .tabs-scroller[data-overflow~="start"]::before,
body .tabs-scroller[data-overflow~="end"]::after {
    opacity: 1;
}

body .tabs-scroll-button {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    background: var(--panel-bg);
    box-shadow: var(--ui-shadow);
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 160ms ease, color 140ms ease, border-color 140ms ease;
}

body .tabs-scroll-button--prev {
    left: 6px;
}

body .tabs-scroll-button--next {
    right: 6px;
}

body .tabs-scroller[data-overflow~="start"] .tabs-scroll-button--prev,
body .tabs-scroller[data-overflow~="end"] .tabs-scroll-button--next {
    opacity: 1;
    visibility: visible;
}

body .tabs-scroll-button:hover {
    color: var(--link);
    border-color: var(--line);
}

body .tabs-scroll-button .icon {
    font-size: 13px;
}

@media(hover:none) {

    /* Touch users swipe the strip, so the buttons would only cover tabs. */
    body .tabs-scroll-button {
        display: none;
    }
}

@media(prefers-reduced-motion:reduce) {

    body .tabs-scroller::before,
    body .tabs-scroller::after,
    body .tabs-scroll-button {
        transition: none;
    }
}

/* Top bar actions ---------------------------------------------------------
   Help, Profile and Sign out were bare text of differing box sizes with no
   hover target. They now share one 32px pill, and the identity block is
   fenced off from the actions so the two groups read apart. */

body .topbar-links {
    gap: 4px;
}

body .topbar-account {
    padding-right: 16px;
    margin-right: 4px;
    border-right: 1px solid var(--line-soft);
}

body .language-switcher {
    margin-right: 4px;
}

body .logout-form {
    display: inline-flex;
}

body .topbar-links>a,
body .logout-form button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    background: transparent;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

body .topbar-links>a:hover,
body .topbar-links>a:focus-visible {
    background: var(--button-hover);
    color: var(--text);
    text-decoration: none;
}

/* Sign out is the one destructive action here, so its hover says so. */
body .logout-form button:hover,
body .logout-form button:focus-visible {
    background: color-mix(in srgb, var(--chart-6) 12%, transparent);
    color: var(--chart-6);
    text-decoration: none;
}

body .logout-form button .icon {
    font-size: 14px;
    color: var(--icon);
    transition: color 140ms ease;
}

body .logout-form button:hover .icon {
    color: var(--chart-6);
}

/* Sidebar scrollbar -------------------------------------------------------
   An always-drawn track cut a hard line down the navigation. It now behaves
   like an overlay scrollbar: present while pointing at or tabbing through the
   nav, invisible otherwise. The element stays scrollable either way. */

body .sidebar {
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 160ms ease;
}

body .sidebar:hover,
body .sidebar:focus-within {
    scrollbar-color: var(--line) transparent;
}

body .sidebar::-webkit-scrollbar {
    width: 10px;
}

body .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

body .sidebar::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 99px;
    background: transparent;
    background-clip: content-box;
}

body .sidebar:hover::-webkit-scrollbar-thumb,
body .sidebar:focus-within::-webkit-scrollbar-thumb {
    background: var(--line);
    background-clip: content-box;
}

body .sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--line-dark);
    background-clip: content-box;
}

@media(prefers-reduced-motion:reduce) {

    body .topbar-links>a,
    body .logout-form button,
    body .logout-form button .icon,
    body .sidebar {
        transition: none;
    }
}

/* Language switcher ------------------------------------------------------
   It used to paint the active language as a solid accent badge with a
   full-colour flag inside it, which made a two-item toggle the loudest thing
   in the top bar. It now reads as a standard segmented control: a muted
   track, with the current choice raised on the panel colour. */

body .language-switcher {
    padding: 3px;
    border-color: transparent;
    border-radius: 9px;
    background: var(--summary-bg);
    gap: 2px;
}

body .language-option {
    padding: 3px 8px;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
}

body .language-option:hover {
    background: transparent;
    color: var(--text);
}

/* --button-bg sits lighter than --summary-bg in every bundled theme, so the
   selected chip reads as raised on dark palettes as well as light ones. */
body .language-option.is-active,
body .language-option.is-active:hover {
    background: var(--button-bg);
    color: var(--text);
    box-shadow: 0 1px 2px rgb(16 32 48 / 12%);
}

body .language-option .icon {
    font-size: 11px;
    border-radius: 2px;
    border-color: transparent;
}

/* Bring the avatar down to the same optical line as the 32px action pills. */
body .topbar-avatar,
body .topbar-initial {
    width: 30px;
    height: 30px;
}

body .topbar-account-copy strong {
    font-size: 12px;
    line-height: 1.3;
}

body .topbar-account-copy small {
    font-size: 10px;
    line-height: 1.3;
}

/* Command palette ------------------------------------------------------- */
.palette-trigger{display:inline-flex;align-items:center;gap:9px;min-height:34px;margin-left:auto;padding:0 10px 0 11px;border:1px solid var(--line);border-radius:8px;background:var(--button-bg);color:var(--muted);font-size:12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.palette-trigger:hover{background:var(--button-hover);border-color:var(--line-dark);color:var(--text);}
.palette-trigger svg{font-size:1.05em;color:var(--icon);flex-shrink:0;}
.palette-trigger-label{white-space:nowrap;}
.palette-trigger kbd{display:inline-flex;align-items:center;gap:1px;padding:2px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel-bg);color:var(--muted);font-family:inherit;font-size:10px;font-weight:600;line-height:1.4;}

body.has-palette-open{overflow:hidden;}
.palette{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px;}
/* `display:flex` above outranks the browser default for [hidden], so a closed
   palette would stay a full-screen layer over the page and swallow every
   click — including on any modal, which sits far below its z-index. */
.palette[hidden]{display:none;}
.palette-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--text) 42%,transparent);backdrop-filter:blur(3px);opacity:0;transition:opacity .16s ease;}
.palette.is-open .palette-backdrop{opacity:1;}
.palette-dialog{position:relative;display:flex;flex-direction:column;width:min(640px,100%);max-height:min(560px,76vh);border:1px solid var(--line);border-radius:14px;background:var(--panel-bg);box-shadow:0 24px 60px -12px rgb(16 32 48 / 34%);overflow:hidden;opacity:0;transform:translateY(-8px) scale(.985);transition:opacity .16s ease,transform .16s ease;}
.palette.is-open .palette-dialog{opacity:1;transform:none;}

.palette-field{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line-soft);flex-shrink:0;}
.palette-field-icon{display:inline-flex;color:var(--icon);font-size:1.15em;}
.palette-input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:15px;padding:0;}
.palette-input:focus{outline:none;}
.palette-input::placeholder{color:var(--muted);}
body .palette-input{background:transparent!important;border:0!important;}

.palette-results{overflow-y:auto;padding:8px;flex:1;scrollbar-gutter:stable;}
.palette-group+.palette-group{margin-top:6px;}
.palette-group-label{padding:9px 10px 5px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;}
.palette-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;cursor:pointer;scroll-margin:8px;}
.palette-row.is-active{background:var(--sidebar-active);}
.palette-row-icon{display:inline-flex;color:var(--icon);font-size:1.05em;flex-shrink:0;}
.palette-row.is-active .palette-row-icon{color:var(--link);}
.palette-row-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.palette-row-label{color:var(--text);font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.palette-row-subtitle{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.palette-row-status{flex-shrink:0;padding:3px 8px;border-radius:20px;background:var(--status);color:var(--muted);font-size:10px;font-weight:600;text-transform:capitalize;}
.palette-note{padding:26px 12px;color:var(--muted);font-size:12px;text-align:center;}

.palette-footer{display:flex;flex-wrap:wrap;gap:16px;padding:10px 18px;border-top:1px solid var(--line-soft);background:var(--summary-bg);color:var(--muted);font-size:11px;flex-shrink:0;}
.palette-hint{display:inline-flex;align-items:center;gap:5px;}
.palette-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:var(--panel-bg);color:var(--muted);font-family:inherit;font-size:10px;line-height:1.4;}

@media (max-width:900px){
    .palette-trigger-label,.palette-trigger kbd{display:none;}
    .palette-trigger{padding:0 9px;}
}
@media (max-width:640px){
    .palette{padding:0;}
    .palette-dialog{width:100%;max-height:100%;height:100%;border:0;border-radius:0;}
}
@media (prefers-reduced-motion:reduce){
    .palette-backdrop,.palette-dialog{transition:none;}
}

/* Top bar ------------------------------------------------------------------
   Search on the left, then language, help, and one account menu on the right.
   The workspace name is already the logo beside it, so it is not repeated. */
/* The top bar's backdrop blur makes it a stacking context of its own, and the
   summary cards' container queries make theirs; without a z-index the page,
   which comes later, paints over the account menu. */
body .topbar{position:relative;z-index:100;justify-content:flex-start;}

/* Layers, lowest to highest. Everything that covers the page must sit above the
   top bar (100) and the mobile drawer (501), or the bar shows through a modal.
   A confirm can be raised from inside a form modal, and a select list opened in
   either, so each sits above the one before. */
body .crud-modal{z-index:1000;}

/* Form modal motion ---------------------------------------------------------
   is-open puts the dialog in the page; is-visible, added a frame later, runs
   the transition. Closing removes is-visible first and is-open once it ends. */
body .crud-modal .crud-modal__overlay{opacity:0;transition:opacity 200ms ease;}
body .crud-modal .crud-modal__container{opacity:0;transform:translateY(12px) scale(.97);transition:opacity 200ms ease,transform 240ms var(--ease-out),height 260ms var(--ease-out);will-change:transform,opacity;}
body .crud-modal.is-visible .crud-modal__overlay{opacity:1;}
body .crud-modal.is-visible .crud-modal__container{opacity:1;transform:none;}
body .crud-modal:not(.is-visible) .crud-modal__container{transition-duration:160ms,160ms,0s;}
body .crud-modal__container{overflow:hidden;}
body .crud-modal__body.is-entering>*{animation:crud-modal-content 220ms ease both;}
@keyframes crud-modal-content{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* Loading placeholder shaped like a two-column form. */
.crud-modal-skeleton{padding:var(--space-6);}
.crud-modal-skeleton__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);}
.crud-modal-skeleton__grid span{position:relative;display:block;height:64px;border-radius:var(--radius-md);overflow:hidden;background:linear-gradient(var(--color-surface-sunken),var(--color-surface-sunken)) 0 0/40% 14px no-repeat,linear-gradient(var(--color-surface-sunken),var(--color-surface-sunken)) 0 24px/100% 40px no-repeat;}
.crud-modal-skeleton__grid span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-surface) 70%,transparent),transparent);transform:translateX(-100%);animation:crud-modal-shimmer 1.2s ease-in-out infinite;}
@keyframes crud-modal-shimmer{to{transform:translateX(100%);}}
@media(max-width:760px){.crud-modal-skeleton__grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){
    body .crud-modal :is(.crud-modal__overlay,.crud-modal__container){transition:none;transform:none;}
    body .crud-modal__body.is-entering>*,.crud-modal-skeleton__grid span::after{animation:none;}
}
body .app-modal{z-index:1050;}
body .searchable-select-list{z-index:1100;}
body .topbar .palette-trigger{margin-left:0;width:min(360px,40vw);height:38px;min-height:38px;justify-content:flex-start;padding:0 8px 0 12px;background:var(--color-surface-muted);border-color:var(--color-border);color:var(--color-text-muted);font-size:var(--text-sm);}
body .topbar .palette-trigger:hover{background:var(--color-surface);border-color:var(--color-border-strong);}
body .topbar .palette-trigger kbd:first-of-type{margin-left:auto;}
.topbar-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
.topbar-icon-button{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:18px;}
.topbar-icon-button:hover{background:var(--color-surface-sunken);color:var(--color-text);text-decoration:none;}
body .topbar .language-switcher{margin:0 var(--space-1) 0 0;}
body .topbar .language-option{padding:4px 8px;font-size:var(--text-xs);}
.topbar-user{position:relative;margin-left:var(--space-1);padding-left:var(--space-3);border-left:1px solid var(--color-border);}
.topbar-user>summary{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:var(--radius-md);list-style:none;cursor:pointer;user-select:none;}
.topbar-user>summary::-webkit-details-marker{display:none;}
.topbar-user>summary:hover,.topbar-user[open]>summary{background:var(--color-surface-sunken);}
body .topbar-user :is(.topbar-avatar,.topbar-initial){width:32px;height:32px;font-size:var(--text-sm);}
.topbar-user-copy{display:flex;flex-direction:column;min-width:0;max-width:170px;line-height:1.25;}
.topbar-user-copy strong{overflow:hidden;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-semibold);text-overflow:ellipsis;white-space:nowrap;}
.topbar-user-copy small{overflow:hidden;color:var(--color-text-muted);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap;}
.topbar-user-chevron{color:var(--color-icon);font-size:12px;transform:rotate(90deg);transition:transform var(--duration-fast) ease;}
.topbar-user[open] .topbar-user-chevron{transform:rotate(-90deg);}
.topbar-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:90;width:250px;padding:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.topbar-menu-head{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;padding:8px 10px 12px;border-bottom:1px solid var(--color-border);}
.topbar-menu-head strong{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-semibold);}
.topbar-menu-head small{overflow:hidden;color:var(--color-text-muted);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap;}
body .topbar-menu :is(a,button){display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);text-align:left;text-decoration:none;cursor:pointer;}
body .topbar-menu :is(a,button) .icon{color:var(--color-icon);font-size:16px;}
body .topbar-menu :is(a,button):hover{background:var(--color-surface-sunken);color:var(--color-text);}
body .topbar-menu .logout-form{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--color-border);}
body .topbar-menu .logout-form button:hover,body .topbar-menu .logout-form button:hover .icon{background:var(--color-danger-bg);color:var(--color-danger-text);}
@media(max-width:1000px){.topbar-user-copy{display:none;}}
@media(max-width:760px){body .topbar .palette-trigger{width:auto;flex:1 1 auto;background:var(--color-surface);}body .topbar .language-switcher{display:none;}.topbar-user{padding-left:0;border-left:0;}}

/* Mobile navigation is a drawer, so it keeps the desktop column. style.css still
   turns the nav into a horizontal scrolling strip below 720px (from before the
   drawer existed), which laid the links out in a row and hid every group. */
/* The workspace grid had no column size, so its one column grew to the widest
   content inside it (a 900px table on phones) and pushed the page off-screen. */
body .workspace{grid-template-columns:minmax(0,1fr);}
body .topbar .palette-trigger{min-width:0;}

@media(max-width:760px){
    /* The search box has the room to say what it is. */
    body .topbar .palette-trigger-label{display:inline;}
    /* Filters sits at the start of its row with the count opposite, not centred alone. */
    /* crud.css stacks .crud-filter in a centred column below 700px; the toolbar stays a row. */
    body .crud-filter--toolbar{flex-direction:row;align-items:center;}
    body .crud-filter--toolbar .crud-filter-more{flex:0 0 auto;}
    body .crud-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}
    body .crud-summary-card{padding:var(--space-4);}
    body .topbar{gap:var(--space-3);}
    body .sidebar{overflow-y:auto;padding:var(--space-3) var(--space-3) var(--space-8);}
    body .sidebar .nav{display:block;overflow:visible;padding:0;}
    body .sidebar .nav-link{flex:none;width:100%;min-height:42px;border:0;}
    body .sidebar :is(.nav-group-label,.nav-separator){display:block;}
}

/* Sidebar: the section headings carry the structure, so the extra label goes. */
body .sidebar-label{display:none;}
body .sidebar{padding-top:var(--space-3);}
body .sidebar .nav:first-of-type>.nav-link:first-child{margin-top:var(--space-1);}

/* Summary cards: label and icon share the top line, and the figure gets the
   card's full width below them, so large money values never run under the icon. */
body .crud-summary{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
body .crud-summary-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:var(--space-3);row-gap:var(--space-3);min-height:0;padding:var(--space-5);}
body .crud-summary-card>span{grid-column:1;grid-row:1;align-self:center;padding-right:0;line-height:var(--leading-snug);}
body .crud-summary-card>.icon{position:static;grid-column:2;grid-row:1;width:32px;height:32px;padding:8px;}
/* A figure is never cut short: it scales with the width of its own card, up to
   the normal size, so "USD 5,506,791.23" fits whether five cards share a row or two. */
body .crud-summary-card{container-type:inline-size;}
body .crud-summary-card>strong{grid-column:1 / -1;grid-row:2;margin-top:0;font-size:min(var(--text-3xl),13cqi);font-variant-numeric:tabular-nums;}
body .crud-summary-card>strong.crud-summary-value span{font-size:inherit;}

/* Dashboard figures follow the same rule. */
body .dashboard-widget-copy{container-type:inline-size;}
body .dashboard-widget-value{font-size:min(var(--text-3xl),12cqi);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* Row actions stay reachable however many columns a table has. */
body .crud-table :is(td.crud-row-actions,th.crud-actions-column){position:sticky;right:0;z-index:1;background:var(--color-surface);box-shadow:inset 1px 0 0 var(--color-border);}
body .crud-table th.crud-actions-column{background:var(--color-surface-muted);}
body .crud-table tbody tr:hover td.crud-row-actions{background:var(--color-surface-muted);}
body .crud-table tr:is(.crud-row--warning,.crud-row--danger) td.crud-row-actions{background:var(--color-surface);}

/* A form inside a modal is already framed by the modal; its own panel border
   would draw a second frame just inside the first. */
body .crud-modal__body :is(.crud-panel,.crud-form){border:0;border-radius:0;box-shadow:none;background:transparent;}
body .crud-modal__body .crud-form-actions{position:sticky;bottom:0;z-index:2;border-radius:0;}

/* Destructive actions are available, not prominent. */
body .crud-danger-panel .crud-button--danger{border-color:var(--color-danger-border);background:transparent;box-shadow:none;color:var(--color-danger-text);}
body .crud-danger-panel .crud-button--danger:hover{background:var(--color-danger-bg);color:var(--color-danger-text);}

/* Form layout ---------------------------------------------------------------
   A 12-column grid, so a definition can size each field to its content: two
   short codes beside a long name, three dropdowns on a row, notes full width. */
body .crud-form-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-5);row-gap:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-3);}
/* The border reset needs the :nth-child(even) selector crud.css uses, but the
   span must not: that selector outranks the width classes below, and every
   second field was forced to half width whatever the layout asked for. */
body .crud-form-grid>.crud-field,body .crud-form-grid>.crud-field:nth-child(even){border:0;}
body .crud-form-grid>.crud-field{grid-column:span 6;}

/* File inputs match the other controls instead of the browser's grey button. */
body .crud-field input[type="file"]{width:100%;min-height:var(--control-height);padding:4px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;}
body .crud-field input[type="file"]::file-selector-button{height:28px;margin-right:var(--space-3);padding:0 var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);font:inherit;font-weight:var(--weight-medium);cursor:pointer;}
body .crud-field input[type="file"]:hover{border-color:var(--color-primary);background:var(--color-primary-soft);}
body .crud-form-grid>.crud-field--full{grid-column:1 / -1;}
body .crud-form-grid>.crud-field--half{grid-column:span 6;}
body .crud-form-grid>.crud-field--third{grid-column:span 4;}
body .crud-form-grid>.crud-field--quarter{grid-column:span 3;}
.crud-form-section+.crud-form-section{border-top:1px solid var(--color-border);}
.crud-form-section-head{padding:var(--space-5) var(--space-6) var(--space-1);}
.crud-form-section-head h3{margin:0;color:var(--color-text);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-snug);}
.crud-form-section-head p{margin:2px 0 0;color:var(--color-text-muted);font-size:var(--text-sm);}
body .crud-field>span{display:flex;align-items:center;gap:4px;}

/* Help on a narrow field: an info icon whose note opens below it. */
.crud-field-help{position:relative;display:inline-grid;place-items:center;margin-left:2px;color:var(--color-icon);font-size:14px;font-style:normal;cursor:help;}
.crud-field-help:hover,.crud-field-help:focus-visible{color:var(--color-primary);outline:none;}
.crud-field-help::after{content:attr(data-tooltip);position:absolute;z-index:10;top:calc(100% + 8px);left:50%;width:max-content;max-width:260px;padding:8px 10px;border-radius:var(--radius-md);background:var(--color-text);box-shadow:var(--shadow-lg);color:var(--color-surface);font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);white-space:normal;text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity var(--duration-fast) ease,transform var(--duration-fast) ease,visibility var(--duration-fast);pointer-events:none;}
.crud-field-help:hover::after,.crud-field-help:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);}

@media(max-width:1100px){
    body .crud-form-grid>:is(.crud-field--third,.crud-field--quarter){grid-column:span 6;}
}
@media(max-width:760px){
    body .crud-form-grid{grid-template-columns:minmax(0,1fr);}
    body .crud-form-grid>.crud-field{grid-column:1 / -1 !important;}
    .crud-form-section-head{padding:var(--space-4) var(--space-4) 0;}
    .crud-field-help::after{left:auto;right:-8px;transform:translateY(-4px);}
    .crud-field-help:hover::after,.crud-field-help:focus-visible::after{transform:none;}
}
/* Offered only when the browser reports that this device can install the PWA. */
.pwa-install-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color, #dce3ed);
    border-radius: 0.65rem;
    background: var(--surface, #fff);
    color: var(--text-color, #172033);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.pwa-install-button:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }
.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 760px) {
    .pwa-install-button span { display: none; }
    .pwa-install-button { width: 2.25rem; justify-content: center; padding: 0; }
}