:root{
  --ink:#1C1C1C; --navy:#23262A; --navy-deep:#17191C; --paper:#F5F5F3; --paper-raised:#ffffff;
  --line:#E7E5DF; --gold:#B8862E; --gold-soft:#F2E4CB; --gold-dark:#8F6A22;
  --green:#2f6b4f; --red:#a13d34; --muted:#6B6D70;
  --radius:4px; --serif:'Poppins', sans-serif; --sans:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy-deep); border-bottom:3px solid var(--gold); box-shadow:0 2px 12px rgba(0,0,0,.18);}
.topbar-inner{max-width:1200px; margin:0 auto; padding:1.05rem 1.5rem; display:flex; align-items:center; gap:2rem;}
.brand{font-family:var(--serif); font-weight:700; font-size:1.05rem; color:#fff; text-decoration:none; display:flex; align-items:center; gap:.7rem;}
.brand-logo{height:34px; width:auto; display:block;}
.brand-tag{
  font-family:var(--mono, 'Inter', sans-serif); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy-deep); background:var(--gold); padding:.22rem .5rem; border-radius:20px; line-height:1;
}
.brand .gold{color:var(--gold);}
.topbar nav{display:flex; gap:1.4rem; flex:1;}
.topbar nav a{color:#C7C9CC; text-decoration:none; font-size:.88rem; font-weight:600; padding:.3rem 0; border-bottom:2px solid transparent; text-transform:uppercase;}
.topbar nav a:hover{color:#fff;}
.topbar nav a.active{color:var(--gold); border-bottom-color:var(--gold);}
.topbar-right{display:flex; align-items:center; gap:1rem;}
.user-name{color:#9BA0A5; font-size:.82rem;}
.btn-logout{color:#C7C9CC; text-decoration:none; font-size:.82rem; border:1px solid rgba(255,255,255,.25); padding:.4rem .8rem; border-radius:var(--radius); text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:2.6rem; box-sizing:border-box;}
.btn-logout:hover{background:rgba(255,255,255,.08);}

/* ---------- Layout ---------- */
.page-wrap{max-width:1200px; margin:0 auto; padding:2rem 1.5rem 4rem;}
.login-wrap{max-width:420px; padding-top:0; margin-top:-2.5rem; position:relative; z-index:2;}

.login-hero{background:var(--navy-deep); border-bottom:3px solid var(--gold); padding:3.5rem 1.5rem 5rem; text-align:center;}
.login-hero-inner{max-width:420px; margin:0 auto;}
.login-hero-logo{height:52px; width:auto; margin:0 auto 1rem;}
.login-hero-tag{
  font-family:var(--mono, 'Inter', sans-serif); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0;
}

.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;}
.page-head h1{font-family:var(--serif); font-size:1.6rem; font-weight:700; margin:0; color:var(--navy-deep);}
.page-head p{color:var(--muted); font-size:.9rem; margin:.3rem 0 0;}
/* Action button groups in a page-head (e.g. "New Invoice", "Record
   Payment", "Credit Note", "Statement") — wraps to multiple rows on a
   narrow screen instead of overflowing off the edge of the viewport. */
.page-head-actions{display:flex; gap:.6rem; flex-wrap:wrap;}

/* ---------- Cards ---------- */
.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; margin-bottom:1.5rem; box-shadow:0 1px 3px rgba(23,25,28,.05); transition:box-shadow .15s ease;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fbfaf7,#ffffff); border-radius:6px 6px 0 0;}
.card-head h2{font-family:var(--serif); font-size:1.02rem; font-weight:600; margin:0; color:var(--navy-deep);}
.card-body{padding:1.25rem 1.3rem 1.4rem; overflow-x:auto;}
/* A visible (not the invisible default mobile) scrollbar on any
   card-body that actually needs to scroll — e.g. a wide data table
   with more columns than fit a phone screen — so there's a clear,
   persistent visual sign that content continues sideways, instead of
   the table just looking cut off with no indication it's scrollable. */
.card-body::-webkit-scrollbar{height:6px;}
.card-body::-webkit-scrollbar-track{background:var(--paper);}
.card-body::-webkit-scrollbar-thumb{background:var(--gold); border-radius:3px;}
.card-body{scrollbar-width:thin; scrollbar-color:var(--gold) var(--paper);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); font-weight:600; font-size:.85rem; padding:.6rem 1.15rem; border-radius:6px; border:1px solid var(--navy-deep); cursor:pointer; text-decoration:none; transition:transform .08s ease, background .15s ease, box-shadow .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy-deep); color:#fff;}
.btn-primary:hover{background:var(--navy); color:#fff; box-shadow:0 3px 10px rgba(23,25,28,.22);}
.btn-secondary{background:transparent; color:var(--navy-deep);}
.btn-secondary:hover{background:var(--gold-soft); border-color:var(--gold);}
.btn-secondary.active{background:var(--navy-deep); color:#fff; border-color:var(--navy-deep);}
.btn-danger{background:transparent; color:var(--red); border-color:var(--red);}
.btn-danger:hover{background:#f6e6e4;}
.btn-sm{padding:.35rem .7rem; font-size:.78rem;}
.btn-block{width:100%; justify-content:center;}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem;}
.dashboard-summary-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1rem;}
.form-grid.single{grid-template-columns:1fr;}
.field{margin-bottom:1rem;}
.field label{display:block; font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:.35rem;}
.field .hint{display:block; font-weight:400; font-size:.75rem; color:var(--muted); margin-top:.2rem;}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field input[type=date],.field input[type=password],
.field select, .field textarea{
  width:100%; padding:.55rem .65rem; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--sans); font-size:.9rem; background:#fff; color:var(--navy-deep);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
.field textarea{min-height:90px; resize:vertical;}
.checkbox-field{display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;}
.check-row{display:flex; align-items:flex-start; gap:.6rem; padding:.55rem 0; border-bottom:1px dashed var(--line);}

/* ---------- Client health score ---------- */
.health-card.health-green{border-left:4px solid #3A7355;}
.health-card.health-amber{border-left:4px solid #B8862E;}
.health-card.health-red{border-left:4px solid #A6423A;}
.health-score-circle{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.15rem; flex-shrink:0; color:#fff;}
.health-score-circle.health-green{background:#3A7355;}
.health-score-circle.health-amber{background:#B8862E;}
.health-score-circle.health-red{background:#A6423A;}
.health-issues{margin:.3rem 0 0; padding-left:1.2rem; font-size:.85rem;}

.health-category-table{border-top:1px solid var(--line); margin-top:.2rem;}
.health-category-row{display:flex; align-items:center; gap:.6rem; padding:.55rem 1.25rem; border-bottom:1px dashed var(--line); font-size:.85rem;}
.health-category-row:last-child{border-bottom:none;}
.health-category-label{width:150px; flex-shrink:0; font-weight:600; color:var(--navy-deep);}
.health-category-score{width:50px; flex-shrink:0; font-weight:700;}
.health-category-detail{flex:1; color:var(--muted); font-size:.8rem;}
.health-issues li{margin-bottom:.2rem;}
.health-issue-red{color:#A6423A;}
.health-issue-amber{color:#8F6A22;}

/* Compact health dot for list views */
.health-dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.4rem; vertical-align:middle;}
.health-dot.health-green{background:#3A7355;}
.health-dot.health-amber{background:#B8862E;}
.health-dot.health-red{background:#A6423A;}
.services-picker{border:1px solid var(--line); border-radius:6px; max-height:420px; overflow-y:auto; padding:.5rem .9rem;}
.services-group{border-bottom:1px solid var(--line); padding:.4rem 0;}
.services-group:last-child{border-bottom:none;}
.services-group-label{font-weight:700; font-size:.85rem; color:var(--navy-deep); cursor:pointer; padding:.3rem 0; list-style:none;}
.services-group-label::-webkit-details-marker{display:none;}
.services-group-label::before{content:'▸ '; color:var(--gold-dark);}
details[open] > .services-group-label::before{content:'▾ ';}
.services-group .check-row{padding-left:.5rem;}
.edit-panel{background:#FAF9F6; border:1px solid var(--line); border-radius:6px; padding:1rem; margin:.5rem 0;}
.check-row:last-child{border-bottom:none;}
.check-row input[type=checkbox], .check-row input[type=radio]{margin-top:.2rem; width:16px; height:16px; accent-color:var(--navy-deep); flex-shrink:0;}
.check-row label{font-size:.86rem; color:var(--ink); cursor:pointer; font-weight:600;}
.check-row .hint{display:block; font-size:.78rem; color:var(--muted); margin-top:.15rem; font-weight:400;}
.checkbox-field input{width:17px; height:17px; accent-color:var(--navy-deep);}
.checkbox-field label{font-size:.86rem; font-weight:600;}

.error-box{background:#f6e6e4; border:1px solid #e6bdb8; color:var(--red); padding:.8rem 1rem; border-radius:var(--radius); font-size:.86rem; margin-bottom:1.2rem;}
.success-box{background:#e6f0ea; border:1px solid #bcdac9; color:var(--green); padding:.8rem 1rem; border-radius:var(--radius); font-size:.86rem; margin-bottom:1.2rem;}

/* ---------- Tables ---------- */
table.data{width:100%; border-collapse:collapse; font-size:.87rem;}
table.data th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.6rem .5rem; border-bottom:1.5px solid var(--navy-deep);}
table.data td{padding:.65rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle;}
table.data tr:hover td{background:#fbfaf7;}
table.data a.row-link{text-decoration:none; color:var(--navy-deep); font-weight:600;}
table.data a.row-link:hover{color:var(--gold-dark);}
.empty-state{padding:2.5rem 1rem; text-align:center; color:var(--muted); font-size:.9rem;}

/* ---------- Badges ---------- */
.badge{display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:20px;}
.badge-individual{background:#eef2f4; color:var(--navy);}
.badge-company{background:var(--gold-soft); color:var(--gold-dark);}
.badge-open{background:var(--gold-soft); color:var(--gold-dark);}
.badge-done{background:#e6f0ea; color:var(--green);}
.badge-urgent{background:#f6e6e4; color:var(--red);}
.badge-active{background:#e6f0ea; color:var(--green);}
.badge-inactive{background:#eef2f4; color:var(--muted);}

/* ---------- Saved calculation display (matches calculator styling) ---------- */
.due-card{background:var(--navy-deep); color:#fff; border-radius:var(--radius); padding:1.1rem 1.25rem;}
.due-card .label{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);}
.due-card .amount{font-family:var(--serif); font-size:1.6rem; font-weight:600; margin:.2rem 0 .1rem;}
.due-card .sub{font-size:.82rem; color:#aebac2;}
.result-line{display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; border-bottom:1px dotted var(--line); font-size:.88rem;}
.result-line:last-child{border-bottom:none;}
.result-line .val{white-space:nowrap; font-weight:600;}
.qual-banner{border-radius:var(--radius); padding:.8rem 1rem; font-size:.86rem; font-weight:600;}
.qual-yes{background:#e6f0ea; color:var(--green); border:1px solid #bcdac9;}
.qual-no{background:#f6e6e4; color:var(--red); border:1px solid #e6bdb8;}
.qual-neutral{background:#eef2f4; color:var(--navy); border:1px solid #cfd8dd;}

/* ---------- Deadline list (dashboard) ---------- */
.deadline-row{display:flex; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px dotted var(--line);}
.deadline-row:last-child{border-bottom:none;}
.deadline-date{flex:0 0 76px; text-align:center; background:var(--navy-deep); color:#fff; border-radius:var(--radius); padding:.45rem .2rem;}
.deadline-date.soon{background:var(--red);}
.deadline-date .day{font-size:1.15rem; font-weight:700; line-height:1; font-family:var(--serif);}
.deadline-date .month{font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold);}
.deadline-date.soon .month{color:#f5d9d5;}
.deadline-info{flex:1; min-width:0;}
.deadline-info h4{margin:0 0 .1rem; font-size:.9rem; font-weight:600;}
.deadline-info p{margin:0; font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.deadline-info a{text-decoration:none; color:var(--navy-deep);}
.deadline-info a:hover{color:var(--gold-dark);}

/* ---------- Tabs (client view) ---------- */
.tabs{display:flex; gap:.3rem; border-bottom:2px solid var(--line); margin-bottom:1.2rem; flex-wrap:wrap;}
.tab{padding:.6rem 1rem; font-size:.86rem; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px;}
.tab.active{color:var(--navy-deep); border-bottom-color:var(--gold);}

/* ---------- Login ---------- */
.login-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:2.25rem 2rem; box-shadow:0 12px 32px rgba(23,25,28,.14);}
.login-card h1{font-family:var(--serif); font-size:1.35rem; text-align:center; margin:0 0 .3rem; color:var(--navy-deep);}
.login-card p.sub{text-align:center; color:var(--muted); font-size:.85rem; margin:0 0 1.75rem;}

/* ---------- Misc ---------- */
.text-muted{color:var(--muted);}
.mb-0{margin-bottom:0 !important;}
.section-divider{border:none; border-top:1px solid var(--line); margin:1.3rem 0;}
.inline-form{display:inline;}

.site-footer{max-width:1200px; margin:0 auto; padding:0 1.5rem 2rem; font-size:.78rem; color:var(--muted);}

/* ---------- Client Portal header — deliberately separate from the
   staff .topbar nav rules above, so it never inherits the staff
   hamburger-menu behaviour (which needs a toggle button + JS this
   header doesn't have). Wraps onto its own lines at narrow widths
   instead of trying to collapse into a dropdown. ---------- */
.client-topbar-inner{flex-wrap:wrap; row-gap:.6rem; gap:1rem;}
.client-brand{font-family:'Poppins',sans-serif; font-weight:700; color:#fff; text-decoration:none; font-size:1rem;}
.client-brand-accent{color:var(--gold);}
.client-nav{display:flex; gap:1rem; flex-wrap:wrap;}
.client-nav a{color:#C7C9CC; text-decoration:none; font-size:.85rem; white-space:nowrap; text-transform:uppercase;}
.client-topbar-right{margin-left:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;}
.client-email{color:#C7C9CC; font-size:.85rem; word-break:break-all;}

@media (max-width:600px){
  .client-topbar-inner{padding:.9rem 1rem;}
  .client-brand{font-size:.92rem; width:100%;}
  .client-nav{width:100%; order:2; gap:1.1rem;}
  .client-topbar-right{margin-left:0; width:100%; order:3; justify-content:space-between;}
  .tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-left:-1.5rem; margin-right:-1.5rem; padding-left:1.5rem; padding-right:1.5rem;}
  .tabs a{white-space:nowrap; flex-shrink:0;}
}

@media (max-width:760px){
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; margin-left:auto;}
.nav-toggle span{display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.nav-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.nav-open span:nth-child(2){opacity:0;}
.nav-toggle.nav-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-user-mobile{display:none;}

/* "More" dropdown — consolidates the least-frequently-used staff
   links (Reports/Users/Audit Log) so the main nav bar doesn't
   overflow now that there are 11 top-level destinations. Opens on
   hover for desktop mouse users. */
.nav-dropdown{position:relative; display:flex; align-items:center;}
.nav-dropdown-label{color:#C7C9CC; font-size:.88rem; font-weight:600; padding:.3rem 0; cursor:pointer; border-bottom:2px solid transparent; text-transform:uppercase;}
.nav-dropdown:hover .nav-dropdown-label, .nav-dropdown.active .nav-dropdown-label{color:#fff;}
.nav-dropdown.active .nav-dropdown-label{color:var(--gold); border-bottom-color:var(--gold);}
.nav-dropdown-menu{display:none; position:absolute; top:100%; left:0; background:var(--navy-deep); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:.4rem 0; min-width:150px; box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:20;}
.nav-dropdown:hover .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{display:block; padding:.55rem 1rem; font-size:.85rem;}

@media (max-width:1050px){
  .nav-toggle{display:flex;}
  .topbar nav:not(.client-nav){
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy-deep);
    flex-direction:column; gap:0; padding:.5rem 0 1rem; border-bottom:3px solid var(--gold);
    box-shadow:0 12px 20px rgba(0,0,0,.2);
  }
  .topbar nav.nav-open:not(.client-nav){display:flex;}
  .topbar nav:not(.client-nav) a{padding:.85rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08);}
  .topbar{position:relative;}
  .topbar-right{display:none;}
  .nav-dropdown{display:flex; flex-direction:column; align-items:stretch;}
  .nav-dropdown-label{padding:.85rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); display:block;}
  .nav-dropdown-menu{display:block !important; position:static; box-shadow:none; border:none; border-radius:0; background:rgba(0,0,0,.15); padding:0;}
  .nav-dropdown-menu a{padding-left:2.5rem;}
  .nav-user-mobile{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem 0; margin-top:.5rem; border-top:1px solid rgba(255,255,255,.15);}
}

/* Month picker — explicit recurring-period selection for quotes/invoices.
   Appears as a full-width checkbox grid underneath each item, hidden
   until that item's own "Recurring" checkbox is ticked. */
.month-picker-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:.5rem; margin:.5rem 0;}
.year-select{font-size:.85rem; padding:.3rem .5rem; border:1px solid var(--line); border-radius:4px; margin-bottom:.3rem; font-weight:600;}
.month-picker-item{display:flex; align-items:center; gap:.4rem; font-size:.82rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:4px; cursor:pointer;}
.month-picker-item:has(input:checked){background:#FAF3E6; border-color:var(--gold);}
.month-row{display:none; padding:.6rem 1rem 1rem;}
.month-row.visible{display:block;}
.month-row-container{background:#FAFAF8;}

/* Version 40 Phase 10: shared responsive and accessibility refinements.
   Screen-only rules: statutory print pages retain their own print layout. */
@media screen {
  :focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
  .tab:hover, .tab:focus-visible {color:var(--navy-deep); background:#f4eee3;}
  .tab {font-family:var(--sans); white-space:nowrap;}
  .nav-dropdown:focus-within .nav-dropdown-menu {display:block;}
  .nav-dropdown-label {font-family:var(--sans); background:transparent; border-left:0; border-right:0; border-top:0; text-align:left;}
  .nav-dropdown-label:focus-visible {outline:3px solid var(--gold); outline-offset:2px;}
  .card, .page-head, .field, .form-grid, .dashboard-summary-grid {min-width:0;}
  .card-head {flex-wrap:wrap;}
  .card-body, .page-wrap, .page-container {min-width:0;}
  .card-body table.data {min-width:max-content;}
  .card-body {overscroll-behavior-x:contain;}
  .field input, .field select, .field textarea {max-width:100%;}
  .topbar nav a, .nav-dropdown-label {min-height:38px; align-content:center;}
  @media(max-width:760px) {
    .page-wrap {padding:1.1rem .85rem 2.5rem;}
    .page-container {padding-inline:.85rem;}
    .page-head h1 {font-size:1.35rem;}
    .card-head {padding:.9rem 1rem;}
    .card-body {padding:1rem;}
    .page-head-actions {width:100%;}
    .page-head-actions .btn {flex:1 1 auto; justify-content:center;}
    .dashboard-summary-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));}
    .tabs {margin-left:0; margin-right:0; padding-left:0; padding-right:0; scroll-padding-inline:.5rem;}
    .tab {padding:.75rem .85rem;}
    .client-nav {gap:.5rem .9rem;}
  }
  @media(max-width:420px) {
    .form-grid {grid-template-columns:minmax(0,1fr);}
    .page-head-actions .btn {flex-basis:100%;}
    .login-card {padding:1.5rem 1rem;}
  }
  @media(prefers-reduced-motion:reduce) {
    *, *::before, *::after {scroll-behavior:auto!important; transition:none!important; animation:none!important;}
  }
}
@media print {
  .nav-toggle, .topbar nav, .topbar-right {display:none!important;}
}

@media screen and (min-width:1051px) { .nav-dropdown.menu-expanded .nav-dropdown-menu {display:block;} }
@media screen and (max-width:1050px) { .nav-dropdown-label {width:100%;} }