/*
 * EasyBizPOS — Global Custom Styles
 * Extends Bootstrap 5.3 with the platform's design system.
 * Primary: #16a34a (Brand Green)
 */

/* ============================================================
   CSS Variables / Design Tokens
   ============================================================ */
:root {
    --ebp-primary:         #16a34a;
    --ebp-primary-dark:    #15803d;
    --ebp-primary-darker:  #14532d;
    --ebp-secondary:       #22c55e;
    --ebp-secondary-dark:  #16a34a;
    --ebp-accent:          #4ade80;
    --ebp-success:         #10b981;
    --ebp-warning:         #ffc107;
    --ebp-danger:          #dc3545;
    --ebp-info:            #0dcaf0;
    --ebp-light:           #f8f9fa;
    --ebp-dark:            #212529;
    --ebp-muted:           #6c757d;

    --ebp-sidebar-width:         262px;
    --ebp-sidebar-collapsed-width: 74px;
    --ebp-topbar-height:         48px;
    --ebp-border-radius:         0.5rem;
    --ebp-card-shadow:           0 1px 3px rgba(0,0,0,.06);
    --ebp-transition:            0.2s ease;

    /* Typography */
    --ebp-font-family:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ebp-mono-font:     'Roboto Mono', 'Courier New', monospace;
}

/* ============================================================
   Base Typography (reduced sizes)
   ============================================================ */
body {
    font-family: var(--ebp-font-family);
    font-size: 0.8125rem;
    color: var(--ebp-dark);
    background-color: #f0f2f5;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1 { font-size: 1.125rem; }
h2 { font-size: 1rem; }
h3 { font-size: 0.9375rem; }
h4 { font-size: 0.875rem; }
h5 { font-size: 0.8125rem; }
h6 { font-size: 0.75rem; }

/* Monospace for financial numbers */
.num, .amount, .price, td.num {
    font-family: var(--ebp-mono-font);
    letter-spacing: -0.02em;
}

/* ============================================================
   Custom Scrollbar (slim, subtle)
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.25);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
}

/* Sidebar scrollbar (lighter for dark bg) */
.ebp-sidebar .sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.ebp-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.10);
    border-radius: 10px;
}

.ebp-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.20);
}

.ebp-sidebar .sidebar-nav {
    scrollbar-color: rgba(255,255,255,.12) transparent;
}

/* ============================================================
   Sidebar Layout — modern dark, accent-coded, collapsible
   ============================================================ */
.ebp-wrapper {
    display: flex;
    min-height: 100vh;
}

.ebp-sidebar {
    width: var(--ebp-sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    color: #cbd5e1;
    background: linear-gradient(195deg, #0f1729 0%, #0c1322 55%, #0a0f1c 100%);
    border-right: 1px solid rgba(148,163,184,.08);
    box-shadow: 1px 0 0 rgba(0,0,0,.25), 6px 0 28px -10px rgba(0,0,0,.5);
    overflow: hidden;
    transition: width 0.24s cubic-bezier(.4,0,.2,1);
}

.ebp-sidebar.collapsed {
    width: var(--ebp-sidebar-collapsed-width);
}

/* ── Brand ── */
.ebp-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: var(--ebp-topbar-height);
    padding: 0 0.875rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(148,163,184,.08);
    white-space: nowrap;
    overflow: hidden;
}

.ebp-sidebar .sidebar-brand .brand-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    box-shadow: 0 6px 14px -4px rgba(34,197,94,.55), inset 0 1px 0 rgba(255,255,255,.3);
}

.ebp-sidebar:not(.sa-sidebar) .sidebar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    transition: opacity 0.2s ease;
}

.ebp-sidebar .sidebar-brand .brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.ebp-sidebar .sidebar-brand .brand-sub {
    font-size: 0.6rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Nav scroller ── */
.ebp-sidebar .sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0.5rem 1rem;
}

/* ── Nav links + group headers (shared base) ── */
.ebp-sidebar .nav-item .nav-link,
.ebp-sidebar .nav-group-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin: 1px 0;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.ebp-sidebar .nav-item .nav-link:hover {
    background: rgba(148,163,184,.08);
    color: #e2e8f0;
}

.ebp-sidebar .nav-link .nav-icon {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.ebp-sidebar .nav-link .nav-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active item */
.ebp-sidebar .nav-item .nav-link.active {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(90deg, rgba(34,197,94,.20), rgba(34,197,94,.04));
}

.ebp-sidebar .nav-item .nav-link.active .nav-icon {
    color: var(--ebp-accent);
}

.ebp-sidebar .nav-item .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 62%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #4ade80, #16a34a);
}

/* ── Collapsible Nav Group ── */
.ebp-sidebar .nav-group {
    margin-top: 0.2rem;
}

.ebp-sidebar .nav-group-header {
    cursor: pointer;
    user-select: none;
}

.ebp-sidebar .nav-group-header:hover {
    background: rgba(148,163,184,.07);
}

.ebp-sidebar .nav-group-header .group-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    background: rgba(148,163,184,.12);
    color: #cbd5e1;
    transition: box-shadow 0.15s ease;
}

.ebp-sidebar .nav-group-header .group-title {
    flex: 1 1 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ebp-sidebar .nav-group-header .group-chevron {
    font-size: 0.7rem;
    color: #64748b;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.ebp-sidebar .nav-group-header[aria-expanded="true"] {
    background: rgba(148,163,184,.05);
}

.ebp-sidebar .nav-group-header[aria-expanded="true"] .group-title {
    color: #fff;
}

.ebp-sidebar .nav-group-header[aria-expanded="true"] .group-icon {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.ebp-sidebar .nav-group-header[aria-expanded="true"] .group-chevron {
    transform: rotate(90deg);
    color: #94a3b8;
}

/* Accent palette for group icons (organizational colour-coding) */
.ebp-sidebar .nav-group[data-accent="green"]   .group-icon { background: rgba(34,197,94,.16);  color: #4ade80; }
.ebp-sidebar .nav-group[data-accent="blue"]    .group-icon { background: rgba(59,130,246,.16); color: #60a5fa; }
.ebp-sidebar .nav-group[data-accent="orange"]  .group-icon { background: rgba(249,115,22,.16); color: #fb923c; }
.ebp-sidebar .nav-group[data-accent="teal"]    .group-icon { background: rgba(20,184,166,.16); color: #2dd4bf; }
.ebp-sidebar .nav-group[data-accent="purple"]  .group-icon { background: rgba(139,92,246,.16); color: #a78bfa; }
.ebp-sidebar .nav-group[data-accent="indigo"]  .group-icon { background: rgba(99,102,241,.16); color: #818cf8; }
.ebp-sidebar .nav-group[data-accent="emerald"] .group-icon { background: rgba(16,185,129,.16); color: #34d399; }
.ebp-sidebar .nav-group[data-accent="pink"]    .group-icon { background: rgba(236,72,153,.16); color: #f472b6; }
.ebp-sidebar .nav-group[data-accent="cyan"]    .group-icon { background: rgba(6,182,212,.16);  color: #22d3ee; }
.ebp-sidebar .nav-group[data-accent="amber"]   .group-icon { background: rgba(245,158,11,.16); color: #fbbf24; }
.ebp-sidebar .nav-group[data-accent="slate"]   .group-icon { background: rgba(148,163,184,.16); color: #cbd5e1; }

/* Flat section label (used by the super-admin sidebar's ungrouped sections) */
.ebp-sidebar .nav-group-title,
.ebp-sidebar .group-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    padding: 0.75rem 0.65rem 0.25rem;
    white-space: nowrap;
}

.ebp-sidebar.collapsed .nav-group-title,
.ebp-sidebar.collapsed .group-label {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* Group link container (animated) */
.ebp-sidebar .nav-group-links {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease;
}

.ebp-sidebar .nav-group-links.show {
    max-height: 760px;
}

.ebp-sidebar .nav-group-links .nav {
    margin: 0.1rem 0 0.25rem;
}

/* Nested items: indent + subtle guide rail */
.ebp-sidebar .nav-group-links .nav-link {
    padding-left: 2.05rem;
    font-size: 0.76rem;
}

.ebp-sidebar .nav-group-links .nav-link .nav-icon {
    font-size: 0.9rem;
}

.ebp-sidebar .nav-group-links .nav-link::after {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(148,163,184,.28);
    transition: background 0.15s ease;
}

.ebp-sidebar .nav-group-links .nav-link:hover::after { background: rgba(148,163,184,.5); }
.ebp-sidebar .nav-group-links .nav-link.active::after { background: var(--ebp-accent); }

/* ── Sidebar footer / collapse control ── */
.ebp-sidebar .sidebar-footer {
    flex-shrink: 0;
    padding: 0.5rem;
    border-top: 1px solid rgba(148,163,184,.08);
}

.ebp-sidebar .sidebar-footer .sf-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ebp-sidebar .sidebar-footer .sf-toggle:hover {
    background: rgba(148,163,184,.08);
    color: #cbd5e1;
}

.ebp-sidebar .sidebar-footer .sf-icon {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.24s ease;
}

/* ============================================================
   Collapsed (icon-rail) state — desktop
   ============================================================ */
.ebp-sidebar.collapsed .brand-text,
.ebp-sidebar.collapsed .nav-label,
.ebp-sidebar.collapsed .group-title,
.ebp-sidebar.collapsed .group-chevron,
.ebp-sidebar.collapsed .sidebar-footer .sf-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    flex: 0 0 0;
}

.ebp-sidebar.collapsed .sidebar-brand,
.ebp-sidebar.collapsed .nav-item .nav-link,
.ebp-sidebar.collapsed .nav-group-header,
.ebp-sidebar.collapsed .sidebar-footer .sf-toggle {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0;
}

.ebp-sidebar.collapsed .nav-group-links { max-height: 0 !important; }
.ebp-sidebar.collapsed .nav-group-links .nav-link { padding-left: 0.5rem; }
.ebp-sidebar.collapsed .nav-group-links .nav-link::after { display: none; }
.ebp-sidebar.collapsed .sidebar-footer .sf-icon { transform: rotate(180deg); }

/* Hover-to-peek: expand temporarily while pointing at the rail (desktop) */
@media (min-width: 992px) {
    .ebp-sidebar.collapsed:hover {
        width: var(--ebp-sidebar-width);
        box-shadow: 6px 0 32px -8px rgba(0,0,0,.6);
    }
    .ebp-sidebar.collapsed:hover .brand-text,
    .ebp-sidebar.collapsed:hover .nav-label,
    .ebp-sidebar.collapsed:hover .group-title,
    .ebp-sidebar.collapsed:hover .group-chevron,
    .ebp-sidebar.collapsed:hover .sidebar-footer .sf-text {
        opacity: 1;
        visibility: visible;
        width: auto;
        flex: 1 1 auto;
    }
    .ebp-sidebar.collapsed:hover .sidebar-brand,
    .ebp-sidebar.collapsed:hover .nav-item .nav-link,
    .ebp-sidebar.collapsed:hover .nav-group-header,
    .ebp-sidebar.collapsed:hover .sidebar-footer .sf-toggle {
        justify-content: flex-start;
        gap: 0.7rem;
    }
    .ebp-sidebar.collapsed:hover .sidebar-brand { padding: 0 1rem; }
    .ebp-sidebar.collapsed:hover .nav-group-links.show { max-height: 760px !important; }
    .ebp-sidebar.collapsed:hover .nav-group-links .nav-link { padding-left: 2.05rem; }
    .ebp-sidebar.collapsed:hover .nav-group-links .nav-link::after { display: block; }
    .ebp-sidebar.collapsed:hover .sidebar-footer .sf-toggle .sf-icon { transform: rotate(180deg); }
}

/* ── Mobile backdrop ── */
.ebp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(2px);
}

/* ============================================================
   Main Content Area
   ============================================================ */
.ebp-main {
    margin-left: var(--ebp-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--ebp-transition);
    flex: 1;
}

.ebp-sidebar.collapsed ~ .ebp-main {
    margin-left: var(--ebp-sidebar-collapsed-width);
}

/* ============================================================
   Topbar / Navbar
   ============================================================ */
.ebp-topbar {
    height: var(--ebp-topbar-height);
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    gap: 0.75rem;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.ebp-topbar .topbar-brand {
    display: none;
    font-size: 0.8125rem;
}

.ebp-topbar .topbar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ebp-secondary);
    padding: 0.25rem;
    font-size: 1.125rem;
    line-height: 1;
}

.ebp-topbar .breadcrumb {
    margin: 0;
    font-size: 0.75rem;
}

.ebp-topbar .topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Notification bell badge */
.notification-bell {
    position: relative;
    display: inline-flex;
}

.notification-bell .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    font-size: 0.55rem;
    padding: 0 3px;
    border-radius: 8px;
}

/* ============================================================
   Page Content
   ============================================================ */
.ebp-content {
    padding: 1.25rem;
    flex: 1;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-header h1 {
    font-size: 1.0625rem;
    margin: 0;
    font-weight: 600;
    color: #1a1a2e;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    border: 1px solid #e5e7eb;
    border-radius: var(--ebp-border-radius);
    box-shadow: var(--ebp-card-shadow);
    background: #fff;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.625rem 1rem;
    color: #374151;
}

.card-body {
    font-size: 0.8125rem;
}

/* Stat cards for dashboard */
.stat-card {
    background: #fff;
    border-radius: var(--ebp-border-radius);
    padding: 1rem;
    box-shadow: var(--ebp-card-shadow);
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.stat-card .stat-label {
    font-size: 0.65rem;
    color: var(--ebp-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-card .stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-family: var(--ebp-mono-font);
    color: var(--ebp-dark);
    line-height: 1.2;
    margin-top: 0.125rem;
}

.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.stat-card small {
    font-size: 0.6875rem;
}

/* Solid colored stat-card variants (dashboard KPIs) */
.stat-card-success,
.stat-card-primary,
.stat-card-info,
.stat-card-warning,
.stat-card-danger {
    color: #fff;
    border: none;
}

.stat-card-success  { background: #16a34a; }
.stat-card-primary  { background: #2563eb; }
.stat-card-info     { background: #0ea5e9; }
.stat-card-warning  { background: #d97706; }
.stat-card-danger   { background: #dc2626; }

.stat-card-success:hover  { background: #15803d; }
.stat-card-primary:hover  { background: #1d4ed8; }
.stat-card-info:hover     { background: #0284c7; }
.stat-card-warning:hover  { background: #b45309; }
.stat-card-danger:hover   { background: #b91c1c; }

.stat-card-success .stat-label,
.stat-card-primary .stat-label,
.stat-card-info .stat-label,
.stat-card-warning .stat-label,
.stat-card-danger .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-card-success .stat-value,
.stat-card-primary .stat-value,
.stat-card-info .stat-value,
.stat-card-warning .stat-value,
.stat-card-danger .stat-value {
    color: #fff;
}

.stat-card-success small,
.stat-card-primary small,
.stat-card-info small,
.stat-card-warning small,
.stat-card-danger small {
    color: rgba(255, 255, 255, 0.8);
}

.stat-card-success .stat-icon,
.stat-card-primary .stat-icon,
.stat-card-info .stat-icon,
.stat-card-warning .stat-icon,
.stat-card-danger .stat-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ============================================================
   Data Tables — Production-grade EBP table styling
   ============================================================ */
.table {
    font-size: 0.75rem;
}

.table th {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    border-bottom-width: 1px;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    background: #f8f9fb;
}

.table td {
    vertical-align: middle;
    padding: 0.45rem 0.75rem;
    color: #374151;
    border-color: #f3f4f6;
}

/* Alternating row highlight on hover */
.ebp-table tbody tr {
    transition: background 0.12s ease;
}

.ebp-table tbody tr:hover {
    background-color: #f0fdf4 !important;
}

/* Zebra stripe (subtle) */
.ebp-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Column alignment helpers */
.table .col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.table-actions .btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
}

/* Action button group in tables */
.ebp-table .btn-group-sm .btn {
    padding: 0.18rem 0.45rem;
}

/* Status badges inside tables */
.ebp-table .badge {
    font-size: 0.6rem;
    padding: 0.22rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Empty state inside table */
.ebp-table td.empty-state {
    padding: 3rem 1rem;
    color: #9ca3af;
}

/* ============================================================
   Table Footer — per-page selector + pagination row
   ============================================================ */
.table-footer {
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    font-size: 0.75rem;
    color: #6b7280;
    min-height: 46px;
}

.per-page-select {
    min-width: 72px;
    font-size: 0.72rem;
    padding: 0.22rem 1.5rem 0.22rem 0.5rem;
    height: 28px;
    border-color: #d1d5db;
    border-radius: 0.3rem;
    cursor: pointer;
}

.per-page-select:focus {
    border-color: var(--ebp-primary);
    box-shadow: 0 0 0 0.15rem rgba(22, 163, 74, 0.15);
}

/* ============================================================
   Pagination — custom Bootstrap 5 styling
   ============================================================ */
.pagination {
    font-size: 0.72rem;
    margin: 0;
    gap: 2px;
}

.pagination .page-item .page-link {
    padding: 0.22rem 0.55rem;
    min-width: 28px;
    text-align: center;
    border-radius: 0.3rem !important;
    border: 1px solid #e5e7eb;
    color: #374151;
    background: #fff;
    line-height: 1.4;
    font-size: 0.72rem;
    transition: all 0.12s ease;
}

.pagination .page-item .page-link:hover {
    background: #f0fdf4;
    border-color: var(--ebp-primary);
    color: var(--ebp-primary);
    z-index: 1;
}

.pagination .page-item.active .page-link {
    background: var(--ebp-primary);
    border-color: var(--ebp-primary-dark);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(22,163,74,.25);
}

.pagination .page-item.disabled .page-link {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #c4c9d4;
    cursor: default;
}

.pagination .page-link i {
    font-size: 0.7rem;
    line-height: inherit;
}

/* ============================================================
   Forms
   ============================================================ */
.form-control, .form-select {
    height: 36px;
    border-radius: 0.375rem;
    border-color: #d1d5db;
    font-size: 0.8125rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ebp-primary);
    box-shadow: 0 0 0 0.15rem rgba(22, 163, 74, 0.15);
}

.form-label {
    font-weight: 500;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
}

.btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    border-radius: 0.25rem;
}

/* ============================================================
   Badges & Status Pills
   ============================================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge.active     { background: #d1fae5; color: #065f46; }
.status-badge.inactive   { background: #f3f4f6; color: #6b7280; }
.status-badge.pending    { background: #fef3c7; color: #92400e; }
.status-badge.completed  { background: #dbeafe; color: #1e40af; }
.status-badge.cancelled  { background: #fee2e2; color: #991b1b; }
.status-badge.paid       { background: #d1fae5; color: #065f46; }
.status-badge.overdue    { background: #fee2e2; color: #991b1b; }
.status-badge.trial      { background: #ede9fe; color: #5b21b6; }

/* ============================================================
   Toast Notifications
   ============================================================ */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    border: none;
    border-radius: var(--ebp-border-radius);
    font-size: 0.8125rem;
    border-left: 4px solid;
    padding: 0.625rem 1rem;
}

.alert-success { border-left-color: var(--ebp-success); }
.alert-warning { border-left-color: var(--ebp-warning); }
.alert-danger  { border-left-color: var(--ebp-danger);  }
.alert-info    { border-left-color: var(--ebp-info);    }

/* ============================================================
   Dropdown Menus
   ============================================================ */
.dropdown-menu {
    border: 1px solid #e5e7eb;
    border-radius: var(--ebp-border-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    font-size: 0.8125rem;
}

.dropdown-item {
    padding: 0.375rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-header {
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
}

.modal-header .modal-title {
    font-size: 0.875rem;
}

.modal-body {
    font-size: 0.8125rem;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    padding: 0.5rem 1rem;
}

/* ============================================================
   Loading Overlay
   ============================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
    font-size: 0.75rem;
}

.pagination .page-link {
    padding: 0.3rem 0.6rem;
}

/* ============================================================
   List Group
   ============================================================ */
.list-group-item {
    font-size: 0.75rem;
    padding: 0.5rem 0.875rem;
}

/* ============================================================
   Dashboard-specific Enhancements
   ============================================================ */
.dashboard-welcome {
    background: #16a34a;
    color: #fff;
    border-radius: 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.dashboard-welcome h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #fff;
}

.dashboard-welcome p {
    font-size: 0.75rem;
    opacity: 0.85;
    margin: 0;
}

/* ============================================================
   Quick Actions Center (dashboard)
   Cream-white surface with tone-coloured tiles.
   ============================================================ */
.qa-center {
    background: #fffbe9;                       /* cream white */
    border: 1px solid #e7d9a8;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    padding: 0.85rem 1rem 1rem;
    margin-bottom: 1rem;
}

.qa-center-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed #e7d9a8;
}

.qa-center-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.1rem 0;
    color: #1f2937;
    letter-spacing: 0.01em;
}

.qa-center-sub {
    margin: 0;
    font-size: 0.72rem;
    color: #6b6249;
}

.qa-center-sub .qa-sep {
    margin: 0 0.35rem;
    color: #c9b78a;
}

.qa-customize-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.qa-center-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.qa-toggle-btn {
    line-height: 1;
    padding: 0.2rem 0.45rem;
}

.qa-toggle-btn i {
    transition: transform 0.2s ease;
}

/* Collapsible body: animate height + fade when hidden */
.qa-center-body {
    overflow: hidden;
    max-height: 1500px;
    opacity: 1;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.28s ease;
}

.qa-center.qa-collapsed .qa-center-body {
    max-height: 0;
    opacity: 0;
}

.qa-center.qa-collapsed .qa-center-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.55rem;
}

@media (max-width: 575.98px) {
    .qa-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.45rem; }
}

.qa-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.5rem 0.65rem;
    background: #fffdf5;                       /* lighter cream for tile */
    border: 1px solid #ead9a8;
    text-decoration: none;
    color: #1f2937;
    text-align: center;
    min-height: 88px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.qa-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(120, 90, 20, 0.10);
    border-color: #d4b863;
    background: #fffaec;
    color: #111827;
}

.qa-tile:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.qa-tile-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.qa-tile-label {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    color: inherit;
    word-break: break-word;
    hyphens: auto;
}

/* Tone palette — soft pastel chips against the cream surface */
.qa-tone-green   .qa-tile-icon { background:#dcfce7; color:#15803d; }
.qa-tone-blue    .qa-tile-icon { background:#dbeafe; color:#1d4ed8; }
.qa-tone-indigo  .qa-tile-icon { background:#e0e7ff; color:#4338ca; }
.qa-tone-orange  .qa-tile-icon { background:#ffedd5; color:#c2410c; }
.qa-tone-red     .qa-tile-icon { background:#fee2e2; color:#b91c1c; }
.qa-tone-teal    .qa-tile-icon { background:#ccfbf1; color:#0f766e; }
.qa-tone-purple  .qa-tile-icon { background:#ede9fe; color:#6d28d9; }
.qa-tone-brown   .qa-tile-icon { background:#f5e9d8; color:#7c4a1e; }
.qa-tone-cyan    .qa-tile-icon { background:#cffafe; color:#0e7490; }
.qa-tone-pink    .qa-tile-icon { background:#fce7f3; color:#be185d; }
.qa-tone-gray    .qa-tile-icon { background:#e5e7eb; color:#374151; }

.qa-empty {
    text-align: center;
    padding: 1.25rem 0.75rem;
    background: #fffdf5;
    border: 1px dashed #ead9a8;
}

/* Progress bars in dashboard */
.progress {
    height: 14px;
    font-size: 0.6rem;
    border-radius: 0.25rem;
}

/* Badge sizes */
.badge {
    font-size: 0.625rem;
    padding: 0.2rem 0.45rem;
}

/* ============================================================
   Responsive: Tablet (768–991px)
   ============================================================ */
@media (max-width: 991.98px) {
    .ebp-sidebar {
        width: var(--ebp-sidebar-width) !important;
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(.4,0,.2,1);
    }

    .ebp-sidebar.show {
        transform: translateX(0);
    }

    .ebp-sidebar.show ~ .ebp-backdrop {
        display: block;
    }

    .ebp-main {
        margin-left: 0 !important;
    }

    .ebp-topbar .topbar-brand {
        display: block;
    }

    /* A persisted desktop "collapsed" state must not shrink the mobile drawer */
    .ebp-sidebar.collapsed .brand-text,
    .ebp-sidebar.collapsed .nav-label,
    .ebp-sidebar.collapsed .group-title,
    .ebp-sidebar.collapsed .group-chevron,
    .ebp-sidebar.collapsed .sidebar-footer .sf-text {
        opacity: 1;
        visibility: visible;
        width: auto;
        flex: 1 1 auto;
    }

    .ebp-sidebar.collapsed .sidebar-brand,
    .ebp-sidebar.collapsed .nav-item .nav-link,
    .ebp-sidebar.collapsed .nav-group-header,
    .ebp-sidebar.collapsed .sidebar-footer .sf-toggle {
        justify-content: flex-start;
        gap: 0.7rem;
    }

    .ebp-sidebar.collapsed .nav-group-links .nav-link { padding-left: 2.05rem; }
    .ebp-sidebar.collapsed .nav-group-links .nav-link::after { display: block; }
    .ebp-sidebar.collapsed .sidebar-footer .sf-icon { transform: none; }

    /* Hide the in-sidebar collapse control on mobile (drawer is toggled from topbar) */
    .ebp-sidebar .sidebar-footer { display: none; }
}

/* ============================================================
   Responsive: Mobile (< 768px)
   ============================================================ */
@media (max-width: 767.98px) {
    .ebp-content {
        padding: 0.875rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stat-card .stat-value {
        font-size: 1.125rem;
    }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
    .ebp-sidebar, .ebp-topbar, .no-print { display: none !important; }
    .ebp-main { margin-left: 0 !important; }
    body { background: #fff; }
}

/* ============================================================
   ============================================================
   EBP DESIGN SYSTEM v2 — Professional Sharp-Border UI
   Global overrides for cards, tables, forms, buttons, badges,
   modals, dropdowns, pagination across the entire portal.
   Applied last so it takes precedence over earlier rules.
   ============================================================
   ============================================================ */

:root {
    --ebp-border:       #9ca3af;
    --ebp-border-soft:  #d1d5db;
    --ebp-header-bg:    #eef0f3;
    --ebp-row-hover:    #f3f4f6;
    --ebp-text2:        #1f2937;
}

/* Kill all rounded corners inside the app content area */
.ebp-content .card,
.ebp-content .card-header,
.ebp-content .card-footer,
.ebp-content .card-body,
.ebp-content .stat-card,
.ebp-content .form-control,
.ebp-content .form-select,
.ebp-content .input-group-text,
.ebp-content .input-group > *,
.ebp-content .btn,
.ebp-content .btn-sm,
.ebp-content .btn-lg,
.ebp-content .btn-xs,
.ebp-content .badge,
.ebp-content .status-badge,
.ebp-content .alert,
.ebp-content .modal-content,
.ebp-content .modal-header,
.ebp-content .modal-body,
.ebp-content .modal-footer,
.ebp-content .dropdown-menu,
.ebp-content .pagination .page-link,
.ebp-content .progress,
.ebp-content .progress-bar,
.ebp-content .per-page-select,
.ebp-content .list-group,
.ebp-content .list-group-item,
.ebp-content .toast {
    border-radius: 0 !important;
}

/* --- Page header: sharp underline --- */
.ebp-content .page-header {
    border-bottom: 2px solid var(--ebp-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.ebp-content .page-header h1 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ebp-text2);
}

/* --- Cards --- */
.ebp-content .card {
    border: 1px solid var(--ebp-border);
    box-shadow: none;
}
.ebp-content .card-header {
    background: var(--ebp-header-bg);
    border-bottom: 1px solid var(--ebp-border);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ebp-text2);
    padding: 0.55rem 0.85rem;
}
.ebp-content .card-footer {
    background: #f8f9fa;
    border-top: 1px solid var(--ebp-border);
    padding: 0.55rem 0.85rem;
}

/* --- Forms --- */
.ebp-content .form-control,
.ebp-content .form-select,
.ebp-content .input-group-text {
    border: 1px solid var(--ebp-border);
    box-shadow: none;
    color: var(--ebp-text2);
    background-color: #fff;
}
.ebp-content .form-control:focus,
.ebp-content .form-select:focus {
    border-color: var(--ebp-primary);
    box-shadow: 0 0 0 1px var(--ebp-primary) inset;
    outline: none;
}
.ebp-content .form-control::placeholder {
    color: #9ca3af;
    font-style: normal;
}
.ebp-content .form-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ebp-text2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

/* --- Buttons --- */
.ebp-content .btn {
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
    border-width: 1px;
    padding: 0.4rem 0.85rem;
}
.ebp-content .btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.7rem;
}
.ebp-content .btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
}
.ebp-content .btn:focus,
.ebp-content .btn:active {
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.28) !important;
    outline: none;
}
.ebp-content .btn-primary       { background-color: #16a34a; border-color: #15803d; color: #fff; }
.ebp-content .btn-primary:hover { background-color: #15803d; border-color: #14532d; color: #fff; }
.ebp-content .btn-secondary       { background-color: #22c55e; border-color: #16a34a; color: #fff; }
.ebp-content .btn-secondary:hover { background-color: #16a34a; border-color: #15803d; color: #fff; }
.ebp-content .btn-warning       { background-color: #f59e0b; border-color: #b45309; color: #fff; }
.ebp-content .btn-warning:hover { background-color: #b45309; border-color: #92400e; color: #fff; }
.ebp-content .btn-success       { background-color: #10b981; border-color: #047857; color: #fff; }
.ebp-content .btn-success:hover { background-color: #047857; border-color: #065f46; color: #fff; }
.ebp-content .btn-danger        { background-color: #dc3545; border-color: #991b1b; color: #fff; }
.ebp-content .btn-danger:hover  { background-color: #991b1b; border-color: #7f1d1d; color: #fff; }
.ebp-content .btn-info          { background-color: #3b82f6; border-color: #1e40af; color: #fff; }
.ebp-content .btn-info:hover    { background-color: #1e40af; border-color: #1e3a8a; color: #fff; }
.ebp-content .btn-outline-secondary       { background: #fff; border-color: var(--ebp-border); color: var(--ebp-text2); }
.ebp-content .btn-outline-secondary:hover { background: #f3f4f6; border-color: var(--ebp-text2); color: var(--ebp-text2); }
.ebp-content .btn-outline-primary         { background: #fff; border-color: #16a34a; color: #16a34a; }
.ebp-content .btn-outline-primary:hover   { background: #16a34a; color: #fff; }
.ebp-content .btn-outline-warning         { background: #fff; border-color: #b45309; color: #b45309; }
.ebp-content .btn-outline-warning:hover   { background: #b45309; color: #fff; }
.ebp-content .btn-outline-success         { background: #fff; border-color: #047857; color: #047857; }
.ebp-content .btn-outline-success:hover   { background: #047857; color: #fff; }
.ebp-content .btn-outline-danger          { background: #fff; border-color: #991b1b; color: #991b1b; }
.ebp-content .btn-outline-danger:hover    { background: #991b1b; color: #fff; }
.ebp-content .btn-outline-info            { background: #fff; border-color: #1e40af; color: #1e40af; }
.ebp-content .btn-outline-info:hover      { background: #1e40af; color: #fff; }
.ebp-content .btn-icon { width: 28px; height: 28px; padding: 0; justify-content: center; }

/* --- Tables: full gridlines, neutral hover, no zebra blue --- */
.ebp-content .table {
    margin-bottom: 0;
    color: var(--ebp-text2);
    border-collapse: collapse;
    width: 100%;
}
.ebp-content .table,
.ebp-content .table thead,
.ebp-content .table tbody,
.ebp-content .table tfoot,
.ebp-content .table tr,
.ebp-content .table th,
.ebp-content .table td {
    border: 1px solid var(--ebp-border-soft) !important;
}
.ebp-content .table thead th,
.ebp-content .table-light,
.ebp-content .table thead.table-light th {
    background: var(--ebp-header-bg) !important;
    color: var(--ebp-text2) !important;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--ebp-border) !important;
    border-bottom: 1px solid var(--ebp-border) !important;
    white-space: nowrap;
}
.ebp-content .table tbody td {
    padding: 0.45rem 0.7rem;
    vertical-align: middle;
}
/* Kill Bootstrap & ebp-table zebra + blue hover */
.ebp-content .ebp-table tbody tr,
.ebp-content .ebp-table tbody tr:nth-child(even),
.ebp-content .table tbody tr,
.ebp-content .table-striped > tbody > tr:nth-of-type(odd),
.ebp-content .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #fff !important;
    --bs-table-bg-type: transparent;
    --bs-table-striped-bg: transparent;
}
.ebp-content .ebp-table tbody tr:nth-child(even) td {
    background-color: #fcfcfd;
}
.ebp-content .ebp-table tbody tr:hover td,
.ebp-content .table-hover > tbody > tr:hover > * {
    background-color: var(--ebp-row-hover) !important;
    color: inherit !important;
    --bs-table-bg-state: transparent;
}
/* Semantic row colors still work (muted) */
.ebp-content .table tbody tr.table-danger td  { background: #fef2f2 !important; border-color: #ef4444 !important; }
.ebp-content .table tbody tr.table-warning td { background: #fffbeb !important; border-color: #f59e0b !important; }
.ebp-content .table tbody tr.table-success td { background: #ecfdf5 !important; border-color: #10b981 !important; }
.ebp-content .table tbody tr.table-info td    { background: #fff3cd !important; border-color: #f59e0b !important; }
.ebp-content .table tbody tr.row-highlight td { background: #fff3cd !important; border-color: #f59e0b !important; }
/* Table links */
.ebp-content .table a {
    color: #15803d;
    text-decoration: none;
    font-weight: 600;
}
.ebp-content .table a:hover {
    text-decoration: underline;
    color: #14532d;
}
/* Empty-state cell */
.ebp-content .table td.empty-cell {
    padding: 2.5rem 1rem;
    color: #9ca3af;
    text-align: center;
    background: #fafafa;
}

/* --- Badges: sharp, subdued palette --- */
.ebp-content .badge,
.ebp-content .status-badge {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
}
.ebp-content .badge.text-bg-success  { background: #ecfdf5 !important; color: #065f46 !important; border-color: #10b981; }
.ebp-content .badge.text-bg-danger   { background: #fef2f2 !important; color: #991b1b !important; border-color: #ef4444; }
.ebp-content .badge.text-bg-warning  { background: #fffbeb !important; color: #92400e !important; border-color: #f59e0b; }
.ebp-content .badge.text-bg-info     { background: #eff6ff !important; color: #1e40af !important; border-color: #3b82f6; }
.ebp-content .badge.text-bg-primary  { background: #f0fdf4 !important; color: #14532d !important; border-color: #16a34a; }
.ebp-content .badge.text-bg-secondary{ background: #f3f4f6 !important; color: #374151 !important; border-color: #9ca3af; }
.ebp-content .badge.text-bg-dark     { background: #1f2937 !important; color: #fff !important;     border-color: #111827; }
.ebp-content .badge.text-bg-light    { background: #f9fafb !important; color: #1f2937 !important; border-color: var(--ebp-border); }

/* --- Alerts: sharp --- */
.ebp-content .alert {
    border: 1px solid var(--ebp-border);
    border-left-width: 4px !important;
}
.ebp-content .alert-warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.ebp-content .alert-danger  { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.ebp-content .alert-success { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.ebp-content .alert-info    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }

/* --- Modal --- */
.ebp-content .modal-header { border-bottom: 1px solid var(--ebp-border); background: var(--ebp-header-bg); }
.ebp-content .modal-footer { border-top: 1px solid var(--ebp-border); background: #f8f9fa; }

/* --- Dropdown --- */
.ebp-content .dropdown-menu { border: 1px solid var(--ebp-border); }

/* --- Pagination --- */
.ebp-content .pagination .page-link       { border-color: var(--ebp-border-soft); color: var(--ebp-text2); }
.ebp-content .pagination .page-item.active .page-link { background: #16a34a; border-color: #15803d; color: #fff; }
.ebp-content .pagination .page-link:hover { color: #15803d; border-color: #16a34a; background: #f0fdf4; }

/* --- Nav-tabs active accent (green) --- */
.ebp-content .nav-tabs .nav-link.active { color: #15803d; }

/* --- Text & link utilities overriding Bootstrap primary --- */
.text-primary { color: #16a34a !important; }
.link-primary { color: #16a34a !important; }
.bg-primary   { background-color: rgba(22, 163, 74, var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: #16a34a !important; }

/* Sidebar brand icon accent */
.ebp-sidebar .sidebar-brand .text-primary { color: #4ade80 !important; }

/* "Completed" badge shifted away from blue to green tint */
.status-badge.completed { background: #dcfce7; color: #14532d; }

/* --- Description lists on show pages --- */
.ebp-content .card-body dl.row dt {
    font-weight: 600;
    font-size: 0.72rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 0.35rem;
}
.ebp-content .card-body dl.row dd {
    font-size: 0.8125rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed #e5e7eb;
    margin-bottom: 0.35rem;
}
.ebp-content .card-body dl.row dd:last-of-type,
.ebp-content .card-body dl.row dt:last-of-type {
    border-bottom: none;
}

/* Table-footer / per-page block inherits sharp style */
.ebp-content .table-footer { border-top: 1px solid var(--ebp-border); }

/* Nav-tabs — sharp edge */
.ebp-content .nav-tabs .nav-link       { border-radius: 0 !important; }
.ebp-content .nav-tabs .nav-link.active{ border-color: var(--ebp-border) var(--ebp-border) #fff; font-weight: 700; }


/* ============================================================
   ============================================================
   DASHBOARD — overview surface
   Namespaced `dash-*` / `viz-*` so nothing here can leak into the
   ten other views that still use `.stat-card`. Authored inside the
   Sharp-Border system: square corners, hairline rules, no shadows.

   Chart colours are not hand-picked. The categorical slots are the
   validated CVD-safe order (worst all-pairs deltaE 13.3 under
   deuteranopia); aqua and yellow sit below 3:1 on white, which is why
   the donut always ships a labelled legend + data table as relief.
   ============================================================
   ============================================================ */
.dash {
    /* Surfaces & ink */
    --dash-surface:   #ffffff;
    --dash-head-bg:   #eef0f3;
    --dash-line:      #9ca3af;   /* house border */
    --dash-hairline:  #e5e7eb;   /* gridlines, inner rules */
    --dash-ink:       #111827;
    --dash-ink-2:     #374151;
    --dash-muted:     #6b7280;   /* 4.8:1 on white */

    /* Data ink */
    --viz-accent:     #16a34a;   /* brand green — 3.30:1 on white */
    --viz-accent-2:   #15803d;
    --viz-wash:       rgba(22, 163, 74, 0.10);
    --viz-compare:    #6b7280;   /* previous period, de-emphasised */

    /* Status — always paired with an icon + label, never colour alone */
    --st-good:        #006300;   /* 7.5:1 text */
    --st-bad:         #d03b3b;   /* 4.8:1 text */
    --st-warn-fill:   #fde68a;
    --st-warn-ink:    #92400e;
    --st-crit-fill:   #fee2e2;
    --st-crit-ink:    #b91c1c;
}

/* ── Header + range filter ─────────────────────────────────── */
.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--dash-line);
}

.dash-head h1 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--dash-ink);
    letter-spacing: 0.01em;
}

.dash-head-sub {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    color: var(--dash-muted);
}

.dash-head-sub .dot {
    margin: 0 0.4rem;
    color: var(--dash-line);
}

/* One filter row, scoping every widget below it. */
.dash-filter {
    display: flex;
    align-items: center;
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    overflow: hidden;
    max-width: 100%;
}

.dash-filter a {
    padding: 0.34rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dash-muted);
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid var(--dash-hairline);
    transition: background 0.12s ease, color 0.12s ease;
}

.dash-filter a:last-child { border-right: 0; }
.dash-filter a:hover      { background: #f3f4f6; color: var(--dash-ink); }

.dash-filter a[aria-current="true"] {
    background: var(--viz-accent);
    color: #fff;
}

/* ── KPI tiles ─────────────────────────────────────────────── */
/* auto-fit does the responsive work: 4-up desktop, 2-up tablet,
   1-up phone, with no breakpoint bookkeeping. */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-top: 3px solid var(--dash-line);
    padding: 0.8rem 0.9rem 0.7rem;
    min-width: 0;
}

.kpi--accent   { border-top-color: var(--viz-accent); }
.kpi--neutral  { border-top-color: #94a3b8; }
.kpi--alert    { border-top-color: var(--st-bad); }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kpi-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dash-muted);
}

.kpi-top i {
    font-size: 0.9rem;
    color: var(--dash-muted);
    flex-shrink: 0;
}

/* Proportional figures: tabular-nums makes a big standalone number
   look loose. Tabular is reserved for the table columns below. */
.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dash-ink);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.kpi-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: var(--dash-muted);
    margin-top: auto;
}

/* Delta carries an arrow glyph and a sign, so direction never rests
   on colour alone. */
.delta {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.delta-up   { color: var(--st-good); }
.delta-down { color: var(--st-bad); }
.delta-flat { color: var(--dash-muted); }

/* Chart.js sizes its canvas to fill the parent when maintainAspectRatio is
   off, so the parent is what must carry the height. Sizing the canvas itself
   leaves the box unconstrained and the tile grows without bound. */
.kpi-spark {
    position: relative;
    width: 100%;
    height: 34px;
    flex: 0 0 34px;
}

.kpi-spark canvas {
    display: block;
}

/* Low-stock meter: fill carries severity, track is a lighter step of
   the same ramp so the state reads across the whole bar. */
.kpi-meter {
    height: 6px;
    background: var(--dash-hairline);
    overflow: hidden;
}

.kpi-meter span {
    display: block;
    height: 100%;
    background: var(--viz-accent);
}

.kpi-meter.is-warn span { background: #d97706; }
.kpi-meter.is-crit span { background: var(--st-bad); }

/* ── Cards ─────────────────────────────────────────────────── */
.dash-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: var(--dash-head-bg);
    border-bottom: 1px solid var(--dash-line);
}

.dash-card-head h2 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dash-ink-2);
    margin: 0;
}

.dash-card-head .sub {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dash-muted);
}

.dash-card-body { padding: 0.85rem; }
.dash-card-body.is-flush { padding: 0; }

/* Chart box is sized to include the x-axis band — a height that fits
   only the plot forces a nested scrollbar inside the card. */
.viz-canvas {
    position: relative;
    width: 100%;
    height: clamp(240px, 26vw, 300px);
}

.viz-canvas.is-donut { height: 200px; }

/* Legend — always present for two or more series, and the readable
   channel for the two donut hues that sit under 3:1 on white. */
.viz-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--dash-hairline);
}

.viz-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--dash-ink-2);
}

.viz-legend-row .swatch {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.viz-legend-row .swatch.is-line {
    height: 2px;
    width: 14px;
}

.viz-legend-row .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viz-legend-row .val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dash-ink);
}

.viz-legend-row .pct {
    width: 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--dash-muted);
}

/* Table-view twin — every charted value is reachable without colour. */
.viz-table {
    margin-top: 0.7rem;
    border-top: 1px solid var(--dash-hairline);
    padding-top: 0.5rem;
}

.viz-table summary {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--dash-muted);
    cursor: pointer;
    list-style: none;
}

.viz-table summary::-webkit-details-marker { display: none; }
.viz-table summary::before { content: "\F4FE"; font-family: "bootstrap-icons"; margin-right: 0.3rem; }
.viz-table[open] summary::before { content: "\F2E6"; }
.viz-table summary:hover { color: var(--dash-ink); }

.viz-table table {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.viz-table th,
.viz-table td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--dash-hairline);
    text-align: right;
}

.viz-table th:first-child,
.viz-table td:first-child { text-align: left; }

.viz-table th {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dash-muted);
}

/* ── Rank bars (top products) ──────────────────────────────── */
.rank-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rank-row { min-width: 0; }

.rank-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.28rem;
}

.rank-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dash-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-val {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dash-ink);
    flex-shrink: 0;
}

.rank-qty {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--dash-muted);
    margin-left: 0.3rem;
}

/* One series, one hue — never a value-ramp across nominal categories:
   that would re-encode bar length as colour and waste the identity
   channel on information the bar already carries. */
.rank-track {
    height: 8px;
    background: #f1f3f5;
}

.rank-fill {
    height: 100%;
    background: var(--viz-accent);
    min-width: 2px;
}

/* ── Till rail (open registers) ────────────────────────────── */
.till-rail {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.till {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 0 0 auto;
    min-width: 150px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--dash-hairline);
    border-left: 3px solid var(--viz-accent);
    background: #fbfdfc;
}

.till-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dash-ink);
}

.till-meta {
    font-size: 0.65rem;
    color: var(--dash-muted);
}

.till-cash {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--viz-accent-2);
}

/* ── Alert list (low stock) ────────────────────────────────── */
.alert-list {
    display: flex;
    flex-direction: column;
}

.alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--dash-hairline);
    min-width: 0;
}

.alert-row:last-child { border-bottom: 0; }

.alert-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dash-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-sub {
    font-size: 0.65rem;
    color: var(--dash-muted);
}

/* Icon + label always accompany the status colour. */
.qty-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--st-warn-fill);
    color: var(--st-warn-ink);
}

.qty-chip.is-out {
    background: var(--st-crit-fill);
    color: var(--st-crit-ink);
}

/* ── Recent sales table ────────────────────────────────────── */
.dash-table {
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
}

.dash-table th {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dash-muted);
    background: #f8f9fb;
    padding: 0.45rem 0.85rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--dash-hairline);
}

.dash-table td {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--dash-hairline);
    color: var(--dash-ink-2);
    vertical-align: middle;
}

.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover { background: #f0fdf4; }

.dash-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--dash-ink);
    white-space: nowrap;
}

/* ── Empty states ──────────────────────────────────────────── */
.viz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--dash-muted);
    min-height: 140px;
}

.viz-empty i { font-size: 1.4rem; opacity: 0.55; }
.viz-empty .t { font-size: 0.78rem; font-weight: 600; color: var(--dash-ink-2); }
.viz-empty .s { font-size: 0.7rem; }

/* ── Quick Actions — restyled as a quiet chip rail ─────────── */
/* Was a cream #fffbe9 panel above the data. Actions belong beside the
   numbers, not in front of them, and the surface now matches the app. */
.dash .qa-center {
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    box-shadow: none;
    padding: 0;
    margin-bottom: 0.75rem;
}

.dash .qa-center-head {
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.85rem;
    background: var(--dash-head-bg);
    border-bottom: 1px solid var(--dash-line);
}

.dash .qa-center.qa-collapsed .qa-center-head { border-bottom: 0; }

.dash .qa-center-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dash-ink-2);
    margin: 0;
}

.dash .qa-center-body { padding: 0.7rem 0.85rem; }
.dash .qa-center.qa-collapsed .qa-center-body { padding-top: 0; padding-bottom: 0; }

.dash .qa-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Chips, not tiles: a horizontal row reads as a toolbar and takes a
   fraction of the vertical space the old 88px tiles did. */
.dash .qa-tile {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    min-height: 0;
    padding: 0.34rem 0.6rem 0.34rem 0.4rem;
    background: var(--dash-surface);
    border: 1px solid var(--dash-hairline);
    text-align: left;
}

.dash .qa-tile:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--viz-accent);
    background: #f0fdf4;
}

.dash .qa-tile-icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    font-size: 0.78rem;
    box-shadow: none;
}

.dash .qa-tile-label {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.dash .qa-empty {
    background: #f8f9fb;
    border: 1px dashed var(--dash-hairline);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dash-head {
        align-items: stretch;
        flex-direction: column;
    }

    .dash-filter {
        width: 100%;
        overflow-x: auto;
    }

    .dash-filter a {
        flex: 1 0 auto;
        text-align: center;
    }

    .kpi-value { font-size: 1.3rem; }

    .viz-canvas { height: 240px; }
}

@media (max-width: 575.98px) {
    /* Drop to the three columns that matter on a phone rather than
       letting a 5-column table scroll sideways. */
    .dash-table .col-opt { display: none; }

    .dash-table th,
    .dash-table td { padding: 0.5rem 0.6rem; }

    .dash-kpis { gap: 0.5rem; }

    /* The chips must WRAP here, never scroll sideways. `.ebp-main` is a flex
       item with min-width:auto, so a nowrap row of ~35 chips expands it to its
       min-content width (~4800px) and drags the entire page horizontally —
       clipping every card, not just this rail. Wrapping cannot overflow. */
    .dash .qa-tile { max-width: 100%; }
}

/* Motion is a preference, not a given. */
@media (prefers-reduced-motion: reduce) {
    .dash * { transition: none !important; animation: none !important; }
}

@media print {
    .dash-filter,
    .dash .qa-center { display: none !important; }
    .dash-card { break-inside: avoid; }
}

/* ============================================================
   ============================================================
   REPORTS — analysis surfaces
   A `.rpt` layer that sits ON TOP of the `dash-*` / `viz-*`
   primitives above, so every report inherits the same geometry
   the overview uses: square corners, hairline rules, no shadows,
   a 3px top border carrying identity.

   What differs is the SURFACE. The overview is a white sheet
   because its tiles are read together as one board. A report is
   read one measure at a time, so each tile is tinted with the hue
   of the thing it counts — money is green, volume is blue,
   averages violet, tax amber, outflow rose. The tint is the
   lightest step of the same ramp as its own top border and icon
   chip, which keeps a tile legible as a single object while the
   hue does the work of the label you'd otherwise have to read.

   Tints stay in the 50–100 band on purpose: every one of them
   clears 4.5:1 against the tile's own ink, so colour is decoration
   over a reading that already works in greyscale. Nothing here
   encodes a value in hue alone — the number is always printed.
   ============================================================
   ============================================================ */

/* ── Tone ramps ────────────────────────────────────────────────
   One custom-property block per hue. A tone class is inert on its
   own; it only sets variables. The components below consume them,
   so a tile, a card head, a bar and a chip all pick up the same
   ramp from a single class on the parent. */
.rpt .tone-emerald { --t-fill:#ecfdf5; --t-edge:#a7f3d0; --t-line:#059669; --t-ink:#065f46; --t-chip:#d1fae5; --t-chip-ink:#047857; --t-bar:#10b981; --t-track:#d1fae5; }
.rpt .tone-blue    { --t-fill:#eff6ff; --t-edge:#bfdbfe; --t-line:#2563eb; --t-ink:#1e40af; --t-chip:#dbeafe; --t-chip-ink:#1d4ed8; --t-bar:#3b82f6; --t-track:#dbeafe; }
.rpt .tone-violet  { --t-fill:#f5f3ff; --t-edge:#ddd6fe; --t-line:#7c3aed; --t-ink:#5b21b6; --t-chip:#ede9fe; --t-chip-ink:#6d28d9; --t-bar:#8b5cf6; --t-track:#ede9fe; }
.rpt .tone-amber   { --t-fill:#fffbeb; --t-edge:#fde68a; --t-line:#d97706; --t-ink:#92400e; --t-chip:#fef3c7; --t-chip-ink:#b45309; --t-bar:#f59e0b; --t-track:#fef3c7; }
.rpt .tone-rose    { --t-fill:#fef2f2; --t-edge:#fecaca; --t-line:#dc2626; --t-ink:#991b1b; --t-chip:#fee2e2; --t-chip-ink:#b91c1c; --t-bar:#ef4444; --t-track:#fee2e2; }
.rpt .tone-cyan    { --t-fill:#ecfeff; --t-edge:#a5f3fc; --t-line:#0891b2; --t-ink:#155e75; --t-chip:#cffafe; --t-chip-ink:#0e7490; --t-bar:#06b6d4; --t-track:#cffafe; }
.rpt .tone-indigo  { --t-fill:#eef2ff; --t-edge:#c7d2fe; --t-line:#4f46e5; --t-ink:#3730a3; --t-chip:#e0e7ff; --t-chip-ink:#4338ca; --t-bar:#6366f1; --t-track:#e0e7ff; }
.rpt .tone-slate   { --t-fill:#f8fafc; --t-edge:#cbd5e1; --t-line:#475569; --t-ink:#1e293b; --t-chip:#e2e8f0; --t-chip-ink:#334155; --t-bar:#64748b; --t-track:#e2e8f0; }
.rpt .tone-teal    { --t-fill:#f0fdfa; --t-edge:#99f6e4; --t-line:#0d9488; --t-ink:#115e59; --t-chip:#ccfbf1; --t-chip-ink:#0f766e; --t-bar:#14b8a6; --t-track:#ccfbf1; }

/* ── Header ────────────────────────────────────────────────────
   Same 2px rule as the overview, with the export rail on the
   right where the range filter sits there. */
.rpt .dash-head { align-items: center; }

.rpt .dash-head-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Square, hairline buttons — Bootstrap's rounded pills read as a
   different system next to these cards. */
.rpt .rpt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.34rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    color: var(--dash-ink-2);
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.rpt .rpt-btn:hover { background: #f3f4f6; color: var(--dash-ink); }

.rpt .rpt-btn-pdf:hover  { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.rpt .rpt-btn-csv:hover  { border-color: #059669; background: #ecfdf5; color: #065f46; }

.rpt .rpt-btn-go {
    background: var(--viz-accent);
    border-color: var(--viz-accent);
    color: #fff;
}

.rpt .rpt-btn-go:hover {
    background: var(--viz-accent-2);
    border-color: var(--viz-accent-2);
    color: #fff;
}

/* ── Filter bar ────────────────────────────────────────────────
   A card, not a floating form: the controls that scope the whole
   page should look like they belong to it. */
.rpt-filter {
    border: 1px solid var(--dash-line);
    border-top: 3px solid #64748b;
    background: #f8fafc;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.75rem;
}

.rpt-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.rpt-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 140px;
    flex: 1 1 140px;
}

.rpt-field.is-wide { flex: 1 1 200px; }

.rpt-field label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dash-muted);
}

/* Square the Bootstrap controls so they sit inside the system. */
.rpt-field .form-control,
.rpt-field .form-select {
    border-radius: 0;
    border: 1px solid var(--dash-line);
    font-size: 0.75rem;
    padding: 0.32rem 0.5rem;
    background: var(--dash-surface);
    color: var(--dash-ink);
    height: auto;
}

.rpt-field .form-control:focus,
.rpt-field .form-select:focus {
    border-color: var(--viz-accent);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.rpt-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

/* ── Tinted KPI tiles ──────────────────────────────────────────
   `kpi--t` opts a tile into the tone ramp its parent class sets.
   The plain `.kpi` from the overview still works untouched. */
.rpt .kpi--t {
    background: var(--t-fill);
    border: 1px solid var(--t-edge);
    border-top: 3px solid var(--t-line);
}

.rpt .kpi--t .kpi-label { color: var(--t-ink); opacity: 0.85; }
.rpt .kpi--t .kpi-value { color: var(--t-ink); }
.rpt .kpi--t .kpi-meta  { color: var(--t-ink); opacity: 0.9; }

/* The icon earns a chip here: on a tinted field a bare glyph goes
   soft, and the chip re-establishes the anchor the eye lands on. */
.rpt .kpi-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: var(--t-chip);
    color: var(--t-chip-ink);
    font-size: 0.85rem;
}

.rpt .kpi-ico i { color: inherit; }

/* Meter inside a tinted tile: track is the chip step of the same
   ramp so the bar reads as one object rather than a foreign part. */
.rpt .kpi--t .kpi-meter { background: var(--t-track); }
.rpt .kpi--t .kpi-meter span { background: var(--t-line); }

/* A unit trailing a figure ("days", "%") must not compete with it. */
.rpt .kpi-unit {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 0.15rem;
}

/* ── Toned cards ───────────────────────────────────────────────
   Head takes the tint, body stays a near-white sheet: tables and
   charts need an achromatic field to sit on, and tinting the data
   surface would fight every colour the data itself carries. */
.rpt .dash-card--t { border-color: var(--t-edge); }

.rpt .dash-card--t .dash-card-head {
    background: var(--t-fill);
    border-bottom: 1px solid var(--t-edge);
    border-top: 3px solid var(--t-line);
    margin-top: -1px;
}

.rpt .dash-card--t .dash-card-head h2 { color: var(--t-ink); }
.rpt .dash-card--t .dash-card-head h2 i { color: var(--t-line); }
.rpt .dash-card--t .dash-card-head .sub { color: var(--t-ink); opacity: 0.75; }
.rpt .dash-card--t .dash-card-head .sub:hover { opacity: 1; }

/* Not #fff — a hair of warmth keeps the card from flaring against
   the tinted tiles above it. */
.rpt .dash-card { background: #fdfdfe; }
.rpt .dash-card-body { background: #fdfdfe; }

/* ── Ledger rows (P&L summary, tax summary) ───────────────────
   A statement is a list of paired terms, so it is built as one —
   never as a table with an invisible header. */
.rpt .led {
    display: flex;
    flex-direction: column;
}

.rpt .led-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--dash-hairline);
    font-size: 0.75rem;
    color: var(--dash-ink-2);
}

.rpt .led-row:last-child { border-bottom: 0; }

.rpt .led-row .led-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--dash-ink);
    white-space: nowrap;
}

/* Sub-items sit under their heading and read as its parts. */
.rpt .led-row.is-sub {
    padding-left: 1.7rem;
    font-size: 0.72rem;
    color: var(--dash-muted);
    background: #fbfcfd;
}

.rpt .led-row.is-sub .led-val { font-weight: 500; color: var(--dash-ink-2); }

/* A section head inside the statement — tinted by its own tone. */
.rpt .led-row.is-head {
    background: var(--t-fill);
    color: var(--t-ink);
    font-weight: 700;
    border-bottom: 1px solid var(--t-edge);
}

.rpt .led-row.is-head .led-val { color: var(--t-ink); }
.rpt .led-row.is-head i { color: var(--t-line); }

/* Subtotal: ruled off, not coloured in. */
.rpt .led-row.is-total {
    background: #f8f9fb;
    font-weight: 700;
    color: var(--dash-ink);
    border-top: 1px solid var(--dash-line);
}

/* The bottom line. The only place a figure is allowed to get big. */
.rpt .led-row.is-final {
    background: var(--t-fill);
    border-top: 2px solid var(--t-line);
    border-bottom: 0;
    padding: 0.7rem 0.85rem;
    font-weight: 700;
    color: var(--t-ink);
    font-size: 0.8rem;
}

.rpt .led-row.is-final .led-val {
    font-size: 1.05rem;
    color: var(--t-ink);
}

/* ── Toned rank bars & inline table bars ──────────────────────
   The bar length already carries the value; the hue only says
   which measure you're looking at, and it is constant down the
   column. Never a ramp across rows. */
.rpt .rank-track { background: var(--t-track, #f1f3f5); }
.rpt .rank-fill  { background: var(--t-bar, var(--viz-accent)); }

/* Share bar living inside a table cell. */
.rpt .bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
}

.rpt .bar-track {
    flex: 1;
    height: 6px;
    background: var(--t-track, #e5e7eb);
    min-width: 40px;
}

.rpt .bar-fill {
    height: 100%;
    background: var(--t-bar, var(--viz-accent));
    min-width: 2px;
}

.rpt .bar-pct {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--dash-muted);
    white-space: nowrap;
    min-width: 2.6rem;
    text-align: right;
}

/* ── Status pills ─────────────────────────────────────────────
   Icon or word first, colour second — a pill is never the only
   thing telling you what state a row is in. */
.rpt .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 700;
    background: var(--t-chip, #e5e7eb);
    color: var(--t-chip-ink, #374151);
    white-space: nowrap;
}

/* Standalone pill tones — used in table cells that sit outside a
   toned parent, so they carry their own ramp. */
.rpt .pill-emerald { background:#d1fae5; color:#047857; }
.rpt .pill-blue    { background:#dbeafe; color:#1d4ed8; }
.rpt .pill-violet  { background:#ede9fe; color:#6d28d9; }
.rpt .pill-amber   { background:#fef3c7; color:#b45309; }
.rpt .pill-rose    { background:#fee2e2; color:#b91c1c; }
.rpt .pill-cyan    { background:#cffafe; color:#0e7490; }
.rpt .pill-indigo  { background:#e0e7ff; color:#4338ca; }
.rpt .pill-slate   { background:#e2e8f0; color:#334155; }
.rpt .pill-teal    { background:#ccfbf1; color:#0f766e; }

/* ── Numeric ink in tables ────────────────────────────────────
   Positive/negative is carried by the sign that is already in the
   string; these classes only reinforce it. */
.rpt .dash-table td.num-pos { color: #065f46; font-weight: 700; }
.rpt .dash-table td.num-neg { color: #991b1b; font-weight: 700; }
.rpt .dash-table td.num-dim { color: var(--dash-muted); font-weight: 500; }

.rpt .dash-table tfoot td {
    background: #f8f9fb;
    border-top: 2px solid var(--dash-line);
    border-bottom: 0;
    font-weight: 700;
    color: var(--dash-ink);
}

.rpt .dash-table tbody tr:hover { background: #f6f8fa; }

/* A row-leading link should look like the row, not like a link. */
.rpt .dash-table a { color: var(--dash-ink); text-decoration: none; font-weight: 600; }
.rpt .dash-table a:hover { color: var(--viz-accent-2); text-decoration: underline; }

/* Secondary line under a table cell's primary value. */
.rpt .cell-sub {
    display: block;
    font-size: 0.65rem;
    color: var(--dash-muted);
    font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .rpt .dash-head { align-items: stretch; }
    .rpt .dash-head-actions { width: 100%; }
    .rpt .rpt-btn { flex: 1 0 auto; justify-content: center; }
    .rpt-field { flex: 1 1 100%; }
    .rpt .rpt-filter-actions { width: 100%; }
    .rpt .rpt-filter-actions .rpt-btn { flex: 1; }
}

@media print {
    .rpt-filter,
    .rpt .dash-head-actions { display: none !important; }
    .rpt .kpi,
    .rpt .dash-card { break-inside: avoid; }
}