/*
 * DFM theme bridge for Tabler (loaded after tabler.min.css, before the legacy style.css).
 *
 * Tabler components take their colours from --tblr-* variables. These map them onto the DFM design
 * tokens defined in style.css (--primary, --background, --card, ...) so Tabler buttons, cards,
 * badges, forms and menus keep the DFM look in both themes. RGB triplets are needed by Bootstrap
 * for translucent states; they are the same colours as the HSL tokens, pre-computed.
 *
 * Selectors use html[data-theme=...] so they outrank Tabler's own [data-theme=...] rules.
 */
html[data-theme="light"],
html[data-theme="dark"] {
  --tblr-primary: hsl(var(--primary));
  --tblr-primary-fg: hsl(var(--primary-foreground));
  --tblr-body-bg: hsl(var(--background));
  --tblr-body-color: hsl(var(--foreground));
  --tblr-emphasis-color: hsl(var(--foreground));
  --tblr-bg-surface: hsl(var(--card));
  --tblr-bg-surface-primary: hsl(var(--card));
  --tblr-bg-surface-secondary: hsl(var(--muted));
  --tblr-bg-forms: hsl(var(--card));
  --tblr-border-color: hsl(var(--border));
  --tblr-border-color-translucent: hsl(var(--border));
  --tblr-secondary: hsl(var(--muted-foreground));
  --tblr-secondary-color: hsl(var(--muted-foreground));
  --tblr-muted: hsl(var(--muted-foreground));
  --tblr-link-color: hsl(var(--primary));
  --tblr-link-hover-color: hsl(var(--primary));
  --tblr-danger: hsl(var(--destructive));
  --tblr-success: hsl(var(--status-success));
  --tblr-info: hsl(var(--status-info));
  --tblr-border-radius: var(--radius);
  --tblr-font-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tblr-font-monospace: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="light"] {
  --tblr-primary-rgb: 167, 98, 68;
  --tblr-body-bg-rgb: 241, 237, 228;
  --tblr-body-color-rgb: 36, 34, 30;
  --tblr-secondary-rgb: 113, 107, 96;
  --tblr-danger-rgb: 177, 47, 60;
  --tblr-success-rgb: 12, 141, 98;
  --tblr-info-rgb: 10, 84, 205;
}

html[data-theme="dark"] {
  --tblr-primary-rgb: 116, 109, 248;
  --tblr-body-bg-rgb: 3, 7, 17;
  --tblr-body-color-rgb: 225, 231, 239;
  --tblr-secondary-rgb: 154, 161, 172;
  --tblr-danger-rgb: 233, 83, 118;
  --tblr-success-rgb: 88, 228, 160;
  --tblr-info-rgb: 112, 184, 255;
}

/* Self-hosted Tabler Icons (templates/ui_macros.html: icon()). */
.icon {
  stroke-width: 1.75;
  vertical-align: -0.2em;
}

/* App shell (two-row header): see dfm-ui.css. */

/* Buttons: Tabler .btn tuned to the DFM density and palette. */
.btn {
  --tblr-btn-font-size: 14px;
  --tblr-btn-font-weight: 700;
  --tblr-btn-padding-y: 7px;
  --tblr-btn-padding-x: 13px;
  --tblr-btn-border-radius: 10px;
  --tblr-btn-bg: hsl(var(--secondary));
  --tblr-btn-color: hsl(var(--foreground));
  --tblr-btn-border-color: hsl(var(--border));
  --tblr-btn-hover-bg: hsl(var(--secondary) / .75);
  --tblr-btn-hover-color: hsl(var(--foreground));
  --tblr-btn-hover-border-color: hsl(var(--primary) / .45);
  --tblr-btn-active-bg: hsl(var(--secondary) / .9);
  --tblr-btn-active-border-color: hsl(var(--primary) / .55);
  --tblr-btn-disabled-opacity: .55;
  gap: 6px;
  min-height: 34px;
  line-height: 1.2;
  box-shadow: none;
  white-space: nowrap;
}
.btn-sm { --tblr-btn-padding-y: 5px; --tblr-btn-padding-x: 10px; --tblr-btn-font-size: 13px; min-height: 28px; }
.btn-lg { --tblr-btn-padding-y: 10px; --tblr-btn-padding-x: 18px; --tblr-btn-font-size: 15px; min-height: 42px; }
.btn-primary {
  --tblr-btn-bg: hsl(var(--primary));
  --tblr-btn-color: hsl(var(--primary-foreground));
  --tblr-btn-border-color: hsl(var(--primary));
  --tblr-btn-hover-bg: hsl(var(--primary) / .88);
  --tblr-btn-hover-color: hsl(var(--primary-foreground));
  --tblr-btn-hover-border-color: hsl(var(--primary));
  --tblr-btn-active-bg: hsl(var(--primary) / .8);
  --tblr-btn-active-color: hsl(var(--primary-foreground));
}
.btn-ghost-secondary {
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-color: hsl(var(--muted-foreground));
  --tblr-btn-hover-bg: hsl(var(--secondary));
  --tblr-btn-hover-color: hsl(var(--foreground));
  --tblr-btn-hover-border-color: hsl(var(--border));
}
.btn-outline-danger {
  --tblr-btn-bg: transparent;
  --tblr-btn-color: hsl(var(--destructive));
  --tblr-btn-border-color: hsl(var(--destructive) / .45);
  --tblr-btn-hover-bg: hsl(var(--destructive));
  --tblr-btn-hover-color: hsl(var(--destructive-foreground));
  --tblr-btn-hover-border-color: hsl(var(--destructive));
}
.btn-link {
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-color: hsl(var(--muted-foreground));
  --tblr-btn-hover-color: hsl(var(--foreground));
  text-decoration: none;
}

/* Notifications: dismiss button; errors/warnings persist (see base.html). */
.sonner-toast { display: flex; align-items: flex-start; gap: 10px; }
.sonner-toast-text { flex: 1; min-width: 0; }
.sonner-toast-close {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .7;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.sonner-toast-close:hover, .sonner-toast-close:focus-visible { opacity: 1; }
/* The toasts use Tabler's toast markup (.toast-container / .toast / .toast-body / .btn-close);
   these reset the Tabler defaults so the DFM toast look above and in style.css stays. */
.toast-container:where(.sonner-toaster) { max-width: none; pointer-events: auto; }
.toast-container:where(.sonner-toaster) > :not(:last-child) { margin-bottom: 0; }
.toast:where(.sonner-toast) { width: auto; max-width: none; background-clip: border-box; }
.toast:where(.sonner-toast).showing { transform: translateY(8px); } /* fade-out, as before */
.toast-body:where(.sonner-toast-text) { padding: 0; }
.btn-close:where(.sonner-toast-close) {
  position: static;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 0;
  outline-color: currentcolor;
  mask: none;
  filter: none;
  transition: all 0s ease 0s;
}
.btn-close:where(.sonner-toast-close)::before { content: none; }
.btn-close:where(.sonner-toast-close):hover { background-color: transparent; }
.btn-close:where(.sonner-toast-close):is(:focus, :focus-visible) { outline: revert; outline-offset: revert; box-shadow: none; }
.btn-close:where(.sonner-toast-close):focus:not(:hover, :focus-visible) { opacity: .7; }

/* KPI cards: see dfm-ui.css. */

/* Upload page: selected file list and report requirements. */
.upload-selected-heading { font-weight: 700; margin-bottom: 6px; }
.upload-selected-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.upload-selected-list li { display: flex; align-items: center; gap: 10px; }
.upload-selected-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-selected-list small { color: hsl(var(--muted-foreground)); white-space: nowrap; }
.upload-requirements { margin-top: 10px; }
.upload-requirements summary { cursor: pointer; font-weight: 700; color: hsl(var(--primary)); }
.upload-requirements .table-responsive { margin-top: 8px; }

/* Home: month-close steps, module filters and compact not-started cards. */
.month-close-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.close-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  text-decoration: none;
}
.close-step:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--foreground)); }
.close-step b { display: block; font-size: 14px; }
.close-step small { display: block; color: hsl(var(--muted-foreground)); font-size: 13px; }
.close-step-index {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  font-weight: 800;
  font-size: 14px;
}
.close-step.is-current { border-color: hsl(var(--primary) / .6); box-shadow: 0 0 0 3px hsl(var(--primary) / .12); }
.close-step.is-current .close-step-index { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.close-step.is-done .close-step-index { background: hsl(var(--status-success) / .18); color: hsl(var(--status-success)); border-color: hsl(var(--status-success) / .4); }
.module-health-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.module-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.module-filter-bar .btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.module-filter-bar .form-select { width: auto; min-width: 190px; font-size: 14px; }
.module-filter-empty { color: hsl(var(--muted-foreground)); margin: 6px 0 18px; }
.working-card.is-compact .working-stats,
.working-card.is-compact .calculation-progress { display: none; }
@media (max-width: 900px) {
  .month-close-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .month-close-steps { grid-template-columns: 1fr; }
}
.working-card.is-compact .micro-meta + .micro-meta { display: none; }

/* Assign & Map: how-to steps and next-step banner. */
.assign-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: hsl(var(--muted-foreground)); }
.assign-steps b { color: hsl(var(--foreground)); }
.assign-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.assign-next-actions { display: inline-flex; gap: 8px; }
.assign-unsaved-note { margin: 0 0 12px; color: hsl(var(--muted-foreground)); }

/* Module toolbar: one main action, More menu for the rest. */
.module-toolbar .btn .icon { width: 16px; height: 16px; }
.module-more-menu { margin-left: auto; }
.module-more-menu .dropdown-menu { font-size: 14px; background: hsl(var(--popover)); border-color: hsl(var(--border)); }
html[data-theme="dark"] .module-more-menu .dropdown-menu { background: hsl(var(--popover)); }
.module-more-menu .dropdown-item { color: hsl(var(--foreground)); }
.module-more-menu .dropdown-item:hover { background: hsl(var(--secondary)); }
.module-more-menu .dropdown-item-icon { width: 16px; height: 16px; }
.upload-progress { display: grid; gap: 6px; margin-top: 10px; }
.upload-progress .progress { background: hsl(var(--secondary)); }
.upload-progress .progress-bar { background: hsl(var(--primary)); transition: width .2s ease; }
.upload-progress small { color: hsl(var(--muted-foreground)); }
.btn-danger {
  --tblr-btn-bg: hsl(var(--destructive));
  --tblr-btn-color: hsl(var(--destructive-foreground));
  --tblr-btn-border-color: hsl(var(--destructive));
  --tblr-btn-hover-bg: hsl(var(--destructive) / .88);
  --tblr-btn-hover-color: hsl(var(--destructive-foreground));
  --tblr-btn-hover-border-color: hsl(var(--destructive));
  --tblr-btn-active-bg: hsl(var(--destructive) / .8);
  --tblr-btn-active-color: hsl(var(--destructive-foreground));
}
#dfmConfirmModal .modal-content { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
#dfmConfirmModal .modal-title { font-weight: 800; margin-bottom: 6px; }
#dfmConfirmModal [data-confirm-text] { color: hsl(var(--muted-foreground)); }

/* Admin danger zone: collapsed by default, separated from everyday user management. */
.dfm-danger-zone { margin-top: 28px; border: 1px solid hsl(var(--destructive) / .45) !important; }
.dfm-danger-zone > summary { cursor: pointer; list-style: none; }
.dfm-danger-zone > summary::-webkit-details-marker { display: none; }
.dfm-danger-zone > summary h2 { color: hsl(var(--destructive)); }
.dfm-danger-zone > summary h2::before { content: "▸ "; }
.dfm-danger-zone[open] > summary h2::before { content: "▾ "; }
.admin-mfa-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.backup-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 12px 0; }
.backup-code-list code { display: block; padding: 8px 10px; border: 1px dashed hsl(var(--border)); border-radius: 8px; font-size: 17px; letter-spacing: .08em; text-align: center; }

/* Help: month-close guide. */
.help-guide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.help-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.help-steps li { color: hsl(var(--muted-foreground)); }
.help-steps b { color: hsl(var(--foreground)); }
.help-steps a { color: hsl(var(--primary)); }
.help-statuses { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; align-items: center; }
.help-statuses dd { margin: 0; color: hsl(var(--muted-foreground)); }
@media (max-width: 900px) { .help-guide { grid-template-columns: 1fr; } }
.help-requirements { margin-bottom: 14px; }
.help-requirements > summary { cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; list-style: none; }
.help-requirements > summary::-webkit-details-marker { display: none; }
.help-requirements > summary h2 { margin: 0; }
.help-requirements > summary h2::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.help-requirements[open] > summary h2::before { transform: rotate(90deg); }
.help-requirements[open] > summary { margin-bottom: 10px; }

/* Data tables: filter box, row count and sortable headers (static/dfm-tables.js). */
.table-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.table-tools .form-control { max-width: 260px; }
.table-tools-count { color: hsl(var(--muted-foreground)); white-space: nowrap; }
.mini-table th.is-sortable { cursor: pointer; user-select: none; }
.mini-table th.is-sortable:hover, .mini-table th.is-sortable:focus-visible { color: hsl(var(--primary)); outline: none; }
.mini-table th.is-sortable::after { content: "\2195"; margin-left: 4px; opacity: .35; font-weight: 400; }
.mini-table th[aria-sort="ascending"]::after { content: "\2191"; opacity: .9; }
.mini-table th[aria-sort="descending"]::after { content: "\2193"; opacity: .9; }

/* Phone polish: pinned first column on wide tables. */
@media (max-width: 767.98px) {
  .table-wrap .mini-table:not(.mapping-table) > :is(thead, tbody) > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: hsl(var(--card));
    box-shadow: 1px 0 0 hsl(var(--border));
    max-width: 46vw;
    white-space: normal;
  }
  .table-wrap .mini-table:not(.mapping-table) > thead > tr > :first-child { z-index: 3; background: hsl(var(--muted)); }
  .table-tools .form-control { max-width: none; }
}

/* Forms: Tabler controls at DFM density. Legacy theme rules still set colours; the :root rules
   below win over the light theme's background shorthand so select chevrons survive. */
.form-control,
.form-select {
  font: inherit;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid hsl(var(--input));
  border-radius: 10px;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
.form-control:focus,
.form-select:focus {
  border-color: hsl(var(--ring));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .14);
}
.form-control::placeholder { color: hsl(var(--muted-foreground)); opacity: .85; }
.form-control-sm,
.form-select-sm { padding-top: 6px; padding-bottom: 6px; font-size: 13px; border-radius: 8px; }
.form-control[type="file"] { padding: 6px; }
:root:root .form-select {
  padding-right: 30px;
  background-image: var(--tblr-form-select-bg-img), var(--tblr-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 10px;
}
.form-check-input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; border: 1px solid hsl(var(--muted-foreground) / .65); }
/* Tabler draws the tick with a ::before mask, so only the box colours need restoring. */
:root .form-check-input { background-color: hsl(var(--background)); padding: 0; }
:root .form-check-input[type="checkbox"] { border-radius: 4px; }
:root .form-check-input[type="radio"] { border-radius: 50%; }
:root .form-check-input:checked { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.form-check-input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .18); }

/* In-page dialogs (RR invoice, lease/borrowing schedules, prepaid record): Bootstrap modals with the DFM panel look. */
.dfm-modal .modal-content { width: 100%; max-height: calc(100vh - 3.5rem); overflow: auto; }
.dfm-modal .modal-panel { width: 100%; max-height: calc(100vh - 3.5rem); padding: 16px; border-radius: 16px; box-shadow: 0 26px 80px rgb(15 23 42 / .28); }
.dfm-modal .ws-modal { overflow: hidden; }
.dfm-modal .ws-modal-body { min-height: 0; }

/* Inline alerts carry Tabler's alert classes; the DFM palette (shared with toasts) and spacing stay. */
.alert.dfm-alert { margin-bottom: 0; }

/* Panels and tiles carry Tabler card semantics (.card / .card-header / .card-title; see
   scripts/migrate_card_table_classes.py). style.css still draws them: these reset the Tabler card
   defaults that the DFM rules do not override, at Tabler's own specificity so style.css still wins. */
.card:where(.panel, .data-panel, .metric-card, .info-card, .status-card, .lease-export-card) {
  position: static;
  display: block;
  flex-direction: row;
  height: auto;
  color: inherit;
  word-wrap: inherit;
  box-shadow: none;
  transition: all 0s ease 0s;
  break-inside: auto;
}
.card-body:where(.metric-card, .info-card, .status-card, .lease-export-card) {
  position: static;
  flex: 0 1 auto;
  padding: 0;
}
.card-header:where(.panel-title-row) {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border-bottom: 0 none;
}
.card-header:where(.panel-title-row):first-child { border-radius: 0; }
.card-title:where(h2, h3) { font-weight: var(--tblr-font-weight-semibold); }
:where(.card) .card-header .card-title { margin: 0 0 8px; }

/* Data tables carry Tabler .table / .table-vcenter (scripts/migrate_card_table_classes.py); the
   .mini-table rules in style.css still draw them. Tabler's table defaults are reset here at
   Tabler's own specificity. Its header rule (.table thead th) outranks the plain .mini-table th
   rules, so the DFM header values are restated for it. */
.table:where(.mini-table) {
  margin-bottom: 0;
  vertical-align: baseline;
  border-color: currentcolor;
  font: revert; /* Tabler's font: inherit would undo the browser's table font defaults (quirks-mode pages) */
}
.table:where(.mini-table) > :not(caption) > * > * { box-shadow: none; }
.table:where(.mini-table) > :is(thead, tbody) { vertical-align: middle; }
.table:where(.mini-table) tr { break-inside: auto; }
.table:where(.mini-table) thead th {
  font-size: inherit;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: inherit;
  text-transform: none;
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
}
.table:where(.dense-table) thead th { font-size: 12px; }