:root {
    --navy-950: #071426;
    --navy-900: #0b1d35;
    --navy-800: #122a49;
    --gold: #d7aa43;
    --gold-light: #f2d58e;
    --silver: #aeb9c8;
    --ink: #142033;
    --muted: #697386;
    --line: #dfe5ec;
    --surface: #ffffff;
    --canvas: #f4f6f9;
    --success: #167752;
    --danger: #a93636;
    --shadow: 0 18px 50px rgba(7, 20, 38, 0.1);
}

.cashup-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.cashup-review-grid article {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--canvas);
}

.cashup-review-grid span,
.cashup-review-grid small {
    display: block;
    color: var(--muted);
}

.cashup-review-grid strong {
    display: block;
    font-size: 1.35rem;
}

@media (max-width: 640px) {
    .cashup-review-grid { grid-template-columns: 1fr; }
}

/* Milestone 31: communication and payment integrations */
.integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-bottom:1.25rem}
.integration-card{align-content:start}
.integration-fields{margin:0;padding:0;display:grid;gap:1rem;border:0;min-width:0}
.integration-title{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.integration-title h2{margin-bottom:.25rem}
.integration-title p{margin-top:0}
.copy-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center}
.payment-link-created{border:2px solid var(--accent,#d9aa2b);margin-bottom:1.25rem}
.payment-page{min-height:100vh;padding:2rem 1rem}
.payment-card{width:min(620px,100%)}
.payment-card .brand{display:inline-flex;margin-bottom:2rem;color:inherit}
.payment-request-total{display:grid;gap:.35rem;padding:1.25rem;border-radius:14px;background:var(--surface-soft,#f3f6fa);margin:1.25rem 0}
.payment-request-total strong{font-size:clamp(1.8rem,6vw,2.8rem);color:var(--navy,#071b36)}
.payment-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border,#dbe2ea)}
.status-connected,.status-paid{background:#dff6e9;color:#05603a}
.status-disconnected,.status-expired,.status-cancelled{background:#edf0f4;color:#536174}
.status-error,.status-failed{background:#fde6e3;color:#9b241c}
.health-status-pass{background:#dff5eb;color:#0c5138}.health-status-warning{background:#fff0d0;color:#6e4d00}.health-status-fail{background:#fde6e3;color:#9b241c}.health-steps{display:grid;gap:.7rem;padding-left:1.4rem}.health-steps li{padding-left:.25rem}
.status-created,.status-pending,.status-processing{background:#fff1c7;color:#755300}
@media(max-width:800px){.integration-grid{grid-template-columns:1fr}.copy-field{grid-template-columns:1fr}.copy-field .button{width:100%}}

[data-theme="dark"] {
    --ink: #e8edf4;
    --muted: #aab5c5;
    --line: #293a50;
    --surface: #111f32;
    --canvas: #091525;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--navy-800); }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.85rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.04em; }
h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.025em; }

.brand {
    color: #fff;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-decoration: none;
}
.brand span { color: var(--gold); }
.eyebrow {
    margin-bottom: .5rem;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.muted { color: var(--muted); }

.auth-shell { min-height: calc(100vh - 54px); display: grid; grid-template-columns: minmax(320px, .85fr) minmax(480px, 1.15fr); }
.brand-panel {
    min-height: 680px;
    padding: clamp(2rem, 6vw, 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgba(215, 170, 67, .2), transparent 28%),
        linear-gradient(145deg, var(--navy-950), var(--navy-800));
}
.brand-panel h1 { max-width: 580px; margin-bottom: 1.25rem; }
.brand-panel p:not(.eyebrow) { max-width: 530px; color: #ccd5e0; font-size: 1.06rem; }
.panel-note { margin-bottom: 0; font-size: .9rem !important; }
.form-panel { padding: 3rem clamp(1.5rem, 6vw, 6rem); display: grid; place-items: center; background: var(--surface); }
.form-card { width: min(100%, 480px); }
.form-card.wide { width: min(100%, 720px); }
.form-stack, .form-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.form-grid { grid-template-columns: 1fr 1fr; }
.full { grid-column: 1 / -1; }
label { display: grid; gap: .45rem; color: #39465a; font-size: .9rem; font-weight: 700; }
input, select {
    width: 100%;
    min-height: 48px;
    padding: .75rem .9rem;
    border: 1px solid #ccd4df;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
input:focus, select:focus { outline: 3px solid rgba(215, 170, 67, .25); border-color: var(--gold); }
details.content-card { margin-top: 1rem; }
details.content-card > summary { cursor: pointer; }
details.content-card[open] > summary { margin-bottom: 1rem; }
code { padding: .12rem .35rem; border-radius: 4px; color: var(--ink); background: var(--canvas); }
.button {
    min-height: 48px;
    padding: .75rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--navy-900);
    border-radius: 8px;
    color: #fff;
    background: var(--navy-900);
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { background: var(--navy-800); }
.button-secondary { min-height: 40px; padding: .55rem .85rem; color: var(--navy-900); background: #fff; }
.form-switch { margin: 1.5rem 0 0; color: var(--muted); text-align: center; }
.form-switch a { font-weight: 800; }
.error-list { margin: 1.25rem 0; padding: .9rem 1rem; border-left: 4px solid var(--danger); border-radius: 6px; color: #742626; background: #fff0f0; }
.error-list ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.flash { position: fixed; z-index: 20; top: 1rem; left: 50%; width: min(92vw, 560px); padding: .9rem 1rem; transform: translateX(-50%); border-radius: 8px; box-shadow: var(--shadow); }
.flash-success { color: #0c5138; background: #e8f8f1; border: 1px solid #9bd9c1; }
.flash-error { color: #742626; background: #fff0f0; border: 1px solid #e3acac; }
.site-footer { min-height: 54px; padding: 1rem 2rem; display: flex; justify-content: space-between; gap: 1rem; color: #6b7789; background: #fff; border-top: 1px solid var(--line); font-size: .85rem; }

.app-shell { min-height: calc(100vh - 54px); display: grid; grid-template-columns: 255px 1fr; }
.sidebar { padding: 2rem 1.2rem; color: #fff; background: var(--navy-950); }
.business-name { margin: .55rem 0 2.25rem; color: var(--silver); font-size: .88rem; overflow-wrap: anywhere; }
.sidebar nav { display: grid; gap: .35rem; }
.nav-label { margin: 1.2rem .75rem .3rem; color: #78889d; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { min-height: 43px; padding: .65rem .75rem; display: flex; align-items: center; justify-content: space-between; border-radius: 7px; color: #cbd4df; text-decoration: none; }
.nav-link.active { color: #fff; background: var(--navy-800); box-shadow: inset 3px 0 var(--gold); }
.nav-link.disabled { color: #8492a5; cursor: default; }
.theme-toggle { width: 100%; border: 0; font: inherit; cursor: pointer; background: rgba(255,255,255,.06); }
.global-theme-toggle{position:fixed;z-index:30;right:1rem;bottom:1rem;padding:.65rem .85rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--surface);box-shadow:var(--shadow);font:inherit;font-weight:800;cursor:pointer}
.registration-start{padding:1rem;border:1px solid var(--line);border-radius:10px}.registration-start legend{padding:0 .45rem;color:var(--ink);font-weight:800}.registration-plan-grid{margin:1rem 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.registration-plan{padding:.8rem;display:flex;grid-template-columns:none;gap:.55rem;border:1px solid var(--line);border-radius:8px;cursor:pointer}.registration-plan:has(input:checked){border-color:var(--gold);background:#fffbef}.registration-plan input{width:18px;min-height:18px}.registration-plan span,.registration-plan small{display:block}.registration-plan small{color:var(--muted);font-weight:400}.payment-registration-fields{margin-top:1rem}@media(max-width:700px){.registration-plan-grid{grid-template-columns:1fr}}[data-theme="dark"] .registration-plan:has(input:checked){background:#3c3216}
.nav-link small { padding: .1rem .4rem; border-radius: 999px; color: var(--gold-light); background: rgba(215, 170, 67, .12); font-size: .66rem; }
.dashboard { min-width: 0; padding: clamp(1.25rem, 4vw, 3rem); }
.topbar { margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar h1 { margin-bottom: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.account-area { display: flex; align-items: center; gap: .75rem; }
.role-badge, .status-badge { padding: .35rem .65rem; border-radius: 999px; color: #5f4711; background: #f9edcc; font-size: .78rem; font-weight: 800; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metric-card, .content-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 25px rgba(7, 20, 38, .04); }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card strong { display: block; margin: .55rem 0 .2rem; font-size: 1.85rem; letter-spacing: -.04em; }
.metric-card.featured { color: #fff; background: linear-gradient(140deg, var(--navy-900), var(--navy-800)); border-color: var(--navy-800); }
.metric-card.featured span, .metric-card.featured small { color: #c9d3df; }
.workspace-grid { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); gap: 1rem; }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.checklist { margin-top: 1.4rem; display: grid; gap: .7rem; }
.check { padding: .9rem; display: grid; grid-template-columns: 34px 1fr; gap: .8rem; border: 1px solid var(--line); border-radius: 9px; }
.check > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #edf1f5; font-weight: 800; }
.check.done > span { color: #fff; background: var(--success); }
.check.current { border-color: #dfc174; background: #fffbef; }
.check.current > span { color: var(--navy-950); background: var(--gold); }
.check p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.architecture-note > p:not(.eyebrow) { color: var(--muted); }
.architecture-note dl { margin: 1.4rem 0 0; }
.architecture-note dl div { padding: .7rem 0; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); }
.architecture-note dt { color: var(--muted); }
.architecture-note dd { margin: 0; font-weight: 800; text-align: right; }

@media (max-width: 980px) {
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .auth-shell { grid-template-columns: 1fr; }
    .brand-panel { min-height: 330px; padding: 2rem 1.4rem; }
    .panel-note { display: none; }
    .form-panel { padding: 2.5rem 1.25rem; }
    .form-grid { grid-template-columns: 1fr; }
    .full { grid-column: auto; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { padding: 1.2rem; }
    .business-name { margin-bottom: .8rem; }
    .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav-label { grid-column: 1 / -1; }
    .dashboard { padding: 1.2rem; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .summary-grid { grid-template-columns: 1fr; }
    .card-heading { flex-direction: column; }
    .site-footer { flex-direction: column; }
}

/* Public website */
.public-header {
    min-height: 76px;
    padding: .8rem clamp(1.2rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.96);
}
.dark-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--navy-950); }
.brand-mark { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 9px 2px 9px 2px; background: var(--gold); font-size: 1rem; letter-spacing: -.05em; }
.brand .brand-mark { color: var(--navy-950); }
.brand-word { color: inherit; }
.public-header nav { display: flex; align-items: center; gap: 1.5rem; }
.public-header nav a, .text-link { color: #46536a; font-size: .9rem; font-weight: 700; text-decoration: none; }
.header-actions, .hero-actions { display: flex; align-items: center; gap: .75rem; }
.button.compact { min-height: 40px; padding: .55rem .85rem; text-decoration: none; }
.public-main { overflow: hidden; background: #fff; }
.hero { padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 6vw, 6rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); background: linear-gradient(150deg, #fff 45%, #edf2f7); }
.hero-copy h1 { max-width: 720px; color: var(--navy-950); }
.hero-lead { max-width: 650px; color: var(--muted); font-size: 1.13rem; }
.hero-actions { margin-top: 1.7rem; }
.hero-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.button-outline { color: var(--navy-900); background: transparent; }
.fine-print { margin: .8rem 0 0; color: var(--muted); font-size: .83rem; }
.hero-dashboard { padding: 1.1rem; border: 1px solid #cfd8e3; border-radius: 18px; color: #fff; background: var(--navy-950); box-shadow: 0 35px 80px rgba(7,20,38,.24); transform: rotate(1deg); }
.preview-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; color: #d9e1ea; font-size: .85rem; }
.mini-logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px 2px 7px 2px; color: var(--navy-950); background: var(--gold); font-weight: 900; }
.preview-pill { padding: .25rem .55rem; border-radius: 999px; color: var(--gold-light); background: rgba(215,170,67,.14); }
.preview-metrics { margin: 1.1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.preview-metrics div { padding: 1rem; border-radius: 10px; background: var(--navy-800); }
.preview-metrics small, .preview-metrics strong { display: block; }
.preview-metrics small { color: #9bacbf; }
.preview-metrics strong { margin-top: .35rem; font-size: 1.4rem; }
.preview-panel { padding: 1rem; border-radius: 10px; color: var(--ink); background: #fff; }
.preview-title, .project-row { display: flex; justify-content: space-between; gap: 1rem; }
.preview-title { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.preview-title small { color: var(--muted); }
.project-row { padding: .8rem 0; border-bottom: 1px solid #edf0f4; font-size: .82rem; }
.project-row:last-child { border-bottom: 0; }
.project-row b { color: var(--success); font-size: .72rem; text-align: right; }
.trust-strip { padding: 1.1rem clamp(1.2rem, 6vw, 6rem); display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem 3rem; color: #d6dee8; background: var(--navy-900); font-size: .86rem; font-weight: 700; }
.public-section { padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 6vw, 6rem); }
.section-heading { max-width: 720px; margin-bottom: 2.5rem; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3.1rem); color: var(--navy-950); }
.section-heading > p:last-child { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.feature-grid article { padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.feature-grid article > span { color: var(--gold); font-size: .75rem; font-weight: 900; }
.feature-grid h3 { margin: .8rem 0 .45rem; color: var(--navy-950); }
.feature-grid p { margin-bottom: 0; color: var(--muted); }
.process-section { background: #f3f6f9; }
.process-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; list-style: none; }
.process-list li { padding: 1.3rem; background: #fff; border-top: 3px solid var(--gold); }
.process-list li > span { color: #9a741e; font-weight: 900; }
.process-list strong { display: block; margin: .7rem 0 .3rem; }
.process-list p { margin: 0; color: var(--muted); font-size: .9rem; }
.payment-list { display: flex; flex-wrap: wrap; gap: .7rem; }
.payment-list span { padding: .7rem 1rem; border: 1px solid #cdd6e1; border-radius: 999px; color: var(--navy-800); background: #f7f9fb; font-weight: 800; }
.pricing-section { background: var(--navy-950); }
.pricing-section .section-heading h2 { color: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.pricing-grid article { position: relative; padding: 1.6rem; border: 1px solid #29415f; border-radius: 13px; color: #d1dae5; background: var(--navy-900); }
.selectable-plan{display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.selectable-plan:hover{border-color:var(--gold);box-shadow:0 18px 38px rgba(0,0,0,.2);transform:translateY(-4px)}.selectable-plan ul{flex:1}.plan-select-button{margin-top:1rem;display:flex;justify-content:center;color:var(--navy-950)!important;background:var(--gold);border-color:var(--gold);text-decoration:none}
.pricing-grid article.recommended { border-color: var(--gold); transform: translateY(-8px); }
.pricing-grid h3 { color: #fff; font-size: 1.35rem; }
.price { display: flex; align-items: baseline; gap: .3rem; }
.price strong { color: #fff; font-size: 2.2rem; }
.pricing-grid ul { padding-left: 1.2rem; }
.plan-label { position: absolute; top: -13px; right: 18px; padding: .3rem .65rem; border-radius: 999px; color: var(--navy-950); background: var(--gold); font-size: .7rem; font-weight: 900; }
.trial-callout { margin-top: 2rem; padding: 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-radius: 13px; color: #fff; background: var(--navy-800); }
.trial-callout h2 { margin-bottom: .4rem; }
.trial-callout p:last-child { margin-bottom: 0; color: #c6d1de; }
.trial-callout a { display: inline-flex; align-items: center; flex: none; color: var(--navy-950); background: var(--gold); border-color: var(--gold); text-decoration: none; }
.public-contact { padding: 3rem clamp(1.2rem, 6vw, 6rem); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; color: #d4dde8; background: #050e1b; }
.public-contact > div { display: grid; align-content: start; gap: .55rem; }
.public-contact p { color: #91a0b3; }
.public-contact a:not(.brand) { color: #b9c5d4; text-decoration: none; overflow-wrap: anywhere; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 4.6rem; }
.password-control button { position: absolute; right: .45rem; top: 50%; min-width: 52px; padding: .38rem .5rem; transform: translateY(-50%); border: 0; border-radius: 6px; color: var(--navy-800); background: #eef2f6; font-weight: 800; cursor: pointer; }
.forgot-link { justify-self: end; margin-top: -.35rem; font-size: .86rem; font-weight: 800; }
.simple-auth-page { min-height: calc(100vh - 54px); padding: 3rem 1.2rem; display: grid; place-items: center; background: radial-gradient(circle at top, #eef2f6, #fff 60%); }
.auth-card { padding: 2rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.auth-card .brand { margin-bottom: 2rem; }
.auth-card h1 { font-size: 2rem; }
.success-box { margin: 1rem 0; padding: .9rem; border-left: 4px solid var(--success); border-radius: 6px; color: #0c5138; background: #e8f8f1; }
.local-test-box { margin: 1rem 0; padding: 1rem; border: 1px dashed #d1a63f; border-radius: 8px; background: #fffbef; }
.local-test-box p { margin: .3rem 0; color: var(--muted); }
.local-test-box a { font-weight: 800; }
.inline-button { display: inline-flex; align-items: center; text-decoration: none; }
.local-hint { margin: 1rem 0 0; padding: .65rem; border-radius: 6px; color: var(--muted); background: #f2f4f7; font-size: .84rem; }
.admin-shell { min-height: calc(100vh - 54px); display: grid; grid-template-columns: 260px 1fr; }
.admin-sidebar { padding: 2rem 1.2rem; color: #fff; background: var(--navy-950); }
.admin-sidebar > p { margin: .7rem 0 2rem; color: #8797ab; font-size: .85rem; }
.admin-sidebar nav { display: grid; gap: .35rem; }
.admin-sidebar nav a, .admin-sidebar nav span { padding: .7rem .75rem; border-radius: 7px; color: #aeb9c8; text-decoration: none; }
.admin-sidebar nav .active { color: #fff; background: var(--navy-800); }
.admin-main { min-width: 0; padding: clamp(1.25rem,4vw,3rem); }
.summary-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.table-card { margin-top: 1rem; padding: 0; overflow: hidden; }
.table-card > h2 {
    margin: 0;
    padding: 1.15rem 1rem;
    border-bottom: 1px solid var(--line);
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #f7f9fb; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
td { font-size: .9rem; }
td small { display: block; margin-top: .2rem; color: var(--muted); }
.status-active { color: #0c5138; background: #dff5eb; }
.status-suspended { color: #7b2c2c; background: #fde8e8; }
.status-inactive, .status-terminated { color: #6c3e14; background: #fff0d8; }
.table-action { padding: .45rem .65rem; border: 1px solid #cbd4df; border-radius: 6px; color: var(--navy-900); background: #fff; font-weight: 800; cursor: pointer; }
@media (max-width: 760px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar nav { grid-template-columns: 1fr 1fr; } .summary-grid.three { grid-template-columns: 1fr; } }

/* Organisation and access management */
.page-header { margin-bottom: 1.4rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-header h1 { margin-bottom: .35rem; font-size: clamp(1.8rem, 3vw, 2.45rem); }
.page-header p:last-child { margin-bottom: 0; color: var(--muted); }
.compact-form { margin-bottom: 1rem; }
.inline-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: .8rem; }
.record-form { max-width: 900px; }
.record-form > * + * { margin-top: 1.4rem; }
.form-note { padding: .75rem; border-radius: 7px; color: var(--muted); background: #f4f6f9; font-size: .88rem; }
.check-option { padding: 1rem; display: flex; grid-template-columns: none; align-items: flex-start; gap: .8rem; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; cursor: pointer; }
.check-option input, .permission-item input { width: 18px; min-height: 18px; margin-top: .2rem; accent-color: var(--navy-800); }
.check-option span { display: grid; }
.check-option small { color: var(--muted); font-weight: 400; }
.account-fields { padding: 1rem; border: 1px solid var(--line); border-radius: 9px; }
.account-fields legend, .permission-groups legend { padding: 0 .4rem; color: var(--navy-900); font-weight: 800; }
.usage-card { margin-bottom: 1rem; padding: 1rem 1.2rem; display: grid; grid-template-columns: auto minmax(180px, 420px); justify-content: space-between; align-items: center; gap: 1rem; border-radius: 10px; color: #fff; background: var(--navy-800); }
.usage-card strong, .usage-card span { display: block; }
.usage-card span { color: #c4cedb; font-size: .84rem; }
.usage-card progress { width: 100%; height: 10px; accent-color: var(--gold); }
.row-actions { display: flex; align-items: center; gap: .45rem; }
.row-actions .table-action { display: inline-flex; text-decoration: none; }
.row-actions .inline-form {
    width: auto;
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}
.row-actions .inline-form .table-action {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}
.row-actions .inline-form input:not([type="hidden"]),
.row-actions .inline-form select {
    width: auto;
    min-width: 160px;
}
.permission-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.permission-groups fieldset { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.permission-item { padding: .65rem 0; display: flex; grid-template-columns: none; align-items: flex-start; gap: .7rem; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.permission-item:last-child { border-bottom: 0; }
.permission-item span { display: grid; }
.permission-item small { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; }
.form-actions { margin-top: 1.3rem; display: flex; justify-content: flex-end; }
@media (max-width: 760px) { .page-header { flex-direction: column; } .inline-form, .permission-groups { grid-template-columns: 1fr; } .usage-card { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
    .public-header nav { display: none; }
    .hero { grid-template-columns: 1fr; }
    .hero-dashboard { max-width: 620px; transform: none; }
    .feature-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
    .process-list { grid-template-columns: 1fr 1fr; }
    .pricing-grid article.recommended { transform: none; }
}
@media (max-width: 620px) {
    .brand-word { display: none; }
    .public-header { gap: 1rem; }
    .header-actions .text-link { display: none; }
    .hero-actions, .trial-callout { align-items: stretch; flex-direction: column; }
    .feature-grid, .pricing-grid, .process-list, .public-contact { grid-template-columns: 1fr; }
    .preview-metrics { grid-template-columns: 1fr; }
}

/* Milestone 4: customers, services and quotations */
.customer-choice { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.customer-choice legend { padding: 0 .45rem; color: var(--navy-900); font-weight: 800; }
.choice-tabs { margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.choice-tabs label { padding: .9rem; display: flex; align-items: flex-start; gap: .65rem; border: 1px solid #cbd4df; border-radius: 8px; cursor: pointer; }
.choice-tabs label:has(input:checked) { border-color: var(--gold); background: #fffbef; }
.choice-tabs input { width: 18px; min-height: 18px; margin-top: .2rem; accent-color: var(--navy-800); }
.choice-tabs span, .choice-tabs small { display: block; }
.choice-tabs small { margin-top: .2rem; color: var(--muted); font-weight: 400; }
[data-new-customer][hidden], [data-existing-customer][hidden] { display: none; }
textarea { width: 100%; padding: .8rem .9rem; border: 1px solid #cbd4df; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; resize: vertical; }
.wide-form { max-width: none; }
.quote-items { overflow-x: auto; }
.quote-items table { min-width: 760px; margin-bottom: .8rem; }
.quote-items td { padding: .5rem; }
.quote-items input, .quote-items select { min-width: 110px; }
.quote-items td:nth-child(2) input { min-width: 240px; }
.status-draft { color: #4b586b; background: #e9edf2; }
.status-sent { color: #14527a; background: #e1f2fc; }
.status-approved, .status-converted { color: #0c5138; background: #dff5eb; }
.status-rejected, .status-cancelled, .status-expired { color: #7b2c2c; background: #fde8e8; }
.share-panel { margin-bottom: 1rem; padding: 1.2rem; border: 1px solid #dfc174; border-radius: 10px; background: #fffbef; }
.share-panel p { color: var(--muted); }
.share-panel input { margin-bottom: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-panel .table-action { display: inline-flex; align-items: center; text-decoration: none; }
.quotation-paper { max-width: 980px; margin: 0 auto 1rem; padding: clamp(1.3rem, 4vw, 3.2rem); border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 35px rgba(7,20,38,.08); }
.quotation-heading { padding-bottom: 1.4rem; display: flex; justify-content: space-between; gap: 2rem; border-bottom: 3px solid var(--navy-900); }
.quotation-heading > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; }
.quotation-heading h2, .quotation-heading p { margin: 0; }
.quotation-heading p { grid-column: 1 / -1; margin-top: .6rem; color: var(--muted); }
.quotation-heading > div:last-child { display: grid; justify-items: end; align-content: start; gap: .35rem; }
.quotation-heading > div:last-child > strong { color: var(--navy-900); font-size: 1.35rem; letter-spacing: .12em; }
.quotation-meta { margin: 1.8rem 0; display: grid; grid-template-columns: 1fr auto; gap: 2rem; }
.quotation-meta > div { display: grid; gap: .25rem; }
.quotation-meta small, .quotation-meta span { color: var(--muted); }
.quotation-table { margin-top: 1rem; }
.quotation-table th:nth-child(n+2), .quotation-table td:nth-child(n+2) { text-align: right; }
.quotation-totals { width: min(100%, 420px); margin: 1.2rem 0 1.2rem auto; }
.quotation-totals div { padding: .6rem 0; display: flex; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line); }
.quotation-totals .grand-total { padding: .9rem 0; color: var(--navy-950); border-bottom: 3px solid var(--navy-900); font-size: 1.2rem; }
.quotation-notes { margin-top: 2rem; padding: 1rem; border-left: 4px solid var(--gold); background: #faf8f2; }
.quotation-notes p { margin-bottom: 0; color: var(--muted); }
.conversion-note { color: var(--muted); font-size: .82rem; }
.quote-actions { max-width: 980px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quote-actions h2, .quote-actions p { margin: 0; }
.quote-actions p { color: var(--muted); }
.button-danger { color: #fff; border-color: #9a3333; background: #9a3333; }
.history-list { display: grid; }
.history-list > div { padding: .8rem 0; display: flex; align-items: flex-start; gap: .8rem; border-bottom: 1px solid var(--line); }
.history-list p, .history-list small { margin: 0; display: block; }
.history-list small { margin-top: .25rem; color: var(--muted); }
.public-quote-page { min-height: calc(100vh - 54px); padding: 1.2rem; background: #edf1f5; }
.public-quote-bar { max-width: 980px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: space-between; }
.public-paper { margin-bottom: 1rem; }
.public-decision, .customer-decision { max-width: 980px; margin: 0 auto 1rem; }
.customer-decision { padding: 1.5rem; border-radius: 12px; color: #fff; background: var(--navy-900); }
.customer-decision h2 { margin-bottom: .4rem; }
.customer-decision p { color: #c6d1de; }
.customer-decision.decided { border-left: 5px solid var(--gold); }
.decision-buttons { display: flex; gap: .8rem; }
@media (max-width: 700px) { .choice-tabs, .quotation-heading, .quotation-meta, .quote-actions { grid-template-columns: 1fr; flex-direction: column; } .quotation-heading > div:last-child { justify-items: start; } .decision-buttons { flex-direction: column; } }
.print-only { display: none; }
@media print { .no-print, .sidebar, .site-footer, .flash { display: none !important; } .print-only { display: inline; } body, .public-quote-page { background: #fff; } .app-shell { display: block; } .dashboard, .public-quote-page { padding: 0; } .quotation-paper { max-width: none; margin: 0; border: 0; box-shadow: none; } }

/* Notification Centre layout */
.page-actions,
.notification-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}
.page-actions form,
.notification-header-actions form,
.notification-read-action form {
    margin: 0;
}
.notification-header-actions .button {
    white-space: nowrap;
}
.notification-filters {
    margin-bottom: 1rem;
}
.notification-filters .active {
    color: #fff;
    border-color: var(--navy-900);
    background: var(--navy-900);
}
.notification-announcement {
    margin-bottom: 1rem;
}
.notification-table {
    table-layout: fixed;
}
.notification-table th:first-child,
.notification-table td:first-child {
    width: 52%;
}
.notification-table th:nth-child(2),
.notification-table td:nth-child(2) {
    width: 14%;
}
.notification-table th:nth-child(3),
.notification-table td:nth-child(3) {
    width: 20%;
}
.notification-table th:last-child,
.notification-table td:last-child {
    width: 14%;
}
.notification-table td {
    vertical-align: top;
}
.notification-unread {
    background: color-mix(in srgb, var(--gold) 8%, var(--surface));
}
.notification-unread td:first-child {
    box-shadow: inset 4px 0 var(--gold);
}
.notification-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: .35rem;
}
.notification-copy span {
    max-width: 100%;
    color: var(--muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.notification-record-link {
    margin-top: .2rem;
    display: inline-flex;
    text-decoration: none;
}
.notification-read-action {
    white-space: nowrap;
}
.notification-read-label {
    color: var(--muted);
}
.table-card-heading {
    padding: 1.2rem 1rem;
    border-bottom: 1px solid var(--line);
}
.table-card-heading h2 {
    margin-bottom: .35rem;
}
.table-card-heading p {
    margin: 0;
    color: var(--muted);
}
.table-card-footer {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, var(--page));
}
.attendance-clock-card {
    margin-bottom: 1rem;
}
.attendance-clock-card p {
    margin-top: 0;
}
.attendance-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.empty-table-message {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--muted);
}
.pos-checkout > div:first-child > label {
    display: block;
    min-width: 0;
}
.pos-checkout > div:first-child > label > input,
.pos-checkout > div:first-child > label > select {
    margin-top: .45rem;
}
.pos-row > * {
    min-width: 0;
}
.pos-row [data-pos-price],
.pos-row [data-pos-total],
.pos-row [data-pos-stock] {
    white-space: nowrap;
}
.summary-grid + .content-card.record-form {
    max-width: none;
    margin-top: 1rem;
}
.summary-grid + .content-card.record-form .form-grid {
    max-width: 760px;
}

@media (max-width: 760px) {
    .notification-header {
        width: 100%;
    }
    .notification-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .notification-header-actions .button,
    .notification-header-actions form {
        width: 100%;
    }
    .notification-header-actions button {
        justify-content: center;
    }
    .notification-table,
    .notification-table tbody,
    .notification-table tr,
    .notification-table td {
        display: block;
        width: 100% !important;
    }
    .notification-table thead {
        display: none;
    }
    .notification-table tr {
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--line);
    }
    .notification-table td {
        padding: .45rem 0;
        border: 0;
    }
    .notification-table td::before {
        content: attr(data-label);
        margin-bottom: .25rem;
        display: block;
        color: var(--muted);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .notification-unread td:first-child {
        padding-left: .75rem;
    }
    .attendance-page .page-actions,
    .attendance-clock-card .row-actions,
    .table-card-footer {
        width: 100%;
    }
    .attendance-page .page-actions .button,
    .attendance-clock-card .button,
    .table-card-footer .button {
        flex: 1 1 auto;
    }
    .pos-checkout {
        gap: 1rem;
    }
    .summary-grid + .content-card.record-form .form-grid {
        max-width: none;
    }
}

/* Milestone 5: projects and tasks */
.project-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem; }
.project-card { padding:1.25rem;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#fff;text-decoration:none;box-shadow:0 8px 25px rgba(7,20,38,.04); }
.project-card>div:first-child { display:flex;align-items:center;justify-content:space-between;gap:1rem; }
.project-card h2 { margin:1rem 0 .3rem;font-size:1.2rem; }.project-card>p{color:var(--muted)}
.project-card dl { margin:1rem 0; }.project-card dl div,.project-summary dl div{padding:.4rem 0;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}
.project-card dt,.project-summary dt{color:var(--muted)}.project-card dd,.project-summary dd{margin:0;text-align:right;font-weight:700}.project-card progress{width:100%;accent-color:var(--gold)}
.status-planned{color:#4b586b;background:#e9edf2}.status-on_hold,.status-blocked{color:#6c3e14;background:#fff0d8}.status-completed{color:#0c5138;background:#dff5eb}.status-cancelled{color:#7b2c2c;background:#fde8e8}.status-active,.status-in_progress{color:#14527a;background:#e1f2fc}
.project-summary{margin-bottom:1rem;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:2rem}.project-summary>div:first-child{display:grid;grid-template-columns:auto auto;align-items:center;gap:.7rem}.project-summary progress{grid-column:1/-1;width:100%;accent-color:var(--gold)}.status-form{display:grid;gap:.5rem}
.project-workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr);gap:1rem}.project-workspace aside{display:grid;align-content:start;gap:1rem}.task-card{margin-bottom:.7rem;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--line);border-left:4px solid #aab4c0;border-radius:8px;background:#fff}.task-card p{margin:.3rem 0;color:var(--muted)}.task-card small{color:var(--muted)}.priority-high{border-left-color:#d88927}.priority-urgent{border-left-color:#a73535}.priority-low{border-left-color:#5b8bb4}.compact-task>*+*{margin-top:.9rem}
@media(max-width:1000px){.project-grid{grid-template-columns:1fr 1fr}.project-summary,.project-workspace{grid-template-columns:1fr}}@media(max-width:650px){.project-grid{grid-template-columns:1fr}.task-card{align-items:stretch;flex-direction:column}.task-card form,.task-card select{width:100%}}

/* Milestone 6: invoices and payments */
.status-partial,.status-overdue{color:#7a4a0d;background:#fff0d8}.status-paid{color:#0c5138;background:#dff5eb}.invoice-lower{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.payment-row{padding:.8rem 0;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}.payment-row small{display:block;color:var(--muted)}.receipt-amount{margin:2rem 0;padding:2rem;text-align:center;color:#fff;background:var(--navy-900)}.receipt-amount small,.receipt-amount strong{display:block}.receipt-amount strong{margin-top:.5rem;font-size:2.4rem}.receipt-details div{padding:.8rem 0;display:flex;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--line)}.receipt-details dd{margin:0;font-weight:800;text-align:right}@media(max-width:760px){.invoice-lower{grid-template-columns:1fr}}

/* Milestone 7: documents and communication */
.billing-summary{margin-bottom:1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.billing-summary progress{width:100%;accent-color:var(--gold)}.billing-grid{margin-bottom:1rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.button:disabled{opacity:.55;cursor:not-allowed}@media(max-width:800px){.billing-summary,.billing-grid{grid-template-columns:1fr}}
.subscription-warning{margin-bottom:1rem;padding:1rem 1.2rem;display:flex;align-items:center;gap:.7rem;border:1px solid #dfb44c;border-left:5px solid var(--gold);border-radius:9px;background:#fffae9}.subscription-warning span{flex:1;color:#65501d}.subscription-warning a{color:var(--navy-900);font-weight:800}@media(max-width:700px){.subscription-warning{align-items:flex-start;flex-direction:column}}
.subscription-lock-banner,.subscription-grace-banner{padding:.8rem 1.2rem;display:flex;align-items:center;justify-content:center;gap:.7rem;color:#fff;background:#8b2f2f}.subscription-grace-banner{color:#3f300b;background:#f5d982}.subscription-lock-banner a,.subscription-grace-banner a{padding:.35rem .6rem;border-radius:5px;color:inherit;background:rgba(255,255,255,.18);font-weight:800}@media(max-width:700px){.subscription-lock-banner,.subscription-grace-banner{align-items:flex-start;flex-direction:column}}
@media(min-width:761px){.subscription-lock-banner,.subscription-grace-banner{width:calc(100% - 255px);margin-left:255px}}
.subscription-expired-badge{color:#fff;background:#9a3333}.subscription-warning a{padding:.5rem .7rem;border-radius:6px;color:#fff;background:var(--navy-900);text-decoration:none}

/* Milestone 9: point of sale, stock and colour theme */
.summary-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.create-panel summary{cursor:pointer;color:var(--navy-900);font-weight:800}.create-panel[open] summary{margin-bottom:1rem}.stock-low,.stock-out{color:#b13a3a}.stock-in{color:var(--success);font-weight:800}.pos-items{margin:1.5rem 0;overflow-x:auto}.pos-row{min-width:850px;padding:.5rem 0;display:grid;grid-template-columns:minmax(240px,2fr) .65fr .8fr .7fr .8fr auto;align-items:center;gap:.7rem;border-bottom:1px solid var(--line)}.pos-heading{color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase}.pos-checkout{display:grid;grid-template-columns:1fr minmax(260px,.65fr);gap:2rem}.pos-checkout>div:first-child{display:grid;gap:1rem}.pos-totals{padding:1.2rem;display:grid;align-content:start;gap:1rem;border-radius:10px;background:var(--canvas)}.pos-totals span{display:flex;justify-content:space-between;font-size:1.05rem}.receipt-payments{margin-top:2rem}.receipt-thanks{margin-top:2rem;text-align:center;font-weight:800}

[data-theme="dark"] body,[data-theme="dark"] .public-main{background:var(--canvas)}
[data-theme="dark"] .content-card,[data-theme="dark"] .metric-card,[data-theme="dark"] .project-card,[data-theme="dark"] .task-card,[data-theme="dark"] .site-footer,[data-theme="dark"] .form-panel,[data-theme="dark"] .auth-card{background:var(--surface)}
[data-theme="dark"] label,[data-theme="dark"] .dark-brand,[data-theme="dark"] .create-panel summary,[data-theme="dark"] .account-fields legend,[data-theme="dark"] .permission-groups legend{color:var(--ink)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .table-action,[data-theme="dark"] .button-secondary{color:var(--ink);background:#15263b;border-color:#3a4c62}
[data-theme="dark"] th{background:#0d1a2b}[data-theme="dark"] .form-note,[data-theme="dark"] .check-option,[data-theme="dark"] .local-hint{background:#16263a}[data-theme="dark"] .subscription-warning{background:#3c3216}[data-theme="dark"] .subscription-warning span{color:#f3d98d}
[data-theme="dark"] .quotation-paper{color:#142033;background:#fff}[data-theme="dark"] .quotation-paper th{color:#697386;background:#f7f9fb}[data-theme="dark"] .public-header{background:rgba(9,21,37,.96)}[data-theme="dark"] .hero{background:linear-gradient(150deg,#091525 45%,#11243a)}[data-theme="dark"] .hero-copy h1{color:var(--ink)}
@media(max-width:800px){.summary-grid.three,.pos-checkout{grid-template-columns:1fr}}
.product-edit-form{margin-top:1rem}.barcode-scanner{margin-bottom:1rem;padding:1rem;border:2px dashed var(--gold);border-radius:10px;background:var(--surface)}.barcode-scanner input{margin:.5rem 0}.barcode-scanner small{color:var(--muted)}.barcode-scanner.scan-error{border-color:var(--danger)}

/* Milestone 27: payroll and payslips */
.payroll-create-panel { margin-top: 1rem; }
.payroll-profile-layout { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: start; gap: 1rem; }
.payroll-profile-layout > .table-card { margin-top: 0; }
.payroll-profile-editor { display: grid; gap: 1rem; }
.payroll-profile-editor > * { margin-top: 0; max-width: none; }
.payroll-empty { align-self: start; }
.payroll-run-summary { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.payroll-run-summary article > span,
.payroll-run-summary article > small { display: block; color: var(--muted); }
.payroll-run-summary article > strong { margin: .65rem 0; display: block; font-size: 1.35rem; }
.payroll-entry-actions { min-width: 150px; display: grid; justify-items: start; gap: .55rem; }
.payroll-entry-actions details { position: relative; }
.payroll-entry-actions summary { list-style: none; white-space: nowrap; cursor: pointer; }
.payroll-entry-actions summary::-webkit-details-marker { display: none; }
.payroll-payment-form { width: min(320px, 70vw); margin-top: .6rem; padding: .8rem; display: grid; gap: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.payroll-payment-form label { font-size: .78rem; }
.payroll-payment-form input,
.payroll-payment-form select { min-height: 40px; }
.status-part_paid { color: #6c3e14; background: #fff0d8; }
.status-unpaid { color: #7b2c2c; background: #fde8e8; }
.payroll-print-actions { max-width: 980px; margin: 0 auto 1rem; }
.payslip-paper { max-width: 980px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #142033; box-shadow: var(--shadow); }
.payslip-header { padding-bottom: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; border-bottom: 2px solid #0b1d35; }
.payslip-header h1 { margin-bottom: .45rem; font-size: 2rem; }
.payslip-header p { margin-bottom: .2rem; color: #697386; }
.payslip-header > div:last-child { display: grid; justify-items: end; gap: .7rem; }
.payslip-meta { padding: 1.4rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-bottom: 1px solid #dfe5ec; }
.payslip-meta span,
.payslip-meta small { display: block; color: #697386; }
.payslip-columns { padding: 1.5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.payslip-line { padding: .65rem 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e8ecf1; }
.payslip-line.total { border-bottom: 0; font-weight: 800; }
.payslip-net { padding: 1.2rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #fff; background: #0b1d35; }
.payslip-net strong { font-size: 1.7rem; }
.payslip-footer { padding-top: 1.4rem; color: #697386; font-size: .88rem; }
.payslip-draft { display: block; color: #a93636; }

@media (max-width: 900px) {
    .payroll-profile-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .payslip-header { flex-direction: column; }
    .payslip-header > div:last-child { justify-items: start; }
    .payslip-meta,
    .payslip-columns { grid-template-columns: 1fr; }
    .payslip-net { align-items: flex-start; flex-direction: column; }
}
@media print {
    .payslip-paper { max-width: none; padding: 0; border: 0; box-shadow: none; }
}
.collaboration-grid,.public-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.collaboration-grid>section,.collaboration-grid>aside{display:grid;align-content:start;gap:1rem}.document-row{padding:.8rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}.document-row small,.message-card small{display:block;color:var(--muted)}.message-card{padding:1rem 0;border-bottom:1px solid var(--line)}.message-card p{margin:.7rem 0}.public-project-page{min-height:calc(100vh - 54px);padding:1.2rem;background:#edf1f5}.public-project-page>header,.public-project-hero,.public-project-grid{max-width:1050px;margin:0 auto 1rem}.public-project-page>header{display:flex;justify-content:space-between;gap:1rem}.public-project-page>header>div{display:grid;text-align:right}.public-project-page>header small{color:var(--muted)}.public-project-hero{padding:2rem;border-radius:14px;color:#fff;background:var(--navy-900)}.public-project-hero h1{margin-bottom:.3rem}.public-project-hero>p{color:#c6d1de}.public-project-hero>div{display:flex;justify-content:space-between}.public-project-hero progress{width:100%;margin-top:1rem;accent-color:var(--gold)}@media(max-width:760px){.collaboration-grid,.public-project-grid{grid-template-columns:1fr}.public-project-page>header{flex-direction:column}.public-project-page>header>div{text-align:left}}

/* Milestone 33.0.1: complete dark-mode contrast and document-safe printing */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] .dashboard,
[data-theme="dark"] .admin-main,
[data-theme="dark"] .public-main {
    color: var(--ink);
    background-color: var(--canvas);
}

[data-theme="dark"] a:not(.brand):not(.nav-link):not(.button):not(.table-action) {
    color: var(--gold-light);
}

[data-theme="dark"] .content-card,
[data-theme="dark"] .metric-card:not(.featured),
[data-theme="dark"] .project-card,
[data-theme="dark"] .task-card,
[data-theme="dark"] .integration-card,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .form-panel,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .payroll-payment-form {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] label,
[data-theme="dark"] legend,
[data-theme="dark"] summary,
[data-theme="dark"] .dark-brand,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .topbar h1,
[data-theme="dark"] .card-heading h2,
[data-theme="dark"] .content-card h2,
[data-theme="dark"] .content-card h3,
[data-theme="dark"] .project-card h2,
[data-theme="dark"] td {
    color: var(--ink);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .table-action,
[data-theme="dark"] .button-secondary,
[data-theme="dark"] .button-outline {
    color: #f4f7fb;
    background: #15263b;
    border-color: #52647a;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9aa8ba;
    opacity: 1;
}

[data-theme="dark"] option {
    color: #f4f7fb;
    background: #15263b;
}

[data-theme="dark"] .button-outline:hover,
[data-theme="dark"] .button-secondary:hover,
[data-theme="dark"] .table-action:hover {
    color: #fff;
    background: #203650;
}

[data-theme="dark"] th {
    color: #b7c2d0;
    background: #0d1a2b;
}

[data-theme="dark"] th,
[data-theme="dark"] td,
[data-theme="dark"] .permission-item,
[data-theme="dark"] .document-row,
[data-theme="dark"] .message-card,
[data-theme="dark"] .history-list > div,
[data-theme="dark"] .payment-row {
    border-color: var(--line);
}

[data-theme="dark"] .form-note,
[data-theme="dark"] .check-option,
[data-theme="dark"] .local-hint,
[data-theme="dark"] .payment-request-total,
[data-theme="dark"] .pos-totals,
[data-theme="dark"] .table-card-footer {
    color: var(--muted);
    background: #16263a;
}

[data-theme="dark"] .registration-plan:has(input:checked),
[data-theme="dark"] .choice-tabs label:has(input:checked),
[data-theme="dark"] .subscription-warning {
    background: #3c3216;
}

[data-theme="dark"] .customer-choice,
[data-theme="dark"] .account-fields,
[data-theme="dark"] .permission-groups fieldset,
[data-theme="dark"] .choice-tabs label,
[data-theme="dark"] .registration-start,
[data-theme="dark"] .registration-plan {
    border-color: var(--line);
}

/* The current onboarding step deliberately has a light card. Keep its copy dark. */
[data-theme="dark"] .check.current {
    color: #142033;
    background: #fffbef;
    border-color: #dfc174;
}

[data-theme="dark"] .check.current strong {
    color: #142033;
}

[data-theme="dark"] .check.current p {
    color: #5d6675;
}

[data-theme="dark"] .check:not(.current) > span {
    color: #536174;
    background: #edf1f5;
}

[data-theme="dark"] .check.done > span {
    color: #fff;
    background: var(--success);
}

[data-theme="dark"] .share-panel,
[data-theme="dark"] .local-test-box {
    background: #302914;
}

[data-theme="dark"] .error-list,
[data-theme="dark"] .flash-error {
    color: #ffd6d6;
    background: #421d24;
    border-color: #98515a;
}

[data-theme="dark"] .success-box,
[data-theme="dark"] .flash-success {
    color: #c9f5e0;
    background: #12382b;
    border-color: #367a60;
}

[data-theme="dark"] .public-header {
    background: rgba(9, 21, 37, .96);
}

[data-theme="dark"] .public-header nav a,
[data-theme="dark"] .public-header .text-link {
    color: #c9d3df;
}

[data-theme="dark"] .hero {
    background: linear-gradient(150deg, #091525 45%, #11243a);
}

[data-theme="dark"] .hero-copy h1,
[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .feature-grid h3 {
    color: var(--ink);
}

/* Fixes the low-contrast "See how it works" button shown on the home page. */
[data-theme="dark"] .hero-actions .button-outline {
    color: #fff;
    background: #15263b;
    border-color: #718096;
}

[data-theme="dark"] .hero-actions .button-outline:hover {
    color: var(--navy-950);
    background: var(--gold);
    border-color: var(--gold);
}

[data-theme="dark"] .feature-grid article,
[data-theme="dark"] .process-list li {
    color: var(--ink);
    background: var(--surface);
}

[data-theme="dark"] .process-section {
    background: #0d1a2b;
}

[data-theme="dark"] .payment-list span {
    color: #e8edf4;
    background: #15263b;
    border-color: #52647a;
}

[data-theme="dark"] .simple-auth-page,
[data-theme="dark"] .public-quote-page,
[data-theme="dark"] .public-project-page {
    background: var(--canvas);
}

/* Preview and printable documents remain paper-white in every theme. */
[data-theme="dark"] .preview-panel,
[data-theme="dark"] .quotation-paper,
[data-theme="dark"] .payslip-paper {
    color: #142033;
    background: #fff;
    color-scheme: light;
}

[data-theme="dark"] .preview-panel strong,
[data-theme="dark"] .preview-panel span,
[data-theme="dark"] .quotation-paper h1,
[data-theme="dark"] .quotation-paper h2,
[data-theme="dark"] .quotation-paper h3,
[data-theme="dark"] .quotation-paper strong,
[data-theme="dark"] .quotation-paper td,
[data-theme="dark"] .quotation-paper dd,
[data-theme="dark"] .payslip-paper h1,
[data-theme="dark"] .payslip-paper h2,
[data-theme="dark"] .payslip-paper h3,
[data-theme="dark"] .payslip-paper strong,
[data-theme="dark"] .payslip-paper td {
    color: #142033;
}

[data-theme="dark"] .preview-panel small,
[data-theme="dark"] .quotation-paper small,
[data-theme="dark"] .quotation-paper p,
[data-theme="dark"] .quotation-paper span,
[data-theme="dark"] .payslip-paper small,
[data-theme="dark"] .payslip-paper p,
[data-theme="dark"] .payslip-paper span {
    color: #697386;
}

[data-theme="dark"] .preview-panel .project-row b {
    color: #167752;
}

[data-theme="dark"] .quotation-paper th,
[data-theme="dark"] .payslip-paper th {
    color: #697386;
    background: #f7f9fb;
}

[data-theme="dark"] .quotation-paper .quotation-notes {
    background: #faf8f2;
}

[data-theme="dark"] .quotation-paper .receipt-amount,
[data-theme="dark"] .payslip-paper .payslip-net {
    color: #fff;
    background: #0b1d35;
}

[data-theme="dark"] .quotation-paper .receipt-amount strong,
[data-theme="dark"] .payslip-paper .payslip-net strong,
[data-theme="dark"] .payslip-paper .payslip-net span {
    color: #fff;
}

@media print {
    html[data-theme="dark"] {
        color-scheme: light;
    }

    [data-theme="dark"] body,
    [data-theme="dark"] .dashboard,
    [data-theme="dark"] .public-quote-page,
    [data-theme="dark"] .public-project-page {
        color: #142033 !important;
        background: #fff !important;
    }

    [data-theme="dark"] .quotation-paper,
    [data-theme="dark"] .payslip-paper {
        color: #142033 !important;
        background: #fff !important;
    }
}

/* Milestone 33.0.2: authentication-page dark-mode visibility */
[data-theme="dark"] .form-panel .forgot-link,
[data-theme="dark"] .form-panel .form-switch a {
    color: var(--gold-light);
    text-decoration-color: rgba(242, 213, 142, .55);
}

[data-theme="dark"] .form-panel .forgot-link:hover,
[data-theme="dark"] .form-panel .form-switch a:hover {
    color: #fff;
}

[data-theme="dark"] .form-panel .form-stack > .button {
    color: var(--navy-950);
    background: var(--gold);
    border-color: var(--gold);
}

[data-theme="dark"] .form-panel .form-stack > .button:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
}

[data-theme="dark"] .password-control button {
    color: var(--navy-950);
    background: #edf1f5;
}

/* Milestone 35: responsive navigation, quick module search and fast POS */
.mobile-nav-toggle,
.mobile-nav-backdrop {
    display: none;
}

.nav-search-trigger {
    width: 100%;
    min-height: 42px;
    margin-bottom: .8rem;
    padding: .6rem .7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    border: 1px solid #3c4d63;
    border-radius: 8px;
    color: #e9eef4;
    background: #10243d;
    font: inherit;
    cursor: pointer;
}

.nav-search-trigger kbd {
    padding: .2rem .35rem;
    border: 1px solid #607086;
    border-radius: 4px;
    color: #cbd4df;
    background: #07182d;
    font-size: .67rem;
}

.module-search-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    padding: min(15vh, 7rem) 1rem 1rem;
    background: rgba(2, 10, 20, .72);
    backdrop-filter: blur(4px);
}

.module-search-overlay[hidden] {
    display: none;
}

.module-search-panel {
    width: min(100%, 620px);
    max-height: 72vh;
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    gap: .8rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.module-search-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-search-panel header button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 7px;
    color: var(--ink);
    background: var(--canvas);
    font-size: 1.4rem;
    cursor: pointer;
}

.module-search-panel input {
    min-height: 50px;
    font-size: 1.05rem;
}

.module-search-results {
    display: grid;
    gap: .35rem;
}

.module-search-results a,
.module-search-results p {
    margin: 0;
    padding: .75rem .85rem;
    border-radius: 8px;
}

.module-search-results a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
}

.module-search-results a:hover,
.module-search-results a.selected {
    color: var(--navy-950);
    background: var(--gold-light);
}

body.module-search-open,
body.nav-open {
    overflow: hidden;
}

.metric-card-link {
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.metric-card-link:hover,
.metric-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 14px 32px rgba(7, 20, 38, .12);
}

.pos-fast-toolbar {
    margin-bottom: 1.2rem;
    padding: 1rem;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--canvas);
}

.pos-fast-toolbar label,
.pos-fast-toolbar label input {
    width: 100%;
}

.pos-fast-status {
    min-height: 1.25rem;
    margin: -.5rem 0 1rem;
    color: var(--success);
    font-weight: 800;
}

.pos-fast-status.error {
    color: var(--danger);
}

.pos-quantity {
    display: grid;
    grid-template-columns: 34px minmax(64px, 1fr) 34px;
    align-items: center;
}

.pos-quantity button {
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.pos-quantity input {
    min-width: 0;
    border-radius: 0;
    text-align: center;
}

[data-theme="dark"] .nav-search-trigger {
    color: #fff;
    background: #152b45;
}

[data-theme="dark"] .pos-fast-toolbar {
    background: #0d1a2b;
}

@media (max-width: 760px) {
    .mobile-nav-toggle {
        position: fixed;
        z-index: 72;
        top: .7rem;
        left: .7rem;
        min-height: 42px;
        padding: .55rem .75rem;
        display: flex;
        align-items: center;
        gap: .45rem;
        border: 1px solid #52647a;
        border-radius: 8px;
        color: #fff;
        background: var(--navy-950);
        box-shadow: var(--shadow);
        font: inherit;
        font-weight: 800;
    }

    .mobile-nav-backdrop {
        position: fixed;
        z-index: 69;
        inset: 0;
        width: 100%;
        border: 0;
        background: rgba(2, 10, 20, .66);
    }

    body.nav-open .mobile-nav-backdrop {
        display: block;
    }

    .sidebar,
    .admin-sidebar {
        position: fixed;
        z-index: 70;
        inset: 0 auto 0 0;
        width: min(86vw, 320px);
        padding: 1.2rem;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 20px 0 45px rgba(0, 0, 0, .28);
    }

    body.nav-open .sidebar,
    body.nav-open .admin-sidebar {
        transform: translateX(0);
    }

    .sidebar nav,
    .admin-sidebar nav {
        grid-template-columns: 1fr;
    }

    .nav-label {
        grid-column: auto;
    }

    .dashboard,
    .admin-main {
        padding-top: 4.5rem;
    }

    .pos-fast-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .pos-fast-toolbar .row-actions,
    .pos-fast-toolbar .button,
    .pos-fast-toolbar .table-action {
        width: 100%;
    }

    .pos-row {
        min-width: 760px;
    }
}
/* Milestone 37: compact shop receipts and thermal printer previews */
.receipt-toolbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 auto 1rem;max-width:900px}.receipt-toolbar>a:not(.button){padding:.5rem .7rem;border:1px solid var(--border);border-radius:8px;color:var(--ink);text-decoration:none}.receipt-toolbar>a.active{background:var(--navy);color:#fff}.receipt-toolbar form{margin:0}
.receipt-sheet{background:#fff;color:#111;margin:0 auto;padding:20px;box-shadow:0 12px 35px rgba(10,31,55,.12);font-family:Arial,sans-serif}.receipt-a4{max-width:850px;min-height:1000px}.receipt-80mm{width:80mm;max-width:100%;padding:4mm}.receipt-58mm{width:58mm;max-width:100%;padding:2mm;font-size:11px}
.receipt-head{text-align:center;border-bottom:1px dashed #555;padding-bottom:10px}.receipt-head h2,.receipt-head p{margin:4px 0}.receipt-head .brand-mark{display:inline-flex}.receipt-details{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px 0;border-bottom:1px dashed #555}.receipt-details strong{text-align:right}
.receipt-items{width:100%;border-collapse:collapse}.receipt-items th,.receipt-items td{padding:7px 3px;border-bottom:1px dotted #aaa;text-align:right;vertical-align:top}.receipt-items th:first-child,.receipt-items td:first-child{text-align:left;overflow-wrap:anywhere}.receipt-58mm .receipt-items th,.receipt-58mm .receipt-items td{padding:5px 2px}.receipt-totals{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:10px 0;border-bottom:1px dashed #555}.receipt-totals strong{text-align:right}.receipt-grand{font-size:1.14em;border-top:1px solid #222;padding-top:6px}.receipt-payments h3{font-size:1em}.receipt-payment{display:grid;grid-template-columns:1fr auto;margin:5px 0}.receipt-payment small{grid-column:1/-1}.receipt-footer{text-align:center;margin-top:18px;font-weight:700}
@media(max-width:640px){.receipt-sheet{box-shadow:none}.receipt-toolbar{justify-content:center}.receipt-a4{min-height:0;padding:14px}.receipt-items{font-size:.9em}}
@media print{html,body{background:#fff!important}.no-print,.global-theme-toggle,.flash,.receipt-toolbar{display:none!important}.app-shell,.dashboard{display:block!important;margin:0!important;padding:0!important}.receipt-sheet{box-shadow:none!important;margin:0!important;max-width:none!important;min-height:0!important}.receipt-58mm{width:54mm!important;padding:0!important}.receipt-80mm{width:76mm!important;padding:0!important}.receipt-a4{width:auto!important;padding:0!important}}
.danger-zone{max-width:760px;border:2px solid var(--danger)}.danger-zone>h2{color:var(--danger)}.danger-link{color:var(--danger)!important;border-color:var(--danger)!important}.danger-link:hover{background:var(--danger)!important;color:#fff!important}

/* Milestone 40 - Accounting dashboard layout refinement */
.accounting-dashboard {
    max-width: 1500px;
    width: 100%;
}
.accounting-page-header {
    align-items: center;
}
.accounting-new-journal {
    flex: 0 0 auto;
}
.accounting-period-bar {
    max-width: none;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) auto;
    align-items: end;
    gap: .8rem;
}
.accounting-period-field {
    display: grid;
    gap: .4rem;
}
.accounting-period-field label {
    font-weight: 800;
    color: var(--ink);
}
.accounting-period-field input {
    width: 100%;
    min-height: 44px;
}
.accounting-apply-period {
    min-height: 44px;
    white-space: nowrap;
}
.accounting-summary-grid {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.accounting-summary-grid .metric-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.accounting-summary-grid .metric-card strong {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    overflow-wrap: anywhere;
}
.accounting-period-card strong {
    line-height: 1.15;
}
.accounting-tools-panel,
.accounting-recent-panel {
    margin-top: 1rem;
}
.accounting-section-heading {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.accounting-section-heading h2 {
    margin: 0 0 .25rem;
}
.accounting-section-heading p {
    margin: 0;
    color: var(--muted);
}
.accounting-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}
.accounting-tool-card {
    min-height: 112px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--canvas);
    color: var(--ink);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.accounting-tool-card strong {
    font-size: 1rem;
    color: var(--navy-900);
}
.accounting-tool-card span {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}
.accounting-tool-card:hover,
.accounting-tool-card:focus-visible {
    transform: translateY(-1px);
    border-color: var(--navy-700);
    box-shadow: 0 8px 22px rgba(7, 20, 38, .08);
}
.accounting-empty-state {
    padding: 2rem 1rem !important;
    text-align: center;
    color: var(--muted);
}
[data-theme="dark"] .accounting-period-field label,
[data-theme="dark"] .accounting-tool-card,
[data-theme="dark"] .accounting-tool-card strong {
    color: var(--ink);
}
[data-theme="dark"] .accounting-tool-card {
    background: #102035;
    border-color: #31455d;
}
[data-theme="dark"] .accounting-tool-card:hover,
[data-theme="dark"] .accounting-tool-card:focus-visible {
    border-color: #5c7593;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
@media (max-width: 1120px) {
    .accounting-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .accounting-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .accounting-period-bar {
        grid-template-columns: 1fr;
    }
    .accounting-apply-period {
        width: 100%;
    }
    .accounting-summary-grid,
    .accounting-tools-grid {
        grid-template-columns: 1fr;
    }
    .accounting-section-heading {
        flex-direction: column;
        align-items: stretch;
    }
    .accounting-section-heading .table-action {
        align-self: flex-start;
    }
}

/* Milestone 40 dashboard polish: accounting journals + onboarding lifecycle */
.accounting-period-bar{
    grid-template-columns:repeat(4,minmax(150px,1fr)) auto;
    align-items:end;
}
.accounting-period-field select{width:100%;min-height:44px}
.accounting-filter-actions{display:flex;gap:.55rem;align-items:center}
.accounting-filter-actions .button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.accounting-recent-panel{overflow:hidden;padding:0}
.accounting-recent-panel .accounting-section-heading{padding:1rem 1.15rem;margin:0;border-bottom:1px solid var(--line);align-items:center}
.accounting-journal-table{margin:0;overflow-x:auto}
.accounting-journal-table table{min-width:1050px}
.accounting-journal-table th,.accounting-journal-table td{padding:.85rem .9rem;vertical-align:middle}
.accounting-journal-table .numeric{text-align:right;white-space:nowrap}
.accounting-journal-table tbody tr:hover{background:rgba(19,77,126,.035)}
.currency-pill{display:inline-flex;align-items:center;justify-content:center;min-width:48px;padding:.22rem .52rem;border-radius:999px;background:#eaf3ff;color:#164f8d;font-weight:800;font-size:.76rem}
[data-theme="dark"] .currency-pill{background:#17314d;color:#b8d8ff}
.setup-progress-text{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}
.setup-progress{height:7px;margin:.9rem 0 1rem;border-radius:999px;background:var(--canvas);overflow:hidden}
.setup-progress span{display:block;height:100%;border-radius:inherit;background:var(--gold)}
.workspace-grid-single{grid-template-columns:minmax(0,1fr)}
.workspace-grid-single .architecture-note{max-width:none}
.getting-started[hidden]{display:none!important}
@media(max-width:1180px){.accounting-period-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.accounting-filter-actions{grid-column:1/-1}}
@media(max-width:760px){.accounting-period-bar{grid-template-columns:1fr}.accounting-filter-actions{grid-column:auto}.accounting-filter-actions .button{flex:1}.accounting-recent-panel .accounting-section-heading{align-items:flex-start}}

/* Milestone 41 — final responsive/production UI pass */
html { -webkit-text-size-adjust: 100%; }
body.nav-open { overflow: hidden; }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 720px; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
.page-header .row-actions, .topbar .account-area, .row-actions { flex-wrap: wrap; }
.mobile-nav-toggle { box-shadow: 0 8px 24px rgba(7,24,45,.18); }
@media (max-width: 760px) {
    .dashboard, .admin-main { padding-left: 16px; padding-right: 16px; }
    .page-header, .topbar { gap: 14px; align-items: stretch; }
    .page-header .row-actions, .topbar .account-area { width: 100%; }
    .page-header .row-actions .button, .topbar .account-area .button { flex: 1 1 auto; text-align: center; }
    .content-card, .metric-card { border-radius: 12px; }
    .form-grid, .summary-grid, .dashboard-grid { grid-template-columns: 1fr !important; }
    .table-wrap { margin-left: -4px; margin-right: -4px; }
    .mobile-nav-toggle { min-width: 92px; min-height: 44px; }
}
@media (max-width: 480px) {
    .dashboard, .admin-main { padding-left: 10px; padding-right: 10px; }
    h1 { font-size: clamp(1.65rem, 8vw, 2.15rem); }
    .button, button { min-height: 42px; }
}

/* Milestone 41 UI hotfix: independent desktop sidebar/content scrolling.
   The application shell stays within the viewport. Scrolling one pane does
   not move the other, and overscroll is contained to the active pane. */
@media (min-width: 761px) {
    .app-shell,
    .admin-shell {
        height: calc(100vh - 54px);
        min-height: 0;
        overflow: hidden;
    }

    .sidebar,
    .admin-sidebar {
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .dashboard,
    .admin-main {
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .sidebar,
    .admin-sidebar,
    .dashboard,
    .admin-main {
        -webkit-overflow-scrolling: touch;
    }
}

/* Milestone 41 sidebar scroll correction v2.
   Desktop uses a fixed navigation rail and normal document scrolling for the
   content. The sidebar owns its own vertical scroll area. This avoids the
   previous nested-height approach being defeated by footer/subscription bars. */
@media (min-width: 761px) {
    body:has(.app-shell),
    body:has(.admin-shell) {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .app-shell,
    .admin-shell {
        display: block;
        height: auto;
        min-height: calc(100vh - 54px);
        overflow: visible;
    }

    .sidebar,
    .admin-sidebar {
        position: fixed;
        z-index: 40;
        top: 0;
        bottom: 0;
        left: 0;
        width: 255px;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }

    .dashboard,
    .admin-main {
        width: auto;
        height: auto;
        min-height: calc(100vh - 54px);
        margin-left: 255px;
        overflow: visible;
    }

    body:has(.app-shell) > .site-footer,
    body:has(.admin-shell) > .site-footer {
        margin-left: 255px;
    }
}

/* Milestone 41 POS opening-layout refinement */
.pos-fast-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .8rem;
    padding: 1rem 1.1rem;
}
.pos-fast-toolbar > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    margin: 0;
}
.pos-fast-toolbar > label > input {
    min-height: 46px;
    margin: 0;
}
.pos-fast-toolbar > label > small {
    margin-top: 0;
    color: var(--muted);
}
.pos-fast-toolbar > .row-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}
.pos-fast-toolbar [data-pos-held-count]::before { content: " ("; }
.pos-fast-toolbar [data-pos-held-count]::after { content: ")"; }
.pos-fast-toolbar [data-pos-hold],
.pos-fast-toolbar [data-pos-recall],
.pos-fast-toolbar [data-pos-clear] {
    min-height: 40px;
    white-space: nowrap;
}
@media (min-width: 1050px) {
    .pos-fast-toolbar {
        grid-template-columns: minmax(420px, 1fr) auto;
        align-items: end;
    }
    .pos-fast-toolbar > .row-actions {
        width: auto;
        padding-top: 0;
        border-top: 0;
        align-self: end;
    }
}
@media (max-width: 760px) {
    .pos-fast-toolbar > .row-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pos-fast-toolbar [data-pos-clear] { grid-column: 1 / -1; }
}

/* Milestone 41 POS toolbar correction v2: keep actions out of the search-field row */
.pos-fast-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .9rem;
}
.pos-fast-toolbar > label {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
}
.pos-fast-toolbar > label > input {
    width: 100%;
    max-width: none;
}
.pos-fast-toolbar > .row-actions {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}
.pos-fast-toolbar > .row-actions .button,
.pos-fast-toolbar > .row-actions .table-action {
    width: auto;
    min-width: 110px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1050px) {
    .pos-fast-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .pos-fast-toolbar > .row-actions {
        width: 100%;
        padding-top: .8rem;
        border-top: 1px solid var(--line);
        align-self: stretch;
    }
}
@media (max-width: 760px) {
    .pos-fast-toolbar > .row-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pos-fast-toolbar > .row-actions .button,
    .pos-fast-toolbar > .row-actions .table-action {
        width: 100%;
        min-width: 0;
    }
    .pos-fast-toolbar [data-pos-clear] { grid-column: 1 / -1; }
}

/* Milestone 41 POS item-grid correction: keep headings, values and actions aligned */
.pos-items {
    margin: 1.25rem 0;
    overflow-x: auto;
}
.pos-items .barcode-scanner {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
}
.pos-items .barcode-scanner input {
    width: 100%;
    margin: 0;
}
.pos-row {
    min-width: 920px;
    grid-template-columns: minmax(280px, 2.25fr) 105px 120px 150px 120px 92px;
    gap: 1rem;
    align-items: center;
    padding: .7rem 0;
}
.pos-heading {
    align-items: end;
    padding-top: .2rem;
    padding-bottom: .55rem;
}
.pos-heading > span:nth-child(2),
.pos-heading > span:nth-child(3),
.pos-heading > span:nth-child(5) {
    text-align: right;
}
.pos-heading > span:nth-child(4) {
    text-align: center;
}
.pos-row [data-pos-stock],
.pos-row [data-pos-price],
.pos-row [data-pos-total] {
    display: block;
    width: 100%;
    text-align: right;
}
.pos-row [data-pos-total] {
    font-weight: 800;
}
.pos-quantity {
    width: 100%;
    grid-template-columns: 38px minmax(66px, 1fr) 38px;
    gap: 0;
}
.pos-quantity button,
.pos-quantity input {
    height: 44px;
    margin: 0;
}
.pos-quantity button:first-child {
    border-radius: 8px 0 0 8px;
}
.pos-quantity button:last-child {
    border-radius: 0 8px 8px 0;
}
.pos-quantity input {
    border-radius: 0;
}
.pos-row [data-pos-remove] {
    width: 92px;
    min-height: 40px;
    justify-self: end;
    text-align: center;
}
.pos-items > [data-pos-add] {
    margin-top: .75rem;
}
@media (max-width: 760px) {
    .pos-items {
        overflow-x: visible;
    }
    .pos-heading {
        display: none;
    }
    .pos-row {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem 1rem;
        padding: 1rem 0;
    }
    .pos-row > [data-pos-product] {
        grid-column: 1 / -1;
    }
    .pos-row [data-pos-stock]::before { content: "Available"; }
    .pos-row [data-pos-price]::before { content: "Unit price"; }
    .pos-row [data-pos-total]::before { content: "Total"; }
    .pos-row [data-pos-stock],
    .pos-row [data-pos-price],
    .pos-row [data-pos-total] {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        text-align: left;
    }
    .pos-row [data-pos-stock]::before,
    .pos-row [data-pos-price]::before,
    .pos-row [data-pos-total]::before {
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .pos-quantity {
        grid-column: 1 / -1;
        max-width: 190px;
    }
    .pos-quantity::before {
        content: "Quantity";
        grid-column: 1 / -1;
        margin-bottom: .25rem;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .pos-row [data-pos-remove] {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
    }
}

/* Milestone 41 POS customer/currency alignment */
[data-pos-form] > .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
[data-pos-form] > .form-grid > label {
    display: grid;
    grid-template-rows: auto 48px auto;
    gap: .45rem;
    min-width: 0;
    margin: 0;
    align-content: start;
}
[data-pos-form] > .form-grid > label > select {
    width: 100%;
    height: 48px;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
}
[data-pos-form] > .form-grid > label > small {
    min-height: 1.25rem;
    margin: 0;
    line-height: 1.25rem;
}
/* Reserve the same helper-text row beneath currency so both fields stay aligned. */
[data-pos-form] > .form-grid > label:last-child::after {
    content: "\00a0";
    display: block;
    min-height: 1.25rem;
    line-height: 1.25rem;
}
[data-pos-form] > .form-grid select:focus {
    outline-offset: 0;
    box-shadow: 0 0 0 2px rgba(216, 161, 40, .18);
}
@media (max-width: 760px) {
    [data-pos-form] > .form-grid {
        grid-template-columns: 1fr !important;
        gap: .9rem;
    }
    [data-pos-form] > .form-grid > label {
        grid-template-rows: auto 48px auto;
    }
    [data-pos-form] > .form-grid > label:last-child::after {
        display: none;
    }
}

/* Milestone 41 custom-role builder: module-aware, aligned and collapsible */
.role-builder {
    margin-top: 1rem;
}
.role-builder-heading,
.role-permissions-heading {
    max-width: 760px;
}
.role-builder-heading h2,
.role-permissions-heading h2 {
    margin-bottom: .3rem;
}
.role-builder-heading > p:last-child,
.role-permissions-heading > p:last-child {
    margin-top: 0;
    color: var(--muted);
}
.role-identity-fields {
    width: min(100%, 760px);
    margin: 1.25rem 0 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.role-field {
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-rows: auto 48px auto;
    gap: .45rem;
    align-content: start;
}
.role-field > span {
    font-weight: 800;
}
.role-field input,
.role-field select {
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
}
.role-field small {
    min-height: 1.35rem;
    color: var(--muted);
    font-weight: 400;
}
.role-permission-groups {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
}
.permission-module {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.permission-module > summary {
    min-height: 78px;
    padding: 1rem 1.1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style-position: outside;
}
.permission-module > summary::marker {
    color: var(--gold);
}
.permission-module[open] > summary {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--canvas) 72%, var(--surface));
}
.permission-module-copy {
    min-width: 0;
    display: grid;
    gap: .2rem;
}
.permission-module-copy > strong {
    color: var(--ink);
    font-size: 1.02rem;
}
.permission-module-copy > small {
    color: var(--muted);
    font-weight: 400;
}
.permission-count {
    padding: .35rem .65rem;
    border-radius: 999px;
    color: var(--navy-900);
    background: var(--gold-light);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}
.permission-module-body {
    padding: 1rem;
}
.permission-module-toolbar {
    margin-bottom: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.permission-module-toolbar > span {
    color: var(--muted);
    font-size: .84rem;
}
.permission-module-toolbar .table-action {
    min-height: 38px;
}
.permission-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: stretch;
}
.role-permission-groups .permission-item {
    min-width: 0;
    min-height: 84px;
    margin: 0;
    padding: .85rem;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}
.role-permission-groups .permission-item:has(input:checked) {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold-light) 16%, var(--surface));
}
.role-permission-groups .permission-item input {
    margin: .18rem 0 0;
}
.role-permission-groups .permission-item span {
    min-width: 0;
    align-content: start;
    gap: .25rem;
}
.role-permission-groups .permission-item strong {
    color: var(--ink);
    line-height: 1.3;
}
.role-permission-groups .permission-item small {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35;
}
[data-theme="dark"] .permission-module[open] > summary,
[data-theme="dark"] .role-permission-groups .permission-item:has(input:checked) {
    background: #16263a;
}
[data-theme="dark"] .permission-count {
    color: #f8e4ad;
    background: #493a16;
}
@media (max-width: 760px) {
    .permission-options {
        grid-template-columns: 1fr;
    }
    .permission-module > summary {
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
    }
    .permission-count {
        width: max-content;
    }
    .permission-module-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .permission-module-toolbar .row-actions,
    .permission-module-toolbar .table-action {
        width: 100%;
    }
    .permission-module-toolbar .table-action {
        justify-content: center;
    }
}

/* Milestone 41 trial-balance presentation hotfix */
.trial-balance-card {
    overflow: hidden;
}
.trial-balance-total-row td {
    background: color-mix(in srgb, var(--canvas) 72%, var(--surface));
    border-top: 2px solid var(--line);
}
.trial-balance-checks {
    padding: 1.2rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--canvas) 55%, var(--surface));
}
.trial-balance-checks-heading h2 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
}
.trial-balance-checks-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}
.trial-balance-check-grid {
    margin-top: .85rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.trial-balance-check {
    min-width: 0;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--surface);
}
.trial-balance-check.is-balanced {
    border-left-color: #15966f;
}
.trial-balance-check.is-unbalanced {
    border-left-color: #c64b47;
}
.trial-balance-check-title,
.trial-balance-check-amount {
    display: grid;
    gap: .25rem;
}
.trial-balance-check-title {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
}
.trial-balance-check.is-balanced .trial-balance-check-title > strong {
    color: #087455;
}
.trial-balance-check.is-unbalanced .trial-balance-check-title > strong {
    color: #a12e2a;
}
.trial-balance-check-amount {
    text-align: right;
}
.trial-balance-check-amount span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.trial-balance-explanation {
    margin: .85rem 0 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.5;
}
[data-theme="dark"] .trial-balance-total-row td,
[data-theme="dark"] .trial-balance-checks {
    background: #132338;
}
[data-theme="dark"] .trial-balance-check.is-balanced .trial-balance-check-title > strong {
    color: #7fe1bd;
}
[data-theme="dark"] .trial-balance-check.is-unbalanced .trial-balance-check-title > strong {
    color: #ffaaa6;
}
@media (max-width: 760px) {
    .trial-balance-check-grid {
        grid-template-columns: 1fr;
    }
    .trial-balance-check {
        align-items: flex-start;
        flex-direction: column;
    }
    .trial-balance-check-amount {
        width: 100%;
        text-align: left;
    }
}

/* Milestone 41.0.7 shared Back control and clearer statement empty state */
.page-back-button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.page-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
}
.page-header-actions > .button,
.page-header-actions > .table-action {
    margin: 0;
}
.topbar .account-area .page-back-button {
    order: -1;
}
.accounting-empty-help {
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    background: color-mix(in srgb, var(--canvas) 62%, var(--surface));
}
.accounting-empty-help > strong {
    color: var(--ink);
}
.accounting-empty-help p {
    margin: .35rem 0 .85rem;
    color: var(--muted);
    line-height: 1.5;
}
[data-theme="dark"] .accounting-empty-help {
    background: #132338;
}
@media (max-width: 760px) {
    .page-header-actions {
        width: 100%;
        justify-content: stretch;
    }
    .page-header-actions > .button,
    .page-header-actions > .table-action {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
}