:root {
  color-scheme: light;
  --background:#f6f7fb;
  --surface:#fff;
  --text:#191c2b;
  --muted:#555c71;
  --border:#e5e8f0;
  --accent:#167044;
  --accent-dark:#125637;
  --accent-light:#e6f4ec;
  --negative:#a23b42;
  --positive:#176649;
  --radius:15px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing:border-box }
body { margin:0; color:var(--text); background:var(--background); font-size:14px; line-height:1.48 }
a { color:inherit; text-decoration:none }
button, input, select, textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed; opacity:.60 }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #248653; outline-offset:2px }
h1,h2,h3,p { margin:0 }
h1 { font-size:clamp(27px,3vw,39px); line-height:1.16; letter-spacing:-.045em }
h2 { font-size:19px; letter-spacing:-.025em }
h3 { font-size:15px }
svg { display:block; width:20px; height:20px; flex:none }
[hidden] { display:none!important }
.sr-only { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap }
.layout { display:grid; min-height:100vh; grid-template-columns:235px minmax(0,1fr) }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; background:var(--surface); padding:25px 15px 18px; border-right:1px solid var(--border); z-index:2 }
.brand, .workspace-label { display:flex; align-items:center; gap:10px; padding:0 10px }
.brand-mark,.workspace-mark { display:grid; place-items:center; width:39px; height:39px; flex:none; border-radius:11px; background:var(--accent); color:white }
.brand strong,.workspace-label strong { display:block; line-height:1.2; letter-spacing:-.02em }
.brand small,.workspace-label small { display:block; margin-top:4px; color:var(--muted); font-size:11px }
.navigation { display:grid; gap:5px; margin-top:44px }
.navigation a { display:flex; align-items:center; gap:12px; min-height:43px; padding:9px 11px; border-radius:9px; color:var(--muted); font-weight:650 }
.navigation a:hover { color:var(--text); background:#f1f8f4 }
.navigation a[aria-current="page"] { color:var(--accent-dark); background:var(--accent-light) }
.navigation svg { width:18px; height:18px }
.workspace-label { margin-top:auto; border-top:1px solid var(--border); padding-top:18px }
.workspace-mark { width:34px; height:34px; background:#e6f4ec; color:var(--accent-dark) }
.workspace-mark svg { width:17px; height:17px }
.workspace-label strong { font-size:12px }
.topbar { min-height:68px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:11px; padding:10px 32px }
#breadcrumb { color:var(--muted); font-size:13px; display:flex; align-items:center; gap:7px; min-width:0 }
#breadcrumb strong { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#breadcrumb svg { width:14px; height:14px }
.date-control { display:flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); margin-left:auto; color:var(--muted); white-space:nowrap }
.date-control svg { width:15px; height:15px }
.date-control input { min-width:0; width:139px; color:var(--text); border:0; background:transparent; padding:2px }
.mobile-menu { display:none!important }
main { max-width:1510px; margin:0 auto; padding:30px 32px 44px }
.page-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px }
.page-heading p { margin-top:8px; color:var(--muted) }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.button,.icon-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:38px; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); font-weight:650; text-align:center }
.button:hover,.icon-button:hover { background:#f1f8f4; border-color:#cce3d6 }
.button.primary { background:var(--accent); border-color:var(--accent); color:#fff }
.button.primary:hover { background:var(--accent-dark) }
.button.small { padding:5px 9px; min-height:32px; font-size:12px }
.button svg,.icon-button svg { width:16px; height:16px }
.icon-button { width:36px; min-height:36px; padding:0 }
.hero { min-height:167px; display:flex; align-items:center; position:relative; overflow:hidden; isolation:isolate; padding:25px 27px; margin-bottom:21px; background:#153b2a; color:white; border-radius:var(--radius) }
.hero-content { z-index:1 }
.hero h2 { font-size:clamp(22px,3vw,28px); letter-spacing:-.04em }
.hero p { color:#d6ecdf; margin:6px 0 15px; max-width:460px }
.hero .button { color:#174831; background:#fff; border-color:#fff }
.hero .button:hover { background:#e2f4e9 }
.hero-graphic { position:absolute; inset:0 0 0 auto; width:48%; display:grid; place-items:center; background:linear-gradient(125deg,transparent 18%,#236c49 100%); color:#c0e7ce; pointer-events:none }
.hero-graphic::before,.hero-graphic::after { content:""; position:absolute; border:1px solid #84bda0; border-radius:42px; transform:rotate(-28deg); width:240px; height:116px; opacity:.55 }
.hero-graphic::after { width:310px; height:175px; opacity:.34 }
.hero-graphic svg { width:58px; height:58px; stroke-width:1.15; filter:drop-shadow(0 0 12px #70ba90) }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:21px }
.metric,.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); min-width:0 }
.metric { padding:15px; display:flex; flex-direction:column; align-items:flex-start; gap:5px }
.metric strong { font-size:clamp(18px,2vw,24px); letter-spacing:-.045em; line-height:1.23; overflow-wrap:anywhere }
.metric .metric-title { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:680 }
.metric .metric-icon,.empty-icon,.step-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--accent-dark); background:var(--accent-light); flex:none }
.metric-icon svg,.step-icon svg { width:16px; height:16px }
.metric:nth-child(2) .metric-icon { color:#1d6a54; background:#e5f4ef }
.metric:nth-child(3) .metric-icon { color:#9a5721; background:#fdf0df }
.metric:nth-child(4) .metric-icon { color:#3c62a0; background:#eaf0fa }
.muted,.metric small { color:var(--muted) }
.metric small { font-size:11px }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.68fr) minmax(0,1fr); gap:15px; align-items:start }
.dashboard-grid .panel + .panel { margin:0 }
.panel + .panel { margin-top:17px }
.panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border) }
.panel-head p { margin-top:4px; color:var(--muted); font-size:12px }
.panel-body { padding:17px 18px }
.table-wrap { overflow:auto }
table { width:100%; border-collapse:collapse; text-align:left; font-variant-numeric:tabular-nums }
th,td { padding:12px 15px; border-bottom:1px solid #edf0f5; vertical-align:middle }
th { background:#fafbfe; color:var(--muted); font-size:11px; letter-spacing:.035em; text-transform:uppercase; font-weight:720; white-space:nowrap }
td { font-size:13px; overflow-wrap:anywhere }
td:first-child,th:first-child { padding-left:18px }
td:last-child,th:last-child { padding-right:18px }
tbody tr:last-child td { border-bottom:0 }
.num { text-align:right; white-space:nowrap }
.row-link,.text-link { color:var(--accent-dark); font-weight:700 }
.row-link:hover,.text-link:hover { text-decoration:underline }
.inline-button { border:0; padding:0; background:transparent; cursor:pointer; text-align:left }
.subtext { display:block; color:var(--muted); font-size:11px; margin-top:3px }
.tag { display:inline-flex; padding:3px 8px; border-radius:20px; background:#eff0f5; color:#4c5366; font-size:11px; font-weight:700; white-space:nowrap }
.tag.pending { background:#fff2d8; color:#75420b }
.tag.cleared { background:#e4f4eb; color:#176649 }
.tag.returned { background:#fbeaec; color:#973e46 }
.empty,.loading { display:grid; place-items:center; text-align:center; padding:36px 14px; color:var(--muted); gap:7px }
.empty strong { color:var(--text) }
.empty-icon { width:39px; height:39px; margin-bottom:3px }
.empty .button { margin-top:6px }
.steps { list-style:none; margin:0; padding:0 }
.steps a { display:flex; align-items:center; gap:10px; padding:13px 15px }
.steps li + li { border-top:1px solid var(--border) }
.steps a:hover { background:#f3faf6 }
.steps strong { display:block; font-size:13px }
.steps small { color:var(--muted) }
.steps .step-arrow { margin-left:auto; color:var(--muted) }
.steps .step-arrow svg { width:15px; height:15px }
.tabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:15px }
.tabs .button.active { color:var(--accent-dark); border-color:#c6e3d1; background:var(--accent-light) }
.search { width:min(250px,100%) }
.search input, .field input,.field select,.field textarea,.line-fields input,.line-fields select { display:block; width:100%; border:1px solid #cfd4e1; border-radius:8px; background:white; color:var(--text); min-height:40px; padding:7px 10px }
.field textarea { min-height:68px; resize:vertical }
.field,.search { min-width:0 }
.field > span,.line-fields label > span { display:block; font-weight:650; font-size:12px; margin-bottom:5px }
.field small { color:var(--muted); display:block; margin-top:5px; font-weight:400 }
.contact-row { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); margin-top:10px }
.contact-row span,.contact-row a { display:flex; align-items:center; gap:6px }
.contact-row svg { width:15px;height:15px }
.statement-note { color:var(--muted); font-size:12px; padding:12px 18px; border-top:1px solid var(--border) }
.amount-positive { color:var(--positive) }
.amount-negative { color:var(--negative) }
dialog { width:min(580px, calc(100% - 24px)); max-height:calc(100vh - 30px); border:1px solid var(--border); border-radius:17px; color:var(--text); padding:0; box-shadow:0 20px 70px #16132e33 }
dialog.wide { width:min(800px, calc(100% - 24px)) }
dialog::backdrop { background:#16152a80 }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:17px 21px; border-bottom:1px solid var(--border) }
.dialog-body { padding:19px 21px }
.dialog-footer { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; padding:13px 21px; border-top:1px solid var(--border) }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px }
.span-all { grid-column:1/-1 }
.form-error { color:var(--negative); margin:0 21px 14px; font-size:13px }
.line-fields { display:grid; grid-template-columns:minmax(145px,1.6fr) minmax(55px,.55fr) minmax(90px,1fr) 34px; align-items:start; gap:8px; margin-bottom:10px }
.line-fields .remove-line { margin-top:23px }
.line-fields .available { display:block; margin-top:4px; color:var(--muted); font-size:11px }
.line-total { display:flex; justify-content:space-between; align-items:center; margin-top:13px; padding-top:11px; border-top:1px solid var(--border) }
.invoice-sheet { background:white; border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-inline:auto; max-width:850px }
.invoice-intro { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-bottom:17px }
.invoice-sheet table { min-width:430px }
.toast { position:fixed; right:20px; bottom:20px; z-index:5; background:#163e2a; color:white; padding:11px 16px; border-radius:9px; box-shadow:0 5px 20px #20163332; max-width:calc(100% - 40px) }
@media (max-width:1050px) { .layout { grid-template-columns:195px minmax(0,1fr) } main,.topbar { padding-left:20px; padding-right:20px } }
@media (max-width:850px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)) } .dashboard-grid { grid-template-columns:1fr } }
@media (max-width:650px) {
  .layout { display:block }
  .mobile-menu { display:inline-flex!important }
  .sidebar { display:none; position:fixed; top:57px; left:0; bottom:0; width:min(235px,82vw); height:auto; box-shadow:0 8px 35px #21163a20 }
  .sidebar.open { display:flex }
  .topbar { min-height:57px; padding:8px 12px }
  #breadcrumb .root-crumb,#breadcrumb .crumb-icon { display:none }
  .date-control { padding:3px 5px }
  .date-control input { width:113px; font-size:12px }
  .date-control svg { display:none }
  main { padding:19px 12px 32px }
  .hero { padding:18px; min-height:150px }
  .hero-graphic { opacity:.35; width:37% }
  .hero-graphic svg { width:40px; height:40px }
  .metric { padding:11px }
  .metrics { gap:9px }
  .form-grid { gap:10px }
  .line-fields { grid-template-columns:minmax(85px,1.4fr) minmax(42px,.48fr) minmax(61px,.72fr) 29px; gap:4px }
  .line-fields input,.line-fields select { padding:5px }
  .line-fields .remove-line { width:28px }
  .dialog-body,.dialog-head,.dialog-footer { padding-left:12px; padding-right:12px }
  .invoice-sheet { padding:12px }
}
@media print {
  body,.layout,main { display:block; margin:0; padding:0; background:white }
  .sidebar,.topbar,.page-heading,.toast { display:none!important }
  .invoice-sheet { max-width:none; margin:0; padding:0; border:0 }
  .invoice-sheet .table-wrap { overflow:visible }
}
.contact-space { height:16px }
.brand-mark { position:relative; overflow:hidden; background:#fff; border:1px solid #d5e8dc }
.brand-mark img { position:absolute; width:54px; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%) }
.admin-gate { display:grid; min-height:100dvh; place-items:center; padding:22px; background:radial-gradient(ellipse at 50% 12%,#e1f3e8,#f6f7fb 55%) }
.admin-card { width:min(100%,430px); background:#fff; padding:25px; border:1px solid #dce9e1; border-radius:18px; box-shadow:0 18px 60px #123e2b14 }
.admin-logo { display:block; width:min(240px,100%); margin:-10px auto 0; }
.admin-card h1 { font-size:29px; margin:4px 0 8px }
.admin-card form { display:grid; gap:13px; margin-top:20px }
.admin-card .form-error { margin:0 }
.company-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:14px; margin-bottom:20px; border-bottom:2px solid #19744a }
.company-logo { width:min(250px,100%); max-height:125px; object-fit:contain; object-position:left center }
.company-contact { color:var(--muted); font-size:12px; text-align:right }
.company-contact strong { display:block; color:var(--text); font-size:13px; margin-bottom:3px }
.invoice-summary { margin:12px 0 0 auto; max-width:345px }
.invoice-summary p { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0 }
.quote-lines-note { color:var(--muted); font-size:12px; margin:0 0 10px }
.bill-payment { border:1px solid var(--border); border-radius:10px; padding:12px }
.bill-payment > .form-grid { margin-top:10px }
.report-sheet .panel + .panel { margin-top:16px }
.report-sheet .company-header { display:none }
.report-period { margin:0 0 13px; color:var(--muted) }
@media (max-width:650px) {
  .company-header { flex-direction:column; align-items:flex-start; gap:5px }
  .company-contact { text-align:left }
  .company-logo { width:185px; max-height:90px }
  .topbar .lock-button { width:32px; min-height:32px }
}
@media print {
  @page { margin:14mm }
  .report-sheet .company-header { display:flex }
  .company-logo { width:190px; max-height:95px }
  .company-header,.invoice-intro { break-inside:avoid }
  .company-header { flex-direction:row; align-items:center }
  .company-contact { text-align:right }
  .report-sheet .panel { border:0 }
  .report-sheet .panel-head { padding-left:0 }
  .report-sheet .table-wrap { overflow:visible }
  .report-sheet .row-link,.invoice-sheet .row-link { color:#191c2b }
  .tabs { display:none }
}