/* OnyxBills Billing Panel — hand-written CSS implementing BRAND_DESIGN_SYSTEM.md.
   No build step: this file is served as-is, no Tailwind/PostCSS/Node involved. */

:root {
  --brand: #AD6B14;
  --brand-dark: #8A5410;
  --brand-darker: #5E3A0B;
  --brand-light: #DBBE98;
  --brand-lighter: #F3E7D6;
  --cream: #FBF6EE;
  --white: #FFFFFF;
  --ink: #241A0E;
  --ink-muted: #6B5B47;
  --success: #2F8F5B;
  --danger: #C4432B;
  --warning: #D19A1F;
  --border: #E8DCC8;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-soft: 0 1px 2px rgba(36,26,14,0.06), 0 8px 24px rgba(36,26,14,0.08);
}

* { box-sizing: border-box; }
/* Global fallback for the shared <Icon> component (Shared/Icon.razor): every icon there is a raw
   <svg viewBox="0 0 24 24"> with no width/height of its own, so it only renders at a sane size where
   a container-specific rule below (e.g. ".btn svg", ".icon-btn svg") happens to constrain it. Any
   Icon used somewhere without such a rule — e.g. inside an .alert banner — had nothing sizing it at
   all, so the browser fell back to its intrinsic default and the icon rendered at roughly 1000x890px
   instead of an inline icon (client UAT Bug B1). This default keeps every icon inline-sized unless a
   more specific rule below overrides it. */
/*svg { width: 16px; height: 16px; flex-shrink: 0; }*/
svg {
    width: 139px;
    height: 30px;
    flex-shrink: 0;
}
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  margin: 0;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
p { margin: 0; }

::selection { background-color: var(--brand-light); }

/* ---------- boot loader ---------- */
.boot-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100vh; color: var(--ink-muted);
}
.boot-loading img { height: 40px; }

#blazor-error-ui {
  background: var(--danger); color: white; display: none; position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 20px; font-size: 14px; z-index: 9999;
}
#blazor-error-ui .reload { color: white; text-decoration: underline; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.blazor-error-boundary { background: var(--danger); color: white; padding: 12px 16px; border-radius: var(--radius); }

/* ---------- layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--brand-darker) 0%, #241A0E 100%);
  color: rgba(255,255,255,0.92);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand-header { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; }
.sidebar .brand-header img { height: 32px; }
.sidebar nav { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: rgba(255,255,255,0.75); font-weight: 500; font-size: 13.5px; transition: all .15s ease-out;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,0.08); color: white; }
.sidebar .nav-link.active { background: var(--brand); color: white; }
.sidebar .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar .sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; color: rgba(255,255,255,0.6); }

/* ---------- collapsible nav groups ---------- */
.sidebar .nav-group { display: flex; flex-direction: column; }
.sidebar .nav-group-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: none; border: none; width: 100%; text-align: left; cursor: pointer;
  color: rgba(255,255,255,0.75); font-weight: 600; font-size: 13.5px; font-family: inherit;
  transition: all .15s ease-out;
}
.sidebar .nav-group-header:hover { background: rgba(255,255,255,0.08); color: white; }
.sidebar .nav-group-header svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar .nav-group-header span:not(.nav-group-chevron) { flex: 1; }
.sidebar .nav-group-chevron { display: flex; transition: transform .18s ease-out; }
.sidebar .nav-group-chevron svg { width: 14px; height: 14px; }
.sidebar .nav-group-chevron.open { transform: rotate(180deg); }
.sidebar .nav-group-items {
  display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden;
  transition: max-height .2s ease-out;
}
.sidebar .nav-group-items.open { max-height: 600px; }
.sidebar .nav-sublink { padding-left: 34px; font-weight: 400; }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 18px; font-weight: 700; }
.topbar .topbar-actions { margin-left: auto; margin-right: 16px; display: flex; align-items: center; }
.topbar .language-switcher { width: auto; padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.topbar .user-chip { display: flex; align-items: center; gap: 10px; }
.topbar .user-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-lighter); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.topbar .user-meta { font-size: 12.5px; line-height: 1.3; }
.topbar .user-meta .name { font-weight: 600; color: var(--ink); }
.topbar .user-meta .role { color: var(--ink-muted); }
.btn-logout { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-muted); cursor: pointer; }
.btn-logout:hover { border-color: var(--brand); color: var(--brand-dark); }

.content { padding: 24px 28px 60px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- auth (login/forgot/reset) layout ---------- */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 20%, var(--brand-lighter), var(--cream) 60%);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 36px 32px;
}
.auth-card .auth-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.auth-card .auth-logo img { height: 40px; }
.auth-card h1 { font-size: 20px; font-weight: 700; text-align: center; }
.auth-card .auth-sub { text-align: center; color: var(--ink-muted); font-size: 13px; margin-top: 6px; margin-bottom: 24px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12.5px; }

/* ---------- form controls ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; }
.field .hint { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--ink); background: var(--white);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(173,107,20,0.18);
}
input[disabled], select[disabled] { background: var(--brand-lighter); opacity: .7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.checkbox-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9px; padding: 10px 18px; font-weight: 600; font-size: 13.5px; font-family: 'Poppins', sans-serif;
  cursor: pointer; border: 1px solid transparent; transition: all .15s ease-out; white-space: nowrap;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: white; box-shadow: var(--shadow-soft); }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); color: white; }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.btn-danger { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: white; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn svg { width: 15px; height: 15px; }

/* ---------- cards / KPI ---------- */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 22px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-soft); border-left: 4px solid var(--brand); }
.kpi-card .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
.kpi-card .value { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; margin-top: 6px; }
.section-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- page header (list pages) ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; font-weight: 700; }
.page-head .sub { color: var(--ink-muted); font-size: 13px; margin-top: 4px; }
.toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); padding: 16px 18px;
}
.toolbar input, .toolbar select { flex: 1 1 180px; max-width: 220px; }
.toolbar .searchable-select { flex: 1 1 180px; max-width: 220px; }
.toolbar .field { margin-bottom: 0; flex: 1 1 180px; max-width: 220px; }
.toolbar .btn { flex: 0 0 auto; }

/* ---------- searchable select ("Select2-style" search-as-you-type dropdown) ---------- */
.searchable-select { position: relative; }
.searchable-select-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px;
  overflow-y: auto; background: var(--white); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: var(--shadow-soft); padding: 4px;
}
.searchable-select-option { padding: 8px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.searchable-select-option:hover, .searchable-select-option.highlighted { background: var(--brand-lighter); }
.searchable-select-option.selected { font-weight: 600; color: var(--brand-dark); }
.searchable-select-clear { color: var(--ink-muted); font-style: italic; }
.searchable-select-empty { padding: 10px; font-size: 12.5px; color: var(--ink-muted); text-align: center; }

/* ---------- table ---------- */
.table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; padding: 12px 16px; background: var(--brand-lighter); color: var(--brand-darker);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
tbody td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: rgba(173,107,20,0.04); }
td.num, th.num { text-align: right; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn {
  background: none; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; cursor: pointer;
  color: var(--ink-muted); display: inline-flex; align-items: center;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.icon-btn svg { width: 14px; height: 14px; }
.row-actions select.status-select { width: auto; padding: 5px 8px; font-size: 12.5px; }

/* ---------- icon toggle button for expand/collapse ---------- */
.btn-icon-toggle {
    background: var(--surface, #ecd6d6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--brand-dark, #3b2a1a);
    transition: all 0.15s ease-in-out;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}
.btn-icon-toggle:hover {
  background: var(--brand-lighter, #f5ebd9);
  border-color: var(--brand, #ad6b14);
  color: var(--brand, #ad6b14);
}
.btn-icon-toggle.is-expanded {
  background: var(--brand, #ad6b14);
  color: #ffffff;
  border-color: var(--brand, #ad6b14);
}
button.btn-icon-toggle svg,
.btn-icon-toggle svg {
  width: 20px !important;
  height: 14px !important;
  stroke-width: 2.5px;
}

/* ---------- invoice totals block ---------- */
.totals-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.totals-row select, .totals-row input { padding: 4px 6px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.badge-success { background: rgba(47,143,91,0.12); color: var(--success); }
.badge-danger { background: rgba(196,67,43,0.12); color: var(--danger); }
.badge-warning { background: rgba(209,154,31,0.14); color: var(--warning); }
.badge-neutral { background: var(--brand-lighter); color: var(--brand-darker); }

/* ---------- modal / drawer ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(36,26,14,0.45); display: flex; align-items: flex-start;
  justify-content: flex-end; z-index: 100; animation: fadeIn .15s ease-out;
}
.modal-panel {
  background: var(--white); width: 100%; max-width: 460px; height: 100%; overflow-y: auto;
  box-shadow: -8px 0 32px rgba(36,26,14,0.18); padding: 28px 28px 90px; position: relative;
}
.modal-panel h2 { font-size: 17px; font-weight: 700; margin-bottom: 20px; }
.modal-close { position: absolute; top: 22px; right: 22px; background: none; border: none; cursor: pointer; color: var(--ink-muted); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) { .modal-panel { max-width: 100%; } }

/* ---------- alerts ---------- */
.alert { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; }
.alert-danger { background: rgba(196,67,43,0.08); color: var(--danger); border: 1px solid rgba(196,67,43,0.25); }
.alert-success { background: rgba(47,143,91,0.08); color: var(--success); border: 1px solid rgba(47,143,91,0.25); }
.alert-info { background: var(--brand-lighter); color: var(--brand-darker); border: 1px solid var(--brand-light); }

/* ---------- misc ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-dark { border: 2px solid rgba(173,107,20,0.25); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }
.page-error { padding: 40px; text-align: center; color: var(--ink-muted); }
.text-muted { color: var(--ink-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.mt-4 { margin-top: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.lots-table { width: 100%; font-size: 12.5px; margin-top: 8px; }
.lots-table th, .lots-table td { padding: 6px 10px; }

/* ---------- print preview (Sales/Purchase Invoice, Quotation, Proforma, Credit/Debit Note) ----------
   The preview page no longer hand-draws its own copy of the invoice layout — it embeds the actual
   server-rendered PDF (same bytes InvoiceHtmlBuilder produces for the Print button) in an <iframe>,
   so the preview and the printout are always pixel-identical and there is only one layout to
   maintain (see OnyxBills.Application/Printing/InvoiceHtmlBuilder.cs). */
.print-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.print-toolbar select { width: auto; }
.pdf-preview-frame { display: block; width: 100%; height: calc(100vh - 160px); min-height: 500px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); background: var(--white); }
/*.batch-card {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}*/
@media print {
  .sidebar, .topbar, .print-toolbar, .page-head, .alert, .toolbar-search, .btn { display: none !important; }
  body, .app-shell, .main-area, .content { background: white !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
  .pdf-preview-frame { box-shadow: none !important; border: none !important; border-radius: 0 !important; width: 100% !important; height: 100vh !important; }
  .batch-card { border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
  .batch-card-header { display: none !important; }
  .barcode-strip { display: flex !important; flex-wrap: wrap !important; gap: 8mm !important; }
  .barcode-chip { page-break-inside: avoid; break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; padding: 4mm !important; }
}

/* ---------- barcode (Barcode Generation batches) ---------- */
.batch-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  margin-top: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.batch-card-header {
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.batch-card-body {
  padding: 20px;
}
.barcode-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.barcode-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; transition: all .18s ease-out; cursor: pointer; user-select: none;
  box-shadow: 0 1px 3px rgba(36,26,14,0.04); min-width: 120px;
}
.barcode-chip:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(173,107,20,0.15);
}
.barcode-chip:active { transform: translateY(0); }
.barcode-svg { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 50px; background: #fff; line-height: 0; padding: 4px; }
.barcode-svg svg { display: block; max-width: 100%; min-width: 60px; min-height: 44px; }
.barcode-code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }

.toolbar-search.style-compact input { max-width: 260px; padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.font-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--white); color: var(--ink-muted);
  cursor: pointer; transition: all .15s ease;
}
.icon-btn:hover { background: var(--bg-alt); color: var(--brand); border-color: var(--brand); }

/* Extra responsive utility for form grid fields */
@media (max-width: 900px) {
  .card [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .card [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Dashboard Enhancements ---------- */
.quick-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  align-items: center;
}
.quick-actions-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-right: 6px;
}
.quick-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-darker);
  transition: all .15s ease-out;
}
.quick-action-link:hover {
  background: var(--brand-lighter);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.quick-action-link svg {
  width: 15px;
  height: 15px;
}

.kpi-card-sub {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-card.accent-success { border-left-color: var(--success); }
.kpi-card.accent-warning { border-left-color: var(--warning); }
.kpi-card.accent-danger { border-left-color: var(--danger); }
.kpi-card.accent-brand { border-left-color: var(--brand); }

.dashboard-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 992px) {
  .dashboard-grid-2col {
    grid-template-columns: 1fr;
  }
}

.chart-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.trend-bars-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  height: 180px;
  padding-top: 20px;
  border-bottom: 1px solid var(--border);
}
.trend-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.trend-bar-pillars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  max-width: 32px;
  height: 100%;
}
.trend-pillar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  transition: height .3s ease-out;
  min-height: 4px;
}
.trend-pillar.sales { background: var(--brand); }
.trend-pillar.receipts { background: var(--success); }
.trend-label {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
}
.trend-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-muted);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-dot.sales { background: var(--brand); }
.legend-dot.receipts { background: var(--success); }

.status-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
}
.status-bar-track {
  height: 8px;
  background: var(--brand-lighter);
  border-radius: 4px;
  overflow: hidden;
}
.status-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease-out;
}
.fill-draft { background: var(--ink-muted); }
.fill-confirmed { background: var(--brand); }
.fill-partiallypaid { background: var(--warning); }
.fill-paid { background: var(--success); }
.fill-overdue { background: var(--danger); }