:root {
  --bg: #f7f7f8;
  --fg: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --card: #ffffff;
  --primary: #2563eb;
  --primary-fg: #fff;
  --danger: #dc2626;
  --amber: #fbbf24;
  --amber-strong: #f59e0b;
  --amber-soft: #fef3c7;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --gray-soft: #f3f4f6;
  --blue-soft: #dbeafe;
  --radius: 8px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
h2 { margin: 0; font-size: 15px; font-weight: 600; }

.muted { color: var(--muted); }
.muted.small, .small { font-size: 12px; }

/* ─── Top bar ─────────────────────────────────────── */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 700;
  font-size: 16px;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
}
.brand-logo.big { width: 44px; height: 44px; }

.topnav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.navlink:hover { background: var(--gray-soft); color: var(--fg); text-decoration: none; }
.navlink.active { color: var(--fg); background: var(--gray-soft); }

.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}
.pill.admin { background: var(--amber); color: #78350f; }
.pill.self { background: var(--blue-soft); color: var(--primary); font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600; }

/* ─── "Users online" pill in the navbar ──────────── */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.online-pill:hover { background: #dcfce7; border-color: #86efac; }
.online-count { font-variant-numeric: tabular-nums; }
.online-label { color: #15803d; }

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
  animation: online-pulse 2s infinite;
  flex-shrink: 0;
}
.online-dot.small { width: 7px; height: 7px; }
@keyframes online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

dialog.online-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  width: min(420px, 92vw);
  max-height: 80vh;
  background: #fff;
}
dialog.online-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.online-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.online-dialog-head .card-title { margin: 0; display: inline-flex; align-items: center; gap: 8px; }

ul.online-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 60vh;
  overflow: auto;
}
.online-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
.online-row:hover { background: var(--gray-soft); }
.online-row .avatar { background: var(--blue-soft); color: var(--primary); }
.online-info { flex: 1; min-width: 0; }
.online-info > div:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.online-info > div:last-child { word-break: break-word; }
.online-empty {
  list-style: none;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.user-menu { display: flex; align-items: center; gap: 16px; }
.user-info { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.user-info:hover { text-decoration: none; }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.user-text { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-weight: 600; font-size: 13px; }
.user-role { font-size: 11px; color: var(--muted); }
.logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.logout:hover { background: var(--gray-soft); color: var(--fg); text-decoration: none; }

/* ─── Page layout ─────────────────────────────────── */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.page-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; }
.page-head p { margin: 0; flex: 1; }
.page-head .btn { margin-left: auto; }

.flashes { margin-bottom: 16px; }
.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.flash.ok { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.flash.error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* ─── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: #9ca3af; text-decoration: none; }
.btn.primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn.primary:hover { filter: brightness(0.95); border-color: var(--primary); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.ghost { background: #fff; }
.btn.block { display: block; width: 100%; justify-content: center; }
.btn.small { padding: 4px 8px; font-size: 12px; }

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: var(--gray-soft); color: var(--fg); border-color: var(--line); }
.icon-btn.danger:hover { color: var(--danger); }

/* ─── Card ────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.card-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title em.de {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}

.empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  background: var(--gray-soft);
  border-radius: var(--radius);
}

/* ─── Status badges ───────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.status-badge.open      { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.status-badge.submitted { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.status-badge.approved  { background: #dcfce7; color: #166534; border-color: #86efac; }
.status-badge.locked    { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.status-badge.deleted   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ─── Login ───────────────────────────────────────── */
.login-shell {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.login-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .brand-logo { margin: 0 auto 12px; }
.login-brand h1 { margin: 0 0 4px; }
.login-form label { display: block; margin-bottom: 14px; }
.login-form span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.login-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
.login-form input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* ─── Dashboard ───────────────────────────────────── */
.new-sheet-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.new-sheet-form > label { display: flex; flex-direction: column; }
.new-sheet-form > label > span:first-child {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.new-sheet-form input,
.new-sheet-form select {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  height: 38px;
}
.new-sheet-form > label.field-month    { width: 150px; }
.new-sheet-form > label.field-year     { width: 110px; }
.new-sheet-form > label.field-deadline { width: 170px; }
.new-sheet-form > label.field-copy     { width: 230px; }
.new-sheet-form > label.field-submit   { width: auto; }
.copy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--fg);
}
.copy-pill:hover { border-color: #9ca3af; }
.copy-pill input { margin: 0; accent-color: var(--primary); }
.copy-pill > span { font-weight: 500; color: var(--fg); font-size: 13px; margin: 0; }
.field-submit > span { color: transparent; user-select: none; }
.new-sheet-form button[type="submit"] { height: 38px; }

/* ─── Generic data table ──────────────────────────── */
table.entries {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.entries th, table.entries td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.entries thead th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--gray-soft);
}
table.entries tbody tr:last-child td { border-bottom: 0; }
table.entries td.num, table.entries th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.entries td.actions { text-align: right; white-space: nowrap; }

/* ─── Sheet head ──────────────────────────────────── */
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.sheet-head-left { display: flex; align-items: flex-start; gap: 14px; }
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  margin-top: 4px;
}
.back-link:hover { background: var(--gray-soft); text-decoration: none; }
.sheet-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.sheet-head-right { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── Accrual table (the centerpiece) ─────────────── */
.table-scroll {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  margin-bottom: 20px;
}
table.accrual-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1100px;
}
table.accrual-table th,
table.accrual-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* MANDATORY / PFLICHTFELD band */
table.accrual-table tr.mandatory-row th {
  background: #fff;
  border-bottom: none;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  letter-spacing: .04em;
}
table.accrual-table tr.mandatory-row th.mandatory-cell {
  background: var(--amber);
  color: #78350f;
  border-bottom: 1px solid var(--amber-strong);
}
table.accrual-table tr.mandatory-row th.empty-cell { background: #fff; }

/* Bilingual column headers (yellow band) */
table.accrual-table tr.header-row th {
  background: #fde68a;
  font-weight: 700;
  color: #1f2937;
  font-size: 13px;
  border-bottom: 1px solid #fcd34d;
  padding: 8px 12px;
}
table.accrual-table tr.header-row .col-en {
  font-weight: 700;
  font-size: 13px;
  color: #1f2937;
}
table.accrual-table tr.header-row .col-de {
  font-weight: 400;
  font-size: 11px;
  color: #6b5523;
  margin-top: 1px;
}

table.accrual-table .row-num {
  color: var(--primary);
  font-weight: 600;
  width: 36px;
  text-align: center;
}
table.accrual-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.accrual-table tbody tr:hover td { background: #fafafa; }
table.accrual-table tbody tr.total-row td {
  background: #fafafa;
  border-top: 1px solid var(--line-strong);
  font-size: 13px;
}
table.accrual-table tbody tr.total-row:hover td { background: #fafafa; }
table.accrual-table td.actions {
  text-align: right;
  white-space: nowrap;
  min-width: 90px;
}
table.accrual-table .empty-row {
  text-align: center;
  padding: 28px;
  color: var(--muted);
}

/* ─── Multi-select + bulk-delete bar ──────────────── */
.bulk-action-bar {
  position: sticky;
  top: 60px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fef2f2 0%, #fff 60%);
  border: 1px solid #fecaca;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  font-size: 13px;
  animation: bulk-slide-in .15s ease-out;
}
.bulk-action-bar[hidden] { display: none; }
.bulk-count { color: var(--fg); }
.bulk-count strong {
  color: var(--danger);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.bulk-action-bar .btn.danger {
  margin-left: auto;
}
@keyframes bulk-slide-in {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Checkbox column */
table.accrual-table th.check-cell,
table.accrual-table td.check-cell {
  width: 36px;
  padding: 6px 8px;
  text-align: center;
}
table.accrual-table input.bulk-check,
table.accrual-table input#bulk-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
  margin: 0;
}

/* Selected row tint — accents only the checkbox column with a strong left border,
   and gently shades the whole row. */
table.accrual-table tbody tr.row-selected td { background: #eff6ff; }
table.accrual-table tbody tr.row-selected:hover td { background: #dbeafe; }
table.accrual-table tbody tr.row-selected td.check-cell {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Soft-deleted rows — visible to users but excluded from CSV */
table.accrual-table tbody tr.deleted td {
  background: #fef2f2;
  color: #b91c1c;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 28, 28, .45);
}
table.accrual-table tbody tr.deleted:hover td { background: #fee2e2; }
table.accrual-table tbody tr.deleted .row-num {
  color: #b91c1c;
  text-decoration: none;
  opacity: .6;
}
table.accrual-table tbody tr.deleted td.actions { text-decoration: none; }
.deleted-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
}
.owner-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  color: var(--muted);
  background: var(--gray-soft);
  border: 1px solid var(--line);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-tag svg { flex-shrink: 0; opacity: .7; }

/* ─── Deadline badge ────────────────────────────────── */
.deadline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid;
}
.deadline-badge.state-normal   { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.deadline-badge.state-soon     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.deadline-badge.state-overdue  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ─── Sheet comments (in sheet header) ─────────────── */
.sheet-comments {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.sheet-comments li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  flex-wrap: wrap;
}
.sheet-comments li:last-child { border-bottom: 0; }
.sheet-comments li > span:nth-child(2) { flex: 1; color: #78350f; }

/* ─── Reopen-with-reason dialog ────────────────────── */
dialog.reopen-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  width: min(480px, 92vw);
  background: #fff;
}
dialog.reopen-dialog::backdrop { background: rgba(15, 23, 42, .35); }
dialog.reopen-dialog .card-title { margin-bottom: 8px; }
.reopen-field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.reopen-field > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.reopen-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  resize: vertical;
}
.reopen-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* ─── Duplicate-entry warning above add-entry form ─── */
.dup-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #78350f;
}
.dup-warning svg { color: #d97706; flex-shrink: 0; margin-top: 1px; }

/* ─── Comparison view ──────────────────────────────── */
.dot-recurring,
.dot-new,
.dot-missing {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}
.dot-recurring { background: #94a3b8; }
.dot-new       { background: #16a34a; }
.dot-missing   { background: #f59e0b; }

table.compare-table tr.recurring td:first-child { border-left: 3px solid #94a3b8; }
table.compare-table tr.new td:first-child       { border-left: 3px solid #16a34a; }
table.compare-table tr.missing td:first-child   { border-left: 3px solid #f59e0b; }
table.compare-table tr.missing td                { color: #b45309; }
.delta.up   { color: #15803d; font-weight: 600; }
.delta.down { color: #b91c1c; font-weight: 600; }

/* ─── Entry form (add + edit) ─────────────────────── */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.entry-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.entry-grid label { display: flex; flex-direction: column; }
.entry-grid label > span {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.entry-grid label > span em.de {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
}
.entry-grid label > span .req { color: var(--danger); margin-left: 2px; }
.entry-grid input,
.entry-grid select,
.entry-grid textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  resize: vertical;
}
.entry-grid input:focus,
.entry-grid textarea:focus,
.entry-grid select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.entry-grid label.mandatory > span { color: #78350f; }
.entry-grid .form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.add-entry-card .card-title { margin-bottom: 16px; }

/* ─── Field configuration page ─────────────────────── */
.custom-field-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin-top: 12px;
}
.custom-field-form > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.custom-field-form > label > span:first-child {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.custom-field-form input[type="text"] {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  min-width: 200px;
}
.custom-field-form input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.custom-field-form .inline-check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: 38px;
  font-size: 13px;
}
.custom-field-form .inline-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}
.custom-field-form .inline-check > span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--fg);
  font-size: 13px;
}
.custom-field-form button { height: 38px; }

.fields-table th.check-cell,
.fields-table td.check-cell {
  text-align: center;
  width: 100px;
}
.toggle-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.toggle-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}
.fields-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--gray-soft);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--muted);
}

/* ─── Proxies page ─────────────────────────────────── */
.proxy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.proxy-grant-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.proxy-grant-form label { display: flex; flex-direction: column; flex: 1 1 220px; }
.proxy-grant-form label.grow { flex: 2 1 320px; }
.proxy-grant-form > label > span {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.proxy-grant-form select {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  height: 38px;
}
.proxy-grant-form button { height: 38px; align-self: flex-end; }
.proxy-grant-form.admin-grant {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

ul.proxy-list { list-style: none; margin: 0; padding: 0; }
ul.proxy-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
ul.proxy-list li:last-child { border-bottom: 0; }
ul.proxy-list .avatar { background: var(--blue-soft); color: var(--primary); }
.proxy-info { flex: 1; min-width: 0; }

/* On-behalf-of bar inside the Add new entry card */
.proxy-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #f5f3ff 0%, #fff 80%);
  border: 1px solid #ddd6fe;
  border-radius: var(--radius);
}
.proxy-bar .template-label { color: #5b21b6; }
.proxy-bar .select-field { height: 34px; min-width: 240px; flex: 0 1 300px; }

/* Template loader on the Add-entry form */
.template-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #eff6ff 0%, #fff 80%);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
}
.template-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1e40af;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.template-bar .select-field {
  height: 34px;
  min-width: 220px;
  flex: 0 1 280px;
}

.save-template-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.template-name-input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  width: 200px;
}
.template-name-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Templates management page */
.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.template-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: #fff;
}
.template-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.template-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
dl.template-detail {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 10px;
  margin: 0;
  font-size: 12px;
}
dl.template-detail dt { color: var(--muted); }
dl.template-detail dd { margin: 0; word-break: break-word; }

@media (max-width: 700px) {
  .save-template-group { flex-wrap: wrap; }
  .template-name-input { width: 100%; }
}

/* Edit dialog */
dialog.edit-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  width: min(800px, 92vw);
  background: #fff;
}
dialog.edit-dialog::backdrop { background: rgba(15, 23, 42, .35); }

.edit-user-form { display: flex; flex-direction: column; gap: 12px; width: min(420px, 90vw); }
.edit-user-form label { display: flex; flex-direction: column; gap: 4px; }
.edit-user-form label > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.edit-user-form input {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
}
.edit-user-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.edit-user-form .form-actions { justify-content: flex-end; margin-top: 4px; }

/* ─── Settings (dropdowns) ────────────────────────── */
.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.opt-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.opt-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.opt-list li:last-child { border-bottom: 0; }
.add-opt {
  display: flex;
  gap: 6px;
}
.add-opt input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}

/* ─── Filter toolbar (dashboard + sheet) ───────────── */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-head .card-title { margin: 0; }

.result-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--blue-soft);
  color: #1e40af;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
}
.search-field.grow { flex: 1 1 320px; }
.search-field .search-icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.search-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.search-field input::placeholder { color: #9ca3af; }

.select-field {
  height: 38px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color .12s, box-shadow .12s;
  min-width: 150px;
}
.select-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.select-field:hover { border-color: #9ca3af; }

.amount-range {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
}
.amount-range input {
  width: 100px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.amount-range input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.amount-range .range-sep { color: var(--muted); font-weight: 600; }

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.checkbox-pill:hover { border-color: #9ca3af; color: var(--fg); }
.checkbox-pill input { display: none; }
.checkbox-pill svg { color: currentColor; opacity: .75; }
.checkbox-pill.active {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.checkbox-pill.active svg { opacity: 1; }

.toolbar-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.toolbar .btn { height: 38px; }

.filter-card { padding: 18px 20px; }
.filter-card .card-title svg { color: var(--muted); }

@media (max-width: 700px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-field { min-width: 0; }
  .toolbar-actions { margin-left: 0; }
  .select-field, .amount-range, .amount-range input { width: 100%; }
  .amount-range { gap: 8px; }
  .amount-range input { flex: 1; }
}

/* ─── Audit summary stat cards ─────────────────────── */
.audit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-card .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.stat-card .value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-card.entry  { border-left-color: #2563eb; background: linear-gradient(90deg, #eff6ff 0%, #fff 60%); }
.stat-card.entry  .value { color: #1e40af; }
.stat-card.sheet  { border-left-color: #16a34a; background: linear-gradient(90deg, #f0fdf4 0%, #fff 60%); }
.stat-card.sheet  .value { color: #166534; }
.stat-card.access { border-left-color: #6366f1; background: linear-gradient(90deg, #eef2ff 0%, #fff 60%); }
.stat-card.access .value { color: #3730a3; }
.stat-card.login  { border-left-color: #0ea5e9; background: linear-gradient(90deg, #f0f9ff 0%, #fff 60%); }
.stat-card.login  .value { color: #0369a1; }
.stat-card.users  { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #fff 60%); }
.stat-card.users  .value { color: #92400e; }
.stat-card.status-open      { border-left-color: #94a3b8; background: linear-gradient(90deg, #f8fafc 0%, #fff 60%); }
.stat-card.status-open      .value { color: #475569; }
.stat-card.status-submitted { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #fff 60%); }
.stat-card.status-submitted .value { color: #92400e; }
.stat-card.status-approved  { border-left-color: #16a34a; background: linear-gradient(90deg, #f0fdf4 0%, #fff 60%); }
.stat-card.status-approved  .value { color: #166534; }
.stat-card.status-locked    { border-left-color: #6b7280; background: linear-gradient(90deg, #f9fafb 0%, #fff 60%); }
.stat-card.status-locked    .value { color: #1f2937; }

/* ─── Action chips (audit + history) ───────────────── */
.action-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.action-chip.create  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.action-chip.update  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.action-chip.delete  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.action-chip.restore { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.action-chip.login   { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.action-chip.visit   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.action-chip.submit  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.action-chip.approve { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.action-chip.lock    { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.action-chip.reopen  { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }

/* Subtle colored left-border per row, indicating action */
table.entries tr.audit-row td:first-child {
  border-left: 3px solid transparent;
  padding-left: 12px;
}
table.entries tr.audit-row.act-create  td:first-child { border-left-color: #16a34a; }
table.entries tr.audit-row.act-update  td:first-child { border-left-color: #2563eb; }
table.entries tr.audit-row.act-delete  td:first-child { border-left-color: #dc2626; }
table.entries tr.audit-row.act-restore td:first-child { border-left-color: #f59e0b; }
table.entries tr.audit-row.act-login   td:first-child { border-left-color: #0ea5e9; }
table.entries tr.audit-row.act-visit   td:first-child { border-left-color: #94a3b8; }
table.entries tr.audit-row.act-submit  td:first-child { border-left-color: #f59e0b; }
table.entries tr.audit-row.act-approve td:first-child { border-left-color: #16a34a; }
table.entries tr.audit-row.act-lock    td:first-child { border-left-color: #7c3aed; }
table.entries tr.audit-row.act-reopen  td:first-child { border-left-color: #ea580c; }
table.entries tr.audit-row.act-status-open      td:first-child { border-left-color: #94a3b8; }
table.entries tr.audit-row.act-status-submitted td:first-child { border-left-color: #f59e0b; }
table.entries tr.audit-row.act-status-approved  td:first-child { border-left-color: #16a34a; }
table.entries tr.audit-row.act-status-locked    td:first-child { border-left-color: #6b7280; }
table.entries tr.audit-row:hover td { background: #fafafa; }

/* ─── Role chip select (in Users) ──────────────────── */
.role-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 24px 4px 12px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}
.role-select.role-admin { background-color: #fef3c7; color: #92400e; border-color: #fde68a; }
.role-select.role-user  { background-color: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.role-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ─── Dropdown field card accents ──────────────────── */
.field-card { border-left: 4px solid var(--line); }
.field-card .card-title { padding-left: 0; }
.field-card.field-entity_branch { border-left-color: #2563eb; background: linear-gradient(180deg, #eff6ff 0%, #fff 80px); }
.field-card.field-gl_account    { border-left-color: #7c3aed; background: linear-gradient(180deg, #f5f3ff 0%, #fff 80px); }
.field-card.field-cost_center   { border-left-color: #16a34a; background: linear-gradient(180deg, #f0fdf4 0%, #fff 80px); }
.field-card.field-assignment    { border-left-color: #ea580c; background: linear-gradient(180deg, #fff7ed 0%, #fff 80px); }
.field-card.field-budget_area   { border-left-color: #f59e0b; background: linear-gradient(180deg, #fffbeb 0%, #fff 80px); }

/* Monospace path pill in access log */
.path-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  border: 1px solid #e2e8f0;
}

.audit-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.audit-filters label { display: block; }
.audit-filters span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.audit-filters input,
.audit-filters select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
.audit-filter-actions { display: flex; gap: 8px; }

@media (max-width: 900px) {
  .audit-filters { grid-template-columns: 1fr 1fr; }
  .audit-filter-actions { grid-column: 1 / -1; }
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.upload-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}
.upload-form input[type="file"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--gray-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ─── Users ──────────────────────────────────────── */
.invite-form {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.invite-form label { display: block; }
.invite-form span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.invite-form input,
.invite-form select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}

/* ─── History ─────────────────────────────────────── */
dl.detail {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
  margin: 0;
}
dl.detail dt { color: var(--muted); }
dl.detail dt em.de { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }
dl.detail dd { margin: 0; }

.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list > li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.audit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
/* History audit cards: colored left-border per action */
.audit-list > li.act-create  { border-left: 4px solid #16a34a; }
.audit-list > li.act-update  { border-left: 4px solid #2563eb; }
.audit-list > li.act-delete  { border-left: 4px solid #dc2626; }
.audit-list > li.act-restore { border-left: 4px solid #f59e0b; }

.audit-changes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-changes th,
.audit-changes td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.audit-changes th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--gray-soft);
}

/* ─── Statistics page ──────────────────────────────── */
.bar-chart {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 12px 4px 6px;
  overflow-x: auto;
}
.bar-col {
  flex: 1 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
}
.bar-amount {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
}
.bar-track {
  width: 100%;
  height: 160px;
  background: var(--gray-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.bar-val {
  width: 100%;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  min-height: 2px;
  transition: height .25s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.bar-col:hover .bar-val {
  background: linear-gradient(180deg, #93c5fd 0%, #1e40af 100%);
}
.bar-label { font-size: 12px; font-weight: 600; color: var(--fg); }
.bar-count { font-size: 11px; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.status-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.status-tile.state-open      { border-left-color: #93c5fd; background: linear-gradient(90deg, #eff6ff 0%, #fff 70%); }
.status-tile.state-submitted { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #fff 70%); }
.status-tile.state-approved  { border-left-color: #16a34a; background: linear-gradient(90deg, #f0fdf4 0%, #fff 70%); }
.status-tile.state-locked    { border-left-color: #7c3aed; background: linear-gradient(90deg, #f5f3ff 0%, #fff 70%); }
.status-count {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.top-grid .card { margin-bottom: 0; }
table.top-table th, table.top-table td { padding: 8px 10px; font-size: 13px; }
table.top-table .num { white-space: nowrap; }
.share-bar {
  width: 100%;
  height: 6px;
  background: var(--gray-soft);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.share-fill {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
  border-radius: 999px;
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .topbar-inner { gap: 16px; padding: 0 12px; }
  .topnav { gap: 0; }
  .navlink { padding: 8px; font-size: 13px; }
  .user-text { display: none; }
  .online-label { display: none; }
  .online-pill { padding: 5px 10px; }
  .page { padding: 16px 12px; }
  .sheet-head { flex-direction: column; align-items: stretch; }
  .sheet-head-right { justify-content: flex-end; }
  .entry-grid { grid-template-columns: 1fr 1fr; }
  .new-sheet-form > label,
  .new-sheet-form .copy-pill,
  .new-sheet-form button[type="submit"] { width: 100%; }
  .new-sheet-form > label.field-month,
  .new-sheet-form > label.field-year,
  .new-sheet-form > label.field-deadline,
  .new-sheet-form > label.field-copy { width: 100%; }
  .invite-form { grid-template-columns: 1fr; }
  dl.detail { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .entry-grid { grid-template-columns: 1fr; }
  .navlink span,
  .navlink .pill { display: none; }
}