/* ==========================================================================
   MyStore  --  ANCCONNECT LIMITED brand theme
   Single source of truth for colours, type, radius and shadows.
   Loaded by base.html and the login page AFTER Bootstrap.
   ========================================================================== */
:root {
  /* Brand palette */
  --anc-primary: #0B3C33;        /* Dark teal  ~35% */
  --anc-primary-dark: #082B25;
  --anc-primary-soft: #E3EEEB;
  --anc-secondary: #4DC1A1;      /* Mint       ~15% (accents, never small text on white) */
  --anc-white: #FFFFFF;          /* ~30% */
  --anc-charcoal: #263238;       /* Text       ~10% */
  --anc-silver: #C0C7CC;         /* Borders    ~5%  */
  --anc-light-gray: #F3F6F5;     /* Page bg    ~5%  */
  --anc-muted: #5B6B72;          /* Secondary text (AA on white and light gray) */

  /* Semantic (functional use only) */
  --anc-success: #1B7F5C;
  --anc-warning: #8A5200;
  --anc-danger: #B3261E;

  --anc-font-family: "Courier New", Courier, monospace;      /* brand: headings, figures, buttons */
  /* Readable text font for body copy, tables and form fields. To go fully Courier again, set this to var(--anc-font-family). */
  --anc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --anc-radius-sm: 4px;
  --anc-radius-md: 8px;
  --anc-radius-lg: 12px;
  --anc-border-color: var(--anc-silver);
  --anc-page-background: var(--anc-light-gray);
  --anc-card-background: var(--anc-white);
  --anc-shadow-sm: 0 2px 6px rgba(11, 60, 51, 0.06);
  --anc-shadow-md: 0 4px 12px rgba(11, 60, 51, 0.08);
  --anc-sidebar-width: 260px;

  /* Bootstrap bridge */
  --bs-body-font-family: var(--anc-font-body);
  --bs-body-color: var(--anc-charcoal);
  --bs-body-bg: var(--anc-page-background);
  --bs-border-color: var(--anc-silver);
  --bs-primary: #0B3C33;
  --bs-primary-rgb: 11, 60, 51;
  --bs-link-color: #0B3C33;
  --bs-link-color-rgb: 11, 60, 51;
  --bs-link-hover-color: #082B25;
  --bs-border-radius: var(--anc-radius-md);
}

body { font-family: var(--anc-font-body); font-size: 1rem; line-height: 1.5; color: var(--anc-charcoal); background: var(--anc-page-background); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--anc-font-family); font-weight: 700; color: var(--anc-primary); }
h1, .h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
h2, .h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
a { color: var(--anc-primary); }
.text-muted, .form-text { color: var(--anc-muted) !important; }
.text-primary { color: var(--anc-primary) !important; }
.text-success { color: var(--anc-success) !important; }
.text-warning { color: var(--anc-warning) !important; }
.text-danger { color: var(--anc-danger) !important; }
.bg-primary { background-color: var(--anc-primary) !important; }
.bg-success { background-color: var(--anc-success) !important; }
.bg-secondary { background-color: var(--anc-silver) !important; color: var(--anc-charcoal) !important; }
strong, b, .fw-bold { font-weight: 700; }

/* Keyboard focus: always visible (teal on light, white on the dark sidebar) */
:focus-visible { outline: 3px solid var(--anc-primary); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: #fff; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--anc-font-family); font-weight: 700; border-radius: var(--anc-radius-md); min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 34px; }
.btn-primary, .btn-primary-custom {
  --bs-btn-bg: var(--anc-primary); --bs-btn-border-color: var(--anc-primary); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--anc-primary-dark); --bs-btn-hover-border-color: var(--anc-primary-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--anc-primary-dark); --bs-btn-active-border-color: var(--anc-primary-dark); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--anc-primary); --bs-btn-disabled-border-color: var(--anc-primary); --bs-btn-disabled-color: #fff;
  background: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); color: #fff;
}
.btn-primary-custom:hover { background: var(--anc-primary-dark); color: #fff; }
.btn-secondary-mint { background: var(--anc-secondary); border: 1px solid var(--anc-secondary); color: var(--anc-primary); }
.btn-secondary-mint:hover { background: #3FAE90; border-color: #3FAE90; color: var(--anc-primary); }
.btn-outline-primary { --bs-btn-color: var(--anc-primary); --bs-btn-border-color: var(--anc-primary); --bs-btn-hover-bg: var(--anc-primary); --bs-btn-hover-border-color: var(--anc-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--anc-primary); --bs-btn-active-border-color: var(--anc-primary); --bs-btn-active-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--anc-charcoal); --bs-btn-border-color: var(--anc-silver); --bs-btn-hover-bg: var(--anc-primary-soft); --bs-btn-hover-border-color: var(--anc-primary); --bs-btn-hover-color: var(--anc-primary); --bs-btn-active-bg: var(--anc-primary-soft); --bs-btn-active-color: var(--anc-primary); --bs-btn-active-border-color: var(--anc-primary); }
.btn-outline-danger { --bs-btn-color: var(--anc-danger); --bs-btn-border-color: var(--anc-danger); --bs-btn-hover-bg: var(--anc-danger); --bs-btn-hover-border-color: var(--anc-danger); }
.btn-danger { --bs-btn-bg: var(--anc-danger); --bs-btn-border-color: var(--anc-danger); --bs-btn-hover-bg: #8F1D17; --bs-btn-hover-border-color: #8F1D17; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Cards ---------- */
.dashboard-card, .form-card { background: var(--anc-card-background); border: 1px solid var(--anc-border-color); border-radius: var(--anc-radius-lg); box-shadow: var(--anc-shadow-sm); padding: 1.25rem; }
.stat-card { height: 100%; border-top: 4px solid var(--anc-secondary); }
.stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; word-break: break-word; }
.stat-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--anc-muted); margin-top: .25rem; }
.table-card { background: var(--anc-card-background); border: 1px solid var(--anc-border-color); border-radius: var(--anc-radius-lg); box-shadow: var(--anc-shadow-sm); overflow: hidden; }
.table-card > .card-header { background: var(--anc-white); border-bottom: 1px solid var(--anc-border-color); padding: .9rem 1.25rem; font-weight: 700; color: var(--anc-primary); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--anc-light-gray); --bs-table-hover-bg: var(--anc-primary-soft); color: var(--anc-charcoal); }
.table > thead > tr > th { background: var(--anc-light-gray); color: var(--anc-primary); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border-bottom: 2px solid var(--anc-silver); }
.table > tbody > tr > td { vertical-align: middle; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- Forms ---------- */
.form-label { font-weight: 700; margin-bottom: .3rem; }
.form-control, .form-select { font-family: var(--anc-font-body); border: 1px solid var(--anc-silver); border-radius: var(--anc-radius-md); min-height: 42px; color: var(--anc-charcoal); }
.form-control:focus, .form-select:focus { border-color: var(--anc-primary); box-shadow: 0 0 0 3px rgba(77, 193, 161, .35); }
.form-check-input:checked { background-color: var(--anc-primary); border-color: var(--anc-primary); }
.form-check-input:focus { border-color: var(--anc-primary); box-shadow: 0 0 0 3px rgba(77, 193, 161, .35); }

/* ---------- Alerts & status badges (icon + text, never colour alone) ---------- */
.alert { border-radius: var(--anc-radius-md); border-width: 1px; border-left-width: 5px; display: flex; gap: .6rem; align-items: flex-start; }
.alert-success { background: #E8F5EF; border-color: var(--anc-success); color: #12553D; }
.alert-danger { background: #FBECEA; border-color: var(--anc-danger); color: #7F1B15; }
.alert-warning { background: #FFF4E0; border-color: var(--anc-warning); color: #5C3700; }
.alert-info { background: var(--anc-primary-soft); border-color: var(--anc-primary); color: var(--anc-primary); }
.badge-status { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.badge-status.paid { background: #E8F5EF; color: #12553D; border-color: var(--anc-success); }
.badge-status.partial { background: #FFF4E0; color: #5C3700; border-color: var(--anc-warning); }
.badge-status.unpaid, .badge-status.pending { background: var(--anc-white); color: var(--anc-charcoal); border-color: var(--anc-muted); }
.badge-status.overdue { background: #FBECEA; color: #7F1B15; border-color: var(--anc-danger); }
.badge-status.refunded, .badge-status.written_off { background: var(--anc-light-gray); color: var(--anc-muted); border-color: var(--anc-silver); }
.page-link { color: var(--anc-primary); font-family: var(--anc-font-family); }
.page-item.active .page-link { background: var(--anc-primary); border-color: var(--anc-primary); color: #fff; }

/* ---------- App shell ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--anc-sidebar-width); max-width: 85vw; background: var(--anc-primary); color: #fff; z-index: 1040; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; }
body.sidebar-open .sidebar { transform: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(38, 50, 56, .55); z-index: 1030; }
body.sidebar-open .sidebar-backdrop { display: block; }
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: var(--anc-primary); color: #fff; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: 0 .75rem; }
.topbar .btn { color: #fff; border-color: rgba(255, 255, 255, .5); }
.main-content { padding-top: 56px; min-height: 100vh; display: flex; flex-direction: column; }
.main-content > .page { flex: 1; }
.brand { padding: 1.1rem 1rem .5rem; }
.brand-logo-wrap { background: #fff; border-radius: var(--anc-radius-md); padding: .5rem .75rem; display: flex; align-items: center; justify-content: center; min-height: 56px; }
.brand-logo { max-width: 100%; max-height: 48px; height: auto; width: auto; }
.brand-fallback { color: var(--anc-primary); font-weight: 700; font-size: 1.15rem; }
.store-pill { margin: .5rem 1rem 0; padding: .5rem .75rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--anc-radius-md); font-size: .8rem; }
.store-pill a { color: var(--anc-secondary); font-weight: 700; }
.sidebar .nav { padding: .75rem .5rem; }
.sidebar .nav-link { color: rgba(255, 255, 255, .86); display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border-radius: var(--anc-radius-md); font-weight: 700; min-height: 44px; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 4px 0 0 var(--anc-secondary); }
.sidebar .nav-link i { color: var(--anc-secondary); font-size: 1.1rem; }
.sidebar .nav-link.btn-link { background: none; border: 0; width: 100%; text-align: left; text-decoration: none; justify-content: flex-start; }
.nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .62); padding: .9rem .85rem .25rem; }
.sidebar-footer { margin-top: auto; padding: 1rem; font-size: .72rem; color: rgba(255, 255, 255, .7); border-top: 1px solid rgba(255, 255, 255, .15); }
.app-footer { text-align: center; padding: 1.25rem 1rem; font-size: .78rem; color: var(--anc-muted); border-top: 1px solid var(--anc-silver); background: var(--anc-white); }
.app-footer .tagline { color: var(--anc-primary); font-weight: 700; }
.filter-bar { background: var(--anc-white); border: 1px solid var(--anc-border-color); border-radius: var(--anc-radius-lg); padding: 1rem; box-shadow: var(--anc-shadow-sm); }
.bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 170px; }
.bar-chart .col-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; min-width: 0; }
.bar-chart .bar { background: var(--anc-primary); border-radius: var(--anc-radius-sm) var(--anc-radius-sm) 0 0; min-height: 3px; height: 0; transition: height .3s ease; }
.bar-chart .bar-value { font-size: .68rem; color: var(--anc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 992px) {
  .sidebar { transform: none; }
  .sidebar-backdrop { display: none !important; }
  .topbar { display: none; }
  .main-content { margin-left: var(--anc-sidebar-width); padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .sidebar, .topbar, .app-footer, .no-print { display: none !important; } .main-content { margin: 0; padding: 0; } }

/* Checkbox lists inside forms (e.g. choosing branches) */
.form-card div[id^="id_"] > div > label { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; font-weight: 400; min-height: 44px; }
.form-card div[id^="id_"] input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; flex: none; }

/* ---------- Plain Django form inputs on auth pages and built-in forms ---------- */
.auth-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
.auth-card select, .auth-card textarea,
.form-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=file]),
.form-card select, .form-card textarea {
  display: block; width: 100%; min-height: 42px; padding: .375rem .75rem; font-family: var(--anc-font-body);
  font-size: 1rem; color: var(--anc-charcoal); background: #fff; border: 1px solid var(--anc-silver); border-radius: var(--anc-radius-md);
}
.auth-card input:focus, .auth-card select:focus, .form-card input:focus, .form-card select:focus {
  border-color: var(--anc-primary); box-shadow: 0 0 0 3px rgba(77, 193, 161, .35); outline: 0;
}
.auth-card .form-check-input, .form-card .form-check-input { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- Sign-in, sign-up and reset pages ---------- */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--anc-primary); }
.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: var(--anc-radius-lg); box-shadow: var(--anc-shadow-md); padding: 2rem 1.5rem; border-top: 6px solid var(--anc-secondary); }
.auth-foot { text-align: center; color: rgba(255, 255, 255, .85); font-size: .78rem; padding: 1rem; }
.auth-foot .tagline, .hero .tagline-hero { color: var(--anc-secondary); font-weight: 700; }

/* ---------- Public website ---------- */
.public-nav { background: var(--anc-primary); }
.brand-chip { background: #fff; border-radius: 8px; padding: .35rem .6rem; display: inline-flex; align-items: center; }
.hero { background: var(--anc-primary); color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .9); }
.hero .hero-note { color: rgba(255, 255, 255, .75); }
.hero h1 { color: #fff; font-weight: 700; }
.hero-panel { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--anc-radius-lg); padding: 1.25rem; color: #fff; }
.hero-row { display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.feature-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--anc-primary-soft); color: var(--anc-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.step { background: var(--anc-light-gray); border: 1px solid var(--anc-silver); border-radius: var(--anc-radius-lg); padding: 1.25rem; height: 100%; }
.step-no { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--anc-primary); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: .5rem; }
.cta { background: var(--anc-primary); }
.public-foot { background: #fff; border-top: 1px solid var(--anc-silver); font-size: .85rem; color: var(--anc-muted); }
.public-foot a { color: var(--anc-primary); }
.public-foot .tagline { color: var(--anc-primary); font-weight: 700; }


/* ==========================================================================
   GLASS LAYER  (frosted cards over a soft brand-colour backdrop)
   Text always sits on a mostly-opaque pane so contrast stays WCAG AA.
   Falls back to solid white when the browser has no backdrop-filter.
   ========================================================================== */
:root {
  --glass-bg: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-shadow: 0 8px 30px rgba(11, 60, 51, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
  --glass-blur: blur(12px) saturate(150%);
}
body { background-color: var(--anc-light-gray); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(55rem 38rem at 92% -8%, rgba(77, 193, 161, .38), transparent 62%),
    radial-gradient(48rem 36rem at -8% 28%, rgba(11, 60, 51, .16), transparent 62%),
    radial-gradient(42rem 30rem at 65% 112%, rgba(77, 193, 161, .26), transparent 60%);
}
.auth-body::before { display: none; }
.dashboard-card, .form-card, .table-card, .filter-bar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.table-card > .card-header { background: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(192, 199, 204, .6); }
.table > thead > tr > th { background: rgba(243, 246, 245, .75); }
.table > tbody > tr > td { border-color: rgba(192, 199, 204, .45); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(77, 193, 161, .14); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dashboard-card, .form-card, .table-card, .filter-bar { background: var(--anc-white); border-color: var(--anc-border-color); }
}
@media (prefers-reduced-transparency: reduce) {
  .dashboard-card, .form-card, .table-card, .filter-bar { background: var(--anc-white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Sidebar and top bar: deep forest glass */
.sidebar {
  background:
    radial-gradient(22rem 16rem at 0% 0%, rgba(77, 193, 161, .22), transparent 70%),
    linear-gradient(180deg, rgba(11, 60, 51, .97), rgba(8, 43, 37, .97));
  border-right: 1px solid rgba(255, 255, 255, .08);
}
body.sidebar-open .sidebar { box-shadow: 8px 0 30px rgba(8, 43, 37, .28); }
.topbar { background: rgba(11, 60, 51, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sidebar .nav-link { transition: background .15s ease, transform .15s ease; }
.sidebar .nav-link.active { background: rgba(77, 193, 161, .16); }
.store-pill { background: rgba(255, 255, 255, .07); }
.app-footer { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Buttons: subtle depth */
.btn-primary { background-image: linear-gradient(180deg, #0F4A3F, #0B3C33); box-shadow: 0 4px 14px rgba(11, 60, 51, .25); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(11, 60, 51, .32); }
.btn-primary:hover, .btn-primary:active, .btn-primary:disabled, .btn-primary.disabled { background-image: none; }
.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; }
.btn-outline-secondary, .btn-outline-primary { background-color: rgba(255, 255, 255, .55); }
.btn-outline-primary:hover { background-color: var(--anc-primary); }

/* ---------- Dashboard components ---------- */
.glass-hero {
  position: relative; overflow: hidden; color: #fff; border-radius: 18px; padding: 1.5rem 1.4rem;
  background:
    radial-gradient(26rem 16rem at 100% 0%, rgba(77, 193, 161, .55), transparent 65%),
    linear-gradient(135deg, #0B3C33 0%, #0F5446 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 14px 40px rgba(11, 60, 51, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.glass-hero h1 { color: #fff; margin: 0; }
.glass-hero .hero-sub { color: rgba(255, 255, 255, .88); margin: .25rem 0 0; }
.glass-hero .hero-date { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8CE6CB; margin-bottom: .35rem; }
.glass-hero .btn-light { color: var(--anc-primary); background: #fff; border-color: #fff; }

.kpi { display: block; height: 100%; padding: 1.1rem 1.15rem; border-radius: 16px; text-decoration: none; color: var(--anc-charcoal);
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform .15s ease, box-shadow .15s ease; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(11, 60, 51, .16), inset 0 1px 0 rgba(255, 255, 255, .8); color: var(--anc-charcoal); }
.kpi-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.kpi-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--anc-primary-soft); color: var(--anc-primary); }
.kpi-icon.good { background: #E1F4EC; color: var(--anc-success); }
.kpi-icon.warn { background: #FFF1D6; color: var(--anc-warning); }
.kpi-icon.bad { background: #FBE3E0; color: var(--anc-danger); }
.kpi-label { font-size: .85rem; font-weight: 700; color: var(--anc-charcoal); line-height: 1.25; }
.kpi-value { font-family: var(--anc-font-family); font-size: clamp(.95rem, .5rem + 2.6vw, 1.7rem); font-weight: 700; color: var(--anc-primary); line-height: 1.15; overflow-wrap: anywhere; }
.kpi-value.good { color: var(--anc-success); }
.kpi-value.bad { color: var(--anc-danger); }
.kpi-hint { font-size: .8rem; color: var(--anc-muted); margin-top: .35rem; line-height: 1.35; }

.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } }
.qa { display: flex; align-items: center; gap: .65rem; padding: .8rem .9rem; min-height: 56px; border-radius: 14px; text-decoration: none; font-weight: 700; color: var(--anc-primary);
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform .15s ease, background .15s ease; }
.qa:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .95); color: var(--anc-primary); }
.qa i { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--anc-primary); color: var(--anc-secondary); display: flex; align-items: center; justify-content: center; }

.section-title { font-size: 1.05rem; margin: 0; }
.section-sub { font-size: .85rem; color: var(--anc-muted); margin: .15rem 0 0; }
.chart-card .bar-chart { height: 200px; padding-top: .5rem; }
.chart-card .bar { background: linear-gradient(180deg, var(--anc-secondary), var(--anc-primary)); border-radius: 8px 8px 0 0; }
.chart-card .col-bar:last-child .bar { box-shadow: 0 0 0 3px rgba(77, 193, 161, .35); }
.chart-card .col-bar:last-child .day { color: var(--anc-primary); font-weight: 700; }
.chart-card .day { font-size: .78rem; color: var(--anc-muted); margin-top: .35rem; }
.stat-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid rgba(192, 199, 204, .5); }
.stat-row:last-child { border-bottom: 0; }
.stat-row .num { font-family: var(--anc-font-family); font-weight: 700; font-size: 1.1rem; color: var(--anc-primary); }
.empty-state { text-align: center; color: var(--anc-muted); padding: 1.6rem 1rem; }
.empty-state i { display: block; font-size: 1.6rem; color: var(--anc-secondary); margin-bottom: .35rem; }


/* ==========================================================================
   LIST PAGES: page header, pill filters, phone-friendly stacked tables
   ========================================================================== */
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .2rem 0 0; color: var(--anc-muted); }
.pill-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pill-filters .btn { border-radius: 999px; padding-inline: .9rem; }
.empty-state .btn { margin-top: .6rem; }
/* Table cards hold dropdown menus: no blur here, so fixed-position menus are never clipped */
.table-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.table-hover > tbody > tr { transition: background .12s ease; }

/* Sale screen */
#grandTotal { font-family: var(--anc-font-family); font-size: 1.6rem; color: var(--anc-primary); }
.dashboard-card [data-line] { background: rgba(255, 255, 255, .6); border-radius: 12px !important; }

/* On phones each table row becomes a labelled card (add class table-stack and data-label on cells) */
@media (max-width: 767.98px) {
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack thead { display: none; }
  .table-stack tr { padding: .85rem 1rem; border-bottom: 1px solid rgba(192, 199, 204, .6); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem 0; border: 0; text-align: right !important; }
  .table-stack td[data-label]::before { content: attr(data-label); flex: none; font-size: .78rem; font-weight: 700; color: var(--anc-muted); text-align: left; }
  .table-stack td:first-child { display: block; text-align: left !important; font-size: 1.05rem; padding-bottom: .5rem; }
  .table-stack td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; padding-top: .6rem; }
  .table-stack td[colspan] { display: block; text-align: center !important; }
}


/* ==========================================================================
   SIGN-IN / SIGN-UP / RESET: frosted card over a deep-forest glow
   ========================================================================== */
.auth-body {
  background:
    radial-gradient(42rem 30rem at 88% -6%, rgba(77, 193, 161, .45), transparent 62%),
    radial-gradient(38rem 28rem at -12% 100%, rgba(77, 193, 161, .26), transparent 60%),
    linear-gradient(160deg, #0B3C33 0%, #082B25 100%);
  background-repeat: no-repeat;
}
.auth-card {
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .6);
  border-top: 6px solid var(--anc-secondary);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-radius: 20px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .auth-card { background: #fff; } }
.auth-card h1, .auth-card .h4 { margin-bottom: .25rem; }


/* ---------- Forms ---------- */
.form-required-note { font-size: .8rem; color: var(--anc-muted); margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(192, 199, 204, .6); }
.form-card .form-label { font-size: .92rem; }
.form-card .form-text { font-size: .82rem; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { background: #fff; }
@media (max-width: 575.98px) { .form-card .btn-save { flex: 1 1 100%; min-height: 48px; } .form-card .d-flex.flex-wrap > .btn-outline-secondary { flex: 1 1 100%; } }