/* shadcn/ui-aligned Financial Theme — neutral base, blue primary */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ─── Color Tokens ──────────────────────────────────────────────── */
:root {
    /* shadcn default: pure white background */
    --background:       0 0% 100%;
    --foreground:       224 71.4% 4.1%;

    --card:             0 0% 100%;
    --card-foreground:  224 71.4% 4.1%;

    --popover:          0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;

    /* Blue primary (shadcn default) */
    --primary:          221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    /* shadcn default neutral secondary */
    --secondary:        220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;

    /* shadcn default neutral muted */
    --muted:            220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;

    /* Accent */
    --accent:           220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;

    /* Destructive */
    --destructive:      0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    /* shadcn default borders */
    --border:           220 13% 91%;
    --input:            220 13% 91%;
    --ring:             221.2 83.2% 53.3%;

    --radius:           0.5rem;

    /* Semantic */
    --success:          142.1 76.2% 36.3%;
    --warning:          38 92% 50%;

    /* ── Sidebar — slightly off-white, matches shadcn sidebar ── */
    --sidebar-background:          0 0% 98%;
    --sidebar-foreground:          240 5.3% 26.1%;
    --sidebar-primary:             221.2 83.2% 53.3%;
    --sidebar-primary-foreground:  210 40% 98%;
    --sidebar-accent:              240 4.8% 95.9%;
    --sidebar-accent-foreground:   240 5.9% 10%;
    --sidebar-border:              220 13% 91%;
    --sidebar-ring:                221.2 83.2% 53.3%;
}

/* ─── Dark Mode ────────────────────────────────────────────────── */
.dark {
    /* shadcn dark defaults */
    --background:       222.2 84% 4.9%;
    --foreground:       210 40% 98%;

    --card:             222.2 84% 4.9%;
    --card-foreground:  210 40% 98%;

    --popover:          222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary:          217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary:        217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted:            217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent:           217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive:      0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border:           217.2 32.6% 17.5%;
    --input:            217.2 32.6% 17.5%;
    --ring:             217.2 91.2% 59.8%;

    --success:          142.1 70.6% 45.3%;
    --warning:          38 92% 50%;

    --sidebar-background:          222.2 84% 4.9%;
    --sidebar-foreground:          215 20.2% 65.1%;
    --sidebar-primary:             217.2 91.2% 59.8%;
    --sidebar-primary-foreground:  222.2 47.4% 11.2%;
    --sidebar-accent:              217.2 32.6% 17.5%;
    --sidebar-accent-foreground:   210 40% 98%;
    --sidebar-border:              217.2 32.6% 17.5%;
    --sidebar-ring:                217.2 91.2% 59.8%;
}

/* ─── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
    border-color: hsl(var(--border));
    box-sizing: border-box;
}

html, body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

h1:focus { outline: none; }

/* ─── Screen reader ───────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ─── Nav item active class used by sidebar components ─────────── */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: hsl(var(--sidebar-foreground));
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.nav-item:hover {
    background: hsl(var(--sidebar-accent));
    color: hsl(var(--sidebar-accent-foreground));
}

.nav-item-active {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-weight: 600;
}

/* ─── Toast ───────────────────────────────────────────────────── */
.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    font-size: 14.5px;
}
.toast-success { border-left: 3px solid hsl(var(--success)); }
.toast-error   { border-left: 3px solid hsl(var(--destructive)); }
.toast-warning { border-left: 3px solid hsl(var(--warning)); }
.toast-info    { border-left: 3px solid hsl(var(--primary)); }

/* ─── Animations ──────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-spin        { animation: spin 1s linear infinite; }
.animate-slide-in-right { animation: slide-in-right 0.25s ease-out; }
.animate-fade-in     { animation: fade-in 0.2s ease-out; }

/* ─── Legacy QuickBooks Layout classes ────────────────────────── */
.qb-layout  { display: flex; flex-direction: column; height: 100vh; }
.qb-header  {
    background: hsl(var(--primary));
    color: white;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 56px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
}
.qb-header-left  { display: flex; align-items: center; gap: 12px; }
.qb-header-right { display: flex; align-items: center; gap: 12px; }
.qb-menu-toggle  { background: none; border: none; color: white; font-size: 1.4rem; cursor: pointer; padding: 4px 8px; }
.qb-logo { color: white; text-decoration: none; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.qb-logo:hover { color: white; }
.qb-header-icon { color: white; font-size: 1.2rem; text-decoration: none; padding: 4px 8px; }
.qb-header-icon:hover { color: rgba(255,255,255,0.8); }
.qb-body { display: flex; margin-top: 56px; height: calc(100vh - 56px); }
.qb-main { flex: 1; margin-left: 240px; overflow-y: auto; background: hsl(var(--background)); transition: margin-left 0.2s; }
.qb-main.expanded { margin-left: 60px; }
.qb-content { padding: 24px; max-width: 1400px; }

/* ─── Sidebar (legacy class) ──────────────────────────────────── */
.qb-sidebar {
    width: 240px;
    background: hsl(var(--sidebar-background));
    border-right: 1px solid hsl(var(--sidebar-border));
    color: hsl(var(--sidebar-foreground));
    position: fixed; top: 56px; left: 0; bottom: 0;
    overflow-y: auto; overflow-x: hidden;
    transition: width 0.2s; z-index: 999;
}
.qb-sidebar.collapsed { width: 60px; }
.qb-nav-items         { padding: 8px 0; }
.qb-nav-divider       { height: 1px; background: hsl(var(--sidebar-border)); margin: 8px 16px; }
.qb-nav-item {
    display: flex; align-items: center;
    padding: 9px 14px;
    color: hsl(var(--sidebar-foreground));
    text-decoration: none; font-size: 14.5px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap; cursor: pointer;
    border-radius: 6px; margin: 1px 6px;
}
.qb-nav-item:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); }
.qb-nav-item.active { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); font-weight: 600; }
.qb-nav-item i { width: 28px; font-size: 1.1rem; flex-shrink: 0; text-align: center; }
.qb-nav-item span { margin-left: 6px; }

.qb-nav-group-header {
    display: flex; align-items: center;
    padding: 9px 14px;
    color: hsl(var(--sidebar-foreground));
    font-size: 14.5px; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    border-radius: 6px; margin: 1px 6px;
}
.qb-nav-group-header:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); }
.qb-nav-group-header i.group-icon { width: 28px; font-size: 1.1rem; flex-shrink: 0; text-align: center; }
.qb-nav-group-header span { margin-left: 6px; flex: 1; }
.qb-nav-group-header i.chevron { font-size: 0.65rem; transition: transform 0.2s; }
.qb-nav-group-header i.chevron.open { transform: rotate(90deg); }
.qb-nav-group-children { overflow: hidden; }
.qb-nav-group-children .qb-nav-item { padding-left: 46px; font-size: 14px; }
.qb-sidebar.collapsed .qb-nav-group-children { display: none; }
.qb-sidebar.collapsed .qb-nav-group-header span,
.qb-sidebar.collapsed .qb-nav-group-header i.chevron,
.qb-sidebar.collapsed .qb-nav-item span { display: none; }

/* ─── Page header ─────────────────────────────────────────────── */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { margin: 0; font-weight: 600; color: hsl(var(--foreground)); }

/* ─── Cards ───────────────────────────────────────────────────── */
.qb-card {
    background: hsl(var(--card));
    border-radius: 12px;
    border: 1px solid hsl(var(--border));
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 0 0 0 transparent;
    padding: 22px 24px;
    margin-bottom: 16px;
    transition: box-shadow 0.15s;
}
.qb-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.07); }
.qb-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid hsl(var(--border));
}
.qb-card-header h5 { margin: 0; font-weight: 600; color: hsl(var(--foreground)); }

/* ─── Tables ──────────────────────────────────────────────────── */
.qb-table { width: 100%; border-collapse: collapse; }
.qb-table thead th {
    background: hsl(var(--muted));
    padding: 9px 12px;
    text-align: left; font-size: 12px; font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid hsl(var(--border));
}
.qb-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 14.5px; color: hsl(var(--foreground));
}
.qb-table tbody tr:hover { background: hsl(var(--muted)); }
.qb-table .text-right  { text-align: right; }
.qb-table .text-center { text-align: center; }

/* ─── Status badges ───────────────────────────────────────────── */
.badge-draft   { background: hsl(220 10% 62%); color: white; }
.badge-sent    { background: hsl(213 80% 54%); color: white; }
.badge-paid    { background: hsl(var(--primary)); color: white; }
.badge-partial { background: hsl(var(--warning)); color: white; }
.badge-overdue { background: hsl(var(--destructive)); color: white; }
.badge-open    { background: hsl(213 80% 54%); color: white; }
.badge-voided  { background: hsl(220 10% 72%); color: hsl(220 15% 30%); }
.badge-accepted{ background: hsl(var(--primary)); color: white; }
.badge-rejected{ background: hsl(var(--destructive)); color: white; }

/* ─── Chart container (used by ChartContainer.razor) ─────────── */
.chart-container   { width: 100%; }
.chart-header      { margin-bottom: 12px; }
.chart-title       { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0 0 2px; }
.chart-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0; }
.chart-content     { position: relative; }

/* ─── Chart time-range toggle (shadcn-style pill group) ──────── */
.chart-range-group {
    display: flex;
    align-items: center;
    background: hsl(var(--muted));
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.chart-range-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.chart-range-btn:hover { color: hsl(var(--foreground)); }
.chart-range-btn-active {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px hsl(var(--border));
}

/* ─── Dashboard stat card gradients ─────────────────────────── */
/* Defined in CSS (not Tailwind) so they work regardless of CDN scanning */
.stat-gradient-green  { background: linear-gradient(to bottom, #f0fdf4, transparent); }
.stat-gradient-red    { background: linear-gradient(to bottom, #fef2f2, transparent); }
.stat-gradient-blue   { background: linear-gradient(to bottom, #eff6ff, transparent); }
.stat-gradient-purple { background: linear-gradient(to bottom, #faf5ff, transparent); }
.stat-gradient-orange { background: linear-gradient(to bottom, #fff7ed, transparent); }
.dark .stat-gradient-green  { background: linear-gradient(to bottom, rgb(20  83  45  / 0.15), transparent); }
.dark .stat-gradient-red    { background: linear-gradient(to bottom, rgb(127 29  29  / 0.15), transparent); }
.dark .stat-gradient-blue   { background: linear-gradient(to bottom, rgb(30  58  138 / 0.15), transparent); }
.dark .stat-gradient-purple { background: linear-gradient(to bottom, rgb(88  28  135 / 0.15), transparent); }
.dark .stat-gradient-orange { background: linear-gradient(to bottom, rgb(124 45  18  / 0.15), transparent); }

/* ─── Dashboard widgets ───────────────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric-card {
    background: hsl(var(--card));
    border-radius: 12px; border: 1px solid hsl(var(--border));
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding: 20px 22px;
}
.metric-card .metric-label {
    font-size: 12px; color: hsl(var(--muted-foreground));
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}
.metric-card .metric-value { font-size: 1.75rem; font-weight: 700; color: hsl(var(--foreground)); font-family: 'DM Serif Display', serif; }
.metric-card .metric-value.positive { color: hsl(var(--success)); }
.metric-card .metric-value.negative { color: hsl(var(--destructive)); }

/* ─── Forms ───────────────────────────────────────────────────── */
.qb-form { max-width: 900px; }
.qb-form .form-section { margin-bottom: 24px; }
.qb-form .form-section h6 {
    color: hsl(var(--muted-foreground)); text-transform: uppercase;
    font-size: 11.5px; letter-spacing: 0.08em; margin-bottom: 12px;
}

/* ─── Line items ──────────────────────────────────────────────── */
.line-items-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.line-items-table thead th {
    background: hsl(var(--muted)); padding: 9px 10px;
    font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground));
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid hsl(var(--border));
}
.line-items-table tbody td { padding: 6px 10px; border-bottom: 1px solid hsl(var(--border)); }
.line-items-table input,
.line-items-table select { width: 100%; border: 1px solid transparent; padding: 4px 8px; font-size: 14px; background: transparent; }
.line-items-table input:focus,
.line-items-table select:focus { border-color: hsl(var(--primary)); outline: none; background: white; border-radius: 4px; }

/* ─── Totals ──────────────────────────────────────────────────── */
.totals-section { display: flex; justify-content: flex-end; }
.totals-table { width: 300px; }
.totals-table .total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14.5px; }
.totals-table .total-row.grand-total {
    font-weight: 700; font-size: 1.05rem;
    border-top: 2px solid hsl(var(--foreground)); padding-top: 8px; margin-top: 4px;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn-qb-primary {
    background: hsl(var(--primary)); color: white;
    border: none; padding: 8px 20px; border-radius: 8px;
    font-weight: 500; cursor: pointer; font-family: inherit; font-size: 14.5px;
    transition: background 0.15s, box-shadow 0.15s;
}
.btn-qb-primary:hover {
    background: hsl(80 44% 30%);
    box-shadow: 0 2px 8px hsl(var(--primary) / 0.35);
}
.btn-qb-secondary {
    background: hsl(var(--card)); color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border)); padding: 8px 20px;
    border-radius: 8px; font-weight: 500; cursor: pointer; font-family: inherit; font-size: 14.5px;
    transition: background 0.15s;
}
.btn-qb-secondary:hover { background: hsl(var(--muted)); }

/* ─── Filter bar ──────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar .form-control,
.filter-bar .form-select { max-width: 200px; }

/* ─── Status tabs ─────────────────────────────────────────────── */
.status-tabs { display: flex; gap: 0; border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden; }
.status-tab {
    padding: 7px 18px; font-size: 14px; font-weight: 500;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--card)); border: none;
    border-right: 1px solid hsl(var(--border)); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.status-tab:last-child { border-right: none; }
.status-tab:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.status-tab.active { background: hsl(var(--primary)); color: white; }

/* ─── List toolbar ────────────────────────────────────────────── */
.list-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.list-toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-toolbar-right { display: flex; align-items: center; gap: 8px; }
.list-count { font-size: 13.5px; color: hsl(var(--muted-foreground)); padding: 6px 0; }

/* ─── Batch bar ───────────────────────────────────────────────── */
.batch-bar {
    display: flex; align-items: center; gap: 12px;
    background: hsl(var(--primary) / 0.08);
    border: 1px solid hsl(var(--primary) / 0.3);
    border-radius: 8px; padding: 8px 16px; margin-bottom: 12px;
}
.batch-bar .batch-count { font-size: 14px; font-weight: 600; color: hsl(var(--primary)); }
.batch-bar .btn-batch {
    padding: 5px 13px; font-size: 13.5px; border-radius: 6px;
    border: 1px solid hsl(var(--border)); background: hsl(var(--card));
    color: hsl(var(--foreground)); cursor: pointer; font-family: inherit;
    transition: background 0.12s;
}
.batch-bar .btn-batch:hover { background: hsl(var(--muted)); }
.batch-bar .btn-batch.danger { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.4); }
.batch-bar .btn-batch.danger:hover { background: hsl(var(--destructive) / 0.08); }

/* ─── Sortable columns ────────────────────────────────────────── */
.qb-table thead th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
.qb-table thead th.sortable:hover { background: hsl(var(--secondary)); }
.qb-table thead th.sortable .sort-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: hsl(var(--border)); }
.qb-table thead th.sortable.sorted .sort-icon { color: hsl(var(--primary)); }

/* ─── Checkboxes ──────────────────────────────────────────────── */
.qb-table .col-check { width: 40px; text-align: center; }
.qb-table .col-check input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: hsl(var(--primary)); }

/* ─── Row action dropdown ─────────────────────────────────────── */
.row-actions { position: relative; }
.row-action-btn {
    background: none; border: 1px solid transparent;
    padding: 4px 8px; cursor: pointer; border-radius: 6px;
    color: hsl(var(--muted-foreground)); font-size: 1rem;
    transition: background 0.12s, border-color 0.12s;
}
.row-action-btn:hover { background: hsl(var(--muted)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.row-action-menu {
    position: absolute; right: 0; top: 100%;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 100; min-width: 160px; padding: 4px;
}
.row-action-menu a,
.row-action-menu button {
    display: block; width: 100%; padding: 8px 13px;
    font-size: 14px; color: hsl(var(--foreground));
    text-decoration: none; background: none; border: none;
    text-align: left; cursor: pointer; border-radius: 6px;
    transition: background 0.12s;
    font-family: inherit;
}
.row-action-menu a:hover,
.row-action-menu button:hover { background: hsl(var(--muted)); }
.row-action-menu button.danger { color: hsl(var(--destructive)); }
.row-action-menu button.danger:hover { background: hsl(var(--destructive) / 0.08); }
.row-action-menu .divider { height: 1px; background: hsl(var(--border)); margin: 4px 0; }

/* ─── Icon buttons ────────────────────────────────────────────── */
.btn-icon {
    background: hsl(var(--card)); border: 1px solid hsl(var(--border));
    padding: 7px 11px; border-radius: 8px; cursor: pointer;
    color: hsl(var(--muted-foreground)); font-size: 14px;
    transition: background 0.12s, color 0.12s;
}
.btn-icon:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* ─── Quick Create menu ───────────────────────────────────────── */
.qb-quick-create { position: relative; }
.qb-new-btn {
    background: rgba(255,255,255,0.18); color: white;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 18px; border-radius: 8px; font-size: 13.5px;
    font-weight: 500; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: background 0.15s;
}
.qb-new-btn:hover { background: rgba(255,255,255,0.28); }
.qb-create-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); margin-top: 8px;
    background: hsl(var(--card)); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14);
    z-index: 1100; min-width: 480px; padding: 20px;
    border: 1px solid hsl(var(--border));
}
.qb-create-columns { display: flex; gap: 24px; }
.qb-create-col { flex: 1; }
.qb-create-col h6 { font-size: 11.5px; font-weight: 700; color: hsl(var(--muted-foreground)); letter-spacing: 0.06em; margin: 0 0 10px 0; text-transform: uppercase; }
.qb-create-col a { display: block; padding: 6px 9px; color: hsl(var(--foreground)); text-decoration: none; font-size: 14px; border-radius: 6px; }
.qb-create-col a:hover { background: hsl(var(--muted)); color: hsl(var(--primary)); }

/* ─── Report styles ───────────────────────────────────────────── */
.report-header { text-align: center; margin-bottom: 24px; }
.report-header h3 { margin: 0; font-weight: 400; }
.report-header .report-period { color: hsl(var(--muted-foreground)); font-size: 14px; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table td, .report-table th { padding: 7px 12px; font-size: 14px; }
.report-table .section-header td { font-weight: 700; padding-top: 16px; border-bottom: 1px solid hsl(var(--border)); }
.report-table .section-total td  { font-weight: 600; border-top: 1px solid hsl(var(--border)); }
.report-table .grand-total td    { font-weight: 700; font-size: 0.95rem; border-top: 2px solid hsl(var(--foreground)); border-bottom: 2px solid hsl(var(--foreground)); }
.report-table .indent-1 td:first-child { padding-left: 24px; }
.report-table .indent-2 td:first-child { padding-left: 48px; }

/* ─── Loading / Errors ────────────────────────────────────────── */
.loading-spinner { display: flex; justify-content: center; padding: 40px; color: hsl(var(--muted-foreground)); }
.clickable-row { cursor: pointer; }

#blazor-error-ui {
    color-scheme: light only; background: #fffbeb;
    bottom: 0; box-shadow: 0 -1px 4px rgba(0,0,0,0.12);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; width: 100%; z-index: 1000;
    font-size: 14.5px; border-top: 2px solid hsl(var(--warning));
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: hsl(var(--destructive)); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ─── Loading progress (Blazor WASM initial load) ─────────────── */
.loading-progress {
    position: absolute; display: block;
    width: 8rem; height: 8rem;
    inset: 20vh 0 auto 0; margin: 0 auto;
}
.loading-progress circle {
    fill: none; stroke: hsl(var(--border));
    stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: hsl(var(--primary));
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: hsl(var(--muted-foreground)); font-size: 14px;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ─── Bootstrap icon size bump ──────────────────────────────── */
.bi { font-size: 1.1em; }

/* ─── Sidebar active accent (nav CSS class variant) ──────────── */
.sidebar-active {
    background: hsl(var(--primary) / 0.12) !important;
    color: hsl(var(--primary)) !important;
    font-weight: 600 !important;
}

/* ─── Print Styles ────────────────────────────────────────────── */
@media print {
    /* Hide chrome: sidebar, top header, no-print elements */
    aside,
    header,
    .no-print { display: none !important; }

    /* Remove overflow/height constraints so all content prints */
    html, body,
    .flex.h-screen.overflow-hidden,
    .flex.flex-1.flex-col.overflow-hidden,
    main.flex-1.overflow-y-auto { overflow: visible !important; height: auto !important; }

    /* Full-width content area */
    .flex.flex-1.flex-col.overflow-hidden { width: 100% !important; }

    /* Remove max-width cap on page content */
    .max-w-\[1400px\] { max-width: 100% !important; }

    /* Remove card shadows/borders for cleaner print */
    [class*="shadow"] { box-shadow: none !important; }

    /* Keep table formatting */
    table { border-collapse: collapse !important; page-break-inside: auto; width: 100% !important; }
    tr    { page-break-inside: avoid; }
    thead { display: table-header-group; }

    /* Print page setup */
    @page { margin: 1.5cm; }
    body  { font-size: 10pt; }

    /* Export/action buttons beside Run Report — hide during print */
    .export-actions { display: none !important; }

    /* Report logo header — show only on print */
    .report-logo-header { display: flex !important; }
}

/* Report logo header — hidden on screen, shown only on print (above) */
.report-logo-header { display: none; }