/* Office Stock - one calm blue accent, soft neutrals, large readable text. */
:root {
  --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8;
  --s50: #f8fafc; --s100: #f1f5f9; --s200: #e2e8f0; --s300: #cbd5e1; --s400: #94a3b8; --s500: #64748b; --s600: #475569;
  --s700: #334155; --s800: #1e293b; --s900: #0f172a;
  --red-50: #fef2f2; --red-600: #dc2626; --red-700: #b91c1c;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-700: #b45309;
  --green-50: #ecfdf5; --green-100: #d1fae5; --green-700: #047857;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--s50); color: var(--s800); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
h1, h2, h3 { margin: 0; color: var(--s900); }
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.muted { color: var(--s500); }
.small { font-size: .8125rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.stack > * + * { margin-top: 1rem; }

/* layout */
.shell { min-height: 100vh; display: flex; }
.sidebar { width: 256px; flex: none; background: #fff; border-right: 1px solid var(--s200); display: flex; flex-direction: column; }
.brand { height: 64px; display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem; border-bottom: 1px solid var(--s200); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; }
.brand-name { font-size: 1.125rem; font-weight: 700; color: var(--s900); }
.nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--s600); }
.nav a:hover { background: var(--s100); color: var(--s900); text-decoration: none; }
.nav a.active { background: var(--brand-50); color: var(--brand-700); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 1.5rem; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--s200); backdrop-filter: blur(6px); }
.topbar .who { text-align: right; line-height: 1.2; }
.topbar .who b { display: block; font-size: .875rem; color: var(--s900); }
.topbar .who span { font-size: .75rem; color: var(--s500); }
.topbar-right { display: flex; align-items: center; gap: .5rem; }
.menu-btn { display: none; }
.content { width: 100%; max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem; flex: 1; }
.scrim { display: none; }
@media (max-width: 1023px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .15s; box-shadow: 0 10px 30px rgba(0,0,0,.2); width: 272px; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 40; }
  .menu-btn { display: inline-flex; }
  .topbar .branch-name { display: none; }
  .content { padding: 1.25rem 1rem; }
}
@media (max-width: 640px) { .hide-sm { display: none; } }

/* page header */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; }
.page-header p { margin: .25rem 0 0; font-size: .875rem; color: var(--s500); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* cards, tiles */
.card { background: #fff; border: 1px solid var(--s200); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--s100); }
.card-head h2 { font-size: 1rem; font-weight: 600; }
.card-body { padding: 1.25rem; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.tile { display: block; background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); color: inherit; }
.tile:hover { border-color: var(--brand-500); text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.tile .label { font-size: .875rem; color: var(--s500); }
.tile .value { margin-top: .5rem; font-size: 1.875rem; font-weight: 700; color: var(--s900); }
.tile .value.warn { color: var(--amber-700); } .tile .value.bad { color: var(--red-600); }
.tile .note { margin-top: .25rem; font-size: .75rem; color: var(--s500); }
.mt { margin-top: 1.5rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; background: var(--brand-600); color: #fff; line-height: 1.25; }
.btn:hover { background: var(--brand-700); text-decoration: none; color: #fff; }
.btn-secondary { background: #fff; color: var(--s700); border-color: var(--s300); }
.btn-secondary:hover { background: var(--s50); color: var(--s900); }
.btn-danger { background: var(--red-600); } .btn-danger:hover { background: var(--red-700); }
.btn-danger-outline { background: #fff; color: var(--red-700); border-color: #fca5a5; } .btn-danger-outline:hover { background: var(--red-50); color: var(--red-700); }
.btn-ghost { background: transparent; color: var(--s600); } .btn-ghost:hover { background: var(--s100); color: var(--s900); }
.btn-sm { padding: .25rem .625rem; font-size: .8125rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-700); cursor: pointer; font-weight: 500; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--red-600); }
form.inline { display: inline; }

/* alerts / messages */
.alert { padding: .75rem 1rem; border-radius: 8px; font-size: .875rem; margin-bottom: 1rem; }
.alert-error { background: var(--red-50); color: var(--red-700); }
.alert-success { background: var(--green-50); color: var(--green-700); }
.alert-warning, .alert-info { background: var(--amber-50); color: var(--amber-700); }
.notice { background: var(--s50); border-radius: 8px; padding: .75rem 1rem; font-size: .875rem; color: var(--s600); }

/* tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--s500); font-weight: 600;
  padding: .625rem 1rem; background: var(--s50); border-bottom: 1px solid var(--s200); white-space: nowrap; }
table.data td { padding: .75rem 1rem; border-bottom: 1px solid var(--s100); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--s50); }
table.data th.num, table.data td.num { text-align: right; }
table.data tfoot td { font-weight: 700; background: var(--s50); border-top: 1px solid var(--s200); }
.empty { padding: 3rem 1rem; text-align: center; }
.empty h3 { font-size: 1rem; } .empty p { margin: .25rem 0 0; color: var(--s500); font-size: .875rem; }

/* badges */
.badge { display: inline-block; padding: .125rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-gray { background: var(--s100); color: var(--s600); }
.badge-blue { background: var(--brand-100); color: var(--brand-700); }
.badge-green { background: var(--green-100); color: var(--green-700); }
.badge-amber { background: var(--amber-100); color: var(--amber-700); }
.badge-red { background: #fee2e2; color: var(--red-700); }

/* forms */
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label.lbl { display: block; font-size: .875rem; font-weight: 500; color: var(--s700); margin-bottom: .25rem; }
.field .req { color: var(--red-600); }
.field .hint { font-size: .75rem; color: var(--s500); margin-top: .25rem; }
.field .err { font-size: .875rem; color: var(--red-600); margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea, .input {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--s300); border-radius: 8px; background: #fff; font: inherit; font-size: .875rem; color: var(--s900); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-600); outline-offset: 0; border-color: var(--brand-600); }
input.invalid, select.invalid { border-color: var(--red-600); }
textarea { min-height: 4.5rem; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 1rem; height: 1rem; accent-color: var(--brand-600); }
.check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--s700); }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; padding: 1rem 1.25rem; border-bottom: 1px solid var(--s100); }
.filters .field { min-width: 9rem; flex: 1; } .filters .field.grow { flex: 2; min-width: 12rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.narrow { max-width: 40rem; } .medium { max-width: 52rem; }

/* line items */
.lines { display: flex; flex-direction: column; gap: .75rem; }
.line { display: grid; gap: .75rem; align-items: start; grid-template-columns: minmax(0, 3fr) repeat(var(--cols, 1), minmax(0, 1fr)) auto; }
.line .cell-label { display: none; font-size: .75rem; color: var(--s500); }
.line .unit { font-size: .75rem; color: var(--s500); margin-top: .125rem; }
.line .err { font-size: .8125rem; color: var(--red-600); margin-top: .125rem; }
@media (max-width: 640px) { .line { grid-template-columns: 1fr 1fr; } .line > :first-child { grid-column: 1 / -1; } .line .cell-label { display: block; } }
.total-row { display: flex; justify-content: flex-end; gap: 1rem; font-size: .875rem; padding-top: .75rem; border-top: 1px solid var(--s100); }

/* pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; border-top: 1px solid var(--s100); font-size: .875rem; color: var(--s600); }

/* details */
dl.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: 0; }
dl.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--s500); }
dl.facts dd { margin: 0; font-size: .9375rem; color: var(--s900); }
@media (max-width: 640px) { dl.facts { grid-template-columns: 1fr; } }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--s100); font-size: .875rem; }
ul.rows li:last-child { border-bottom: 0; }
.pos { color: var(--green-700); font-weight: 600; } .neg { color: var(--red-600); font-weight: 600; }

/* permission picker */
.perm-list { border: 1px solid var(--s200); border-radius: 8px; }
.perm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--s100); }
.perm-row:last-child { border-bottom: 0; }
.perm-row .name { font-size: .875rem; font-weight: 500; color: var(--s900); } .perm-row .hint { font-size: .75rem; color: var(--s500); }
.perm-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* auth */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-box { width: 100%; max-width: 24rem; }
.auth-box .brand-mark { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 1rem; }

/* tabs / segmented */
.seg { display: inline-flex; border: 1px solid var(--s300); border-radius: 8px; overflow: hidden; background: #fff; }
.seg a { padding: .375rem .875rem; font-size: .875rem; font-weight: 500; color: var(--s600); }
.seg a.on { background: var(--brand-50); color: var(--brand-700); }
.seg a:hover { text-decoration: none; background: var(--s50); }

table.data td.strong { font-weight: 500; color: var(--s900); }
.print-only { display: none; }

@media print {
  .print-only { display: block; }
  .sidebar, .topbar, .no-print, .scrim { display: none !important; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
  .card { box-shadow: none; }
}