/* ===== Design tokens and reset ===== */
:root {
  --brand-950: #102d3d;
  --brand-900: #15384c;
  --brand-800: #19435e;
  --brand-700: #1d4e6f;
  --brand-600: #276789;
  --brand-100: #e8f0f4;
  --brand-50: #f2f7f9;
  --ink-900: #17242d;
  --ink-700: #3d4c56;
  --ink-500: #65757f;
  --ink-400: #82909a;
  --surface: #ffffff;
  --canvas: #f5f7f8;
  --canvas-deep: #eef2f4;
  --border: #dfe6e9;
  --border-strong: #cbd6db;
  --success: #167454;
  --success-bg: #eaf6f0;
  --warning: #93610a;
  --warning-bg: #fff5df;
  --danger: #b42318;
  --danger-bg: #fff0ee;
  --info: #1d4e6f;
  --info-bg: #e9f1f6;
  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 45, 61, 0.04);
  --shadow-md: 0 10px 30px rgba(16, 45, 61, 0.09);
  --sidebar-width: 256px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink-900); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }
[hidden] { display: none !important; }
::selection { color: var(--brand-950); background: #d9e8ef; }
:focus-visible { outline: 3px solid rgba(39, 103, 137, 0.28); outline-offset: 2px; }

.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; color: #fff; background: var(--brand-700); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { color: #fff; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.text-muted { color: var(--ink-500); }
.text-small { font-size: 12px; }
.text-danger { color: var(--danger); }
.nowrap { white-space: nowrap; }
.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
code { padding: 2px 5px; color: var(--brand-800); background: var(--brand-50); border-radius: 4px; font-size: 0.92em; }
.app-icon { flex: 0 0 auto; }

/* ===== Application shell ===== */
.app-body { background: var(--canvas); }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.app-sidebar { position: sticky; z-index: 40; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 23px 15px 16px; color: #dce8ee; background: var(--brand-900); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 400; letter-spacing: -0.5px; }
.brand strong { font-weight: 700; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #fff; background: var(--brand-600); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; }
.sidebar-brand { margin: 0 10px 30px; color: #fff; }
.sidebar-brand:hover { color: #fff; }
.sidebar-close { position: absolute; top: 23px; right: 13px; display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: #d5e4eb; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; }
.sidebar-close:hover { color: #fff; background: rgba(255, 255, 255, 0.13); }
.sidebar-nav { flex: 1; min-height: 0; padding: 0 1px 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #456578 transparent; }
.sidebar-section + .sidebar-section { margin-top: 25px; }
.sidebar-label { margin: 0 12px 7px; color: #9db4c1; font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.sidebar-company-name { margin: -1px 12px 10px; overflow: hidden; color: #fff; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-link { display: flex; align-items: center; gap: 11px; min-height: 42px; margin: 2px 0; padding: 9px 12px; color: #c6d6de; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 500; transition: color 140ms ease, background 140ms ease; }
.sidebar-link .app-icon { color: #9db8c6; }
.sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, 0.065); }
.sidebar-link:hover .app-icon { color: #fff; }
.sidebar-link.is-active { color: #fff; background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 #77b3cf; }
.sidebar-link.is-active .app-icon { color: #a9d3e6; }
.sidebar-user { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 15px 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--brand-900); background: #d8e7ee; border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
.user-meta { min-width: 0; }
.user-meta strong, .user-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { color: #fff; font-size: 12px; font-weight: 600; }
.user-meta span { color: #a9bec9; font-size: 10px; }
.sidebar-logout { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: #b7cbd5; background: transparent; border: 0; border-radius: 7px; }
.sidebar-logout:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.button_to { display: inline-flex; margin: 0; }
.app-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.app-topbar { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; gap: 16px; min-height: 70px; padding: 10px 36px; background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-context { display: flex; flex-direction: column; }
.topbar-context strong { font-size: 13px; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--ink-700); background: transparent; border: 1px solid var(--border); border-radius: 8px; }
.sidebar-backdrop { position: fixed; z-index: 35; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(10, 29, 40, 0.5); border: 0; }
.app-content { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 34px 38px 52px; }
.app-content h1, .app-content h2, .app-content h3, .app-content p { margin-top: 0; }
/* Vertical rhythm: every next block in the page flow gets breathing room, unless the
   component sets its own margin (then the component rule wins). */
.app-content > * + * { margin-top: 22px; }
.app-content h1 { margin-bottom: 7px; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.2; letter-spacing: -0.035em; }
.app-content h2 { font-size: 17px; line-height: 1.35; letter-spacing: -0.012em; }
.app-content h3 { font-size: 14px; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 38px; color: var(--ink-500); border-top: 1px solid var(--border); font-size: 11px; }
.app-footer > span:first-child { color: var(--brand-800); font-size: 13px; }

/* Company switcher */
.company-switcher { position: relative; min-width: 0; }
.company-switcher > summary { display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 5px 8px; border-radius: 8px; cursor: pointer; list-style: none; }
.company-switcher > summary::-webkit-details-marker { display: none; }
.company-switcher > summary:hover { background: var(--canvas); }
.company-switcher-copy { display: flex; flex-direction: column; min-width: 0; }
.company-switcher-copy strong { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.company-switcher-label { color: var(--ink-500); font-size: 10px; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; }
.company-switcher-chevron { color: var(--ink-500); transition: transform 150ms ease; }
.company-switcher[open] .company-switcher-chevron { transform: rotate(180deg); }
.company-switcher-menu { position: absolute; top: calc(100% + 11px); left: 0; width: 330px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.company-switcher-menu > p { margin: 5px 8px 7px; color: var(--ink-500); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.company-switcher-option { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 9px 8px; color: var(--ink-900); border-radius: 8px; }
.company-switcher-option:hover, .company-switcher-option.is-current { color: var(--brand-800); background: var(--brand-50); }
.company-switcher-option > span:nth-child(2) { min-width: 0; }
.company-switcher-option strong, .company-switcher-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-switcher-option strong { font-size: 12px; }
.company-switcher-option small { color: var(--ink-500); font-size: 10px; }
.company-switcher-monogram { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--brand-700); background: var(--brand-100); border-radius: 8px; font-size: 12px; font-weight: 750; }
.company-switcher-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; padding: 10px 8px 3px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 600; }

/* ===== Page headers, actions and feedback ===== */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; margin-bottom: 28px; }
.page-header-copy { min-width: 0; }
.page-header h1 { overflow-wrap: anywhere; }
.page-eyebrow { margin-bottom: 8px; color: var(--brand-600); font-size: 11px; font-weight: 750; letter-spacing: 0.075em; text-transform: uppercase; }
.page-description { max-width: 700px; margin-bottom: 0; color: var(--ink-500); font-size: 13px; }
.page-actions, .actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.page-actions { padding-top: 5px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-height: 40px; padding: 8px 14px; color: #fff; background: var(--brand-700); border: 1px solid var(--brand-700); border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1.25; text-align: center; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }
.btn:hover { color: #fff; background: var(--brand-800); border-color: var(--brand-800); }
.btn:active { transform: translateY(1px); }
.btn-secondary { color: var(--ink-700); background: #fff; border-color: var(--border-strong); }
.btn-secondary:hover { color: var(--brand-800); background: var(--brand-50); border-color: #aebfc8; }
.btn-ghost { color: var(--brand-700); background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { color: var(--brand-900); background: var(--brand-100); border-color: transparent; }
.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { color: #fff; background: #922018; border-color: #922018; }
.btn-danger-ghost { color: var(--danger); background: #fff; border-color: #efc5c0; }
.btn-danger-ghost:hover { color: #8e1c14; background: var(--danger-bg); border-color: #e4a9a2; }
.btn-sm { min-height: 34px; padding: 6px 11px; font-size: 11px; border-radius: 7px; }
.btn-icon { width: 34px; padding: 0; }
.flash { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid; border-radius: 9px; font-size: 12px; }
.flash .app-icon { margin-top: 1px; }
.flash-notice { color: #115d43; background: var(--success-bg); border-color: #bde1d1; }
.flash-alert { color: #8e1c14; background: var(--danger-bg); border-color: #efc5c0; }

/* ===== Panels, stats and details ===== */
.panel, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card { margin-bottom: 18px; padding: 22px; }
.panel { min-width: 0; overflow: hidden; }
.panel + .panel { margin-top: 22px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 17px 22px; border-bottom: 1px solid var(--border); }
.panel-header h2, .panel-header h3 { margin: 0; }
.panel-title { display: flex; align-items: center; gap: 9px; }
.panel-title .app-icon { color: var(--brand-600); }
.panel-subtitle { margin: 4px 0 0; color: var(--ink-500); font-size: 11px; }
.panel-body { padding: 24px; }
.panel-footer { padding: 16px 22px; background: #fafcfc; border-top: 1px solid var(--border); }
.panel-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.stack > * + * { margin-top: 22px; }
.two-column-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; gap: 22px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card { display: flex; align-items: flex-start; gap: 13px; min-width: 0; min-height: 116px; padding: 19px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; color: var(--brand-700); background: var(--brand-100); border-radius: 9px; }
.stat-icon-success { color: var(--success); background: var(--success-bg); }
.stat-icon-warning { color: var(--warning); background: var(--warning-bg); }
.stat-copy { min-width: 0; }
.stat-label { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: 11px; font-weight: 600; }
.stat-value { display: block; overflow-wrap: anywhere; font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.035em; }
.stat-meta { display: block; margin-top: 5px; color: var(--ink-400); font-size: 10px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 30px 0 16px; }
.section-heading h2 { margin: 0; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0; }
.details-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-item { min-width: 0; }
.detail-item dt, .detail-label { margin-bottom: 6px; color: var(--ink-500); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.detail-item dd, .detail-value { margin: 0; overflow-wrap: anywhere; color: var(--ink-900); font-size: 13px; font-weight: 550; }
.detail-span-full { grid-column: 1 / -1; }
.detail-value-muted { color: var(--ink-500); font-weight: 400; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.quick-card { display: flex; align-items: center; gap: 13px; padding: 17px 18px; color: var(--ink-900); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.quick-card:hover { color: var(--brand-800); border-color: #b6cbd5; box-shadow: 0 6px 18px rgba(16, 45, 61, 0.07); transform: translateY(-1px); }
.quick-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; color: var(--brand-700); background: var(--brand-100); border-radius: 9px; }
.quick-copy { min-width: 0; }
.quick-copy strong, .quick-copy small { display: block; }
.quick-copy strong { font-size: 12px; }
.quick-copy small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }

/* ===== Tables and filters ===== */
.table-wrap { width: 100%; overflow-x: auto; contain: paint; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.panel > .table-wrap { border: 0; border-radius: 0; }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; border-spacing: 0; }
.data-table-compact { min-width: 570px; }
.data-table th, .data-table td { padding: 14px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--ink-500); background: #f8fafb; font-size: 10px; font-weight: 750; letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; }
.data-table td { color: var(--ink-700); font-size: 12px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tfoot td { background: #fafcfc; }
.data-table tfoot .summary-total td { color: var(--ink-900); background: #f3f7f8; border-top: 1px solid var(--border-strong); font-weight: 750; }
.data-table tfoot .summary-rate td { color: var(--ink-500); font-size: 11px; }
.data-table tbody tr { transition: background 120ms ease; }
.data-table tbody tr:hover { background: #fbfcfc; }
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .cell-center { text-align: center; }
.table-primary { color: var(--ink-900); font-weight: 650; }
a.table-primary { display: inline-block; }
.table-secondary { display: block; margin-top: 3px; color: var(--ink-500); font-size: 11px; font-weight: 400; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.table-actions a, .table-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 8px; color: var(--ink-500); background: transparent; border: 0; border-radius: 6px; font-size: 11px; font-weight: 600; }
.table-actions a:hover, .table-actions button:hover { color: var(--brand-800); background: var(--brand-100); }
.table-actions .action-danger:hover { color: var(--danger); background: var(--danger-bg); }
.cell-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.overdue-row { background: #fffafa; }
.overdue-row td:first-child { box-shadow: inset 3px 0 #d92d20; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.badge::before { width: 5px; height: 5px; background: currentColor; border-radius: 50%; content: ""; opacity: 0.8; }
.badge-neutral { color: #5d6a72; background: #f0f3f4; border-color: #e1e6e8; }
.badge-info { color: var(--info); background: var(--info-bg); border-color: #d3e2ea; }
.badge-success { color: var(--success); background: var(--success-bg); border-color: #cce7db; }
.badge-warning { color: var(--warning); background: var(--warning-bg); border-color: #f0dfba; }
.badge-danger { color: var(--danger); background: var(--danger-bg); border-color: #f1d0cb; }
.avatar { flex: 0 0 auto; border-radius: 50%; vertical-align: middle; }
.person-cell { display: flex; align-items: center; gap: 9px; }
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.filter-form { display: flex; flex: 1; flex-wrap: wrap; align-items: flex-end; gap: 9px; }
.filter-search { flex: 1 1 230px; max-width: 390px; }
.search-field { position: relative; }
.search-field .app-icon { position: absolute; top: 50%; left: 11px; color: var(--ink-400); pointer-events: none; transform: translateY(-50%); }
.search-field input { padding-left: 36px; }
.filter-control { min-width: 140px; }
.filter-control label { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: 10px; font-weight: 650; }
.filter-reset { align-self: center; margin-top: 13px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.filter-submit { min-height: 40px; }

/* ===== Empty states ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 42px 24px; text-align: center; }
.empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 16px; color: var(--brand-600); background: var(--brand-100); border-radius: 14px; }
.empty-state h2 { margin-bottom: 7px; font-size: 17px; }
.empty-state p { max-width: 450px; margin-bottom: 18px; color: var(--ink-500); font-size: 12px; }

/* ===== Forms ===== */
input, select, textarea { width: 100%; min-height: 41px; padding: 9px 11px; color: var(--ink-900); background: #fff; border: 1px solid var(--border-strong); border-radius: 7px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
textarea { min-height: 88px; line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: #96a2a9; }
input:hover, select:hover, textarea:hover { border-color: #aebfc8; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(39, 103, 137, 0.12); }
input[type="checkbox"], input[type="radio"] { width: 17px; min-width: 17px; height: 17px; min-height: 17px; margin: 0; padding: 0; accent-color: var(--brand-700); }
input[type="file"] { padding: 8px; background: #fafcfc; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 10px; color: var(--brand-700); background: var(--brand-100); border: 0; border-radius: 5px; font-weight: 600; cursor: pointer; }
select { cursor: pointer; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.form-section { padding: 26px; }
.form-section + .form-section { border-top: 1px solid var(--border); }
.form-section-header { margin-bottom: 22px; }
.form-section-header h2 { margin-bottom: 4px; }
.form-section-description { max-width: 760px; margin-bottom: 0; color: var(--ink-500); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-group { min-width: 0; margin: 0; }
.form-group > label, .field-label { display: block; margin-bottom: 7px; color: var(--ink-700); font-size: 11px; font-weight: 650; }
.field-hint { margin: 6px 0 0; color: var(--ink-500); font-size: 11px; }
.span-full { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }
.checkbox-field { display: flex; align-items: flex-start; gap: 9px; min-height: 41px; padding-top: 9px; }
.checkbox-field label { color: var(--ink-700); font-size: 12px; font-weight: 550; cursor: pointer; }
.checkbox-field small { display: block; color: var(--ink-500); font-size: 10px; font-weight: 400; }
.field-with-suffix { display: flex; align-items: stretch; }
.field-with-suffix input { border-radius: 7px 0 0 7px; }
.input-suffix { display: inline-flex; align-items: center; justify-content: center; min-width: 49px; padding: 0 11px; color: var(--ink-500); background: #f7f9fa; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 7px 7px 0; font-size: 11px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 18px 26px; background: #fafcfc; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.form-actions .form-cancel { margin-right: auto; }
.form-errors { display: flex; gap: 12px; margin-bottom: 20px; padding: 15px 17px; color: #8e1c14; background: var(--danger-bg); border: 1px solid #efc5c0; border-radius: 9px; }
.form-errors-icon { padding-top: 1px; }
.form-errors strong { font-size: 12px; }
.form-errors p { margin: 2px 0 5px; font-size: 11px; }
.form-errors ul { margin: 0; padding-left: 18px; font-size: 11px; }
.form-submit-row { margin-top: 17px; }
.panel-body > p:last-child { margin-bottom: 0; }
.nested-editor { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; }
.nested-editor .table-wrap { border: 0; border-radius: 0; }
.nested-table { min-width: 790px; }
.nested-table th, .nested-table td { padding: 10px; }
.nested-table input, .nested-table select { min-height: 38px; padding: 7px 9px; font-size: 11px; }
.nested-table .nested-remove { width: 90px; text-align: center; }
.nested-table .nested-remove label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-500); font-size: 10px; }
.nested-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: #fafcfc; border-top: 1px solid var(--border); }
.nested-toolbar p { margin: 0; color: var(--ink-500); font-size: 10px; }
.bank-accounts-editor .nested-table { min-width: 940px; }
.items-editor .nested-table th:nth-child(2) { width: 105px; }
.items-editor .nested-table th:nth-child(3) { width: 85px; }
.items-editor .nested-table th:nth-child(4) { width: 130px; }
.items-editor .nested-table th:nth-child(5) { width: 125px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

/* ===== Invoice and payment details ===== */
.invoice-meta-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 20px; }
.invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: stretch; gap: 22px; margin-bottom: 22px; }
.invoice-items-table { min-width: 1040px; }
.invoice-ksef-details { margin-top: 20px; }
.invoice-total-card { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: #fff; background: var(--brand-900); border: 1px solid var(--brand-900); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.invoice-total-label { color: #b8ced9; font-size: 10px; font-weight: 700; letter-spacing: 0.075em; text-transform: uppercase; }
.invoice-total-value { margin: 6px 0 20px; overflow-wrap: anywhere; font-size: clamp(25px, 3vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -0.045em; }
.invoice-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.invoice-balance span, .invoice-balance strong { display: block; }
.invoice-balance span { color: #b8ced9; font-size: 10px; }
.invoice-balance strong { margin-top: 3px; font-size: 12px; }
.amount-breakdown { margin: 0; }
.amount-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.amount-breakdown > div:last-child { padding-bottom: 0; border-bottom: 0; }
.amount-breakdown dt { color: var(--ink-500); font-size: 11px; }
.amount-breakdown dd { margin: 0; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.amount-breakdown .amount-total { margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--border-strong); border-bottom: 0; }
.amount-breakdown .amount-total dt, .amount-breakdown .amount-total dd { color: var(--ink-900); font-size: 14px; font-weight: 750; }
.word-amount { margin: 15px 0 0; padding-top: 14px; color: var(--ink-500); border-top: 1px solid var(--border); font-size: 10px; line-height: 1.65; }
.word-amount strong { display: block; color: var(--ink-700); }
.bank-details { padding: 13px; background: var(--brand-50); border: 1px solid #dce8ed; border-radius: 8px; }
.bank-details strong, .bank-details span { display: block; }
.bank-details .bank-account { margin-top: 5px; overflow-wrap: anywhere; color: var(--brand-900); font-size: 13px; font-weight: 700; letter-spacing: 0.035em; }
.bank-details .bank-name { color: var(--ink-500); font-size: 10px; }
.payment-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr auto; align-items: end; gap: 10px; }
.payment-form .form-group > label { font-size: 10px; }
.payment-form-submit { min-height: 41px; }
.ksef-error { margin: 12px 0 0; padding: 10px 12px; color: var(--danger); background: var(--danger-bg); border-radius: 7px; font-size: 11px; }
.notes-content { color: var(--ink-700); font-size: 12px; white-space: pre-wrap; }

/* ===== Settings, data and tokens ===== */
.danger-zone { border-color: #efc5c0; }
.danger-zone .panel-header { background: #fffafa; border-color: #f1d4d0; }
.danger-zone .panel-title { color: var(--danger); }
.token-reveal { margin-bottom: 20px; padding: 19px; background: var(--success-bg); border: 1px solid #bde1d1; border-radius: var(--radius); }
.token-reveal h2 { margin-bottom: 5px; color: #115d43; }
.token-reveal p { margin-bottom: 11px; color: #286c54; font-size: 11px; }
.token-code { display: block; padding: 12px 14px; overflow-wrap: anywhere; color: var(--ink-900); background: #fff; border: 1px solid #cde5da; font-size: 12px; user-select: all; }
.api-intro { color: var(--ink-500); font-size: 12px; }
.api-intro p:last-child { margin-bottom: 0; }
.data-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 15px; color: var(--brand-700); background: var(--brand-100); border-radius: 10px; }

/* ===== Authentication ===== */
.auth-body { background: #fff; }
.auth-shell { display: grid; grid-template-columns: minmax(360px, 0.85fr) minmax(500px, 1.15fr); min-height: 100vh; }
.auth-aside { display: flex; flex-direction: column; padding: 38px clamp(32px, 5vw, 72px); color: #fff; background: var(--brand-900); }
.auth-brand { color: #fff; }
.auth-brand:hover { color: #fff; }
.auth-aside-content { max-width: 470px; margin: auto 0; padding: 60px 0; }
.auth-kicker { margin-bottom: 15px; color: #a9c8d7; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.auth-aside-content h2 { margin: 0 0 22px; font-size: clamp(34px, 4vw, 51px); font-weight: 650; line-height: 1.12; letter-spacing: -0.045em; }
.auth-aside-content > p:not(.auth-kicker) { max-width: 420px; color: #bfd0d9; font-size: 14px; line-height: 1.75; }
.auth-benefits { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; align-items: center; gap: 10px; color: #e3edf1; font-size: 12px; }
.auth-benefits .app-icon { color: #8dc7c1; }
.auth-aside-footer { margin: 0; color: #91acb9; font-size: 10px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 28px; background: #fbfcfc; }
.auth-card { width: 100%; max-width: 405px; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 40px; color: var(--ink-500); font-size: 11px; font-weight: 600; }
.auth-heading { margin-bottom: 26px; }
.auth-heading h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; letter-spacing: -0.04em; }
.auth-heading p { margin: 0; color: var(--ink-500); font-size: 12px; }
.auth-form { display: grid; gap: 16px; }
.auth-form .btn { width: 100%; min-height: 44px; margin-top: 4px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 11px; }
.auth-switch { margin: 26px 0 0; padding-top: 21px; color: var(--ink-500); border-top: 1px solid var(--border); font-size: 12px; text-align: center; }
.auth-switch a { font-weight: 650; }
.auth-legal { margin: 34px 0 0; color: var(--ink-400); font-size: 10px; text-align: center; }

/* ===== Landing (layout "landing") ===== */
.landing { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; }
.landing a { text-decoration: none; }
.landing-nav a:hover, .landing-footer a:hover, .landing-btn-outline:hover { color: #fff; }
.landing-btn:hover { color: #1d4e6f; }
.landing-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.landing-nav { background: #16394f; color: #fff; }
.landing-nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.landing-brand { color: #fff; font-size: 24px; font-weight: 300; }
.landing-brand strong { font-weight: 600; }
.landing-nav-link { color: #fff; margin-left: 18px; font-weight: 300; }
.landing-nav-btn { color: #1d4e6f; background: #fff; padding: 8px 16px; border-radius: 4px; font-weight: 600; margin-left: 18px; display: inline-block; }
.landing-hero { background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; }
.landing-hero-strip { background: rgba(29, 78, 111, 0.75); padding: 75px 0; text-align: center; }
.landing-title { font-size: clamp(44px, 7vw, 88px); font-weight: 300; margin: 20px 0; }
.landing-title strong { font-weight: 600; }
.landing-tagline { font-size: clamp(24px, 3.5vw, 36px); font-weight: 300; margin: 50px 0; line-height: 1.35; }
.landing-tagline strong { font-weight: 600; }
.landing-btn { display: inline-block; background: #fff; color: #1d4e6f; padding: 15px 30px; border-radius: 4px; font-size: 20px; font-weight: 600; margin: 0 8px 20px; }
.landing-btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }
.landing-marketing { background: #fff; padding: 75px 0; color: #333; }
.landing-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.landing-cols h3 { font-size: 24px; font-weight: 300; margin: 20px 0; color: #333; }
.landing-cols h3 strong { font-weight: 600; }
.landing-cols p { font-weight: 300; font-size: 17px; line-height: 1.65; }
.landing-cols svg { margin: 0 auto; }
.landing-cols svg path { fill: #1d4e6f; }
.landing-features { background: #1d4e6f; color: #fff; padding: 75px 0; font-weight: 300; font-size: 17px; }
.landing-features-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.landing-features ul { list-style: none; margin: 0; padding: 0; }
.landing-features li { margin: 1em 0; }
.landing-features li::before { content: "✔"; font-size: 1.25em; margin: 0 0.5em 0 0; }
.landing-footer { background: #19435e; color: #fff; padding: 24px 0; font-weight: 300; }
.landing-footer a { color: #fff; }
.landing-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.landing-notice { background: #ecfdf5; color: #065f46; padding: 10px 20px; margin: 0; text-align: center; }
.landing-alert { background: #fef2f2; color: #991b1b; padding: 10px 20px; margin: 0; text-align: center; }

/* ===== API docs (strona renderowana z config/openapi.yaml) ===== */
.api-docs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; align-items: start; gap: 22px; }
.api-docs-main { min-width: 0; }
.api-docs-toc { position: sticky; top: 90px; }
.api-toc { padding: 10px 0 14px; }
.api-toc-group + .api-toc-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.api-toc-tag { display: block; padding: 3px 18px 7px; color: var(--ink-500); font-size: 10px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.api-toc ul { margin: 0; padding: 0; list-style: none; }
.api-toc li a { display: flex; align-items: flex-start; gap: 7px; padding: 5px 18px; color: var(--ink-700); font-size: 11px; line-height: 1.45; }
.api-toc li a:hover { color: var(--brand-800); background: var(--brand-50); }
.api-toc code { overflow-wrap: anywhere; }

.api-operation { padding: 22px; border-top: 1px solid var(--border); }
.api-operation:first-of-type { border-top: 0; }
.api-operation-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.api-method { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.api-method-sm { min-width: 43px; padding: 2px 5px; font-size: 9px; }
.api-method-get { color: #1d4e6f; background: var(--info-bg); }
.api-method-post { color: #115d43; background: var(--success-bg); }
.api-method-patch, .api-method-put { color: #93610a; background: var(--warning-bg); }
.api-method-delete { color: #8e1c14; background: var(--danger-bg); }
.api-path { padding: 3px 8px; overflow-wrap: anywhere; color: var(--brand-900); background: var(--brand-50); border: 1px solid #dce8ed; border-radius: 6px; font-size: 12px; font-weight: 600; }
.app-content .api-operation-summary { margin: 13px 0 7px; font-size: 15px; }
.api-description { color: var(--ink-700); font-size: 12px; }
.api-description p { margin-bottom: 8px; }
.app-content .api-subheading { display: flex; align-items: center; gap: 7px; margin: 22px 0 9px; color: var(--ink-500); font-size: 10px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.api-required { color: var(--ink-400); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.api-enum { display: block; color: var(--ink-400); font-size: 10px; }
.api-notes { margin: 0; padding-left: 18px; color: var(--ink-700); font-size: 12px; }
.api-notes li + li { margin-top: 7px; }
.api-table { margin-bottom: 14px; }
.api-table .data-table { table-layout: fixed; }
.api-table .data-table th, .api-table .data-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.api-table .data-table th:first-child { width: 32%; }
.api-table .data-table th:nth-child(2) { width: 17%; }
.api-field-depth-1 .api-field-name { padding-left: 26px; }
.api-field-depth-2 .api-field-name { padding-left: 38px; }
.api-code { margin: 0 0 4px; padding: 14px 16px; overflow-x: auto; color: #dbe8ee; background: var(--brand-950); border-radius: 9px; font-size: 11px; line-height: 1.65; }
.api-responses { margin: 0; padding: 0; list-style: none; }
.api-response { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 9px; padding: 7px 0; border-top: 1px dashed var(--border); font-size: 12px; }
.api-response:first-child { border-top: 0; }
.api-status { min-width: 42px; padding: 2px 7px; color: var(--ink-700); background: var(--canvas-deep); border-radius: 6px; font-size: 10px; font-weight: 800; text-align: center; }
.api-status-ok { color: #115d43; background: var(--success-bg); }
.api-status-client, .api-status-server { color: #8e1c14; background: var(--danger-bg); }
.api-response-desc { flex: 1 1 220px; color: var(--ink-700); }
.api-example { flex: 1 1 100%; }
.api-example summary, .api-curl summary { color: var(--brand-600); font-size: 11px; font-weight: 650; cursor: pointer; }
.api-example[open] summary, .api-curl[open] summary { margin-bottom: 7px; }
.api-curl { margin-top: 18px; }
.api-curl .api-code { margin-top: 8px; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-form-submit { width: 100%; }
}

@media (max-width: 1020px) {
  .app-shell { display: block; }
  .app-sidebar { position: fixed; left: 0; transform: translateX(-105%); width: var(--sidebar-width); box-shadow: 12px 0 40px rgba(10, 29, 40, 0.2); transition: transform 180ms ease; }
  .app-sidebar.is-open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .nav-toggle { display: inline-flex; }
  .navigation-open { overflow: hidden; }
  .app-topbar { padding-right: 24px; padding-left: 24px; }
  .app-content { padding: 28px 24px 40px; }
  .app-footer { padding-right: 24px; padding-left: 24px; }
  .invoice-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .two-column-layout { grid-template-columns: 1fr; }
  .api-docs-layout { grid-template-columns: 1fr; }
  .api-docs-toc { position: static; }
}

@media (max-width: 800px) {
  .landing-cols, .landing-features-cols { grid-template-columns: 1fr; }
  .landing-tagline { margin: 30px 0; }
  .landing-hero-strip { padding: 50px 0; }
  .auth-shell { display: block; }
  .auth-aside { min-height: auto; padding: 24px; }
  .auth-aside-content, .auth-aside-footer { display: none; }
  .auth-main { min-height: calc(100vh - 88px); padding: 34px 24px; }
  .auth-back { margin-bottom: 28px; }
  .invoice-layout { grid-template-columns: 1fr; }
  .invoice-total-card { min-height: 205px; }
  .details-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .app-topbar { gap: 10px; min-height: 64px; padding: 8px 15px; }
  .app-content { padding: 23px 15px 34px; }
  .app-footer { display: block; padding: 16px 15px; text-align: center; }
  .app-footer > span { display: block; }
  .app-footer > span + span { margin-top: 3px; }
  .company-switcher { flex: 1; min-width: 0; }
  .company-switcher > summary { gap: 6px; max-width: 100%; padding: 4px; }
  .company-switcher-menu { position: fixed; top: 68px; right: 12px; left: 12px; width: auto; }
  .company-switcher-label { font-size: 9px; }
  .company-switcher-copy strong { font-size: 12px; }
  .topbar-actions { margin-left: 0; }
  .topbar-actions .btn span { display: none; }
  .topbar-actions .btn { width: 35px; padding: 0; }
  .page-header { flex-direction: column; gap: 13px; margin-bottom: 20px; }
  .page-actions { justify-content: flex-start; width: 100%; padding-top: 0; }
  .page-actions .btn { flex: 1 1 auto; }
  .page-description { font-size: 12px; }
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 105px; padding: 15px; }
  .stat-icon { width: 34px; height: 34px; }
  .stat-value { font-size: 19px; }
  .quick-grid { grid-template-columns: 1fr; }
  .panel-header { flex-wrap: wrap; gap: 8px 14px; padding: 15px; }
  .panel-body, .form-section { padding: 18px 15px; }
  .api-operation { padding: 18px 15px; }
  .api-field-depth-1 .api-field-name { padding-left: 16px; }
  .api-field-depth-2 .api-field-name { padding-left: 24px; }
  .panel-footer { padding: 14px 15px; }
  .filter-bar { padding: 10px; }
  .filter-form { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-search { grid-column: 1 / -1; max-width: none; }
  .filter-control { min-width: 0; }
  .filter-submit { width: 100%; }
  .filter-reset { align-self: center; justify-self: center; margin-top: 0; }
  .form-grid, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .details-grid, .details-grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .detail-span-full { grid-column: auto; }
  .form-actions { flex-wrap: wrap; padding: 15px; }
  .form-actions .form-cancel { width: 100%; margin: 0 0 4px; text-align: left; }
  .form-actions .btn { flex: 1; }
  .nested-toolbar { align-items: flex-start; flex-direction: column; }
  .payment-form { grid-template-columns: 1fr; }
  .invoice-balance { grid-template-columns: 1fr; }
  .auth-main { padding: 28px 20px; }
  .auth-heading h1 { font-size: 27px; }
  .landing-nav-link { margin-left: 10px; }
  .landing-nav-btn { margin-left: 10px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: auto; }
  .page-actions { display: grid; grid-template-columns: 1fr; }
  .page-actions .btn, .page-actions .button_to, .page-actions .button_to .btn { width: 100%; }
  .filter-form { grid-template-columns: 1fr; }
  .filter-search { grid-column: auto; }
  .landing-nav-inner { gap: 10px; }
  .landing-nav-link { display: none; }
}

@media print {
  .app-sidebar, .app-topbar, .app-footer, .page-actions, .sidebar-backdrop, .nav-toggle, .filter-bar { display: none !important; }
  .app-shell, .app-workspace { display: block; min-height: 0; }
  .app-content { max-width: none; padding: 0; }
  .panel, .card, .stat-card { box-shadow: none; }
  body { background: #fff; }
}