/*
 * ============================================================
 * Bright Horizon Solar — Admin panel Light, quiet interface.
 * ============================================================
 */

:root {
    --navy:        #0A1A2E;
    --navy-soft:   #1B2E48;
    --gold:        #C9A227;
    --gold-soft:   #F6EDD4;

    --bg:          #F5F6F8;
    --surface:     #FFFFFF;
    --surface-2:   #FAFBFC;
    --border:      #E3E7ED;
    --border-2:    #EDF0F4;

    --text:        #1A2434;
    --text-2:      #55617A;
    --muted:       #8A93A5;

    --green:       #17835A;
    --green-soft:  #E4F5EE;
    --blue:        #1F6FD0;
    --blue-soft:   #E7F0FC;
    --red:         #C0392B;
    --red-soft:    #FBEAE8;
    --amber:       #9A6B00;
    --amber-soft:  #FDF3E0;

    --radius:      10px;
    --radius-sm:   7px;
    --shadow:      0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-lg:   0 8px 28px rgba(16, 24, 40, .10);
    --sidebar-w:   244px;

    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --head: "Montserrat", var(--sans);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--head); margin: 0; font-weight: 600; letter-spacing: -.01em; }

/* ----------------------------------------------------------- layout */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    padding: 20px 20px 18px;
    border-bottom: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    gap: 11px;
}
.brand-mark {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--navy);
    display: grid; place-items: center;
    flex: 0 0 34px;
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-text { min-width: 0; }
.brand-name {
    font-family: var(--head);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--navy); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.nav-label {
    font-size: 10px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    padding: 12px 10px 6px;
}
.nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-2); font-weight: 500; font-size: 13.5px;
    transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--navy); color: #fff; }
.nav a.active svg { opacity: 1; }
.nav a svg { width: 17px; height: 17px; opacity: .65; flex: 0 0 17px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--border-2); }
.user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
}
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gold-soft); color: #8A6D12;
    display: grid; place-items: center;
    font-size: 11.5px; font-weight: 700; flex: 0 0 32px;
}
.user-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-role { font-size: 11px; color: var(--muted); text-transform: capitalize; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    height: 62px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 17px; font-weight: 600; }
.topbar .crumb { font-size: 12px; color: var(--muted); }
.topbar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topbar-left h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; gap: 9px; align-items: center; flex: 0 0 auto; }

/* The drawer handle. */
.topbar .nav-toggle { display: none; }

.nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(10, 26, 46, .45);
    opacity: 0; z-index: 39;
    transition: opacity .18s ease;
}
.nav-backdrop[hidden] { display: none; }
.nav-open .nav-backdrop { opacity: 1; }

.content { padding: 26px 28px 60px; max-width: 1320px; width: 100%; }

/* ----------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans); font-size: 13.5px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-2); border-color: #D4DAE3; text-decoration: none; }
.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-soft); border-color: var(--navy-soft); }

.btn-gold { background: var(--gold); border-color: var(--gold); color: #2A2205; font-weight: 600; }
.btn-gold:hover { background: #B8931F; border-color: #B8931F; }

.btn-danger { color: var(--red); border-color: #F0D5D1; background: #fff; }
.btn-danger:hover { background: var(--red-soft); border-color: #E8BDB7; }

.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-icon { padding: 7px; }
.btn-icon svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------- surfaces */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-2);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.card-head h2 { font-size: 14.5px; font-weight: 600; }
.card-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; letter-spacing: -.02em; }
.page-head p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ----------------------------------------------------------- stats */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 17px 18px;
    box-shadow: var(--shadow);
}
.stat-label {
    font-size: 11px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
    display: flex; align-items: center; gap: 7px;
}
.stat-label svg { width: 14px; height: 14px; }
.stat-value {
    font-family: var(--head);
    font-size: 25px; font-weight: 600; letter-spacing: -.02em;
    margin-top: 8px; color: var(--navy);
}
.stat-value.sm { font-size: 20px; }
.stat-note { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat-accent { border-left: 3px solid var(--gold); }

/* ----------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    text-align: left; padding: 11px 16px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #FBFCFD; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .row-title { font-weight: 600; color: var(--text); }
table.data .row-sub { font-size: 12px; color: var(--muted); }

/* --- accounts --- */
.user-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.user-cell .row-title { display: flex; align-items: center; gap: 7px; }
/* An account that can no longer sign in still has to be readable — it is
   greyed, not hidden, because its name is on documents. */
table.data tr.is-off td { opacity: .55; }
table.data tr.is-off:hover td { opacity: .8; }
/* A control that is deliberately unavailable, shown so the row does not
   silently lose a column of buttons. */
.btn.is-muted { opacity: .4; cursor: default; pointer-events: none; }

.role-choices { display: grid; gap: 8px; }
.role-choice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.role-choice:hover { border-color: #D4DAE3; background: var(--surface-2); }
.role-choice input { margin-top: 3px; accent-color: var(--navy); flex: 0 0 auto; }
.role-choice:has(input:checked) { border-color: var(--navy); background: var(--surface-2); }
.role-choice strong { display: block; font-size: 13.5px; }
.role-choice em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.role-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; }

/* ----------------------------------------------------------- badges */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge-muted   { background: #EFF1F4; color: #5A6478; }
.badge-info    { background: var(--blue-soft);  color: var(--blue); }
.badge-success { background: var(--green-soft); color: var(--green); }
.badge-danger  { background: var(--red-soft);   color: var(--red); }
.badge-gold    { background: var(--gold-soft);  color: #8A6D12; }

.pill {
    display: inline-block; padding: 2px 8px; border-radius: 5px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-2);
}

/* ----------------------------------------------------------- forms */

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* A field switched off by another answer — the display above would otherwise
   beat the hidden attribute's own rule and the field would stay on screen. */
.field[hidden] { display: none; }
.field > label {
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
    display: flex; align-items: center; gap: 6px;
}
.req { color: var(--red); }
.hint { font-size: 12px; color: var(--muted); }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=password], input[type=search], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--sans); font-size: 13.5px; color: var(--text);
    transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy-soft);
    box-shadow: 0 0 0 3px rgba(27, 46, 72, .09);
}
input::placeholder, textarea::placeholder { color: #AEB6C4; }
textarea { resize: vertical; min-height: 82px; line-height: 1.6; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93A5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #E4A79E; }
.field-error { font-size: 12px; color: var(--red); }

/* prefix/suffix on money and unit inputs */
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .affix {
    position: absolute; font-size: 12.5px; color: var(--muted);
    pointer-events: none; font-weight: 500;
}
.input-affix .affix-l { left: 11px; }
.input-affix .affix-r { right: 11px; }
.input-affix input.has-l { padding-left: 42px; }
.input-affix input.has-r { padding-right: 58px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; }

/* computed / read-only outputs */
.computed {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 9px 11px;
    border: 1px dashed #D8D2BC;
    border-radius: var(--radius-sm);
    background: #FDFBF4;
    font-variant-numeric: tabular-nums;
}
.computed .val {
    font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--navy);
    flex: 1; min-width: 0; width: 100%;
    /*
     * The figure is an input that reads as a result until somebody types in it:
     * no border, no fill, no arrows, and the box around it does the framing.
     */
    border: 0; background: transparent; padding: 0; margin: 0;
    font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.computed .val::-webkit-outer-spin-button,
.computed .val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.computed .val:focus { outline: none; }
.computed .cur { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.computed .unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.computed:focus-within { border-color: var(--navy); background: #fff; }

.computed.total { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }
.computed.total .val { font-size: 19px; }
.computed.negative .val { color: var(--red); }

/* A figure the rep set themselves. Solid rather than dashed, because nothing
   is being derived any more, and the badge above it says so in words. */
.computed.overridden { border-style: solid; border-color: var(--navy); background: #fff; }

/* The badge doubles as the way back to auto, but only while there is
   something to undo — otherwise it is a label and says so by not reacting. */
.pill-auto { font: inherit; font-size: 11.5px; cursor: pointer; }
.pill-auto:disabled { cursor: default; opacity: 1; }
.pill-auto.on {
    border-color: var(--navy); background: var(--navy); color: #fff;
}
.pill-auto.on::after { content: " ×"; opacity: .7; }
.pill-auto.on:hover { background: var(--red); border-color: var(--red); }

/* ----------------------------------------------------------- sections */

.form-section { margin-bottom: 18px; }
.section-head {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-2);
}
.section-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--navy); color: #fff;
    display: grid; place-items: center;
    font-size: 11.5px; font-weight: 700; flex: 0 0 26px;
}
/* The intake form counts its own sections rather than being handed a number. */
form { counter-reset: formsection; }
.form-section { counter-increment: formsection; }
.form-section[hidden] { display: none; }
.section-num.auto::before { content: counter(formsection); }

.section-head h2 { font-size: 14.5px; }
.section-head p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }

/* sticky summary bar on the intake form */
.form-footer {
    position: sticky; bottom: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    padding: 13px 28px;
    margin: 22px -28px -60px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    z-index: 15;
    transition: opacity .15s ease, visibility .15s ease;
}

/*
 * The bar and the signature pads want the same strip of a phone screen, and
 * the signature is the one you cannot give blind.
 */
.signing .form-footer { opacity: 0; visibility: hidden; pointer-events: none; }

.live-summary { display: flex; gap: 26px; flex-wrap: wrap; }
.live-item .k {
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.live-item .v {
    font-family: var(--head); font-size: 16px; font-weight: 600;
    color: var(--navy); font-variant-numeric: tabular-nums;
}
.live-item .v.gold { color: #8A6D12; }

/* ----------------------------------------------------------- alerts */

.alert {
    padding: 11px 15px; border-radius: var(--radius-sm);
    font-size: 13.5px; margin-bottom: 18px;
    display: flex; align-items: flex-start; gap: 9px;
    border: 1px solid transparent;
}
.alert svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.alert-success { background: var(--green-soft); color: #0F6B48; border-color: #BFE6D5; }
.alert-error   { background: var(--red-soft);   color: #9E2E22; border-color: #F0CFCA; }
.alert-info    { background: var(--blue-soft);  color: #1A5AA8; border-color: #C9DEF8; }
.alert-warn    { background: var(--amber-soft); color: #8A6218; border-color: #EFD9AF; }

/* ----------------------------------------------------------- misc */

.toolbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 14px 20px; border-bottom: 1px solid var(--border-2);
}
.toolbar .grow { flex: 1; min-width: 190px; }

.empty { text-align: center; padding: 54px 24px; }
.empty svg { width: 40px; height: 40px; color: #C6CEDA; margin-bottom: 12px; }
.empty h3 { font-size: 15.5px; margin-bottom: 5px; }
.empty p { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }

.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.type-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 10px;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
a.type-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); border-color: #D4DAE3; text-decoration: none; }
.type-card h3 { font-size: 15px; color: var(--text); }
.type-card p { margin: 0; font-size: 13px; color: var(--text-2); flex: 1; }
.type-meta { display: flex; gap: 8px; flex-wrap: wrap; }

.divider { height: 1px; background: var(--border-2); margin: 18px 0; }
.row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.inline-form { display: inline; }

.copy-link {
    display: flex; gap: 8px; align-items: center;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 7px 7px 7px 12px;
}
.copy-link input { border: none; background: transparent; padding: 0; font-size: 12.5px; color: var(--text-2); }
.copy-link input:focus { box-shadow: none; }

/* ----------------------------------------------------------- login */

.login-wrap {
    min-height: 100vh; display: grid; place-items: center;
    padding: 24px;
    background:
        radial-gradient(1100px 480px at 50% -180px, rgba(201, 162, 39, .13), transparent 70%),
        var(--navy);
}
.login-card {
    width: 100%; max-width: 396px;
    background: var(--surface);
    border-radius: 14px;
    padding: 34px 32px 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
}
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand .mark {
    width: 52px; height: 52px; border-radius: 13px;
    background: var(--navy); margin: 0 auto 14px;
    display: grid; place-items: center;
}
.login-brand .mark svg { width: 27px; height: 27px; }
.login-brand h1 {
    font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--navy); font-weight: 700;
}
.login-brand .rule {
    width: 42px; height: 2px; background: var(--gold);
    margin: 9px auto 8px;
}
.login-brand p { margin: 0; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.login-card .field { margin-bottom: 15px; }
.login-card .btn { width: 100%; padding: 11px; }
.login-foot {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-2);
    text-align: center; font-size: 12px; color: var(--muted);
}

/* ----------------------------------------------------------- builder */

.builder-section {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); margin-bottom: 14px; box-shadow: var(--shadow);
}
.builder-section > header {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 17px; border-bottom: 1px solid var(--border-2);
    background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0;
}
.builder-section > header h3 { font-size: 14px; flex: 1; }
.builder-section > header .sub { font-size: 12px; color: var(--muted); font-weight: 400; }

.field-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 17px; border-bottom: 1px solid var(--border-2);
}
.field-row:last-child { border-bottom: none; }
.field-row:hover { background: #FBFCFD; }
.field-row .drag { color: #C6CEDA; cursor: grab; display: flex; }
.field-row .drag svg { width: 15px; height: 15px; }
.field-row .fname { font-weight: 600; font-size: 13.5px; }
.field-row .fkey {
    font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
    color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px;
}
.field-row .fmeta { flex: 1; min-width: 0; }
.formula-chip {
    font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
    color: #8A6D12; background: var(--gold-soft);
    border-radius: 4px; padding: 2px 7px;
    display: inline-block; margin-top: 3px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----------------------------------------------------------- modal */

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(16, 24, 40, .45);
    display: none; place-items: center; padding: 24px; z-index: 100;
    overflow-y: auto;
}
.modal-backdrop.open { display: grid; }
.modal {
    background: var(--surface); border-radius: 12px;
    width: 100%; max-width: 620px;
    box-shadow: var(--shadow-lg);
    margin: auto;
}
.modal-head {
    padding: 17px 22px; border-bottom: 1px solid var(--border-2);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { font-size: 15px; }
.modal-body { padding: 22px; max-height: 68vh; overflow-y: auto; }
.modal-foot {
    padding: 15px 22px; border-top: 1px solid var(--border-2);
    display: flex; justify-content: flex-end; gap: 9px;
    background: var(--surface-2); border-radius: 0 0 12px 12px;
}
.modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; display: flex; }
.modal-close svg { width: 19px; height: 19px; }

/* formula helper */
.key-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; max-height: 116px; overflow-y: auto; }
.key-chip {
    font-family: ui-monospace, Consolas, monospace; font-size: 11px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 2px 7px; cursor: pointer; color: var(--text-2);
}
.key-chip:hover { background: var(--gold-soft); border-color: #E4D3A0; color: #8A6D12; }

/* --------------------------------------------- catalog & bill history */

/* Product picker: the catalog dropdown carries the choice, the small
   quantity box beside it carries the count. */
.product-pick { display: flex; gap: 8px; align-items: stretch; }
.product-pick select { flex: 1; min-width: 0; }
.product-pick .qty {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); padding: 0 10px 0 0; flex: 0 0 auto;
}
.product-pick .qty input {
    width: 44px; border: none; background: none; text-align: right;
    padding: 8px 4px 8px 10px; font-variant-numeric: tabular-nums;
}
.product-pick .qty input:focus { outline: none; box-shadow: none; }
.product-pick .qty:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.product-pick .qty span { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* What was picked: the photo beside its figures. */
.product-chosen { display: flex; gap: 10px; align-items: center; margin-top: 8px; min-height: 18px; }
.product-shot { flex: 0 0 auto; }
.product-shot.has-shot {
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-2);
    display: grid; place-items: center; overflow: hidden;
}
.product-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

.product-meta {
    font-size: 12px; color: var(--text-2); min-width: 0;
    font-variant-numeric: tabular-nums;
}
.product-chosen:has(.product-meta:empty):not(:has(.has-shot)) { display: none; }

/* Twelve months of billing, entered as a table. */
.billtable-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.billtable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
table.billtable th {
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
table.billtable td { padding: 4px 6px; border-bottom: 1px solid var(--border-2); }
table.billtable tbody tr:last-child td { border-bottom: none; }
table.billtable input { width: 100%; border: 1px solid transparent; background: none; padding: 7px 8px; }
table.billtable input:hover { border-color: var(--border); }
table.billtable input:focus { border-color: var(--gold); background: var(--surface); }
table.billtable input.m { font-weight: 500; }
table.billtable td.r, table.billtable th.r {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--text-2); padding-right: 14px; white-space: nowrap;
}
table.billtable tfoot th {
    background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: none;
    color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------ table fields on a form */
/*
 * Two shapes, one look: a grid the crew adds rows to (installers, materials)
 * and a matrix they tick down (work done, commissioning checks).
 */

.gridtable-wrap, .matrix-wrap {
    overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
table.gridtable, table.matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
table.gridtable { min-width: 520px; }
table.matrix    { min-width: 420px; }

table.gridtable th, table.matrix th {
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
table.gridtable td, table.matrix td { padding: 4px 6px; border-bottom: 1px solid var(--border-2); }
table.gridtable tbody tr:last-child td, table.matrix tbody tr:last-child td { border-bottom: none; }

table.gridtable input, table.matrix td.note input {
    width: 100%; border: 1px solid transparent; background: none; padding: 7px 8px;
}
table.gridtable input:hover, table.matrix td.note input:hover { border-color: var(--border); }
table.gridtable input:focus, table.matrix td.note input:focus {
    border-color: var(--gold); background: var(--surface);
}

table.gridtable th.rownum, table.gridtable td.rownum {
    width: 30px; padding-left: 12px; text-align: right;
    color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.grid-sign { display: block; padding: 7px 8px; color: var(--muted); font-size: 11.5px; font-style: italic; }

.btn-row { margin-top: 9px; }

/* The ticks. A whole cell is the target, not the 13px circle inside it. */
table.matrix th.pick, table.matrix td.pick { width: 84px; text-align: center; }
table.matrix td.item { padding: 8px 12px; line-height: 1.4; }
table.matrix td.item .n {
    display: inline-block; min-width: 18px; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
table.matrix label.tick { display: block; padding: 8px 0; cursor: pointer; }
table.matrix label.tick input { width: 16px; height: 16px; cursor: pointer; }
table.matrix tbody tr:hover { background: var(--surface-2); }

/* ------------------------------------------------ signing on site */
/* A box the size of a signature, not a form control. */

.signbox {
    position: relative;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.signbox.is-signed { border-style: solid; border-color: var(--border); }
.signbox.is-sketch canvas { height: 260px; }
.signbox canvas {
    display: block; width: 100%; height: 150px;
    touch-action: none;            /* the finger draws, it does not scroll */
    cursor: crosshair;
}
.sign-hint {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12.5px;
    pointer-events: none;
}
.sign-tools {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 0 8px 8px;
}

/* The stored mark, wherever a record is read back. */
img.sig-img { max-height: 54px; max-width: 100%; width: auto; display: block; }

/* Spec sheet rows on the equipment form. */
.spec-rows { display: flex; flex-direction: column; gap: 8px; }
.spec-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

/* Deactivated catalog rows stay readable but recede. */
table.data tr.dimmed td { opacity: .55; }

/* Label / value tables on the checklist summary. */
table.data.kv td.k { color: var(--text-2); width: 38%; }
table.data.kv td.v { font-weight: 500; }

/* ------------------------------------------- product photography */

/* Catalog list thumbnail. */
table.data th.thumb-col, table.data td.thumb-col { width: 62px; padding-right: 0; }
.thumb {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-2);
    display: grid; place-items: center; overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.is-empty { border-style: dashed; }
.thumb.is-empty svg { width: 18px; height: 18px; color: #C6CEDA; }

/* Upload control on the equipment form. */
.image-field { display: flex; gap: 16px; align-items: flex-start; }
.image-preview {
    flex: 0 0 auto;
    width: 132px; height: 132px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface-2);
    display: grid; place-items: center; overflow: hidden;
}
.image-preview img { width: 100%; height: 100%; object-fit: contain; }
.image-preview.is-empty { border-style: dashed; }
.image-preview.is-empty svg { width: 30px; height: 30px; color: #C6CEDA; }
.image-controls { flex: 1; min-width: 0; }
.image-controls input[type=file] {
    width: 100%; font-size: 13px; padding: 9px 10px;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); cursor: pointer;
}
.image-controls input[type=file]:hover { border-color: var(--gold); background: var(--gold-soft); }

/* ------------------------------------------------------------- charts */

.chart-figure { margin: 0; }
.chart-figure figcaption {
    font-size: 12px; color: var(--muted); margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
svg.chart { display: block; max-width: 100%; height: auto; font-family: var(--sans); }
.chart-empty {
    padding: 34px 16px; text-align: center; color: var(--muted); font-size: 13.5px;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
}

/* --------------------------------------------- page composition list */

.page-list { padding: 4px 0 8px; }
.pl-group {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); padding: 16px 20px 6px;
}
.pl-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 20px; border-bottom: 1px solid var(--border-2);
}
.pl-row:hover { background: var(--surface-2); }
.pl-row.off { opacity: .48; }
.pl-row.dragging { opacity: .35; background: var(--gold-soft); }
.pl-drag { color: #C6CEDA; cursor: grab; flex: 0 0 auto; }
.pl-drag svg { width: 16px; height: 16px; }
.pl-row[draggable="false"] .pl-drag { visibility: hidden; }
.pl-toggle { flex: 0 0 auto; display: grid; place-items: center; }
.pl-toggle input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
/* The second composition, edited in the same row as the first. */
.pl-sum {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px;
    cursor: pointer; user-select: none;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted);
}
.pl-sum input { width: 14px; height: 14px; accent-color: var(--gold); cursor: pointer; margin: 0; }
.pl-sum:hover { border-color: var(--gold); }
.pl-sum:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); color: #8A6D12; }
.pl-sum:has(input:disabled) { cursor: default; }

.pl-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pl-main input { border: 1px solid transparent; background: none; padding: 3px 6px; width: 100%; }
.pl-main input:hover { border-color: var(--border); background: var(--surface); }
.pl-main input:focus { border-color: var(--gold); background: var(--surface); }
.pl-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.pl-sub { font-size: 12px; color: var(--text-2); }
.pl-key { font-size: 10.5px; color: var(--muted); padding-left: 6px; }
.pl-expand { flex: 0 0 auto; }
.pl-expand.open { background: var(--navy); color: #fff; border-color: var(--navy); }
.pl-body { padding: 4px 20px 16px 60px; border-bottom: 1px solid var(--border-2); background: var(--surface-2); }
.pl-body label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.pl-body textarea { width: 100%; font-size: 12px; line-height: 1.55; }

/* ------------------------------------------------------ branding screen */

/*
 * Wording on the left, colours in the rail, and the three uploads together
 * in one card underneath.
 */
.set-cols  { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.set-stack { display: flex; flex-direction: column; gap: 16px; }

.set-pics   { margin-top: 16px; }
.set-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.set-slot h3 { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.set-slot > p { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.set-slot input[type="file"] { font-size: 12.5px; width: 100%; margin-top: 10px; }
.set-slot .hint { margin-top: 6px; }
.set-slot .check { margin-top: 9px; }

/* One height for all three tiles, so the row is a row and not a staircase. */
.set-shot {
    height: 150px; border: 1px solid var(--border); border-radius: 9px;
    overflow: hidden; display: grid; place-items: center; padding: 12px;
}
.set-shot img.fit { max-width: 100%; max-height: 100%; object-fit: contain; }
.set-shot.plain { background: #F4F6F9; }
.set-shot.fill  { padding: 0; }
.set-shot.fill img { width: 100%; height: 100%; object-fit: cover; }

.set-empty { text-align: center; color: var(--muted); font-size: 12px; }
.set-empty svg { width: 32px; height: 32px; margin-bottom: 6px; }

.set-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border-2); }

/* ------------------------------------------------ showcase: quotes & jobs */

.sc-list { padding: 4px 0; }
.sc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; border-bottom: 1px solid var(--border-2);
}
.sc-row:last-child { border-bottom: none; }
.sc-row:hover { background: var(--surface-2); }
.sc-row.off { opacity: .5; }
.sc-row.dragging { opacity: .35; background: var(--gold-soft); }
.sc-drag { color: #C6CEDA; cursor: grab; flex: 0 0 auto; }
.sc-drag svg { width: 16px; height: 16px; }
.sc-row[draggable="false"] .sc-drag { visibility: hidden; }
.sc-main { flex: 1; min-width: 0; }
/* A quote runs long; two lines of it is enough to recognise the card by. */
.sc-detail {
    margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-state { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1000px) {
    .image-field { flex-direction: column; }

    /*
     * The sidebar leaves the flow and becomes a drawer rather than being hidden
     * outright — hiding it left a phone with no navigation at all.
     */
    .sidebar {
        position: fixed; top: 0; left: 0;
        z-index: 40;
        width: min(84vw, var(--sidebar-w));
        flex-basis: auto;
        box-shadow: 0 18px 44px rgba(10, 26, 46, .22);
        transform: translateX(-100%);
        /*
         * Off-screen is not the same as gone: without this the closed drawer still
         * collects Tab stops and a keyboard walks through links it cannot see.
         */
        visibility: hidden;
        transition: transform .2s ease, visibility .2s;
    }
    .nav-open .sidebar { transform: translateX(0); visibility: visible; }
    /* Nothing behind the drawer scrolls while it is open. */
    .nav-open, .nav-open body { overflow: hidden; }

    .topbar .nav-toggle { display: inline-flex; }

    .content { padding: 20px 16px 60px; }
    .topbar { padding: 0 16px; }
    .form-footer { margin: 22px -16px -60px; padding: 12px 16px; }
    .col-3, .col-4, .col-6, .col-8 { grid-column: span 12; }
    .set-cols { grid-template-columns: 1fr; }
    .set-images { grid-template-columns: 1fr; }
    .sc-row { flex-wrap: wrap; }
    .sc-main { flex: 1 0 100%; order: 3; }
}

/*
 * On a phone the two topbar actions and the title cannot all keep their
 * words.
 */
@media (max-width: 620px) {
    .topbar { padding: 0 12px; gap: 10px; }
    .topbar h1 { font-size: 15.5px; }
    .topbar-actions .btn span { display: none; }
    .topbar-actions .btn { padding: 7px; }
    .topbar-actions .btn svg { width: 16px; height: 16px; }
    .content { padding: 18px 12px 60px; }
    .form-footer { margin: 22px -12px -60px; padding: 12px; }
}

/*
 * iOS zooms the whole page in when it focuses a control smaller than 16px,
 * and never zooms back out — the fields, the summary bar and everything else
 * stay magnified for the rest of the visit, which is most of what "it goes
 * huge on an iPhone" actually is.
 */
@media (max-width: 620px), (max-height: 460px) {
    input[type=text], input[type=email], input[type=tel], input[type=number],
    input[type=date], input[type=password], input[type=search], select, textarea {
        font-size: 16px;
    }
}

/*
 * The sticky summary bar, wherever there is no room for it: a phone held
 * upright, or a phone on its side — which has width to spare and no height
 * at all, and is how somebody signs when they want the line to be long.
 */
@media (max-width: 620px), (max-height: 460px) {
    .form-footer { padding-top: 9px; padding-bottom: 9px; gap: 9px; }

    .live-summary { gap: 6px 18px; }
    .live-summary:has(.live-item + .live-item) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        gap: 3px 14px;
        width: 100%;
    }
    .live-summary:has(.live-item + .live-item) .live-item {
        display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    }

    /*
     * The label gives way before the figure does: a clipped "Total investm…"
     * still reads, a clipped peso amount does not.
     */
    .live-item .k {
        flex: 0 1 auto; min-width: 0; line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .live-item .v { flex: 0 0 auto; font-size: 13.5px; line-height: 1.3; }

    .form-footer > .btn,
    .form-footer > div:not(.live-summary) { flex: 1 0 100%; }
    .form-footer > div:not(.live-summary) .btn { flex: 1 1 auto; }
}

/* Someone who has asked for less motion gets the drawer without the slide,
   and the summary bar without the fade. */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .nav-backdrop, .form-footer { transition: none; }
}

@media print {
    .sidebar, .topbar, .form-footer, .page-actions, .nav-backdrop { display: none !important; }
    svg.chart { break-inside: avoid; }
}

/* ------------------------------------------- field photographs */

/* Thumbnails of what is already stored on a photo field. */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.photo-thumb {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}
.photo-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Wraps rather than ellipsing. */
.photo-thumb figcaption {
    padding: 0 6px 5px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/*
 * Removal is a checkbox that takes effect on save, not a button that deletes
 * on the spot.
 */
.photo-drop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
}
.photo-drop input { margin: 0; }
.photo-thumb:has(.photo-drop input:checked) { border-color: var(--red); opacity: .55; }
.photo-thumb:has(.photo-drop input:checked) .photo-drop { color: var(--red); font-weight: 600; }

/* The caption carries three things now — who, when, and whether it is
   placed — so they are spaced apart rather than run together into one line
   that reads as a single sentence. */
.photo-thumb .photo-by { font-weight: 600; color: var(--text-2); }
.photo-thumb .photo-when { display: block; }

/* The control is the label, not the input. */
.photo-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
.photo-add {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.photo-add:hover { border-color: var(--blue); background: var(--blue-soft); }
.photo-input:focus-visible + .photo-add,
.photo-add:has(+ .photo-input:focus-visible) {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}
.photo-add svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--navy); opacity: .7; }
.photo-add-text { min-width: 0; }
.photo-add-text strong { display: block; font-size: 13.5px; color: var(--text); }
.photo-add-text small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* A field whose photographs get the date burnt into them says so before
   anybody takes one, because it changes what they point the camera at. */
.photo-add-stamped { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }
.photo-add-stamped:hover { border-color: var(--navy); background: var(--gold-soft); }
.photo-add-stamped svg { color: var(--navy); opacity: 1; }

/* Chosen but not yet uploaded. app.js rewrites the small line; this makes the
   panel look answered so nobody taps it twice. */
.photo-add.is-chosen { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.photo-add.is-chosen .photo-add-text small { color: var(--green); font-weight: 600; }

/* Camera or gallery, asked before the picker opens (app.js). */
.photo-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 26, 46, .45);
}
.photo-sheet[hidden] { display: none; }
.photo-sheet-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.photo-sheet-box button {
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.photo-sheet-box button:hover { border-color: var(--navy); }
.photo-sheet-box .photo-sheet-back { border-color: transparent; color: var(--muted); font-weight: 500; }
@media (min-width: 720px) { .photo-sheet { align-items: center; } }

/* ------------------------------------------- where a photograph was taken */

/*
 * The position is asked of the browser as the photographs are chosen,
 * because it cannot be recovered afterwards — Upload re-encodes every image
 * and EXIF does not survive that.
 */
.geo-status {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    line-height: 1.45;
}
.geo-working { background: var(--surface-2); color: var(--text-2); }
.geo-located { background: var(--green-soft); color: var(--green); }
.geo-vague   { background: var(--amber-soft); color: var(--amber); }

/* Failure is tappable — it retries. */
.geo-failed {
    background: var(--red-soft);
    color: var(--red);
    cursor: pointer;
}
.geo-map { margin-left: auto; font-weight: 600; white-space: nowrap; }

.geo-fallback { margin-top: 8px; }
.geo-fallback label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}
.geo-fallback textarea { width: 100%; }

/* On a stored thumbnail, under the uploader's name. Deliberately quiet when
   the position is there and deliberately not when it is missing. */
.geo-pin { color: var(--green); font-weight: 600; }
.geo-pin-vague { color: var(--amber); }
.geo-pin-missing { color: var(--red); font-weight: 600; cursor: help; }

/* ------------------------------------------- the job a form is filed against */

/* What is already on file for the picked customer. */
.job-context {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.job-context-head {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 8px;
}
.job-context-row + .job-context-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-2);
}
.job-context-meta {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Deliberately small. These are for recognition — "that is the roof" — not
   for inspection; the link opens the full photograph. */
.job-context-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.job-context-shots img {
    width: 68px;
    height: 51px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: block;
}
.job-context-shots a:hover img { border-color: var(--blue); }

/* ------------------------------------------- where a record sits in the flow */

/*
 * Ocular → Checklist → Proposal → Accepted → Installation, with the steps
 * this customer has actually reached filled in.
 */
.flow-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.flow-step {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    white-space: nowrap;
}
.flow-step.is-done {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
    font-weight: 600;
}
.flow-arrow { color: var(--border); }

/* ------------------------------------------------------------ statements */
/*
 * A `note` field: the confirmation a customer signs under, the clauses of a
 * contract.
 */
.statement {
    padding: 11px 14px; margin: 0 0 12px;
    border-left: 3px solid var(--gold, #C9A227);
    border-radius: 0 6px 6px 0;
    background: #F7F9FC;
    font-size: 12.5px; line-height: 1.62; color: #34405A;
}
.statement:last-child { margin-bottom: 0; }
.statement h4 {
    margin: 0 0 6px; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--navy, #0E2A47);
}
.statement p { margin: 0 0 6px; }
.statement p:last-child { margin-bottom: 0; }
.statement p.b { position: relative; padding-left: 15px; }
.statement p.b::before {
    content: "•"; position: absolute; left: 4px;
    color: var(--gold, #C9A227); font-weight: 700;
}

/* A statement the reader has to tick. */
.statement.is-ack { padding-bottom: 8px; }
.statement.is-done { border-left-color: var(--green, #17835A); background: #F3FAF6; }
.statement .ack {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid rgba(10, 26, 46, .09);
    font-size: 12.5px; font-weight: 600; color: var(--navy, #0E2A47);
    cursor: pointer;
}
.statement .ack input { width: 17px; height: 17px; margin: 0; flex: 0 0 17px; cursor: pointer; }
.statement .ack em { font-style: normal; font-weight: 500; color: var(--muted, #6C7789); }
.field.invalid .statement { border-left-color: var(--red, #B3261E); background: #FDF4F3; }
.statement .ack-said {
    margin-top: 9px; padding-top: 8px;
    border-top: 1px solid rgba(10, 26, 46, .09);
    font-size: 12px; font-weight: 600; color: var(--green, #17835A);
}
.statement .ack-said.is-open { color: var(--red, #B3261E); }
/* What the job picker loaded into the equipment table, said under the picker
   so it is visible without scrolling down to the table itself. */
.job-context-kit { font-weight: 600; color: var(--navy, #0E2A47); }

/*
 * ---------------------------------------------------------------- stock ----
 * The warehouse count, wherever it shows: a dropdown inside a table row, the
 * movement ledger on a record, and the on-hand column in the equipment list.
 */

/* A catalog dropdown sitting in a grid row. */
table.gridtable select {
    width: 100%; border: 1px solid transparent; background: none;
    padding: 6px 8px; font: inherit; color: inherit;
    border-radius: 6px; cursor: pointer;
}
table.gridtable select:hover { border-color: var(--border); }
table.gridtable select:focus { border-color: var(--gold); background: var(--surface); }

/* Movements, on the record that caused them. */
table.data td.num.stock-out { color: var(--text); }
table.data td.num.stock-in  { color: var(--green); font-weight: 600; }

/* The on-hand figure in the equipment list. */
.stock-level { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.stock-level.is-untracked { color: var(--muted); font-weight: 500; }
.stock-level.is-low  { color: #9A6212; }
.stock-level.is-none { color: var(--red); }
.stock-unit { font-weight: 500; color: var(--muted); font-size: 12px; }

/* ------------------------------------------- public content (migration 032) */

/* Three kinds behind three links, not a JavaScript tab widget. */
.tabstrip {
    display: flex;
    gap: 2px;
    margin-bottom: 18px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.tabstrip a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    color: var(--text-2); font-weight: 500; font-size: 13.5px;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.tabstrip a:hover { background: #fff; color: var(--text); text-decoration: none; }
.tabstrip a.active { background: var(--navy); color: #fff; }

.tab-count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--border-2);
    color: var(--text-2);
    font-size: 11px; font-weight: 600;
}
.tabstrip a.active .tab-count { background: rgba(255,255,255,.18); color: #fff; }
.tabstrip .tab-label { font-weight: 400; opacity: .75; }
.tabstrip .tab-label:empty { display: none; }
@media (max-width: 640px) { .tabstrip .tab-label { display: none; } }

/*
 * An address is read as one string, so the fixed part sits inside the box
 * rather than in a hint underneath it.
 */
.input-prefix {
    display: flex; align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}
.input-prefix:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 26, 46, .07); }
.input-prefix > span {
    display: flex; align-items: center;
    padding: 0 2px 0 11px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}
.input-prefix > input {
    flex: 1; min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 2px;
}

/* "optional", beside a label. Quieter than the red asterisk it sits opposite,
   because the useful signal on a form is which fields are compulsory. */
.opt {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted);
}

/*
 * The list rows are the showcase's own — .sc-list and .sc-row above, clamp
 * included.
 */

/* ----------------------------------------------- the appearance picker */

/* Radio cards, not dropdowns. */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}
.theme-set { min-width: 0; }
.theme-set .nav-label { padding: 0 0 8px; }
.theme-opts { display: flex; flex-direction: column; gap: 6px; }

.theme-opt {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.theme-opt:hover { border-color: var(--blue); background: var(--surface-2); }
.theme-opt.is-on { border-color: var(--navy); background: var(--surface-2); }
.theme-opt:has(input:checked) { border-color: var(--navy); background: var(--surface-2); }
.theme-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--blue-soft); }

/* The radio itself is the accessible control and the tile is its label, so
   it stays in the tab order and the arrow keys still move between options —
   it is simply not the thing being looked at. */
.theme-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

/* "Aa" set in the face on offer. A font name in the current font tells you
   nothing about the font. */
.theme-spec {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 6px;
    background: var(--navy); color: #fff;
    font-size: 17px; font-weight: 600;
    line-height: 1;
}
.theme-opt.is-on .theme-spec,
.theme-opt:has(input:checked) .theme-spec { background: var(--gold); color: var(--navy); }

/* A miniature of the real screen: the page colour, a card on it, and the
   hairline that separates them. */
.theme-swatch {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.theme-swatch > span {
    display: block;
    width: 22px; height: 15px;
    border-radius: 3px;
    border: 1px solid;
}

/* Three rows at the spacing the setting produces. */
.theme-rows {
    display: flex; flex-direction: column; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.theme-rows i { display: block; height: 3px; border-radius: 2px; background: var(--muted); }
.theme-rows-comfortable i + i { margin-top: 6px; }
.theme-rows-compact i + i { margin-top: 3px; }

.theme-text { min-width: 0; }
.theme-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.theme-text small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

@media (max-width: 700px) {
    .theme-grid { grid-template-columns: 1fr; gap: 18px; }
}

/*
 * ============================================================
 * THE DASHBOARD'S CHARTS
 *
 * ============================================================
 */

.dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* -------------------------------------------------------------- funnel */

/* Horizontal, because the stage names are words. */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.funnel-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 110px;
    gap: 14px;
    align-items: center;
}
.funnel-key { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* The dot repeats the bar's colour beside its name, so identity is carried
   by the word and the colour agrees with it — never by the colour alone. */
.funnel-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.funnel-key strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.funnel-key small  { display: block; font-size: 11.5px; color: var(--muted); }

.funnel-track { min-width: 0; }
.funnel-track svg { display: block; width: 100%; height: 18px; }

.funnel-val { text-align: right; }
.funnel-val strong {
    display: block;
    font-size: 14px; font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.funnel-val small { display: block; font-size: 11.5px; color: var(--muted); }

/* Where work leaves the funnel. */
.funnel-lost {
    display: flex; align-items: center; gap: 9px;
    margin-top: 16px; padding-top: 13px;
    border-top: 1px solid var(--border-2);
    font-size: 13px; color: var(--text-2);
}
.funnel-lost svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--red); }
.funnel-lost strong { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------- the two charts */

/* Small multiples: same categories, same width, own scale each. */
.charts-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.chart { margin: 0; min-width: 0; }
.chart figcaption { margin-bottom: 6px; }
.chart-title {
    display: block;
    font-family: var(--head);
    font-size: 13.5px; font-weight: 600;
    color: var(--text);
}
.chart-sub { display: block; font-size: 11.5px; color: var(--muted); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Values wear text ink, never the mark's colour. */
.chart-value {
    font-family: var(--sans);
    font-size: 11px; font-weight: 600;
    fill: var(--text);
}
.chart-value.is-zero { fill: var(--muted); font-weight: 500; }

.chart-tick {
    font-family: var(--sans);
    font-size: 10.5px;
    fill: var(--muted);
    letter-spacing: .03em;
}
.chart-tick.is-now { fill: var(--text-2); font-weight: 600; }

/* The hit target is the whole slot, so a three-pixel column in a quiet
   month can still be pointed at. */
.mark { cursor: default; outline: none; }
.mark:hover path, .mark:focus-visible path { filter: brightness(.92); }
.mark:focus-visible rect:first-child {
    stroke: var(--blue);
    stroke-width: 2;
    rx: 4;
}

/*
 * One line under both charts, naming the only thing the emphasis colour
 * means.
 */
.chart-key {
    display: flex; align-items: center; gap: 7px;
    margin: 14px 0 0;
    font-size: 11.5px; color: var(--muted);
}
.chart-key-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }

/* ---------------------------------------------------------- the tooltip */

/*
 * An SVG chart on a screen is interactive whether or not anybody wrote the
 * code for it.
 */
.chart-tip {
    position: absolute;
    z-index: 60;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--navy);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .22);
}

/* ------------------------------------------------------ what the field did */

.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li + li { border-top: 1px solid var(--border-2); }
.worklist a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 2px;
    color: var(--text-2); font-size: 13.5px;
}
.worklist a:hover { color: var(--text); text-decoration: none; }
.worklist strong {
    font-family: var(--head);
    font-size: 18px; font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
/* A zero is still a number somebody is reading. */
.worklist strong.is-zero { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------- narrow */

@media (max-width: 1000px) {
    .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    /* The stage name goes above its bar rather than beside it. At 150px of
       label on a 360px screen the bar has nowhere left to grow. */
    .funnel-row { grid-template-columns: minmax(0, 1fr) 100px; row-gap: 6px; }
    .funnel-key { grid-column: 1 / -1; }
    .charts-2 { gap: 26px; }
}

/* ============================================================
   The guide — the ? beside a button, the "you are here" strip,
   the Ultimate Guide page, and the pre-save modal.
   ============================================================ */

/* ----------------------------------------------------------- the ? */

.tip {
    flex: 0 0 auto;
    width: 20px; height: 20px; padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center;
}
.tip:hover { border-color: var(--gold); background: var(--gold-soft); color: #8A6D12; }
.tip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.tip-pop {
    position: absolute; z-index: 300;
    width: min(320px, calc(100vw - 20px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
}
.tip-pop h4 { font-size: 13.5px; margin-bottom: 5px; }
.tip-pop p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tip-pop .tip-next {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--border-2);
    color: var(--text-2);
}
.tip-pop .tip-next strong { color: var(--text); }
.tip-pop .tip-link { display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 500; }

/* ------------------------------------------------- you are here strip */

.guide-strip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 10px 14px;
    background: var(--gold-soft);
    border: 1px solid #EADFBE;
    border-radius: var(--radius);
    font-size: 12.5px; color: #6C5510;
}
.guide-step {
    flex: 0 0 auto;
    padding: 2px 9px; border-radius: 999px;
    background: #fff; border: 1px solid #E3D3A6;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.guide-line { flex: 1 1 320px; min-width: 0; }
.guide-line strong { color: #4A3A09; }
.guide-next { color: #8A6D12; font-weight: 500; }
.guide-more { flex: 0 0 auto; font-weight: 500; color: #8A6D12; text-decoration: underline; }

/* --------------------------------------------------- the guide page */

.flow-strip a.flow-step { color: var(--muted); }
.flow-strip a.flow-step:hover { border-color: var(--gold); text-decoration: none; }
.flow-strip a.flow-step.is-done { color: var(--green); }

.guide-stalls { display: grid; gap: 10px; }
.guide-stall {
    padding: 11px 14px;
    background: var(--amber-soft);
    border: 1px solid #F0DFBC;
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.guide-stall strong { display: block; color: var(--amber); font-family: var(--head); }
.guide-stall span { color: var(--text-2); }

.guide-card { scroll-margin-top: 18px; }
.guide-card.is-locked { opacity: .72; }
.guide-head { display: flex; align-items: flex-start; gap: 14px; }
.guide-no {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--navy); color: var(--gold);
    font-family: var(--head); font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.guide-head h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }

.guide-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.guide-box {
    padding: 11px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
}
.guide-box .k, .guide-how .k {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.guide-box p { margin: 0; font-size: 13px; color: var(--text-2); }

.guide-how ol { margin: 6px 0 0; padding-left: 20px; }
.guide-how li { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }

.guide-watch {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: 16px; padding: 10px 13px;
    background: var(--blue-soft);
    border-radius: var(--radius-sm);
    font-size: 12.5px; color: #1B4E92;
}
.guide-watch svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

.guide-faq details {
    border-bottom: 1px solid var(--border-2);
    padding: 10px 0;
}
.guide-faq details:last-child { border-bottom: none; }
.guide-faq summary {
    cursor: pointer; font-weight: 500; font-size: 13.5px;
    list-style: none;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::before { content: '+ '; color: var(--gold); font-weight: 700; }
.guide-faq details[open] summary::before { content: '\2212 '; }
.guide-faq p { margin: 7px 0 0 16px; font-size: 13px; color: var(--text-2); }

/* --------------------------------------------- what is still missing */

.miss-list { list-style: none; margin: 14px 0 0; padding: 0; }
.miss-section {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    margin: 14px 0 5px;
}
.miss-section:first-child { margin-top: 0; }
.miss-go {
    width: 100%; text-align: left; cursor: pointer;
    padding: 9px 12px; margin-bottom: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    border-radius: var(--radius-sm);
    font-family: var(--sans);
}
.miss-go:hover { background: var(--red-soft); border-color: var(--red); }
.miss-go strong { display: block; font-size: 13.5px; color: var(--text); }
.miss-go span { font-size: 12.5px; color: var(--text-2); }

/* The field the modal sent them to, held long enough to be found. */
.field.is-wanted {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
    border-radius: var(--radius-sm);
}

@media (max-width: 560px) {
    .miss-modal .modal-foot { flex-direction: column-reverse; align-items: stretch; }
    .guide-head { flex-wrap: wrap; }
}

/* The contract's loan timeline, under Payment Schedule (contract-pay.js). */
.pay-timeline { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pay-timeline-head { padding: 8px 12px; font-size: 12.5px; font-weight: 600; background: rgba(0, 0, 0, .03); }
.pay-timeline-body { max-height: 280px; overflow: auto; }
.pay-timeline table.data { margin: 0; font-size: 12.5px; }
.pay-timeline .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Searchable dropdowns (searchable.js). The select stays underneath as the value. */
.ss { position: relative; flex: 1; min-width: 0; }
.ss-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; bottom: 0; left: 0; }
.ss-input {
    width: 100%; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.ss-list {
    position: fixed; z-index: 1000; overflow: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.ss-group {
    position: sticky; top: 0; padding: 7px 12px 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border-2);
}
.ss-item { padding: 7px 12px; font-size: 13.5px; cursor: pointer; line-height: 1.35; }
.ss-item:hover, .ss-item.is-active { background: var(--blue-soft); }
.ss-item.is-on { font-weight: 600; color: var(--navy); }
.ss-item.is-none { color: var(--muted); }
.ss-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* Page links under a list (partials/pager.php). */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border-2); }
.pager-count { font-size: 13px; color: var(--text-2); }
.pager-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pager .is-current { background: var(--navy); border-color: var(--navy); color: #fff; cursor: default; }
.pager-gap { color: var(--muted); padding: 0 2px; }

/* While a filtered list is on its way (livesearch.js). */
.is-loading-list [data-live-region] { opacity: .55; transition: opacity .15s; }

/* A summed column under a table field (Grid "total": true). */
.gridtable tfoot td { padding: 8px 10px; font-weight: 700; border-top: 2px solid var(--border); }
.gridtable tfoot td.grid-total { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); }

/* After-sales: open the next issue, or take the last one back (issues.js). */
.issue-add { margin-top: 16px; }
.issue-remove { margin: 16px 0 0 8px; }