/* ============================================================
   LYKHA BMS — Design System (CSS3, no build step)
   v2 · teal/petrol · Helvetica Neue · soft elevation
   Hand-written CSS3 per ADR-02. Link directly: <link rel="stylesheet" href="/css/lykha.css">
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --primary: #124C5B;
  --primary-bright: #2E8B96;
  --primary-deep: #0E3B47;
  --on-primary: #FFFFFF;
  /* Teal accents */
  --teal: #3FA7A5;
  --teal-bright: #46B3A9;
  --teal-soft: #8FC9C6;
  --teal-grad: linear-gradient(150deg, #5BC3B5 0%, #2E8B96 45%, #124C5B 100%);
  /* Mint tints */
  --mint-50: #F1F6F5;
  --mint-100: #E5F0EF;
  --mint-200: #D2E7E5;
  --mint-300: #B7DDDD;
  /* Text ramp */
  --ink: #16272B;
  --body: #2C3D42;
  --charcoal: #425055;
  --mute: #6B7A7E;
  --ash: #83908F;
  --stone: #9AA7AA;
  --faint: #C4CFD1;
  --on-dark: #FFFFFF;
  --on-dark-mute: rgba(255,255,255,0.78);
  /* Surfaces */
  --canvas-light: #FFFFFF;
  --canvas-app: #EEF1F1;
  --surface-soft: #F1F6F5;
  --surface-card: #FFFFFF;
  /* Hairlines */
  --hairline: #E3E9E9;
  --hairline-strong: #16272B;
  /* Status */
  --success: #2E9E7B;  --success-bg: #E4F4EE;
  --warning: #B9781F;  --warning-bg: #FBF0DD;
  --danger:  #C6413D;  --danger-bg:  #FBE7E6;
  --link: #2E8B96;

  /* Radii */
  --r-xs: 5px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 32px; --r-full: 9999px;
  /* Spacing */
  --s-xxs: 4px; --s-xs: 6px; --s-sm: 8px; --s-md: 14px; --s-lg: 16px;
  --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 48px;
  /* Elevation (cool-tinted, soft) */
  --shadow-soft: 0 1px 2px rgba(18,76,91,.04), 0 8px 24px rgba(18,76,91,.06);
  --shadow-card: 0 2px 4px rgba(18,76,91,.04), 0 12px 32px rgba(18,76,91,.07);
  --shadow-lift: 0 8px 30px rgba(18,76,91,.12);
  /* Type */
  --font: 'Helvetica Neue', Helvetica, Arial, 'Inter', system-ui, sans-serif;
  --font-heading: 'Krona One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-heading); font-weight: 400; letter-spacing: -2px !important; line-height: 1.3; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 3. Typography scale (headings use Krona One) ---------- */
.t-display-xl, .t-display-lg, .t-display-md, .t-heading-lg, .t-heading-md, .t-heading-sm {
  font-family: var(--font-heading); font-weight: 400; letter-spacing: 0;
}
.t-display-xl { font-size: 35px; line-height: 1.15; }
.t-display-lg { font-size: 28px; line-height: 1.2; }
.t-display-md { font-size: 22px; line-height: 1.25; }
.t-heading-lg { font-size: 18px; line-height: 1.3; }
.t-heading-md { font-size: 16px; line-height: 1.35; }
.t-heading-sm { font-size: 13px; line-height: 1.4; }
.t-body-lg    { font-size: 17px; line-height: 1.55; }
.t-body       { font-size: 15px; line-height: 1.55; }
.t-body-sm    { font-size: 13px; line-height: 1.5; }
.t-caption    { font-size: 12px; line-height: 1.4; letter-spacing: .2px; }
.fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; }
@media (max-width: 480px) { 
    .t-heading-sm { font-size: 9.5px;} .t-caption {margin-top:4px !important; font-size:8px !important; text-transform: uppercase;} 
    .t-display-lg { font-size: 25px;}
}

/* Colour helpers */
.c-primary{color:var(--primary);} .c-teal{color:var(--teal);} .c-ink{color:var(--ink);}
.c-mute{color:var(--mute);} .c-stone{color:var(--stone);} .c-white{color:#fff;}
.c-danger{color:var(--danger);} .c-success{color:var(--success);}
.bg-app{background:var(--canvas-app);} .bg-white{background:#fff;} .bg-mint{background:var(--mint-100);}
.bg-teal-grad{background:var(--teal-grad);}

/* ---------- 4. Layout helpers (lean, purposeful) ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.stack > * + * { margin-top: var(--s-lg); }
.grid { display: grid; gap: 20px; }
/*
 * auto-fit, not a fixed count. These grids hold cards that are conditionally rendered — the
 * dashboard shows finance, invoices and projects only to somebody permitted each — so a fixed
 * repeat(3, 1fr) left an admin with one permitted module looking at one third-width card and two
 * empty columns.
 *
 * auto-fit rather than auto-fill: auto-fill keeps the empty tracks, which is the bug. auto-fit
 * collapses them, so whatever cards exist stretch to fill the row.
 *
 * The minimums are what stop two cards becoming two absurdly wide ones on a large screen, and
 * they are the widths at which each card's contents stay readable.
 */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.gap-sm { gap: 8px; } .gap-md { gap: 14px; } .gap-lg { gap: 16px; } .gap-xl { gap: 24px; }
.mt-sm{margin-top:8px;} .mt-md{margin-top:14px;} .mt-lg{margin-top:16px;} .mt-xl{margin-top:24px;}
.mb-sm{margin-bottom:8px;} .mb-md{margin-bottom:14px;} .mb-lg{margin-bottom:16px;} .mb-xl{margin-bottom:24px;}
.full { width: 100%; }
/* Below the minimums above, auto-fit already gives a single column; these keep the previous
   behaviour explicit rather than relying on the minmax floor to do it. */
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* ---------- 5. Buttons (pill, min 46px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 12px 24px;
  border: 0; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1;
  cursor: pointer; transition: background-color .15s, opacity .15s, box-shadow .15s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63,167,165,.4); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-bright); }
.btn-primary:active { background: var(--primary-deep); }
.btn-teal { background: var(--teal-grad); color: #fff; }
.btn-teal:hover { opacity: .93; }
.btn-soft { background: var(--mint-100); color: var(--primary); }
.btn-soft:hover { background: var(--mint-200); }
.btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--hairline); }
.btn-outline:hover { background: var(--surface-soft); }
.btn-sm, .pill { height: 36px; padding: 8px 16px; font-size: 13px; }
.pill { display: inline-flex; align-items: center; border: 0; border-radius: var(--r-sm);
        background: var(--mint-100); color: var(--primary); font-weight: 500; cursor: pointer; }
.pill:hover { background: var(--mint-200); }

/* ---------- 6. Inputs ---------- */
.field { margin-bottom: 16px; }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--charcoal); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; height: 52px; padding: 13px 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font-family: var(--font); font-size: 15px;
  transition: border-color .15s;
}
.textarea { height: auto; min-height: 110px; resize: vertical; }
.input::placeholder { color: var(--stone); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--danger); }
.req { color: var(--danger); }

/* ---------- 7. Cards ---------- */
.card { border-radius: var(--r-sm); background: var(--surface-card); padding: 24px; box-shadow: var(--shadow-card); }
.card-flat { border-radius: var(--r-sm); background: var(--surface-card); padding: 24px; border: 1px solid var(--hairline); }
.card-teal { border-radius: var(--r-sm); background: var(--teal-grad); color: var(--on-dark); padding: 24px; box-shadow: var(--shadow-lift); }
.card-elevated { border-radius: var(--r-sm); background: var(--primary); color: var(--on-dark); padding: 24px; }

/* ---------- 8. Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-sm);
         font-size: 12px; font-weight: 500; line-height: 1.4; }
.badge-tag     { background: var(--mint-100);   color: var(--primary); }
.badge-feature { background: var(--primary);     color: var(--on-primary); }
.badge-success { background: var(--success-bg);  color: var(--success); }
.badge-warning { background: var(--warning-bg);  color: var(--warning); }
.badge-danger  { background: var(--danger-bg);   color: var(--danger); }

/* ---------- 9. Metric figure ---------- */
.metric { font-family: var(--font); color: var(--primary); font-size: 28px; font-weight: 500;
          line-height: 1.05; letter-spacing: -.5px; }
@media (max-width: 480px) { .metric { font-size: 20px; } }

/* ---------- 10. Data table ---------- */
.table { background: #fff; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-card); }
.table th, .table td { text-align: left; padding: 14px 20px; font-size: 14px; }
.table thead th { color: var(--mute); font-weight: 500; border-bottom: 1px solid var(--hairline); }
.table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.table .num { text-align: right; }

/* ---------- 11. App shell (PMS-style sidebar + header) ---------- */
.app-layout { display: flex; min-height: 100vh; }

.sidebar { width: 260px; background: var(--primary-deep); color: var(--on-dark-mute);
           display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
           z-index: 100; overflow-x: hidden; }

.sidebar-header { display: flex; align-items: center; justify-content: space-between;
                  padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar-logo { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 44px; height: 44px; background: var(--teal-grad); border-radius: var(--r-sm);
              display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; }
.brand-name { color: #fff; font-weight: 600; font-size: 16px; line-height: 1.15; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.brand-name_builder { font-weight: 500; font-size: 8px; color: var(--on-dark-mute);
                      text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.nav-section { margin-bottom: 4px; }
.nav-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .08em; color: rgba(255,255,255,.35); padding: 12px 20px 4px; }

.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 13.5px;
            color: var(--on-dark-mute); border-left: 3px solid transparent;
            transition: background .15s, color .15s, border-color .15s; text-transform:capitalize; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(63,167,165,.16); color: var(--teal-soft); border-left-color: var(--teal); }
.nav-item i { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }

.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.user-info { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 36px; height: 36px; background: var(--teal-grad); border-radius: var(--r-sm);
               display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.user-details { flex: 1; min-width: 0; }
.user-name { color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: var(--on-dark-mute); font-size: 11px; }

.main-content { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.top-header { height: 64px; background: #fff; border-bottom: 1px solid var(--hairline);
              display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
              position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-soft); }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 12px; }
.page-title { font-size: 18px; font-weight: 600; color: var(--ink); }
.mobile-toggle { display: none; background: none; border: 0; color: var(--mute); font-size: 18px; cursor: pointer; padding: 4px; }
.content-area { padding: 24px; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s ease; box-shadow: var(--shadow-lift); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-toggle { display: block; }
}

/* Round icon chip */
.chip { width: 44px; height: 44px; border-radius: var(--r-sm); background: #fff;
        box-shadow: var(--shadow-soft); display: inline-flex; align-items: center; justify-content: center;
        color: var(--teal); }

/* Progress bar — native <progress>, value comes from attributes (no inline width) */
progress.progress { -webkit-appearance: none; appearance: none; width: 100%; height: 12px;
                    border: 0; border-radius: var(--r-sm); background: var(--mint-100); overflow: hidden; }
progress.progress::-webkit-progress-bar   { background: var(--mint-100); border-radius: var(--r-sm); }
progress.progress::-webkit-progress-value { background: linear-gradient(90deg, #5BC3B5, #124C5B); border-radius: var(--r-sm); }
progress.progress::-moz-progress-bar      { background: linear-gradient(90deg, #5BC3B5, #124C5B); border-radius: var(--r-sm); }

/* ============================================================
   12. Utilities & components that replace inline styles
   ============================================================ */
/* Text on teal / primary surfaces */
.c-on-dark       { color: var(--on-dark); }
.c-on-dark-mute  { color: var(--on-dark-mute); }

/* Stack gap modifiers (sibling spacing) */
.stack-xs > * + * { margin-top: 8px; }
.stack-sm > * + * { margin-top: 12px; }

/* White pill button for teal/dark surfaces */
.btn-white { background: #fff; color: var(--primary); }
.btn-white:hover { background: var(--mint-100); }

/* Metric suffix + price figure */
.metric-unit { font-size: 22px; font-weight: 400; color: var(--stone); }
.price       { font-family: var(--font); font-size: 44px; line-height: 1; font-weight: 400; }

/* Centered error screen */
.error-screen { max-width: 520px; margin: 0 auto; padding: 120px 24px 0; }

/* ============================================================
   13. Auth screens
   ============================================================ */
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center;
               padding: 40px 24px; background: var(--canvas-app); }
.auth-card   { width: 100%; max-width: 440px; }
.auth-brand  { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 24px; }
.auth-head   { margin-bottom: 24px; }
.auth-foot   { margin-top: 20px; text-align: center; }
.auth-slug   { display: flex; align-items: center; border: 1px solid var(--hairline);
               border-radius: var(--r-sm); overflow: hidden; height: 52px; background: #fff; }
.auth-slug .prefix { padding: 0 12px; color: var(--stone); font-size: 15px; background: var(--surface-soft);
                     height: 100%; display: flex; align-items: center; border-right: 1px solid var(--hairline); }
.auth-slug input { border: 0; height: 100%; padding: 0 14px; font-size: 15px; width: 100%; color: var(--ink); }
.auth-slug input:focus { outline: none; }

/* ============================================================
   14. Alerts / flash notices
   ============================================================ */
.alert { border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.alert-danger { background: var(--danger-bg); color: var(--danger); }
.alert-notice { background: var(--mint-100); color: var(--primary); }

/* ============================================================
   15. Plan selection grid
   ============================================================ */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan-option { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
               border-radius: var(--r-sm); background: var(--surface-card); padding: 24px;
               border: 1px solid var(--hairline); transition: border-color .15s, box-shadow .15s; }
.plan-option:hover { box-shadow: var(--shadow-card); }
.plan-option.is-featured { border-color: var(--primary); }
.plan-price { font-size: 34px; font-weight: 400; line-height: 1; }
.plan-unit  { font-size: 13px; color: var(--mute); }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

/* Plan selection polish (BILLING-UI) */
.plan-head { max-width: 720px; }
.plan-option { position: relative; }
.plan-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-option-head { padding-right: 28px; }
.plan-check { position: absolute; top: 22px; right: 22px; width: 20px; height: 20px; border: 2px solid var(--hairline);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
.plan-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.plan-option:has(input:checked) .plan-check { border-color: var(--primary); background: var(--primary); }
.plan-option:has(input:checked) .plan-check::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; }
.plan-price-unit { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.plan-cap { font-size: 13px; color: var(--muted); }
.plan-features { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 9px; }
.plan-features li { position: relative; padding-left: 24px; font-size: 13px; color: var(--ink); }
.plan-features li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: var(--primary); font-weight: 700; }

/* ============================================================
   16. Lists, toolbars, forms (module CRUD)
   ============================================================ */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.input-search { max-width: 320px; }
.empty { text-align: center; padding: 48px 24px; color: var(--mute); }

.row-link { color: var(--ink); font-weight: 500; }
.row-link:hover { color: var(--primary); }

.pill.disabled { opacity: .5; pointer-events: none; }

/* Compact inline select (task status in a row) */
.select-inline { height: 36px; padding: 6px 10px; font-size: 13px; width: auto; }

/* Active pill (report period filter) */
.pill-active { background: var(--primary); color: #fff; }
.pill-active:hover { background: var(--primary-bright); color: #fff; }

/* Structured tax-bracket editor — each bracket is its own labeled card */
.bracket-group { border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 16px;
                 margin-bottom: 12px; background: var(--surface-soft); }
.bracket-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px) { .bracket-fields { grid-template-columns: 1fr; } }

/* Activity log rows */
.activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--hairline); }
.activity-row:last-child { border-bottom: 0; }
.activity-body { flex: 1; }

/* Modal dialog (native <dialog>) */
/*
 * A dialog opened with showModal() sits at the top of the viewport by default — margin: auto
 * only centres it horizontally. The inset/margin pair centres it both ways.
 *
 * max-height with a scrolling body as well: a long announcement centred with no limit runs off
 * both edges at once, and there is no way to reach either end of it.
 */
.modal { border: 0; border-radius: var(--r-sm); padding: 0; width: 92%; max-width: 640px;
         inset: 0; margin: auto; max-height: 88vh;
         box-shadow: var(--shadow-lift); color: var(--ink); background: #fff; }
.modal::backdrop { background: rgba(16,39,47,.45); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
              padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
.modal-body { padding: 20px; max-height: calc(88vh - 64px); overflow-y: auto; }

/* Print (payslips, etc.) — hide chrome, show only content */
@page { margin: 1in; }
@media print {
  .sidebar, .top-header, .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .content-area { padding: 0 !important; }
  .card, .card-flat { box-shadow: none !important; border: 1px solid #ddd; }
}

/* Undo alert (soft-delete) */
.undo-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.undo-form { display: inline; }
.undo-alert .link-btn { color: var(--primary); font-weight: 600; font-size: 13px; }

/* Receipt image */
.receipt-image { display: block; max-width: 100%; max-height: 480px; border-radius: var(--r-sm); border: 1px solid var(--hairline); }

/* Employee photo */
.emp-photo { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--hairline); flex-shrink: 0; }
.emp-photo-fallback { width: 64px; height: 64px; border-radius: var(--r-sm); font-size: 20px; }

/* Settings logo preview */
.settings-logo { max-height: 80px; max-width: 220px; border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px; background: #fff; }

/* Notification bell (topbar dropdown) */
.notif { position: relative; }
.notif > summary { list-style: none; cursor: pointer; }
.notif > summary::-webkit-details-marker { display: none; }
.notif-btn { position: relative; width: 38px; height: 38px; border-radius: var(--r-sm);
             display: inline-flex; align-items: center; justify-content: center; color: var(--mute);
             background: var(--surface-soft); }
.notif-btn:hover { color: var(--primary); }
.notif-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
               border-radius: var(--r-sm); background: var(--danger); color: #fff; font-size: 10px;
               font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.notif-panel { position: absolute; right: 0; top: 46px; width: 320px; background: #fff;
               border: 1px solid var(--hairline); border-radius: var(--r-sm); box-shadow: var(--shadow-card);
               z-index: 60; overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
              border-bottom: 1px solid var(--hairline); }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.notif-item:hover { background: var(--surface-soft); }
.notif-item.unread { background: var(--mint-50); }
.notif-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.notif-msg { font-size: 12px; color: var(--mute); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--stone); margin-top: 3px; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--mute); font-size: 13px; }
.notif-foot { display: block; text-align: center; padding: 10px; font-size: 13px; color: var(--primary); }
.notif-foot:hover { background: var(--surface-soft); }

/* Notifications page rows */
.notif-row { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--hairline); }
.notif-row:last-child { border-bottom: 0; }
.notif-row-dot { width: 8px; height: 8px; border-radius: var(--r-sm); background: transparent; margin-top: 6px; flex-shrink: 0; }
.notif-row.unread .notif-row-dot { background: var(--teal); }
.notif-row-body { flex: 1; }

/* Project message board (chat) */
.chat { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.chat-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble { background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-md);
               padding: 8px 12px; }
.chat-row.mine .chat-bubble { background: var(--mint-100); border-color: var(--mint-200); }
.chat-bubble.retracted { opacity: .6; font-style: italic; }
.chat-author { font-size: 12px; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }
.chat-text { font-size: 14px; color: var(--body); white-space: pre-wrap; word-break: break-word; }
.chat-time { font-size: 11px; color: var(--mute); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.chat-retract { display: inline; }
.link-btn { background: none; border: 0; color: var(--link); font-size: 11px; cursor: pointer; padding: 0; }
.chat-compose { display: flex; gap: 8px; }
.chat-compose .input { flex: 1; }

/* Project updates feed */
.quill-host { background: #fff; border-radius: var(--r-sm); min-height: 160px; }
.update-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.update-body { font-size: 14px; line-height: 1.6; color: var(--body); }
.update-body p { margin-bottom: 8px; }
.update-body ul, .update-body ol { margin: 8px 0 8px 20px; }
.update-image { display: block; max-width: 100%; max-height: 360px; border-radius: var(--r-sm);
                border: 1px solid var(--hairline); margin-top: 12px; }
.update-comments { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 14px; }
.comment { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.comment-body { flex: 1; }
.comment-add { display: flex; gap: 8px; margin-top: 8px; }
.user-avatar-sm { width: 28px; height: 28px; font-size: 10px; }

/* Project workflow board (phase columns of draggable tasks) */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.board-col { flex: 0 0 260px; background: var(--surface-soft); border: 1px solid var(--hairline);
             border-radius: var(--r-sm); padding: 12px; }
.board-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.board-col-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--charcoal); }
.board-col-count { font-size: 12px; color: var(--mute); background: #fff; border-radius: var(--r-sm); padding: 1px 8px; }
.board-col-tasks { min-height: 24px; }
.task-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-sm);
             padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow-soft); }
.task-card.dragging { opacity: .5; }
.task-title { display: block; font-weight: 500; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.task-title:hover { color: var(--primary); }
.task-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mute); }
.task-chip i { font-size: 11px; }
.task-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.task-cover-lg { display: block; max-width: 100%; max-height: 240px; border-radius: var(--r-sm);
                 border: 1px solid var(--hairline); margin-bottom: 16px; }
.board-col-add { display: flex; gap: 6px; margin-top: 8px; }
.board-col-add-link { display: block; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--hairline); border-radius: var(--r-sm);
  color: var(--mute); font-size: 13px; text-align: center; text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.board-col-add-link:hover { color: var(--primary); border-color: var(--primary); background: #fff; }
.input-sm { height: 36px; padding: 6px 10px; font-size: 13px; }
.mb-0 { margin-bottom: 0; }

/* Workflow phase rows (drag to reorder) */
.phase-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px;
             background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.phase-row .phase-handle { color: var(--stone); cursor: grab; }
.phase-row .phase-num { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--mint-100);
                        color: var(--primary); font-size: 12px; font-weight: 600; display: inline-flex;
                        align-items: center; justify-content: center; flex-shrink: 0; }
.phase-row .phase-name { flex: 1; font-weight: 500; }
.phase-row.dragging { opacity: .5; }

/* Project workspace sub-navigation (tabs) */
.subnav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); }
.subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px;
            color: var(--mute); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.subnav a i { font-size: 13px; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* Calendar date chip */
.cal-date { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--surface-soft);
            display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.cal-day { font-size: 17px; font-weight: 600; color: var(--primary); line-height: 1; }
.cal-mon { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }

/* Loan sample-computation preview */
.preview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.preview-figure { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
                  background: var(--surface-soft); border-radius: var(--r-sm); }
@media (max-width: 700px) { .preview-summary { grid-template-columns: 1fr; } }

/* Two-column form grid; .col-full spans both */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid .col-full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Grid span helper (e.g. documents file panel over a 3-col grid) */
.col-span-2 { grid-column: span 2; }
@media (max-width: 900px) { .col-span-2 { grid-column: auto; } }

/* Detail page description list */
.dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; }

/* Project overview 25/75 split (POLISH1) */
.split-2575 { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .split-2575 { grid-template-columns: 1fr; } }
.dl-stack { display: flex; flex-direction: column; gap: 10px; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.dl-row:first-child { border-top: 0; padding-top: 0; }
.dl dt { color: var(--mute); font-size: 14px; }
.dl dd { margin: 0; font-size: 15px; }
@media (max-width: 600px) { .dl { grid-template-columns: 1fr; gap: 2px 0; } .dl dd { margin-bottom: 10px; } }

/* ---------- Super Admin (platform console) ---------- */
.admin-body { background: var(--mint-50); min-height: 100vh; margin: 0; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--primary); color: var(--on-primary); padding: 0 24px; height: 56px; }
.admin-brand { color: var(--on-primary); font-family: var(--font-heading); font-size: 15px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; }
.admin-nav { display: flex; align-items: center; gap: 18px; }
.admin-nav a { color: #cfe6e6; text-decoration: none; font-size: 14px; }
.admin-nav a.active, .admin-nav a:hover { color: var(--on-primary); }
.admin-logout { background: transparent; border: 1px solid rgba(255,255,255,.4); color: var(--on-primary);
  border-radius: var(--r-sm); padding: 5px 12px; font-size: 13px; cursor: pointer; }
.admin-main { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }
.admin-auth { max-width: 380px; margin: 8vh auto; }

/* ---------- Document viewer (thumbnails + details modal) ---------- */
.is-hidden { display: none !important; }
.doc-thumb-cell { width: 52px; }
.doc-thumb { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--hairline); background: var(--mint-50); }
.doc-thumb-icon { color: var(--mute); font-size: 15px; }
.doc-open { cursor: pointer; }
.doc-preview-wrap { margin-bottom: 16px; text-align: center; }
.doc-preview-img { max-width: 100%; max-height: 320px; border-radius: var(--r-sm); border: 1px solid var(--hairline); }

/* ---------- Auth: verification code input ---------- */
.btn-block { display: block; width: 100%; }
.input-code { font-size: 24px; letter-spacing: 8px; text-align: center; font-family: var(--font-heading); }

/* ---------- Onboarding wizard ---------- */
.onboard-card { max-width: 620px; width: 100%; }
.wizard-dots { display: flex; gap: 8px; margin: 4px 0 20px; }
.wizard-dot { flex: 1; text-align: center; font-size: 12px; color: var(--mute); padding-bottom: 8px;
  border-bottom: 3px solid var(--hairline); }
.wizard-dot.active { color: var(--primary); border-bottom-color: var(--teal); font-weight: 600; }
.input-color { padding: 4px; height: 44px; width: 80px; }
.onboard-actions { display: flex; flex-direction: column; }

/* ---------- Accounting statements & report links (AR1) ---------- */
.report-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink); background: var(--surface-card); }
.report-link:hover { border-color: var(--teal); box-shadow: var(--shadow-soft); }
.report-link i { font-size: 18px; width: 22px; text-align: center; }
.statement { max-width: 820px; }
.stmt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 12px; border-bottom: 2px solid var(--primary); }
.stmt-org-name { font-family: var(--font-heading); font-size: 16px; color: var(--primary); }
.stmt-title { text-align: right; }
.stmt-table td { padding: 7px 10px; }
.stmt-section td { font-weight: 600; color: var(--primary); border-bottom: 1px solid var(--hairline); padding-top: 14px; }
.stmt-indent { padding-left: 28px !important; }
.stmt-subtotal td { border-top: 1px solid var(--hairline); font-weight: 500; }
.stmt-total td { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
@media print {
  .no-print { display: none !important; }
  .statement { max-width: none; box-shadow: none; border: none; padding: 0; }
  .stmt-head { border-bottom-color: #000; }
}

/* ---------- General journal entry separation (CAS-BOOKS) ---------- */
.je-note td { padding-top: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }

/* ---------- Journal reversal control (CAS-CTRL) ---------- */
.je-note form { display: inline; margin-left: 8px; }
.je-note .badge { margin-left: 8px; }

/* ---------- Numbering register (CAS-CTRL) ---------- */
.reg-void td { color: var(--mute); text-decoration: line-through; }
.reg-void td .badge { text-decoration: none; }
.reg-gap td { background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* ---------- Attendance filter bar (TA1c) ---------- */
.filter-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filter-tabs { display: inline-flex; gap: 4px; background: var(--surface-soft); padding: 4px; border-radius: var(--r-sm); }
.filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--r-xs);
  color: var(--mute); font-size: 14px; font-weight: 500; text-decoration: none; }
.filter-tab:hover { color: var(--ink); }
.filter-tab.active { background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-card); }
.filter-tab .badge { margin-left: 2px; }
.filter-dates { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.filter-dates .field { margin-bottom: 0; }
.attend-photo { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--hairline); }

/* ---------- Announcements (ANN1) ---------- */
.announcement-body { white-space: pre-line; }

/* ---------- ESS home tiles (ESS1) ---------- */
.ess-tile { align-items: center; color: var(--ink); text-decoration: none; }
.ess-tile:hover { box-shadow: var(--shadow-card); }
.ess-tile i { font-size: 20px; }

/* ---------- Workflow task status colors (DEALS-c) ---------- */
.task-status-done { border-left: 3px solid var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface-card)); }
.task-status-in_progress { border-left: 3px solid #E0A458; }
.task-status-todo { border-left: 3px solid var(--hairline); }
.board-col-add-full { display: flex; flex-direction: column; gap: 6px; }
.board-col-add-full textarea { resize: vertical; }

/* ---------- Brand logos (BRAND1) ---------- */
.auth-brand { text-align: center; }
.auth-logo { height: 46px; width: auto; display: inline-block; }
.brand-icon-img { background: none; padding: 0; }
.brand-icon-img img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); }

/* ---------- Active statutory table (STAT-MGMT) ---------- */
.stat-active { border-color: var(--success); box-shadow: 0 0 0 1px var(--success) inset; }

/* ---------- Grouped datatable header row (PAY-RUN) ---------- */
.tbl-group td { background: var(--surface-soft); font-weight: 600; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Header: universal search (HDR) ---------- */
.hsearch { position: relative; }
.hsearch-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.hsearch-input { width: 340px; max-width: 46vw; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); background: var(--surface-soft); color: var(--ink); font-size: 14px; outline: none; }
.hsearch-input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.hsearch-results { position: absolute; top: calc(100% + 6px); left: 0; width: 380px; max-width: 90vw; max-height: 66vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-sm); box-shadow: var(--shadow-soft); z-index: 60; padding: 6px; }
.hsearch-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px 4px; }
.hsearch-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.hsearch-item:hover { background: var(--surface-soft); }
.hsearch-item-label { font-weight: 500; font-size: 14px; }
.hsearch-item-sub { font-size: 12px; color: var(--muted); }
.hsearch-empty { padding: 14px 10px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- Header: plan badge spacing (HDR) ---------- */
.plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; white-space: nowrap; }
.plan-badge-dot { opacity: .5; }
@media (max-width: 480px) { .plan-badge { display: none; } }

/* ---------- Header: user menu (HDR) ---------- */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; }
.usermenu-btn:hover { background: var(--surface-soft); }
.usermenu-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usermenu-name { font-size: 14px; font-weight: 500; color: var(--ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-caret { font-size: 11px; color: var(--muted); }
.usermenu-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 208px; background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); box-shadow: var(--shadow-soft); z-index: 60; padding: 6px; }
.usermenu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 0; background: none;
  color: var(--ink); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.usermenu-item:hover { background: var(--surface-soft); }
.usermenu-item i { width: 16px; color: var(--muted); }
@media (max-width: 640px) { .usermenu-name { display: none; } .hsearch-input { width: 180px; } }

/* ---------- Invoice single-page form (INV-UX-d) ---------- */
/* Guaranteed spacing between the stacked cards on the invoice create/edit form. */
.inv-form > .card-flat { margin-bottom: 20px; }
.inv-form > .row { margin-top: 4px; }

.inv-totals { width: 300px; max-width: 100%; margin-left: auto; padding: 16px 18px;
  background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.inv-totals .row { padding: 3px 0; }
.inv-totals .inv-total-line { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--hairline); font-size: 15px; }
.inv-disc-row { align-items: center; }
.inv-disc-label { margin: 0; }
.inv-disc-input { max-width: 120px; }
@media (max-width: 640px) { .inv-totals { width: 100%; } }
.l-detail { margin-top: 6px; font-size: 13px; color: var(--muted); }
.select-sm { height: 32px; padding: 0 8px; font-size: 13px; }
/* Invoice details read-only line description */
.inv-line-detail { color: var(--muted); font-size: 13px; margin-top: 2px; }
.inv-cust-card dt { color: var(--muted); font-size: 12px; }
.inv-cust-card dd { margin: 0 0 10px; font-size: 14px; }

/* ---------- Multi-select (PROJ-MULTI) ---------- */
.select-multi { height: auto; min-height: 120px; padding: 6px; }
.select-multi option { padding: 4px 6px; border-radius: var(--r-sm); }

/* ---------- Schedule employee checkboxes (SCHED2 fix) ---------- */
.emp-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
.emp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---------- Contact picker (CATP) ---------- */
.contact-picker { position: relative; }
.contact-search { position: relative; }
.contact-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.contact-search-input { padding-left: 34px; }
.contact-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); box-shadow: var(--shadow-soft); z-index: 40; max-height: 240px; overflow-y: auto; }
.contact-result { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font-size: 14px; color: var(--ink); cursor: pointer; }
.contact-result:hover { background: var(--surface-soft); }
.contact-result-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.contact-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid var(--hairline);
  border-radius: 999px; background: var(--surface-soft); font-size: 13px; }
.contact-chip.is-primary { border-color: var(--primary); }
.chip-primary { background: var(--primary); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; }
.chip-name { font-weight: 500; }
.chip-btn { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; padding: 0 2px; }
.chip-make:hover { color: var(--primary); }
.chip-remove:hover { color: var(--danger); }

/* ---------- Dashboard v2 (DASH2) ---------- */
.dash-chart { width: 100%; height: 176px; display: block; }
.dash-chart-wrap { position: relative; }
.dash-bar { cursor: default; }
.dash-bar:hover rect { opacity: .85; }
.dash-tip { position: absolute; z-index: 30; pointer-events: none; background: var(--ink, #1d2b2c); color: #fff;
  border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-soft);
  min-width: 150px; }
.dash-tip-title { font-weight: 600; margin-bottom: 2px; }
.dash-tip .legend-dot { margin-right: 5px; }

/* Announcements banner (POLISH1) — pinned announcement, shown prominently. */
.announce-banner { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--ink);
  background: var(--mint-100); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--hairline));
  border-radius: var(--r-md, 12px); padding: 16px 18px; margin-bottom: 20px; transition: box-shadow .15s, transform .15s; }
.announce-banner:hover { box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.announce-banner-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.announce-banner-meta { color: color-mix(in srgb, var(--primary) 75%, var(--ink)); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.legend-rev { background: var(--primary); }
.legend-exp { background: var(--stone); }
.dash-activity { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--hairline); }
.dash-activity:first-of-type { border-top: 0; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 6px; flex-shrink: 0; }
.task-pip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pip-done { background: var(--success); }
.pip-in_progress { background: #E0A458; }
.pip-todo { background: #fff; border: 1px solid var(--muted); }

/* ---------- Bulk seat activation (EMP-CSV) ---------- */
.bulk-seats summary { cursor: pointer; list-style: none; }
.bulk-seats summary::-webkit-details-marker { display: none; }

/* ---------- Super Admin: danger zone + danger button (SA-UI) ---------- */
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { filter: brightness(0.94); color: #fff; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--hairline)); }
.danger-zone code { background: var(--surface-soft); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ---------- Super Admin plan cards (POLISH6) ---------- */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.plan-adm.is-inactive { opacity: .65; }
.plan-adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-code { font-size: 12px; color: var(--muted); background: var(--surface-soft); padding: 1px 7px; border-radius: 4px; display: inline-block; margin-top: 4px; }
.plan-adm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.plan-adm-edit { margin-top: 14px; }
.plan-adm-edit summary { list-style: none; }
.plan-adm-edit summary::-webkit-details-marker { display: none; }
.plan-adm-edit[open] summary { margin-bottom: 4px; }

/* ---------- Permission matrix (PERM) ---------- */
.perm-matrix th.num, .perm-matrix td.num { text-align: center; width: 84px; }
.perm-matrix input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }

/* ---------- Reports hub cards (REPORTS) ---------- */
.report-card { display: block; text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .15s; }
.report-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.report-card-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--mint-100); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; }

/* ---------- Employee avatar in tables (EMP-AVATAR) ---------- */
.emp-row { display: flex; align-items: center; gap: 10px; }
.emp-row-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.emp-row-initials { display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; }

/* ---------- Shift templates + scalable assignment (SCHED3) ---------- */
.shift-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink);
  transition: box-shadow .15s, transform .15s; }
.shift-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.shift-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shift-accent { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); flex-shrink: 0; margin-top: 6px; }
.shift-headcount { display: inline-flex; align-items: baseline; gap: 5px; }
.shift-headcount b { font-size: 22px; line-height: 1; }
.shift-days { display: flex; flex-wrap: wrap; gap: 5px; }
.shift-day { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--hairline);
  color: var(--muted); background: var(--surface-soft); }
.shift-day.on { color: #fff; background: var(--primary); border-color: var(--primary); }
.shift-inactive { opacity: .6; }

.weekday-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.weekday-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-toggle label { cursor: pointer; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 13px; background: #fff; user-select: none; }
.weekday-toggle input:checked + span,
.weekday-toggle label:has(input:checked) { }
.weekday-pill { cursor: pointer; padding: 7px 13px; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 13px; background: #fff; user-select: none; }
.weekday-pill.on { color: #fff; background: var(--primary); border-color: var(--primary); }

.picker-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; align-items: end; }
@media (max-width: 900px) { .picker-filters { grid-template-columns: 1fr 1fr; } }
.picker-list { margin-top: 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  max-height: 340px; overflow-y: auto; }
.picker-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--hairline); font-size: 14px; }
.picker-row:first-child { border-top: 0; }
.picker-row:hover { background: var(--surface-soft); }
.picker-row input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.picker-row-meta { color: var(--muted); font-size: 12px; }
.picker-row-current { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.picker-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.picker-pager { display: flex; align-items: center; gap: 8px; }
.picker-selectall { font-size: 13px; }

/* ── Filter bar refinements (Aug 2026) ─────────────────────────────────────────────
   Index filters sit on one row. The search box was competing with the selects for
   width, and the date range only appears when Period is set to Custom.
   Appended rather than edited in place so existing rules above stay untouched. */
.input-search { max-width: 160px; }
.filter-bar > .filter-dates { flex: 1; align-items: flex-end; }
.filter-dates .select-sm { max-width: 180px; }
.filter-range { display: inline-flex; align-items: flex-end; gap: 6px; }
.filter-range .field { margin-bottom: 0; }
.filter-sep { color: var(--mute); padding-bottom: 8px; }

/* ── Password show/hide (Aug 2026) ─────────────────────────────────────────────────
   The toggle sits inside the field rather than beside it, so the input keeps full width. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; padding: 4px 8px;
  color: var(--link); font-size: 13px; font-weight: 500; border-radius: var(--r-xs); }
.pw-toggle:hover { background: var(--mint-100); }

/* ── Legal pages (Aug 2026) ────────────────────────────────────────────────────────
   Long-form documents: a readable measure matters more than filling the viewport. */
.legal-page { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; }
.legal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.legal-body { padding: 32px; }
.legal-body h2 { color: var(--ink); }
.legal-body ul { margin: 8px 0 0 20px; }
.legal-body li { margin-bottom: 6px; }
.legal-foot { margin-top: 24px; text-align: center; }

/* ── Dashboard 70/30 (Aug 2026) ────────────────────────────────────────────────────
   Metrics carry the width; announcements hold a fixed column so they are always in
   the same place. Breakpoint kept alongside .split-2575 above for consistency. */
.split-7030 { display: grid; grid-template-columns: 7fr 3fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .split-7030 { grid-template-columns: 1fr; } }
.dash-announce { align-self: stretch; }
.announce-item { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--hairline); background: transparent;
  padding: 12px 0; color: var(--body); font: inherit; }
.announce-item:last-child { border-bottom: 0; }
.announce-item:hover { color: var(--ink); }
.announce-item:hover .fw-500 { color: var(--link); }

/* ── Title-as-trigger (Aug 2026) ───────────────────────────────────────────────────
   Data-table titles link to the record. Where the detail is a modal the title is a
   <button>, which needs the browser chrome stripped to read as the same link. */
button.row-link { border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; cursor: pointer; text-align: left; }

/* ── Admin plan listing: grid / rows toggle (Aug 2026) ─────────────────────────────
   The index is a listing only; create and edit are their own pages. The toggle is a
   pair of links carrying the current query string, so the choice survives filtering
   without any client-side state. */
.view-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--hairline);
  border-radius: 8px; overflow: hidden; }
.view-toggle-btn { padding: 6px 14px; font-size: 13px; color: var(--muted);
  text-decoration: none; background: transparent; }
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--hairline); }
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.is-on { background: var(--primary); color: #fff; }

/* ── Filter control sizing: -md (Aug 2026) ─────────────────────────────────────────
   Filter rows used .input-sm (36px) beside .select-sm (32px), so the search box and
   the dropdowns on the same row were four pixels apart and visibly misaligned. -md is
   one size: 44px for both, between the 36px small controls and the 52px form fields.
   Appended, never edited in place, so every rule above survives untouched. */
.input-md { height: 44px; padding: 10px 14px; font-size: 14px; }
.select-md { height: 44px; padding: 0 12px; font-size: 14px; }
.filter-dates .select-md { max-width: 200px; }
.filter-dates .input-search { max-width: 260px; }

/* ── Filter control sizing: buttons join the row (Aug 2026) ────────────────────────
   .input-md/.select-md moved the fields to 44px but left Apply/Clear on .btn-sm at
   36px, which widened the very misalignment that change was meant to remove. Every
   control on a filter row is now one height. */
.btn-md { height: 44px; padding: 10px 20px; font-size: 14px; }

/* ── QR Ph payment block (Aug 2026) ────────────────────────────────────────────────
   Manual payment for now: a STATIC QR Ph code, which carries no amount, so the code
   sits beside the written details rather than replacing them — the payer still needs
   the figure and the invoice number. Appended; nothing above is touched. */
.pay-split { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.pay-qr { text-align: center; }
.qr-img { width: 180px; height: 180px; object-fit: contain; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); background: #fff; padding: 8px; }

/* ── Setup checklist (Nov 2026) ────────────────────────────────────────────────────
   A guide, not a gate: it sits above the dashboard, dismisses to nothing and never
   blocks a route. Done steps stay listed rather than disappearing, so the owner can
   see what the workspace already has — much of it filled in at registration. */
.setup-card { border-left: 3px solid var(--primary); }
.setup-focus { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-step { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--hairline); }
.setup-step:last-child { border-bottom: 0; }
.setup-step-num { flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  background: var(--mint-200); color: var(--ink); }
.setup-step.is-done .setup-step-num { background: var(--primary); color: #fff; }
.setup-step.is-done .setup-step-body { opacity: .6; }
.setup-step-body { display: flex; flex-direction: column; flex: 1; }

/* ── Organisation mix, super admin (Nov 2026) ─────────────────────────────────────
   Chips double as filters: seeing that 14 workspaces are cooperatives is only half
   the answer, the other half is looking at them. */
.type-mix { display: flex; flex-wrap: wrap; gap: 8px; }
.type-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--hairline); border-radius: 999px; text-decoration: none;
  color: var(--ink); font-size: 13px; }
.type-chip:hover { border-color: var(--primary); }
.type-chip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.type-chip.is-on .c-mute { color: rgba(255,255,255,.75); }

/* ── Platform console (Nov 2026) ───────────────────────────────────────────────────
   The admin console reuses the workspace shell wholesale; these are the few pieces it
   needs that the workspace has no equivalent for. */
.admin-attention { border-left: 3px solid var(--warning, #b45309); }
.attention-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink); font-size: 14px; }
.attention-item:hover { border-color: var(--primary); }
.attention-num { font-size: 20px; font-weight: 600; color: var(--primary); }
.usermenu-meta { padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
/* ── Employee home: grids that fit the 70% column (Dec 2026) ─────────────────── */
/* dash-kpis and kpi were used on the dashboard but never defined — inert classes that
   inherited plain .grid-3 and .card. Defined here so the employee home lays out on its own
   terms: the time clock is a much taller card than a metric tile, and a fixed three-up left a
   ragged row inside the narrower column. */
.dash-kpis { display: grid; gap: 20px; align-items: stretch; }
.dash-kpis.kpis-3 { grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(150px, 1fr)); }
.dash-kpis.kpis-1 { grid-template-columns: minmax(240px, 1fr); max-width: 420px; }
.dash-kpis > * { min-width: 0; }
.kpi { display: flex; flex-direction: column; justify-content: flex-start; }

/* Four across inside a 70% column gave each tile about 150px, which truncated the labels.
   auto-fit keeps them readable and simply wraps to two rows when the column narrows. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.leave-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 16px; }

/* The clock's buttons wrapped awkwardly at this width. */
.ess-clock .row { flex-wrap: wrap; }

@media (max-width: 1200px) {
    .dash-kpis.kpis-3 { grid-template-columns: 1fr 1fr; }
    .dash-kpis.kpis-3 > .ess-clock { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .dash-kpis.kpis-3 { grid-template-columns: 1fr; }
    .dash-kpis.kpis-3 > .ess-clock { grid-column: auto; }
    .dash-kpis.kpis-1 { max-width: none; }
}
/* ── Error pages (Dec 2026) ───────────────────────────────────────────────────── */
.err-wrap { max-width: 560px; margin: 8vh auto; padding: 0 24px; text-align: center; }
.err-code { font-family: 'Krona One', sans-serif; font-size: 64px; line-height: 1; color: var(--hairline); }
.err-actions { justify-content: center; flex-wrap: wrap; }

/* A plan you cannot pick yet: visibly there, visibly not an option (Dec 2026). */
.plan-option.is-unavailable { opacity: .55; cursor: not-allowed; }
.plan-option.is-unavailable .plan-check { visibility: hidden; }

/* Project progress: one track that fills, phases named underneath (Dec 2026). */
.proj-progress { padding: 16px 20px; margin-bottom: 16px; }
.proj-track { height: 10px; border-radius: 999px; background: var(--mint-2, #e6eef0); overflow: hidden; }
.proj-fill { height: 100%; background: var(--teal, #14707f); border-radius: 999px; transition: width .3s ease; }
.proj-phases { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-phases form { display: inline; }
.proj-phase { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line, #dde3e5);
              background: #fff; color: var(--mute, #6b7280); cursor: default; }
button.proj-phase { cursor: pointer; }
button.proj-phase:hover { border-color: var(--teal, #14707f); color: var(--teal, #14707f); }
.proj-phase.is-done { background: var(--mint, #eaf4f5); border-color: var(--teal, #14707f); color: var(--teal-d, #0d5561); font-weight: 600; }

/* The foldable post-a-note form (Dec 2026). */
.note-form { padding: 16px 20px; }
.note-form summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.note-form summary::-webkit-details-marker { display: none; }
.note-form summary::before { content: "+"; font-weight: 700; color: var(--teal, #14707f); }
.note-form[open] summary::before { content: "\2013"; }