/* ==========================================================================
   Agri Warehouse — Design System v3
   A thin, opinionated layer on top of Bootstrap 5. Bootstrap still provides
   the grid, form controls, and JS components (dropdowns, offcanvas, modals,
   collapse); this file redraws its visual defaults so the app reads as a
   considered product rather than a recolored admin template.

   Ground rules this version enforces everywhere:
     - Full viewport width. No centered, width-capped content box.
     - Indigo is the ONLY brand color (buttons, links, active nav, focus
       rings). Green / orange / red are reserved strictly for meaning
       (success, warning/outstanding, error/overdue) — never decoration.
       Most icons and borders are neutral gray by default; color is added
       only where it communicates a status.
     - Cards are white with a hairline border AND a subtle shadow — shadow
       carries the separation, the border just keeps edges crisp on white.
     - No zebra striping. Rows are separated by hairlines + generous height,
       distinguished on hover only.
     - Form fields are filled by default (no boxed outline until focus).
     - Big, bold numerals against small, quiet labels — typography carries
       hierarchy instead of chrome.

   Structure:
     1. Tokens
     2. Base / typography
     3. Layout shell
     4. Sidebar + topbar
     5. Buttons
     6. Cards + KPI cards
     7. Tables
     8. Filter bar / toolbar
     9. Forms
     10. Badges / status pills
     11. Alerts / flash
     12. Empty & loading states
     13. Breadcrumb
     14. Modals
     15. Utilities
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --gray-25:  #fbfbfc;
  --gray-50:  #f7f8fa;
  --gray-100: #f1f2f5;
  --gray-200: #e5e7eb;
  --gray-300: #d7dae0;
  --gray-400: #b0b5bf;
  --gray-500: #8a8f9a;
  --gray-600: #62687a;
  --gray-700: #454b5c;
  --gray-800: #262b3a;
  --gray-900: #14161f;

  /* Accent — Indigo, the single brand color. Used for primary buttons,
     links, active nav, focus rings. Nothing else in the app uses this
     color; it never stands in for a status. */
  --accent-50:  #eef2ff;
  --accent-100: #e0e7ff;
  --accent-500: #4f46e5;
  --accent-600: #4338ca;
  --accent-700: #3730a3;

  --success: #16a34a;
  --success-soft: #eaf7ef;
  --warning: #d97706;
  --warning-soft: #fdf3e5;
  --danger:  #dc2626;
  --danger-soft: #fbeaea;
  --info:    #2563eb;
  --info-soft: #eaf0fd;

  /* Status color taxonomy — color is applied ONLY where it communicates
     meaning, never as decoration:
       Positive / success / stock-in / completed -> --success (green)
       Warning / outstanding amounts              -> --warning (orange)
       Error / overdue / alerts                    -> --danger  (red)
       Everything else (including plain magnitudes
       like stock totals or transaction amounts)   -> neutral gray
     --info (blue) is defined for possible future informational use but is
     not currently applied anywhere, to keep the palette to brand + 3
     statuses + gray. */

  /* Semantic (dark-mode ready: redefine these under [data-theme="dark"] later) */
  --bg-page: var(--gray-50);
  --bg-surface: #ffffff;
  --bg-field: var(--gray-100);
  --border-default: var(--gray-200);
  --border-subtle: var(--gray-100);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-accent: #ffffff;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Shadow — elevation only, never used on static/flat surfaces */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.16);

  --space-card: 1.5rem;
  --transition-fast: 120ms ease;

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 60px;

  --content-max: 1920px;
}

/* ---------- 2. Base / typography ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }

.page-title { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; }
.page-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin: 0.2rem 0 0; }
.section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 0.75rem; }

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

.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Typography utility scale — use these instead of ad-hoc inline font-size
   styles so every "small text" in the app is one of exactly two sizes. */
.text-sm { font-size: 0.8125rem !important; }
.text-xs { font-size: 0.75rem !important; }

a { color: var(--accent-500); text-decoration: none; }
a:hover { color: var(--accent-600); }

::selection { background: var(--accent-100); color: var(--accent-700); }

/* Keyboard focus — visible ring on anything focusable, consistent with the
   form-field focus treatment. :focus-visible only, so mouse/touch users
   never see it flash. */
:focus-visible { outline: 3px solid var(--accent-100); outline-offset: 1px; border-radius: var(--r-sm); }
.form-control:focus-visible, .form-select:focus-visible { outline: none; } /* fields already show their own focus ring */

/* Custom scrollbar — small premium detail, WebKit/Chromium + Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Turbo Drive's built-in navigation progress bar — the one bit of "loading
   state" that needs zero custom JS, just a color that matches the brand. */
.turbo-progress-bar { background-color: var(--accent-500); height: 2px; }

/* ---------- 3. Layout shell ---------- */
.app-main {
  max-width: var(--content-max);
  padding: 1.75rem 2rem 4rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ---------- 4. Sidebar + topbar ---------- */
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-500);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 800;
  flex-shrink: 0;
}

.aw-shell { display: flex; min-height: 100vh; }
.aw-content-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.aw-sidebar.offcanvas.offcanvas-lg {
  --bs-offcanvas-width: var(--sidebar-w);
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}

/* Bootstrap's `.offcanvas-lg` responsive reset only cancels the mobile
   drawer styles (position/visibility/transform/width) that it applies
   BELOW the lg breakpoint — those declarations live inside that same
   sub-breakpoint block, so nothing re-establishes a visible, sized, flex
   column above it, and `--bs-offcanvas-width` is never read outside the
   mobile block either. Without this, the sidebar collapses to an
   effectively empty column at desktop widths. Force the desktop layout
   explicitly instead of relying on the component's built-in behavior. */
@media (min-width: 992px) {
  .aw-sidebar.offcanvas-lg {
    position: relative !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    transform: none !important;
    width: var(--sidebar-w) !important;
    height: auto !important;
    max-width: none !important;
    background: var(--bg-surface) !important;
    transition: width var(--transition-fast);
  }
}

.aw-sidebar__brand {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-subtle);
  height: var(--topbar-h);
}
.aw-sidebar__brand .brand-name { font-weight: 800; font-size: 0.95rem; white-space: nowrap; }

.aw-sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.75rem; }

.sidebar-section-title {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 1.1rem 0.6rem 0.4rem; white-space: nowrap;
}
.sidebar-section-title:first-child { padding-top: 0.25rem; }

.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 0.875rem; font-weight: 500;
  margin-bottom: 0.125rem;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}
.sidebar-link:hover { background: var(--gray-100); color: var(--text-primary); }
.sidebar-link.active { background: var(--accent-50); color: var(--accent-600); font-weight: 600; }
.sidebar-link.disabled { color: var(--gray-300); pointer-events: none; }
.sidebar-link .bi, .sidebar-link .ph { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-link .sidebar-chevron { margin-left: auto; font-size: 0.7rem; transition: transform var(--transition-fast); flex-shrink: 0; }
.sidebar-link[aria-expanded="true"] .sidebar-chevron { transform: rotate(90deg); }

.sidebar-submenu { padding-left: 1.9rem; }
.sidebar-submenu .sidebar-link { font-size: 0.8125rem; padding: 0.4rem 0.65rem; }

.aw-sidebar__footer { border-top: 1px solid var(--border-subtle); padding: 0.75rem; }
.sidebar-collapse-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem; border-radius: var(--r-sm); color: var(--text-muted);
  border: none; background: var(--bg-field); font-size: 0.8rem;
}
.sidebar-collapse-toggle:hover { background: var(--gray-200); color: var(--text-primary); }

@media (min-width: 992px) {
  html.sidebar-collapsed .aw-sidebar.offcanvas-lg { width: var(--sidebar-w-collapsed) !important; }
  html.sidebar-collapsed .aw-sidebar .sidebar-label,
  html.sidebar-collapsed .aw-sidebar .brand-name,
  html.sidebar-collapsed .aw-sidebar .sidebar-section-title,
  html.sidebar-collapsed .aw-sidebar .sidebar-chevron { display: none !important; }
  html.sidebar-collapsed .aw-sidebar .sidebar-link { justify-content: center; padding: 0.6rem; }
  html.sidebar-collapsed .aw-sidebar .sidebar-submenu { display: none !important; }
  html.sidebar-collapsed .aw-sidebar .sidebar-collapse-toggle { padding: 0.6rem; }
}

.aw-topbar {
  position: sticky; top: 0; z-index: 1020;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 1.5rem;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.aw-topbar .form-select:focus { box-shadow: none; }

.aw-user-chip { font-size: 0.8125rem; color: var(--text-secondary); }
.aw-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-50); color: var(--accent-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
  flex-shrink: 0;
}

/* ---------- 5. Buttons ---------- */
.btn {
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--r-sm);
  padding: 0.5rem 1rem;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn.disabled { opacity: 0.55; box-shadow: none; }
.btn-lg { padding: 0.7rem 1.3rem; font-size: 0.9375rem; border-radius: var(--r-md); }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8125rem; }

.btn-primary {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-600);
  border-color: var(--accent-600);
  box-shadow: var(--shadow-sm);
}
.btn-primary:active { background-color: var(--accent-700); border-color: var(--accent-700); }
.btn-primary:disabled { background-color: var(--accent-500); border-color: var(--accent-500); }

/* Secondary = white surface + a visible gray border. Not ghost/transparent —
   a clean, always-visible outline reads as an intentional button rather
   than a stray link, which is what actually separates a considered SaaS UI
   from a Bootstrap default; ghost-everywhere just looks unfinished. */
.btn-outline-secondary {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-color: var(--border-default);
}
.btn-outline-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--text-primary);
}

.btn-outline-danger { color: var(--danger); background: transparent; border-color: transparent; }
.btn-outline-danger:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.btn-success { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-danger { background-color: var(--danger); border-color: var(--danger); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--gray-100); color: var(--text-primary); }

.btn-group .btn { border-radius: var(--r-sm); }

/* ---------- 6. Cards + KPI cards ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-header { background: transparent; border-bottom: 1px solid var(--border-subtle); padding: 1.125rem var(--space-card); }
/* Clickable cards (e.g. report launchers) lift slightly so it's obvious
   they're tappable, without any color noise. */
a.card { transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
a.card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-body { padding: var(--space-card); }
.card-footer { background: transparent; border-top: 1px solid var(--border-subtle); }

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.375rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; }
.kpi-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: var(--text-secondary);
  background: var(--gray-100);
  flex-shrink: 0;
}
.kpi-card__icon.tone-success  { color: var(--success);  background: var(--success-soft); }
.kpi-card__icon.tone-warning  { color: var(--warning);  background: var(--warning-soft); }
.kpi-card__icon.tone-danger   { color: var(--danger);   background: var(--danger-soft); }
.kpi-card__icon.tone-info     { color: var(--info);     background: var(--info-soft); }
.kpi-card__icon.tone-secondary { color: var(--text-secondary); background: var(--gray-100); }
.kpi-card__label {
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.045em;
}
.kpi-card__value {
  font-size: 1.875rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text-primary); line-height: 1.1;
}
.kpi-card__trend { font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.2rem; }
.kpi-card__trend.up { color: var(--success); }
.kpi-card__trend.down { color: var(--danger); }
.kpi-card__trend.flat { color: var(--text-muted); }
.kpi-card__support { font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- 7. Tables ---------- */
.aw-table-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-responsive { border-radius: 0; }

table.aw-table { margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
table.aw-table thead th {
  /* Not position: sticky — .aw-table-card (the rounded-corner wrapper)
     uses overflow: hidden for its border-radius, and a sticky element
     inside a clipped, non-scrolling ancestor renders unpredictably (rows
     bleeding through above the header on scroll). A plain static header
     is a safe tradeoff over fixing the clipping architecture. */
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
table.aw-table tbody td {
  padding: 0.95rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
table.aw-table tbody tr:last-child td { border-bottom: none; }
table.aw-table tbody tr { transition: background-color var(--transition-fast); }
table.aw-table tbody tr:hover { background: var(--gray-50); }
table.aw-table td.text-end, table.aw-table th.text-end { text-align: right; }
table.aw-table .cell-primary { font-weight: 600; color: var(--text-primary); }
table.aw-table .cell-muted { color: var(--text-muted); }

.aw-table-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border-subtle); }

/* Pagination (pagy_bootstrap_nav) — Bootstrap's default is its own blue and
   heavy borders; restyle to quiet gray chips with an accent current page. */
.pagination { gap: 0.25rem; margin: 0; }
.pagination .page-link {
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.8438rem;
  font-weight: 600;
  min-width: 2.25rem;
  padding: 0.45rem 0.6rem;
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pagination .page-link:hover { background: var(--gray-100); color: var(--text-primary); box-shadow: none; }
.pagination .page-link:focus { box-shadow: 0 0 0 3px var(--accent-50); }
.pagination .page-item.active .page-link { background: var(--accent-500); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--gray-300); background: transparent; }

/* ---------- 8. Filter bar / toolbar ---------- */
.aw-table-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
.aw-table-toolbar .search-wrap { position: relative; max-width: 320px; flex: 1 1 260px; }
.aw-table-toolbar .search-wrap .bi,
.aw-table-toolbar .search-wrap .ph { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.875rem; pointer-events: none; }
.aw-table-toolbar .search-wrap input { padding-left: 2.2rem; }
.aw-table-toolbar .toolbar-actions { display: flex; gap: 0.4rem; align-items: center; }
.aw-table-toolbar .toolbar-actions .btn { color: var(--text-secondary); }

/* Generate Bill selection bar (Purchase/Sale list) — display:flex lives
   here rather than on a Bootstrap ".d-flex" utility class so the JS only
   ever has to toggle ".d-none" on/off; mixing two "!important" display
   utilities on one element is a specificity trap (whichever the vendor
   stylesheet declares last wins, regardless of source order in the class
   attribute), so this sidesteps it entirely. */
.bill-picker-bar { display: flex; }

/* ---------- 9. Forms ---------- */
.form-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; }

/* Filled-by-default fields: no visible box until focused. This is the
   single change that most separates "Bootstrap form" from "SaaS form". */
.form-control, .form-select {
  background-color: var(--bg-field);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control-lg, .form-select-lg { padding: 0.75rem 0.95rem; font-size: 0.9375rem; border-radius: var(--r-md); }
.form-control:focus, .form-select:focus {
  background-color: var(--bg-surface);
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-50);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--bg-field); opacity: 0.7; }
.form-text { font-size: 0.78125rem; color: var(--text-muted); }

/* Locked/read-only display fields (e.g. the fixed Type on entry forms) are
   built as `.form-control.bg-light` divs — map Bootstrap's .bg-light to the
   same fill as real fields so locked and editable fields sit flush. */
.form-control.bg-light { background-color: var(--bg-field) !important; color: var(--text-secondary); }

/* Checkboxes & radios — Bootstrap ships these in its own blue; recolor to
   the brand accent and enlarge slightly for touch. */
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid var(--gray-300); }
.form-check-input:checked { background-color: var(--accent-500); border-color: var(--accent-500); }
.form-check-input:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-50); }

/* Native date inputs — keep iOS from rendering them shorter than text fields */
input[type="date"].form-control { min-height: calc(1.5em + 1.2rem + 2px); }
input[type="date"].form-control-lg { min-height: calc(1.5em + 1.5rem + 2px); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2362687a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.2rem;
}

.form-section { padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.form-section__title { font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.2rem; }
.form-section__hint { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1rem; }

.form-actions-sticky {
  position: sticky; bottom: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 1rem var(--space-card);
  display: flex; gap: 0.5rem;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ---------- 10. Badges / status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  line-height: 1.3;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-success { background: var(--success-soft); color: var(--success); }
.pill-warning { background: var(--warning-soft); color: var(--warning); }
.pill-danger  { background: var(--danger-soft);  color: var(--danger); }
.pill-info    { background: var(--info-soft);    color: var(--info); }
.pill-neutral { background: var(--gray-100); color: var(--text-secondary); }

/* ---------- 11. Alerts / flash ---------- */
.alert { border: 1px solid transparent; border-radius: var(--r-md); font-size: 0.875rem; padding: 0.85rem 1.1rem; }
.alert-success { background: var(--success-soft); color: #0f5c2e; border-color: #cdeada; }
.alert-danger  { background: var(--danger-soft);  color: #8a1f1f; border-color: #f4cfcf; }
.alert-light   { background: var(--gray-50); color: var(--text-secondary); border-color: var(--border-subtle); }

/* ---------- 12. Empty & loading states ---------- */
.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--text-muted); }
.empty-state__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-400);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
}
.empty-state__title { font-size: 0.9375rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.25rem; }
.empty-state__body { font-size: 0.8125rem; max-width: 340px; margin: 0 auto 1rem; }

@keyframes aw-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 37%, var(--gray-100) 63%);
  background-size: 400px 100%;
  animation: aw-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

/* ---------- 13. Breadcrumb ---------- */
.aw-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.aw-breadcrumb a { color: var(--text-muted); }
.aw-breadcrumb a:hover { color: var(--accent-600); }
.aw-breadcrumb .crumb-sep { color: var(--gray-300); }
.aw-breadcrumb .crumb-current { color: var(--text-secondary); font-weight: 600; }

/* ---------- 14. Modals ---------- */
.modal-content { border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header { padding: 1.25rem 1.5rem 0; }
.modal-title { font-size: 1.0625rem; font-weight: 700; }
.modal-body { padding: 0.75rem 1.5rem 1.25rem; font-size: 0.875rem; }
.modal-footer { padding: 0 1.5rem 1.25rem; }
.modal-backdrop.show { opacity: 0.4; }

/* Dropdowns / popovers — the one place shadow is used, since they float. */
.dropdown-menu {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
  margin-top: 0.4rem;
}
.dropdown-item { border-radius: var(--r-sm); font-size: 0.875rem; padding: 0.5rem 0.75rem; color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gray-100); }
.dropdown-item.text-danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- 15. Utilities ---------- */
.progress { background-color: var(--gray-100); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar { border-radius: var(--r-pill); }

.divider-y > * + * { border-top: 1px solid var(--border-subtle); }

/* Status color utilities — for the rare icon or accent that needs to carry
   meaning outside a full component variant. Used sparingly by design: most
   icons stay neutral gray, color is reserved for genuine status. */
.icon-tone-success   { color: var(--success) !important; }
.icon-tone-info       { color: var(--info) !important; }
.icon-tone-warning    { color: var(--warning) !important; }
.icon-tone-danger     { color: var(--danger) !important; }
.icon-tone-secondary  { color: var(--text-muted) !important; }

/* Section header accent — a thin colored bar keying a single card/table
   header to a genuine status (e.g. an outstanding-amount table). Use at
   most once or twice per page, never as a default per-card treatment. */
.header-accent { border-left: 3px solid var(--border-default); padding-left: 0.75rem; }
.header-accent.tone-success  { border-left-color: var(--success); }
.header-accent.tone-warning   { border-left-color: var(--warning); }
.header-accent.tone-danger    { border-left-color: var(--danger); }

@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .card, .kpi-card, .aw-table-card { box-shadow: none !important; border-color: #ccc !important; }
  /* A printed page is a document, not an app: strip every interactive
     control so lists/ledgers/registers print as clean tables. */
  .btn, .aw-table-toolbar form, .toolbar-actions, .pagination,
  .aw-breadcrumb, .bill-picker-bar, .form-actions-sticky,
  .modal, .modal-backdrop, .alert-dismissible .btn-close { display: none !important; }
  .aw-table-toolbar { border-bottom: none; padding-bottom: 0; }
  a { color: inherit !important; }
  table.aw-table tbody tr:hover { background: transparent; }
}

/* ---------- 16. Mobile (app-like, not shrunken-desktop) ---------- */
@media (max-width: 767.98px) {
  .app-main { padding: 1rem 1rem 5rem; }
  .aw-topbar { padding: 0 1rem; }
  .page-title { font-size: 1.375rem; }
  .page-header { margin-bottom: 1.25rem; }

  /* Touch targets: every button comfortably tappable. Row-action icon
     buttons especially — desktop-sized btn-sm is too small for thumbs. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; min-width: 40px; padding: 0.45rem 0.8rem; }
  .form-control, .form-select { min-height: 44px; }
  .form-check-input { width: 1.4em; height: 1.4em; }
  .sidebar-link { padding: 0.7rem 0.65rem; }
  .dropdown-item { padding: 0.65rem 0.75rem; }

  /* Filter toolbars: inline max-widths are a desktop layout; on a phone
     every filter control becomes a full- or half-width row so nothing
     squeezes or overflows. */
  .aw-table-toolbar { padding: 0.875rem 1rem; }
  .aw-table-toolbar form { width: 100%; }
  .aw-table-toolbar .search-wrap { max-width: 100% !important; flex: 1 1 100%; }
  .aw-table-toolbar .form-select,
  .aw-table-toolbar input[type="date"] { max-width: 100% !important; flex: 1 1 44%; }
  .aw-table-toolbar .toolbar-actions { width: 100%; justify-content: flex-end; }

  /* Tables become stacked cards */
  table.aw-table thead { display: none; }
  table.aw-table, table.aw-table tbody, table.aw-table tr, table.aw-table td { display: block; width: 100%; }
  table.aw-table tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    margin: 0.75rem;
    width: auto;
    overflow: hidden;
  }
  table.aw-table td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; text-align: right;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
  }
  table.aw-table td:last-child { border-bottom: none; }
  table.aw-table td::before {
    content: attr(data-label);
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); text-align: left;
  }
  /* Unlabeled cells (row-action buttons): no phantom label, actions align
     right in a single comfortable row. */
  table.aw-table td[data-label=""] { justify-content: flex-end; gap: 0.5rem; }
  table.aw-table td[data-label=""]::before { content: none; }

  /* Sticky form actions: full-width, thumb-reachable buttons */
  .form-actions-sticky { flex-direction: column-reverse; padding: 0.875rem 1rem; }
  .form-actions-sticky .btn { width: 100%; }

  /* Page-header actions: stretch to a comfortable row */
  .page-header .btn-group { width: 100%; display: flex; }
  .page-header .btn-group .btn { flex: 1; }

  /* Modals: bottom-sheet feel — slides reads as native app, not web dialog */
  .modal-dialog-centered { align-items: flex-end; min-height: 100%; margin: 0; max-width: none; }
  .modal-dialog-centered .modal-content { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-footer { flex-direction: column-reverse; gap: 0.5rem; }
  .modal-footer .btn, .modal-footer form, .modal-footer form .btn { width: 100%; }
  .modal-footer > * { margin: 0; }

  /* Pagination: centered, roomy */
  .pagination { justify-content: center; flex-wrap: wrap; }
  .pagination .page-link { min-width: 2.75rem; padding: 0.6rem 0.7rem; }

  /* KPI value size steps down so 4-up grids never clip */
  .kpi-card { padding: 1rem 1.125rem; }
  .kpi-card__value { font-size: 1.5rem; }

  /* Bill picker bar: stack count + button */
  .bill-picker-bar { flex-direction: column; align-items: stretch !important; }
  .bill-picker-bar .btn { width: 100%; }
}