/*!
 * Oxia application theme for Bootstrap 5 (self-hosted font)
 * ------------------------------------------------------------
 * Application-wide look and feel. The palette, typography and
 * component rules below were first designed for Accounting -> Reports
 * (2026-09-08) and then promoted here so every module shares them.
 *
 * Sections:
 *   1) Font-face (self-hosted Source Sans 3)
 *   2) Design tokens (--au-*) and Bootstrap token mapping
 *   3) Global base (typography, links, numbers)
 *   4) Layout primitives: side navigation shell, headers, toolbars,
 *      filter bars, segmented controls, section labels
 *   5) Bootstrap components: cards, buttons, forms, tabs, badges,
 *      tables, modals, navbar, dropdowns, pagination
 *   6) Report / tree tables (.rpt-*) used by Accounting -> Reports and
 *      any other view that renders a hierarchical figures table
 *   7) Charts (.rpt-chart-*)
 *   8) Responsive system (breakpoints, overflow safety, datalist shell,
 *      touch targets, modals, navigation drawer)
 *   9) Print
 *  10) Gantt (.gantt-*) — Manufacturing schedule overview
 *
 * Usage: load Bootstrap 5 CSS first, then this file.
 * Font files expected next to this file: ./fonts/SourceSans3-{Regular,SemiBold,Bold}.woff2
 */

/* ============================================================
   1) Font-face (self-hosted Source Sans 3)
   ============================================================ */

@font-face{
  font-family: "Source Sans 3";
  src: url("./fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Source Sans 3";
  src: url("./fonts/SourceSans3-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Source Sans 3";
  src: url("./fonts/SourceSans3-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2) Design tokens
   ============================================================ */

:root{
  --au-font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --au-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Ink */
  --au-ink-900: #0b1220;
  --au-ink-800: #111827;
  --au-ink-700: #1f2937;
  --au-ink-600: #374151;
  --au-muted:   #6b7280;   /* secondary text, labels, codes */
  --au-faint:   #9aa3ad;   /* zero values, hints */
  --au-faint-2: #c3c9d0;   /* "n/a" placeholders */

  /* Brand */
  --au-navy:        #0b3d5c;   /* headings, table header text, totals rule */
  --au-navy-700:    #083b5c;
  --au-primary:     #0b6aa2;   /* accent: active nav, links, chevrons, segmented buttons */
  --au-primary-600: #095a8a;
  --au-primary-soft:#e6f0f7;

  /* Surfaces & borders */
  --au-surface-0: #ffffff;
  --au-surface-1: #fbfcfd;   /* toolbars, sub-table backdrop */
  --au-surface-2: #f6f8fa;   /* side nav, table header, page body */
  --au-surface-3: #eef2f6;   /* section rows */
  --au-hover:     #f8fafc;   /* row hover, subtotal */
  --au-hover-2:   #eceff3;   /* nav item hover, neutral badge */
  --au-border:    #e3e7ec;   /* panel borders */
  --au-border-2:  #cfd6de;   /* control borders, header rule */
  --au-border-3:  #9aa6b2;   /* subtotal rule */
  --au-rule:      #eef0f3;   /* hairline row separators */

  /* Status */
  --au-success:      #198754;
  --au-success-ink:  #146c43;
  --au-success-soft: #d1f2df;
  --au-warning:      #d97706;
  --au-warning-ink:  #664d03;
  --au-warning-soft: #fff3cd;
  --au-danger:       #b02a37;
  --au-danger-ink:   #842029;
  --au-danger-soft:  #f8d7da;
  --au-info:         #0e7490;

  /* Shape & type scale */
  --au-radius-sm: .25rem;
  --au-radius: 6px;
  --au-radius-lg: .5rem;
  --au-fs-xs:  0.74rem;   /* nav group labels, badges */
  --au-fs-sm:  0.79rem;   /* field labels, sub-table headers, section labels */
  --au-fs-md:  0.875rem;   /* table headers, entry rows, notes */
  --au-fs:     0.93rem;   /* table body */
  --au-fs-ui:  0.94rem;   /* nav items, subtitles */
}

/* Bootstrap token mapping */
:root{
  --bs-body-font-family: var(--au-font-sans);
  --bs-font-monospace: var(--au-font-mono);
  --bs-body-bg: var(--au-surface-2);
  --bs-body-color: var(--au-ink-700);
  --bs-secondary-color: var(--au-muted);
  --bs-tertiary-bg: var(--au-surface-2);
  --bs-border-color: var(--au-border);
  --bs-link-color: var(--au-primary);
  --bs-link-hover-color: var(--au-navy-700);
  --bs-link-color-rgb: 11, 106, 162;
  --bs-link-hover-color-rgb: 8, 59, 92;
  --bs-primary: var(--au-primary);
  --bs-primary-rgb: 11, 106, 162;
  --bs-success: var(--au-success);
  --bs-success-rgb: 25, 135, 84;
  --bs-warning: var(--au-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: var(--au-danger);
  --bs-danger-rgb: 176, 42, 55;
  --bs-info: var(--au-info);
  --bs-info-rgb: 14, 116, 144;
  --bs-border-radius-sm: var(--au-radius-sm);
  --bs-border-radius: var(--au-radius);
  --bs-border-radius-lg: var(--au-radius-lg);
  --bs-focus-ring-color: rgba(11, 106, 162, 0.25);
}

/* ============================================================
   3) Global base
   ============================================================ */

body{
  letter-spacing: .05px;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-weight: 700;
  color: var(--au-navy);
}
h1{ font-size: 1.5rem; }
h2{ font-size: 1.3rem; }
h3{ font-size: 1.25rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1rem; }
h6{ font-size: 0.9rem; }

a{ color: var(--au-primary); }
a:hover{ color: var(--au-navy-700); }

.text-muted, .text-secondary{ color: var(--au-muted) !important; }

.money, .num, .table .money, .table .num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num, .money{ text-align: right; }
.neg{ color: var(--au-danger); }
.zero{ color: var(--au-faint); }

/* Small uppercase label used above groups of things (side nav groups,
   chart sections, filter labels). */
.au-label, .au-section-label{
  display: block;
  font-size: var(--au-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--au-muted);
  font-weight: 600;
}

/* Inline "code" prefix in front of a label (account number, product id) */
.au-code{
  color: var(--au-muted);
  display: inline-block;
  min-width: 3.2rem;
  margin-right: 4px;
  font-size: var(--au-fs-md);
  font-variant-numeric: tabular-nums;
}

/* Dotted in-app link (opens another record) */
.au-link, .rpt-link{
  color: var(--au-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--au-primary);
}
.au-link:hover, .rpt-link:hover{ color: var(--au-navy-700); }

/* ============================================================
   4) Layout primitives
   ============================================================ */

/* Shell: white panel with a left side navigation and a main column.
   Generic aliases (.au-shell etc) plus the original .rpt-* names. */
.au-shell, .rpt-shell{
  display: flex;
  gap: 0;
  min-height: calc(100vh - 120px);
  background: var(--au-surface-0);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  overflow: hidden;
}
.au-nav, .rpt-nav{
  width: 230px;
  flex: 0 0 230px;
  background: var(--au-surface-2);
  border-right: 1px solid var(--au-border);
  padding: 10px 0;
}
.au-nav-group, .rpt-nav-group{
  font-size: var(--au-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--au-muted);
  padding: 12px 16px 4px 16px;
  font-weight: 600;
}
.au-nav-item, .rpt-nav-item{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  color: var(--au-ink-700);
  text-decoration: none;
  font-size: var(--au-fs-ui);
  border-left: 3px solid transparent;
}
.au-nav-item:hover, .rpt-nav-item:hover{ background: var(--au-hover-2); color: var(--au-navy); }
.au-nav-item.active, .rpt-nav-item.active{
  background: var(--au-surface-0);
  border-left-color: var(--au-primary);
  color: var(--au-navy);
  font-weight: 600;
}
.au-nav-item i, .rpt-nav-item i{ color: var(--au-muted); width: 16px; text-align: center; }
.au-nav-item.active i, .rpt-nav-item.active i{ color: var(--au-primary); }
.au-nav-select, .rpt-nav-select{ display: none; margin: 8px; width: auto; }
.au-main, .rpt-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Settings page (sys/settings/entity_settings): one row per setting - what it is on the left,
   its control in a fixed-width column on the right. Masked = a secret shown as dots without
   being a password field (a password field makes the browser offer to save it). */
.au-settings .au-toolbar{ justify-content: space-between; }
.au-settings-search{ max-width: 26rem; }
.au-settings-body{ padding: 4px 18px 18px 18px; }
.au-settings-group{ margin: 18px 0 2px 0; }
/* an embedded editor view (two-factor policy) brings its own container/cards: drop its outer gutters */
.au-settings-panel{ padding-top: 8px; }
.au-settings-panel .container-fluid{ padding-left: 0; padding-right: 0; }
.au-settings-panel .col-xl-11{ flex: 0 0 100%; max-width: 100%; width: 100%; }
.au-setting{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: 6px 24px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--au-rule);
}
.au-setting:last-child{ border-bottom: 0; }
.au-setting.is-saving{ opacity: 0.6; }
.au-setting-title{ font-weight: 600; color: var(--au-navy); }
.au-setting-description{ color: var(--au-ink-700); font-size: var(--au-fs-ui); margin-top: 2px; max-width: 70ch; }
.au-setting-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: var(--au-fs-sm); }
.au-setting-key{ color: var(--au-muted); background: transparent; padding: 0; font-size: inherit; user-select: all; }
.au-setting-history{ color: var(--au-muted); text-decoration: none; }
.au-setting-history:hover{ color: var(--au-primary); }
.au-setting-control{ justify-self: stretch; }
.au-setting-control .form-control, .au-setting-control .form-select{ font-size: var(--au-fs); }
.au-setting-switch{ display: flex; align-items: center; gap: 8px; padding-left: 0; min-height: 31px; }
.au-setting-switch .form-check-input{ float: none; margin: 0; width: 2.4em; height: 1.25em; cursor: pointer; }
.au-setting-switch .form-check-label{ color: var(--au-muted); font-size: var(--au-fs-ui); }
.au-setting-masked{ -webkit-text-security: disc; }
.au-setting-control sf-dialog > div > div.text-end{ text-align: left !important; }
/* denser rows (authorization switches: many per page, one line of help at most) */
.au-setting-compact{ padding: 7px 0; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); }
/* Authorizations view (sys/authorization_matrix): the same shell, embedded in an expanded list
   row / a tab / the New role dialog - so no viewport-high minimum */
.au-authz{ min-height: 0; }
.au-authz-id{ color: var(--au-ink-700); background: transparent; padding: 0; font-size: var(--au-fs-md); overflow-wrap: anywhere; }
.au-authz-note{ margin-top: 12px; padding: 10px 12px; background: var(--au-surface-1); border: 1px solid var(--au-rule); border-radius: var(--au-radius); color: var(--au-ink-700); font-size: var(--au-fs-ui); max-width: 90ch; }
.au-authz-count-on{ color: var(--au-primary); font-weight: 600; }
.au-setting-switch .form-check-input.border-danger{ border-color: var(--bs-danger) !important; }
.au-setting-history-panel{ grid-column: 1 / -1; background: var(--au-surface-1); border: 1px solid var(--au-rule); border-radius: var(--au-radius); padding: 8px 12px; }
/* Below lg the generic shell hides its side nav behind a select; a settings page is navigated by
   category all the time, so here the nav stays visible as a swipeable strip of chips instead. */
@media (max-width: 991.98px){
  .au-settings .au-nav{
    display: flex;
    flex: 0 0 auto;
    width: auto;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--au-border);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the right edge: there is more to swipe to */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .au-settings .au-nav::-webkit-scrollbar{ display: none; }
  .au-settings .au-nav::after{ content: ""; flex: 0 0 20px; }
  .au-settings .au-nav-item{
    flex: 0 0 auto;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--au-border);
    border-radius: 999px;
    background: var(--au-surface-0);
    white-space: nowrap;
  }
  .au-settings .au-nav-item.active{ background: var(--au-primary); border-color: var(--au-primary); color: #fff; }
  .au-settings .au-nav-item.active i, .au-settings .au-nav-item.active small{ color: #fff !important; }
}
@media (max-width: 767.98px){
  .au-setting{ grid-template-columns: minmax(0, 1fr); }
  .au-settings-body{ padding: 4px 12px 12px 12px; }
  .au-settings-search{ max-width: none; }
}

/* Page header: title + subtitle on the left, actions on the right */
.au-header, .rpt-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 6px 18px;
}
.au-title, .rpt-title{ font-size: 1.25rem; font-weight: 700; color: var(--au-navy); margin: 0; }
.au-subtitle, .rpt-subtitle{ color: var(--au-muted); font-size: var(--au-fs-ui); margin-top: 2px; }
.au-actions, .rpt-actions{ display: flex; gap: 6px; align-items: center; }

/* Toolbar strip (period selectors, layout toggles) */
.au-toolbar, .rpt-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-top: 1px solid var(--au-rule);
  border-bottom: 1px solid var(--au-rule);
  background: var(--au-surface-1);
}

/* Filter bar (labelled selects) */
.au-filters, .rpt-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--au-rule);
}
.au-filter, .rpt-filter{ min-width: 160px; }
.au-filter-wide, .rpt-filter-wide{ min-width: 260px; }
.au-filter sf-select strong, .rpt-filter sf-select strong{ font-size: var(--au-fs-sm); color: var(--au-muted); font-weight: 600; }
.au-filter sf-select small, .rpt-filter sf-select small{ display: none; }
.au-filter sf-select .ts-control, .au-filter sf-select .ts-wrapper,
.rpt-filter sf-select .ts-control, .rpt-filter sf-select .ts-wrapper{ font-size: var(--au-fs); }
.au-field-label, .rpt-label{
  display: block;
  font-size: var(--au-fs-sm);
  color: var(--au-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.au-toggles, .rpt-toggles{ display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding-bottom: 4px; }
.au-check, .rpt-check{
  font-size: 0.83rem;
  color: var(--au-ink-600);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}
.au-check input, .rpt-check input{ margin: 0; }
.au-spacer, .rpt-spacer{ flex: 1 1 auto; }

/* Segmented control */
.au-seg, .rpt-seg{
  display: inline-flex;
  border: 1px solid var(--au-border-2);
  border-radius: var(--au-radius);
  overflow: hidden;
  background: var(--au-surface-0);
}
.au-seg button, .rpt-seg button{
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font-size: 0.83rem;
  color: var(--au-ink-600);
  border-right: 1px solid var(--au-border-2);
}
.au-seg button:last-child, .rpt-seg button:last-child{ border-right: 0; }
.au-seg button.active, .rpt-seg button.active{ background: var(--au-primary); color: #fff; font-weight: 600; }

.rpt-year, .rpt-month{ width: auto; min-width: 110px; }
.rpt-date{ width: 150px; }
.rpt-dash{ color: var(--au-muted); }
.rpt-stepper{ display: inline-flex; gap: 2px; }
.rpt-subtabs{ padding: 8px 18px 0 18px; }

/* Body area of the shell */
.au-body, .rpt-body{ padding: 10px 18px 18px 18px; flex: 1 1 auto; min-width: 0; }
.au-body sf-litloader, .au-body sf-litloader > *,
.rpt-body sf-litloader, .rpt-body sf-litloader > *{ display: block; min-width: 0; max-width: 100%; }
.au-loading, .rpt-loading{ padding: 40px; text-align: center; color: var(--au-muted); }
.rpt-body{ position: relative; }
/* report reload with data on screen (period / year / filter change): keep the old table visible but
   dimmed and blocked, with a spinner pill on top - the sfFetch progress bar is skipped for these */
.rpt-body.rpt-busy > *:not(.rpt-busy-overlay){ opacity: .45; pointer-events: none; transition: opacity .15s; }
.rpt-busy-overlay{ position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.rpt-busy-overlay > span{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--au-surface-0, #fff); color: inherit; border: 1px solid var(--au-border, #ddd); box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: var(--au-fs-md); }
.au-note, .rpt-note{ color: var(--au-muted); font-size: var(--au-fs-md); margin-top: 8px; }
.rpt-alert{ margin: 0 0 10px 0; }

/* Reports · Group result: company bar + setup dialog */
.rpt-companies{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--au-rule);
  background: var(--au-surface-1);
}
.rpt-companies .rpt-label{ margin: 0; }
.rpt-companies .rpt-check.off{ color: var(--au-muted); text-decoration: line-through; }
.rpt-group-table td, .rpt-group-table th{ vertical-align: middle; }
.rpt-group-table input.form-control-sm{ max-width: 200px; }
.rpt-group-table .sub, .rpt-rule .sub{ font-size: var(--au-fs-sm); color: var(--au-muted); }
.rpt-rule{ padding: 8px 0; border-top: 1px solid var(--au-rule); }
.rpt-rule .rpt-check{ font-weight: 600; }
.rpt-rule .rpt-rule-fields{ display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; padding-left: 24px; }
.rpt-rule .rpt-rule-fields label{ font-size: var(--au-fs-sm); color: var(--au-muted); display: block; }
.rpt-rule .rpt-rule-fields input{ min-width: 320px; }
.rpt th.company-col{ white-space: normal; }
.rpt-modal .modal-body{ max-height: 75vh; overflow: auto; }

/* ============================================================
   5) Bootstrap components
   ============================================================ */

/* Cards */
.card{
  background: var(--au-surface-0);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
}
.card-header{
  background: var(--au-surface-2);
  border-bottom: 1px solid var(--au-border);
  font-weight: 600;
  color: var(--au-navy);
  padding: .5rem .9rem;
}
.card-title{ color: var(--au-navy); font-weight: 700; font-size: 1rem; }
.card-footer{ background: var(--au-surface-1); border-top: 1px solid var(--au-border); }

/* Buttons */
.btn{
  border-radius: var(--au-radius);
  font-weight: 600;
}
.btn-sm{ font-size: 0.875rem; }
.btn-primary{
  --bs-btn-bg: var(--au-primary);
  --bs-btn-border-color: var(--au-primary-600);
  --bs-btn-hover-bg: var(--au-primary-600);
  --bs-btn-hover-border-color: var(--au-navy);
  --bs-btn-active-bg: var(--au-navy);
  --bs-btn-active-border-color: var(--au-navy);
  --bs-btn-disabled-bg: var(--au-primary);
  --bs-btn-disabled-border-color: var(--au-primary);
}
.btn-outline-primary{
  --bs-btn-color: var(--au-primary);
  --bs-btn-border-color: var(--au-primary);
  --bs-btn-hover-bg: var(--au-primary);
  --bs-btn-hover-border-color: var(--au-primary);
  --bs-btn-active-bg: var(--au-primary-600);
  --bs-btn-active-border-color: var(--au-primary-600);
}
.btn-secondary{
  --bs-btn-bg: var(--au-muted);
  --bs-btn-border-color: var(--au-muted);
  --bs-btn-hover-bg: var(--au-ink-600);
  --bs-btn-hover-border-color: var(--au-ink-600);
}
.btn-outline-secondary{
  --bs-btn-color: var(--au-ink-600);
  --bs-btn-border-color: var(--au-border-2);
  --bs-btn-hover-color: var(--au-navy);
  --bs-btn-hover-bg: var(--au-hover-2);
  --bs-btn-hover-border-color: var(--au-border-2);
  --bs-btn-active-color: var(--au-navy);
  --bs-btn-active-bg: var(--au-hover-2);
  --bs-btn-active-border-color: var(--au-border-2);
}
.btn-success{
  --bs-btn-bg: var(--au-success);
  --bs-btn-border-color: var(--au-success);
  --bs-btn-hover-bg: var(--au-success-ink);
  --bs-btn-hover-border-color: var(--au-success-ink);
}
.btn-danger{
  --bs-btn-bg: var(--au-danger);
  --bs-btn-border-color: var(--au-danger);
  --bs-btn-hover-bg: var(--au-danger-ink);
  --bs-btn-hover-border-color: var(--au-danger-ink);
}
.btn-outline-danger{
  --bs-btn-color: var(--au-danger);
  --bs-btn-border-color: var(--au-danger);
  --bs-btn-hover-bg: var(--au-danger);
  --bs-btn-hover-border-color: var(--au-danger);
}
.btn-link{
  --bs-btn-color: var(--au-primary);
  --bs-btn-hover-color: var(--au-navy-700);
  text-decoration: none;
  font-weight: 600;
}
.btn-link:hover{ text-decoration: underline; }
.btn:focus-visible, .form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 0.2rem rgba(11, 106, 162, 0.2);
}

/* Forms */
.form-label{
  font-weight: 600;
  color: var(--au-muted);
  font-size: var(--au-fs-sm);
  margin-bottom: 2px;
}
.form-label.small{ font-size: var(--au-fs-sm); }
.form-control, .form-select{
  border-color: var(--au-border-2);
  min-height: 2.5rem;
  font-size: var(--au-fs);
}
.form-control-sm, .form-select-sm{ min-height: calc(1.5em + .5rem + 2px); }
.form-control:focus, .form-select:focus{ border-color: var(--au-primary); }
.form-check-input:checked{ background-color: var(--au-primary); border-color: var(--au-primary); }
.form-check-input:focus{ border-color: var(--au-primary); box-shadow: 0 0 0 0.2rem rgba(11, 106, 162, 0.2); }
.form-text{ color: var(--au-muted); font-size: var(--au-fs-sm); }
.input-group-text{
  background: var(--au-surface-2);
  border-color: var(--au-border-2);
  color: var(--au-muted);
  font-size: var(--au-fs);
}

/* Tom-select (sf-select) controls follow form-control sizing */
.ts-wrapper .ts-control{ border-color: var(--au-border-2); font-size: var(--au-fs); }
.ts-wrapper.focus .ts-control{ border-color: var(--au-primary); box-shadow: 0 0 0 0.2rem rgba(11, 106, 162, 0.2); }
.ts-dropdown .active{ background: var(--au-primary-soft); color: var(--au-navy); }

/* Tabs */
.nav-tabs{ border-bottom: 1px solid var(--au-border); }
.nav-tabs .nav-link{
  color: var(--au-ink-600);
  font-size: var(--au-fs-ui);
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .45rem .9rem;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover{ color: var(--au-navy); border-bottom-color: var(--au-border-2); }
.nav-tabs .nav-link.active{
  color: var(--au-navy);
  background: transparent;
  border-bottom-color: var(--au-primary);
}
.nav-pills .nav-link{ color: var(--au-ink-600); font-size: var(--au-fs-ui); font-weight: 600; }
.nav-pills .nav-link.active{ background: var(--au-primary); }

/* Badges: quiet pill style like the report status badges */
.badge{
  font-size: var(--au-fs-xs);
  font-weight: 600;
  padding: .2em .6em;
  border-radius: 10px;
}
.badge.bg-success{ background: var(--au-success-soft) !important; color: var(--au-success-ink) !important; }
.badge.bg-warning{ background: var(--au-warning-soft) !important; color: var(--au-warning-ink) !important; }
.badge.bg-danger{ background: var(--au-danger-soft) !important; color: var(--au-danger-ink) !important; }
.badge.bg-secondary, .badge.bg-light{ background: var(--au-hover-2) !important; color: var(--au-ink-600) !important; }
.badge.bg-info{ background: var(--au-primary-soft) !important; color: var(--au-navy) !important; }
.badge.bg-primary{ background: var(--au-primary) !important; color: #fff !important; }

/* Alerts */
.alert{ border-radius: var(--au-radius); font-size: var(--au-fs); }
.alert-warning{ --bs-alert-bg: var(--au-warning-soft); --bs-alert-border-color: #f3dc9a; --bs-alert-color: var(--au-warning-ink); }
.alert-danger{ --bs-alert-bg: var(--au-danger-soft); --bs-alert-border-color: #f1b4ba; --bs-alert-color: var(--au-danger-ink); }
.alert-success{ --bs-alert-bg: var(--au-success-soft); --bs-alert-border-color: #a9e2c3; --bs-alert-color: var(--au-success-ink); }
.alert-info{ --bs-alert-bg: var(--au-primary-soft); --bs-alert-border-color: #b7d3e6; --bs-alert-color: var(--au-navy); }

/* Tables (ledger-first): compact, tabular numbers, sticky quiet header */
.table{
  font-size: var(--au-fs);
  font-variant-numeric: tabular-nums;
  --bs-table-border-color: var(--au-rule);
  --bs-table-striped-bg: var(--au-surface-1);
  --bs-table-hover-bg: var(--au-hover);
  --bs-table-active-bg: var(--au-primary-soft);
  color: var(--au-ink-700);
}
.table > :not(caption) > * > *{ padding: 5px 10px; border-bottom-color: var(--au-rule); }
.table-sm > :not(caption) > * > *{ padding: 4px 8px; }
.table thead th{
  background: var(--au-surface-2);
  border-bottom: 2px solid var(--au-border-2);
  font-weight: 600;
  color: var(--au-navy);
  font-size: var(--au-fs-md);
  white-space: nowrap;
}
.table-responsive thead th{ position: sticky; top: 0; z-index: 2; }
.table-light, .table > .table-light > *{ --bs-table-bg: var(--au-surface-2); --bs-table-color: var(--au-navy); }
.table tfoot th, .table tfoot td{
  font-weight: 700;
  border-top: 2px solid var(--au-navy);
  background: var(--au-surface-0);
}
.table tbody tr.section td, .table tbody tr.table-section td{
  background: var(--au-surface-3) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.76rem;
  color: var(--au-navy);
}
.table .code{ color: var(--au-muted); font-size: var(--au-fs-md); }
.table td.text-danger, .table .text-danger{ color: var(--au-danger) !important; }
.table td.text-success, .table .text-success{ color: var(--au-success) !important; }

/* Pagination */
.pagination{ --bs-pagination-font-size: var(--au-fs); --bs-pagination-color: var(--au-primary); --bs-pagination-active-bg: var(--au-primary); --bs-pagination-active-border-color: var(--au-primary); --bs-pagination-border-color: var(--au-border-2); --bs-pagination-hover-bg: var(--au-hover-2); --bs-pagination-hover-color: var(--au-navy); }

/* Modals */
.modal-content{ border: 1px solid var(--au-border); border-radius: var(--au-radius); }
.modal-header{ background: var(--au-surface-2); border-bottom: 1px solid var(--au-border); padding: .75rem 1rem; }
.modal-title{ color: var(--au-navy); font-size: 1.05rem; font-weight: 700; }
.modal-footer{ background: var(--au-surface-1); border-top: 1px solid var(--au-border); }

/* List groups, dropdowns, accordion */
.list-group-item{ border-color: var(--au-border); font-size: var(--au-fs); }
.list-group-item.active{ background: var(--au-primary); border-color: var(--au-primary); }
.dropdown-menu{ border-color: var(--au-border); border-radius: var(--au-radius); font-size: var(--au-fs-ui); box-shadow: 0 6px 18px rgba(11, 61, 92, 0.08); }
.dropdown-item{ color: var(--au-ink-700); }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--au-hover-2); color: var(--au-navy); }
.dropdown-item.active, .dropdown-item:active{ background: var(--au-primary); color: #fff; }
.dropdown-header{ font-size: var(--au-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--au-muted); font-weight: 600; }
.accordion-button{ color: var(--au-navy); font-weight: 600; font-size: var(--au-fs-ui); }
.accordion-button:not(.collapsed){ background: var(--au-surface-2); color: var(--au-navy); box-shadow: none; }
.accordion-item{ border-color: var(--au-border); }

/* Top navbar */
.navbar.bg-body-tertiary{
  --bs-tertiary-bg: var(--au-surface-0);
  background: var(--au-surface-0) !important;
  border-bottom: 1px solid var(--au-border);
}
.navbar .navbar-brand{ color: var(--au-navy); font-weight: 700; }
.navbar .nav-link{ color: var(--au-ink-700); font-size: var(--au-fs-ui); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link.show{ color: var(--au-primary); }
.navbar .nav-link.active{ color: var(--au-navy); }

/* Breadcrumb, progress, spinner, tooltip */
.breadcrumb{ font-size: var(--au-fs-ui); }
.breadcrumb-item.active{ color: var(--au-muted); }
.progress{ background: var(--au-hover-2); }
.progress-bar{ background: var(--au-primary); }
.spinner-border{ color: var(--au-primary); }

/* ============================================================
   6) Report / tree tables (.rpt-*)
   ============================================================ */

.rpt-tools{ display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
.rpt-tools button{ font-size: 0.75rem; }
.rpt-wrap{ overflow: auto; border: 1px solid var(--au-border); border-radius: var(--au-radius); max-height: calc(100vh - 210px); }
table.rpt{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--au-fs); font-variant-numeric: tabular-nums; }
table.rpt thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--au-surface-2);
  border-bottom: 2px solid var(--au-border-2);
  padding: 8px 10px;
  font-weight: 600;
  color: var(--au-navy);
  white-space: nowrap;
  text-align: right;
  font-size: var(--au-fs-md);
}
table.rpt thead th:first-child{ text-align: left; min-width: 320px; }
table.rpt td{ padding: 5px 10px; border-bottom: 1px solid var(--au-rule); vertical-align: top; }
table.rpt td.n{ text-align: right; white-space: nowrap; }
table.rpt td.n.neg{ color: var(--au-danger); }
table.rpt td.n.zero{ color: var(--au-faint); }
table.rpt td .na{ color: var(--au-faint-2); }
table.rpt td.t{ color: var(--au-ink-600); }
table.rpt td.st{ white-space: nowrap; }
table.rpt td.l{ white-space: nowrap; }
table.rpt td.l .lbl{ white-space: normal; }
/* label cell spanning empty value columns (row.label_span): one line, ellipsis, full text in title */
table.rpt td.l.clip .lbl, table.rpt td.l.clip .sub{ display: inline-block; max-width: min(60vw, 640px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
table.rpt td.l.clip .sub{ display: block; }
table.rpt td.l.clip:not([colspan]) .lbl, table.rpt td.l.clip[colspan="1"] .lbl{ max-width: 300px; }
table.rpt .code{ color: var(--au-muted); display: inline-block; min-width: 3.2rem; margin-right: 4px; font-size: var(--au-fs-md); }
table.rpt .sub{ color: var(--au-muted); font-size: var(--au-fs-sm); margin-left: 24px; white-space: normal; }
.rpt-chev{
  border: 0;
  background: transparent;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 4px;
  color: var(--au-primary);
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rpt-chev i{ transition: transform 0.12s ease; display: inline-block; }
.rpt-chev.open i{ transform: rotate(90deg); }
.rpt-chev-space{ display: inline-block; width: 24px; }
.rpt-row.expandable{ cursor: pointer; }
.rpt-row.expandable:hover td{ background: var(--au-hover); }
.rpt-section td{
  background: var(--au-surface-3) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.76rem;
  color: var(--au-navy);
}
.rpt-group td, .bold td{ font-weight: 600; }
.rpt-subtotal td{ font-weight: 700; border-top: 1px solid var(--au-border-3); background: var(--au-hover); }
.rpt-total td{ font-weight: 700; border-top: 2px solid var(--au-navy); border-bottom: 3px double var(--au-navy) !important; background: var(--au-surface-0); }
.rpt-info td{ color: var(--au-muted); font-style: italic; font-weight: 400; }
.muted td{ color: var(--au-muted); font-weight: 400; }
.rpt-entry td{ font-size: var(--au-fs-md); }
.rpt-kpi td.l{ font-weight: 500; }
.rpt-status{ margin-left: 8px; font-size: var(--au-fs-md); }
.rpt-info-icon{ margin-left: 6px; color: var(--au-faint); font-size: 0.75rem; cursor: help; }
.rpt-status.ok{ color: var(--au-success); }
.rpt-status.warn{ color: var(--au-warning); }
.rpt-badge{
  display: inline-block;
  font-size: var(--au-fs-xs);
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--au-hover-2);
  color: var(--au-ink-600);
  text-transform: lowercase;
}
.rpt-badge-paid{ background: var(--au-success-soft); color: var(--au-success-ink); }
.rpt-badge-partially_paid{ background: var(--au-warning-soft); color: var(--au-warning-ink); }
.rpt-badge-none{ background: var(--au-hover-2); color: var(--au-ink-600); }
.rpt-badge-overpaid, .rpt-badge-creditloss{ background: var(--au-danger-soft); color: var(--au-danger-ink); }
.rpt-sub > td{ background: var(--au-surface-1); padding: 4px 10px 10px 10px; }
table.rpt-subtable{ width: 100%; border-collapse: collapse; font-size: var(--au-fs-md); background: var(--au-surface-0); border: 1px solid var(--au-border); }
table.rpt-subtable th{
  position: static;
  font-size: var(--au-fs-sm);
  color: var(--au-muted);
  font-weight: 600;
  background: var(--au-surface-2);
  padding: 4px 8px;
  border-bottom: 1px solid var(--au-border);
  text-align: right;
}
table.rpt-subtable th.l{ text-align: left; }
table.rpt-subtable td{ padding: 3px 8px; border-bottom: 1px solid #f1f3f5; }
table.rpt-subtable td.l{ padding-left: 8px !important; }
table.rpt-subtable.wide{ width: auto; min-width: min(50%, 720px); }
table.rpt-subtable.wide td.l, table.rpt-subtable.wide th.l{ white-space: nowrap; }
.rpt-empty{ color: var(--au-muted); font-size: var(--au-fs-md); font-style: italic; padding: 4px 0; }
.rpt-empty-report{ padding: 30px; text-align: center; color: var(--au-muted); }
/* only the grand total (last footer row) sticks to the bottom; subtotal rows above it (inventory
   split into raw materials / WIP / finished goods) scroll with the table - all footer rows sticky
   at bottom:0 stacked them on top of each other and only the last one showed */
table.rpt tfoot tr:last-child td{ position: sticky; bottom: 0; background: var(--au-surface-0); z-index: 1; }

/* ============================================================
   7) Charts (.rpt-chart-*)
   ============================================================ */

.rpt-chart-single{
  height: 320px;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  padding: 10px 12px 6px 12px;
  margin-bottom: 12px;
  background: var(--au-surface-0);
}
.rpt-chart-single .t{ font-size: 0.82rem; font-weight: 600; color: var(--au-navy); margin-bottom: 4px; }
.rpt-chart-single .cv{ height: 270px; position: relative; }
.rpt-chart-section{
  font-size: var(--au-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--au-muted);
  font-weight: 600;
  margin: 14px 0 6px 0;
}
.rpt-chart-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.rpt-chart-card{
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  padding: 10px 12px 6px 12px;
  background: var(--au-surface-0);
}
.rpt-chart-card .t{ font-size: 0.82rem; font-weight: 600; color: var(--au-navy); }
.rpt-chart-card .s{ font-size: 0.7rem; color: var(--au-muted); margin-bottom: 4px; min-height: 1em; }
.rpt-chart-card .cv{ height: 190px; position: relative; }
/* charts flagged wide (many series / long category axis) take the full grid width and more height */
.rpt-chart-card.wide{ grid-column: 1 / -1; }
.rpt-chart-card.wide .cv{ height: 300px; }

/* ============================================================
   8) Responsive system
   ------------------------------------------------------------
   One breakpoint set for the whole app (Bootstrap's):
     phone     < 576px   (iPhone 12 mini = 360px wide)
     sm        576-767   (large phones)
     md        768-991   (tablet portrait: collapsed top nav, drawer)
     lg+       >= 992    (tablet landscape + desktop: full nav)
   Rules: no page-level horizontal scroll (each wide component scrolls
   inside its own .sf-scroll-x container), comfortable touch targets
   below lg, one-column forms on phones, near-full-screen modals on
   phones, drawer navigation below lg. Do not add per-view media rules
   when one of the primitives below solves it.
   ============================================================ */

/* 8.1 Overflow safety: the page must never scroll sideways. Layout
   children get min-width:0 so flex/grid items can shrink; anything
   wide scrolls inside .sf-scroll-x. */
html, body{ max-width: 100%; }
#main, #app_content, main-app{ min-width: 0; display: block; }
/* NOTE: no ".row > * { min-width:0 }" - Bootstrap columns never shrink (flex-shrink:0)
   and that rule would zero the min-content width of table cells holding a .row. */
img, svg:not(.rpt-chart-single svg), canvas, video, iframe{ max-width: 100%; }
sf-litloader, sf-datalist, sf-tabs, sf-tab-content, sf-input, sf-select, sf-datepicker, sf-textarea, sf-checkbox{ min-width: 0; }
sf-datalist, sf-tabs, sf-tab-content, sf-litloader{ display: block; }
pre{ max-width: 100%; overflow-x: auto; }
/* long unbreakable tokens (URLs, ids, hashes) wrap instead of pushing panels wide */
.card, .alert, .modal-body, .toast-body, .sf-dl-expand-wrap, .dropdown-item{ overflow-wrap: break-word; }

/* Any component that can be wider than its host scrolls here, not the page.
   Dropdown togglers inside get popper strategy "fixed" (sf-responsive.js) so
   their menus are not clipped by the scroll container. */
.sf-scroll-x{
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.sf-scroll-x > .table{ margin-bottom: 0; }
/* hide the scrollbar gutter on desktop when nothing overflows */
.sf-scroll-x::-webkit-scrollbar{ height: 8px; }
.sf-scroll-x::-webkit-scrollbar-thumb{ background: var(--au-border-2); border-radius: 4px; }

/* Sticky first column for wide grids that scroll sideways (week grids, matrices):
   <div class="table-responsive sf-sticky-first"><table>... */
.sf-sticky-first > .table > thead > tr > th:first-child,
.sf-sticky-first > .table > tbody > tr > td:first-child,
.sf-sticky-first > .table > tbody > tr > th:first-child,
.sf-sticky-first > .table > tfoot > tr > th:first-child,
.sf-sticky-first > .table > tfoot > tr > td:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--au-surface-0);
  box-shadow: inset -1px 0 0 var(--au-border);
}
.sf-sticky-first > .table > thead > tr > th:first-child{ z-index: 3; background: var(--au-surface-2); }
.table-responsive{ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* 8.2 Data list (sf-datalist) shell: head row, filters panel, table, pager */
.sf-dl{ min-width: 0; }
.sf-dl-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 0;
  min-width: 0;
}
.sf-dl-title{ flex: 1 1 auto; min-width: 0; }
.sf-dl-title .sf-dl-label{ margin: 0; font-weight: 600; color: var(--au-navy); font-size: 1rem; }
.sf-dl-title .sf-dl-desc{ margin: 0; color: var(--au-muted); font-size: var(--au-fs-md); }
.sf-dl-title .sf-dl-desc:empty{ display: none; }
.sf-dl-search{ flex: 1 1 260px; min-width: 0; max-width: 420px; }
.sf-dl-search sf-input .row, .sf-dl-search sf-input [class*="col"]{ width: 100%; max-width: 100%; flex: 1 1 100%; }
.sf-dl-search sf-input small:empty{ display: none; }
.sf-dl-tools{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.sf-dl-tools .btn{ white-space: nowrap; }
.sf-dl-filters{
  display: none;
  padding: 8px 10px;
  margin: 2px 0 8px 0;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  background: var(--au-surface-1);
}
.sf-dl-filters.show{ display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-end; }
.sf-dl-filters > *{ display: block; flex: 1 1 240px; max-width: 420px; min-width: 0; }
.sf-dl-filters sf-input .row, .sf-dl-filters sf-select .row, .sf-dl-filters sf-datepicker .row, .sf-dl-filters sf-checkbox .row{ margin: 0; }
.sf-dl-filters sf-input .row > *, .sf-dl-filters sf-select .row > *, .sf-dl-filters sf-datepicker .row > *{ width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.sf-dl-filters sf-input .row > * > [class*="col"], .sf-dl-filters sf-datepicker .row > * > [class*="col"]{ width: 100%; max-width: 100%; }
@media (max-width: 575.98px){
  .sf-dl-filters > *{ flex-basis: 100%; max-width: none; }
}
.sf-dl-table{ min-width: 0; }
.sf-dl-table .table{ margin-bottom: 0; }
.sf-dl-table .table > :not(caption) > * > *{ vertical-align: top; }
.sf-dl-table td, .sf-dl-table th{ min-width: 0; }
/* Inline editors in cells: flexible width with a floor, so a table with several
   click-to-edit columns shares the available width instead of forcing every
   editor to its 20-character intrinsic width (which pushed the Actions column
   off-screen even on desktop). */
.sf-dl-table td sf-input input, .sf-dl-table td sf-datepicker input, .sf-dl-table td sf-textarea textarea{ width: 100%; min-width: 6rem; }
.sf-dl-table td sf-input, .sf-dl-table td sf-datepicker, .sf-dl-table td sf-select, .sf-dl-table td sf-textarea{ display: block; min-width: 6rem; }
.sf-dl-table td sf-input .row, .sf-dl-table td sf-datepicker .row, .sf-dl-table td sf-select .row, .sf-dl-table td sf-checkbox .row{ margin: 0; }
.sf-dl-table td sf-input .row > *, .sf-dl-table td sf-datepicker .row > *, .sf-dl-table td sf-select .row > *, .sf-dl-table td sf-checkbox .row > *{ padding: 0; }
.sf-dl-expand{ padding: 0 !important; }
/* The expanded detail row is exactly as wide as the list's visible area
   (--sf-dl-vw, kept up to date by sf-datalist's ResizeObserver) and sticks to
   the left edge, so when the table itself scrolls sideways the detail panel
   stays in view and never widens the outer table. Falls back to the classic
   width:0 + min-width:100% cell trick until the variable is set. */
.sf-dl-expand-wrap{
  position: sticky;
  left: 0;
  width: var(--sf-dl-vw, 0);
  min-width: var(--sf-dl-vw, 100%);
  max-width: var(--sf-dl-vw, 100%);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  /* horizontal padding = Bootstrap row gutter, so bare .row children (most
     detail views stack fields in .row without a .container) do not overflow */
  padding: 8px .75rem 12px .75rem;
  border-left: 3px solid var(--au-primary);
  background: var(--au-surface-1);
}
/* Bootstrap places the backdrop under body. A sticky expanded row creates a
   stacking context that traps its modal below that backdrop. Release stickiness
   only while a descendant modal is shown; closing/removing it restores the row. */
.sf-dl-expand-wrap:has(.modal.show){ position: static; }
/* secondary "more info" line under a row (additionalinfo_row_url / moreinfo_row) */
.sf-dl-expand-wrap.sf-dl-info{
  border-left: 0;
  background: transparent;
  padding: 0 .75rem 6px .75rem;
  font-size: var(--au-fs-md);
  text-align: right;
}
.sf-dl-pager{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 0 4px 0;
}
.sf-dl-pager-summary{ color: var(--au-muted); font-size: var(--au-fs-md); margin: 0; white-space: nowrap; }
/* list is fetching: dim the current rows, block clicks on stale data, spinner text in the pager */
.sf-dl-loading .sf-scroll-x{ opacity: .55; pointer-events: none; transition: opacity .15s ease-in .3s; }
.sf-dl-loading-text{ display: inline-flex; align-items: center; gap: .4rem; }
.sf-dl-pager-controls{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sf-dl-pager .pagination{ margin: 0; }
.sf-dl-pager .page-link{ cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; }
.sf-dl-pager .page-link.disabled{ color: var(--au-faint); pointer-events: none; }
.sf-dl-pager .page-link.sf-dl-pager-page{ pointer-events: none; color: var(--au-ink-600); background: var(--au-surface-2); }
.sf-dl-pager select.form-select{ width: auto; min-width: 4.5rem; padding-right: 2rem; }
.sf-dl-multiops{ margin-left: 0; }

/* Dashboard card grid: cards grow to fill each row (one per row on phones and
   tablet portrait, side by side on desktop) instead of a ragged flex-wrap of
   fixed-width cards. */
.dashboard-grid > sf-dashboard-card{ flex: 1 1 280px; min-width: 0; max-width: 100%; }
.dashboard-grid > sf-dashboard-card > .sf-dashboard-card{ min-width: 0 !important; }
@media (min-width: 1200px){
  /* desktop keeps the cards' natural widths */
  .dashboard-grid > sf-dashboard-card{ flex: 0 1 auto; }
}

/* 8.3 Tabs scroll sideways instead of wrapping into three rows on phones */
@media (max-width: 767.98px){
  .nav-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar{ display: none; }
  .nav-tabs .nav-item{ flex: 0 0 auto; }
  .nav-tabs .nav-link{ white-space: nowrap; }
  /* fade hint while more tabs are hidden to the right (sf-tabs toggles the class) */
  .nav-tabs.sf-tabs-more{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
}

/* 8.4 Touch-friendly controls below lg (phones and tablets) */
@media (max-width: 991.98px){
  .btn{ min-height: 2.5rem; padding-top: .45rem; padding-bottom: .45rem; }
  .btn-sm{ min-height: 2.125rem; padding-top: .3rem; padding-bottom: .3rem; }
  .btn-close{ padding: .75rem; }
  .dropdown-item{ padding: .6rem 1rem; }
  .dropdown-menu{ max-width: calc(100vw - 1rem); }
  .dropdown-item{ white-space: normal; }
  .nav-tabs .nav-link{ padding: .6rem .9rem; }
  .form-check-input{ width: 1.15em; height: 1.15em; }
  .page-link{ min-height: 2.5rem; }
  .table .btn-sm{ min-height: 2rem; }
  .toast{ max-width: calc(100vw - 2rem); }
}

/* 8.5 Phones: text inputs at 16px so iOS Safari does not zoom on focus,
   one-column forms, tighter page gutters, stacked headers. */
@media (max-width: 575.98px){
  /* page gutter = Bootstrap row gutter, so a bare .row inside a px-0 container
     spans exactly the viewport (no 4px sideways scroll) and its columns keep
     12px of breathing room from the screen edge */
  #main{ padding-left: .75rem !important; padding-right: .75rem !important; }
  .form-control, .form-select, .ts-wrapper .ts-control, .ts-wrapper .ts-control input{ font-size: 1rem; }
  .form-control-sm, .form-select-sm{ font-size: .9rem; }
  input[size]{ max-width: 100%; }
  .modal-body .container-fluid{ padding-left: 0; padding-right: 0; }
  .card-body{ padding: .75rem; }
  .au-header, .rpt-header{ flex-direction: column; align-items: stretch; padding: 12px 12px 4px 12px; }
  .au-actions, .rpt-actions{ flex-wrap: wrap; }
  .au-toolbar, .rpt-toolbar, .au-filters, .rpt-filters{ padding: 8px 12px; }
  .au-body, .rpt-body{ padding: 8px 10px 14px 10px; }
  .au-filter, .rpt-filter, .au-filter-wide, .rpt-filter-wide{ min-width: 0; flex: 1 1 100%; }
  table.rpt thead th:first-child{ min-width: 180px; }
  .rpt-chart-grid{ grid-template-columns: 1fr; }
  .rpt-wrap{ max-height: none; }
  .sf-dl-search{ order: 3; flex-basis: 100%; max-width: none; }
  .sf-dl-pager-summary{ font-size: var(--au-fs-sm); }
  .sf-dl-pager .page-link{ padding-left: .5rem; padding-right: .5rem; }
  .sf-dl-expand-wrap{ padding: 6px .75rem 10px .75rem; }
  h1{ font-size: 1.3rem; }
  h2{ font-size: 1.2rem; }
  .toast-container{ left: 0; right: 0; padding: .5rem !important; }
  .toast{ max-width: 100%; width: 100%; }
}

/* 8.6 Modals: near-full-screen sheets on phones, internal scrolling always */
.modal-dialog{ max-width: min(var(--sf-modal-max, 500px), calc(100vw - 1rem)); }
.modal-dialog.modal-lg{ --sf-modal-max: 800px; }
.modal-dialog.modal-xl{ --sf-modal-max: 1140px; }
.modal-dialog.modal-sm{ --sf-modal-max: 300px; }
.modal-content{ max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; }
.modal-body{ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; }
.modal-footer{ flex-wrap: wrap; gap: .4rem; }
@media (max-width: 575.98px){
  /* bottom sheet: small dialogs sit within thumb reach at the bottom, large
     ones grow upwards until they fill the screen and scroll inside */
  .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl, .modal-dialog.modal-sm{
    max-width: none;
    width: auto;
    margin: .5rem;
    min-height: calc(100dvh - 1rem);
    display: flex;
    align-items: flex-end;
  }
  .modal-content{ max-height: calc(100dvh - 1rem); width: 100%; }
  .modal.fade .modal-dialog{ transform: translate(0, 24px); }
  .modal.show .modal-dialog{ transform: none; }
  .modal-footer .btn{ flex: 1 1 auto; }
  .modal-footer{ padding: .6rem .75rem; }
  .modal-header{ padding: .6rem .75rem; }
  .modal-body{ padding: .75rem; }
}

/* 8.7 Dropdown/popover overlays: never wider than the viewport, long
   labels wrap, popups parented to body (see sf-responsive.js) stay on top */
.dropdown-menu{ max-width: calc(100vw - 1rem); }
.ts-dropdown.sf-popup-body{ z-index: 1080; }
.datepicker.sf-popup-body{ z-index: 1080; }

/* 8.8 Top navigation: drawer below lg. The Bootstrap collapse still drives
   open/closed state (sf-responsive.js closes it on select/outside/escape/
   navigation and locks body scroll); this only restyles the open panel. */
.navbar.sticky-top{ z-index: 1030; }
.navbar .navbar-toggler{ min-width: 2.75rem; min-height: 2.75rem; padding: .35rem .6rem; }
.navbar .navbar-brand{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 6rem); }
.navbar .nav-item.dropdown.active > .nav-link{ color: var(--au-primary); }
.navbar .dropdown-item.active, .navbar .dropdown-item:active{ background: var(--au-primary-soft); color: var(--au-navy); font-weight: 600; }
.sf-nav-backdrop{ display: none; }
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    position: fixed;
    top: var(--sf-navbar-h, 56px);
    left: 0;
    bottom: 0;
    width: min(340px, 88vw);
    height: auto !important;
    background: var(--au-surface-0);
    border-right: 1px solid var(--au-border);
    box-shadow: 0 12px 32px rgba(11, 61, 92, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .5rem .75rem 2.5rem .75rem;
    z-index: 1035;
    transition: none;
  }
  .navbar .navbar-collapse.collapsing{ height: auto !important; transition: none; }
  .navbar .navbar-nav{ margin-bottom: .25rem !important; }
  .navbar .nav-item{ border-bottom: 1px solid var(--au-rule); }
  .navbar .nav-item:last-child{ border-bottom: 0; }
  .navbar .nav-link{
    display: flex;
    align-items: center;
    min-height: 2.9rem;
    padding: .5rem .5rem;
    font-size: 1rem;
  }
  .navbar .nav-link.dropdown-toggle::after{ margin-left: auto; transition: transform .15s ease; }
  .navbar .nav-link.dropdown-toggle.show::after{ transform: rotate(180deg); }
  .navbar .nav-item.dropdown.active > .nav-link{
    font-weight: 700;
    color: var(--au-navy);
    box-shadow: inset 3px 0 0 var(--au-primary);
    padding-left: .75rem;
  }
  .navbar .dropdown-menu{
    border: 0;
    box-shadow: none;
    background: var(--au-surface-2);
    border-radius: var(--au-radius);
    margin: 0 0 .5rem 0;
    padding: .25rem 0;
    width: 100%;
    max-width: none;
  }
  .navbar .dropdown-item{
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .5rem 1rem .5rem 1.5rem;
    font-size: var(--au-fs-ui);
    white-space: normal;
  }
  .navbar .dropdown-item-text{ padding-left: 1.5rem; }
  .navbar .dropdown-divider{ margin: .25rem 1rem; }
  .navbar #server-task-spinner-wrapper{ padding: .5rem; }
  body.sf-nav-open{ overflow: hidden; }
  body.sf-nav-open .sf-nav-backdrop{
    display: block;
    position: fixed;
    top: var(--sf-navbar-h, 56px);
    left: 0; right: 0; bottom: 0;
    background: rgba(11, 29, 45, 0.45);
    /* below the sticky navbar (1030): the drawer is fixed INSIDE the navbar's
       stacking context, so it can only be above the backdrop if the backdrop
       is below the navbar itself */
    z-index: 1029;
  }
}
@media (max-width: 575.98px){
  .navbar .navbar-collapse{ width: min(340px, 86vw); }
}

/* Side-navigation shells (.au-shell) fold to a select below lg */
@media (max-width: 991.98px){
  .au-shell, .rpt-shell{ flex-direction: column; min-height: 0; }
  .au-nav, .rpt-nav{ display: none; }
  .au-nav-select, .rpt-nav-select{ display: block; }
}

/* ============================================================
   10) Gantt (.gantt-*) — Manufacturing → Schedule overview
   (app_modules/manufacturing/views/schedule/schedule_overview.hbs.js)
   ============================================================ */
.gantt{ display: flex; border: 1px solid var(--au-border); border-radius: var(--au-radius); background: var(--au-surface-0); overflow: hidden; }
.gantt-side{ flex: 0 0 300px; max-width: 300px; border-right: 1px solid var(--au-border-2); background: var(--au-surface-1); }
.gantt-side-head{ height: 88px; border-bottom: 1px solid var(--au-border-2); background: var(--au-surface-2); display: flex; flex-direction: column; }
.gantt-side-head-row{ padding: 0 .6rem; display: flex; align-items: center; font-size: var(--au-fs-sm); color: var(--au-navy); font-weight: 600; white-space: nowrap; overflow: hidden; }
.gantt-h-month{ height: 24px; }
.gantt-h-week{ height: 18px; }
.gantt-h-day{ height: 26px; }
.gantt-h-load{ height: 20px; }
.gantt-side-row{ padding: .15rem .6rem; border-bottom: 1px solid var(--au-rule); cursor: pointer; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gantt-side-row:hover{ background: var(--au-hover); }
.gantt-side-main{ display: flex; align-items: center; gap: .3rem; font-size: var(--au-fs-md); line-height: 1.2; white-space: nowrap; overflow: hidden; }
.gantt-side-number{ font-weight: 600; color: var(--au-ink-800); }
.gantt-side-sub{ font-size: var(--au-fs-xs); color: var(--au-muted); line-height: 1.2; }
.gantt-status-dot{ width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.gantt-status-dot--draft{ background: var(--au-faint); }
.gantt-status-dot--planned{ background: var(--au-info); }
.gantt-status-dot--production{ background: var(--au-warning); }
.gantt-status-dot--done{ background: var(--au-success); }
.gantt-main{ flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; }
.gantt-canvas{ position: relative; min-width: 100%; }
.gantt-head{ position: relative; height: 88px; border-bottom: 1px solid var(--au-border-2); background: var(--au-surface-2); }
.gantt-h-row{ position: relative; }
.gantt-h-cell{ position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: var(--au-fs-xs); color: var(--au-ink-600); border-left: 1px solid var(--au-rule); overflow: hidden; white-space: nowrap; }
.gantt-h-month .gantt-h-cell{ font-weight: 600; color: var(--au-navy); justify-content: flex-start; padding-left: .4rem; border-left-color: var(--au-border-2); }
.gantt-h-week .gantt-h-cell{ color: var(--au-muted); }
.gantt-h-daycell{ flex-direction: column; line-height: 1; gap: 2px; }
.gantt-h-daycell small{ font-size: .62rem; color: var(--au-faint); text-transform: uppercase; }
.gantt-h-daycell.gantt-today span{ background: var(--au-primary); color: #fff; border-radius: 999px; padding: 1px 5px; }
.gantt-load{ font-weight: 600; color: var(--au-ink-600); }
.gantt-load--1{ background: #e6f0f7; }
.gantt-load--2{ background: #c9def0; }
.gantt-load--3{ background: #a6c9e6; }
.gantt-load--4{ background: #6fa6d3; color: #fff; }
.gantt-body{ position: relative; }
.gantt-grid{ position: absolute; inset: 0; }
.gantt-col{ position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--au-rule); }
.gantt-weekend{ background: rgba(0, 0, 0, .035); }
.gantt-col.gantt-today{ background: var(--au-primary-soft); }
.gantt-today-line{ position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--au-primary); z-index: 3; pointer-events: none; }
.gantt-row{ position: relative; border-bottom: 1px solid var(--au-rule); }
.gantt-row--schedulable{ cursor: copy; }
.gantt-row--schedulable:hover{ background: rgba(11, 106, 162, .04); }
.gantt-bar{ position: absolute; top: 7px; height: 18px; border-radius: 4px; z-index: 2; display: flex; align-items: center; overflow: hidden; font-size: var(--au-fs-xs); color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); user-select: none; touch-action: none; }
.gantt-bar--editable{ cursor: grab; }
.gantt-bar--dragging{ cursor: grabbing; opacity: .85; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.gantt-bar--draft{ background: var(--au-faint); color: var(--au-ink-800); }
.gantt-bar--planned{ background: var(--au-info); }
.gantt-bar--production{ background: var(--au-warning); }
.gantt-bar--done{ background: var(--au-success); opacity: .8; }
.gantt-bar--late{ outline: 2px solid var(--au-danger); outline-offset: -1px; }
.gantt-bar-text{ padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; flex: 1 1 auto; }
.gantt-bar-sub{ font-weight: 400; opacity: .9; }
.gantt-handle{ position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; }
.gantt-handle--l{ left: 0; }
.gantt-handle--r{ right: 0; }
.gantt-bar:hover .gantt-handle{ background: rgba(255, 255, 255, .35); }
.gantt-bar-actual{ position: absolute; top: 27px; height: 4px; border-radius: 2px; background: var(--au-ink-700); z-index: 2; pointer-events: none; }
.gantt-bar-late-tail{ position: absolute; top: 11px; height: 10px; z-index: 1; border-radius: 0 4px 4px 0; opacity: .85; pointer-events: none; background: repeating-linear-gradient(135deg, var(--au-danger-soft) 0 4px, var(--au-danger) 4px 6px); }
.gantt-legend .gantt-legend-swatch{ position: static; display: inline-block; width: 1.1rem; height: .7rem; border-radius: 3px; vertical-align: middle; margin-right: .2rem; opacity: 1; outline: 0; }
.gantt-legend .gantt-legend-actual{ background: var(--au-ink-700); height: .3rem; }
.gantt-search{ width: 11rem; }
.gantt-page .au-toolbar{ padding-left: 0; padding-right: 0; border-top: 0; background: transparent; }
sf-dialog[name="gantt-mfo-dialog"] > div > div.text-end{ display: none; }
@media (max-width: 767.98px){
  .gantt-side{ flex-basis: 160px; max-width: 160px; }
  .gantt-side-sub{ display: none; }
  .gantt-search{ width: 8rem; }
}

/* ============================================================
   11) Voucher quick entry (.qe-*) — Accounting → Vouchers → New voucher
   (app_modules/accounting/views/vouchers/voucher_quick_entry.hbs.js)
   Generated VAT / counter rows sit under their base row, slightly recessed.
   ============================================================ */
.qe-table tr.qe-auto > td{ background: var(--au-surface-1); }
.qe-table tr.qe-auto .form-control, .qe-table tr.qe-auto .form-select{ color: var(--au-muted); }
.qe-table tr.qe-auto > td:first-child{ box-shadow: inset 3px 0 0 var(--au-border-2); }

/* ============================================================
   9) Print
   ============================================================ */

@media print{
  body{ background:#fff !important; color:#000 !important; }
  .card{ box-shadow:none !important; }
  .au-nav, .au-toolbar, .au-filters, .au-actions, .au-nav-select,
  .rpt-nav, .rpt-toolbar, .rpt-filters, .rpt-actions, .rpt-subtabs, .rpt-nav-select{ display: none !important; }
  .au-shell, .rpt-shell{ border: 0; }
}