/*  ═══════════════════════════════════════════════════════════════════════════
    KeyCode Solar - the components the solar screens add to app.css

    Every colour comes from the tokens in site.css (--ink navy, --ember amber,
    --brass blue). The stage colours below are the only new ones, and each
    is used for one meaning everywhere: a "Won" chip, a "Won" kanban column
    and a "Won" bar on the dashboard are the same green.
    ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --ok:      #15803D;
    --ok-wash: #DCFCE7;
    --warn:    #B45309;
    --warn-wash: #FEF3C7;
    --bad:     #B91C1C;
    --bad-wash: #FEE2E2;
    --info:    #1D4ED8;
    --info-wash: #DBEAFE;
    --mute-wash: #F1F5F9;
    --sun:     #F59E0B;
}

/* ── quick bar in the top bar ───────────────────────────────────────────── */
.topsearch { display: flex; align-items: center; gap: .4rem; margin-left: 1rem; flex: 1; max-width: 26rem; }
.topsearch input { width: 100%; border: 1px solid var(--rule); border-radius: 999px; padding: .42rem .9rem; font: inherit; font-size: .88rem; background: var(--card-2); }
.topsearch input:focus { outline: none; border-color: var(--ember); background: var(--paper); }
.quickadd { position: relative; }
.quickadd > summary { list-style: none; cursor: pointer; background: var(--ember); color: var(--ember-ink); font-weight: 600;
    border-radius: 999px; padding: .38rem .9rem; font-size: .88rem; white-space: nowrap; }
.quickadd > summary::-webkit-details-marker { display: none; }
.quickadd[open] > summary { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 30%, transparent); }
.quickadd .menu { position: absolute; right: 0; top: calc(100% + .4rem); background: var(--paper); border: 1px solid var(--rule);
    border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 13rem; padding: .35rem; z-index: 50; }
.quickadd .menu a { display: block; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .9rem; }
.quickadd .menu a:hover { background: var(--card-2); }
@media (max-width: 52rem) { .topsearch { display: none; } }

/* ── status chips, one colour per meaning ───────────────────────────────── */
.st { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
      background: var(--mute-wash); color: var(--text-2); }
.st-new, .st-draft, .st-open                    { background: var(--info-wash); color: var(--info); }
.st-contacted, .st-sent, .st-viewed, .st-assigned, .st-applied, .st-scheduled, .st-order { background: #E0E7FF; color: #3730A3; }
.st-survey, .st-proposal, .st-sitready, .st-sitereadY, .st-siteready, .st-material, .st-documents, .st-verification, .st-feasibility, .st-visited { background: var(--warn-wash); color: var(--warn); }
.st-negotiation, .st-installing, .st-installed, .st-testing, .st-inspection, .st-processing, .st-part, .st-duesoon, .st-renew, .st-due, .st-expiring { background: #FFEDD5; color: #C2410C; }
.st-won, .st-accepted, .st-commissioned, .st-handedover, .st-done, .st-paid, .st-closed, .st-resolved, .st-approved,
.st-disbursed, .st-synchronised, .st-meterfixed, .st-active, .st-instock, .st-present                  { background: var(--ok-wash); color: var(--ok); }
.st-lost, .st-rejected, .st-cancelled, .st-void, .st-overdue, .st-expired, .st-damaged, .st-absent      { background: var(--bad-wash); color: var(--bad); }
.st-sanctioned, .st-accrued                                                                        { background: #E0E7FF; color: #3730A3; }
.st-disbursing                                                                                     { background: #FFEDD5; color: #C2410C; }
.st-superseded, .st-upcoming, .st-returned, .st-replaced                                            { background: var(--mute-wash); color: var(--text-3); }
.st-hot  { background: var(--bad-wash); color: var(--bad); }
.st-warm { background: var(--warn-wash); color: var(--warn); }
.st-cold { background: var(--info-wash); color: var(--info); }
.st-dcr  { background: var(--ok-wash); color: var(--ok); }

/* ── the dashboard ──────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kpi { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: .95rem 1rem; display: flex; flex-direction: column; gap: .2rem;
       text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brass); }
.kpi.k-sun::before  { background: var(--sun); }
.kpi.k-ok::before   { background: var(--ok); }
.kpi.k-bad::before  { background: var(--bad); }
.kpi.k-warn::before { background: var(--warn); }
.kpi .l { font-size: .78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi .n { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.kpi .s { font-size: .8rem; color: var(--text-2); }
.kpi.k-bad .n { color: var(--bad); }

.board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.card-x { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.card-x > h2, .card-x > .hd h2 { font-size: .95rem; font-weight: 650; margin: 0; color: var(--ink); }
.card-x > .hd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.card-x > .hd a { font-size: .82rem; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
@media (max-width: 64rem) { .c8, .c7, .c6, .c5, .c4, .c3 { grid-column: span 12; } }
.chartbox { position: relative; height: 260px; }
.chartbox.small { height: 190px; }

.list-x { list-style: none; margin: 0; padding: 0; }
.list-x li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .9rem; }
.list-x li:last-child { border-bottom: 0; }
.list-x .grow { flex: 1; min-width: 0; }
.list-x .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-x .grow span { font-size: .8rem; color: var(--text-3); }
.list-x .when { font-size: .8rem; color: var(--text-2); white-space: nowrap; }
.list-x a { color: inherit; text-decoration: none; }
.list-x a:hover b { color: var(--brass); }

/* horizontal funnel / stage bars */
.hbars { display: flex; flex-direction: column; gap: .45rem; }
.hbar { display: grid; grid-template-columns: 8.5rem 1fr 6.5rem; gap: .6rem; align-items: center; font-size: .85rem; }
.hbar .track { height: 1.35rem; background: var(--mute-wash); border-radius: 6px; overflow: hidden; }
.hbar .fill { height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-lift)); border-radius: 6px; min-width: 2px; display: flex; align-items: center; justify-content: flex-end; padding-right: .4rem; color: #fff; font-size: .72rem; font-weight: 700; }
.hbar .fill.sun { background: linear-gradient(90deg, #F59E0B, #FBBF24); color: #111827; }
.hbar .fill.ok  { background: linear-gradient(90deg, #15803D, #22C55E); }
.hbar .fill.bad { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.hbar .v { text-align: right; font-family: var(--mono); font-size: .8rem; color: var(--text-2); }

/* the alerts strip */
.alert-x { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border-radius: var(--radius-sm); margin-bottom: .45rem; font-size: .88rem; text-decoration: none; color: inherit; }
.alert-x:hover { filter: brightness(.97); }
.alert-x .ic { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .9rem; font-weight: 700; }
.alert-Overdue { background: var(--bad-wash); } .alert-Overdue .ic { background: var(--bad); color: #fff; }
.alert-Ticket  { background: var(--warn-wash); } .alert-Ticket .ic { background: var(--warn); color: #fff; }
.alert-AMC     { background: var(--info-wash); } .alert-AMC .ic { background: var(--info); color: #fff; }
.alert-Generation { background: #FFEDD5; } .alert-Generation .ic { background: #C2410C; color: #fff; }
.alert-Stuck   { background: var(--mute-wash); } .alert-Stuck .ic { background: var(--text-3); color: #fff; }

/* ── lead kanban ────────────────────────────────────────────────────────── */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .8rem; align-items: start; }
.kcol { background: var(--card-2); border-radius: var(--radius); padding: .6rem; min-height: 12rem; border: 2px dashed transparent; transition: border-color .12s, background .12s; }
.kcol.drop { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 8%, var(--card-2)); }
.kcol > header { display: flex; justify-content: space-between; align-items: baseline; padding: .15rem .3rem .55rem; }
.kcol > header b { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.kcol > header span { font-size: .75rem; color: var(--text-3); font-family: var(--mono); }
.kcard { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .6rem .7rem; margin-bottom: .5rem; cursor: grab;
         box-shadow: var(--shadow-sm); transition: box-shadow .12s, transform .12s; display: block; color: inherit; text-decoration: none; }
.kcard:hover { box-shadow: var(--shadow-md); }
.kcard.dragging { opacity: .5; transform: rotate(1.5deg); }
.kcard .t { font-weight: 600; font-size: .9rem; display: flex; justify-content: space-between; gap: .4rem; }
.kcard .m { font-size: .78rem; color: var(--text-3); margin-top: .15rem; }
.kcard .b { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; font-size: .8rem; }
.kcard .due { color: var(--bad); font-weight: 600; }

/* ── the project stepper ────────────────────────────────────────────────── */
.stepper { display: flex; gap: 0; overflow-x: auto; margin: .2rem 0 1.2rem; padding-bottom: .3rem; }
.step { flex: 1; min-width: 6.5rem; position: relative; text-align: center; font-size: .74rem; color: var(--text-3); padding-top: 1.9rem; }
.step::before { content: ""; position: absolute; top: .7rem; left: 0; right: 0; height: 3px; background: var(--rule); }
.step:first-child::before { left: 50%; } .step:last-child::before { right: 50%; }
.step .dot { position: absolute; top: .2rem; left: 50%; transform: translateX(-50%); width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--rule); z-index: 1; }
.step.done { color: var(--ok); } .step.done::before { background: var(--ok); } .step.done .dot { background: var(--ok); border-color: var(--ok); }
.step.now { color: var(--ink); font-weight: 700; } .step.now .dot { border-color: var(--sun); background: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 30%, transparent); }

.progress { height: .5rem; background: var(--mute-wash); border-radius: 999px; overflow: hidden; min-width: 4rem; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun), #FBBF24); border-radius: 999px; }
.progress.ok > i { background: var(--ok); }

/* ── detail pages: header card, tabs, key-values ───────────────────────── */
.hero-x { background: linear-gradient(135deg, var(--ink), var(--ink-soft)); color: var(--on-ink); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1rem;
          display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.hero-x h1 { color: #fff; margin: 0; font-size: 1.45rem; }
.hero-x .sub { color: var(--on-ink-2); font-size: .88rem; }
.hero-x .fig { display: flex; flex-direction: column; }
.hero-x .fig b { font-family: var(--display); font-size: 1.35rem; color: var(--sun); }
.hero-x .fig span { font-size: .75rem; color: var(--on-ink-2); text-transform: uppercase; letter-spacing: .05em; }
.hero-x .acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-x .btn-quiet { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }

.tabs-x { display: flex; gap: .2rem; border-bottom: 2px solid var(--rule); margin-bottom: 1rem; overflow-x: auto; }
.tabs-x button, .tabs-x a { background: none; border: 0; padding: .6rem .9rem; font: inherit; font-size: .9rem; color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; text-decoration: none; }
.tabs-x .on, .tabs-x button[aria-selected="true"] { color: var(--ink); font-weight: 650; border-bottom-color: var(--sun); }
.tabpane[hidden] { display: none; }

.kv2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem 1.2rem; }
.kv2 div { display: flex; flex-direction: column; }
.kv2 dt { font-size: .74rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.kv2 dd { margin: 0; font-weight: 550; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
.timeline li { position: relative; padding: 0 0 .9rem .9rem; font-size: .88rem; }
.timeline li::before { content: ""; position: absolute; left: -1.42rem; top: .25rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--brass); border: 2px solid var(--paper); }
.timeline li.k-Stage::before { background: var(--sun); }
.timeline li.k-Call::before, .timeline li.k-WhatsApp::before { background: var(--ok); }
.timeline .when { font-size: .76rem; color: var(--text-3); }

/* ── photos and documents ───────────────────────────────────────────────── */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.photo { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--card-2); aspect-ratio: 4/3; border: 1px solid var(--rule); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo .cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: .72rem; padding: .8rem .4rem .3rem; }
.photo .doc { display: grid; place-items: center; height: 100%; font-weight: 700; color: var(--brass); font-size: .8rem; text-align: center; padding: .4rem; text-decoration: none; }
.photo form { position: absolute; top: .25rem; right: .25rem; }
.photo form button { background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 50%; width: 1.5rem; height: 1.5rem; cursor: pointer; font-size: .8rem; }
.dropzone { border: 2px dashed var(--rule); border-radius: var(--radius); padding: 1rem; text-align: center; color: var(--text-3); cursor: pointer; transition: border-color .12s, background .12s; }
.dropzone.over { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 8%, transparent); }
.dropzone input[type=file] { display: none; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: grid; place-items: center; z-index: 200; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 6px; }
.folder-h { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 1rem 0 .4rem; }

/* ── the design calculator ──────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; }
@media (max-width: 64rem) { .calc { grid-template-columns: 1fr; } }
.calc-out { background: linear-gradient(160deg, var(--ink), #173B63); color: #fff; border-radius: var(--radius); padding: 1.2rem; }
.calc-out .big { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--sun); line-height: 1; }
.calc-out .grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1rem; }
.calc-out .grid4 div { background: rgba(255,255,255,.07); border-radius: var(--radius-sm); padding: .6rem .7rem; }
.calc-out .grid4 b { display: block; font-size: 1.15rem; }
.calc-out .grid4 span { font-size: .72rem; color: #CBD5E1; text-transform: uppercase; letter-spacing: .04em; }
.calc-out .warn { background: rgba(245,158,11,.18); border-left: 3px solid var(--sun); padding: .5rem .7rem; border-radius: 4px; font-size: .85rem; margin-top: .6rem; }
.calc-out canvas { margin-top: .8rem; }

/* ── maps ──────────────────────────────────────────────────────────────── */
.mapbox { height: 300px; border-radius: var(--radius); border: 1px solid var(--rule); overflow: hidden; z-index: 0; }
.mapbox.tall { height: 460px; }
.gps-btn { white-space: nowrap; }

/* ── editable line grids (quotations, POs, invoices) ────────────────────── */
table.lines { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lines th { text-align: left; font-size: .75rem; text-transform: uppercase; color: var(--text-3); padding: .4rem; border-bottom: 2px solid var(--rule); }
table.lines td { padding: .3rem .25rem; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.lines input, table.lines select, table.lines textarea { width: 100%; border: 1px solid var(--rule); border-radius: 6px; padding: .38rem .45rem; font: inherit; font-size: .88rem; background: var(--paper); }
table.lines input:focus, table.lines select:focus { outline: none; border-color: var(--ember); }
table.lines td.num input { text-align: right; }
table.lines td.amt { text-align: right; font-family: var(--mono); white-space: nowrap; }
table.lines .x { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 1.1rem; }
.totals { margin-left: auto; min-width: 18rem; font-size: .92rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.totals .grand { border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.1rem; padding-top: .45rem; }
.pick { position: relative; }
.pick-list { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 60; max-height: 18rem; overflow: auto; }
.pick-list div { padding: .45rem .6rem; cursor: pointer; font-size: .88rem; display: flex; justify-content: space-between; gap: .5rem; }
.pick-list div:hover, .pick-list div.hi { background: var(--card-2); }
.pick-list small { color: var(--text-3); }

/* ── calendar ───────────────────────────────────────────────────────────── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.cal > div { background: var(--paper); min-height: 6.5rem; padding: .35rem; font-size: .78rem; }
.cal .dow { min-height: auto; background: var(--card-2); font-weight: 700; text-align: center; text-transform: uppercase; font-size: .72rem; color: var(--text-3); }
.cal .off { background: var(--card-2); color: var(--text-3); }
.cal .today { box-shadow: inset 0 0 0 2px var(--sun); }
.cal .d { font-weight: 700; color: var(--text-2); }
.cal a.ev { display: block; margin-top: .2rem; padding: .15rem .35rem; border-radius: 4px; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── the attendance register ────────────────────────────────────────────── */
.att td .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.att td .seg label { padding: .25rem .6rem; font-size: .78rem; cursor: pointer; }
.att td .seg input { display: none; }
.att td .seg input:checked + span { font-weight: 700; }
.att td .seg label:has(input:checked) { background: var(--ink); color: #fff; }

/* ── the public pages (quotation link, customer portal) ─────────────────── */
.pub { max-width: 60rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.pub-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 0 1.2rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; }
.pub-head img { width: 2.6rem; height: 2.6rem; }
.pub-head b { font-size: 1.1rem; color: var(--ink); }
.accept-box { background: var(--ok-wash); border: 1px solid #86EFAC; border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }

/* ── small things ───────────────────────────────────────────────────────── */
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.bad-t { color: var(--bad); font-weight: 600; }
.ok-t { color: var(--ok); font-weight: 600; }
.row-x { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row-x.end { justify-content: flex-end; }
.spacer { flex: 1; }
.btn-wa { background: #25D366; color: #fff; border-color: #25D366; }
.btn-wa:hover { background: #1DA851; }
.btn-sm { padding: .3rem .7rem; font-size: .82rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem .9rem; }
.checks label { display: flex; gap: .5rem; align-items: center; font-size: .9rem; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer; }
.checks label:has(input:checked) { background: var(--ok-wash); border-color: #86EFAC; }
.inline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
dialog.sheet { border: 0; border-radius: var(--radius); padding: 0; width: min(34rem, 94vw); box-shadow: var(--shadow-md); }
dialog.sheet::backdrop { background: rgba(14,42,71,.45); }
dialog.sheet form { padding: 1.1rem 1.2rem; }
dialog.sheet h3 { margin: 0 0 .8rem; }
.skeleton { background: linear-gradient(90deg, var(--card-2), var(--rule-soft), var(--card-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }
@media print { .no-print, .side, .topbar { display: none !important; } }

/*  ═══════════════════════════════════════════════════════════════════════════
    THE SHELL - asked for 24 Sep 2026: a navy header across the top with the
    brand and the person, a dark sidebar with a blue pill for the screen you
    are on, white cards on a soft grey ground.
    ═══════════════════════════════════════════════════════════════════════════ */
body.app-x {
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --navy-1: #0B1F3A; --navy-2: #173765; --side-bg: #13294B; --side-on: #2563EB;
    --ground: #F3F6FA;
    font-family: var(--sans);
    background: var(--ground);
}
body.app-x h1, body.app-x h2, body.app-x h3 { font-family: var(--sans); letter-spacing: -.01em; }
.apphead {
    position: sticky; top: 0; z-index: 45; height: 4.5rem;
    display: flex; align-items: center; gap: 1rem; padding: 0 1.4rem;
    background: linear-gradient(90deg, var(--navy-1) 0%, var(--navy-2) 60%, #1E4C86 100%); color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / .18);
}
.apphead .menubtn { border-color: rgb(255 255 255 / .3); color: #fff; }
.apphead-brand { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; min-width: 0; }
.apphead-brand img { width: 2.9rem; height: 2.9rem; flex: none; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3)); }
.apphead-brand span { display: flex; flex-direction: column; min-width: 0; }
.apphead-brand b { font-size: 1.35rem; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apphead-brand small { font-size: .85rem; color: #C9D6EA; }
.apphead .topsearch { position: relative; margin-left: 1.5rem; }
.apphead .topsearch svg { position: absolute; left: .75rem; width: 1rem; height: 1rem; fill: none; stroke: #9FB3D1; stroke-width: 2; stroke-linecap: round; }
.apphead .topsearch input { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); color: #fff; padding-left: 2.2rem; }
.apphead .topsearch input::placeholder { color: #9FB3D1; }
.apphead .topsearch input:focus { background: #fff; color: var(--text); }
.apphead-right { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.apphead .pickbranch select { background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .22); border-radius: 8px; padding: .35rem .5rem; font: inherit; font-size: .85rem; }
.apphead .pickbranch option { color: var(--text); }
.apphead .quickadd > summary { background: var(--sun); color: #111827; }

.bell, .userbox { position: relative; }
.bell > summary, .userbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; color: #fff; }
.bell > summary::-webkit-details-marker, .userbox > summary::-webkit-details-marker { display: none; }
.bell svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell .badge { position: absolute; top: -.35rem; right: -.45rem; background: #EF4444; color: #fff; border-radius: 999px; font-size: .66rem; font-weight: 700;
               min-width: 1.15rem; height: 1.15rem; display: grid; place-items: center; padding: 0 .25rem; border: 2px solid var(--navy-2); }
.bell .menu, .userbox .menu { position: absolute; right: 0; top: calc(100% + .7rem); background: #fff; color: var(--text); border-radius: 12px;
    box-shadow: 0 12px 32px rgb(15 23 42 / .22); min-width: 16rem; padding: .45rem; z-index: 60; }
.bell .menu { width: 22rem; max-height: 70vh; overflow: auto; }
.bell .menu-h { font-size: .8rem; font-weight: 600; color: var(--text-3); padding: .3rem .4rem .5rem; }
.userbox .avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: var(--navy-2); display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex: none; }
.userbox .who { display: flex; flex-direction: column; line-height: 1.2; }
.userbox .who b { font-weight: 600; font-size: .95rem; }
.userbox .who small { color: #C9D6EA; font-size: .8rem; }
.userbox .chev { width: 1.1rem; height: 1.1rem; fill: none; stroke: #fff; stroke-width: 2; }
.userbox .menu a, .userbox .menu button { display: block; width: 100%; text-align: left; padding: .55rem .7rem; border-radius: 8px; color: var(--text);
    text-decoration: none; background: none; border: 0; font: inherit; font-size: .9rem; cursor: pointer; }
.userbox .menu a:hover, .userbox .menu button:hover { background: var(--ground); }
.userbox .menu form { margin: 0; }

body.app-x .shell { min-height: calc(100vh - 4.5rem); grid-template-columns: 15.5rem 1fr; }
body.app-x .side {
    background: var(--side-bg); top: 4.5rem; height: calc(100vh - 4.5rem); padding: 1.2rem .9rem 1rem; gap: .15rem;
}
body.app-x .side-nav { gap: .2rem; }
body.app-x .side-nav a { padding: .72rem .9rem; border-radius: 10px; font-size: .95rem; color: #DCE6F5; gap: .85rem; }
body.app-x .side-nav a:hover { background: rgb(255 255 255 / .07); color: #fff; }
body.app-x .side-nav a.on { background: var(--side-on); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgb(37 99 235 / .35); }
body.app-x .side-nav svg { width: 1.3rem; height: 1.3rem; stroke-width: 1.9; }
body.app-x .side-group { font-family: var(--sans); color: #7F95B8; font-size: .7rem; padding: 1.1rem .9rem .35rem; }
.side-motto { margin-top: auto; padding: 1.4rem .9rem .4rem; color: #fff; font-size: 1.12rem; line-height: 1.35; }
.side-motto svg { width: 2.4rem; height: 2.4rem; fill: #22C55E; stroke: #16A34A; stroke-width: 1; display: block; margin-bottom: .6rem; }
body.app-x .appmain { padding-block: 1.6rem 4rem; }
body.app-x .shell .wrap { width: min(92rem, 100% - 3rem); }
body.app-x .page-head h1 { font-size: 1.9rem; font-weight: 700; color: #0F1F38; }
body.app-x .panel, body.app-x .tablewrap { border-radius: 12px; border-color: #E6ECF3; box-shadow: 0 1px 3px rgb(15 23 42 / .05); }
body.app-x .card-x { border-radius: 12px; border-color: #E6ECF3; box-shadow: 0 1px 3px rgb(15 23 42 / .05); padding: 1.2rem 1.3rem; }
body.app-x .card-x > .hd h2 { font-size: 1.02rem; font-weight: 650; display: flex; align-items: center; gap: .55rem; }
.card-x > .hd h2 svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--navy-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 62rem) {
    body.app-x .shell { grid-template-columns: 1fr; }
    body.app-x .side { top: 0; height: 100vh; z-index: 50; }
    .apphead .topsearch, .userbox .who, .apphead-brand small { display: none; }
    .apphead-brand b { font-size: 1.05rem; }
    .apphead { padding: 0 .8rem; gap: .6rem; }
}

/* ── the dashboard, card for card with the mock-up ──────────────────────── */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.dash-head h1 { margin: 0; font-size: 1.9rem; font-weight: 700; color: #0F1F38; }
.dash-head p { margin: .25rem 0 0; color: var(--text-2); }
.datebox { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid #E1E7EF; border-radius: 10px; padding: .6rem .9rem; font-weight: 500; color: #1E293B; }
.datebox svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: #334155; stroke-width: 1.8; }
.datebox select, .datebox input { border: 0; font: inherit; background: none; color: inherit; }

.icards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 72rem) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .icards { grid-template-columns: 1fr; } }
.icard { background: #fff; border: 1px solid #E6ECF3; border-radius: 12px; padding: 1.3rem 1.3rem 1.1rem; display: flex; gap: 1.1rem; align-items: flex-start;
         text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgb(15 23 42 / .05); transition: transform .12s ease, box-shadow .12s ease; }
a.icard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(15 23 42 / .09); }
.icard .ico { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; flex: none; }
.icard .ico svg { width: 2rem; height: 2rem; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.green  { background: #DCFCE7; } .ico.green svg  { stroke: #16A34A; }
.ico.blue   { background: #DBEAFE; } .ico.blue svg   { stroke: #2563EB; fill: #2563EB; }
.ico.purple { background: #EDE9FE; } .ico.purple svg { stroke: #7C3AED; fill: #A78BFA; }
.ico.amber  { background: #FEF3C7; } .ico.amber svg  { stroke: #D97706; }
.ico.red    { background: #FEE2E2; } .ico.red svg    { stroke: #DC2626; }
.ico.teal   { background: #CCFBF1; } .ico.teal svg   { stroke: #0D9488; }
.icard .body { min-width: 0; }
.icard .l { font-size: .98rem; color: #334155; font-weight: 500; }
.icard .n { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin: .25rem 0 .35rem; color: #0F1F38; white-space: nowrap; }
.icard .n.green { color: #15803D; }
.icard .tr { font-size: .88rem; font-weight: 600; display: flex; align-items: center; gap: .25rem; }
.icard .tr.up { color: #16A34A; } .icard .tr.down { color: #DC2626; } .icard .tr.flat { color: var(--text-3); }
.icard .vs { font-size: .78rem; color: var(--text-3); margin-top: .1rem; }
.icards.small .icard { padding: 1rem; gap: .8rem; }
.icards.small .ico { width: 3rem; height: 3rem; } .icards.small .ico svg { width: 1.5rem; height: 1.5rem; }
.icards.small .n { font-size: 1.45rem; }

.legend-x { display: flex; gap: 1rem; font-size: .78rem; color: var(--text-2); }
.legend-x i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }

/* performance ring + status list */
.overview { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: center; }
@media (max-width: 36rem) { .overview { grid-template-columns: 1fr; justify-items: center; } }
.ring { position: relative; width: 9.5rem; height: 9.5rem; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .bg { stroke: #E8EEF5; } .ring .fg { stroke: #16A34A; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ring .mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .mid b { font-size: 2rem; font-weight: 700; color: #0F1F38; display: block; line-height: 1; }
.ring .mid span { font-size: .8rem; color: var(--text-2); }
.statlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.statlist li { display: flex; align-items: center; gap: .8rem; }
.statlist .sq { width: 2.4rem; height: 2.4rem; border-radius: 8px; background: #F1F5F9; display: grid; place-items: center; flex: none; }
.statlist .sq svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: #334155; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.statlist .t { flex: 1; min-width: 0; font-size: .78rem; color: var(--text-3); line-height: 1.25; }
.statlist .t b { display: block; white-space: nowrap; font-size: .9rem; color: #1E293B; font-weight: 600; }
.statlist .dot { width: .6rem; height: .6rem; border-radius: 50%; background: #22C55E; flex: none; }
.statlist .dot.warn { background: #F59E0B; } .statlist .dot.bad { background: #EF4444; } .statlist .dot.off { background: #CBD5E1; }

/* weather */
.weather { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.weather .sky { position: relative; min-height: 9.5rem; padding: 1.1rem 1.2rem; color: #fff;
    background: radial-gradient(circle at 85% 20%, rgb(255 255 255 / .95) 0 1.4rem, rgb(255 244 200 / .55) 2.2rem, transparent 5rem),
                linear-gradient(180deg, #2F6FD0 0%, #5B9BE6 55%, #7CB5EE 70%, #1F3F70 71%, #173765 100%); }
.weather .sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
    background: repeating-linear-gradient(100deg, #1B3A6A 0 6px, #2C5A9A 6px 22px); opacity: .85;
    clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%); }
.weather .sky > * { position: relative; z-index: 1; }
.weather .temp { display: flex; align-items: center; gap: .7rem; }
.weather .temp .sun { font-size: 2.4rem; line-height: 1; }
.weather .temp b { font-size: 2.1rem; font-weight: 700; display: block; line-height: 1; }
.weather .temp span { font-size: .95rem; }
.weather .place { margin-top: .6rem; font-size: .92rem; display: flex; align-items: center; gap: .35rem; text-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.weather ul { list-style: none; margin: 0; padding: .6rem 1.2rem .9rem; }
.weather li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid #EEF2F7; font-size: .92rem; }
.weather li:last-child { border-bottom: 0; }
.weather li .k { flex: 1; color: #334155; } .weather li b { font-weight: 700; color: #0F1F38; }
.weather li .ic { width: 2rem; height: 2rem; border-radius: 50%; background: #F1F5F9; display: grid; place-items: center; font-size: 1rem; }

/* the flow diagram */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; grid-template-rows: auto auto auto; align-items: center; justify-items: center; row-gap: .3rem; padding: .4rem 0; }
.flow .node { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; }
.flow .node .ni { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; }
.flow .node svg { width: 2.6rem; height: 2.6rem; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow .node span { font-size: .82rem; color: #475569; }
.flow .node b { font-size: 1.05rem; color: #0F1F38; }
.flow .arr { font-size: 1.6rem; line-height: 1; }
.flow .arr.teal { color: #14B8A6; } .flow .arr.blue { color: #2563EB; } .flow .arr.amber { color: #F59E0B; } .flow .arr.green { color: #16A34A; }
.flow .down { grid-column: span 1; }

/* recent activity with coloured dots */
.acts-x { list-style: none; margin: 0; padding: 0; }
.acts-x li { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid #EEF2F7; font-size: .88rem; }
.acts-x li:last-child { border-bottom: 0; }
.acts-x .d { width: .6rem; height: .6rem; border-radius: 50%; margin-top: .35rem; flex: none; background: #22C55E; }
.acts-x .d.Money { background: #16A34A; } .acts-x .d.Create { background: #2563EB; } .acts-x .d.Change { background: #22C55E; }
.acts-x .d.Cancel, .acts-x .d.Remove { background: #EF4444; } .acts-x .d.Price, .acts-x .d.Move { background: #F59E0B; }
.acts-x .tx { flex: 1; min-width: 0; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acts-x .tx span { display: block; font-size: .76rem; color: var(--text-3); }
.acts-x .ago { font-size: .76rem; color: var(--text-3); white-space: nowrap; }

/* every 12-column span a form may ask for */
.fields > .f1 { grid-column: auto / span 1; } .fields > .f2 { grid-column: auto / span 2; } .fields > .f3 { grid-column: auto / span 3; }
.fields > .f4 { grid-column: auto / span 4; } .fields > .f5 { grid-column: auto / span 5; } .fields > .f6 { grid-column: auto / span 6; }
.fields > .f7 { grid-column: auto / span 7; } .fields > .f8 { grid-column: auto / span 8; } .fields > .f9 { grid-column: auto / span 9; }
.fields > .f10 { grid-column: auto / span 10; } .fields > .f11 { grid-column: auto / span 11; } .fields > .f12 { grid-column: auto / span 12; }
@media (max-width: 42rem) { .fields > [class*="f"] { grid-column: auto / span 12; } }

/* Wide things (the kanban, long tables) scroll inside their box - never the page. */
body.app-x .shell { grid-template-columns: 15.5rem minmax(0, 1fr); }
body.app-x .appmain, body.app-x .wrap { min-width: 0; }
.kanban { max-width: 100%; }
@media (max-width: 62rem) { body.app-x .shell { grid-template-columns: minmax(0, 1fr); } }

/* ── SolarX brand in the app header: the round badge on a white disc, the
      name with "ERP" in the logo's green ─────────────────────────────── */
.apphead-brand img { background: #fff; border-radius: 50%; padding: 2px; }
.apphead-brand b em { font-style: normal; color: #7ED957; }

/* ── operators' announcements, top of every signed-in page ─────────────── */
.opsnotice { display: flex; gap: .4rem; align-items: baseline; }
.opsnotice .linkbtn { margin-left: auto; font-size: 1.1rem; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; }

/* ═════════════════════════════════════════════ compact page hero (29 Sep) ===
   Every signed-in page's heading (.page-head) as one compact band: SolarXErp
   blue, an orange edge and glow, the page's buttons on the right. The same
   markup as before - no page had to change.  */
body.app-x {
    --hero-blue-1: #0E3FA8;
    --hero-blue-2: #1453D6;
    --hero-blue-3: #2F6BE8;
    --hero-orange: #F59E0B;
    --hero-orange-lift: #FBBF24;
}
body.app-x .page-head {
    position: relative; overflow: hidden; isolation: isolate;
    align-items: center; gap: .7rem 1.2rem;
    margin-bottom: 1.1rem; padding: .95rem 1.25rem .95rem 1.55rem;
    border: 0; border-radius: 14px;
    background: linear-gradient(115deg, var(--hero-blue-1) 0%, var(--hero-blue-2) 55%, var(--hero-blue-3) 100%);
    color: #fff; box-shadow: 0 8px 22px rgb(20 83 214 / .18);
}
body.app-x .page-head::before {           /* the orange edge */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
    background: linear-gradient(180deg, var(--hero-orange-lift), var(--hero-orange));
}
body.app-x .page-head::after {            /* the orange sun, faint, top right */
    content: ""; position: absolute; z-index: -1; right: -3.5rem; top: -4.5rem; width: 13rem; height: 13rem; border-radius: 50%;
    background: radial-gradient(circle, rgb(245 158 11 / .45) 0%, rgb(245 158 11 / .12) 45%, transparent 70%);
    pointer-events: none;
}
body.app-x .page-head .titles { gap: .15rem; min-width: 0; }
body.app-x .page-head .eyebrow { color: var(--hero-orange-lift); font-size: .7rem; letter-spacing: .14em; }
body.app-x .page-head .eyebrow a { color: inherit; }
body.app-x .page-head h1 { color: #fff; font-size: 1.45rem; line-height: 1.2; }
body.app-x .page-head p { color: #DCE6FF; font-size: .9rem; max-width: 52rem; }
body.app-x .page-head p a, body.app-x .page-head p b { color: #fff; }
body.app-x .page-head .actions { align-items: center; flex-wrap: wrap; }
body.app-x .page-head .btn { min-height: 2.3rem; }
body.app-x .page-head .btn-quiet, body.app-x .page-head button.btn:not(.btn-solid) {
    background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .35);
}
body.app-x .page-head .btn-quiet:hover { background: rgb(255 255 255 / .22); }
body.app-x .page-head .btn-solid { background: var(--hero-orange); border-color: var(--hero-orange); color: #1F2937; font-weight: 650; }
body.app-x .page-head .btn-solid:hover { background: var(--hero-orange-lift); border-color: var(--hero-orange-lift); }
body.app-x .page-head .chip, body.app-x .page-head .st { box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
body.app-x .page-head input, body.app-x .page-head select { color: var(--text); }
@media (max-width: 40rem) {
    body.app-x .page-head { padding: .8rem 1rem .8rem 1.25rem; }
    body.app-x .page-head h1 { font-size: 1.25rem; }
}

/* ═══════════════════════════════════ table headers: light, and sortable === */
table.grid th, table.lines th {
    background: #EEF3FF; color: #1E3A8A; border-bottom: 1px solid #D6E0F5;
}
table.grid thead th[data-sort] { cursor: pointer; user-select: none; position: relative; padding-right: 1.35rem; }
table.grid thead th[data-sort]:hover { background: #E0E9FD; }
table.grid thead th[data-sort]::after {
    content: "↕"; position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    font-family: var(--sans); font-size: .75rem; opacity: .35;
}
table.grid thead th[aria-sort="ascending"]::after  { content: "▲"; opacity: .9; color: var(--hero-orange, #F59E0B); font-size: .6rem; }
table.grid thead th[aria-sort="descending"]::after { content: "▼"; opacity: .9; color: var(--hero-orange, #F59E0B); font-size: .6rem; }
table.grid thead th[aria-sort] { color: #0E3FA8; }

/* ══════════════════════════════════════════ one tab style everywhere === */
/* Link tabs (.chainnav - list filters, settings, operators) and in-page tabs
   (.tabs-x - project and customer pages) look the same: a white bar, the
   active tab blue on a light-blue wash with the orange underline.  */
body.app-x .chainnav, body.app-x .tabs-x {
    display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scrollbar-width: thin;
    margin-bottom: 1.1rem; padding: .3rem; border: 1px solid #E6ECF3; border-radius: 12px;
    background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / .05);
}
body.app-x .chainnav a, body.app-x .tabs-x a, body.app-x .tabs-x button {
    flex: none; position: relative; margin: 0; padding: .5rem .95rem; border: 0; border-radius: 9px;
    background: transparent; color: #4A5670; font: inherit; font-size: .9rem; font-weight: 500;
    text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s;
}
body.app-x .chainnav a:hover, body.app-x .tabs-x a:hover, body.app-x .tabs-x button:hover { background: #F2F6FE; color: #0E3FA8; }
body.app-x .chainnav a.on, body.app-x .tabs-x .on, body.app-x .tabs-x button[aria-selected="true"] {
    background: #EEF3FF; color: #0E3FA8; font-weight: 650; border-bottom: 0;
}
body.app-x .chainnav a.on::after, body.app-x .tabs-x .on::after, body.app-x .tabs-x button[aria-selected="true"]::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

/* ══════════════════════ the maker's credit below every signed-in page === */
.appfoot { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid #E6ECF3; }
@media print { .appfoot { display: none; } }

/* ═══ the same compact hero on record pages (.hero-x) and dashboards (.dash-head) ═══ */
body.app-x .hero-x, body.app-x .dash-head {
    position: relative; overflow: hidden; isolation: isolate;
    border: 0; border-radius: 14px; margin-bottom: 1.1rem;
    padding: .95rem 1.25rem .95rem 1.55rem;
    background: linear-gradient(115deg, var(--hero-blue-1) 0%, var(--hero-blue-2) 55%, var(--hero-blue-3) 100%);
    color: #fff; box-shadow: 0 8px 22px rgb(20 83 214 / .18);
}
body.app-x .hero-x::before, body.app-x .dash-head::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
    background: linear-gradient(180deg, var(--hero-orange-lift), var(--hero-orange));
}
body.app-x .hero-x::after, body.app-x .dash-head::after {
    content: ""; position: absolute; z-index: -1; right: -3.5rem; top: -4.5rem; width: 13rem; height: 13rem; border-radius: 50%;
    background: radial-gradient(circle, rgb(245 158 11 / .45) 0%, rgb(245 158 11 / .12) 45%, transparent 70%);
    pointer-events: none;
}
body.app-x .hero-x h1, body.app-x .dash-head h1 { color: #fff; font-size: 1.45rem; line-height: 1.2; }
body.app-x .hero-x .sub, body.app-x .dash-head .sub, body.app-x .dash-head p { color: #DCE6FF; font-size: .9rem; }
body.app-x .hero-x a:not(.btn), body.app-x .dash-head a:not(.btn) { color: #fff; }
body.app-x .hero-x .fig b { color: var(--hero-orange-lift); }
body.app-x .hero-x .fig span { color: #C9D8FF; }
body.app-x .hero-x .btn-quiet, body.app-x .dash-head .btn-quiet {
    background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .35);
}
body.app-x .hero-x .btn-quiet:hover, body.app-x .dash-head .btn-quiet:hover { background: rgb(255 255 255 / .22); }
body.app-x .hero-x .btn-solid, body.app-x .dash-head .btn-solid { background: var(--hero-orange); border-color: var(--hero-orange); color: #1F2937; font-weight: 650; }
body.app-x .dash-head input, body.app-x .dash-head select { color: var(--text); background: #fff; border-color: rgb(255 255 255 / .6); }
body.app-x .dash-head label { color: #DCE6FF; }

/* ═════════════════════════════════════════ table paging (site.js) === */
.tpager {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
    margin: .6rem 0 1.2rem; padding: .5rem .75rem; border: 1px solid #E6ECF3; border-radius: 12px;
    background: #fff; font-size: .86rem; color: #4A5670;
}
.tpager-size select { margin-left: .35rem; padding: .25rem .5rem; border: 1px solid #D6E0F5; border-radius: 8px; background: #F7F9FE; font: inherit; color: #0E3FA8; }
.tpager-info { color: #6B7A93; font-variant-numeric: tabular-nums; }
.tpager-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.tpager-nav[hidden] { display: none; }
.tpager button {
    min-width: 2rem; height: 2rem; padding: 0 .6rem; border: 1px solid #D6E0F5; border-radius: 8px;
    background: #fff; color: #0E3FA8; font: inherit; font-weight: 600; cursor: pointer;
}
.tpager button:hover:not(:disabled) { background: #EEF3FF; }
.tpager button:disabled { opacity: .4; cursor: default; }
.tpager button.on { background: #1453D6; border-color: #1453D6; color: #fff; box-shadow: inset 0 -3px 0 #F59E0B; }
.tpager-pages { display: flex; gap: .25rem; align-items: center; }
.tpager .gap { padding: 0 .2rem; color: #94A3B8; }
@media (max-width: 40rem) { .tpager-pages { display: none; } .tpager-nav { margin-left: 0; } }
@media print { .tpager { display: none; } }
@media print { table.grid tbody tr { display: table-row !important; } }

/* ═══ the hero's sun (replaces the flat orange glow): a bright core, a warm
       halo and faint rays, blended with "screen" so it lights the blue up
       like sunlight instead of muddying it. Shared by all three heroes.  */
body.app-x .page-head::after, body.app-x .hero-x::after, body.app-x .dash-head::after {
    right: -6rem; top: -9rem; width: 22rem; height: 22rem;
    background:
        radial-gradient(circle, #FFFDF2 0%, #FFF4C2 9%, #FDE68A 17%, rgb(251 191 36 / .85) 25%, rgb(251 191 36 / .35) 38%, rgb(245 158 11 / .12) 52%, transparent 66%),
        repeating-conic-gradient(from 8deg, rgb(255 236 170 / .30) 0deg 5deg, transparent 5deg 15deg);
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle, #000 30%, rgb(0 0 0 / .5) 48%, transparent 68%);
            mask-image: radial-gradient(circle, #000 30%, rgb(0 0 0 / .5) 48%, transparent 68%);
}
/* A little warmth across the band, towards the sun.  */
body.app-x .page-head, body.app-x .hero-x, body.app-x .dash-head {
    background:
        radial-gradient(120% 140% at 100% 0%, rgb(253 230 138 / .22) 0%, transparent 45%),
        linear-gradient(115deg, var(--hero-blue-1) 0%, var(--hero-blue-2) 55%, var(--hero-blue-3) 100%);
}
@media (max-width: 40rem) {
    body.app-x .page-head::after, body.app-x .hero-x::after, body.app-x .dash-head::after { right: -8rem; top: -10rem; }
}

/* ═══ the sun, deep orange and easy on the eye (overrides the bright version above) ═══ */
body.app-x .page-head::after, body.app-x .hero-x::after, body.app-x .dash-head::after {
    background:
        radial-gradient(circle, #FB923C 0%, #F97316 13%, #EA580C 21%, rgb(234 88 12 / .55) 27%, rgb(234 88 12 / .2) 37%, rgb(234 88 12 / .06) 46%, transparent 54%),
        repeating-conic-gradient(from 8deg, rgb(251 146 60 / .16) 0deg 5deg, transparent 5deg 15deg);
    mix-blend-mode: normal;
}
body.app-x .page-head, body.app-x .hero-x, body.app-x .dash-head {
    background:
        radial-gradient(110% 150% at 100% 0%, rgb(234 88 12 / .12) 0%, transparent 40%),
        linear-gradient(115deg, var(--hero-blue-1) 0%, var(--hero-blue-2) 55%, var(--hero-blue-3) 100%);
}


/* ═════════════════════════════════════════ popup for "add new" (forms.js) === */
.kpop-open body { overflow: hidden; }
.kpop-shade {
    position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1.2rem;
    background: rgb(11 24 52 / .5); backdrop-filter: blur(2px); animation: kpop-in .14s ease-out;
}
.kpop {
    width: min(64rem, 100%); height: min(88vh, 60rem); display: flex; flex-direction: column;
    background: #F4F7FC; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgb(11 24 52 / .35);
}
.kpop-head {
    display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem .75rem 1.3rem; color: #fff;
    background: linear-gradient(115deg, #0E3FA8, #1453D6 60%, #2F6BE8); border-bottom: 3px solid #EA580C;
}
.kpop-head b { font-size: 1.02rem; font-weight: 650; }
.kpop-x { margin-left: auto; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .15); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.kpop-x:hover { background: rgb(255 255 255 / .28); }
.kpop-max { margin-left: auto; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .15); color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.kpop-max:hover { background: rgb(255 255 255 / .28); }
.kpop-max + .kpop-x { margin-left: .4rem; }
/*  full screen: the whole window, no frame around it  */
.kpop-shade.is-full { padding: 0; }
.kpop.kpop-full { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
.kpop-body { position: relative; flex: 1; }
.kpop-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F4F7FC; }
.kpop-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #6B7A93; }
@keyframes kpop-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 40rem) { .kpop-shade { padding: 0; } .kpop { height: 100vh; border-radius: 0; } }

/* the page as it shows inside the popup: just the form */
html.in-popup .apphead, html.in-popup .side, html.in-popup .side-scrim, html.in-popup .appfoot { display: none !important; }
html.in-popup body.app-x .shell { display: block; }
html.in-popup body.app-x .appmain { padding-block: 1rem 2rem; }
html.in-popup body.app-x .shell .wrap { width: calc(100% - 2rem); }
html.in-popup body.app-x .page-head { display: none; }
/*  The page's own tab bar (Vendors / Purchase orders / …) leads to other
    screens; inside a popup that would read as "saved" and close it. The
    popup is just the form.  */
html.in-popup body.app-x .chainnav { display: none; }
/*  The form fills the popup: the page's width caps (.panel 34rem,
    .panel-wide 52rem) are for a full screen, where a form stretched across
    92rem would be hard to read. In the popup they only left a blank strip.  */
html.in-popup body.app-x .shell .wrap { width: calc(100% - 2.2rem); }
html.in-popup body.app-x .panel { max-width: none; padding: 1.3rem 1.4rem; }
html.in-popup body.app-x .panel h3 { margin-bottom: .7rem; }

/* ═════════════════════════════════ searchable dropdowns (forms.js) === */
.kcombo { position: relative; display: inline-block; min-width: 11rem; max-width: 100%; vertical-align: middle; }
.fields .kcombo, .field .kcombo { display: block; width: 100%; }
.kcombo-native { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.kcombo-btn {
    width: 100%; min-height: 2.625rem; padding: .45rem 2rem .45rem .75rem; text-align: left; cursor: pointer;
    border: 1px solid var(--rule, #D6E0F5); border-radius: 8px; background: #fff; color: var(--text, #1F2937); font: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
}
.kcombo-btn::after { content: ""; position: absolute; right: .8rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.3rem; border: solid #1453D6; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kcombo-btn:hover { border-color: #9DB7EE; }
.kcombo-btn:focus-visible, .kcombo.is-open .kcombo-btn { outline: none; border-color: #1453D6; box-shadow: 0 0 0 3px rgb(20 83 214 / .15); }
.kcombo-btn.kcombo-empty { color: #8492A6; }
.kcombo-btn.kcombo-invalid { border-color: var(--bad, #B91C1C); box-shadow: 0 0 0 3px rgb(185 28 28 / .12); }
.kcombo-btn:disabled { opacity: .6; cursor: default; }
.kcombo-panel {
    display: none; position: absolute; z-index: 60; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(28rem, 92vw);
    background: #fff; border: 1px solid #D6E0F5; border-radius: 10px; box-shadow: 0 14px 34px rgb(15 23 42 / .16); overflow: hidden;
}
.kcombo.is-open .kcombo-panel { display: block; }
.kcombo-search { display: block; width: 100%; padding: .55rem .75rem; border: 0; border-bottom: 1px solid #E6ECF3; font: inherit; background: #F7F9FE; }
.kcombo-search:focus { outline: none; background: #fff; }
.kcombo-list { max-height: 16rem; overflow-y: auto; padding: .25rem; }
.kcombo-opt { padding: .45rem .65rem; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcombo-opt.blank { color: #8492A6; }
.kcombo-opt.hi { background: #EEF3FF; color: #0E3FA8; }
.kcombo-opt.on { font-weight: 650; }
.kcombo-opt.on::before { content: "✓ "; color: #EA580C; }
.kcombo-none { padding: .6rem .7rem; color: #8492A6; }
.kcombo-new {
    display: block; width: 100%; padding: .55rem .75rem; border: 0; border-top: 1px solid #E6ECF3; text-align: left; cursor: pointer;
    background: #FFF7ED; color: #C2410C; font: inherit; font-weight: 650;
}
.kcombo-new:hover { background: #FFEDD5; }
.kcombo-new-inline { display: inline-block; width: auto; margin-top: .35rem; border: 1px solid #FED7AA; border-radius: 8px; padding: .3rem .7rem; }


/* ═════════════════════════════ Sr. No. column and ⋮ row menus (site.js, rowmenu.js) === */
table.grid th.srno, table.grid td.srno { width: 3.2rem; text-align: center; color: #6B7A93; font-variant-numeric: tabular-nums; }
table.grid td.srno { font-size: .82rem; }
table.grid th.rmenu-col, table.grid td.rmenu-cell { width: 3rem; text-align: right; }
.rmenu { position: relative; display: inline-block; }
.rmenu-btn {
    width: 2.1rem; height: 2.1rem; border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: #4A5670; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.rmenu-btn:hover, .rmenu.is-open .rmenu-btn { background: #EEF3FF; border-color: #D6E0F5; color: #0E3FA8; }
.rmenu-list {
    display: none; position: absolute; z-index: 70; right: 0; top: calc(100% + 4px); min-width: 12.5rem; padding: .3rem;
    background: #fff; border: 1px solid #D6E0F5; border-radius: 10px; box-shadow: 0 14px 34px rgb(15 23 42 / .18); text-align: left;
}
.rmenu.up .rmenu-list { top: auto; bottom: calc(100% + 4px); }
.rmenu.is-open .rmenu-list { display: block; }
.rmenu-list hr { border: 0; border-top: 1px solid #E6ECF3; margin: .3rem 0; }
.rmenu-list form { display: block; margin: 0; }
.rmenu-item {
    display: block; width: 100%; padding: .5rem .7rem; border: 0; border-radius: 7px; background: none; text-align: left;
    color: #1F2937; font: inherit; font-size: .9rem; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.rmenu-item:hover { background: #EEF3FF; color: #0E3FA8; }
.rmenu-item.danger { color: var(--bad, #B91C1C); }
.rmenu-item.danger:hover { background: #FEE2E2; color: #991B1B; }
@media print { table.grid .rmenu-col, table.grid .rmenu-cell { display: none; } }


/* ═════════════════════════════════════ fields: one look, never overflowing === */
/*  Stacked cards had nothing between them.  */
body.app-x .panel + .panel { margin-top: 1rem; }

/*  A grid cell may shrink below its content's width - otherwise one wide
    dropdown pushed the whole row past the card's edge.  */
.fields > * { min-width: 0; }
.fields .kcombo, .field .kcombo { min-width: 0; }

/*  Every input, select and textarea looks like a form field wherever it sits.
    Only those inside .field were styled; the loose ones (a row's quick "log
    the call" form, a filter) fell back to the browser's thin grey box.
    :where() gives this no weight at all, so every specific rule still wins.  */
:where(body.app-x) :where(input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color], [type=submit], [type=button], [type=reset], [type=image]), select, textarea) {
    font: inherit; font-size: .92rem; color: var(--text, #1F2937);
    min-height: 2.625rem; padding: .45rem .7rem;
    background-color: #fff; border: 1px solid var(--rule, #D6E0F5); border-radius: 8px;
}
:where(body.app-x) :where(input, select, textarea):focus { outline: none; border-color: #1453D6; box-shadow: 0 0 0 3px rgb(20 83 214 / .15); }
:where(body.app-x) :where(textarea) { min-height: 4.5rem; }

/*  A plain dropdown (a short fixed list the search box is not worth) gets the
    same blue chevron as the searchable ones, instead of the browser's arrow.  */
body.app-x select:not([multiple]):not([size]):not(.kcombo-native):not(.apphead select) {
    appearance: none; -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231453D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: .75rem .5rem;
}


/* ═══════════════════════ sign in / open an account: a page of its own === */
/*  _AuthLayout - no app frame, no menu. Brand panel on the left (the hero's
    blue with the deep-orange sun), the one form on the right; stacked on a
    phone, where the brand becomes a band above the form.  */
body.auth-x {
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display: var(--sans);
    margin: 0; min-height: 100vh; background: #F4F7FC; font-family: var(--sans);
}
body.auth-x h1, body.auth-x h2, body.auth-x h3 { font-family: var(--sans); letter-spacing: -.01em; }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth-brand {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: 1.4rem; padding: 2.4rem 2.8rem; color: #fff;
    background: linear-gradient(155deg, #0B2A6B 0%, #0E3FA8 45%, #1453D6 100%);
}
.auth-brand::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #F59E0B, #EA580C); }
.auth-brand::after {
    content: ""; position: absolute; z-index: -1; right: -7rem; top: -7rem; width: 24rem; height: 24rem; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #FB923C 0%, #F97316 16%, #EA580C 27%, rgb(234 88 12 / .5) 36%, rgb(234 88 12 / .16) 50%, transparent 66%);
}
.auth-logo { display: flex; align-items: center; gap: .85rem; color: #fff; text-decoration: none; }
.auth-logo img { width: 3.3rem; height: 3.3rem; flex: none; filter: drop-shadow(0 2px 5px rgb(0 0 0 / .3)); }
.auth-logo span { display: flex; flex-direction: column; }
.auth-logo b { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.auth-logo b em { font-style: normal; color: #7ED957; }
.auth-logo small { font-size: .88rem; color: #C9D6EA; }
.auth-pitch { margin-top: auto; max-width: 27rem; }
.auth-pitch h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.22; font-weight: 700; color: #fff; }
.auth-pitch ul { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .7rem; color: #DCE6FF; font-size: .98rem; }
.auth-pitch li { display: flex; align-items: center; gap: .7rem; }
.auth-pitch li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 4px rgb(245 158 11 / .2); }
.auth-motto { color: #FDBA74; font-weight: 600; letter-spacing: .02em; }
.auth-brand .madeby { justify-content: flex-start; text-align: left; color: #C9D6EA; }
.auth-brand .madeby b { color: #fff; }
.auth-brand .madeby img { background: #fff; border-radius: 5px; padding: 2px; width: 22px; height: 22px; }

.auth-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem 1.25rem; }
.auth-card {
    width: min(27rem, 100%); background: #fff; border: 1px solid #E6ECF3; border-radius: 16px;
    box-shadow: 0 14px 36px rgb(15 23 42 / .08); padding: 1.8rem 1.9rem 1.7rem;
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; margin-bottom: 1.4rem; background: #EEF3FF; border-radius: 10px; }
.auth-tabs a { text-align: center; padding: .5rem; border-radius: 8px; color: #4A5670; font-weight: 600; font-size: .92rem; text-decoration: none; }
.auth-tabs a:hover { color: #0E3FA8; }
.auth-tabs a.on { background: #fff; color: #0E3FA8; box-shadow: 0 1px 3px rgb(15 23 42 / .14); }
.auth-card .page-head { display: block; margin: 0 0 1.2rem; padding: 0; border: 0; }
.auth-card .page-head .eyebrow { color: #EA580C; font-weight: 600; }
.auth-card .page-head h1 { font-size: 1.6rem; color: #0B1B3A; margin: .25rem 0 .35rem; }
.auth-card .page-head p { display: block; color: #5B6781; font-size: .9rem; max-width: none; }
.auth-card .page-head p a { color: #1453D6; }
.auth-card .panel { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.auth-card .fields { gap: .9rem; }
.auth-card .field input { min-height: 2.75rem; }
.auth-card .field input:focus { border-color: #1453D6; box-shadow: 0 0 0 3px rgb(20 83 214 / .15); outline: none; }
.auth-card .form-foot { flex-direction: column; align-items: stretch; gap: .9rem; margin-top: .6rem; }
.auth-card .form-foot .btn { width: 100%; justify-content: center; padding-block: .75rem; font-size: 1rem; }
.auth-card .form-foot .aside { margin: 0; text-align: center; }
.auth-card .form-foot .aside a { color: #1453D6; font-weight: 600; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.1rem; }
.auth-home { color: #5B6781; font-size: .88rem; text-decoration: none; }
.auth-home:hover { color: #0E3FA8; }
.auth-credit { display: none; }

@media (max-width: 56rem) {
    .auth { grid-template-columns: 1fr; min-height: 0; }
    .auth-brand { padding: 1.2rem 1.25rem 1.3rem; gap: .6rem; }
    .auth-brand::after { width: 13rem; height: 13rem; right: -4.5rem; top: -4.5rem; }
    .auth-pitch, .auth-motto, .auth-brand .madeby { display: none; }
    .auth-side { justify-content: flex-start; padding: 1.4rem 1rem 2rem; }
    .auth-card { padding: 1.4rem 1.25rem; }
    .auth-credit { display: block; margin-top: .6rem; }
}


/* ═════════════════════════ ☰ folds the side menu to a strip of icons === */
/*  The button is always there (it was phone-only). On a wide screen it folds
    the menu to a narrow strip of its icons and the page takes the rest of the
    width. Hovering the strip (or tabbing into it) opens the whole menu over
    the page, every name readable; moving away folds it again. html.side-hidden
    is set from the browser's memory before the page draws (_AppLayout), so a
    folded menu stays folded on every page until ☰ is pressed again.  */
body.app-x .apphead .menubtn { display: block; flex: none; }
body.app-x .apphead .menubtn:hover { background: rgb(255 255 255 / .1); }
@media (min-width: 62.01rem) {
    html.side-hidden body.app-x .shell { grid-template-columns: 4.6rem minmax(0, 1fr); }
    html.side-hidden body.app-x .side {
        width: 4.6rem; padding-inline: .55rem; z-index: 35;
        overflow-x: hidden; scrollbar-width: none;
        transition: width .16s ease, box-shadow .16s ease;
    }
    html.side-hidden body.app-x .side-nav a { padding-inline: 1.1rem; white-space: nowrap; }
    /*  the names stay in place, just unseen - so nothing jumps when it opens  */
    html.side-hidden body.app-x .side-nav a span,
    html.side-hidden body.app-x .side-group,
    html.side-hidden body.app-x .side-motto span { opacity: 0; white-space: nowrap; transition: opacity .1s ease; }
    html.side-hidden body.app-x .side-motto { padding-inline: .7rem; }
    html.side-hidden body.app-x .side-motto svg { width: 2rem; height: 2rem; }

    /*  opened by hover or keyboard: full width, over the page  */
    html.side-hidden body.app-x .side:hover,
    html.side-hidden body.app-x .side:focus-within {
        width: 15.5rem; padding-inline: .9rem; overflow-y: auto; scrollbar-width: thin;
        box-shadow: 10px 0 28px rgb(8 20 45 / .35);
        transition-delay: .08s;
    }
    html.side-hidden body.app-x .side:hover .side-nav a,
    html.side-hidden body.app-x .side:focus-within .side-nav a { padding-inline: .75rem; }   /* icon stays put: .9 + .75 = .55 + 1.1 */
    html.side-hidden body.app-x .side:hover .side-nav a span,
    html.side-hidden body.app-x .side:hover .side-group,
    html.side-hidden body.app-x .side:hover .side-motto span,
    html.side-hidden body.app-x .side:focus-within .side-nav a span,
    html.side-hidden body.app-x .side:focus-within .side-group,
    html.side-hidden body.app-x .side:focus-within .side-motto span { opacity: 1; transition-delay: .1s; }
}


/* ═══════════════════════════════════════════ the hero stays compact === */
/*  One row on a wide screen: the titles take the room, the buttons keep
    theirs on the right - a long description no longer pushes them onto a
    row of their own. The description is one line (the whole of it shows on
    hover - site.js adds it as a tooltip). ".acts" is styled like ".actions"
    (some pages use one, some the other).  */
@media (min-width: 48rem) {
    body.app-x .page-head { flex-wrap: nowrap; padding-block: .8rem; }
    body.app-x .page-head .titles { flex: 1 1 auto; }
    body.app-x .page-head p {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
        overflow: hidden; max-width: none;
    }
}
body.app-x .page-head > .acts, body.app-x .page-head > .actions {
    flex: none; margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end;
}


/* ═══════════════════════════════════════════ forms use the page's width === */
/*  A wide form card (.panel-wide) was capped at 52rem and left the right
    half of the screen empty. It now takes the page's width, like the
    popup; the 12-column .fields grid spreads the fields across it.  */
body.app-x .panel-wide { max-width: none; }

/*  Settings: full width, compact. Sections sit two to a row (.wide ones take
    the whole row), with tighter padding and headings.  */
body.app-x .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
body.app-x .settings-grid > .panel { max-width: none; margin: 0; padding: 1rem 1.2rem 1.1rem; }
body.app-x .settings-grid > .wide { grid-column: 1 / -1; }
body.app-x .settings-grid .panel h3 { font-size: 1rem; margin: 0; }
body.app-x .settings-grid .panel > p.muted { font-size: .82rem; margin: .1rem 0 .7rem; }
body.app-x .settings-grid .fields { gap: .65rem .8rem; }
body.app-x .settings-grid .field label { font-size: .8rem; }
body.app-x .settings-save { position: sticky; bottom: 0; margin: 0; padding: .7rem 0; background: var(--ground); z-index: 5; }
@media (max-width: 70rem) { body.app-x .settings-grid { grid-template-columns: minmax(0, 1fr); } }

/*  the logo and signature previews  */
.brand-pic .brand-box { height: 5.2rem; display: grid; place-items: center; border: 1px dashed #C9D6EE; border-radius: 10px; background: #fff; padding: .4rem; }
.brand-pic .brand-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-pic input[type=file] { font-size: .82rem; }
.brand-pic .check { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 500; }


/* ═══════════════════════════════════════════════════ land acquisition === */
/*  stage and checklist chips (Choices.LandStages / LandCheckStatuses)  */
.st-identified, .st-pending, .st-notapplied                   { background: var(--info-wash); color: var(--info); }
.st-surveyed, .st-duediligence, .st-received, .st-onhold, .st-applied { background: var(--warn-wash); color: var(--warn); }
.st-agreement, .st-registered, .st-conversion                 { background: #FFEDD5; color: #C2410C; }
.st-possession, .st-projectready, .st-verified                { background: var(--ok-wash, #DCFCE7); color: var(--ok, #15803D); }
.st-dropped, .st-issue                                        { background: var(--bad-wash); color: var(--bad); }
.st-na                                                        { background: #F1F5F9; color: #64748B; }

/*  the acres-acquired bar on a requirement  */
.acres-bar { height: .55rem; border-radius: 999px; background: #E6ECF3; overflow: hidden; display: flex; }
.acres-bar i { display: block; height: 100%; }
.acres-bar .a1 { background: #16A34A; } .acres-bar .a2 { background: #F59E0B; } .acres-bar .a3 { background: #93C5FD; }
.acres-key { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--text-3); margin-top: .35rem; }
.acres-key i { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }

/*  the pipeline strip on the land dashboard  */
.land-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr)); gap: .5rem; }
.land-pipe a { display: block; padding: .7rem .8rem; border-radius: 10px; background: #fff; border: 1px solid #E6ECF3; text-decoration: none; color: inherit; }
.land-pipe a:hover { border-color: #9DB7EE; }
.land-pipe b { display: block; font-size: 1.15rem; color: #0F1F38; }
.land-pipe span { font-size: .78rem; color: var(--text-3); }

/*  checklist rows: item, status select, note - one compact form per row  */
.checklist { display: grid; gap: .35rem; }
.checklist form { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .35rem .5rem; align-items: center; padding: .45rem .55rem; border-radius: 8px; }
.checklist .item { grid-column: 1 / -1; }   /* the item on its own line, its status, note and Save under it */
.checklist form:nth-child(odd) { background: #F8FAFD; }
.checklist .item { font-size: .88rem; }
.checklist .item small { display: block; color: var(--text-3); font-size: .74rem; }
@media (max-width: 30rem) { .checklist form { grid-template-columns: 1fr; } }

/*  A red status line that stays on the page. .notice-bad is a refusal -
    alert.js pops it up; a standing state (a dropped parcel, a feature
    waiting for an upgrade) must not pop up on every visit.  */
.notice-stay { background: var(--bad-wash); border-left: 3px solid var(--bad); color: var(--text); }


/* ═══════════════════════════════════════════ a project's complete summary === */
.sum-sec { margin-bottom: 1rem; scroll-margin-top: 5.5rem; }
.sum-sec .kpis { margin-bottom: .9rem; }
.sum-h { font-size: .95rem; margin: 1rem 0 .4rem; color: #1E3A8A; }
@media print {
    .sum-sec { break-inside: auto; box-shadow: none; border: 1px solid #DDE3EE; }
    .sum-sec .kpis, .sum-sec tr { break-inside: avoid; }
    body.app-x .hero-x { box-shadow: none; }
}

/* ── reports hub and report books (scripts 30-32) ───────────────────────── */
.hub-find { min-width: 16rem; }
.hub-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.hub-star { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border-radius: var(--radius); text-decoration: none; color: #fff;
            background: linear-gradient(135deg, #0E3FA8, #1453D6 60%, #2F6BE8); border-left: 5px solid #F59E0B; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); }
.hub-star b { font-size: .98rem; }
.hub-star span { font-size: .8rem; color: #DCE6FF; line-height: 1.35; }
.hub-star:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.hub-card .hub-blurb { font-size: .8rem; margin: -.35rem 0 .6rem; line-height: 1.4; }
.hub-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.hub-links a { display: block; padding: .28rem .45rem; border-radius: 6px; font-size: .86rem; text-decoration: none; color: #1E3A8A; }
.hub-links a:hover { background: #EEF3FF; }
.book-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.book-toc a { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule);
              font-size: .8rem; text-decoration: none; color: #1E3A8A; }
.book-toc a:hover { background: #EEF3FF; }
.book-toc a span { font-size: .72rem; color: var(--text-3); }
.book-kpis { margin-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.book-kpis .kpi .n { font-size: 1.35rem; }
section[id] { scroll-margin-top: 5rem; }
.st-high, .st-breached, .st-short, .st-late, .st-loss { background: var(--bad-wash); color: var(--bad); }
.st-medium, .st-over, .st-notsold, .st-lowstock { background: #FFEDD5; color: #C2410C; }
.st-low, .st-within, .st-matched, .st-ok, .st-completed { background: var(--ok-wash); color: var(--ok); }
.st-notissued, .st-planned, .st-nil, .st-notplanned { background: var(--mute-wash); color: var(--text-3); }
.st-delayed { background: var(--bad-wash); color: var(--bad); }
@media print { .book-toc, .hub-find { display: none; } }
.period-presets { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.period-presets a { padding: .22rem .6rem; border-radius: 999px; font-size: .78rem; text-decoration: none; color: #1E3A8A; background: #EEF3FF; }
.period-presets a.on, .period-presets a:hover { background: #1453D6; color: #fff; }
@media print { .period-presets { display: none; } }
.st-pass, .st-covered { background: var(--ok-wash); color: var(--ok); }
.st-fail, .st-critical, .st-fatal, .st-notok { background: var(--bad-wash); color: var(--bad); }
.st-observations, .st-major, .st-nearlimit { background: #FFEDD5; color: #C2410C; }
.st-minor, .st-pending { background: var(--warn-wash); color: var(--warn); }
.st-na { background: var(--mute-wash); color: var(--text-3); }
.num-in { width: 8.5rem; text-align: right; }
.st-settled { background: var(--ok-wash); color: var(--ok); }
.st-credit { background: #FFEDD5; color: #C2410C; }
.bank-import { margin: 0 0 .6rem; }
.bank-import > summary, details > summary.btn { cursor: pointer; list-style: none; }
.bank-matchbar { justify-content: space-between; margin-bottom: .5rem; padding: .4rem .6rem; background: #EEF3FF; border-radius: 8px; }