/* shadcn/ui-inspired semantic theme for the existing server-rendered UI.
   Loaded last so the original styles and layout remain available. */
:root {
    color-scheme: light;
    --background: #fafafa;
    --foreground: #18181b;
    --card: #ffffff;
    --primary: #18181b;
    --primary-foreground: #fafafa;
    --secondary: #f4f4f5;
    --muted-foreground: #71717a;
    --border: #e4e4e7;
    --ring: #a1a1aa;
    --success-soft: #ecfdf5;
    --danger-soft: #fff1f2;
    --warning-soft: #fffbeb;
    --warning: #92400e;
    --radius: 10px;
    --blue: var(--foreground);
    --deep: var(--foreground);
    --ink: var(--foreground);
    --muted: var(--muted-foreground);
    --line: var(--border);
    --soft: var(--secondary);
    --green: #047857;
    --red: #be123c;
    --shadow: 0 1px 2px rgb(0 0 0 / .035);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #09090b;
    --foreground: #fafafa;
    --card: #111113;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --secondary: #27272a;
    --muted-foreground: #a1a1aa;
    --border: #2b2b30;
    --ring: #71717a;
    --success-soft: #092c22;
    --danger-soft: #35121e;
    --warning-soft: #302510;
    --warning: #fcd34d;
    --green: #6ee7b7;
    --red: #fda4af;
    --shadow: 0 1px 2px rgb(0 0 0 / .15);
}
:root body { background: var(--background); color: var(--foreground); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
:root a { text-underline-offset: 4px; }
:root :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
:root .skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--primary); color: var(--primary-foreground); padding: 10px 16px; border-radius: 6px; }
:root .skip-link:focus { top: 12px; }
:root .topbar { height: 68px; padding: 0 max(24px,calc((100vw - 1240px)/2)); gap: 32px; background: var(--card); backdrop-filter: none; }
:root .brand { font-size: 18px; font-weight: 650; letter-spacing: -.04em; gap: 10px; flex-shrink: 0; }
:root .brand img { width: 30px; height: 30px; border-radius: 7px; }
:root .topbar nav { gap: 6px; min-width: 0; }
:root .topbar nav a { font-size: 13px; font-weight: 500; color: var(--muted); padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
:root .topbar nav a:hover, :root .topbar nav a[aria-current="page"] { background: var(--secondary); color: var(--foreground); }
:root .topbar .user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; margin-left: 10px; padding-left: 16px; }
:root .theme-toggle { width: 34px; height: 34px; background: var(--card); border: 1px solid var(--border); color: var(--foreground); border-radius: 6px; margin-left: 8px; font-size: 17px; flex-shrink: 0; }
:root .theme-toggle:hover { background: var(--secondary); border-color: var(--border); transform: none; }
:root .container { max-width: 1240px; padding: 40px 24px 64px; min-height: calc(100vh - 143px); }
:root .page-head { align-items: center; margin-bottom: 28px; gap: 20px; }
:root .page-head h1 { font-size: 28px; line-height: 1.25; font-weight: 650; letter-spacing: -.04em; margin: 6px 0; }
:root .page-head p { font-size: 14px; line-height: 1.6; }
:root .eyebrow { color: var(--muted); letter-spacing: .08em; font-size: 10px; font-weight: 600; }
:root .button { min-height: 36px; padding: 7px 14px; gap: 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; line-height: 20px; font-weight: 500; box-shadow: var(--shadow); transition: background-color .15s, opacity .15s; }
:root .button:hover { background: var(--secondary); }
:root .button.primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); box-shadow: var(--shadow); }
:root .button.primary:hover { opacity: .88; }
:root .button.danger { background: #be123c; color: white; border-color: #be123c; }
:root .button.danger:hover { background: #9f1239; }
:root .button.danger-outline { color: var(--red); background: var(--card); border-color: var(--border); }
:root .button.danger-outline:hover { background: var(--danger-soft); }
:root .button.warning { color: #fff; background: #92400e; border-color: #92400e; }
:root .button.warning-outline { color: var(--warning); background: var(--warning-soft); border-color: var(--border); }
:root .actions { flex-wrap: wrap; }
:root :is(.stats>div,.panel,.balance-card,.table-wrap,.login-card,.error-card,.danger-card,.archive-card,.report-chart-card,.report-summary,.csv-card,.csv-help) { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
:root .stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 32px; }
:root .stats>div { padding: 22px 24px; }
:root .stats span { font-size: 13px; color: var(--foreground); font-weight: 500; }
:root .stats strong { font-size: 30px; line-height: 1.3; letter-spacing: -.045em; font-weight: 650; margin-top: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:root .section-title { margin: 28px 0 14px; }
:root .section-title h2, :root :is(.csv-card,.csv-help,.report-chart-card) h2 { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
:root .section-title a { color: var(--foreground); font-size: 13px; font-weight: 500; }
:root .section-title a:hover { text-decoration: underline; }
:root .table-wrap { overflow-x: auto; }
:root table { font-size: 13px; }
:root th { background: var(--card); color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; height: 44px; padding: 12px 20px; }
:root td { padding: 15px 20px; border-color: var(--border); }
:root tbody tr:hover { background: var(--soft); }
:root td a, :root .customer-name-link { color: var(--foreground); font-weight: 500; }
:root td a:hover { text-decoration: underline; }
:root td small { font-size: 12px; }
:root .right { font-variant-numeric: tabular-nums; }
:root .positive { color: var(--green); }
:root .negative, :root .danger-text { color: var(--red); }
:root .badge { padding: 2px 8px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); border-radius: 5px; }
:root .badge.credit, :root .flash.success { background: var(--success-soft); color: var(--green); }
:root .badge.debit { background: var(--danger-soft); color: var(--red); }
:root .flash { border: 1px solid var(--border); padding: 12px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; }
:root .flash.error { background: var(--danger-soft); color: var(--red); }
:root .empty { padding: 44px 20px; }
:root .form { padding: 24px; max-width: 800px; }
:root .form label, :root .csv-upload label, :root .entry-type-field legend { color: var(--foreground); font-size: 13px; font-weight: 500; }
:root :is(.form input,.form textarea,.form select,.search input,.csv-upload input[type="file"]) { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 6px; min-height: 38px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow); }
:root .form textarea { min-height: 110px; resize: vertical; }
:root :is(.form input,.form textarea,.form select,.search input):focus { border-color: var(--ring); outline: 2px solid var(--border); outline-offset: 1px; }
:root .search { gap: 8px; max-width: 560px; align-items: center; margin-bottom: 20px; }
:root .search input { margin-top: 0; min-width: 0; }
:root input::placeholder, :root textarea::placeholder { color: var(--muted); opacity: 1; }
:root .balance-card { padding: 24px; }
:root .balance-card strong { font-weight: 600; font-size: 32px; letter-spacing: -.04em; overflow-wrap: anywhere; }
:root .customer-notes { color: var(--muted); }
:root .login-card { max-width: 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin: 64px auto; padding: 32px; text-align: left; }
:root .login-card>img { width: 48px; height: 48px; border-radius: 10px; filter: none; margin: 0; }
:root .login-card h1 { font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; margin: 10px 0 12px; }
:root .login-card p { font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
:root .login-card .button { width: 100%; min-height: 40px; }
:root :is(.error-card,.danger-card,.archive-card) { padding: 32px; margin: 48px auto; }
:root :is(.error-card,.danger-card,.archive-card) h1 { font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
:root .error-card p { color: var(--muted); margin-bottom: 24px; }
:root :is(.row-actions,.entry-row-actions) .row-action { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-weight: 500; min-height: 30px; box-shadow: var(--shadow); }
:root :is(.row-actions,.entry-row-actions) .row-action:hover { transform: none; background: var(--secondary); text-decoration: none; }
:root :is(.row-actions,.entry-row-actions) .delete-action { color: var(--red); }
:root .row-actions .icon-action { width: 32px; min-width: 32px; }
:root .icon-action svg { width: 15px; height: 15px; stroke-width: 1.7; }
:root .customer-actions-cell { width: 200px; }
:root .pagination-button { color: var(--foreground); background: var(--card); border-color: var(--border); border-radius: 6px; min-height: 32px; font-size: 12px; font-weight: 500; }
:root .pagination-button:hover { background: var(--secondary); }
:root .pagination-button.disabled { background: var(--secondary); color: var(--muted); opacity: .5; }
:root .pagination-status, :root .pagination>div>span { font-size: 12px; font-weight: 400; }
:root .interest-settings { padding: 20px; background: var(--background); border-color: var(--border); border-radius: 8px; }
:root .interest-toggle span { background: var(--border); width: 36px; height: 20px; padding: 2px; }
:root .interest-toggle span::after { height: 16px; width: 16px; }
:root .interest-toggle input:checked+span { background: var(--primary); }
:root .interest-toggle input:checked+span::after { background: var(--primary-foreground); transform: translateX(16px); }
:root .interest-settings>p { margin-left: 47px; }
:root .type-option span { min-height: 38px; border-radius: 6px; font-size: 13px; font-weight: 500; box-shadow: none; }
:root .type-option:hover span { transform: none; }
:root .form :is(.type-option,.interest-toggle) { position: relative; }
/* Keep custom controls keyboard-accessible without inheriting full-width fields. */
:root .form :is(.type-option,.interest-toggle) input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
:root .debit-option span { color: var(--red); background: var(--card); border-color: var(--border); }
:root .credit-option span { color: var(--green); background: var(--card); border-color: var(--border); }
:root .debit-option input:checked+span { color: var(--red); background: var(--danger-soft); border-color: var(--red); box-shadow: none; }
:root .credit-option input:checked+span { color: var(--green); background: var(--success-soft); border-color: var(--green); box-shadow: none; }
:root .status-badge.defaulter, :root .archived-banner { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--border); font-weight: 500; border-radius: 6px; }
:root .defaulter-total-card { background: var(--warning-soft); border-color: var(--border); border-radius: var(--radius); box-shadow: none; }
:root .defaulter-total-card :is(span,strong,small), :root .warning-text { color: var(--warning); }
:root .defaulter-total-card strong { font-weight: 600; }
:root .csv-card { padding: 24px; }
:root .csv-step { background: var(--secondary); color: var(--foreground); border-radius: 6px; font-weight: 500; }
:root .csv-upload input[type="file"] { background: var(--background); border-style: dashed; }
:root input[type="file"]::file-selector-button { background: var(--secondary); color: var(--foreground); border: 0; border-radius: 4px; padding: 5px 10px; margin-right: 12px; font: inherit; cursor: pointer; }
:root .delete-entry-summary>div { border-radius: 6px; }
:root .report-chart-card { padding: 24px; }
:root .pie-chart { box-shadow: none; }
:root .pie-chart { position: relative; }
:root .chart-hit-regions { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root .chart-hit-regions path { fill: transparent; cursor: help; pointer-events: all; }
:root .chart-hit-regions path:hover, :root .chart-hit-regions path:focus { fill: rgb(255 255 255 / .18); outline: none; }
:root .chart-hit-regions path:focus-visible { stroke: var(--foreground); stroke-width: .7; }
:root .chart-tooltip { position: absolute; z-index: 5; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: min(300px,75vw); padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--foreground); box-shadow: 0 4px 16px rgb(0 0 0 / .15); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; pointer-events: none; }
:root .pie-chart>div { background: var(--card); box-shadow: none; }
:root .chart-legend a { color: var(--foreground); }
:root .chart-legend strong { font-weight: 500; }
:root .chart-empty { border-color: var(--border); border-radius: 8px; }
:root footer { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); background: var(--card); padding: 22px 24px; }
@media(max-width:1000px) {
    :root .topbar { gap: 16px; }
    :root .topbar .user { display: none; }
    :root .topbar nav a { padding: 8px; }
}
:root .mobile-menu-toggle { display: none; }
@media(max-width:760px) {
    :root .topbar { height: auto; min-height: 64px; padding: 14px 16px; flex-wrap: wrap; align-items: center; gap: 14px; }
    :root .topbar nav { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
    :root .topbar nav a:not(.logout) { display: inline-flex; }
    :root .topbar nav .theme-toggle { margin-left: auto; }
    :root .topbar nav .logout { margin-left: 0; }
    :root .container { padding: 28px 16px 48px; }
    :root .page-head { align-items: flex-start; }
    :root .page-head h1 { font-size: 25px; }
    :root .stats { grid-template-columns: 1fr; gap: 12px; }
    :root .stats>div { padding: 20px; }
    :root .login-card { margin: 32px auto; padding: 28px; }
    :root .form { padding: 20px; }
    :root .head-actions { width: 100%; justify-content: flex-start; }
    :root .balance-card strong { margin-top: 12px; }
    :root .delete-entry-summary { grid-template-columns: 1fr; }
    :root .mobile-menu-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font-size: 20px; cursor: pointer; }
    :root .topbar { justify-content: flex-start; position: relative; }
    :root .topbar nav { display: none; position: absolute; left: 16px; top: calc(100% - 4px); width: min(280px,calc(100vw - 32px)); padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); z-index: 20; }
    :root .topbar nav.mobile-open { display: flex; flex-direction: column; align-items: stretch; }
    :root .topbar nav a { min-height: 40px; align-items: center; }
    :root .topbar nav .theme-toggle { margin: 8px; }
    :root .topbar nav .logout { display: inline-flex; border-top: 1px solid var(--border); border-radius: 0; }
}
@media(prefers-reduced-motion:reduce) {
    :root *, :root *::before, :root *::after { transition: none; scroll-behavior: auto; }
}
@media(max-width:600px) {
    :root .topbar { position: relative; }
    :root .container, :root .page-head>div, :root .csv-grid>* , :root .report-grid>* { min-width: 0; }
    :root .table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    :root .table-wrap table { min-width: 0; width: 100%; display: block; }
    :root .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    :root .table-wrap tbody { display: grid; gap: 12px; }
    :root .table-wrap tbody tr { display: block; padding: 8px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
    :root .table-wrap td { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; align-items: center; width: auto; padding: 12px 0; text-align: right; overflow-wrap: anywhere; border: 0; border-bottom: 1px solid var(--border); }
    :root .table-wrap td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 400; text-align: left; }
    :root .table-wrap td:last-child { border-bottom: 0; }
    :root .activity-table tbody tr { display: flex; flex-direction: column; }
    :root .activity-table td:nth-child(1) { order: 1; }
    :root .activity-table td:nth-child(3) { order: 2; }
    :root .activity-table td:nth-child(4) { order: 3; border-bottom: 1px solid var(--border); }
    :root .activity-table td:nth-child(2) { order: 4; border-bottom: 0; }
    :root .table-wrap td:first-child a { font-weight: 600; }
    :root .table-wrap td[colspan] { display: block; text-align: center; }
    :root .table-wrap td[colspan]::before { content: none; }
    :root .table-wrap td small { grid-column: 2; }
    :root .table-wrap .status-badge { justify-self: end; grid-column: 2; margin: 0; }
    :root .row-actions, :root .entry-row-actions { flex-wrap: wrap; }
    :root .form input, :root .form textarea, :root .form select, :root .search input { font-size: 16px; }
    :root .head-actions .button { flex: 1 1 auto; }
    :root .chart-legend a { grid-template-columns: 10px minmax(0,1fr); }
    :root .chart-legend strong { grid-column: 2; }
    :root .pie-chart { max-width: 100%; }
}