@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb.eot');
    src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
         url('../fonts/IRANSansWeb.woff2') format('woff2'),
         url('../fonts/IRANSansWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Approved A4 financial report — isolated from the interactive dashboard and receipt printouts. */
@media print {
    @page finance-report { size:A4 portrait; margin:10mm; }
    html:has(#reportPrintTemplate.finance-report-print-host:not(:empty)),
    body:has(#reportPrintTemplate.finance-report-print-host:not(:empty)) { width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; background:#fff !important; }
    #reportPrintTemplate.finance-report-print-host { display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; direction:rtl; font-family:'IRANSans',sans-serif; }
    #reportPrintTemplate .finance-print-sheet { page:finance-report; width:100%; box-sizing:border-box; color:#13233d !important; background:#fff !important; font-size:9pt; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
    #reportPrintTemplate .finance-print-header { direction:ltr; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8mm; padding:2mm 0 5mm; border-bottom:1.2pt solid #0f766e !important; }
    #reportPrintTemplate .finance-print-brand { direction:ltr; display:flex; align-items:center; justify-self:start; justify-content:flex-start; gap:3mm; font-size:12pt; text-align:left; }
    #reportPrintTemplate .finance-print-brand strong { direction:rtl; text-align:right; }
    #reportPrintTemplate .finance-print-logo { width:auto !important; height:18mm !important; max-width:42mm !important; object-fit:contain; }
    #reportPrintTemplate .finance-print-heading { direction:rtl; width:100%; margin:0; justify-self:end; text-align:right; }
    #reportPrintTemplate .finance-print-heading h1 { margin:0; color:#10233e !important; font-size:24pt; line-height:1.1; font-weight:950; }
    #reportPrintTemplate .finance-print-heading b { display:block; margin-top:2mm; color:#0f766e !important; font-size:13pt; }
    #reportPrintTemplate .finance-print-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:4mm 0; padding:2.4mm 0; border-block:0.6pt solid #8eaaa7 !important; }
    #reportPrintTemplate .finance-print-meta span { padding-inline:4mm; text-align:center; border-inline-end:0.5pt solid #c1d0ce !important; }
    #reportPrintTemplate .finance-print-meta span:last-child { border-inline-end:0 !important; }
    #reportPrintTemplate .finance-print-period { display:flex; align-items:center; justify-content:center; gap:3mm; margin:-1mm 0 4mm; padding:2.2mm 4mm; border:0.7pt solid #8eaaa7 !important; border-radius:2mm; color:#294a47 !important; background-color:#f1f8f7 !important; page-break-inside:avoid; }
    #reportPrintTemplate .finance-print-period>i:first-child { color:#0f766e !important; font-size:14pt; }
    #reportPrintTemplate .finance-print-period>i:not(:first-child) { color:#78918e !important; }
    #reportPrintTemplate .finance-print-period strong { color:#0f625d !important; }
    #reportPrintTemplate .finance-print-period span { display:inline-flex; align-items:center; gap:1.5mm; }
    #reportPrintTemplate .finance-print-period span b { padding:1mm 2.5mm; border-radius:1.5mm; color:#10233e !important; background-color:#fff !important; border:0.5pt solid #c0d0ce !important; }
    #reportPrintTemplate .finance-print-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:3mm; margin-bottom:4mm; }
    #reportPrintTemplate .finance-print-metrics>div { min-height:25mm; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3mm; border:0.7pt solid #73928f !important; border-radius:2.5mm; page-break-inside:avoid; }
    #reportPrintTemplate .finance-print-metrics span { display:flex; align-items:center; gap:1.5mm; color:#0f625d !important; font-weight:900; }
    #reportPrintTemplate .finance-print-metrics span i { color:#0f766e !important; font-size:15pt; }
    #reportPrintTemplate .finance-print-metrics strong { margin-top:2mm; color:#10233e !important; font-size:17pt; line-height:1; }
    #reportPrintTemplate .finance-print-metrics small { margin-top:1mm; color:#0f766e !important; font:700 8pt Arial,sans-serif; }
    #reportPrintTemplate .finance-print-section { overflow:hidden; margin-bottom:4mm; border:0.7pt solid #73928f !important; border-radius:2.5mm; page-break-inside:avoid; }
    #reportPrintTemplate .finance-print-section>h2,
    #reportPrintTemplate .finance-print-chart>h2 { margin:0; padding:2mm 3mm; color:#0f625d !important; background-color:#eef8f6 !important; border-bottom:0.6pt solid #8eaaa7 !important; text-align:center; font-size:11pt; font-weight:950; }
    #reportPrintTemplate .finance-print-reconcile-grid { display:grid; grid-template-columns:repeat(4,1fr); }
    #reportPrintTemplate .finance-print-reconcile-grid>div { display:flex; flex-direction:column; align-items:center; gap:1mm; padding:2.5mm; border-inline-end:0.5pt solid #c1d0ce !important; }
    #reportPrintTemplate .finance-print-reconcile-grid span { font-weight:850; }
    #reportPrintTemplate .finance-print-reconcile-grid b { color:#10233e !important; font-size:12pt; }
    #reportPrintTemplate .finance-print-reconcile p { display:flex; align-items:center; gap:2mm; margin:0; padding:1.8mm 3mm; border-top:0.5pt dotted #aebfbd !important; }
    #reportPrintTemplate .finance-print-reconcile p>b { width:5mm; height:5mm; display:grid; place-items:center; border-radius:50%; color:#fff !important; background-color:#0f766e !important; }
    #reportPrintTemplate .finance-print-charts { display:grid; grid-template-columns:1fr 1fr; gap:4mm; margin-bottom:4mm; page-break-inside:avoid; }
    #reportPrintTemplate .financial-print-charts { grid-template-columns:minmax(0,1fr); gap:5mm; page-break-inside:auto; }
    #reportPrintTemplate .finance-print-chart { min-width:0; overflow:hidden; border:0.7pt solid #73928f !important; border-radius:2.5mm; }
    #reportPrintTemplate .financial-print-charts .finance-print-chart { width:100%; box-sizing:border-box; break-inside:avoid; page-break-inside:avoid; }
    #reportPrintTemplate .finance-print-chart .report-chart-help { display:none !important; }
    #reportPrintTemplate .finance-print-chart .trend-chart-svg { width:100% !important; height:55mm !important; }
    #reportPrintTemplate .finance-print-chart .donut-wrap { display:grid !important; grid-template-columns:37mm 1fr; gap:2mm; padding:3mm !important; }
    #reportPrintTemplate .finance-print-chart .donut-chart { width:34mm !important; height:34mm !important; background:var(--donut-fill) !important; }
    #reportPrintTemplate .finance-print-chart .donut-center { width:58% !important; height:58% !important; background-color:#fff !important; }
    #reportPrintTemplate .finance-print-chart .donut-center strong { font-size:8pt; }
    #reportPrintTemplate .finance-print-chart .donut-legend { gap:1mm !important; min-width:0 !important; }
    #reportPrintTemplate .finance-print-chart .donut-legend-row { display:grid !important; grid-template-columns:auto 1fr auto !important; min-height:0 !important; padding:1.2mm 1mm 2.5mm !important; font-size:7pt !important; background-color:#fff !important; }
    #reportPrintTemplate .finance-print-chart .donut-share-track { inset-inline:1mm !important; bottom:.8mm !important; height:.8mm !important; background-color:#eef1f1 !important; }
    #reportPrintTemplate .finance-print-chart .donut-share-fill { background-color:var(--segment-color) !important; }
    #reportPrintTemplate .finance-print-chart .donut-legend-value span { display:none !important; }
    #reportPrintTemplate .finance-print-ledger { page-break-inside:auto; }
    #reportPrintTemplate .finance-print-ledger table { width:100%; border-collapse:collapse; table-layout:fixed; }
    #reportPrintTemplate .finance-print-ledger thead { display:table-header-group; }
    #reportPrintTemplate .finance-print-ledger th { padding:2mm 1.5mm; color:#133c39 !important; background-color:#eaf6f4 !important; border:0.5pt solid #8eaaa7 !important; font-size:8pt; }
    #reportPrintTemplate .finance-print-ledger td { padding:1.6mm 1.5mm; border:0.45pt solid #bdc9c7 !important; text-align:center; font-size:7.5pt; overflow-wrap:anywhere; }
    #reportPrintTemplate .finance-print-ledger th:nth-child(3),#reportPrintTemplate .finance-print-ledger td:nth-child(3){width:27%;text-align:start;}
    #reportPrintTemplate .finance-print-ledger tr { page-break-inside:avoid; }
    #reportPrintTemplate .finance-print-ledger .is-negative { color:#b23b2a !important; }
    #reportPrintTemplate .finance-print-footer { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16mm; margin-top:7mm; padding:0 5mm 7mm; page-break-inside:avoid; }
    #reportPrintTemplate .finance-print-footer>div { display:grid; gap:8mm; color:#0f625d !important; text-align:center; }
    #reportPrintTemplate .finance-print-footer>div span { display:block; border-bottom:0.6pt solid #536b69 !important; }
    #reportPrintTemplate .finance-print-footer small { position:absolute; inset-inline-end:0; bottom:0; color:#61716f !important; }
}
@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb_Bold.eot');
    src: url('../fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'),
         url('../fonts/IRANSansWeb_Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bahij Koodak';
    src: url('../fonts/Bahij Koodak-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bahij Koodak';
    src: url('../fonts/Bahij Koodak-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: linear-gradient(160deg,#F4F7FD 0%,#ECEFFA 100%);
    --panel: #FFFFFF;
    --panel-2: #F3F5FB;
    --text1: #1B2140;
    --text2: #4B5563;
    --text-muted-on-glass: #3F4A5C;
    --border: #DEE5F2;
    --border-strong: #C8D2E6;
    --shadow-card: 0 2px 5px rgba(27,33,64,0.05), 0 10px 28px rgba(49,70,150,0.09);
    --accent-bg: linear-gradient(90deg,#3456D1,#4867D5);
    --accent-solid: #3456D1;
    --accent-ink: #FFFFFF;
    --accent-tint-bg: rgba(79,110,247,0.12);
    --petrol: #B8860B;
    --petrol-bg: #FCF3D9;
    --diesel: #5B9A46;
    --diesel-bg: #E7F3E3;
    --cng: #2F7FD1;
    --cng-bg: #E8F1FF;
    --danger: #E0785A;
    --danger-bg: #FBEAE3;
    --success: #3FAE72;
    --success-bg: #E5F6EC;
    --warning: #C08A1E;
    --warning-bg: #FDF3E3;
    --tank-grad-petrol: linear-gradient(135deg,#FCF3D9,#FEFAEE);
    --tank-grad-diesel: linear-gradient(135deg,#E7F3E3,#F7FBF5);
    --tank-grad-cng: linear-gradient(135deg,#E8F1FF,#F5F9FF);
    --tank-grad-low: linear-gradient(135deg,#F3B8AC,#FBE8E4);
    --tank-border-petrol: transparent;
    --tank-border-diesel: transparent;
    --tank-border-cng: transparent;
    --tank-border-low: #E3AFA6;
    --pump-busy-icon: var(--success);
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --card-bg: #FFFFFF;
    --card-border: #DCE4F1;
    --card-shadow: 0 1px 3px rgba(27,33,64,0.05), 0 10px 30px rgba(49,70,150,0.09);
    --card-backdrop: none;
    --card-highlight: transparent;
    --elev-hover: 0 2px 4px rgba(27,33,64,0.05), 0 16px 40px rgba(27,33,64,0.12);
    --glass-bg: rgba(255,255,255,0.78);
    --glass-border: rgba(255,255,255,0.65);
    --glass-shadow: 0 8px 32px rgba(31,38,135,0.10), inset 0 1px 0 rgba(255,255,255,0.8);
}

html[data-theme="dark"] {
    --bg: #12151A;
    --panel: #1B1F25;
    --panel-2: #20242B;
    --text1: #F2F4F3;
    --text2: #B8C2CE;
    --text-muted-on-glass: #CBD5E1;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);
    --shadow-card: none;
    --accent-bg: #2FBFA6;
    --accent-solid: #2FBFA6;
    --accent-ink: #052C25;
    --accent-tint-bg: rgba(47,191,166,0.16);
    --petrol: #E0B84A;
    --petrol-bg: #3A2E0F;
    --diesel: #6BC15C;
    --diesel-bg: #1E3319;
    --cng: #4C93FF;
    --cng-bg: #152A40;
    --danger-bg: #3A1F1F;
    --success-bg: #173A26;
    --warning-bg: #3A2E15;
    --tank-grad-petrol: linear-gradient(135deg,#3A2E0F,#241C08);
    --tank-grad-diesel: linear-gradient(135deg,#1E3319,#12200F);
    --tank-grad-cng: linear-gradient(135deg,#152A40,#0E1D2E);
    --tank-grad-low: linear-gradient(135deg,#3A241C,#2A1A14);
    --tank-border-petrol: #5A4526;
    --tank-border-diesel: #3A5A2E;
    --tank-border-cng: #2E4A6A;
    --tank-border-low: #5A382E;
    --pump-busy-icon: #6BC15C;
    --card-bg: #1B1F25;
    --card-border: rgba(255,255,255,0.08);
    --card-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.25);
    --card-backdrop: none;
    --card-highlight: transparent;
    --elev-hover: 0 2px 4px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.40);
    --glass-bg: rgba(27,31,37,0.82);
    --glass-border: rgba(255,255,255,0.10);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05);
}

* {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text1);
    font-family: 'IRANSans', sans-serif;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 8%, rgba(79,110,247,0.28) 0%, rgba(79,110,247,0) 45%),
        radial-gradient(circle at 88% 18%, rgba(47,191,166,0.24) 0%, rgba(47,191,166,0) 42%),
        radial-gradient(circle at 25% 92%, rgba(255,138,60,0.20) 0%, rgba(255,138,60,0) 45%),
        radial-gradient(circle at 95% 85%, rgba(198,72,58,0.16) 0%, rgba(198,72,58,0) 40%);
    transform-origin: center;
    will-change: transform;
    animation: ambientGradientDrift 22s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

html[data-theme="dark"] body::before {
    background:
        radial-gradient(circle at 12% 8%, rgba(79,110,247,0.32) 0%, rgba(79,110,247,0) 45%),
        radial-gradient(circle at 88% 18%, rgba(47,191,166,0.26) 0%, rgba(47,191,166,0) 42%),
        radial-gradient(circle at 25% 92%, rgba(255,138,60,0.22) 0%, rgba(255,138,60,0) 45%),
        radial-gradient(circle at 95% 85%, rgba(198,72,58,0.20) 0%, rgba(198,72,58,0) 40%);
}

@keyframes ambientGradientDrift {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.03) rotate(-1.5deg);
    }
    35% {
        transform: translate3d(3%, -1%, 0) scale(1.08) rotate(1deg);
    }
    70% {
        transform: translate3d(-1%, 3%, 0) scale(1.05) rotate(2deg);
    }
    100% {
        transform: translate3d(3%, 2%, 0) scale(1.09) rotate(-1deg);
    }
}

.top-bar, .app {
    position: relative;
    z-index: 1;
}

html[lang="ps"] body,
html[lang="ps"] *:not(.ti) {
    font-family: 'Bahij Koodak', 'IRANSans', sans-serif !important;
}

/* A Pashto label keeps its own typeface inside Dari or English screens. */
html:not([lang="ps"]) :is([lang="ps"], [lang="ps-AF"], .pashto-text),
html:not([lang="ps"]) :is([lang="ps"], [lang="ps-AF"], .pashto-text) :is(button,input,select,textarea) {
    font-family: 'Bahij Koodak', 'IRANSans', sans-serif !important;
}
html .ti { font-family: 'tabler-icons' !important; }

.num {
    font-family: 'IRANSans', sans-serif;
    font-weight: 700;
}

.app {
    display: flex;
    min-height: 100vh;
}

/* dropdown arrow — wrapper + overlay SVG, reliable everywhere */
.select-wrap {
    position: relative;
}

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding-inline-end: 38px !important;
}

.select-wrap .select-arrow {
    position: absolute;
    inset-inline-start: 14px;
    top: 0;
    bottom: 0;
    left: 0;
    margin-left: 10px;
    display: flex;
    pointer-events: none;
    color: var(--text2);
    align-items: center;
    justify-content: flex-end;
}

.select-wrap .select-arrow svg {
    display: block;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--theme-glass, rgba(255,255,255,0.45));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.6));
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(31,38,135,0.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,0.8));
    padding: 12px 20px;
    margin: 20px 28px 0;
    position: sticky;
    top: 20px;
    z-index: 45;
}

html[data-theme="dark"] .top-bar {
    background: rgba(27,31,37,0.45);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}

.top-bar-nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar-spacer {
    display: flex;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.top-bar-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    flex-shrink: 0;
}

.top-bar-icon-btn:hover {
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
}

.top-bar-icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.top-bar-brand {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: var(--text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-bar-logo {
    height: 42px;
    width: auto;
    flex-shrink: 0;
}

.top-bar-search {
    display: none;
    align-items: center;
}

.top-bar-search.active {
    display: flex;
}

.top-bar-search-input {
    width: 0;
    height: 44px;
    padding: 0;
    margin-inline-end: 0;
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: var(--panel-2);
    color: var(--text1);
    font-family: inherit;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .3s ease, margin-inline-end .3s ease, border-color .2s ease;
}

.top-bar-search.open .top-bar-search-input {
    width: 240px;
    padding: 0 16px;
    margin-inline-end: 8px;
    opacity: 1;
    pointer-events: auto;
    border-color: var(--border);
}

.top-bar-search.open .top-bar-search-input:focus {
    outline: none;
    border-color: var(--accent-solid);
}

.top-bar-search-toggle i {
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.top-bar-search.open .top-bar-search-toggle {
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
}

.top-bar-search.open .top-bar-search-toggle i {
    transform: rotate(90deg);
}

@media (max-width: 500px) {
    .top-bar-search.open .top-bar-search-input {
        width: 140px;
    }
}

.top-bar-hamburger {
    display: none;
}

/* Top-bar notification center */
.top-bar-notifications {
    position: relative;
    flex: 0 0 auto;
}

.notification-bell-btn {
    position: relative;
    overflow: visible;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.notification-bell-btn.has-unread,
.top-bar-notifications.open .notification-bell-btn {
    color: var(--accent-solid);
    background: var(--accent-tint-bg);
    border-color: color-mix(in srgb, var(--accent-solid) 35%, var(--border));
}

.notification-unread-dot {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--panel-2);
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.13);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.notification-unread-dot.visible {
    opacity: 1;
    transform: scale(1);
}

.notifications-panel {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    width: min(380px, calc(100vw - 24px));
    max-height: min(520px, calc(100dvh - 105px));
    padding: 14px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 20px;
    background:
        radial-gradient(circle at 12% 0%, var(--theme-glass, rgba(255,255,255,.9)), transparent 42%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.86)), var(--theme-glass, rgba(232,239,255,.78)));
    box-shadow: 0 22px 55px rgba(31,38,90,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 80;
    overflow: hidden;
}

html[dir="rtl"] .notifications-panel { transform-origin: top left; }

.top-bar-notifications.open .notifications-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notifications-panel-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 2px 12px;
    border-bottom: 1px solid var(--border);
}

.notifications-panel-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    font-size: 19px;
    color: var(--accent-solid);
    background: var(--accent-tint-bg);
}

.notifications-panel-head h2 {
    margin: 0;
    color: var(--text1);
    font-size: 15px;
    line-height: 1.45;
}

.notifications-panel-head p {
    margin: 2px 0 0;
    color: var(--text2);
    font-size: 12px;
    line-height: 1.5;
}

.notifications-panel-list {
    max-height: 410px;
    padding-top: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.notifications-panel-list .alert-row {
    padding: 10px 11px;
    font-size: 12.5px;
    text-align: start;
    background: linear-gradient(120deg, var(--theme-glass, rgba(255,255,255,.75)), color-mix(in srgb, var(--alert-bg) 62%, var(--theme-glass, rgba(255,255,255,.5))));
    border-color: color-mix(in srgb, var(--alert-tone) 23%, var(--theme-stroke, rgba(255,255,255,.54)));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--alert-tone) 8%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.5));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.notifications-panel-list .alert-row i {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 17px;
}

.notifications-group-title {
    margin: 2px 3px 8px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 800;
}

.notifications-divider {
    height: 1px;
    margin: 12px 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-solid) 36%, var(--border)), transparent);
}

.notifications-empty {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text2);
    font-size: 13px;
    text-align: center;
}

.notifications-empty i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--success);
    background: var(--success-bg);
    font-size: 22px;
}

html[data-theme="dark"] .notifications-panel {
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.14), transparent 42%),
        linear-gradient(145deg, rgba(34,42,55,.93), rgba(15,20,28,.88));
    box-shadow: 0 22px 55px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.07);
}

html[data-theme="dark"] .notifications-panel-list .alert-row {
    background: linear-gradient(120deg, rgba(40,48,61,.86), color-mix(in srgb, var(--alert-bg) 58%, rgba(18,23,31,.72)));
    border-color: color-mix(in srgb, var(--alert-tone) 28%, rgba(255,255,255,.12));
    box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}

@media (max-width: 500px) {
    .notifications-panel {
        position: fixed;
        top: 78px;
        inset-inline: 12px;
        width: auto;
        max-height: calc(100dvh - 92px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-bell-btn,
    .notification-unread-dot,
    .notifications-panel { transition: none; }
}

.sidebar {
    width: 230px;
    flex-shrink: 0;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 104px;
    align-self: flex-start;
    margin-block: 28px;
    margin-inline-start: 28px;
    margin-inline-end: 0;
    background: var(--theme-glass, rgba(255,255,255,0.45));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.6));
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(31,38,135,0.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,0.8));
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

html[data-theme="dark"] .sidebar {
    background: rgba(27,31,37,0.45);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    padding: 0 8px;
}

.logo-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--theme-glass, rgba(255,255,255,0.4));
    border: 1.5px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[data-theme="dark"] .logo-box {
    background: rgba(255,255,255,0.06);
}

.logo-box i {
    font-size: 25px;
    color: var(--border-strong);
}

.logo-box-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.brand {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

.brand-sub {
    font-size: 12.5px;
    color: var(--text2);
    margin: 2px 0 20px;
    padding: 0 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
    color: var(--text2);
    cursor: pointer;
}

.nav-item i {
    font-size: 25px;
    flex-shrink: 0;
}

.nav-item {
    transition: background .15s ease, color .15s ease;
}

.nav-item:hover {
    background: var(--theme-glass, rgba(255,255,255,0.4));
    color: var(--text1);
}

html[data-theme="dark"] .nav-item:hover {
    background: rgba(255,255,255,0.06);
}

.nav-item.active {
    background: var(--accent-solid);
    color: var(--accent-ink);
    font-weight: 700;
}

.nav-item.disabled {
    color: var(--text2);
    opacity: .45;
    cursor: default;
}

.nav-item.disabled:hover {
    background: transparent;
    color: var(--text2);
}

.nav-tag {
    margin-inline-start: auto;
    font-size: 11px;
    background: var(--panel-2);
    padding: 2px 7px;
    border-radius: 20px;
}

.nav-item.active .nav-tag {
    background: var(--theme-highlight, rgba(255,255,255,0.25));
}

.nav-parent-chevron {
    margin-inline-start: auto;
    font-size: 16px !important;
    color: var(--text2);
    transition: transform .15s;
    flex-shrink: 0;
}

.nav-parent.open .nav-parent-chevron {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-inline-start: 14px;
    margin-top: 2px;
}

.nav-submenu.open {
    display: flex;
}

.nav-subitem {
    font-size: 14px;
    padding: 10px 14px;
}

.nav-subitem i {
    font-size: 20px;
}

.sidebar-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.mobile-menu-settings {
    display: none;
}

.lang-picker {
    position: relative;
}

.lang-btn-main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.5));
    background: var(--theme-glass, rgba(255,255,255,0.4));
    color: var(--text1);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.lang-btn-main:hover {
    background: var(--theme-glass, rgba(255,255,255,0.6));
}

html[data-theme="dark"] .lang-btn-main {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .lang-btn-main:hover {
    background: rgba(255,255,255,0.1);
}

.lang-btn-main i {
    margin-inline-start: auto;
    font-size: 15px;
    color: var(--text2);
    transition: transform .15s;
}

.lang-btn-main.open i {
    transform: rotate(180deg);
}

.flag-icon {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform-origin: 0 50%;
    animation: language-flag-wave 3.2s ease-in-out infinite;
    will-change: transform;
}

.flag-icon > svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: none;
}

@keyframes language-flag-wave {
    0%, 100% { transform: perspective(100px) rotateY(-8deg) skewY(-2deg); }
    50% { transform: perspective(100px) rotateY(12deg) skewY(2deg); }
}

.lang-menu-item:nth-child(2) .flag-icon { animation-delay: -.8s; }
.lang-menu-item:nth-child(3) .flag-icon { animation-delay: -1.6s; }

@media (prefers-reduced-motion: reduce) {
    .flag-icon { animation: none; will-change: auto; }
}

.top-bar-lang-wrap {
    position: relative;
}

.lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: 170px;
    background: var(--panel);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.5));
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(20,24,60,0.15);
    padding: 6px;
    z-index: 10;
}

html[data-theme="dark"] .lang-menu {
    background: rgba(32,36,43,0.8);
    border-color: rgba(255,255,255,0.08);
}

.lang-menu.open {
    display: block;
}

/* Keep language options readable over the sidebar in both directions/themes. */
html .top-bar-lang-wrap .lang-menu {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text1);
    max-width: calc(100vw - 32px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="dark"] .top-bar-lang-wrap .lang-menu {
    background: var(--panel);
    border-color: var(--border);
}

.lang-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text1);
}

.lang-menu-item:hover {
    background: var(--panel-2);
}

.lang-menu-item.active {
    background: var(--cng-bg);
    font-weight: 700;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.5));
    background: var(--theme-glass, rgba(255,255,255,0.4));
    color: var(--text2);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.theme-toggle:hover {
    background: var(--theme-glass, rgba(255,255,255,0.6));
    transform: translateY(-1px);
}

html[data-theme="dark"] .theme-toggle {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255,255,255,0.1);
}

.theme-toggle i {
    font-size: 22px;
}

.main {
    flex: 1;
    padding: 26px 32px;
    min-width: 0;
}

.content-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.greet {
    color: var(--text2);
    font-size: 14px;
    margin-bottom: 2px;
}

.page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 18px;
}

.page-sub {
    color: var(--text2);
    font-size: 15px;
    margin: -14px 0 18px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--r-lg);
    box-shadow: var(--card-shadow), inset 0 1px 0 var(--card-highlight);
    backdrop-filter: var(--card-backdrop);
    -webkit-backdrop-filter: var(--card-backdrop);
}

.card-section {
    padding: 16px 18px;
    margin-bottom: 16px;
}

.card-section-tight {
    padding: 16px 18px;
}

.card-narrow {
    padding: 8px 18px;
}

.card-narrow-spaced {
    padding: 8px 18px;
    margin-bottom: 22px;
}

.section-label {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
}

.section-label-spaced {
    font-weight: 700;
    font-size: 14px;
    margin: 18px 0 10px;
}

.section-label-sm {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.page-title--compact {
    margin-bottom: 4px;
}

.page-sub--compact {
    margin: 0;
    color: var(--text2);
    font-size: 14px;
}

.btn-fixed {
    flex: none;
}

.icon-lg {
    font-size: 25px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-22 {
    margin-bottom: 22px;
}

.my-20 {
    margin: 20px 0;
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0,2.1fr) minmax(240px,1fr);
    gap: 16px;
    align-items: start;
}

.dash-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}

.alerts-card {
    padding: 14px 16px;
    margin-bottom: 16px;
}

.alerts-title {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.alert-row {
    --alert-tone: var(--accent-solid);
    --alert-bg: var(--accent-tint-bg);
    --alert-ink: var(--text1);
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid color-mix(in srgb, var(--alert-tone) 28%, transparent);
    border-inline-start:1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--panel) 78%, var(--alert-bg));
    color: var(--alert-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
    margin-bottom: 6px;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--alert-tone) 9%, transparent);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.alert-row:hover {
    transform: translateX(-2px);
}

html[dir="rtl"] .alert-row:hover {
    transform: translateX(2px);
}

.alert-row.danger i {
    animation: alertIconPulse 1.8s ease-in-out infinite;
}

@keyframes alertIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

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

/* Exact A4 layout based on the approved corrected-sale reference. */
@media print {
    #receiptTemplate .sale-document-print {
        min-height:267mm!important;
        padding:5mm 3mm 3mm!important;
        color:#101713!important;
        background:#fffef7!important;
        border:0!important;
        border-radius:0!important;
    }
    #receiptTemplate .sale-doc-header {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
        gap:10mm!important;
        align-items:start!important;
        min-height:56mm!important;
        padding:0!important;
        border:0!important;
    }
    #receiptTemplate .sale-doc-heading { grid-column:1!important;grid-row:1!important;text-align:start!important; }
    #receiptTemplate .sale-doc-heading h1 { font-size:34pt!important;line-height:.98!important;letter-spacing:-1px!important; }
    #receiptTemplate .sale-doc-corrected-badge { margin-top:1.5mm!important;padding:1.2mm 5mm!important;border:0!important;border-radius:2.6mm!important;color:#fff!important;background:#22924f!important;font-size:11pt!important; }
    #receiptTemplate .sale-doc-heading dl { display:grid!important;gap:.7mm!important;margin:1.5mm 0 0!important; }
    #receiptTemplate .sale-doc-heading dl div { display:flex!important;justify-content:flex-start!important;gap:1.8mm!important; }
    #receiptTemplate .sale-doc-heading dt { color:#111!important;font-size:9.5pt!important;font-weight:850!important; }
    #receiptTemplate .sale-doc-heading dt::after { content:':'!important; }
    #receiptTemplate .sale-doc-heading dd { font-size:10pt!important;font-weight:850!important; }
    #receiptTemplate .sale-doc-heading dl div:first-child dd { font-size:9pt!important;letter-spacing:.2px!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-brand { grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:27mm minmax(0,1fr)!important;gap:1mm 4mm!important;align-items:center!important;justify-items:start!important; }
    #receiptTemplate .sale-doc-logo,#receiptTemplate .sale-doc-logo.custom-logo-svg { grid-row:1!important;width:27mm!important;max-width:27mm!important;height:31mm!important;max-height:31mm!important; }
    #receiptTemplate .sale-doc-brand>div { grid-row:1!important;text-align:start!important; }
    #receiptTemplate .sale-doc-brand strong { font-size:15pt!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-brand span { margin-top:1mm!important;color:#155393!important;font-size:9.3pt!important;font-weight:750!important; }
    #receiptTemplate .sale-doc-brand p { grid-column:1/-1!important;width:100%!important;margin:1.5mm 0 0!important;padding-top:2.5mm!important;border-top:1px solid #176399!important;color:#155393!important;text-align:center!important;font-size:8.5pt!important;font-weight:700!important;word-spacing:2mm!important; }
    #receiptTemplate .sale-doc-number { display:none!important; }
    #receiptTemplate .sale-doc-info-grid { gap:3mm!important;margin-top:1mm!important; }
    #receiptTemplate .sale-doc-card { min-height:34mm!important;border:1px solid #438fa1!important;border-radius:1.5mm!important;background:transparent!important; }
    #receiptTemplate .sale-doc-card h2 { padding:2.2mm 3mm!important;color:#075640!important;background:linear-gradient(90deg,#f5fbf7,#dceee4,#f5fbf7)!important;border:0!important;font-size:13pt!important; }
    #receiptTemplate .sale-doc-card dl { gap:2.5mm!important;padding:5mm 5mm 3mm!important; }
    #receiptTemplate .sale-doc-card dt { color:#161916!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-card dd { color:#111!important;font-size:11pt!important; }
    #receiptTemplate .sale-doc-tracking>div { grid-template-columns:24mm minmax(0,1fr)!important;padding:2.5mm 4mm!important; }
    #receiptTemplate .sale-doc-tracking img { width:24mm!important;height:24mm!important; }
    #receiptTemplate .sale-doc-tracking p span { color:#111!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-tracking p bdi { font-size:11.5pt!important; }
    #receiptTemplate .sale-doc-ledger { margin-top:5mm!important;border:1px solid #0c624d!important;border-radius:1.4mm!important;overflow:hidden!important; }
    #receiptTemplate .sale-doc-table { margin:0!important;border:0!important;border-radius:0!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-table th,#receiptTemplate .sale-doc-table td { height:14mm!important;padding:2.4mm 2mm!important;border-color:#5792a0!important;font-weight:750!important; }
    #receiptTemplate .sale-doc-table th { height:13mm!important;color:#fff!important;background:linear-gradient(90deg,#064a39,#00604a,#064a39)!important;font-size:12pt!important; }
    #receiptTemplate .sale-doc-table tbody tr:last-child td { border-bottom:1px solid #5792a0!important; }
    #receiptTemplate .sale-doc-row.is-reversal td { background:#ffe9e7!important; }
    #receiptTemplate .sale-doc-row.is-replacement td { background:#edf9ef!important; }
    #receiptTemplate .sale-doc-row.is-original .sale-doc-status i { color:#08634d!important;font-size:15pt!important; }
    #receiptTemplate .sale-doc-row.is-reversal .sale-doc-status i,#receiptTemplate .sale-doc-row.is-replacement .sale-doc-status i { font-size:19pt!important; }
    #receiptTemplate .sale-doc-empty-row td { height:11mm!important;background:transparent!important; }
    #receiptTemplate .sale-doc-reason { display:flex!important;justify-content:flex-start!important;gap:1mm!important;margin:0!important;padding:2.2mm 4mm!important;border:0!important;border-radius:0!important;background:#f1f9f4!important; }
    #receiptTemplate .sale-doc-reason strong { color:#111!important;font-size:10.5pt!important; }
    #receiptTemplate .sale-doc-reason p { margin:0!important;text-align:start!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-total { margin:0!important;padding:2.5mm 4mm!important;border:0!important;border-top:1px solid #0c624d!important;border-radius:0!important;background:#edf8f1!important; }
    #receiptTemplate .sale-doc-total span { font-size:13pt!important; }
    #receiptTemplate .sale-doc-total strong { color:#111!important;font-size:18pt!important; }
    #receiptTemplate .sale-doc-official { margin:8mm 0 0!important;padding:0!important;border:0!important;background:transparent!important;color:#155393!important;font-size:9.5pt!important; }
    #receiptTemplate .sale-doc-signatures { gap:38mm!important;margin-top:11mm!important;padding:0 14mm!important;border:0!important;border-radius:0!important; }
    #receiptTemplate .sale-doc-signatures div { padding-top:2.5mm!important;border-top:1px solid #155393!important;color:#155393!important;font-size:9pt!important; }
    #receiptTemplate .sale-doc-footer { grid-template-columns:1.25fr .85fr .8fr!important;gap:5mm!important;margin-top:auto!important;padding:5mm 2mm 0!important;border:0!important;border-top:1px solid #087d82!important;border-radius:0!important;background:transparent!important;color:#155393!important;font-size:8.5pt!important; }
    #receiptTemplate .sale-doc-footer div { justify-content:flex-start!important; }
    #receiptTemplate .sale-doc-footer div:nth-child(2) { justify-content:center!important; }
    #receiptTemplate .sale-doc-footer strong { color:#075640!important;text-align:center!important;font-size:10pt!important;line-height:1.55!important; }
    #receiptTemplate .sale-doc-footer i { color:#00654e!important;font-size:16pt!important; }
}

.alert-row .alert-row-action {
    min-height: 36px;
    margin-inline-start: auto;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--alert-tone) 36%, transparent);
    border-radius: 10px;
    color: var(--alert-ink);
    background: color-mix(in srgb, var(--alert-bg) 58%, white);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .2s ease, border-color .2s ease;
}

.alert-row .alert-row-action:hover,
.alert-row .alert-row-action:focus-visible {
    background: color-mix(in srgb, var(--alert-tone) 14%, white);
    border-color: var(--alert-tone);
    outline: none;
}

.alert-row .alert-row-action i {
    width: auto;
    height: auto;
    flex-basis: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    font-size: 15px;
}

html[data-theme="dark"] .alert-row .alert-row-action {
    background: color-mix(in srgb, var(--alert-tone) 16%, #18202b);
}

@media (max-width: 560px) {
    .alert-row { flex-wrap: wrap; }
    .alert-row .alert-row-action { width: 100%; justify-content: center; }
}

.alert-row.danger {
    --alert-tone: #C24132;
    --alert-bg: #FDE8E3;
    --alert-ink: #7F271D;
}

html[data-theme="dark"] .alert-row.danger {
    --alert-bg: rgba(194,65,50,.2);
    --alert-ink: #FFD4CC;
}

.alert-row.warning {
    --alert-tone: #A86F08;
    --alert-bg: #FFF1C9;
    --alert-ink: #684306;
}

html[data-theme="dark"] .alert-row.warning {
    --alert-bg: rgba(192,138,30,.2);
    --alert-ink: #FFE3A3;
}

.alert-row.good {
    --alert-tone: #237A4B;
    --alert-bg: #DCF5E7;
    --alert-ink: #185C38;
}

html[data-theme="dark"] .alert-row.good {
    --alert-bg: rgba(63,174,114,.18);
    --alert-ink: #BDF5D4;
}

.alert-row i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: 0 0 34px;
    color: var(--alert-tone);
    background: color-mix(in srgb, var(--alert-tone) 14%, transparent);
}

/* ---------- dashboard notification surfaces v2 ---------- */
.alerts-card {
    background:
        radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255,255,255,.62)), transparent 32%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.48)), var(--theme-highlight, rgba(244,248,255,.26)));
    border-color: var(--theme-stroke, rgba(255,255,255,.76));
    box-shadow: 0 14px 36px rgba(39,53,112,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.alerts-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerts-title::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
    background: linear-gradient(145deg, var(--accent-solid), #6FA8FF);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-solid) 11%, transparent);
}

.alerts-card .alert-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--alert-tone) 23%, var(--theme-stroke, rgba(255,255,255,.7)));
    border-inline-start: 1px solid color-mix(in srgb, var(--alert-tone) 23%, rgba(255,255,255,.7));
    border-radius: 16px;
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--panel) 72%, transparent),
            color-mix(in srgb, var(--alert-bg) 42%, transparent));
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--alert-tone) 10%, transparent),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

.alerts-card .alert-row::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 150px;
    height: 150px;
    inset-inline-end: -75px;
    top: -90px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--alert-tone) 18%, transparent);
    filter: blur(12px);
    pointer-events: none;
}

.alerts-card .alert-row > * {
    position: relative;
    z-index: 1;
}

.alerts-card .alert-row i {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--alert-tone) 70%, var(--theme-surface, #fff)), var(--alert-tone));
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--alert-tone) 25%, transparent);
}

.alerts-card .alert-row:hover,
html[dir="rtl"] .alerts-card .alert-row:hover,
html[dir="ltr"] .alerts-card .alert-row:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--alert-tone) 38%, var(--theme-stroke, rgba(255,255,255,.72)));
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--alert-tone) 15%, transparent),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.78));
}

html[data-theme="dark"] .alerts-card {
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.09), transparent 32%),
        linear-gradient(145deg, rgba(35,41,52,.62), rgba(18,22,29,.46));
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 16px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
}

html[data-theme="dark"] .alerts-card .alert-row {
    background: linear-gradient(120deg, rgba(30,36,46,.68), color-mix(in srgb, var(--alert-bg) 54%, transparent));
    border-color: color-mix(in srgb, var(--alert-tone) 30%, rgba(255,255,255,.11));
    box-shadow: 0 9px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}

.shortcuts-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.shortcut {
    padding: 14px 6px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.shortcut:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20,24,60,0.1);
}

html[data-theme="dark"] .shortcut:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.shortcut.disabled:hover {
    transform: none;
    box-shadow: var(--shadow-card);
}

.shortcut-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 7px;
    transition: transform .2s ease;
}

.shortcut:hover .shortcut-icon {
    transform: scale(1.08);
}

.shortcut-icon i {
    font-size: 25px;
}

.shortcut-label {
    font-size: 13px;
    color: var(--text1);
}

.shortcut.disabled {
    opacity: .55;
}

.sc-blue .shortcut-icon {
    background: var(--cng-bg);
}

.sc-blue i {
    color: var(--cng);
}

.sc-green .shortcut-icon {
    background: var(--success-bg);
}

.sc-green i {
    color: var(--success);
}

.sc-cyan .shortcut-icon {
    background: var(--accent-tint-bg);
}

.sc-cyan i {
    color: var(--accent-solid);
}

.sc-violet .shortcut-icon {
    background: var(--diesel-bg);
}

.sc-violet i {
    color: var(--diesel);
}

.sc-red .shortcut-icon {
    background: var(--danger-bg);
}

.sc-red i {
    color: var(--danger);
}

.compare-card {
    padding: 15px 17px;
    height: 100%;
}

.compare-title {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 14px;
}

.compare-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compare-icon-circle i {
    font-size: 14px;
}

.tank-compare-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.tank-compare-row:last-child {
    margin-bottom: 0;
}

.tank-compare-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tank-compare-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tank-compare-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text1);
    line-height: 1.3;
}

.tank-compare-volume {
    font-size: 11.5px;
    color: var(--text2);
    line-height: 1.3;
}

.tank-compare-pct {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text1);
    width: 38px;
    text-align: left;
    flex-shrink: 0;
}

.tank-compare-pct.is-low {
    color: var(--danger);
}

.tank-capsule-track {
    position: relative;
    flex: 1;
    min-width: 48px;
    height: 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text1) 9%, transparent);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.10);
    overflow: hidden;
}

.tank-capsule-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
    width: 0%;
    border-radius: 999px;
    overflow: hidden;
    transition: width 1.5s cubic-bezier(.22,1,.36,1);
}

.tank-capsule-fill.fuel-petrol {
    background: linear-gradient(90deg, #ffb648, #ff8f1f);
    box-shadow: 0 0 10px rgba(255,150,20,0.55), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,0.35));
}

.tank-capsule-fill.fuel-diesel {
    background: linear-gradient(90deg, #3fd383, #17a866);
    box-shadow: 0 0 10px rgba(30,190,110,0.5), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,0.3));
}

.tank-capsule-fill.fuel-cng {
    background: linear-gradient(90deg, #57b0ff, #2478e0);
    box-shadow: 0 0 10px rgba(45,140,255,0.5), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,0.3));
}

.tank-capsule-fill.is-low {
    background: var(--danger) !important;
    box-shadow: 0 0 10px rgba(224,120,90,0.5) !important;
}

.tank-capsule-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 42%, var(--theme-highlight, rgba(255,255,255,0.30)) 50%, transparent 58%);
    transform: translateX(100%);
    animation: tankCapsuleShimmer 6s ease-in-out infinite;
    animation-delay: 1.6s;
}

@keyframes tankCapsuleShimmer {
    0%, 100% {
        transform: translateX(100%);
        opacity: 0;
    }
    50% {
        transform: translateX(-100%);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tank-capsule-fill {
        transition: none;
    }
    .tank-capsule-fill::after {
        animation: none;
        opacity: 0;
    }
}

.price-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.price-list-row:last-child {
    border-bottom: none;
}

.price-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-widget {
    padding: 0;
    overflow: hidden;
    border-color: var(--theme-stroke, #FFD9B0);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.price-widget-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(120deg, #FF6E3C, #FFB13C);
}

html[data-theme="dark"] .price-widget-banner {
    background: linear-gradient(120deg,#5A3418,#7A5220);
}

.price-widget-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #fff;
}

html[data-theme="dark"] .price-widget-title,
html[data-theme="dark"] .price-widget-today-badge {
    color: #F0C88A;
}

.price-widget-today-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--theme-highlight, rgba(255,255,255,0.25));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.price-widget-today-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-surface, #fff);
    animation: priceWidgetPulse 1.3s infinite;
}

@keyframes priceWidgetPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.price-widget-body {
    padding: 4px 16px 2px;
    flex: 1;
}

.price-widget-body .price-list-row {
    padding: 10px 0;
}

.price-widget-body .price-row-label {
    font-size: 13px;
    color: var(--text1);
    font-weight: 700;
}

.price-widget-body .price-row-value {
    font-size: 13.5px;
    color: var(--text1);
}

.price-row-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.price-row-icon-circle i {
    font-size: 15px;
}

.price-confirm-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px;
    flex: 1;
    color: var(--text1);
    background:
        radial-gradient(circle at 4% 0%, var(--theme-glass, rgba(255,255,255,.82)), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(255,174,77,.16), transparent 42%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.64)), var(--theme-glass, rgba(255,247,234,.38)));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}

html[data-theme="dark"] .price-confirm-card {
    color: var(--text1);
    background:
        radial-gradient(circle at 4% 0%, rgba(255,255,255,.1), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(255,157,66,.12), transparent 42%),
        linear-gradient(145deg, rgba(38,44,56,.74), rgba(22,27,35,.6));
    border-color: rgba(255,255,255,.12);
}

.price-confirm-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.price-confirm-head-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(145deg, #FFB64D, #F07B3C);
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.78));
    box-shadow: 0 9px 20px rgba(227,119,48,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.34));
}

.price-confirm-copy {
    min-width: 0;
}

.price-confirm-kicker {
    margin-bottom: 2px;
    color: var(--theme-ink, #A45C22);
    font-size: 11px;
    font-weight: 800;
}

.price-confirm-title {
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text1);
}

.price-confirm-fuels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
    margin-bottom: 12px;
}

.price-confirm-fuel {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--fuel-bg) 58%, var(--theme-glass, rgba(255,255,255,.58)));
    border: 1px solid color-mix(in srgb, var(--fuel-tone) 22%, var(--theme-stroke, rgba(255,255,255,.75)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

.price-confirm-fuel-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fuel-tone);
    background: var(--theme-glass, rgba(255,255,255,.68));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--fuel-tone) 14%, transparent);
}

.price-confirm-fuel-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.price-confirm-fuel-label {
    color: var(--text2);
    font-size: 10.5px;
    font-weight: 700;
}

.price-confirm-fuel-value {
    overflow: hidden;
    color: var(--text1);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.price-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.price-confirm-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.price-confirm-btn i {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.price-confirm-btn.no-change {
    color: var(--theme-ink, #147653);
    background: linear-gradient(145deg, var(--theme-glass, rgba(233,252,244,.92)), var(--theme-glass, rgba(210,244,230,.72)));
    border-color: rgba(52,172,126,.28);
    box-shadow: 0 7px 17px rgba(35,146,104,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
}

.price-confirm-btn.no-change i {
    color: #fff;
    background: linear-gradient(145deg, #57C997, #24976E);
    box-shadow: 0 4px 10px rgba(36,151,110,.22);
}

.price-confirm-btn.changed {
    color: #fff;
    background: linear-gradient(135deg, #A47BEF, #6D59DD 54%, #4F6EF7);
    border-color: var(--theme-stroke, rgba(255,255,255,.68));
    box-shadow: 0 9px 20px rgba(93,76,200,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.34));
}

.price-confirm-btn.changed i {
    background: var(--theme-highlight, rgba(255,255,255,.17));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.25));
}

.price-confirm-btn:hover {
    transform: translateY(-2px);
    filter: saturate(108%) brightness(1.03);
}

.price-confirm-btn:active {
    transform: translateY(0);
}

.price-confirm-btn:focus-visible {
    outline: 3px solid rgba(79,110,247,.25);
    outline-offset: 2px;
}

html[data-theme="dark"] .price-confirm-kicker {
    color: #FFC27D;
}

html[data-theme="dark"] .price-confirm-fuel {
    background: color-mix(in srgb, var(--fuel-bg) 28%, rgba(14,18,25,.68));
    border-color: color-mix(in srgb, var(--fuel-tone) 28%, rgba(255,255,255,.09));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .price-confirm-fuel-icon {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.1);
}

html[data-theme="dark"] .price-confirm-btn.no-change {
    color: #9AEBC9;
    background: linear-gradient(145deg, rgba(37,103,81,.52), rgba(22,66,55,.46));
    border-color: rgba(80,202,156,.24);
    box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 520px) {
    .price-confirm-fuels,
    .price-confirm-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .price-confirm-btn {
        transition: none !important;
    }
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.icon-btn:hover {
    background: var(--panel-2);
    transform: translateY(-1px);
}

.icon-btn.danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}

.side-card {
    padding: 14px 13px;
    margin-bottom: 14px;
}

.cal-today-label {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 1px;
}

.cal-today-value {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 2px;
    font-size: 11px;
    color: var(--text2);
    text-align: center;
    margin-bottom: 3px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 2px;
    margin-bottom: 12px;
}

.cal-cell {
    font-size: 12px;
    text-align: center;
    padding: 5px 0;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text1);
    cursor: pointer;
    font-family: 'IRANSans', sans-serif;
    position: relative;
    transition: background .15s ease;
}

.cal-cell:hover {
    background: var(--panel-2);
}

.cal-cell.today {
    background: var(--accent-solid);
    color: var(--accent-ink);
    font-weight: 700;
    animation: calTodayPop .4s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes calTodayPop {
    from { transform: scale(.7); opacity: .4; }
    to { transform: scale(1); opacity: 1; }
}

.cal-cell.multi-pick-cell {
    transition: background .15s ease, transform .15s ease;
}

.cal-cell.multi-pick-cell.selected {
    background: var(--warning);
    color: #fff;
    font-weight: 700;
    transform: scale(1.05);
}

.cal-cell.multi-pick-cell.today.selected {
    box-shadow: inset 0 0 0 2px var(--accent-solid);
}

.cal-cell .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent-solid);
    margin: 2px auto 0;
}

.cal-cell.today .dot {
    background: var(--accent-ink);
}

.tasks-title {
    font-size: 13px;
    font-weight: 700;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-bottom: 9px;
}

.task-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.task-date {
    font-size: 11.5px;
    color: var(--accent-solid);
    font-weight: 700;
    font-family: 'IRANSans', sans-serif;
}

.task-text {
    font-size: 13px;
    color: var(--text1);
}

.task-del {
    font-size: 14px;
    color: var(--text2);
    cursor: pointer;
    flex-shrink: 0;
}

.task-empty {
    font-size: 13px;
    color: var(--text2);
}

.add-task-form {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 2px;
}

.add-task-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.add-task-row select, .add-task-row input {
    font-size: 13px;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-family: inherit;
    color: var(--text1);
}

.add-task-row .daynum {
    width: 56px;
}

.add-task-row select {
    flex: 1;
    min-width: 0;
}

.add-task-desc {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-family: inherit;
    color: var(--text1);
    margin-bottom: 6px;
}

.add-task-btn {
    width: 100%;
    padding: 9px;
    border: none;
    border-radius: 9px;
    background: var(--accent-bg);
    color: var(--accent-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.metric-card {
    padding: 16px;
}

.metric-card:has(.metric-icon) {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon i {
    font-size: 21px;
}

.metric-label {
    color: var(--text2);
    font-size: 13px;
}

.metric-value {
    font-size: 19px;
    font-weight: 700;
    margin-top: 4px;
}

.metric-card.accent {
    background: var(--accent-bg);
    color: var(--accent-ink);
    border: none;
}

.metric-card.accent .metric-label {
    color: var(--accent-ink);
    opacity: .85;
}

.metric-card.accent .metric-icon {
    background: var(--theme-highlight, rgba(255,255,255,0.22));
    color: var(--accent-ink);
}

.sales-hero-card {
    border: none;
    padding: 22px;
    color: #fff;
    background-image: linear-gradient(135deg, #1F6B45, #3FAE72 45%, #2FBFA6);
    background-size: 200% 200%;
    box-shadow: 0 14px 32px rgba(63, 174, 114, 0.25);
    animation: fadeSlideIn .4s cubic-bezier(.4,0,.2,1) both, profitGradientShift 7s ease infinite;
}

.sales-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.sales-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--theme-highlight, rgba(255, 255, 255, 0.22));
    animation: profitIconPop .5s cubic-bezier(.34,1.56,.64,1) both .15s;
}

.sales-hero-icon i {
    font-size: 28px;
}

.sales-hero-main {
    flex: 1;
    min-width: 140px;
}

.sales-hero-label {
    font-size: 14px;
    font-weight: 800;
    opacity: .9;
}

.sales-hero-value {
    font-size: 30px;
    font-weight: 900;
    margin-top: 4px;
}

.sales-hero-debt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
}

.sales-hero-debt i {
    font-size: 19px;
}

.sales-hero-debt.is-zero {
    opacity: .55;
}

.sales-hero-debt-label {
    font-size: 11.5px;
    font-weight: 700;
    opacity: .9;
}

.sales-hero-debt-value {
    font-size: 15px;
    font-weight: 800;
    margin-top: 2px;
}

.sales-hero-fuels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-stroke, rgba(255, 255, 255, 0.22));
}

.sales-hero-empty {
    width: 100%;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    opacity: .85;
    padding: 4px 0;
}

.expenses-hero-card {
    border: none;
    padding: 22px;
    color: #fff;
    background-image: linear-gradient(135deg, #8A3420, #E0785A 45%, #FF6E3C);
    background-size: 200% 200%;
    box-shadow: 0 14px 32px rgba(224, 120, 90, 0.25);
    animation: fadeSlideIn .4s cubic-bezier(.4,0,.2,1) both, profitGradientShift 7s ease infinite;
}

.sales-fuel-chip {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 13px;
    background: var(--theme-highlight, rgba(255, 255, 255, 0.14));
}

.sales-fuel-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--chip-bg);
    color: var(--chip-color);
}

.sales-fuel-chip-icon i {
    font-size: 17px;
}

.sales-fuel-chip-label {
    font-size: 12px;
    font-weight: 700;
    opacity: .9;
}

.sales-fuel-chip-value {
    font-size: 14px;
    font-weight: 800;
    margin-top: 2px;
}

.sales-fuel-chip-unit {
    font-size: 11px;
    font-weight: 600;
    opacity: .85;
}

.sales-trend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
}

.sales-trend-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--panel-2);
    color: var(--text2);
}

.sales-trend-icon i {
    font-size: 18px;
}

.sales-trend-label {
    color: var(--text2);
    font-size: 12.5px;
    font-weight: 700;
}

.sales-trend-value {
    font-size: 16px;
    font-weight: 800;
    margin-top: 3px;
    color: var(--text1);
}

@media (max-width: 640px) {
    .sales-hero-value {
        font-size: 24px;
    }

    .sales-fuel-chip {
        min-width: 100%;
    }
}

.fuel-volume-block {
    margin-bottom: 18px;
}

.fuel-volume-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.fuel-volume-title i {
    font-size: 20px;
}

.finance-hero-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 20px;
    border: none;
    background: linear-gradient(135deg,#C6483A,#E0785A);
    color: #fff;
    box-shadow: 0 14px 32px rgba(198,72,58,0.25);
}

.finance-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--theme-highlight, rgba(255,255,255,0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finance-hero-icon i {
    font-size: 25px;
}

.finance-hero-label {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
}

.finance-hero-value {
    font-size: 25px;
    font-weight: 800;
    margin-top: 5px;
}

.finance-profit-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    border: none;
    position: relative;
    overflow: hidden;
    color: #fff;
    background-size: 200% 200%;
    animation: fadeSlideIn .4s cubic-bezier(.4,0,.2,1) both, profitGradientShift 7s ease infinite;
}

.finance-profit-card.is-positive {
    background-image: linear-gradient(135deg,#1F6B45,#3FAE72 45%,#2FBFA6);
    box-shadow: 0 14px 32px rgba(63,174,114,0.25);
}

.finance-profit-card.is-negative {
    background-image: linear-gradient(135deg,#8A3420,#E0785A 45%,#FF6E3C);
    box-shadow: 0 14px 32px rgba(224,120,90,0.25);
}

@keyframes profitGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.finance-profit-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--theme-highlight, rgba(255,255,255,0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: profitIconPop .5s cubic-bezier(.34,1.56,.64,1) both .15s;
}

@keyframes profitIconPop {
    from { transform: scale(.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.finance-profit-icon i {
    font-size: 25px;
}

.finance-profit-body {
    flex: 1;
    min-width: 0;
}

.finance-profit-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.finance-profit-label {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
}

.finance-profit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 800;
    background: var(--theme-highlight, rgba(255,255,255,0.22));
    padding: 3px 10px;
    border-radius: 20px;
}

.finance-profit-value {
    font-size: 26px;
    font-weight: 800;
    margin-top: 4px;
}

.finance-profit-trend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
    margin-top: 4px;
}

.finance-profit-trend i {
    font-size: 14px;
}

.finance-profit-breakdown {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.finance-profit-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    background: var(--theme-highlight, rgba(255,255,255,0.18));
    padding: 4px 10px;
    border-radius: 20px;
}

.finance-week-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 150px;
    padding-top: 18px;
}

.week-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 6px;
}

.week-bar-value {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text2);
    white-space: nowrap;
}

.week-bar-track {
    width: 100%;
    max-width: 34px;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.week-bar-fill {
    width: 100%;
    border-radius: 6px 6px 2px 2px;
    height: 0;
    min-height: 4px;
    transition: height .7s cubic-bezier(.4,0,.2,1);
}

.week-bar-fill.is-profit {
    background: linear-gradient(180deg,#3FAE72,#2FBFA6);
}

.week-bar-fill.is-loss {
    background: linear-gradient(180deg,#E0785A,#C6483A);
}

.week-bar-fill.is-today {
    box-shadow: 0 0 0 2px var(--accent-solid) inset;
}

.week-bar-fill.is-neutral {
    background: linear-gradient(180deg, var(--bar-color-light,#6FA8FF), var(--bar-color,#4F6EF7));
    opacity: .55;
}

.week-bar-fill.is-selected {
    background: linear-gradient(180deg, var(--bar-color-light,#6FA8FF), var(--bar-color,#4F6EF7));
    opacity: 1;
    box-shadow: 0 0 0 2px var(--accent-solid) inset;
}

.sd-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.sd-layout {
    display: grid;
    grid-template-columns: minmax(240px,290px) minmax(0,1fr);
    gap: 16px;
    align-items: start;
}

.sd-layout > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .sd-layout {
        grid-template-columns: 1fr;
    }
}

.sd-nav-card {
    padding: 16px;
    position: sticky;
    top: 104px;
}

@media (max-width: 900px) {
    .sd-nav-card {
        position: static;
    }
}

.sd-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reports-multiday-hint {
    font-size: 11.5px;
    color: var(--text2);
    background: var(--accent-tint-bg);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
    text-align: center;
}

.sd-nav-year {
    font-weight: 800;
    font-size: 15px;
}

.sd-nav-month {
    font-weight: 700;
    font-size: 14px;
}

.sd-cal-grid .cal-cell {
    font-family: 'IRANSans', sans-serif;
}

.sd-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sd-month-cell {
    position: relative;
    text-align: center;
    padding: 12px 4px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text1);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sd-month-cell:hover {
    background: var(--panel-2);
}

.sd-month-cell.active {
    background: var(--accent-solid);
    color: var(--accent-ink);
}

.sd-month-cell .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-solid);
    margin: 4px auto 0;
}

.sd-month-cell.active .dot {
    background: var(--accent-ink);
}

.sd-year-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
}

.sd-year-cell {
    text-align: center;
    padding: 11px 4px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--text1);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sd-year-cell:hover {
    background: var(--panel-2);
}

.sd-year-cell.active {
    background: var(--accent-solid);
    color: var(--accent-ink);
}

.sd-chart {
    overflow-x: auto;
    padding-bottom: 4px;
}

.sd-chart .week-bar-col {
    flex: 0 0 auto;
    width: 28px;
}

.sd-buyer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.sd-buyer-row:last-child {
    border-bottom: none;
}

.sd-buyer-rank {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--text2);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sd-buyer-rank.top1 {
    background: linear-gradient(135deg,var(--theme-surface, #FFD76A),#F5A623);
    color: #fff;
}

.sd-buyer-rank.top2 {
    background: linear-gradient(135deg,var(--theme-surface, #D7DDE8),#9AA6B8);
    color: #fff;
}

.sd-buyer-rank.top3 {
    background: linear-gradient(135deg,#E3AE7A,#B87A3E);
    color: #fff;
}

.sd-buyer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.sd-buyer-info {
    flex: 1;
    min-width: 0;
}

.sd-buyer-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text1);
}

.sd-buyer-meta {
    font-size: 12px;
    color: var(--text2);
    margin-top: 2px;
}

.sd-buyer-value {
    text-align: end;
    flex-shrink: 0;
}

.sd-buyer-revenue {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text1);
}

.sd-buyer-amount {
    font-size: 12px;
    color: var(--text2);
    margin-top: 2px;
}

.week-bar-label {
    font-size: 11px;
    color: var(--text2);
    font-weight: 700;
}

.week-bar-label.is-today {
    color: var(--accent-solid);
}

.finance-profit-chip i {
    font-size: 13px;
}

.finance-feed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.finance-feed-row:last-child {
    border-bottom: none;
}

.finance-feed-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finance-feed-icon i {
    font-size: 16px;
}

.finance-feed-text {
    flex: 1;
    font-size: 13.5px;
    color: var(--text1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-feed-time {
    font-size: 12px;
    color: var(--text2);
    flex-shrink: 0;
}

.finance-feed-amount {
    font-size: 13.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.finance-feed-amount.is-income {
    color: var(--success);
}

.finance-feed-amount.is-expense {
    color: var(--danger);
}

.finance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.finance-card {
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.finance-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,24,60,0.1);
}

html[data-theme="dark"] .finance-card:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.finance-card:hover .finance-card-chevron {
    color: var(--accent-solid);
    transform: translateX(-3px);
}

html[dir="rtl"] .finance-card:hover .finance-card-chevron {
    transform: translateX(3px);
}

.finance-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.finance-card:hover .finance-card-icon {
    transform: scale(1.08);
}

.finance-card-icon i {
    font-size: 24px;
}

.finance-card-title {
    font-weight: 700;
    font-size: 14.5px;
}

.finance-card-value {
    font-size: 13px;
    color: var(--text2);
    margin-top: 3px;
}

.finance-card-chevron {
    margin-inline-start: auto;
    color: var(--text2);
    font-size: 20px;
    flex-shrink: 0;
    transition: transform .2s ease, color .2s ease;
}

.sales-details-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sales-details-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,24,60,0.1);
}

html[data-theme="dark"] .sales-details-card:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.sales-details-card:hover .finance-card-chevron {
    color: var(--accent-solid);
    transform: translateX(-3px);
}

html[dir="rtl"] .sales-details-card:hover .finance-card-chevron {
    transform: translateX(3px);
}

.sales-details-card-text {
    flex: 1;
    min-width: 0;
}

.accounts-search-wrap {
    max-width: 480px;
    margin: 0 auto 4px;
    text-align: center;
}

.accounts-search-wrap .filter-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-item {
    animation: fadeSlideIn .4s cubic-bezier(.4,0,.2,1) both;
}

.tank-controls-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--panel-2);
    border-radius: 12px;
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    flex-shrink: 0;
}

.filter-tab {
    padding: 7px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.filter-tab:hover {
    color: var(--text1);
}

.filter-tab.active {
    background: var(--panel);
    color: var(--text1);
    box-shadow: var(--shadow-card);
}

.sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-label {
    font-size: 13px;
    color: var(--text2);
    flex-shrink: 0;
}

.sort-wrap .select-wrap {
    min-width: 180px;
}

.sort-wrap select {
    font-size: 13px;
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-family: inherit;
    color: var(--text1);
}

.tank-card {
    --fuel-accent: var(--petrol);
    --fuel-start: #FFB648;
    --fuel-end: #FF8F1F;
    --fuel-glow: rgba(255,150,20,.34);
    position: relative;
    padding: 18px;
    overflow: hidden;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.tank-card[data-fuel="diesel"] {
    --fuel-accent: #2DAE68;
    --fuel-start: #43D486;
    --fuel-end: #19A765;
    --fuel-glow: rgba(30,190,110,.3);
}

.tank-card[data-fuel="cng"] {
    --fuel-accent: #2F83E6;
    --fuel-start: #5AB5FF;
    --fuel-end: #2478E0;
    --fuel-glow: rgba(45,140,255,.3);
}

.tank-card.is-low {
    --fuel-accent: #C24132;
    --fuel-start: #F48A75;
    --fuel-end: #C24132;
    --fuel-glow: rgba(194,65,50,.3);
}

.tank-card::before {
    content: '';
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--fuel-accent) 18%, transparent), transparent 58%);
    opacity: .42;
    transform: translate3d(-22%, -18%, 0);
    animation: tankCardGlowDrift 9s ease-in-out infinite alternate;
}

.tank-card > * {
    position: relative;
    z-index: 1;
}

.tank-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--fuel-accent) 42%, var(--border)) !important;
    box-shadow: 0 17px 38px rgba(20,24,60,.12), 0 8px 25px var(--fuel-glow);
}

html[data-theme="dark"] .tank-card:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
    border-color: var(--border-strong);
}

.tank-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.tank-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tank-card-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tank-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tank-name {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="dark"] .tank-name {
    color: #F2F4F3;
}

.tank-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.tank-actions .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 16px;
}

.gauge-track {
    height: 14px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--fuel-accent) 13%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--text1) 8%, transparent);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    overflow: hidden;
}

html[data-theme="dark"] .gauge-track {
    background: rgba(255,255,255,0.08);
}

.gauge-fill {
    position: relative;
    height: 100%;
    border-radius: 999px;
    width: 0;
    overflow: hidden;
    background: linear-gradient(90deg, var(--fuel-start), var(--fuel-end));
    box-shadow: 0 0 10px var(--fuel-glow), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.46));
    transition: width 1.35s cubic-bezier(.22,1,.36,1);
    animation: tankGaugePulse 3.6s ease-in-out infinite;
}

.gauge-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, var(--theme-glass, rgba(255,255,255,.58)) 50%, transparent 65%);
    transform: translateX(115%);
    animation: tankGaugeShimmer 4.8s ease-in-out infinite 1s;
}

@keyframes tankGaugeShimmer {
    0%, 58% { transform: translateX(115%); opacity: 0; }
    68% { opacity: 1; }
    82%, 100% { transform: translateX(-115%); opacity: 0; }
}

@keyframes tankGaugePulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.09) saturate(1.08); }
}

@keyframes tankCardGlowDrift {
    0% { transform: translate3d(-22%, -18%, 0) scale(1); }
    100% { transform: translate3d(20%, 16%, 0) scale(1.12); }
}

.gauge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--text2);
}

.gauge-labels .num {
    color: var(--text1);
    font-weight: 700;
    font-size: 14.5px;
}

.tank-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
    margin-top: 14px;
}

.tank-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tank-stat-label {
    font-size: 11.5px;
    color: var(--text2);
}

.tank-stat-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tank-flat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.tank-fuel-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fuel-accent) 13%, var(--theme-glass, rgba(255,255,255,.72)));
    border: 1px solid color-mix(in srgb, var(--fuel-accent) 20%, transparent);
    color: var(--fuel-accent);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--fuel-accent) 13%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .22s ease, box-shadow .22s ease;
}

.tank-fuel-icon-circle i {
    font-size: 18px;
}

.tank-card:hover .tank-fuel-icon-circle {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--fuel-accent) 22%, transparent);
}

.tank-fuel-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
}

.tank-low-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    flex-shrink: 0;
}

.tank-low-pill i {
    font-size: 11px;
}

.tanks-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.tanks-topbar-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.btn-outline {
    background: var(--panel);
    color: var(--text1);
    border: 1px solid var(--border-strong);
}

.btn-outline:hover {
    background: var(--panel-2);
}

.btn-outline-success {
    color: var(--success);
    border-color: var(--success-bg);
    background: var(--success-bg);
}

.btn-outline-success:hover {
    border-color: var(--success);
}

html[data-theme="dark"] .btn-outline-success {
    color: #6BC15C;
}

.btn-excel {
    color: var(--theme-ink, #1D6F42);
    background: rgba(29,111,66,0.10);
    border: 1.5px solid rgba(29,111,66,0.25);
}

.btn-excel:hover {
    background: #1D6F42;
    border-color: #1D6F42;
    color: #fff;
    box-shadow: 0 8px 20px rgba(29,111,66,0.28);
}

html[data-theme="dark"] .btn-excel {
    color: #4CBE84;
    background: rgba(76,190,132,0.14);
    border-color: rgba(76,190,132,0.30);
}

html[data-theme="dark"] .btn-excel:hover {
    background: #2E8B57;
    border-color: #2E8B57;
    color: #08160F;
}

.fuel-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
    gap: 14px;
}

#pumpGrid {
    grid-template-columns: repeat(3, 1fr);
}

.tank-lastrefill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text2);
    margin-top: 10px;
}

.tank-lastrefill i {
    font-size: 14px;
}

.tank-lastrefill b {
    color: var(--text1);
    font-weight: 700;
}

.tank-footer {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.pill-btn {
    font-size: 13px;
    padding: 8px 8px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    flex: 1;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pill-btn:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.pill-btn.pill-green {
    background: var(--success-bg);
    border-color: var(--success-bg);
    color: var(--theme-ink, #1F6B45);
}

html[data-theme="dark"] .pill-btn.pill-green {
    color: #A9EFC5;
}

.history-entry {
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    margin: 0 -10px;
    padding-inline: 10px;
    border-radius: var(--r-sm);
    transition: background .15s ease;
}

.history-entry:hover {
    background: var(--panel-2);
}

.history-entry.day-divider {
    border-top: 2px solid var(--panel-2);
    margin-top: 6px;
    padding-top: 15px;
}

.history-entry:last-child {
    border-bottom: none;
}

.history-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.salary-status-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

.salary-status-badge.is-advance {
    background: var(--warning-bg);
    color: var(--warning);
}

.salary-status-badge.is-full {
    background: var(--success-bg);
    color: var(--success);
}

.leave-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}

.leave-status-badge.is-paid {
    background: var(--success-bg);
    color: var(--success);
}

.leave-status-badge.is-unpaid {
    background: var(--warning-bg);
    color: var(--warning);
}

.leave-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.leave-stat-tile {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    text-align: center;
}

.leave-stat-tile-value {
    font-size: 16px;
    font-weight: 800;
}

.leave-stat-tile-label {
    font-size: 11px;
    color: var(--text2);
    margin-top: 2px;
}

.leave-group {
    margin-bottom: 6px;
}

.leave-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2px 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.leave-group:first-child .leave-group-header {
    border-top: none;
    margin-top: 0;
}

.leave-group-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text1);
}

.leave-group-count {
    font-size: 11.5px;
    color: var(--text2);
}

.leave-entry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
}

.leave-entry-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.leave-entry-icon i {
    font-size: 15px;
}

.leave-entry-body {
    flex: 1;
    min-width: 0;
}

.leave-entry-type {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text1);
}

.leave-entry-date {
    font-size: 12px;
    color: var(--text2);
    margin-top: 1px;
}

.leave-entry-deduction {
    font-size: 11.5px;
    color: var(--warning);
    margin-top: 2px;
}

.history-source {
    font-size: 12px;
    color: var(--text2);
    margin-top: 3px;
}

.shift-history-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.shift-history-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.shift-history-icon i {
    font-size: 16px;
}

.shift-history-body {
    flex: 1;
    min-width: 0;
}

.activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-row-icon i {
    font-size: 16px;
}

.activity-row-text {
    flex: 1;
    font-size: 13.5px;
    color: var(--text1);
}

.activity-row-time {
    font-size: 12.5px;
    color: var(--text2);
    flex-shrink: 0;
}

.activity-row-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.activity-row-date {
    font-size: 10.5px;
    color: var(--text2);
    opacity: .8;
}

.journal-day-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 6px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 700;
}

.journal-day-divider::before,
.journal-day-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}

.work-record-list {
    display: flex;
    flex-direction: column;
}

.work-record-filter-cal {
    background: var(--panel-2);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 6px;
}

.work-record-filter-cal .sd-nav-header {
    margin-bottom: 4px;
}

.work-record-filter-cal .date-picker-weekdays {
    font-size: 12.5px;
    margin-bottom: 2px;
}

.wr-cal-grid {
    gap: 1px;
    margin-bottom: 8px;
}

.wr-cal-cell {
    font-size: 14px;
    min-height: 30px;
    padding: 3px 0;
}

.wr-cal-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 1px;
    height: 6px;
}

.wr-cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wr-cal-dot.is-work {
    background: var(--success);
}

.wr-cal-dot.is-leave {
    background: var(--warning);
}

.wr-cal-dot.is-leave-paid {
    background: var(--warning);
}

.wr-cal-dot.is-leave-unpaid {
    background: var(--danger);
}

.cal-cell.today .wr-cal-dot.is-work,
.cal-cell.today .wr-cal-dot.is-leave,
.cal-cell.today .wr-cal-dot.is-leave-paid,
.cal-cell.today .wr-cal-dot.is-leave-unpaid {
    background: var(--accent-ink);
    opacity: .85;
}

.wr-cal-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text2);
}

.wr-cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.work-record-filter-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--accent-tint-bg);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-solid);
}

.work-record-filter-active span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.work-record-filter-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 6px;
}

@media (max-width: 720px) {
    .work-record-filter-row {
        grid-template-columns: 1fr;
    }
}

.work-record-filter-cal {
    margin-bottom: 0;
}

.work-record-stats-panel {
    height: 100%;
    background: var(--panel-2);
    border-radius: 14px;
    padding: 14px;
}

.work-record-stats-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text2);
    margin-bottom: 12px;
}

.work-record-stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.work-record-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: var(--panel);
    border-radius: 11px;
}

.work-record-stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.work-record-stat-icon i {
    font-size: 14px;
}

.work-record-stat-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text1);
}

.work-record-stat-value {
    font-size: 14px;
    font-weight: 800;
    margin-left: 10px;
}

.work-record-stat-item.is-total {
    background: var(--accent-tint-bg);
    margin-top: 2px;
}

.work-record-stat-item.is-total .work-record-stat-icon {
    background: var(--accent-solid);
    color: #fff;
}

.work-record-stat-item.is-total .work-record-stat-label,
.work-record-stat-item.is-total .work-record-stat-value {
    color: var(--accent-solid);
}

.work-record-day-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 8px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--accent-tint-bg);
}

.work-record-list > .work-record-day-divider:first-child {
    margin-top: 0;
}

.work-record-day-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-solid);
}

.work-record-day-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-solid);
    opacity: .85;
}

.work-record-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border);
}

.work-record-row:last-child {
    border-bottom: none;
}

.work-record-row.is-clickable-row,
.sale-row.is-clickable-row {
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background .15s ease;
}

.work-record-row.is-clickable-row:hover,
.sale-row.is-clickable-row:hover {
    background: var(--panel-2);
}

.txn-detail-notes {
    font-size: 13px;
    color: var(--text1);
    background: var(--panel-2);
    border-radius: var(--r-sm);
    padding: 10px 11px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.txn-detail-file-thumb {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    cursor: zoom-in;
    transition: transform .15s ease;
}

.txn-detail-file-thumb:hover {
    transform: scale(1.04);
}

.work-record-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text2);
    background: var(--panel-2);
}

.work-record-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.work-record-icon i {
    font-size: 16px;
}

.work-record-body {
    flex: 1;
    min-width: 0;
}

.work-record-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text1);
}

.work-record-time {
    font-size: 11.5px;
    color: var(--text2);
    margin-top: 2px;
}

.sd-txn-status-line {
    margin-top: 5px;
}

.work-record-amount {
    font-size: 13.5px;
    font-weight: 800;
    flex-shrink: 0;
    white-space: nowrap;
}

.acct-tab-switcher {
    position: relative;
    display: flex;
    padding: 4px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-top: 20px;
    margin-bottom: 18px;
}

.acct-tab-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-start: calc(4px + var(--active-index, 0) * ((100% - 8px) / 2));
    width: calc((100% - 8px) / 2);
    border-radius: 12px;
    background: var(--accent-bg);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-solid) 32%, transparent);
    transition: inset-inline-start .32s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.acct-tab-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 16px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text2);
    font-family: inherit;
    cursor: pointer;
    transition: color .2s ease, transform .15s ease;
}

.acct-tab-btn:hover:not(.active) {
    color: var(--text1);
}

.acct-tab-btn:active {
    transform: scale(.97);
}

.acct-tab-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    color: inherit;
    transition: background .2s ease;
}

.acct-tab-icon i {
    font-size: 17px;
}

.acct-tab-label {
    font-size: 13.5px;
    font-weight: 800;
}

.acct-tab-btn.active {
    color: var(--accent-ink);
}

.acct-tab-btn.active .acct-tab-icon {
    background: var(--theme-highlight, rgba(255, 255, 255, 0.22));
}

@media (prefers-reduced-motion: reduce) {
    .acct-tab-indicator {
        transition: none;
    }
}

@media (max-width: 480px) {
    .acct-tab-label {
        font-size: 12px;
    }

    .acct-tab-btn {
        padding: 10px 8px;
    }
}

.emp-perm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emp-perm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.emp-perm-item:hover {
    border-color: var(--border-strong);
}

.emp-perm-item:active {
    transform: scale(.985);
}

.emp-perm-item:has(input:checked) {
    background: var(--tone-bg);
    border-color: var(--tone);
    box-shadow: 0 6px 16px -8px var(--tone);
}

.emp-perm-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--panel-2);
    color: var(--text2);
    transition: background .25s cubic-bezier(.34,1.56,.64,1), color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}

.emp-perm-icon i {
    font-size: 18px;
}

.emp-perm-item:has(input:checked) .emp-perm-icon {
    background: var(--tone);
    color: #fff;
    transform: scale(1.08) rotate(-6deg);
}

.emp-perm-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emp-perm-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text1);
    transition: color .2s ease;
}

.emp-perm-item:has(input:checked) .emp-perm-title {
    color: var(--tone);
}

.emp-perm-sub {
    font-size: 11.5px;
    color: var(--text2);
    line-height: 1.4;
}

.emp-perm-switch {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.emp-perm-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.emp-perm-track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    transition: border-color .2s ease, background .2s ease;
}

.emp-perm-check {
    font-size: 14px;
    color: #fff;
    transform: scale(0) rotate(-45deg);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.emp-perm-switch input:checked + .emp-perm-track {
    background: var(--tone);
    border-color: var(--tone);
}

.emp-perm-switch input:checked + .emp-perm-track .emp-perm-check {
    transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .emp-perm-item,
    .emp-perm-icon,
    .emp-perm-title,
    .emp-perm-track,
    .emp-perm-check {
        transition: none !important;
    }
}

.modal-2col.emp-modal-glass .modal-fields-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.emp-form-section {
    background: var(--theme-glass, rgba(255, 255, 255, 0.5));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 16px 4px;
    backdrop-filter: blur(6px);
}

html[data-theme="dark"] .emp-form-section {
    background: rgba(255, 255, 255, 0.03);
}

.emp-form-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-solid);
    margin-bottom: 14px;
}

.emp-form-section-head i {
    font-size: 16px;
}

.emp-modal-glass .photo-upload {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}

.emp-modal-glass .photo-upload:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px -6px var(--accent-solid);
}

.emp-modal-glass .photo-upload i {
    transition: transform .2s ease;
}

.emp-modal-glass .photo-upload:hover i {
    transform: scale(1.1) translateY(-1px);
}

.emp-field-icon,
.field-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.emp-field-icon > i,
.field-icon > i {
    position: absolute;
    inset-inline-start: 9px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-muted-on-glass, var(--text2));
    background: color-mix(in srgb, var(--panel-2) 72%, transparent);
    pointer-events: none;
    transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.emp-modal-glass .emp-field-icon :is(input,select),
.modal .field-icon input,
.modal .field-icon textarea,
.modal .field-icon select {
    width: 100%;
    padding-inline-start: 46px;
}

.emp-field-icon:focus-within > i,
.field-icon:focus-within > i {
    color: var(--accent-ink);
    background: var(--accent-solid);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-solid) 34%, transparent);
    transform: scale(1.08);
}

.emp-field-icon:focus-within :is(input,select),
.field-icon:focus-within input,
.field-icon:focus-within textarea,
.field-icon:focus-within select {
    border-color: var(--accent-solid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 14%, transparent);
}

.emp-status-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.emp-status-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 16px 10px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.emp-status-card:hover {
    border-color: var(--border-strong);
}

.emp-status-card:active {
    transform: scale(.98);
}

.emp-status-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.emp-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    color: var(--text2);
    margin-bottom: 4px;
    transition: background .25s cubic-bezier(.34,1.56,.64,1), color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}

.emp-status-icon i {
    font-size: 19px;
}

.emp-status-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text1);
}

.emp-status-sub {
    font-size: 10.5px;
    color: var(--text2);
    line-height: 1.4;
}

.emp-status-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    font-size: 15px;
    color: var(--tone);
    transform: scale(0) rotate(-45deg);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.emp-status-card.is-active-tone {
    --tone: var(--success);
    --tone-bg: var(--success-bg);
}

.emp-status-card.is-inactive-tone {
    --tone: var(--danger);
    --tone-bg: var(--danger-bg);
}

.emp-status-card:has(input:checked) {
    background: var(--tone-bg);
    border-color: var(--tone);
    box-shadow: 0 6px 16px -8px var(--tone);
}

.emp-status-card:has(input:checked) .emp-status-icon {
    background: var(--tone);
    color: #fff;
    transform: scale(1.08);
}

.emp-status-card:has(input:checked) .emp-status-label {
    color: var(--tone);
}

.emp-status-card:has(input:checked) .emp-status-badge {
    transform: scale(1) rotate(0deg);
}

@media (max-width: 480px) {
    .emp-status-toggle {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emp-form-section,
    .emp-modal-glass .photo-upload,
    .emp-modal-glass .photo-upload i,
    .emp-field-icon > i,
    .emp-status-card,
    .emp-status-icon,
    .emp-status-label,
    .emp-status-badge {
        transition: none !important;
    }
}

.activity-log-scroll {
    max-height: 280px;
    overflow-y: auto;
}

.sale-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sale-row-main {
    flex: 1;
    min-width: 140px;
}

.sale-row-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text1);
}

.sale-row-amount {
    font-size: 12.5px;
    color: var(--text2);
    margin-top: 2px;
}

.sale-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.sale-row-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--text1);
}

.sale-row-time {
    font-size: 12px;
    color: var(--text2);
}

.sale-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.sale-badge.cash {
    background: var(--success-bg);
    color: var(--theme-ink, #1F6B45);
}

html[data-theme="dark"] .sale-badge.cash {
    color: #A9EFC5;
}

.sale-badge.debt {
    background: var(--danger-bg);
    color: var(--theme-ink, #8A3420);
}

html[data-theme="dark"] .sale-badge.debt {
    color: #FFC9BA;
}

.add-card {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    font-size: 15px;
    cursor: pointer;
    min-height: 130px;
    gap: 6px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.add-card:hover {
    border-color: var(--accent-solid);
    color: var(--accent-solid);
    background: var(--accent-tint-bg);
}

.empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text2);
    border: 1px dashed var(--border);
    border-radius: var(--r-lg);
    grid-column: 1/-1;
}

.empty-title {
    font-weight: 700;
    color: var(--text1);
    margin-bottom: 6px;
    font-size: 15px;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,24,40,0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 50;
    padding: 40px 20px;
    overflow-y: auto;
}

@media (max-width: 480px) {
    .overlay {
        padding: 20px 12px;
    }
}

.modal {
    background: var(--theme-glass, rgba(255,255,255,0.75));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: var(--r-lg);
    padding: 24px;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.6));
    box-shadow: 0 20px 60px rgba(20,24,60,0.15), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,0.7));
}

html[data-theme="dark"] .modal {
    background: rgba(27,31,37,0.75);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

.modal h3 {
    margin: 0 0 18px;
    font-size: 17px;
}

.photo-lightbox-overlay {
    align-items: center;
    background: rgba(10,12,20,0.75);
    cursor: zoom-out;
}

.photo-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    cursor: default;
}

@media (min-width: 900px) {
    .modal-2col {
        max-width: 700px;
    }

    .modal-2col .modal-fields-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 16px;
    }

    .modal-2col .modal-fields-grid > * {
        margin-bottom: 0;
    }

    .modal-2col .modal-fields-grid > .field-row,
    .modal-2col .modal-fields-grid > .field-full {
        grid-column: 1 / -1;
    }
}

.refill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.refill-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.refill-icon i {
    font-size: 19px;
    color: var(--success);
}

.refill-info-card {
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.refill-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}

.refill-gauge-track {
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.refill-gauge-fill {
    height: 100%;
    border-radius: 6px;
}

.refill-info-sub {
    font-size: 13px;
}

.quick-amounts {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.quick-btn {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-solid);
    cursor: pointer;
}

.quick-btn:hover {
    border-color: var(--accent-solid);
}

.amt-input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    height: 54px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--panel-2);
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: var(--text1);
    margin-bottom: 16px;
}

.amt-input:focus {
    outline: 2px solid var(--accent-solid);
    outline-offset: 1px;
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 6px;
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 10px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-family: inherit;
    font-size: 15px;
    color: var(--text1);
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--accent-solid);
    outline-offset: 1px;
}

.field textarea {
    min-height: 64px;
    line-height: 1.6;
    resize: vertical;
}

.field input.input-danger,
.field select.input-danger,
.field textarea.input-danger {
    border-color: #C24132;
    background: color-mix(in srgb, var(--panel) 92%, var(--theme-surface, #FDE8E3));
    box-shadow: 0 0 0 3px rgba(194,65,50,.11);
}

.field label .optional-tag {
    color: var(--text2);
    font-weight: 400;
    font-size: 12.5px;
}

.btn-add-type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1.5px dashed var(--accent-solid);
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    font-weight: 600;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-style .18s ease, transform .12s ease;
    flex: none;
    white-space: nowrap;
}

.btn-add-type i {
    font-size: 15px;
    transition: transform .18s ease;
}

.btn-add-type:hover {
    background: var(--accent-solid);
    color: #fff;
    border-style: solid;
}

.btn-add-type:hover i {
    transform: rotate(90deg);
}

.btn-add-type:active {
    transform: scale(.96);
}

.attach-files-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attach-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attach-file-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-size: 12.5px;
    color: var(--text1);
    max-width: 220px;
    animation: attachChipIn .18s ease;
}

@keyframes attachChipIn {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

.attach-file-chip i.ti-file-text {
    color: var(--accent-solid);
    font-size: 15px;
    flex-shrink: 0;
}

.attach-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: var(--text2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.attach-file-remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.attach-file-remove i {
    font-size: 11px;
}

.field input[readonly] {
    background: var(--panel-2);
    color: var(--text2);
    border-style: dashed;
    cursor: not-allowed;
}

.field-system-note {
    color: var(--text2);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 600;
    margin-top: 5px;
}

.field-error-msg {
    display: none;
    align-items: center;
    gap: 7px;
    color: var(--theme-ink, #7F271D);
    background: color-mix(in srgb, var(--panel) 74%, var(--theme-surface, #FDE8E3));
    border: 1px solid rgba(194,65,50,.24);
    border-inline-start:1px solid var(--border);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 750;
    margin-top: 6px;
    animation: validationAlertIn .18s ease both;
}

.field.has-error .field-error-msg {
    display: flex;
}

.field-error-msg::before {
    content: '!';
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    color: #fff;
    background: #C24132;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
}

.form-required-notice {
    display: none;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--panel) 70%, var(--theme-surface, #FDE8E3));
    color: var(--theme-ink, #71271F);
    border: 1px solid rgba(194,65,50,.34);
    border-inline-start:1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.65;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(127,39,29,.11);
    animation: validationAlertIn .22s ease both;
}

.form-required-notice.is-visible {
    display: flex;
}

.form-required-notice::before {
    content: '!';
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    color: #fff;
    background: #C24132;
    box-shadow: 0 5px 13px rgba(194,65,50,.28);
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
}

.field.has-error > label {
    color: var(--theme-ink, #7F271D);
}

.field.has-error .field-icon > i,
.field.has-error .emp-field-icon > i {
    color: #fff;
    background: #C24132;
    box-shadow: 0 5px 13px rgba(194,65,50,.22);
}

html[data-theme="dark"] .field-error-msg,
html[data-theme="dark"] .form-required-notice {
    color: #FFD4CC;
    background: rgba(96,31,25,.72);
    border-color: rgba(255,153,137,.34);
}

html[data-theme="dark"] .field.has-error > label {
    color: #FFD4CC;
}

@keyframes validationAlertIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.info-box {
    background: var(--panel-2);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.date-picker {
    position: relative;
}

.date-picker-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-size: 15px;
    color: var(--text1);
    cursor: pointer;
}

.date-picker-field i {
    color: var(--text2);
    font-size: 17px;
}

.date-picker-field.open {
    border-color: var(--accent-solid);
    outline: 2px solid var(--accent-solid);
    outline-offset: 1px;
}

.date-picker-popover {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    width: 280px;
    max-width: 90vw;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(20,24,60,0.18);
    padding: 14px;
    z-index: 60;
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.date-picker-month-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--text1);
}

.date-picker-nav {
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.date-picker-nav:hover {
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 4px;
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text1);
    cursor: pointer;
}

.date-picker-day:hover {
    background: var(--panel-2);
}

.date-picker-day.selected {
    background: var(--accent-solid);
    color: var(--accent-ink);
    font-weight: 700;
}

.date-picker-today-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.preview-box {
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    background: var(--success-bg);
    color: var(--theme-ink, #1F6B45);
}

html[data-theme="dark"] .preview-box {
    color: #A9EFC5;
}

.preview-box.over {
    background: var(--danger-bg);
    color: var(--theme-ink, #8A3420);
}

html[data-theme="dark"] .preview-box.over {
    color: #FFC9BA;
}

.paymethod-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.paymethod-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    background: var(--panel-2);
    color: var(--text2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.paymethod-btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.paymethod-btn.active {
    box-shadow: 0 6px 16px rgba(20,24,60,0.08);
}

.paymethod-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.paymethod-btn.cash.active {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--theme-ink, #1F6B45);
}

.paymethod-btn.paymethod-btn-solo {
    padding: 20px;
    font-size: 16px;
    font-weight: 800;
}

.paymethod-btn.paymethod-btn-solo i {
    font-size: 24px;
}

html[data-theme="dark"] .paymethod-btn.cash.active {
    color: #A9EFC5;
}

.paymethod-btn.debt.active {
    background: transparent;
    border: 2px solid var(--danger);
    color: var(--danger);
}

.paymethod-btn.leave-paid.active {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--theme-ink, #1F6B45);
}

html[data-theme="dark"] .paymethod-btn.leave-paid.active {
    color: #A9EFC5;
}

.paymethod-btn.leave-unpaid.active {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--theme-ink, #7A5A10);
}

html[data-theme="dark"] .paymethod-btn.leave-unpaid.active {
    color: #F5D998;
}

.date-picker-day.in-range {
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    font-weight: 700;
}

.leave-day-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    max-height: 140px;
    overflow-y: auto;
}

.leave-day-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    font-size: 13px;
}

.leave-day-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--text2);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.leave-day-chip-remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.leave-day-empty-hint {
    font-size: 12.5px;
    color: var(--text2);
    text-align: center;
    padding: 10px 0;
    margin-bottom: 14px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r-sm);
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn {
    padding: 11px 18px;
    border-radius: var(--r-sm);
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--accent-bg);
    color: var(--accent-ink);
    flex: 1;
}

.btn-primary:disabled {
    background: var(--panel-2);
    color: var(--text2);
}

.btn-primary:hover {
    box-shadow: 0 8px 20px rgba(79,110,247,0.28);
}

html[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(47,191,166,0.28);
}

.btn-ghost {
    background: var(--panel);
    color: var(--text1);
    border: 1.5px solid var(--border-strong);
    box-shadow: 0 2px 10px rgba(20,24,60,0.06);
}

.btn-ghost:hover {
    background: var(--accent-tint-bg);
    border-color: var(--accent-solid);
    color: var(--accent-solid);
}

html[data-theme="dark"] .btn-ghost {
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.btn-sm {
    flex: none;
    padding: 8px 14px;
    font-size: 13px;
}

.btn-sm i {
    font-size: 18px;
}

.btn-end-shift {
    flex: none;
    padding: 6px 12px;
    font-size: 12px;
    background: var(--danger);
    color: #fff;
}

.btn-end-shift i {
    font-size: 18px;
}

.btn-end-shift.is-long {
    background: var(--theme-surface, #fff);
    color: var(--danger);
}

.toast {
    --toast-tone: var(--accent-solid);
    --toast-tint: rgba(52,86,209,.18);
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(18px) scale(.96);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(340px, calc(100vw - 28px));
    max-width: min(540px, calc(100vw - 28px));
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255,255,255,.66)), transparent 36%),
        linear-gradient(135deg, var(--theme-highlight, rgba(255,255,255,.34)), var(--theme-highlight, rgba(238,245,255,.16)));
    border: 1px solid color-mix(in srgb, var(--toast-tone) 24%, var(--theme-stroke, rgba(255,255,255,.92)));
    color: var(--text1);
    padding: 11px 13px 14px;
    border-radius: 18px;
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.6;
    z-index: 110000;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    box-shadow:
        0 20px 52px color-mix(in srgb, var(--toast-tone) 18%, transparent),
        0 7px 18px rgba(31,43,90,.1),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)),
        inset 0 -1px 0 color-mix(in srgb, var(--toast-tone) 13%, transparent);
    transition: opacity .24s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
}

.toast i {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--toast-tone) 72%, var(--theme-surface, #fff)), var(--toast-tone));
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow:
        0 7px 18px color-mix(in srgb, var(--toast-tone) 28%, transparent),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.38));
    font-size: 18px;
    flex: 0 0 34px;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px) scale(1);
}

.toast.success {
    --toast-tone: #258A57;
    --toast-tint: rgba(37,138,87,.22);
}

.toast.error {
    --toast-tone: #C24132;
    --toast-tint: rgba(194,65,50,.22);
}

.toast.info {
    --toast-tone: #3456D1;
    --toast-tint: rgba(72,103,213,.24);
}

.toast-message {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.toast::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 1px;
    inset-inline: 18px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--theme-glass, rgba(255,255,255,.94)), transparent);
    pointer-events: none;
}

.toast-progress {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--toast-tone) 34%, var(--theme-surface, #fff)), transparent 42%),
        linear-gradient(105deg,
            color-mix(in srgb, var(--toast-tone) 24%, transparent),
            color-mix(in srgb, var(--toast-tone) 12%, transparent));
    box-shadow: inset 0 0 24px color-mix(in srgb, var(--toast-tone) 14%, transparent);
    transform-origin: right center;
    pointer-events: none;
}

.toast.show .toast-progress {
    animation: toastCountdown 2.2s linear forwards;
}

html[dir="ltr"] .toast-progress {
    transform-origin: left center;
}

html[data-theme="dark"] .toast {
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(135deg, rgba(37,44,56,.52), rgba(17,21,28,.34));
    border-color: color-mix(in srgb, var(--toast-tone) 28%, rgba(255,255,255,.16));
    box-shadow:
        0 20px 52px color-mix(in srgb, var(--toast-tone) 24%, rgba(0,0,0,.5)),
        inset 0 1px 0 rgba(255,255,255,.1);
}

@keyframes toastCountdown {
    0% { transform: scaleX(1); opacity: 1; }
    72% { opacity: .82; }
    100% { transform: scaleX(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .toast-progress,
    .toast.show .toast-progress {
        animation: none !important;
        transform: scaleX(1);
    }
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text2);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 16px;
}

.back-link:hover {
    color: var(--text1);
}

.back-link i {
    font-size: 20px;
}

.back-to-finance-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1.5px solid var(--border-strong);
    background: var(--panel);
    border-radius: var(--r-sm);
    color: var(--text1);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 16px;
}

.back-to-finance-btn i {
    color: var(--accent-solid);
    font-size: 18px;
}

.back-to-finance-btn:hover {
    background: var(--panel-2);
}

.back-btn-prominent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1B2140;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(27,33,64,0.25);
    margin-bottom: 18px;
    font-family: inherit;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.back-btn-prominent:hover {
    opacity: 0.94;
    transform: translateX(-3px);
    box-shadow: 0 10px 22px rgba(27,33,64,0.32);
}

html[dir="rtl"] .back-btn-prominent:hover {
    transform: translateX(3px);
}

.back-btn-prominent:active {
    transform: scale(.97);
}

.back-btn-prominent i {
    font-size: 19px;
    transition: transform .18s ease;
}

.back-btn-prominent:hover i {
    transform: translateX(-2px);
}

html[dir="rtl"] .back-btn-prominent:hover i {
    transform: translateX(2px);
}

.field-row {
    display: flex;
    gap: 10px;
}

.field-row .field {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .field-row {
        flex-direction: column;
        gap: 14px;
    }
}

.fuel-checkbox-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.fuel-checkbox-row .fuel-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 0;
    color: var(--text1);
    cursor: pointer;
}

.fuel-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent-solid);
    cursor: pointer;
}

.fuel-tile-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fuel-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    background: var(--panel);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.fuel-tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.fuel-tile i {
    font-size: 26px;
    transition: transform .15s ease;
}

.fuel-tile span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text1);
}

.fuel-tile.active {
    border: 2px solid var(--tile-border);
    background: var(--tile-bg);
    box-shadow: 0 6px 16px rgba(20,24,60,0.08);
}

.fuel-tile.active i {
    transform: scale(1.12);
}

.fuel-tile.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(70%);
}

.modal-search-field {
    position: relative;
}

.modal-search-field i {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    color: var(--text2);
    font-size: 16px;
    pointer-events: none;
}

.modal-search-field input {
    width: 100%;
    padding: 10px 11px;
    padding-inline-start: 38px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-family: inherit;
    font-size: 15px;
    color: var(--text1);
}

.modal-search-field input:focus {
    outline: 2px solid var(--accent-solid);
    outline-offset: 1px;
}

.salary-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.salary-info-name {
    font-weight: 700;
    font-size: 14.5px;
}

.salary-info-sub {
    font-size: 12px;
    color: var(--text2);
    margin-top: 2px;
}

.customer-search-results {
    max-height: 160px;
    overflow-y: auto;
    margin-top: 6px;
}

.customer-result-row {
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    color: var(--text1);
    cursor: pointer;
}

.customer-result-row:hover {
    background: var(--panel-2);
}

.pump-card {
    position: relative;
    padding: 18px;
    border: 1.5px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.pump-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,24,60,0.12);
}

html[data-theme="dark"] .pump-card:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.pump-card.free {
    background: linear-gradient(135deg, var(--theme-surface, #FBE8E4), var(--theme-surface, #EEF1FE));
    border-color: rgba(224,120,90,.35);
}

html[data-theme="dark"] .pump-card.free {
    background: linear-gradient(135deg,#2A1A14,#1A100C);
    border-color: #5A3A2E;
}

.pump-card.busy {
    background: linear-gradient(135deg, var(--theme-surface, #E7F3E3), var(--theme-surface, #EEF1FE));
    border-color: rgba(63,174,114,.35);
}

html[data-theme="dark"] .pump-card.busy {
    background: linear-gradient(135deg,#1E3319,#12200F);
    border-color: #3A5A2E;
}

.pump-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.pump-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pump-fuel-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-glass, rgba(255,255,255,0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pump-fuel-icon-circle i {
    font-size: 19px;
    color: var(--text2);
}

.pump-card.busy .pump-fuel-icon-circle i {
    color: var(--pump-busy-icon);
}

.pump-card-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pump-card-actions {
    flex-shrink: 0;
}

.pump-type {
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
}

.pump-name {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="dark"] .pump-name {
    color: #F2F4F3;
}

.pump-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.pump-status-pill .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pump-status-pill.busy {
    background: rgba(63,174,114,.18);
    color: var(--theme-ink, #1F6B45);
}

.pump-status-pill.busy .status-dot {
    background: var(--success);
    animation: statusDotPulse 1.6s infinite;
}

html[data-theme="dark"] .pump-status-pill.busy {
    color: #A9EFC5;
}

.pump-status-pill.free {
    background: rgba(224,120,90,.18);
    color: var(--theme-ink, #8A3420);
}

.pump-status-pill.free .status-dot {
    background: var(--danger);
}

html[data-theme="dark"] .pump-status-pill.free {
    color: #FFC9BA;
}

.pump-status-pill.is-inactive {
    background: var(--panel-2);
    color: var(--text2);
}

.pump-status-pill.is-inactive .status-dot {
    background: var(--text2);
}

.balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    flex-shrink: 0;
}

.balance-pill i {
    font-size: 14px;
}

.balance-pill.is-debt {
    background: var(--danger-bg);
    color: var(--theme-ink, #8A3420);
}

html[data-theme="dark"] .balance-pill.is-debt {
    color: #FFC9BA;
}

.balance-pill.is-settled {
    background: var(--success-bg);
    color: var(--theme-ink, #1F6B45);
}

html[data-theme="dark"] .balance-pill.is-settled {
    color: #A9EFC5;
}

@keyframes statusDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63,174,114,.45); }
    50% { box-shadow: 0 0 0 4px rgba(63,174,114,0); }
}

.pump-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}

.pump-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pump-worker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pump-worker-name {
    font-size: 14px;
    font-weight: 700;
}

html[data-theme="dark"] .pump-worker-name {
    color: #F2F4F3;
}

.pump-worker-since {
    font-size: 12.5px;
    color: var(--text2);
    margin-top: 1px;
}

.timer-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--theme-glass, rgba(255,255,255,.55));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.7));
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 12.5px;
    color: var(--text1);
}

.timer-chip i {
    font-size: 14px;
}

.emp-list-section {
    margin-bottom: 26px;
}

.emp-list-section-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.emp-list-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: empSectionIconPop .4s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes empSectionIconPop {
    from { transform: scale(.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.emp-list-section-icon i {
    font-size: 15px;
}

.emp-list-section-icon.is-active {
    background: var(--success-bg);
    color: var(--success);
}

.emp-list-section-icon.is-inactive {
    background: var(--panel-2);
    color: var(--text2);
}

.emp-list-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text1);
}

.emp-list-section-count {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
    background: var(--panel-2);
    border-radius: 999px;
    padding: 2px 10px;
}

.emp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emp-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    padding-inline-start: 18px;
    border: none;
    border-inline-start:1px solid var(--border);
    border-radius: 14px;
    background: var(--theme-glass, rgba(255, 255, 255, 0.55));
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

html[data-theme="dark"] .emp-row {
    background: rgba(255, 255, 255, 0.04);
}

.emp-row.is-inactive {
    border-inline-start-color: var(--danger);
}

.emp-row:hover {
    transform: translateX(-2px);
    box-shadow: 0 10px 24px -12px rgba(20, 24, 60, 0.25);
}

html[dir="ltr"] .emp-row:hover {
    transform: translateX(2px);
}

html[data-theme="dark"] .emp-row:hover {
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}

.emp-row-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    border: 2px solid var(--border);
}

.emp-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emp-row-body {
    flex: 1;
    min-width: 0;
}

.emp-row-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emp-row-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-row-id {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text2);
    background: var(--panel-2);
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.emp-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 3px;
}

.emp-row-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text2);
}

.emp-row-meta-item i {
    font-size: 13px;
}

.emp-row-status {
    display: none;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.emp-row-status i {
    font-size: 13px;
}

.emp-row-status.is-busy {
    background: var(--success-bg);
    color: var(--success);
}

.emp-row-status.is-free {
    background: var(--cng-bg);
    color: var(--cng);
}

.emp-row-status.is-leave {
    background: var(--warning-bg);
    color: var(--warning);
}

.emp-row-status.is-off {
    background: var(--panel-2);
    color: var(--text2);
}

.emp-row-chevron {
    font-size: 16px;
    color: var(--text2);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .emp-row-status {
        display: inline-flex;
    }
}

/* ---------- employee directory cards ---------- */
.emp-list-section {
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--panel) 34%, transparent);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.emp-list-section-head {
    margin-bottom: 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
}

.emp-list-section-count {
    margin-inline-start: auto;
    min-width: 28px;
    text-align: center;
    border: 1px solid var(--border);
}

.emp-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.emp-row {
    --emp-tone: var(--cng);
    --emp-tint: var(--cng-bg);
    min-width: 0;
    min-height: 156px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 10px 12px;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--emp-tone) 24%, var(--border));
    border-top: 4px solid var(--emp-tone);
    border-inline-start: 1px solid color-mix(in srgb, var(--emp-tone) 24%, var(--border));
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--emp-tone) 12%, transparent), transparent 42%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.64)), var(--theme-glass, rgba(246,249,255,.42)));
    box-shadow: 0 10px 28px rgba(37,50,105,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85));
    backdrop-filter: blur(9px) saturate(145%);
    -webkit-backdrop-filter: blur(9px) saturate(145%);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.emp-row.is-busy {
    --emp-tone: #258A57;
    --emp-tint: #E0F6E9;
}

.emp-row.is-free {
    --emp-tone: #2F7FD1;
    --emp-tint: #E8F1FF;
}

.emp-row.is-leave {
    --emp-tone: #A86F08;
    --emp-tint: #FFF1C9;
}

.emp-row.is-off,
.emp-row.is-inactive {
    --emp-tone: #7A8493;
    --emp-tint: #EEF1F5;
    opacity: .88;
}

.emp-row:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--emp-tone) 48%, var(--border));
    box-shadow: 0 18px 42px rgba(31,43,95,.14), 0 8px 24px color-mix(in srgb, var(--emp-tone) 13%, transparent);
}

html[dir="ltr"] .emp-row:hover {
    transform: translateY(-4px);
}

html[data-theme="dark"] .emp-row {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--emp-tone) 14%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(34,40,51,.74), rgba(22,27,35,.62));
    border-color: color-mix(in srgb, var(--emp-tone) 32%, rgba(255,255,255,.1));
    box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}

.emp-row-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    border-width: 3px;
    background: color-mix(in srgb, var(--emp-tint) 86%, var(--panel));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--emp-tone) 18%, transparent);
    font-size: 19px;
    transition: transform .22s ease, box-shadow .22s ease;
}

.emp-row:hover .emp-row-avatar {
    transform: scale(1.06);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--emp-tone) 27%, transparent);
}

.emp-row-body {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.emp-row-name-line {
    align-items: flex-start;
    flex-wrap: wrap;
}

.emp-row-name {
    font-size: 15px;
    line-height: 1.55;
}

.emp-row-id {
    color: var(--emp-tone);
    background: color-mix(in srgb, var(--emp-tint) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--emp-tone) 16%, transparent);
}

.emp-row-meta {
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.emp-row-meta-item {
    font-size: 12px;
}

.emp-row-meta-item i {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--emp-tone);
    background: color-mix(in srgb, var(--emp-tint) 80%, transparent);
}

.emp-row-status {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 7px 10px;
    padding-inline-end: 34px;
    border: 1px solid color-mix(in srgb, var(--emp-tone) 20%, transparent);
    color: var(--emp-tone) !important;
    background: color-mix(in srgb, var(--emp-tint) 84%, transparent) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-row-chevron {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 12px;
    z-index: 2;
    color: var(--emp-tone);
    opacity: 0;
    transform: translateX(4px);
    transition: opacity .2s ease, transform .2s ease;
}

.emp-row:hover .emp-row-chevron {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1050px) {
    .emp-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .emp-list-section {
        padding: 12px;
    }

    .emp-list {
        grid-template-columns: 1fr;
    }
}

/* Employee directory v2: centered profile cards, no hover arrow. */
.emp-row {
    min-height: 248px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 108px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--emp-tone) 24%, var(--border));
    border-top: 1px solid color-mix(in srgb, var(--emp-tone) 24%, var(--border));
    background: color-mix(in srgb, var(--panel) 78%, transparent);
}

.emp-row::before {
    inset: 0 0 auto;
    height: 66px;
    border-radius: 17px 17px 0 0;
    background:
        radial-gradient(circle at 18% 20%, var(--theme-glass, rgba(255,255,255,.38)), transparent 28%),
        linear-gradient(120deg,
            color-mix(in srgb, var(--emp-tone) 42%, var(--theme-surface, #fff)),
            color-mix(in srgb, var(--emp-tone) 19%, var(--panel)));
    opacity: 1;
    transform: none;
    animation: none;
}

html[data-theme="dark"] .emp-row {
    background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.emp-row-avatar {
    position: absolute;
    z-index: 3;
    top: 31px;
    inset-inline-start: auto;
    left: 50%;
    right: auto;
    grid-column: auto;
    grid-row: auto;
    width: 68px;
    height: 68px;
    border: 4px solid var(--panel) !important;
    outline: 2px solid var(--emp-tone);
    outline-offset: -1px;
    background: var(--panel);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--emp-tone) 25%, transparent);
    font-size: 21px;
    transform: translateX(-50%);
}

.emp-row:hover .emp-row-avatar {
    transform: translateX(-50%) translateY(-2px) scale(1.04);
}

.emp-row-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: auto;
    grid-row: auto;
    text-align: center;
}

.emp-row-name-line {
    justify-content: center;
    gap: 7px;
}

.emp-row-name {
    font-size: 15.5px;
}

.emp-row-id {
    order: -1;
}

.emp-row-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
}

.emp-row-meta-item {
    min-width: 0;
    justify-content: center;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--emp-tone) 13%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--emp-tint) 42%, var(--panel));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-row-meta-item i {
    width: auto;
    height: auto;
    background: transparent;
}

.emp-row-status {
    width: 100%;
    margin-top: auto;
    padding: 8px 12px;
    justify-content: center;
    border-radius: 11px;
}

.emp-row-chevron {
    display: none !important;
}

.emp-row:hover {
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .emp-list-section-icon,
    .emp-row {
        animation: none !important;
        transition: none !important;
    }
}


.employee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 10px;
    margin: 0 -10px;
    border-radius: var(--r-sm);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s ease;
}

.employee-row:hover {
    background: var(--panel-2);
}

.employee-row:last-child {
    border-bottom: none;
}

.employee-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.employee-avatar {
    width: 42px;
    height: 42px;
    font-size: 16px;
}

.employee-name {
    font-size: 14.5px;
    font-weight: 700;
}

.employee-status {
    font-size: 12.5px;
    color: var(--text2);
    margin-top: 2px;
    display: block;
}

.employee-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.employee-row.long-shift-alert {
    background: var(--danger);
    border-radius: var(--r-sm);
    padding: 12px 10px;
    margin: 4px -10px;
    border-bottom: none;
    animation: longShiftPulse 2s ease-in-out infinite;
}

.employee-row.long-shift-alert:hover {
    background: var(--danger);
}

.employee-row.long-shift-alert .employee-name,
.employee-row.long-shift-alert .employee-status {
    color: #fff;
}

@keyframes longShiftPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224,120,90,.4); }
    50% { box-shadow: 0 0 0 6px rgba(224,120,90,0); }
}

.employee-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.photo-upload-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.photo-upload {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--panel-2);
    border: 1.5px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    color: var(--text2);
}

.photo-upload i {
    font-size: 28px;
}

.photo-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card {
    padding: 18px 20px;
}

.acct-full-profile-btn {
    width: 100%;
    margin-top: 14px;
    justify-content: space-between;
}

.acct-full-profile-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acct-full-profile-arrow {
    font-size: 17px;
    transition: transform .18s ease;
}

.acct-full-profile-btn:hover .acct-full-profile-arrow {
    transform: translateX(-4px);
}

html[dir="rtl"] .acct-full-profile-btn:hover .acct-full-profile-arrow {
    transform: translateX(4px);
}

.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.profile-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 240px;
}

.profile-action-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    width: 196px;
}

.profile-rail-btn {
    width: 100%;
    justify-content: space-between;
    border-radius: 12px;
    animation: till2Rise .4s cubic-bezier(.22,1,.36,1) both;
}

.profile-rail-btn:nth-child(1) { animation-delay: 80ms; }
.profile-rail-btn:nth-child(2) { animation-delay: 140ms; }
.profile-rail-btn:nth-child(3) { animation-delay: 200ms; }
.profile-rail-btn:nth-child(4) { animation-delay: 260ms; }

.profile-rail-btn.btn-excel {
    justify-content: flex-start;
    gap: 8px;
    font-weight: 700;
}

.profile-rail-btn .acct-full-profile-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-rail-btn--primary {
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    border: 1px solid color-mix(in srgb, var(--accent-solid) 30%, transparent);
    font-weight: 800;
}

.profile-rail-btn--primary:hover {
    background: var(--accent-bg);
    color: var(--accent-ink);
    border-color: transparent;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-solid) 30%, transparent);
}

.profile-rail-btn--primary:hover .acct-full-profile-arrow {
    transform: translateX(-4px);
}

html[dir="rtl"] .profile-rail-btn--primary:hover .acct-full-profile-arrow {
    transform: translateX(4px);
}

/* System history — sales-detail visual language with its own amber identity. */
.system-history-shell { --history-tone:#D88908; --history-deep:#A85B00; --history-soft:#FFF6DF; display:grid; gap:16px; }
.system-history-back { --history-tone:#D88908; --history-deep:#A85B00; --history-soft:#FFF6DF; }
.system-history-back .profile-back-btn { margin-bottom:14px; color:var(--history-deep); border-color:rgba(216,137,8,.28); background:var(--theme-glass, rgba(255,246,223,.8)); }
.system-history-head { position:relative; overflow:hidden; min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; border:1px solid rgba(216,137,8,.24); border-radius:22px; background:radial-gradient(80% 220% at 96% -55%,rgba(245,166,35,.25),transparent 58%),linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.94)),var(--theme-glass, rgba(255,247,226,.78))); box-shadow:0 18px 40px rgba(168,91,0,.12),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)); }
.system-history-head::after { content:''; position:absolute; inset-inline-start:20px; bottom:-1px; width:132px; height:4px; border-radius:999px; background:linear-gradient(90deg,var(--history-tone),var(--history-deep)); }
.system-history-heading { position:relative; z-index:1; display:flex; align-items:center; gap:14px; min-width:0; }
.system-history-heading-icon { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border:1px solid var(--theme-stroke, rgba(255,255,255,.35)); border-radius:17px; color:#fff; background:linear-gradient(145deg,#F5A623,var(--history-deep)); box-shadow:0 12px 24px rgba(168,91,0,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3)); font-size:25px; }
.system-history-heading h2 { margin:0; color:var(--theme-ink, #553000); font-size:20px; line-height:1.5; }
.system-history-heading p { margin:4px 0 0; color:var(--theme-ink, #79572B); font-size:12.5px; line-height:1.7; }
.system-history-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:9px; }
.system-history-actions .btn { min-height:42px; border-radius:12px; }
.system-history-test-btn { color:var(--history-deep); border:1px solid rgba(216,137,8,.34); background:var(--theme-glass, rgba(255,255,255,.72)); }
.system-history-test-btn:hover { background:var(--history-soft); border-color:var(--history-tone); }
.system-history-export-btn { color:#fff; border:1px solid transparent; background:linear-gradient(135deg,#F5A623,var(--history-deep)); box-shadow:0 9px 20px rgba(168,91,0,.2); }
.system-history-export-btn:hover { box-shadow:0 12px 26px rgba(168,91,0,.28); }
.system-history-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.system-history-stats>div { --stat-tone:var(--history-tone); --stat-soft:var(--history-soft); position:relative; overflow:hidden; min-height:104px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 11px; padding:17px; border:1px solid color-mix(in srgb,var(--stat-tone) 20%,var(--border)); border-radius:18px; background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--stat-soft) 48%,var(--panel))); box-shadow:var(--shadow-card); animation:fadeSlideIn .4s cubic-bezier(.4,0,.2,1) both; }
.system-history-stats>div::after { content:''; position:absolute; inset-inline:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--stat-tone),transparent 88%); }
.system-history-stats>div:nth-child(2){animation-delay:45ms}.system-history-stats>div:nth-child(3){animation-delay:90ms}.system-history-stats>div:nth-child(4){animation-delay:135ms}
.system-history-stats .is-total { --stat-tone:var(--history-tone); --stat-soft:#FFF6DF; }
.system-history-stats .is-danger { --stat-tone:var(--danger); --stat-soft:var(--danger-bg); }
.system-history-stats .is-success { --stat-tone:var(--success); --stat-soft:var(--success-bg); }
.system-history-stats .is-warning { --stat-tone:var(--warning); --stat-soft:var(--warning-bg); }
.system-history-stats i { grid-row:1/3; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:var(--stat-tone); background:var(--stat-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stat-tone) 14%,transparent); font-size:21px; }
.system-history-stats span { color:var(--text2); font-size:12px; font-weight:750; }
.system-history-stats strong { color:var(--text1); font-size:24px; line-height:1; }
.system-history-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; border:1px solid rgba(216,137,8,.18); border-radius:17px; background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--history-soft) 44%,var(--panel))); box-shadow:var(--shadow-card); }
.system-history-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.system-history-tabs button { --tab-tone:var(--history-tone); --tab-soft:var(--history-soft); min-height:40px; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid transparent; border-radius:11px; color:var(--text2); background:transparent; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.system-history-tabs .is-actions { --tab-tone:#4F6FE8; --tab-soft:rgba(79,111,232,.12); }
.system-history-tabs .is-storage { --tab-tone:var(--success); --tab-soft:var(--success-bg); }
.system-history-tabs .is-errors { --tab-tone:var(--danger); --tab-soft:var(--danger-bg); }
.system-history-tabs .is-backend { --tab-tone:#7C5CFC; --tab-soft:rgba(124,92,252,.14); }
.system-history-tabs button:hover,.system-history-tabs button.active { color:var(--tab-tone); border-color:color-mix(in srgb,var(--tab-tone) 30%,var(--border)); background:var(--tab-soft); }
.system-history-tabs button.active { box-shadow:0 6px 14px color-mix(in srgb,var(--tab-tone) 14%,transparent); }
.system-history-search { width:min(390px,100%); min-height:42px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid rgba(216,137,8,.22); border-radius:12px; color:var(--history-deep); background:color-mix(in srgb,var(--history-soft) 55%,var(--panel)); }
.system-history-search:focus-within { border-color:var(--history-tone); box-shadow:0 0 0 3px rgba(216,137,8,.13); }
.system-history-search input { width:100%; border:0; outline:0; color:var(--text1); background:transparent; font:inherit; font-size:12.5px; }
.system-history-feed { overflow:hidden; border:1px solid rgba(216,137,8,.18); border-radius:19px; background:var(--panel); box-shadow:var(--shadow-card); }
.system-history-feed-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; border-bottom:1px solid rgba(216,137,8,.16); background:linear-gradient(135deg,color-mix(in srgb,var(--history-soft) 72%,var(--panel)),var(--panel)); }
.system-history-feed-head>span { display:flex; align-items:center; gap:8px; color:var(--history-deep); font-size:14px; font-weight:850; }
.system-history-feed-head>span i { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:var(--history-tone); background:var(--history-soft); }
.system-history-feed-head small { padding:4px 9px; border-radius:999px; color:var(--history-deep); background:var(--history-soft); font-weight:750; }
.system-history-list { display:grid; gap:9px; padding:13px; }
.system-event { display:grid; grid-template-columns:44px minmax(0,1fr); gap:13px; padding:14px; border:1px solid color-mix(in srgb,var(--event-tone) 17%,var(--border)); border-inline-start:1px solid var(--border); border-radius:15px; background:linear-gradient(110deg,color-mix(in srgb,var(--event-tone) 4%,var(--panel)),var(--panel)); box-shadow:0 5px 16px rgba(20,24,60,.045); animation:fadeSlideIn .3s ease both; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.system-event:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--event-tone) 34%,var(--border)); box-shadow:0 10px 24px color-mix(in srgb,var(--event-tone) 9%,transparent); }
.system-event-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; font-size:20px; }
.system-event-main { min-width:0; }
.system-event-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.system-event-title strong { color:var(--text1); font-size:13.5px; line-height:1.7; overflow-wrap:anywhere; }
.system-event-status { flex:0 0 auto; padding:3px 8px; border-radius:999px; color:var(--success); background:var(--success-bg); font-size:10.5px; font-weight:850; }
.system-event-status.is-attempted { color:var(--accent-solid); background:var(--accent-tint-bg); }
.system-event-status.is-failed { color:var(--danger); background:var(--danger-bg); }
.system-event-status.is-blocked { color:var(--warning); background:var(--warning-bg); }
.system-event-meta { display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:7px; color:var(--text2); font-size:11.5px; }
.system-event-meta span { display:inline-flex; align-items:center; gap:5px; }
.system-event code { display:inline-block; max-width:100%; margin-top:9px; padding:4px 7px; border:1px solid var(--border); border-radius:7px; color:var(--text2); background:var(--panel-2); direction:ltr; font:10.5px ui-monospace,SFMono-Regular,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.system-event p { margin:8px 0 0; color:var(--text2); font-size:12px; overflow-wrap:anywhere; }
.system-history-empty { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px dashed rgba(216,137,8,.35); border-radius:15px; color:var(--theme-ink, #8A642D); background:color-mix(in srgb,var(--history-soft) 55%,var(--panel)); }
.system-history-empty i { font-size:30px; color:var(--history-tone); }
html[data-theme="dark"] .system-history-shell { --history-soft:rgba(216,137,8,.12); }
html[data-theme="dark"] .system-history-head { background:radial-gradient(80% 220% at 96% -55%,rgba(216,137,8,.18),transparent 58%),linear-gradient(135deg,rgba(31,35,42,.96),rgba(45,36,22,.88)); box-shadow:0 18px 40px rgba(0,0,0,.28); }
html[data-theme="dark"] .system-history-heading h2 { color:#FFD892; }
html[data-theme="dark"] .system-history-heading p { color:#D8BE91; }

@media (max-width:900px) {
    .system-history-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .system-history-head,.system-history-toolbar { align-items:stretch; flex-direction:column; }
    .system-history-search { width:100%; }
}
@media (max-width:520px) {
    .system-history-stats { grid-template-columns:1fr; }
    .system-history-actions { display:grid; grid-template-columns:1fr; }
    .system-history-heading { align-items:flex-start; }
    .system-history-heading-icon { width:44px; height:44px; flex-basis:44px; font-size:21px; }
    .system-history-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .system-history-tabs button { justify-content:center; }
    .system-history-feed-head { align-items:flex-start; flex-direction:column; }
    .system-event { grid-template-columns:36px minmax(0,1fr); padding:11px; }
    .system-event-icon { width:36px; height:36px; font-size:17px; }
    .system-event-title { flex-direction:column; gap:5px; }
}

.profile-rail-btn--secondary {
    background: var(--panel);
    color: var(--text1);
    border: 1px solid var(--border-strong);
    font-weight: 700;
    justify-content: flex-start;
    gap: 8px;
}

.profile-rail-btn--secondary:hover {
    background: var(--panel-2);
    border-color: var(--accent-solid);
    color: var(--accent-solid);
}

.profile-rail-btn--tertiary {
    background: transparent;
    color: var(--text2);
    border: 1px dashed var(--border-strong);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    justify-content: flex-start;
    gap: 8px;
}

.profile-rail-btn--tertiary i {
    font-size: 15px;
}

.profile-rail-btn--tertiary:hover {
    color: var(--text1);
    border-color: var(--text2);
    background: var(--panel-2);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .profile-action-rail {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-rail-btn {
        animation: none;
    }
}

.profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(20,24,60,0.12), 0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, var(--accent-solid) 30%, transparent);
    animation: profitIconPop .45s cubic-bezier(.34,1.56,.64,1) both;
}

@media (prefers-reduced-motion: reduce) {
    .profile-avatar {
        animation: none;
    }
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 19px;
    font-weight: 700;
}

.profile-id {
    font-size: 12px;
    color: var(--text2);
    margin-top: 2px;
}

.profile-sub {
    font-size: 13.5px;
    color: var(--text2);
    margin-top: 3px;
}

.profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 12px 6px 10px;
    animation: till2Rise .4s cubic-bezier(.22,1,.36,1) both;
}

.profile-meta-item:nth-child(1) { animation-delay: 60ms; }
.profile-meta-item:nth-child(2) { animation-delay: 110ms; }
.profile-meta-item:nth-child(3) { animation-delay: 160ms; }
.profile-meta-item:nth-child(4) { animation-delay: 210ms; }
.profile-meta-item:nth-child(5) { animation-delay: 260ms; }
.profile-meta-item:nth-child(6) { animation-delay: 310ms; }

.profile-meta-item.is-off {
    filter: opacity(.6);
}

.profile-meta-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.profile-meta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-meta-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text2);
    opacity: .8;
    line-height: 1.1;
}

.profile-meta-value {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text1);
    line-height: 1.2;
    white-space: nowrap;
    margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-meta-item {
        animation: none;
    }
}

.profile-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.profile-status-row .pump-status-pill {
    margin-bottom: 0;
}

.section-title-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.section-title-icon i {
    font-size: 19px;
    color: var(--accent-solid);
}

.profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.handover-outstanding-note {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--danger-bg);
    color: var(--theme-ink, #8A3420);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}

html[data-theme="dark"] .handover-outstanding-note {
    color: #FFC9BA;
}

.handover-outstanding-note i {
    font-size: 18px;
    flex-shrink: 0;
    animation: alertIconPulse 1.8s ease-in-out infinite;
}

.handover-outstanding-note b {
    font-weight: 700;
}

/* ---------- account ledger (customer / employee profile) ---------- */

.acct-ledger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.acct-ledger-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.acct-pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text1);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.acct-pill-btn:hover {
    background: var(--panel-2);
    transform: translateY(-1px);
}

.acct-pill-btn.btn-excel {
    color: var(--theme-ink, #1D6F42);
    background: rgba(29,111,66,0.10);
    border-color: rgba(29,111,66,0.25);
}

.acct-pill-btn.btn-excel:hover {
    background: #1D6F42;
    color: #fff;
    border-color: #1D6F42;
}

html[data-theme="dark"] .acct-pill-btn.btn-excel {
    color: #4CBE84;
    background: rgba(76,190,132,0.14);
    border-color: rgba(76,190,132,0.30);
}

html[data-theme="dark"] .acct-pill-btn.btn-excel:hover {
    background: #2E8B57;
    border-color: #2E8B57;
    color: #08160F;
}

.acct-pill-btn-solid {
    background: var(--accent-tint-bg);
    border-color: transparent;
    color: var(--accent-solid);
}

.acct-ledger-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 10px;
    color: var(--text2);
    font-size: 13px;
}

.acct-ledger-empty i {
    font-size: 26px;
    opacity: 0.6;
}

.modal h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- period ledger table (final design) ---------- */

.ledger-card {
    padding: 18px 20px;
    margin: 20px 0;
}

.ledger-period-info {
    min-width: 0;
}

.ledger-period-title {
    font-weight: 800;
    font-size: 15px;
    color: var(--text1);
}

.ledger-period-range {
    font-size: 12px;
    color: var(--text2);
    margin-top: 3px;
}

.ledger-table-wrap {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-top: 4px;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}

.ledger-table th {
    background: var(--panel-2);
    color: var(--text2);
    font-weight: 700;
    font-size: 12px;
    padding: 10px 12px;
    text-align: right;
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.ledger-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    color: var(--text1);
    vertical-align: middle;
}

.ledger-table tbody tr:hover {
    background: var(--panel-2);
}

.ledger-seq {
    color: var(--text2);
    font-weight: 700;
    width: 32px;
}

.ledger-date-cell {
    white-space: nowrap;
    color: var(--text2);
    font-size: 12.5px;
}

.ledger-by-cell {
    color: var(--text2);
    font-size: 12.5px;
    white-space: nowrap;
}

.ledger-status-cell {
    font-weight: 600;
    white-space: nowrap;
    font-size: 12.5px;
}

.ledger-status-cell.is-debt {
    color: var(--danger);
}

.ledger-status-cell.is-paid {
    color: var(--success);
}

.ledger-card.is-closed {
    opacity: 0.94;
}

.ledger-amount-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    white-space: nowrap;
}

.ledger-amount-cell.is-debt {
    color: var(--danger);
}

.ledger-amount-cell.is-paid {
    color: var(--success);
}

.ledger-row-opening td {
    background: var(--warning-bg);
}

.ledger-empty-cell {
    padding: 0;
}

.ledger-total-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 12px;
    border-radius: var(--r-sm);
    flex-wrap: wrap;
}

.ledger-total-row.is-debt {
    background: var(--danger-bg);
}

.ledger-total-row.is-credit,
.ledger-total-row.is-settled {
    background: var(--success-bg);
}

.ledger-total-label {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--text1);
}

.ledger-total-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: var(--panel);
}

.ledger-total-row.is-debt .ledger-total-badge {
    color: var(--danger);
}

.ledger-total-row.is-credit .ledger-total-badge,
.ledger-total-row.is-settled .ledger-total-badge {
    color: var(--success);
}

.ledger-total-amount {
    margin-inline-start: auto;
    font-weight: 800;
    font-size: 15px;
}

.ledger-total-row.is-debt .ledger-total-amount {
    color: var(--danger);
}

.ledger-total-row.is-credit .ledger-total-amount,
.ledger-total-row.is-settled .ledger-total-amount {
    color: var(--success);
}

.ledger-history-title {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 14px;
}

html[data-theme="dark"] .ledger-total-row.is-debt .ledger-total-badge,
html[data-theme="dark"] .ledger-total-row.is-debt .ledger-total-amount {
    color: #FFC9BA;
}

html[data-theme="dark"] .ledger-total-row.is-credit .ledger-total-badge,
html[data-theme="dark"] .ledger-total-row.is-settled .ledger-total-badge,
html[data-theme="dark"] .ledger-total-row.is-credit .ledger-total-amount,
html[data-theme="dark"] .ledger-total-row.is-settled .ledger-total-amount {
    color: #A9EFC5;
}

@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .tank-flat-grid,
    #pumpGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .app {
        flex-direction: column;
    }

    .dash-bottom-grid {
        grid-template-columns: 1fr;
    }

    .finance-grid {
        grid-template-columns: 1fr;
    }

    .grid3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .tank-flat-grid,
    #pumpGrid {
        grid-template-columns: 1fr;
    }

    .top-bar-hamburger {
        display: flex;
    }

    .top-bar-spacer {
        display: none;
    }

    .top-bar {
        border-radius: 0;
        margin: 0;
        top: 0;
        border-inline-start: none;
        border-inline-end: none;
        border-top: none;
    }

    .sidebar {
        display: none;
        position: static;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
        max-height: none;
    }

    .sidebar.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 73px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 45;
        max-height: calc(100vh - 75px);
        overflow-y: auto;
        box-shadow: 0 16px 40px rgba(31,38,135,0.18);
    }

    html[data-theme="dark"] .sidebar.mobile-open {
        box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    }

    .main {
        padding: 18px;
    }

    .shortcuts-row {
        grid-template-columns: repeat(2,1fr);
    }

    .tanks-topbar-btns {
        width: 100%;
    }

    .employee-row {
        flex-wrap: wrap;
    }

    .employee-row-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .profile-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 400px) {
    .fuel-tile-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal {
        padding: 18px;
    }

    .sort-wrap {
        flex-wrap: wrap;
    }

    .sort-wrap .select-wrap {
        min-width: 0;
        width: 100%;
    }
}

.receipt {
    max-width: 320px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'IRANSans', sans-serif;
    color: var(--theme-ink, #000);
    background: var(--theme-surface, #fff);
}

.receipt-brand {
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}

.receipt-meta {
    text-align: center;
    font-size: 12.5px;
    color: var(--theme-ink, #444);
    margin-bottom: 2px;
}

.receipt-txn {
    text-align: center;
    font-size: 12px;
    color: var(--theme-ink, #444);
    margin-bottom: 14px;
}

.receipt-divider {
    border-top: 1px dashed #999;
    margin: 10px 0;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 5px 0;
}

.receipt-total {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    padding-top: 8px;
}

/* Shared thermal sale receipt: content changes with the active language, never the sale record. */
.receipt--thermal { width:72mm; max-width:100%; box-sizing:border-box; padding:5mm 4mm; color:#000; background:#fff; font-size:11px; line-height:1.55; text-align:start; }
.receipt--thermal .receipt-head { text-align:center; }.receipt--thermal .receipt-logo { display:block; max-width:42mm; max-height:18mm; width:auto; height:auto; margin:0 auto 2mm; object-fit:contain; }.receipt-station-local { font-size:14px; font-weight:700; unicode-bidi:isolate; }.receipt-station-en { margin-top:1mm; direction:ltr; font:600 10px Arial,sans-serif; unicode-bidi:isolate; }.receipt--thermal .receipt-title { margin:3mm 0 1mm; font-size:14px; text-align:center; }.receipt--thermal .receipt-date { text-align:center; font-size:10px; }.receipt--thermal .receipt-row,.receipt--thermal .receipt-total { gap:8px; padding:1.5mm 0; }.receipt--thermal .receipt-total { font-size:13px; border-top:1px solid #000; }.receipt--thermal .receipt-track { margin-top:3mm; padding:2mm 0; border-top:1px dashed #000; text-align:center; }.receipt--thermal .receipt-track span,.receipt--thermal .receipt-track strong { display:block; }.receipt--thermal .receipt-track strong { margin-top:1mm; letter-spacing:1px; }.receipt-ltr { direction:ltr; unicode-bidi:isolate; font-family:Arial,sans-serif; font-variant-numeric:tabular-nums; }.receipt--thermal .receipt-footer { margin-top:3mm; padding-top:2mm; border-top:1px dashed #000; text-align:center; font-size:10px; }.receipt-thanks { margin-top:3mm; font-weight:700; }
.receipt--thermal { width:80mm; padding:5mm 5mm 6mm; font-size:12px; line-height:1.6; }.receipt--thermal .receipt-logo { max-width:40mm; max-height:28mm; margin-bottom:2.5mm; }.receipt-station-local { font-size:17px; line-height:1.35; }.receipt-station-en { font-size:12px; }.receipt--thermal .receipt-title { margin:4mm 0 3mm; font-size:21px; }.receipt-date-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2mm; margin:0 0 3mm; text-align:center; }.receipt-date-grid > div { display:grid; justify-items:center; gap:1mm; min-width:0; }.receipt-date-grid span { font-size:10px; font-weight:700; }.receipt-date-grid i { font-size:20px; line-height:1; }.receipt-date-grid b { font-size:10px; font-weight:600; white-space:nowrap; }.receipt--thermal .receipt-row,.receipt--thermal .receipt-total { align-items:center; padding:2.8mm 1mm; border-bottom:1px solid #a7a7a7; }.receipt--thermal .receipt-row span,.receipt--thermal .receipt-total span { display:inline-flex; align-items:center; gap:2mm; font-weight:700; }.receipt--thermal .receipt-row i,.receipt--thermal .receipt-total i { font-size:18px; }.receipt--thermal .receipt-row b { font-size:14px; }.receipt-divider--solid { border-top:2px solid #000; margin:0; }.receipt--thermal .receipt-total { border-bottom:0; font-size:16px; }.receipt--thermal .receipt-total strong { font-size:20px; }.receipt--thermal .receipt-track { margin-top:3mm; padding:3mm 0; border-bottom:1px dashed #000; }.receipt-qr-token { display:none; }.receipt--thermal .receipt-footer { display:grid; gap:2mm; margin-top:3mm; padding-top:3mm; border-top:0; text-align:start; font-size:11px; }.receipt--thermal .receipt-footer > div:not(.receipt-thanks) { display:flex; align-items:flex-start; gap:2mm; }.receipt--thermal .receipt-footer i { flex:0 0 auto; font-size:17px; }.receipt-thanks { margin:2mm 0 0; padding-top:3mm; border-top:2px solid #000; text-align:center; font-size:13px; }
@media print { @page { size:80mm auto; margin:0; } body > *:not(#receiptTemplate) { display:none !important; } #receiptTemplate { display:block !important; } .receipt--thermal { width:80mm; margin:0; padding:5mm; box-shadow:none; } }
@media print and (max-width:60mm) { @page { size:58mm auto; } .receipt--thermal { width:58mm; padding:3mm; font-size:10px; }.receipt--thermal .receipt-title { font-size:17px; }.receipt-station-local { font-size:14px; }.receipt-date-grid { gap:1mm; }.receipt-date-grid i { font-size:16px; }.receipt-date-grid b { font-size:8px; }.receipt--thermal .receipt-row,.receipt--thermal .receipt-total { padding:2mm 0; }.receipt--thermal .receipt-row b { font-size:11px; }.receipt--thermal .receipt-total strong { font-size:15px; } }

/* A print SVG is stored inline; its wrapper needs explicit dimensions just like raster images. */
.receipt--thermal { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
.receipt--thermal .receipt-logo { display:block; width:auto; max-width:100%; height:auto; max-height:52px; margin:0 auto 8px; object-fit:contain; }
.receipt--thermal .receipt-logo.custom-logo-svg { width:min(180px,100%); height:52px; }
.receipt--thermal .receipt-logo.custom-logo-svg svg { display:block; width:100%; height:100%; max-height:52px; margin:auto; }

/* SUNMI V3: 58mm roll, about 48mm reliably printable. */
.receipt--thermal { width:48mm; max-width:48mm; min-height:0; margin:12px auto; padding:3mm 2mm 4mm; font-size:10px; line-height:1.45; box-shadow:none; }
.receipt--thermal .receipt-logo { max-width:44mm; max-height:52px; margin:0 auto 5px; }
.receipt--thermal .receipt-title { margin:3mm 0 2mm; font-size:17px; }
.receipt-date-grid { gap:1mm; }.receipt-date-grid span { font-size:8px; }.receipt-date-grid i { font-size:15px; }.receipt-date-grid b { font-size:8px; }
.receipt--thermal .receipt-row,.receipt--thermal .receipt-total { padding:1.7mm 0; }.receipt--thermal .receipt-row i,.receipt--thermal .receipt-total i { font-size:14px; }.receipt--thermal .receipt-row b { font-size:11px; }.receipt--thermal .receipt-total { font-size:12px; }.receipt--thermal .receipt-total strong { font-size:16px; }.receipt--thermal .receipt-footer { font-size:9px; }.receipt-thanks { font-size:11px; }
.receipt--thermal .receipt-footer > div:not(.receipt-thanks)::before { content:''; width:12px; height:12px; flex:0 0 12px; background:#000; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }.receipt--thermal .receipt-footer > div:nth-child(1)::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E"); }.receipt--thermal .receipt-footer > div:nth-child(2)::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.7 5.1 6.5 6.5l2.2-2.2c.3-.3.7-.4 1-.3c1.1.4 2.3.6 3.5.6c.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.5 21 3 13.5 3 4.2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1c0 1.2.2 2.4.6 3.5c.1.3 0 .7-.3 1z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.7 5.1 6.5 6.5l2.2-2.2c.3-.3.7-.4 1-.3c1.1.4 2.3.6 3.5.6c.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.5 21 3 13.5 3 4.2c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1c0 1.2.2 2.4.6 3.5c.1.3 0 .7-.3 1z'/%3E%3C/svg%3E"); }
@media print { @page { size:58mm auto; margin:0; } .receipt--thermal { width:48mm; max-width:48mm; margin:0; padding:3mm 2mm 4mm; } }

/* Keep the browser preview centered at the same SUNMI V3 printable width. */
#receiptTemplate { width:48mm; max-width:48mm; margin:0 auto; direction:inherit; }
#receiptTemplate .receipt--thermal { width:48mm; max-width:48mm; margin:12px auto; padding:3mm 2mm 4mm; font-size:10px; line-height:1.45; }
#receiptTemplate .receipt-station-local { font-size:14px; } #receiptTemplate .receipt-station-en { font-size:9px; }
#receiptTemplate .receipt--thermal .receipt-title { font-size:16px; margin:8px 0 7px; }
#receiptTemplate .receipt-number { margin:-2px 0 8px; text-align:center; font:700 9px/1.2 Arial,sans-serif; letter-spacing:.6px; direction:ltr; unicode-bidi:isolate; }
#receiptTemplate .receipt-date-grid span { font-size:8px; } #receiptTemplate .receipt-date-grid b { font-size:8px; }
#receiptTemplate .receipt--thermal .receipt-row { font-size:10px; } #receiptTemplate .receipt--thermal .receipt-row b { font-size:11px; }
#receiptTemplate .receipt--thermal .receipt-total { font-size:11px; } #receiptTemplate .receipt--thermal .receipt-total strong { font-size:15px; }
#receiptTemplate .receipt-value-with-unit { display:inline-flex; align-items:baseline; gap:2px; white-space:nowrap; font:inherit; unicode-bidi:isolate; }
#receiptTemplate .receipt-value-with-unit[dir="rtl"] { flex-direction:row; }
#receiptTemplate .receipt-value-unit { font-size:8px; font-weight:700; line-height:1; }
#receiptTemplate .receipt--thermal .receipt-row b { font-size:10px; }
#receiptTemplate .receipt--thermal .receipt-total { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; font-size:11px; }
#receiptTemplate .receipt--thermal .receipt-total > span { min-width:0; flex:1 1 auto; white-space:nowrap; }
#receiptTemplate .receipt--thermal .receipt-total strong { flex:0 0 auto; font-size:11px; white-space:nowrap; }
#receiptTemplate .receipt--thermal .receipt-footer { justify-items:center; text-align:center; font-size:9px; }
#receiptTemplate .receipt--thermal .receipt-footer > div:not(.receipt-thanks) { justify-content:center; align-items:center; }
#receiptTemplate .receipt--thermal .receipt-footer .receipt-contact { display:flex; align-items:baseline; justify-content:center; gap:3px; width:100%; text-align:center; }
#receiptTemplate .receipt--thermal .receipt-footer > div::before { content:none !important; display:none !important; }
#receiptTemplate .receipt--thermal .receipt-footer .receipt-contact > i { flex:0 0 auto; font-size:12px; line-height:1; }
#receiptTemplate .receipt-contact-divider { width:100%; margin:2mm 0; border-top:1px dashed #000; }
html[lang="fa"] #receiptTemplate .receipt--thermal { font-family:'IRANSans', sans-serif; }
#receiptTemplate .receipt-thanks { font-size:11px; }

/* Slightly larger, bolder thermal type improves legibility on printed receipts. */
#receiptTemplate .receipt--thermal { font-size:11px; line-height:1.55; font-weight:600; }
#receiptTemplate .receipt--thermal .receipt-logo { max-height:104px; margin-bottom:10px; }
#receiptTemplate .receipt--thermal .receipt-logo.custom-logo-svg { width:min(360px,100%); height:104px; }
#receiptTemplate .receipt-station-local { font-size:15px; font-weight:800; }
#receiptTemplate .receipt-station-en { font-size:10px; font-weight:700; }
#receiptTemplate .receipt--thermal .receipt-title { font-size:18px; font-weight:800; }
#receiptTemplate .receipt-number { font-size:10px; font-weight:800; }
#receiptTemplate .receipt-qr { display:grid; justify-items:center; gap:2px; margin:0 auto 8px; text-align:center; color:#000; }
#receiptTemplate .receipt-qr img { display:block; width:27mm; height:27mm; object-fit:contain; image-rendering:pixelated; }
#receiptTemplate .receipt-qr span { font-size:8px; font-weight:700; }
#receiptTemplate .receipt-qr strong { font:800 9px/1.2 Arial,sans-serif; letter-spacing:.7px; unicode-bidi:isolate; }
#receiptTemplate .receipt-date-grid span { font-size:9px; font-weight:800; }
#receiptTemplate .receipt-date-grid b { font-size:10px; font-weight:700; }
#receiptTemplate .receipt--thermal .receipt-row { font-size:11px; font-weight:800; }
#receiptTemplate .receipt--thermal .receipt-row b { font-size:11px; font-weight:700; }
#receiptTemplate .receipt--thermal .receipt-total { font-size:12px; font-weight:800; }
#receiptTemplate .receipt--thermal .receipt-total strong { font-size:12px; font-weight:800; }
#receiptTemplate .receipt-value-unit { font-size:9px; }
#receiptTemplate .receipt--thermal .receipt-footer { font-size:10px; font-weight:700; }
#receiptTemplate .receipt-thanks { font-size:12px; font-weight:800; }
@media print { #receiptTemplate { width:48mm; max-width:48mm; margin:0 auto; } #receiptTemplate .receipt--thermal { width:48mm; max-width:48mm; margin:0 auto; } }

/* Browser PDF must use the same narrow physical stock as the SUNMI V3. */
@media print {
  @page { size:58mm auto; margin:0; }
  html, body { width:58mm !important; min-width:58mm !important; margin:0 !important; padding:0 !important; background:#fff !important; }
  body > *:not(.receipt-print-container) { display:none !important; }
  .receipt-print-container { display:block !important; width:58mm !important; max-width:58mm !important; margin:0 !important; padding:0 !important; background:#fff !important; }
  .receipt-print-container .receipt--thermal { width:48mm !important; max-width:48mm !important; min-height:0 !important; height:auto !important; margin:0 auto !important; padding:2mm !important; box-sizing:border-box !important; box-shadow:none !important; background:#fff !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

/* Keep the SUNMI receipt width, centered on whichever paper the browser printer uses. */
@media print {
  @page { size:auto; margin:0; }
  html, body { width:auto !important; min-width:0 !important; }
  .receipt-print-container { width:58mm !important; max-width:100% !important; margin:0 auto !important; }
  .receipt-print-container .receipt--thermal { width:48mm !important; max-width:calc(100% - 4mm) !important; margin:0 auto !important; }
}

/* ---------- professional debt-payment receipt ---------- */
.pro-receipt {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 36px 32px;
    font-family: 'IRANSans', sans-serif;
    color: var(--theme-ink, #211D16);
    background: var(--theme-surface, #F4EEDF);
    border: 1px solid #CDC1A4;
    direction: rtl;
}

.pro-receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 20px;
}

.pro-receipt-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: var(--theme-ink, #AE1F2C);
}

.pro-receipt-title small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--theme-ink, #6B6150);
}

.pro-receipt-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro-receipt-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.pro-receipt-brand-name {
    font-size: 15.5px;
    font-weight: 800;
}

.pro-receipt-brand-sub {
    font-size: 11px;
    color: var(--theme-ink, #6B6150);
}

.pro-receipt-rule {
    height: 2px;
    background: #211D16;
    opacity: .85;
}

.pro-receipt-meta {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.pro-receipt-meta .col { display: flex; flex-direction: column; gap: 6px; }
.pro-receipt-meta .col.end { align-items: flex-end; text-align: left; }
.pro-receipt-meta .k { color: var(--theme-ink, #6B6150); }
.pro-receipt-meta .v { font-weight: 700; }

.pro-receipt-verify {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 18px;
    padding: 8px 12px;
    background: rgba(174, 31, 44, .08);
    border: 1px dashed rgba(174, 31, 44, .4);
    font-size: 11px;
    color: var(--theme-ink, #6B6150);
    line-height: 1.7;
}

.pro-receipt-verify b {
    color: var(--theme-ink, #AE1F2C);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.pro-receipt-verify-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #AE1F2C;
}

.pro-receipt-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-bottom: 20px;
}

.pro-receipt-block-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    border-bottom: 1px solid #CDC1A4;
    padding-bottom: 6px;
    margin-bottom: 9px;
}

.pro-receipt-block-lines {
    font-size: 12.5px;
    line-height: 1.9;
}

.pro-receipt-block-lines .muted { color: var(--theme-ink, #6B6150); font-size: 11px; }

.pro-receipt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.pro-receipt-table th {
    text-align: right;
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--theme-ink, #6B6150);
    font-weight: 700;
    padding: 0 4px 9px;
    border-bottom: 2px solid #211D16;
}

.pro-receipt-table th.num, .pro-receipt-table td.num { text-align: left; }

.pro-receipt-table td {
    padding: 12px 4px;
    border-bottom: 1px solid #CDC1A4;
}

.pro-receipt-row-desc { font-weight: 600; }
.pro-receipt-row-sub { color: var(--theme-ink, #6B6150); font-size: 11px; margin-top: 2px; }

.pro-receipt-totals { display: flex; flex-direction: column; }

.pro-receipt-total-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 4px;
    font-size: 12.5px;
    border-bottom: 1px solid #CDC1A4;
    font-variant-numeric: tabular-nums;
}

.pro-receipt-total-row .k { color: var(--theme-ink, #6B6150); }

.pro-receipt-total-row.grand {
    border-bottom: none;
    border-top: 2px solid #211D16;
    margin-top: 2px;
    padding-top: 13px;
    font-size: 17px;
    font-weight: 800;
}

.pro-receipt-total-row.grand .k { color: var(--theme-ink, #211D16); font-weight: 800; }
.pro-receipt-total-row.grand .v { color: var(--theme-ink, #AE1F2C); }

.pro-receipt-foot {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    padding-top: 24px;
    margin-top: 20px;
    border-top: 1px solid #CDC1A4;
}

.pro-receipt-foot-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.pro-receipt-foot-note {
    font-size: 11px;
    color: var(--theme-ink, #6B6150);
    line-height: 1.9;
}

.pro-receipt-sign { text-align: left; }

.pro-receipt-sign-line {
    margin-top: 28px;
    border-top: 1px solid #211D16;
    padding-top: 6px;
    font-size: 10.5px;
    color: var(--theme-ink, #6B6150);
}

.pro-receipt-attachment-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 0 0;
    page-break-before: always;
}

.pro-receipt-attachment-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-ink, #211D16);
    margin-bottom: 10px;
}

.pro-receipt-attachment-img {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 1px solid #CDC1A4;
}

.ledger-row-receipt-btn {
    margin-inline-start: 8px;
    font-size: 11.5px;
    color: var(--accent-solid);
    cursor: pointer;
    white-space: nowrap;
}

.ledger-row-receipt-btn:hover { text-decoration: underline; }

/* ---------- reports ---------- */
.empty-state-text {
    padding: 20px 0;
    color: var(--text2);
    font-size: 13px;
    text-align: center;
}

#view-reports-financial .sd-toolbar {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(90,114,217,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(243,247,255,.54)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-financial .sd-toolbar .page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#view-reports-financial .reports-title-cluster { position:relative; display:flex; align-items:center; gap:9px; }
#view-reports-financial .reports-title-help { position:relative; z-index:12; }
#view-reports-financial .reports-title-help summary { list-style:none; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(15,118,110,.24); border-radius:12px; color:var(--theme-ink, #0F766E); background:var(--theme-glass, rgba(228,247,244,.82)); box-shadow:0 8px 18px rgba(15,118,110,.12); cursor:pointer; transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease; }
#view-reports-financial .reports-title-help summary::-webkit-details-marker { display:none; }
#view-reports-financial .reports-title-help summary i { font-size:20px; animation:reportHelpBreathe 2.8s ease-in-out infinite; }
#view-reports-financial .reports-title-help summary:hover,
#view-reports-financial .reports-title-help[open] summary { color:#fff; background:#0F766E; transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,118,110,.24); }
#view-reports-financial .reports-title-help summary:focus-visible { outline:3px solid rgba(15,118,110,.28); outline-offset:2px; }
#view-reports-financial .reports-title-help-popover { position:absolute; inset-inline-start:0; top:calc(100% + 10px); width:min(360px,calc(100vw - 48px)); padding:13px 15px; border:1px solid rgba(15,118,110,.19); border-radius:16px; color:var(--theme-ink, #183b38); background:var(--theme-glass, rgba(248,255,254,.96)); box-shadow:0 20px 45px rgba(22,58,71,.18); backdrop-filter:blur(18px); transform-origin:top right; animation:reportHelpReveal .22s cubic-bezier(.2,.8,.2,1) both; }
#view-reports-financial .reports-title-help-popover::before { content:''; position:absolute; top:-6px; inset-inline-start:12px; width:11px; height:11px; border-inline-start:1px solid rgba(15,118,110,.19); border-top:1px solid rgba(15,118,110,.19); background:var(--theme-glass, rgba(248,255,254,.96)); transform:rotate(45deg); }
#view-reports-financial .reports-title-help-popover strong,
#view-reports-financial .reports-title-help-popover span { display:block; }
#view-reports-financial .reports-title-help-popover strong { font-size:13px; font-weight:950; }
#view-reports-financial .reports-title-help-popover span { margin-top:4px; color:var(--theme-ink, #536c69); font-size:12px; font-weight:750; line-height:1.8; }
@keyframes reportHelpBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.13)} }
@keyframes reportHelpReveal { from{opacity:0;transform:translateY(-7px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

#view-reports-financial .sd-toolbar .page-title::before {
    content: "\ea99";
    font-family: "tabler-icons";
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0F766E, #18A090);
    box-shadow: 0 12px 24px rgba(15,118,110,.24);
}

#view-reports-financial .sd-toolbar .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(90,114,217,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-financial .sd-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#view-reports-financial .sd-nav-card {
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(90,114,217,.15), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(243,247,255,.52)));
    box-shadow: 0 20px 42px rgba(31,48,74,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-financial .reports-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-reports-financial .reports-mode-tab {
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-size: 13px;
    font-weight: 900;
}

#view-reports-financial .reports-mode-tab i {
    font-size: 18px;
}

#view-reports-financial .reports-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #5A72D9, #755AD8);
    box-shadow: 0 12px 24px rgba(90,114,217,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-reports-financial .reports-calendar-help,
#view-reports-financial .reports-multiday-hint,
#view-reports-financial .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    background: var(--theme-glass, rgba(255,255,255,.56));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-financial .reports-calendar-help i,
#view-reports-financial .report-chart-help i {
    color: var(--theme-ink, #5A72D9);
    font-size: 17px;
}

#view-reports-financial .sd-nav-header {
    min-height: 42px;
    margin-bottom: 8px;
}

#view-reports-financial .date-picker-nav {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(85,122,180,.18);
    box-shadow: 0 8px 18px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-financial .date-picker-weekdays {
    padding: 7px 8px;
    margin-bottom: 7px;
    border-radius: 13px;
    color: var(--theme-ink, rgba(19,35,61,.64));
    background: var(--theme-glass, rgba(255,255,255,.42));
    font-weight: 900;
}

#view-reports-financial .cal-grid {
    gap: 6px;
}

#view-reports-financial .reports-cal-cell,
#view-reports-financial .reports-month-cell,
#view-reports-financial .reports-year-cell {
    border: 1px solid transparent;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-reports-financial .reports-cal-cell:hover,
#view-reports-financial .reports-month-cell:hover,
#view-reports-financial .reports-year-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(90,114,217,.28);
    background: var(--theme-glass, rgba(231,236,255,.72));
}

#view-reports-financial .reports-cal-cell.has-report-data:not(.today),
#view-reports-financial .reports-month-cell.has-report-data:not(.active) {
    color: var(--theme-ink, #4966D7);
    background: var(--theme-glass, rgba(231,236,255,.62));
}

#view-reports-financial .reports-cal-cell.today,
#view-reports-financial .reports-month-cell.active,
#view-reports-financial .reports-year-cell.active {
    color: #fff;
    background: linear-gradient(135deg, #5A72D9, #755AD8);
    box-shadow: 0 12px 22px rgba(90,114,217,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.22));
}

#view-reports-financial .cal-cell .dot,
#view-reports-financial .sd-month-cell .dot {
    width: 6px;
    height: 6px;
    background: #2FA96D;
    box-shadow: 0 0 0 4px rgba(47,169,109,.12);
}

#view-reports-financial .cal-cell.today .dot,
#view-reports-financial .sd-month-cell.active .dot {
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

#view-reports-financial .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(47,169,109,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(239,250,248,.55)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-financial .reports-simple-guide > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #1F7A4C);
    background: var(--theme-glass, rgba(222,248,234,.86));
    box-shadow: 0 10px 20px rgba(47,169,109,.13);
    font-size: 22px;
}

#view-reports-financial .reports-simple-guide strong,
#view-reports-financial .reports-simple-guide span {
    display: block;
}

#view-reports-financial .reports-simple-guide strong {
    color: var(--theme-ink, #13233D);
    font-size: 14px;
    font-weight: 950;
}

#view-reports-financial .reports-simple-guide span {
    margin-top: 3px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.7;
}

#view-reports-financial .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #4966D7);
    background: var(--theme-glass, rgba(231,236,255,.74));
    font-size: 13px;
}

#view-reports-financial .reports-finance-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reports-export-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    margin-inline-start: auto;
    border: 1px solid color-mix(in srgb, var(--reports-context-tone, #0F766E) 24%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    box-shadow: 0 12px 28px rgba(31,48,74,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(16px) saturate(145%);
}

.reports-export-btn {
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 12px;
    color: var(--reports-context-tone, var(--theme-ink, #0F766E));
    background: transparent;
    font-weight: 900;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.reports-export-btn i { color: currentColor; font-size: 19px; }
.reports-export-btn:hover { background: color-mix(in srgb, var(--reports-context-tone, #0F766E) 11%, white); }
.reports-export-btn.is-print {
    color: #fff;
    background: var(--reports-context-tone, #0F766E);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--reports-context-tone, #0F766E) 28%, transparent);
}
.reports-export-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--reports-context-tone, #0F766E) 35%, white); outline-offset: 2px; }

#view-reports-financial .report-audit-card {
    border: 1px solid rgba(15,118,110,.18);
    border-radius: 22px;
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.82)), var(--theme-glass, rgba(232,248,245,.62)));
    box-shadow: 0 18px 38px rgba(15,118,110,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-reports-financial .report-audit-card .section-title-icon i { color:#fff; background:linear-gradient(135deg,#0F766E,#199789); }
.report-audit-note { margin:0 0 14px; color:var(--text2); font-size:13px; line-height:1.8; }
.report-reconciliation-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.report-reconciliation-item { display:flex; flex-direction:column; gap:5px; padding:13px; border-radius:15px; background:var(--theme-glass, rgba(255,255,255,.67)); border:1px solid rgba(15,118,110,.13); }
.report-reconciliation-item span { color:var(--text2); font-size:12px; font-weight:800; }
.report-reconciliation-item b { color:var(--theme-ink, #0F766E); font-size:15px; }
.report-reconciliation-item.is-credit b { color:var(--theme-ink, #5A72D9); }
.report-accounting-equations { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.report-accounting-equations span { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:12px; background:rgba(15,118,110,.08); color:var(--theme-ink, #315d59); font-size:12px; font-weight:800; }

#view-reports-financial .report-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 152px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:15px;
    border: 1px solid color-mix(in srgb,var(--report-tone) 18%,var(--theme-stroke, rgba(255,255,255,.78)));
    background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.84)),color-mix(in srgb,var(--report-tone) 6%,var(--theme-glass, rgba(245,250,252,.76))));
    box-shadow:0 16px 34px rgba(31,48,74,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease;
}

#view-reports-financial .report-kpi-card::before { content:''; position:absolute; inset-block:14px; inset-inline-start:0; width:3px; border-radius:999px; background:var(--report-tone); opacity:.82; ;display:none!important;}
#view-reports-financial .report-kpi-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--report-tone) 34%,white); box-shadow:0 22px 42px color-mix(in srgb,var(--report-tone) 12%,rgba(31,48,74,.12)),inset 0 1px 0 var(--theme-highlight, #fff); }

#view-reports-financial .report-kpi-card::after {
    content: "";
    position: absolute;
    inset-inline-end:-42px;
    bottom:-58px;
    width:132px;
    height:132px;
    border-radius: 999px;
    opacity:.11;
    background: var(--report-tone, #5A72D9);
}

#view-reports-financial .report-kpi-card.is-sale { --report-tone: #5A72D9; }
#view-reports-financial .report-kpi-card.is-cash { --report-tone: #2FA96D; }
#view-reports-financial .report-kpi-card.is-expense { --report-tone: #E0785A; }
#view-reports-financial .report-kpi-card.is-profit { --report-tone: #1F9D6C; }
#view-reports-financial .report-kpi-card.is-loss { --report-tone: #D6472E; }

#view-reports-financial .report-kpi-card .metric-icon {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--report-tone) 18%,white);
    border-radius:14px;
    color: var(--report-tone);
    background:color-mix(in srgb,var(--report-tone) 11%,white);
    box-shadow:0 8px 18px color-mix(in srgb,var(--report-tone) 13%,transparent);
}

#view-reports-financial .report-kpi-card .metric-icon i { font-size:21px; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
#view-reports-financial .report-kpi-card:hover .metric-icon i { transform:translateY(-2px) rotate(-4deg); }
#view-reports-financial .report-kpi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#view-reports-financial .report-kpi-change { display:inline-flex; align-items:center; gap:3px; padding:5px 7px; border-radius:999px; color:var(--report-tone); background:color-mix(in srgb,var(--report-tone) 9%,white); font-size:11px; font-weight:900; direction:ltr; }
#view-reports-financial .report-kpi-change i { font-size:14px; }
#view-reports-financial .report-kpi-body { position:relative; z-index:1; margin-top:12px; }
#view-reports-financial .report-kpi-card .metric-label { color:var(--theme-ink, #53616f); font-size:12.5px; font-weight:850; }

#view-reports-financial .report-kpi-card .metric-value {
    display:flex;
    align-items:baseline;
    gap:5px;
    margin-top:5px;
    color: var(--report-tone);
    font-size:24px;
    line-height:1.2;
    font-weight:950;
}
#view-reports-financial .report-kpi-card .metric-value small { color:var(--theme-ink, #6b7785); font-size:11px; font-weight:800; }
#view-reports-financial .report-kpi-foot { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:9px; border-top:1px dashed color-mix(in srgb,var(--report-tone) 18%,transparent); color:var(--theme-ink, #71808d); font-size:10.5px; font-weight:750; }
#view-reports-financial .report-kpi-foot i { color:var(--report-tone); font-size:14px; }

#view-reports-financial .report-chart-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(90,114,217,.13), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(246,248,255,.54)));
    box-shadow: 0 20px 42px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-financial .report-chart-card .section-title-icon {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    font-weight: 950;
}

#view-reports-financial .report-chart-card .section-title-icon i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0F766E, #18A090);
    box-shadow: 0 11px 22px rgba(15,118,110,.20);
}

#view-reports-financial .report-insights {
    padding: 14px;
    border: 1px solid rgba(15,118,110,.17);
    border-radius: 24px;
    background: linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.67)),var(--theme-glass, rgba(230,247,244,.48)));
    box-shadow: 0 20px 42px rgba(31,48,74,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-reports-financial .report-insights-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:1px 2px 12px; }
#view-reports-financial .report-insights-head strong,
#view-reports-financial .report-insights-head span { display:block; }
#view-reports-financial .report-insights-head strong { color:var(--theme-ink, #13233D); font-size:16px; font-weight:950; }
#view-reports-financial .report-insights-head span { margin-top:2px; color:var(--text2); font-size:12px; font-weight:750; }
#view-reports-financial .report-insights-head > i { color:var(--theme-ink, #0F766E); font-size:25px; }
#view-reports-financial .report-insight-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:12px; padding:5px; border:1px solid rgba(15,118,110,.12); border-radius:16px; background:var(--theme-glass, rgba(255,255,255,.54)); }
#view-reports-financial .report-insight-tab { min-height:54px; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; border:0; border-radius:12px; color:var(--theme-ink, #41605d); background:transparent; font:inherit; font-size:12px; font-weight:850; cursor:pointer; transition:background-color .2s ease,color .2s ease,box-shadow .2s ease; }
#view-reports-financial .report-insight-tab i { flex:0 0 auto; color:var(--theme-ink, #0F766E); font-size:19px; }
#view-reports-financial .report-insight-tab:hover { background:rgba(15,118,110,.08); }
#view-reports-financial .report-insight-tab.active { color:#fff; background:linear-gradient(135deg,#0F766E,#168f83); box-shadow:0 8px 18px rgba(15,118,110,.20); }
#view-reports-financial .report-insight-tab.active i { color:#fff; }
#view-reports-financial .report-insight-tab:focus-visible { outline:3px solid rgba(15,118,110,.28); outline-offset:2px; }
#view-reports-financial .report-insight-panel { margin:0; }

@media print {
    #reportPrintTemplate .report-insight-tabs,
    #reportPrintTemplate .report-insights-head { display:none !important; }
    #reportPrintTemplate .report-insight-panel[hidden] { display:block !important; }
    #reportPrintTemplate .report-insight-panel + .report-insight-panel { margin-top:16px !important; }
}

.gbar-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.gbar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text2);
}

.gbar-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.gbar-swatch.is-a {
    background: linear-gradient(180deg, #6FA8FF, #4F6EF7);
}

.gbar-swatch.is-b {
    background: linear-gradient(180deg, #FBBF24, #F59E0B);
}

.gbar-chart {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    height: 170px;
    padding-top: 18px;
    overflow-x: auto;
}

.gbar-group {
    flex: 1;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 8px;
}

.gbar-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 130px;
    width: 100%;
}

.gbar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
    width: 22px;
}

.gbar-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
}

.gbar-value {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text2);
    white-space: nowrap;
}

.gbar-value.is-a {
    color: var(--theme-ink, #4F6EF7);
}

.gbar-value.is-b {
    color: var(--theme-ink, #D97706);
}

html[data-theme="dark"] .gbar-value.is-a {
    color: #8FAFFF;
}

html[data-theme="dark"] .gbar-value.is-b {
    color: #FBBF24;
}

.gbar-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.gbar-fill {
    width: 100%;
    height: 0;
    min-height: 4px;
    border-radius: 6px 6px 2px 2px;
    transition: height .8s cubic-bezier(.4,0,.2,1);
}

.gbar-fill.is-a {
    background: linear-gradient(180deg, #6FA8FF, #4F6EF7);
}

.gbar-fill.is-b {
    background: linear-gradient(180deg, #FBBF24, #F59E0B);
}

.gbar-label {
    font-size: 11px;
    color: var(--text2);
    white-space: nowrap;
}

#view-reports-financial .trend-chart-dark {
    padding: 18px 16px 42px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    border-radius: 18px;
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.70)), var(--theme-glass, rgba(242,247,255,.48))),
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(90,114,217,.055) 39px 40px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
}

#view-reports-financial .trend-chart-svg {
    height: 240px;
}

#view-reports-financial .trend-grid-line {
    stroke: rgba(85,122,180,.20);
}

#view-reports-financial .trend-axis-label,
#view-reports-financial .trend-chart-x-labels span {
    fill: rgba(19,35,61,.60);
    color: var(--theme-ink, rgba(19,35,61,.64));
    font-weight: 900;
}

#view-reports-financial .trend-line {
    stroke-width: 4;
    filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--trend-color) 28%, transparent));
}

#view-reports-financial .trend-highlight-dot {
    stroke: #fff;
    stroke-width: 3;
}

#view-reports-financial .trend-highlight-label {
    font-size: 12px;
    stroke: rgba(255,255,255,.92);
    stroke-width: 4px;
}

#view-reports-financial .trend-chart-legend {
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

#view-reports-financial .trend-legend-item {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--theme-ink, rgba(19,35,61,.72));
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    font-weight: 900;
}

#view-reports-financial .finance-week-chart {
    min-height: 210px;
    height: 230px;
    align-items: flex-end;
    gap: 14px;
    padding: 22px 10px 4px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(242,247,255,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(85,122,180,.08) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-financial .week-bar-col {
    min-width: 74px;
    padding: 0 8px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.36));
}

#view-reports-financial .week-bar-value {
    min-height: 18px;
    color: var(--theme-ink, #13233D);
    font-size: 12px;
    font-weight: 950;
}

#view-reports-financial .week-bar-track {
    max-width: 44px;
    height: 132px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(85,122,180,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-financial .week-bar-fill {
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 8px 16px rgba(31,48,74,.16), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    transition: height 1s cubic-bezier(.22,1,.36,1);
}

#view-reports-financial .week-bar-fill.fuel-petrol {
    background: linear-gradient(180deg, #FFB648, #FF8F1F);
}

#view-reports-financial .week-bar-fill.fuel-diesel {
    background: linear-gradient(180deg, #43D486, #19A765);
}

#view-reports-financial .week-bar-fill.fuel-cng {
    background: linear-gradient(180deg, #5AB5FF, #2478E0);
}

#view-reports-financial .week-bar-label {
    color: var(--theme-ink, rgba(19,35,61,.72));
    font-size: 12.5px;
    font-weight: 950;
}

#view-reports-financial .donut-wrap {
    align-items: center;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-financial .donut-chart {
    width: 190px;
    height: 190px;
    box-shadow:0 22px 42px rgba(31,48,74,.14),0 0 0 8px var(--theme-highlight, rgba(255,255,255,.45)),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.65));
}

#view-reports-financial .donut-legend {
    gap: 9px;
}

#view-reports-financial .donut-legend-row {
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    padding:11px 12px 16px;
    border-radius: 15px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    border:1px solid color-mix(in srgb,var(--segment-color) 14%,var(--theme-stroke, rgba(255,255,255,.72)));
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#view-reports-financial .donut-legend-row:hover { transform:translateX(-3px); border-color:color-mix(in srgb,var(--segment-color) 35%,white); box-shadow:0 9px 20px color-mix(in srgb,var(--segment-color) 10%,transparent); }
#view-reports-financial .donut-swatch { width:12px; height:12px; border-radius:4px; box-shadow:0 0 0 4px color-mix(in srgb,var(--segment-color) 12%,transparent); }

#view-reports-financial .donut-legend-label {
    color: var(--theme-ink, #13233D);
    font-weight: 900;
}

#view-reports-financial .donut-legend-value {
    display:flex;
    align-items:baseline;
    gap:8px;
    color:var(--theme-ink, rgba(19,35,61,.68));
    font-weight: 900;
}
#view-reports-financial .donut-legend-value b { min-width:35px; color:var(--segment-color); font-size:13px; }
#view-reports-financial .donut-legend-value span { font-size:11px; }
#view-reports-financial .donut-share-track { position:absolute; inset-inline:12px; bottom:7px; height:4px; overflow:hidden; border-radius:999px; background:rgba(26,45,65,.07); }
#view-reports-financial .donut-share-fill { display:block; width:var(--share); height:100%; min-width:7px; border-radius:inherit; background:var(--segment-color); box-shadow:0 0 10px color-mix(in srgb,var(--segment-color) 42%,transparent); transform-origin:right; animation:donutShareGrow .65s cubic-bezier(.2,.8,.2,1) var(--segment-delay) both; }
@keyframes donutShareGrow { from{transform:scaleX(0);opacity:.35} to{transform:scaleX(1);opacity:1} }

#view-reports-financial .gbar-legend {
    justify-content: center;
    gap: 10px;
}

#view-reports-financial .gbar-legend-item {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--theme-ink, rgba(19,35,61,.72));
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    font-weight: 900;
}

#view-reports-financial .gbar-chart {
    height: 250px;
    gap: 14px;
    padding: 20px 10px 8px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(242,247,255,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(85,122,180,.08) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-financial .gbar-group {
    min-width: 100px;
    padding: 9px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.38));
}

#view-reports-financial .gbar-values {
    min-height: 36px;
}

#view-reports-financial .gbar-value {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    font-size: 11.5px;
    font-weight: 950;
}

#view-reports-financial .gbar-bars {
    height: 148px;
    gap: 9px;
}

#view-reports-financial .gbar-col {
    width: 30px;
}

#view-reports-financial .gbar-track {
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(85,122,180,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-financial .gbar-fill {
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 8px 16px rgba(31,48,74,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    transition: height 1s cubic-bezier(.22,1,.36,1);
}

#view-reports-financial .gbar-label {
    color: var(--theme-ink, #13233D);
    font-size: 12.5px;
    font-weight: 950;
}

@media (max-width: 1100px) {
    #view-reports-financial .reports-finance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #view-reports-financial .sd-layout {
        grid-template-columns: 1fr;
    }
    #view-reports-financial .sd-nav-card {
        position: static;
    }
}

@media (max-width: 640px) {
    #view-reports-financial .sd-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    #view-reports-financial .sd-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    #view-reports-financial .reports-mode-tabs,
    #view-reports-financial .reports-finance-summary {
        grid-template-columns: 1fr;
    }
    .reports-export-actions { width:100%; }
    .reports-export-btn { flex:1; justify-content:center; }
    .report-reconciliation-grid { grid-template-columns:1fr 1fr; }
    #view-reports-financial .report-insight-tabs { grid-template-columns:1fr 1fr; }
    #view-reports-financial .report-insight-tab { justify-content:flex-start; }
    #view-reports-financial .reports-simple-guide {
        grid-template-columns: 1fr;
        text-align: center;
    }
    #view-reports-financial .reports-simple-guide > i {
        margin: 0 auto;
    }
    #view-reports-financial .finance-week-chart,
    #view-reports-financial .gbar-chart {
        overflow-x: auto;
    }
    #view-reports-financial .donut-wrap {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-financial .reports-title-help summary i { animation:none; }
    #view-reports-financial .reports-title-help-popover { animation:none; }
    #view-reports-financial .donut-chart,
    #view-reports-financial .donut-share-fill { animation:none; }
    #view-reports-financial .week-bar-fill,
    #view-reports-financial .gbar-fill,
    #view-reports-financial .reports-cal-cell,
    #view-reports-financial .reports-month-cell,
    #view-reports-financial .reports-year-cell {
        transition: none !important;
    }
}

/* ---------- reports: shift & pump page uses the same low-literacy visual language ---------- */
#view-reports-shift .sd-toolbar {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(47,169,109,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(239,250,248,.54)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-shift .sd-toolbar .page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#view-reports-shift .reports-title-cluster { position:relative; display:flex; align-items:center; gap:9px; }
#view-reports-shift .reports-title-help { position:relative; z-index:12; }
#view-reports-shift .reports-title-help summary { list-style:none; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(8,145,178,.25); border-radius:12px; color:var(--theme-ink, #087f9b); background:var(--theme-glass, rgba(226,247,251,.88)); cursor:pointer; box-shadow:0 8px 18px rgba(8,145,178,.13); }
#view-reports-shift .reports-title-help summary::-webkit-details-marker{display:none}
#view-reports-shift .reports-title-help summary i{font-size:20px;animation:reportHelpBreathe 2.8s ease-in-out infinite}
#view-reports-shift .reports-title-help[open] summary,#view-reports-shift .reports-title-help summary:hover{color:#fff;background:#0891B2}
#view-reports-shift .reports-title-help-popover{position:absolute;inset-inline-start:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 48px));padding:13px 15px;border:1px solid rgba(8,145,178,.2);border-radius:16px;background:var(--theme-glass, rgba(248,254,255,.97));box-shadow:0 20px 45px rgba(22,58,71,.18);animation:reportHelpReveal .22s cubic-bezier(.2,.8,.2,1) both}
#view-reports-shift .reports-title-help-popover strong,#view-reports-shift .reports-title-help-popover span{display:block}#view-reports-shift .reports-title-help-popover strong{color:var(--theme-ink, #0b5263);font-size:13px}#view-reports-shift .reports-title-help-popover span{margin-top:4px;color:var(--theme-ink, #587078);font-size:12px;line-height:1.8}

#view-reports-shift .reports-shift-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
#view-reports-shift .shift-kpi-card{--shift-tone:#0891B2;position:relative;overflow:hidden;min-height:125px;display:flex;flex-direction:column;justify-content:space-between;padding:14px;border:1px solid color-mix(in srgb,var(--shift-tone) 18%,white);background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.84)),color-mix(in srgb,var(--shift-tone) 6%,var(--theme-glass, rgba(245,250,252,.76))));box-shadow:0 16px 34px rgba(31,48,74,.09);transition:transform .24s ease,box-shadow .24s ease}
#view-reports-shift .shift-kpi-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px color-mix(in srgb,var(--shift-tone) 13%,transparent)}
#view-reports-shift .shift-kpi-card.is-sales{--shift-tone:#087f9b}#view-reports-shift .shift-kpi-card.is-pumps{--shift-tone:#0e9f8a}#view-reports-shift .shift-kpi-card.is-shifts{--shift-tone:#4778d8}#view-reports-shift .shift-kpi-card.is-hours{--shift-tone:#7b61c9}
#view-reports-shift .shift-kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:var(--shift-tone);background:color-mix(in srgb,var(--shift-tone) 11%,white);font-size:21px;box-shadow:0 8px 18px color-mix(in srgb,var(--shift-tone) 14%,transparent)}
#view-reports-shift .shift-kpi-card span{display:block;margin-top:9px;color:var(--theme-ink, #5b6976);font-size:12px;font-weight:850}#view-reports-shift .shift-kpi-card strong{display:flex;align-items:baseline;gap:5px;margin-top:4px;color:var(--shift-tone);font-size:22px;font-weight:950}#view-reports-shift .shift-kpi-card strong small{color:var(--theme-ink, #74808b);font-size:10px}.shift-kpi-mark{position:absolute;inset-inline-end:12px;top:14px;color:color-mix(in srgb,var(--shift-tone) 40%,transparent);font-size:21px}
#view-reports-shift .shift-insights{padding:14px;border:1px solid rgba(8,145,178,.17);border-radius:24px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.68)),var(--theme-glass, rgba(229,247,251,.5)));box-shadow:0 20px 42px rgba(31,48,74,.09)}
#view-reports-shift .shift-insights-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}#view-reports-shift .shift-insights-head strong,#view-reports-shift .shift-insights-head span{display:block}#view-reports-shift .shift-insights-head strong{color:var(--theme-ink, #153244);font-size:16px}#view-reports-shift .shift-insights-head span{margin-top:2px;color:var(--text2);font-size:12px}#view-reports-shift .shift-insights-head>i{color:var(--theme-ink, #0891B2);font-size:25px}
#view-reports-shift .shift-insight-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;padding:5px;border:1px solid rgba(8,145,178,.12);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.56))}
#view-reports-shift .shift-insight-tab{min-height:52px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border:0;border-radius:12px;color:var(--theme-ink, #46636a);background:transparent;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.shift-insight-tab i{color:var(--theme-ink, #0891B2);font-size:19px}#view-reports-shift .shift-insight-tab.active{color:#fff;background:linear-gradient(135deg,#0891B2,#0e9f8a);box-shadow:0 8px 18px rgba(8,145,178,.22)}#view-reports-shift .shift-insight-tab.active i{color:#fff}#view-reports-shift .shift-insight-panel{margin:0}

@media(max-width:1100px){#view-reports-shift .reports-shift-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#view-reports-shift .reports-shift-summary{grid-template-columns:1fr}#view-reports-shift .shift-insight-tabs{grid-template-columns:1fr}#view-reports-shift .shift-insight-tab{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){#view-reports-shift .reports-title-help summary i,#view-reports-shift .reports-title-help-popover{animation:none!important}}

#view-reports-shift .sd-toolbar .page-title::before {
    content: "\ec7b";
    font-family: "tabler-icons";
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #2FA96D, #2C9EB8);
    box-shadow: 0 12px 24px rgba(47,169,109,.20);
}

#view-reports-shift .sd-toolbar .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(47,169,109,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-shift .sd-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#view-reports-shift .sd-nav-card {
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(47,169,109,.15), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(239,250,248,.52)));
    box-shadow: 0 20px 42px rgba(31,48,74,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-shift .reports-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-reports-shift .reports-mode-tab {
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-size: 13px;
    font-weight: 900;
}

#view-reports-shift .reports-mode-tab i {
    font-size: 18px;
}

#view-reports-shift .reports-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #2FA96D, #2C9EB8);
    box-shadow: 0 12px 24px rgba(47,169,109,.20), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-reports-shift .reports-calendar-help,
#view-reports-shift .reports-multiday-hint,
#view-reports-shift .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    background: var(--theme-glass, rgba(255,255,255,.56));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-shift .reports-calendar-help i,
#view-reports-shift .report-chart-help i {
    color: var(--theme-ink, #2FA96D);
    font-size: 17px;
}

#view-reports-shift .sd-nav-header {
    min-height: 42px;
    margin-bottom: 8px;
}

#view-reports-shift .date-picker-nav {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(47,169,109,.18);
    box-shadow: 0 8px 18px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-shift .date-picker-weekdays {
    padding: 7px 8px;
    margin-bottom: 7px;
    border-radius: 13px;
    color: var(--theme-ink, rgba(19,35,61,.64));
    background: var(--theme-glass, rgba(255,255,255,.42));
    font-weight: 900;
}

#view-reports-shift .cal-grid {
    gap: 6px;
}

#view-reports-shift .reports-cal-cell,
#view-reports-shift .reports-month-cell,
#view-reports-shift .reports-year-cell {
    border: 1px solid transparent;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-reports-shift .reports-cal-cell:hover,
#view-reports-shift .reports-month-cell:hover,
#view-reports-shift .reports-year-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(47,169,109,.28);
    background: var(--theme-glass, rgba(222,248,234,.68));
}

#view-reports-shift .reports-cal-cell.has-report-data:not(.today),
#view-reports-shift .reports-month-cell.has-report-data:not(.active) {
    color: var(--theme-ink, #24734D);
    background: var(--theme-glass, rgba(222,248,234,.62));
}

#view-reports-shift .reports-cal-cell.today,
#view-reports-shift .reports-month-cell.active,
#view-reports-shift .reports-year-cell.active {
    color: #fff;
    background: linear-gradient(135deg, #2FA96D, #2C9EB8);
    box-shadow: 0 12px 22px rgba(47,169,109,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.22));
}

#view-reports-shift .cal-cell .dot,
#view-reports-shift .sd-month-cell .dot {
    width: 6px;
    height: 6px;
    background: #5A72D9;
    box-shadow: 0 0 0 4px rgba(90,114,217,.12);
}

#view-reports-shift .cal-cell.today .dot,
#view-reports-shift .sd-month-cell.active .dot {
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

#view-reports-shift .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(47,169,109,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(239,250,248,.55)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-shift .reports-simple-guide > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #1F7A4C);
    background: var(--theme-glass, rgba(222,248,234,.86));
    box-shadow: 0 10px 20px rgba(47,169,109,.13);
    font-size: 22px;
}

#view-reports-shift .reports-simple-guide strong,
#view-reports-shift .reports-simple-guide span {
    display: block;
}

#view-reports-shift .reports-simple-guide strong {
    color: var(--theme-ink, #13233D);
    font-size: 14px;
    font-weight: 950;
}

#view-reports-shift .reports-simple-guide span {
    margin-top: 3px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.7;
}

#view-reports-shift .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #24734D);
    background: var(--theme-glass, rgba(222,248,234,.74));
    font-size: 13px;
}

#view-reports-shift .report-chart-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(47,169,109,.13), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(239,250,248,.54)));
    box-shadow: 0 20px 42px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-shift .report-chart-card .section-title-icon {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    font-weight: 950;
}

#view-reports-shift .report-chart-card .section-title-icon i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #2FA96D, #2C9EB8);
    box-shadow: 0 11px 22px rgba(47,169,109,.18);
}

#view-reports-shift .finance-week-chart {
    min-height: 210px;
    height: 230px;
    align-items: flex-end;
    gap: 14px;
    padding: 22px 10px 4px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(239,250,248,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(47,169,109,.075) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-shift .week-bar-col {
    min-width: 74px;
    padding: 0 8px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.36));
}

#view-reports-shift .week-bar-value {
    min-height: 18px;
    color: var(--theme-ink, #13233D);
    font-size: 12px;
    font-weight: 950;
}

#view-reports-shift .week-bar-track {
    max-width: 44px;
    height: 132px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(47,169,109,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-shift .week-bar-fill {
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #43D486, #19A765);
    box-shadow: 0 8px 16px rgba(31,48,74,.16), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    transition: height 1s cubic-bezier(.22,1,.36,1);
}

#view-reports-shift #reportEmpHoursChart .week-bar-fill {
    background: linear-gradient(180deg, #6FA8FF, #4F6EF7);
}

#view-reports-shift .week-bar-label {
    color: var(--theme-ink, rgba(19,35,61,.72));
    font-size: 12.5px;
    font-weight: 950;
}

#view-reports-shift .gbar-legend {
    justify-content: center;
    gap: 10px;
}

#view-reports-shift .gbar-legend-item {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--theme-ink, rgba(19,35,61,.72));
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    font-weight: 900;
}

#view-reports-shift .gbar-chart {
    height: 250px;
    gap: 14px;
    padding: 20px 10px 8px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(239,250,248,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(47,169,109,.075) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-shift .gbar-group {
    min-width: 100px;
    padding: 9px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.38));
}

#view-reports-shift .gbar-values {
    min-height: 36px;
}

#view-reports-shift .gbar-value {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    font-size: 11.5px;
    font-weight: 950;
}

#view-reports-shift .gbar-bars {
    height: 148px;
    gap: 9px;
}

#view-reports-shift .gbar-col {
    width: 30px;
}

#view-reports-shift .gbar-track {
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(47,169,109,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-shift .gbar-fill {
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 8px 16px rgba(31,48,74,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    transition: height 1s cubic-bezier(.22,1,.36,1);
}

#view-reports-shift .gbar-label {
    color: var(--theme-ink, #13233D);
    font-size: 12.5px;
    font-weight: 950;
}

@media (max-width: 900px) {
    #view-reports-shift .sd-layout {
        grid-template-columns: 1fr;
    }
    #view-reports-shift .sd-nav-card {
        position: static;
    }
}

@media (max-width: 640px) {
    #view-reports-shift .sd-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    #view-reports-shift .sd-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    #view-reports-shift .reports-mode-tabs {
        grid-template-columns: 1fr;
    }
    #view-reports-shift .reports-simple-guide {
        grid-template-columns: 1fr;
        text-align: center;
    }
    #view-reports-shift .reports-simple-guide > i {
        margin: 0 auto;
    }
    #view-reports-shift .finance-week-chart,
    #view-reports-shift .gbar-chart {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-shift .week-bar-fill,
    #view-reports-shift .gbar-fill,
    #view-reports-shift .reports-cal-cell,
    #view-reports-shift .reports-month-cell,
    #view-reports-shift .reports-year-cell {
        transition: none !important;
    }
}

/* ---------- reports: tanks/reserves page ---------- */
#view-reports-tanks .sd-toolbar {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(255,182,72,.18), transparent 58%),
        radial-gradient(70% 130% at 8% -10%, rgba(90,181,255,.14), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(255,249,238,.54)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-tanks .sd-toolbar .page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#view-reports-tanks .reports-title-cluster{position:relative;display:flex;align-items:center;gap:9px}#view-reports-tanks .reports-title-help{position:relative;z-index:12}#view-reports-tanks .reports-title-help summary{list-style:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(234,103,28,.25);border-radius:12px;color:var(--theme-ink, #d85f18);background:var(--theme-glass, rgba(255,240,229,.9));box-shadow:0 8px 18px rgba(234,103,28,.13);cursor:pointer}#view-reports-tanks .reports-title-help summary::-webkit-details-marker{display:none}#view-reports-tanks .reports-title-help summary i{font-size:20px;animation:reportHelpBreathe 2.8s ease-in-out infinite}#view-reports-tanks .reports-title-help[open] summary,#view-reports-tanks .reports-title-help summary:hover{color:#fff;background:#e86a22}#view-reports-tanks .reports-title-help-popover{position:absolute;inset-inline-start:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 48px));padding:13px 15px;border:1px solid rgba(234,103,28,.2);border-radius:16px;background:var(--theme-glass, rgba(255,252,249,.97));box-shadow:0 20px 45px rgba(72,46,30,.18);animation:reportHelpReveal .22s ease both}#view-reports-tanks .reports-title-help-popover strong,#view-reports-tanks .reports-title-help-popover span{display:block}#view-reports-tanks .reports-title-help-popover strong{color:var(--theme-ink, #7d3812)}#view-reports-tanks .reports-title-help-popover span{margin-top:4px;color:var(--theme-ink, #725f53);font-size:12px;line-height:1.8}
#view-reports-tanks .reports-tank-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}#view-reports-tanks .tank-kpi-card{--tank-tone:#e86a22;position:relative;overflow:hidden;min-height:125px;display:flex;flex-direction:column;justify-content:space-between;padding:14px;border:1px solid color-mix(in srgb,var(--tank-tone) 18%,white);background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.85)),color-mix(in srgb,var(--tank-tone) 6%,var(--theme-surface, #fff)));box-shadow:0 16px 34px rgba(50,38,28,.09);transition:transform .24s ease,box-shadow .24s ease}.tank-kpi-card:hover{transform:translateY(-4px);box-shadow:0 22px 42px color-mix(in srgb,var(--tank-tone) 13%,transparent)}#view-reports-tanks .tank-kpi-card.is-count{--tank-tone:#df6b25}#view-reports-tanks .tank-kpi-card.is-low{--tank-tone:#d6472e}#view-reports-tanks .tank-kpi-card.is-fill{--tank-tone:#238aab}#view-reports-tanks .tank-kpi-card.is-refill{--tank-tone:#1f9d78}#view-reports-tanks .tank-kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:var(--tank-tone);background:color-mix(in srgb,var(--tank-tone) 11%,white);font-size:21px;box-shadow:0 8px 18px color-mix(in srgb,var(--tank-tone) 14%,transparent)}#view-reports-tanks .tank-kpi-card span{display:block;margin-top:9px;color:var(--theme-ink, #655e59);font-size:12px;font-weight:850}#view-reports-tanks .tank-kpi-card strong{display:flex;align-items:baseline;gap:5px;margin-top:4px;color:var(--tank-tone);font-size:22px;font-weight:950}#view-reports-tanks .tank-kpi-card strong small{color:var(--theme-ink, #7f7771);font-size:10px}.tank-kpi-mark{position:absolute;inset-inline-end:12px;top:14px;color:color-mix(in srgb,var(--tank-tone) 40%,transparent);font-size:21px}
#view-reports-tanks .tank-insights{padding:14px;border:1px solid rgba(234,103,28,.17);border-radius:24px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.7)),var(--theme-glass, rgba(255,241,231,.52)));box-shadow:0 20px 42px rgba(50,38,28,.09)}#view-reports-tanks .tank-insights-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}#view-reports-tanks .tank-insights-head strong,#view-reports-tanks .tank-insights-head span{display:block}#view-reports-tanks .tank-insights-head strong{color:var(--theme-ink, #473126);font-size:16px}#view-reports-tanks .tank-insights-head span{margin-top:2px;color:var(--text2);font-size:12px}#view-reports-tanks .tank-insights-head>i{color:var(--theme-ink, #e86a22);font-size:25px}#view-reports-tanks .tank-insight-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px;padding:5px;border:1px solid rgba(234,103,28,.12);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.58))}#view-reports-tanks .tank-insight-tab{min-height:52px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border:0;border-radius:12px;color:var(--theme-ink, #6e5a4e);background:transparent;font:inherit;font-size:12px;font-weight:850;cursor:pointer}#view-reports-tanks .tank-insight-tab i{color:var(--theme-ink, #e86a22);font-size:19px}#view-reports-tanks .tank-insight-tab.active{color:#fff;background:linear-gradient(135deg,#e86a22,#f09a32);box-shadow:0 8px 18px rgba(234,103,28,.22)}#view-reports-tanks .tank-insight-tab.active i{color:#fff}#view-reports-tanks .tank-insight-panel{margin:0}
@media(max-width:1100px){#view-reports-tanks .reports-tank-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){#view-reports-tanks .reports-tank-summary{grid-template-columns:1fr}#view-reports-tanks .tank-insight-tabs{grid-template-columns:1fr 1fr}#view-reports-tanks .tank-insight-tab{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){#view-reports-tanks .reports-title-help summary i,#view-reports-tanks .reports-title-help-popover{animation:none!important}}

#view-reports-tanks .sd-toolbar .page-title::before {
    content: "\eb17";
    font-family: "tabler-icons";
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #FFB648, #2478E0);
    box-shadow: 0 12px 24px rgba(255,150,20,.18);
}

#view-reports-tanks .sd-toolbar .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(255,150,20,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-tanks .sd-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#view-reports-tanks .sd-nav-card {
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(255,182,72,.15), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(255,249,238,.52)));
    box-shadow: 0 20px 42px rgba(31,48,74,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-tanks .reports-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-reports-tanks .reports-mode-tab {
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-size: 13px;
    font-weight: 900;
}

#view-reports-tanks .reports-mode-tab i { font-size: 18px; }

#view-reports-tanks .reports-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #FFB648, #2478E0);
    box-shadow: 0 12px 24px rgba(255,150,20,.18), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-reports-tanks .reports-calendar-help,
#view-reports-tanks .reports-multiday-hint,
#view-reports-tanks .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    background: var(--theme-glass, rgba(255,255,255,.56));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-tanks .reports-calendar-help i,
#view-reports-tanks .report-chart-help i {
    color: var(--theme-ink, #D88412);
    font-size: 17px;
}

#view-reports-tanks .sd-nav-header {
    min-height: 42px;
    margin-bottom: 8px;
}

#view-reports-tanks .date-picker-nav {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(255,150,20,.20);
    box-shadow: 0 8px 18px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-tanks .date-picker-weekdays {
    padding: 7px 8px;
    margin-bottom: 7px;
    border-radius: 13px;
    color: var(--theme-ink, rgba(19,35,61,.64));
    background: var(--theme-glass, rgba(255,255,255,.42));
    font-weight: 900;
}

#view-reports-tanks .cal-grid { gap: 6px; }

#view-reports-tanks .reports-cal-cell,
#view-reports-tanks .reports-month-cell,
#view-reports-tanks .reports-year-cell {
    border: 1px solid transparent;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-reports-tanks .reports-cal-cell:hover,
#view-reports-tanks .reports-month-cell:hover,
#view-reports-tanks .reports-year-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(255,150,20,.30);
    background: var(--theme-glass, rgba(255,244,219,.72));
}

#view-reports-tanks .reports-cal-cell.has-report-data:not(.today),
#view-reports-tanks .reports-month-cell.has-report-data:not(.active) {
    color: var(--theme-ink, #B87518);
    background: var(--theme-glass, rgba(255,244,219,.65));
}

#view-reports-tanks .reports-cal-cell.today,
#view-reports-tanks .reports-month-cell.active,
#view-reports-tanks .reports-year-cell.active {
    color: #fff;
    background: linear-gradient(135deg, #FFB648, #2478E0);
    box-shadow: 0 12px 22px rgba(255,150,20,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.22));
}

#view-reports-tanks .cal-cell .dot,
#view-reports-tanks .sd-month-cell .dot {
    width: 6px;
    height: 6px;
    background: #2FA96D;
    box-shadow: 0 0 0 4px rgba(47,169,109,.12);
}

#view-reports-tanks .cal-cell.today .dot,
#view-reports-tanks .sd-month-cell.active .dot {
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

#view-reports-tanks .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(255,182,72,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(255,249,238,.55)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-tanks .reports-simple-guide > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #B87518);
    background: var(--theme-glass, rgba(255,244,219,.86));
    box-shadow: 0 10px 20px rgba(255,150,20,.13);
    font-size: 22px;
}

#view-reports-tanks .reports-simple-guide strong,
#view-reports-tanks .reports-simple-guide span { display: block; }

#view-reports-tanks .reports-simple-guide strong {
    color: var(--theme-ink, #13233D);
    font-size: 14px;
    font-weight: 950;
}

#view-reports-tanks .reports-simple-guide span {
    margin-top: 3px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.7;
}

#view-reports-tanks .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #B87518);
    background: var(--theme-glass, rgba(255,244,219,.78));
    font-size: 13px;
}

#view-reports-tanks .report-chart-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(255,182,72,.13), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(255,249,238,.54)));
    box-shadow: 0 20px 42px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-tanks .report-chart-card .section-title-icon {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    font-weight: 950;
}

#view-reports-tanks .report-chart-card .section-title-icon i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #FFB648, #2478E0);
    box-shadow: 0 11px 22px rgba(255,150,20,.16);
}

#view-reports-tanks .cap-bar-list {
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-tanks .cap-bar-row {
    padding: 12px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    box-shadow: 0 10px 22px rgba(31,48,74,.06), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-tanks .cap-bar-label {
    color: var(--theme-ink, #13233D);
    font-size: 13px;
    font-weight: 950;
}

#view-reports-tanks .cap-bar-value {
    color: var(--theme-ink, rgba(19,35,61,.66));
    font-size: 12px;
    font-weight: 900;
}

#view-reports-tanks .finance-week-chart,
#view-reports-tanks .gbar-chart {
    min-height: 210px;
    height: 230px;
    align-items: flex-end;
    gap: 14px;
    padding: 22px 10px 4px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(255,249,238,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,150,20,.075) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-tanks .week-bar-col,
#view-reports-tanks .gbar-group {
    min-width: 84px;
    padding: 0 8px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.36));
}

#view-reports-tanks .week-bar-value,
#view-reports-tanks .gbar-value {
    color: var(--theme-ink, #13233D);
    font-size: 12px;
    font-weight: 950;
}

#view-reports-tanks .week-bar-track,
#view-reports-tanks .gbar-track {
    max-width: 44px;
    height: 132px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(255,150,20,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-tanks .gbar-track { width: 100%; }
#view-reports-tanks .gbar-bars { height: 148px; gap: 9px; }
#view-reports-tanks .gbar-col { width: 30px; }

#view-reports-tanks .week-bar-label,
#view-reports-tanks .gbar-label {
    color: var(--theme-ink, rgba(19,35,61,.72));
    font-size: 12.5px;
    font-weight: 950;
}

#view-reports-tanks .gbar-legend {
    justify-content: center;
    gap: 10px;
}

#view-reports-tanks .gbar-legend-item {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--theme-ink, rgba(19,35,61,.72));
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    font-weight: 900;
}

@media (max-width: 900px) {
    #view-reports-tanks .sd-layout { grid-template-columns: 1fr; }
    #view-reports-tanks .sd-nav-card { position: static; }
}

@media (max-width: 640px) {
    #view-reports-tanks .sd-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    #view-reports-tanks .sd-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    #view-reports-tanks .reports-mode-tabs,
    #view-reports-tanks .reports-simple-guide {
        grid-template-columns: 1fr;
    }
    #view-reports-tanks .reports-simple-guide {
        text-align: center;
    }
    #view-reports-tanks .reports-simple-guide > i {
        margin: 0 auto;
    }
    #view-reports-tanks .finance-week-chart,
    #view-reports-tanks .gbar-chart {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-tanks .week-bar-fill,
    #view-reports-tanks .gbar-fill,
    #view-reports-tanks .cap-bar-fill,
    #view-reports-tanks .reports-cal-cell,
    #view-reports-tanks .reports-month-cell,
    #view-reports-tanks .reports-year-cell {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- reports: accounts page ---------- */
#view-reports-accounts .sd-toolbar {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(124,92,252,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(246,244,255,.54)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-accounts .sd-toolbar .page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#view-reports-accounts .sd-toolbar .page-title::before {
    content: "\ea6f";
    font-family: "tabler-icons";
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #7C5CFC, #5A72D9);
    box-shadow: 0 12px 24px rgba(124,92,252,.20);
}

#view-reports-accounts .sd-toolbar .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(124,92,252,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-accounts .sd-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#view-reports-accounts .sd-nav-card {
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(124,92,252,.15), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(246,244,255,.52)));
    box-shadow: 0 20px 42px rgba(31,48,74,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-accounts .reports-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-reports-accounts .reports-mode-tab {
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-size: 13px;
    font-weight: 900;
}

#view-reports-accounts .reports-mode-tab i { font-size: 18px; }

#view-reports-accounts .reports-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #7C5CFC, #5A72D9);
    box-shadow: 0 12px 24px rgba(124,92,252,.20), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-reports-accounts .reports-calendar-help,
#view-reports-accounts .reports-multiday-hint,
#view-reports-accounts .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    background: var(--theme-glass, rgba(255,255,255,.56));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-accounts .reports-calendar-help i,
#view-reports-accounts .report-chart-help i {
    color: #7C5CFC;
    font-size: 17px;
}

#view-reports-accounts .sd-nav-header {
    min-height: 42px;
    margin-bottom: 8px;
}

#view-reports-accounts .date-picker-nav {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(124,92,252,.18);
    box-shadow: 0 8px 18px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-accounts .date-picker-weekdays {
    padding: 7px 8px;
    margin-bottom: 7px;
    border-radius: 13px;
    color: var(--theme-ink, rgba(19,35,61,.64));
    background: var(--theme-glass, rgba(255,255,255,.42));
    font-weight: 900;
}

#view-reports-accounts .cal-grid { gap: 6px; }

#view-reports-accounts .reports-cal-cell,
#view-reports-accounts .reports-month-cell,
#view-reports-accounts .reports-year-cell {
    border: 1px solid transparent;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-reports-accounts .reports-cal-cell:hover,
#view-reports-accounts .reports-month-cell:hover,
#view-reports-accounts .reports-year-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(124,92,252,.28);
    background: var(--theme-glass, rgba(238,234,255,.72));
}

#view-reports-accounts .reports-cal-cell.has-report-data:not(.today),
#view-reports-accounts .reports-month-cell.has-report-data:not(.active) {
    color: var(--theme-ink, #6346D8);
    background: var(--theme-glass, rgba(238,234,255,.65));
}

#view-reports-accounts .reports-cal-cell.today,
#view-reports-accounts .reports-month-cell.active,
#view-reports-accounts .reports-year-cell.active {
    color: #fff;
    background: linear-gradient(135deg, #7C5CFC, #5A72D9);
    box-shadow: 0 12px 22px rgba(124,92,252,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.22));
}

#view-reports-accounts .cal-cell .dot,
#view-reports-accounts .sd-month-cell .dot {
    width: 6px;
    height: 6px;
    background: #E0785A;
    box-shadow: 0 0 0 4px rgba(224,120,90,.12);
}

#view-reports-accounts .cal-cell.today .dot,
#view-reports-accounts .sd-month-cell.active .dot {
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

#view-reports-accounts .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(124,92,252,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(246,244,255,.55)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-accounts .reports-simple-guide > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #6346D8);
    background: var(--theme-glass, rgba(238,234,255,.86));
    box-shadow: 0 10px 20px rgba(124,92,252,.13);
    font-size: 22px;
}

#view-reports-accounts .reports-simple-guide strong,
#view-reports-accounts .reports-simple-guide span { display: block; }

#view-reports-accounts .reports-simple-guide strong {
    color: var(--theme-ink, #13233D);
    font-size: 14px;
    font-weight: 950;
}

#view-reports-accounts .reports-simple-guide span {
    margin-top: 3px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.7;
}

#view-reports-accounts .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #6346D8);
    background: var(--theme-glass, rgba(238,234,255,.78));
    font-size: 13px;
}

#view-reports-accounts .reports-accounts-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#view-reports-accounts .report-account-kpi,
#view-reports-accounts .report-chart-card,
#view-reports-accounts .report-table-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(124,92,252,.13), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(246,244,255,.54)));
    box-shadow: 0 20px 42px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-accounts .report-account-kpi {
    min-height: 104px;
}

#view-reports-accounts .report-account-kpi .metric-icon,
#view-reports-accounts .report-chart-card .section-title-icon i,
#view-reports-accounts .report-table-card .section-title-icon i {
    color: #fff;
    background: linear-gradient(135deg, #7C5CFC, #5A72D9);
    box-shadow: 0 11px 22px rgba(124,92,252,.18);
}

#view-reports-accounts .report-account-kpi.is-debt .metric-icon {
    background: linear-gradient(135deg, #E0785A, #FFB15E);
    box-shadow: 0 11px 22px rgba(224,120,90,.16);
}

#view-reports-accounts .report-account-kpi.is-employee .metric-icon {
    background: linear-gradient(135deg, #2FA96D, #2C9EB8);
    box-shadow: 0 11px 22px rgba(47,169,109,.16);
}

#view-reports-accounts .report-account-kpi .metric-value {
    color: var(--theme-ink, #6346D8);
}

#view-reports-accounts .report-account-kpi.is-debt .metric-value {
    color: var(--theme-ink, #C76448);
}

#view-reports-accounts .report-account-kpi.is-employee .metric-value {
    color: var(--theme-ink, #1F7A4C);
}

#view-reports-accounts .report-chart-card .section-title-icon,
#view-reports-accounts .report-table-card .section-title-icon {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    font-weight: 950;
}

#view-reports-accounts .report-chart-card .section-title-icon i,
#view-reports-accounts .report-table-card .section-title-icon i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#view-reports-accounts .finance-week-chart {
    min-height: 210px;
    height: 230px;
    align-items: flex-end;
    gap: 14px;
    padding: 22px 10px 4px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(246,244,255,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(124,92,252,.075) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-accounts .week-bar-col {
    min-width: 84px;
    padding: 0 8px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.36));
}

#view-reports-accounts .week-bar-value {
    color: var(--theme-ink, #13233D);
    font-size: 12px;
    font-weight: 950;
}

#view-reports-accounts .week-bar-track {
    max-width: 44px;
    height: 132px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(124,92,252,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-accounts .week-bar-fill {
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #E0785A, #C6483A);
    box-shadow: 0 8px 16px rgba(31,48,74,.16), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    transition: height 1s cubic-bezier(.22,1,.36,1);
}

#view-reports-accounts .week-bar-label {
    color: var(--theme-ink, rgba(19,35,61,.72));
    font-size: 12.5px;
    font-weight: 950;
}

#view-reports-accounts .ledger-table-wrap {
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-accounts .ledger-table th {
    background: var(--theme-glass, rgba(238,234,255,.72));
    color: var(--theme-ink, #13233D);
    font-weight: 950;
}

#view-reports-accounts .ledger-table td {
    font-weight: 800;
}

#view-reports-accounts .ledger-table tbody tr:hover {
    background: var(--theme-glass, rgba(238,234,255,.42));
}

#view-reports-accounts .report-debt-amount {
    color: var(--theme-ink, #C76448);
    font-weight: 950;
}

#view-reports-accounts .report-emp-balance {
    color: var(--theme-ink, #6346D8);
    font-weight: 950;
}

@media (max-width: 900px) {
    #view-reports-accounts .sd-layout { grid-template-columns: 1fr; }
    #view-reports-accounts .sd-nav-card { position: static; }
}

@media (max-width: 700px) {
    #view-reports-accounts .reports-accounts-summary,
    #view-reports-accounts .reports-mode-tabs,
    #view-reports-accounts .reports-simple-guide {
        grid-template-columns: 1fr;
    }
    #view-reports-accounts .reports-simple-guide {
        text-align: center;
    }
    #view-reports-accounts .reports-simple-guide > i {
        margin: 0 auto;
    }
    #view-reports-accounts .sd-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    #view-reports-accounts .sd-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    #view-reports-accounts .finance-week-chart {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-accounts .week-bar-fill,
    #view-reports-accounts .reports-cal-cell,
    #view-reports-accounts .reports-month-cell,
    #view-reports-accounts .reports-year-cell {
        transition: none !important;
    }
}

/* ---------- reports: accounts — compact audit workspace ---------- */
#view-reports-accounts { --accounts-tone:#BE123C; --accounts-deep:#991B3D; --accounts-soft:rgba(190,18,60,.11); }
#view-reports-accounts .reports-title-cluster{position:relative;display:flex;align-items:center;gap:9px}
#view-reports-accounts .reports-title-help{position:relative;z-index:12}
#view-reports-accounts .reports-title-help summary{list-style:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(190,18,60,.24);border-radius:12px;color:var(--accounts-tone);background:var(--theme-glass, rgba(255,237,242,.92));box-shadow:0 8px 18px rgba(190,18,60,.12);cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease}
#view-reports-accounts .reports-title-help summary::-webkit-details-marker{display:none}
#view-reports-accounts .reports-title-help summary i{font-size:20px;animation:reportHelpBreathe 2.8s ease-in-out infinite}
#view-reports-accounts .reports-title-help[open] summary,#view-reports-accounts .reports-title-help summary:hover{color:#fff;background:var(--accounts-tone);transform:translateY(-1px)}
#view-reports-accounts .reports-title-help-popover{position:absolute;inset-inline-start:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 48px));padding:13px 15px;border:1px solid rgba(190,18,60,.2);border-radius:16px;color:var(--theme-ink, #4f1727);background:var(--theme-glass, rgba(255,249,251,.98));box-shadow:0 20px 45px rgba(77,26,43,.18);animation:reportHelpReveal .22s ease both}
#view-reports-accounts .reports-title-help-popover strong,#view-reports-accounts .reports-title-help-popover span{display:block}
#view-reports-accounts .reports-title-help-popover strong{font-size:13px;font-weight:950}
#view-reports-accounts .reports-title-help-popover span{margin-top:4px;color:var(--theme-ink, #725660);font-size:12px;line-height:1.8}
#view-reports-accounts .reports-accounts-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
#view-reports-accounts .report-account-kpi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:112px;padding:16px;border-color:rgba(190,18,60,.13);background:radial-gradient(circle at 0 100%,rgba(190,18,60,.10),transparent 42%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.86)),var(--theme-glass, rgba(255,245,248,.65)));transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
#view-reports-accounts .report-account-kpi:hover{transform:translateY(-4px);border-color:rgba(190,18,60,.28);box-shadow:0 20px 38px rgba(118,26,53,.14),inset 0 1px 0 var(--theme-highlight, #fff)}
#view-reports-accounts .account-kpi-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#D62955,var(--accounts-deep));box-shadow:0 10px 20px rgba(190,18,60,.22);font-size:21px}
#view-reports-accounts .report-account-kpi .metric-label{display:block;line-height:1.55}
#view-reports-accounts .report-account-kpi .metric-value{display:block;margin-top:5px;color:var(--accounts-deep);font-size:20px;line-height:1.35}
#view-reports-accounts .report-account-kpi .metric-value small{margin-inline-start:5px;color:var(--theme-ink, #80616b);font-size:10px}
#view-reports-accounts .account-kpi-mark{align-self:start;color:var(--theme-ink, rgba(190,18,60,.22));font-size:20px}
#view-reports-accounts .accounts-insights{overflow:hidden;border:1px solid rgba(190,18,60,.13);border-radius:24px;background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.62)),var(--theme-glass, rgba(255,244,248,.4)));box-shadow:0 20px 42px rgba(72,34,47,.09)}
#view-reports-accounts .accounts-insights-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
#view-reports-accounts .accounts-insights-head strong,#view-reports-accounts .accounts-insights-head span{display:block}
#view-reports-accounts .accounts-insights-head strong{color:var(--theme-ink, #3d1724);font-size:16px;font-weight:950}
#view-reports-accounts .accounts-insights-head span{margin-top:2px;color:var(--theme-ink, #7e6570);font-size:12px;font-weight:750}
#view-reports-accounts .accounts-insights-head>i{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#D62955,var(--accounts-deep));box-shadow:0 9px 19px rgba(190,18,60,.22);font-size:20px}
#view-reports-accounts .accounts-insight-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 14px 14px;padding:5px;border:1px solid rgba(190,18,60,.10);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.58))}
#view-reports-accounts .accounts-insight-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;border:0;border-radius:12px;color:var(--theme-ink, #735a64);background:transparent;font:inherit;font-size:12.5px;font-weight:900;cursor:pointer;transition:transform .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
#view-reports-accounts .accounts-insight-tab:hover{color:var(--accounts-deep);background:var(--accounts-soft)}
#view-reports-accounts .accounts-insight-tab.active{color:#fff;background:linear-gradient(135deg,#D62955,var(--accounts-deep));box-shadow:0 9px 19px rgba(190,18,60,.22)}
#view-reports-accounts .accounts-insight-tab i{font-size:18px}
#view-reports-accounts .accounts-insight-panel{margin:0 14px 14px;border-color:rgba(190,18,60,.13);animation:reportHelpReveal .24s ease both}
#view-reports-accounts .accounts-insight-panel[hidden]{display:none!important}
#view-reports-accounts .report-chart-card .section-title-icon i,#view-reports-accounts .report-table-card .section-title-icon i{background:linear-gradient(145deg,#D62955,var(--accounts-deep));box-shadow:0 10px 20px rgba(190,18,60,.18)}
#view-reports-accounts .report-chart-help i{color:var(--accounts-tone)}
#view-reports-accounts .finance-week-chart{background:linear-gradient(180deg,var(--theme-glass, rgba(255,255,255,.72)),var(--theme-glass, rgba(255,245,248,.5))),repeating-linear-gradient(0deg,transparent 0 39px,rgba(190,18,60,.07) 40px 41px)}
#view-reports-accounts .week-bar-track{border-color:rgba(190,18,60,.18)}
#view-reports-accounts .week-bar-fill{background:linear-gradient(180deg,#E43D68,var(--accounts-deep));box-shadow:0 9px 18px rgba(153,27,61,.22)}
#view-reports-accounts .ledger-table th{color:var(--theme-ink, #65172f);background:rgba(190,18,60,.09)}
#view-reports-accounts .ledger-table tbody tr:hover{background:rgba(190,18,60,.055)}
@media(max-width:1100px){#view-reports-accounts .reports-accounts-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#view-reports-accounts .reports-accounts-summary{grid-template-columns:1fr}#view-reports-accounts .accounts-insight-tabs{grid-template-columns:1fr}#view-reports-accounts .accounts-insight-tab{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){#view-reports-accounts .reports-title-help summary i,#view-reports-accounts .reports-title-help-popover,#view-reports-accounts .accounts-insight-panel{animation:none!important}}

/* ---------- reports: comparative page ---------- */
#view-reports-compare .sd-toolbar {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(90,114,217,.18), transparent 58%),
        radial-gradient(70% 130% at 8% -10%, rgba(255,177,94,.14), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(244,247,255,.54)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-compare .sd-toolbar .page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#view-reports-compare .sd-toolbar .page-title::before {
    content: "\ea1e";
    font-family: "tabler-icons";
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #5A72D9, #FFB15E);
    box-shadow: 0 12px 24px rgba(90,114,217,.18);
}

#view-reports-compare .sd-toolbar .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(90,114,217,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-compare .sd-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#view-reports-compare .sd-nav-card {
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(90,114,217,.15), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(244,247,255,.52)));
    box-shadow: 0 20px 42px rgba(31,48,74,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-compare .reports-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-reports-compare .reports-mode-tab {
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-size: 13px;
    font-weight: 900;
}

#view-reports-compare .reports-mode-tab i { font-size: 18px; }

#view-reports-compare .reports-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #5A72D9, #FFB15E);
    box-shadow: 0 12px 24px rgba(90,114,217,.20), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-reports-compare .reports-calendar-help,
#view-reports-compare .reports-multiday-hint,
#view-reports-compare .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    background: var(--theme-glass, rgba(255,255,255,.56));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-compare .reports-calendar-help i,
#view-reports-compare .report-chart-help i {
    color: var(--theme-ink, #5A72D9);
    font-size: 17px;
}

#view-reports-compare .sd-nav-header {
    min-height: 42px;
    margin-bottom: 8px;
}

#view-reports-compare .date-picker-nav {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(90,114,217,.18);
    box-shadow: 0 8px 18px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-compare .date-picker-weekdays {
    padding: 7px 8px;
    margin-bottom: 7px;
    border-radius: 13px;
    color: var(--theme-ink, rgba(19,35,61,.64));
    background: var(--theme-glass, rgba(255,255,255,.42));
    font-weight: 900;
}

#view-reports-compare .cal-grid { gap: 6px; }

#view-reports-compare .reports-cal-cell,
#view-reports-compare .reports-month-cell,
#view-reports-compare .reports-year-cell {
    border: 1px solid transparent;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-reports-compare .reports-cal-cell:hover,
#view-reports-compare .reports-month-cell:hover,
#view-reports-compare .reports-year-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(90,114,217,.28);
    background: var(--theme-glass, rgba(231,236,255,.72));
}

#view-reports-compare .reports-cal-cell.has-report-data:not(.today),
#view-reports-compare .reports-month-cell.has-report-data:not(.active) {
    color: var(--theme-ink, #4966D7);
    background: var(--theme-glass, rgba(231,236,255,.65));
}

#view-reports-compare .reports-cal-cell.today,
#view-reports-compare .reports-month-cell.active,
#view-reports-compare .reports-year-cell.active {
    color: #fff;
    background: linear-gradient(135deg, #5A72D9, #FFB15E);
    box-shadow: 0 12px 22px rgba(90,114,217,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.22));
}

#view-reports-compare .cal-cell .dot,
#view-reports-compare .sd-month-cell .dot {
    width: 6px;
    height: 6px;
    background: #FFB15E;
    box-shadow: 0 0 0 4px rgba(255,177,94,.13);
}

#view-reports-compare .cal-cell.today .dot,
#view-reports-compare .sd-month-cell.active .dot {
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

#view-reports-compare .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(90,114,217,.18), transparent 58%),
        radial-gradient(70% 130% at 8% -10%, rgba(255,177,94,.14), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(244,247,255,.55)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-compare .reports-simple-guide > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #4966D7);
    background: var(--theme-glass, rgba(231,236,255,.86));
    box-shadow: 0 10px 20px rgba(90,114,217,.13);
    font-size: 22px;
    animation: compareIconFloat 3.2s ease-in-out infinite;
}

#view-reports-compare .reports-simple-guide strong,
#view-reports-compare .reports-simple-guide span { display: block; }

#view-reports-compare .reports-simple-guide strong {
    color: var(--theme-ink, #13233D);
    font-size: 14px;
    font-weight: 950;
}

#view-reports-compare .reports-simple-guide span {
    margin-top: 3px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.7;
}

#view-reports-compare .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #4966D7);
    background: var(--theme-glass, rgba(231,236,255,.78));
    font-size: 13px;
}

#view-reports-compare .report-chart-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(90,114,217,.13), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(244,247,255,.54)));
    box-shadow: 0 20px 42px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-compare .report-chart-card .section-title-icon {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    font-weight: 950;
}

#view-reports-compare .report-chart-card .section-title-icon i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #5A72D9, #FFB15E);
    box-shadow: 0 11px 22px rgba(90,114,217,.18);
}

#view-reports-compare .goal-ring-row {
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-compare .goal-ring-item {
    min-width: 210px;
    padding: 16px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow: 0 12px 24px rgba(31,48,74,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
    animation: till2StepPop .55s cubic-bezier(.34,1.56,.64,1) both;
}

#view-reports-compare .goal-ring-chart {
    width: 136px;
    height: 136px;
    box-shadow: 0 18px 34px rgba(31,48,74,.10);
}

#view-reports-compare .goal-ring-chart::before {
    background: var(--theme-glass, rgba(255,255,255,.86));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}

#view-reports-compare .goal-ring-pct {
    color: var(--theme-ink, #13233D);
    font-size: 22px;
    font-weight: 950;
}

#view-reports-compare .goal-ring-label {
    color: var(--theme-ink, #13233D);
    font-weight: 950;
}

#view-reports-compare .goal-ring-sub {
    color: var(--theme-ink, rgba(19,35,61,.66));
    font-weight: 800;
}

#view-reports-compare .gbar-legend {
    justify-content: center;
    gap: 10px;
}

#view-reports-compare .gbar-legend-item {
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--theme-ink, rgba(19,35,61,.72));
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    font-weight: 900;
}

#view-reports-compare .gbar-chart {
    height: 250px;
    gap: 14px;
    padding: 20px 10px 8px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background:
        linear-gradient(180deg, var(--theme-glass, rgba(255,255,255,.62)), var(--theme-glass, rgba(244,247,255,.40))),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(90,114,217,.075) 40px 41px);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-compare .gbar-group {
    min-width: 104px;
    padding: 9px 8px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.38));
}

#view-reports-compare .gbar-values { min-height: 36px; }

#view-reports-compare .gbar-value {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    font-size: 11.5px;
    font-weight: 950;
}

#view-reports-compare .gbar-bars {
    height: 148px;
    gap: 9px;
}

#view-reports-compare .gbar-col { width: 30px; }

#view-reports-compare .gbar-track {
    padding: 4px;
    border-radius: 14px;
    background: rgba(19,35,61,.07);
    border: 1px solid rgba(90,114,217,.18);
    box-shadow: inset 0 1px 3px rgba(31,48,74,.10);
}

#view-reports-compare .gbar-fill {
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 8px 16px rgba(31,48,74,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    transition: height 1s cubic-bezier(.22,1,.36,1);
}

#view-reports-compare .gbar-label {
    color: var(--theme-ink, #13233D);
    font-size: 12.5px;
    font-weight: 950;
}

#view-reports-compare .donut-wrap {
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-compare .donut-chart {
    width: 170px;
    height: 170px;
    box-shadow: 0 18px 34px rgba(31,48,74,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.55));
    animation: compareDonutPop .55s cubic-bezier(.34,1.56,.64,1) both;
}

#view-reports-compare .donut-legend-row {
    padding: 10px 12px;
    border-radius: 15px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
}

#view-reports-compare .donut-legend-label {
    color: var(--theme-ink, #13233D);
    font-weight: 900;
}

#view-reports-compare .donut-legend-value {
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-weight: 900;
}

@keyframes compareIconFloat {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-2px) rotate(-3deg); }
}

@keyframes compareDonutPop {
    from { opacity: 0; transform: scale(.86); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    #view-reports-compare .sd-layout { grid-template-columns: 1fr; }
    #view-reports-compare .sd-nav-card { position: static; }
}

@media (max-width: 700px) {
    #view-reports-compare .reports-mode-tabs,
    #view-reports-compare .reports-simple-guide {
        grid-template-columns: 1fr;
    }
    #view-reports-compare .reports-simple-guide {
        text-align: center;
    }
    #view-reports-compare .reports-simple-guide > i {
        margin: 0 auto;
    }
    #view-reports-compare .sd-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    #view-reports-compare .sd-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    #view-reports-compare .gbar-chart {
        overflow-x: auto;
    }
    #view-reports-compare .donut-wrap {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-compare .reports-simple-guide > i,
    #view-reports-compare .donut-chart,
    #view-reports-compare .goal-ring-item,
    #view-reports-compare .gbar-fill,
    #view-reports-compare .reports-cal-cell,
    #view-reports-compare .reports-month-cell,
    #view-reports-compare .reports-year-cell {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- reports: journal page ---------- */
#view-reports-journal .sd-toolbar {
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(44,158,184,.18), transparent 58%),
        radial-gradient(70% 130% at 8% -10%, rgba(124,92,252,.14), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(240,249,252,.54)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-journal .sd-toolbar .page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#view-reports-journal .sd-toolbar .page-title::before {
    content: "\eb6d";
    font-family: "tabler-icons";
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #2C9EB8, #7C5CFC);
    box-shadow: 0 12px 24px rgba(44,158,184,.18);
}

#view-reports-journal .sd-toolbar .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(44,158,184,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-journal .sd-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#view-reports-journal .sd-nav-card {
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(44,158,184,.15), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(240,249,252,.52)));
    box-shadow: 0 20px 42px rgba(31,48,74,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-journal .reports-mode-tabs,
#view-reports-journal .report-journal-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-reports-journal .reports-mode-tab,
#view-reports-journal .report-journal-tab {
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-size: 13px;
    font-weight: 900;
}

#view-reports-journal .reports-mode-tab i,
#view-reports-journal .report-journal-tab i { font-size: 18px; }

#view-reports-journal .reports-mode-tab.active,
#view-reports-journal .report-journal-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #2C9EB8, #7C5CFC);
    box-shadow: 0 12px 24px rgba(44,158,184,.20), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-reports-journal .reports-calendar-help,
#view-reports-journal .reports-multiday-hint,
#view-reports-journal .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 14px;
    color: var(--theme-ink, rgba(19,35,61,.70));
    background: var(--theme-glass, rgba(255,255,255,.56));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-journal .reports-calendar-help i,
#view-reports-journal .report-chart-help i {
    color: var(--theme-ink, #2C9EB8);
    font-size: 17px;
}

#view-reports-journal .sd-nav-header {
    min-height: 42px;
    margin-bottom: 8px;
}

#view-reports-journal .date-picker-nav {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(44,158,184,.18);
    box-shadow: 0 8px 18px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-journal .date-picker-weekdays {
    padding: 7px 8px;
    margin-bottom: 7px;
    border-radius: 13px;
    color: var(--theme-ink, rgba(19,35,61,.64));
    background: var(--theme-glass, rgba(255,255,255,.42));
    font-weight: 900;
}

#view-reports-journal .cal-grid { gap: 6px; }

#view-reports-journal .reports-cal-cell,
#view-reports-journal .reports-month-cell,
#view-reports-journal .reports-year-cell {
    border: 1px solid transparent;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#view-reports-journal .reports-cal-cell:hover,
#view-reports-journal .reports-month-cell:hover,
#view-reports-journal .reports-year-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(44,158,184,.28);
    background: var(--theme-glass, rgba(225,247,251,.72));
}

#view-reports-journal .reports-cal-cell.has-report-data:not(.today),
#view-reports-journal .reports-month-cell.has-report-data:not(.active) {
    color: var(--theme-ink, #287C91);
    background: var(--theme-glass, rgba(225,247,251,.65));
}

#view-reports-journal .reports-cal-cell.today,
#view-reports-journal .reports-month-cell.active,
#view-reports-journal .reports-year-cell.active {
    color: #fff;
    background: linear-gradient(135deg, #2C9EB8, #7C5CFC);
    box-shadow: 0 12px 22px rgba(44,158,184,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.22));
}

#view-reports-journal .cal-cell .dot,
#view-reports-journal .sd-month-cell .dot {
    width: 6px;
    height: 6px;
    background: #7C5CFC;
    box-shadow: 0 0 0 4px rgba(124,92,252,.12);
}

#view-reports-journal .cal-cell.today .dot,
#view-reports-journal .sd-month-cell.active .dot {
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

#view-reports-journal .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(80% 140% at 90% -20%, rgba(44,158,184,.18), transparent 58%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(240,249,252,.55)));
    box-shadow: 0 18px 38px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-journal .reports-simple-guide > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #287C91);
    background: var(--theme-glass, rgba(225,247,251,.86));
    box-shadow: 0 10px 20px rgba(44,158,184,.13);
    font-size: 22px;
    animation: journalIconPulse 3.2s ease-in-out infinite;
}

#view-reports-journal .reports-simple-guide strong,
#view-reports-journal .reports-simple-guide span { display: block; }

#view-reports-journal .reports-simple-guide strong {
    color: var(--theme-ink, #13233D);
    font-size: 14px;
    font-weight: 950;
}

#view-reports-journal .reports-simple-guide span {
    margin-top: 3px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.7;
}

#view-reports-journal .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #287C91);
    background: var(--theme-glass, rgba(225,247,251,.78));
    font-size: 13px;
}

#view-reports-journal .report-journal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 22px;
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(44,158,184,.13), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(240,249,252,.54)));
    box-shadow: 0 20px 42px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-reports-journal .report-journal-card .section-title-icon {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    font-weight: 950;
}

#view-reports-journal .report-journal-card .section-title-icon i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #2C9EB8, #7C5CFC);
    box-shadow: 0 11px 22px rgba(44,158,184,.18);
}

#view-reports-journal .report-journal-list {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    background: var(--theme-glass, rgba(255,255,255,.42));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-reports-journal .report-journal-list::before {
    content: "";
    position: absolute;
    inset-block: 18px;
    inset-inline-end: 33px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(44,158,184,.20), rgba(124,92,252,.20));
    pointer-events: none;
}

#view-reports-journal .report-journal-entry {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#view-reports-journal .report-journal-entry .activity-row {
    min-height: 66px;
    padding: 12px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.66));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    box-shadow: 0 10px 22px rgba(31,48,74,.06), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#view-reports-journal .report-journal-entry .activity-row:hover {
    transform: translateY(-2px);
    border-color: rgba(44,158,184,.28);
    box-shadow: 0 15px 30px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.90));
}

#view-reports-journal .activity-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    box-shadow: 0 10px 18px rgba(31,48,74,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-reports-journal .activity-row-text {
    color: var(--theme-ink, #13233D);
    font-weight: 900;
    line-height: 1.7;
}

#view-reports-journal .activity-row-when {
    padding: 7px 10px;
    border-radius: 14px;
    background: var(--theme-glass, rgba(240,249,252,.80));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
}

#view-reports-journal .activity-row-time {
    color: var(--theme-ink, #287C91);
    font-weight: 950;
}

#view-reports-journal .activity-row-date {
    color: var(--theme-ink, rgba(19,35,61,.62));
    font-weight: 750;
}

#view-reports-journal .journal-day-divider {
    margin: 6px 0 2px;
}

#view-reports-journal .journal-day-divider span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--theme-ink, #287C91);
    background: var(--theme-glass, rgba(225,247,251,.82));
    border: 1px solid rgba(44,158,184,.18);
    font-weight: 950;
}

#view-reports-journal .journal-day-divider span::before {
    content: "\ea53";
    font-family: "tabler-icons";
}

#view-reports-journal .report-journal-empty {
    min-height: 150px;
    border-style: dashed;
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(44,158,184,.12), transparent 58%),
        var(--theme-glass, rgba(255,255,255,.50));
}

@keyframes journalIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@media (max-width: 900px) {
    #view-reports-journal .sd-layout { grid-template-columns: 1fr; }
    #view-reports-journal .sd-nav-card { position: static; }
}

@media (max-width: 700px) {
    #view-reports-journal .reports-mode-tabs,
    #view-reports-journal .report-journal-tabs,
    #view-reports-journal .reports-simple-guide {
        grid-template-columns: 1fr;
    }
    #view-reports-journal .reports-simple-guide {
        text-align: center;
    }
    #view-reports-journal .reports-simple-guide > i {
        margin: 0 auto;
    }
    #view-reports-journal .sd-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    #view-reports-journal .sd-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    #view-reports-journal .activity-row {
        align-items: flex-start;
        flex-direction: column;
    }
    #view-reports-journal .activity-row-when {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-journal .reports-simple-guide > i,
    #view-reports-journal .report-journal-entry .activity-row,
    #view-reports-journal .reports-cal-cell,
    #view-reports-journal .reports-month-cell,
    #view-reports-journal .reports-year-cell {
        animation: none !important;
        transition: none !important;
    }
}

/* Reports: Capital */
#view-reports-capital .sd-toolbar {
    background:
        radial-gradient(circle at 88% 10%, rgba(245, 158, 11, .22), transparent 34%),
        radial-gradient(circle at 10% 18%, rgba(124, 92, 252, .16), transparent 36%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(255,255,255,.48)));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow: 0 20px 44px rgba(74, 58, 127, .13);
}

#view-reports-capital .sd-toolbar .page-title::before {
    content: "\eb76";
    font-family: "tabler-icons";
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-inline-end: 10px;
    border-radius: 16px;
    color: var(--theme-ink, #B7791F);
    background: linear-gradient(135deg, var(--theme-glass, rgba(255, 244, 214, .96)), var(--theme-glass, rgba(255,255,255,.76)));
    box-shadow: 0 14px 28px rgba(217, 119, 6, .16);
    vertical-align: middle;
}

#view-reports-capital .sd-layout { align-items: start; }

#view-reports-capital .sd-nav-card,
#view-reports-capital .report-capital-card,
#view-reports-capital .report-capital-hero,
#view-reports-capital .reports-simple-guide {
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    background:
        radial-gradient(circle at 8% 12%, rgba(245, 158, 11, .12), transparent 28%),
        radial-gradient(circle at 94% 0%, rgba(59, 130, 246, .10), transparent 30%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.82)), var(--theme-glass, rgba(255,255,255,.48)));
    box-shadow: 0 18px 44px rgba(33, 44, 82, .12);
    backdrop-filter: blur(18px);
}

#view-reports-capital .reports-mode-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
}

#view-reports-capital .reports-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 15px;
    min-height: 42px;
    color: var(--theme-ink, #475569);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#view-reports-capital .reports-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #F59E0B, #7C5CFC);
    box-shadow: 0 14px 28px rgba(245, 158, 11, .22);
}

#view-reports-capital .reports-mode-tab:hover,
#view-reports-capital .report-capital-card:hover {
    transform: translateY(-2px);
}

#view-reports-capital .reports-calendar-help,
#view-reports-capital .reports-multiday-hint,
#view-reports-capital .report-chart-help {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 14px;
    padding: 8px 12px;
    border-radius: 14px;
    color: var(--theme-ink, #52627A);
    font-size: 12px;
    line-height: 1.8;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(148, 163, 184, .18);
}

#view-reports-capital .reports-calendar-help i,
#view-reports-capital .report-chart-help i { color: var(--theme-ink, #F59E0B); font-size: 17px; }

#view-reports-capital .date-picker-nav {
    background: var(--theme-glass, rgba(255,255,255,.54));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.7));
    border-radius: 16px;
    padding: 8px;
}

#view-reports-capital .reports-cal-cell,
#view-reports-capital .reports-month-cell,
#view-reports-capital .reports-year-cell {
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#view-reports-capital .reports-cal-cell:hover,
#view-reports-capital .reports-month-cell:hover,
#view-reports-capital .reports-year-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(245, 158, 11, .14);
}

#view-reports-capital .reports-cal-cell.has-report-data:not(.today),
#view-reports-capital .reports-month-cell.has-report-data:not(.active) {
    background: var(--theme-glass, rgba(255, 244, 214, .86));
    color: var(--theme-ink, #92400E);
    font-weight: 900;
}

#view-reports-capital .reports-cal-cell.today,
#view-reports-capital .reports-month-cell.active,
#view-reports-capital .reports-year-cell.active {
    background: linear-gradient(135deg, #F59E0B, #7C5CFC);
    color: #fff;
    box-shadow: 0 14px 28px rgba(245, 158, 11, .22);
}

#view-reports-capital .reports-simple-guide {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    margin-bottom: 16px;
}

#view-reports-capital .reports-simple-guide > i {
    width: 50px;
    height: 50px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #F59E0B, #7C5CFC);
    box-shadow: 0 16px 30px rgba(245, 158, 11, .24);
    animation: capitalIconFloat 3.2s ease-in-out infinite;
}

#view-reports-capital .reports-simple-guide strong,
#view-reports-capital .reports-simple-guide span { display: block; }

#view-reports-capital .reports-simple-guide strong {
    color: var(--theme-ink, #17213A);
    font-weight: 950;
    margin-bottom: 3px;
}

#view-reports-capital .reports-simple-guide span {
    color: var(--theme-ink, #52627A);
    font-size: 13px;
    line-height: 1.9;
}

#view-reports-capital .reports-simple-guide b {
    padding: 8px 12px;
    border-radius: 14px;
    color: var(--theme-ink, #B7791F);
    background: var(--theme-glass, rgba(255, 244, 214, .92));
    border: 1px solid rgba(245, 158, 11, .16);
}

#view-reports-capital .report-capital-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    background:
        radial-gradient(circle at 8% 0%, rgba(245, 158, 11, .18), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(34, 197, 94, .10), transparent 28%),
        linear-gradient(135deg, var(--theme-glass, rgba(255, 255, 255, .94)), var(--theme-glass, rgba(255, 250, 240, .88)) 48%, var(--theme-glass, rgba(239, 253, 244, .88)));
    border-color: rgba(245, 158, 11, .22);
    box-shadow: 0 20px 44px rgba(146, 64, 14, .11);
}

#view-reports-capital .report-capital-hero::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--theme-glass, rgba(255,255,255,.38)), var(--theme-highlight, rgba(255,255,255,0)));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.42));
}

#view-reports-capital .report-capital-hero .till2-hero-icon {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
    box-shadow: 0 18px 32px rgba(245, 158, 11, .28);
}

#view-reports-capital .report-capital-hero .till2-hero-head,
#view-reports-capital .report-capital-hero .till2-hero-value {
    position: relative;
    z-index: 1;
}

#view-reports-capital .report-capital-hero .till2-hero-label {
    color: var(--theme-ink, #92400E);
    font-weight: 950;
    text-shadow: none;
}

#view-reports-capital .report-capital-hero .till2-hero-hint {
    max-width: 620px;
    color: var(--theme-ink, #475569);
    font-weight: 800;
    opacity: 1;
    text-shadow: none;
}

#view-reports-capital .report-capital-hero .till2-hero-value {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    align-self: flex-start;
    padding: 8px 16px 10px;
    border-radius: 20px;
    color: var(--theme-ink, #7C2D12);
    background: var(--theme-glass, rgba(255,255,255,.82));
    border: 1px solid rgba(245, 158, 11, .22);
    box-shadow: 0 16px 30px rgba(146, 64, 14, .13);
    text-shadow: none;
}

#view-reports-capital .report-capital-steps {
    gap: 12px;
}

#view-reports-capital .report-capital-step {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 158, 11, .15), transparent 44%),
        var(--theme-glass, rgba(255,255,255,.64));
    box-shadow: 0 14px 30px rgba(45, 55, 90, .10);
}

#view-reports-capital .report-capital-step::after {
    content: "";
    position: absolute;
    inset-inline: 14px;
    bottom: 10px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #F59E0B, rgba(245, 158, 11, .12));
    transform-origin: right;
    animation: capitalBarGrow .85s ease both;
}

#view-reports-capital .report-capital-step.is-repaid::after {
    background: linear-gradient(90deg, #22C55E, rgba(34, 197, 94, .12));
}

#view-reports-capital .report-capital-step.is-remaining::after {
    background: linear-gradient(90deg, #7C5CFC, #F59E0B);
}

#view-reports-capital .report-capital-account-list,
#view-reports-capital .report-capital-ledger-list {
    gap: 10px;
}

#view-reports-capital .report-capital-account-row,
#view-reports-capital .report-capital-ledger-row {
    border: 1px solid rgba(148, 163, 184, .22);
    background: var(--theme-glass, rgba(255,255,255,.64));
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(35, 45, 82, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#view-reports-capital .report-capital-account-row:hover,
#view-reports-capital .report-capital-ledger-row:hover {
    transform: translateY(-2px) scale(1.005);
    border-color: rgba(245, 158, 11, .34);
    box-shadow: 0 18px 34px rgba(74, 58, 127, .13);
}

#view-reports-capital .report-capital-account-row.has-balance {
    background:
        linear-gradient(90deg, var(--theme-glass, rgba(255, 244, 214, .42)), var(--theme-glass, rgba(255,255,255,.64)) 36%),
        var(--theme-glass, rgba(255,255,255,.64));
}

#view-reports-capital .report-capital-account-row.is-settled {
    background:
        linear-gradient(90deg, var(--theme-glass, rgba(220, 252, 231, .42)), var(--theme-glass, rgba(255,255,255,.64)) 36%),
        var(--theme-glass, rgba(255,255,255,.64));
}

#view-reports-capital .report-capital-ledger-row.is-injection {
    border-inline-start:1px solid var(--border);
}

#view-reports-capital .report-capital-ledger-row.is-repayment {
    border-inline-start:1px solid var(--border);
}

#view-reports-capital .report-capital-account-row .acct-pill-btn-solid {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #F59E0B, #7C5CFC);
    box-shadow: 0 12px 24px rgba(124, 92, 252, .18);
}

#view-reports-capital .report-capital-empty {
    min-height: 180px;
    border-style: dashed;
    color: var(--theme-ink, #64748B);
}

@keyframes capitalIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-4deg); }
}

@keyframes capitalBarGrow {
    from { transform: scaleX(.12); opacity: .35; }
    to { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 900px) {
    #view-reports-capital .reports-mode-tabs,
    #view-reports-capital .reports-simple-guide {
        grid-template-columns: 1fr;
    }

    #view-reports-capital .reports-simple-guide {
        text-align: center;
        justify-items: center;
    }

    #view-reports-capital .work-record-row {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-reports-capital .reports-simple-guide > i,
    #view-reports-capital .report-capital-step::after,
    #view-reports-capital .report-capital-account-row,
    #view-reports-capital .report-capital-ledger-row,
    #view-reports-capital .reports-cal-cell,
    #view-reports-capital .reports-month-cell,
    #view-reports-capital .reports-year-cell {
        animation: none !important;
        transition: none !important;
    }
}

.cap-bar-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cap-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cap-bar-label {
    width: 90px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cap-bar-track {
    flex: 1;
    height: 14px;
    border-radius: 8px;
    background: var(--panel-2);
    overflow: hidden;
}

.cap-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 8px;
    background: var(--cap-fill-color, var(--accent-solid));
    transition: width .8s cubic-bezier(.4,0,.2,1);
}

.cap-bar-fill.is-low {
    background: var(--danger) !important;
}

/* ---------- tank report: shared fuel color language ---------- */
#report-tanks .cap-bar-track {
    height: 16px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text1) 8%, transparent);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}

#report-tanks .cap-bar-fill,
#report-tanks .week-bar-fill {
    position: relative;
    overflow: hidden;
    animation: reportFuelPulse 3.6s ease-in-out infinite;
}

#report-tanks .cap-bar-fill.fuel-petrol {
    background: linear-gradient(90deg, #FFB648, #FF8F1F);
    box-shadow: 0 0 10px rgba(255,150,20,.4), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.44));
}

#report-tanks .cap-bar-fill.fuel-diesel {
    background: linear-gradient(90deg, #43D486, #19A765);
    box-shadow: 0 0 10px rgba(30,190,110,.36), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.4));
}

#report-tanks .cap-bar-fill.fuel-cng {
    background: linear-gradient(90deg, #5AB5FF, #2478E0);
    box-shadow: 0 0 10px rgba(45,140,255,.36), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.4));
}

#report-tanks .week-bar-track {
    max-width: 38px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--text1) 7%, transparent);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.09);
}

#report-tanks .week-bar-fill {
    border-radius: 8px 8px 3px 3px;
    transition: height 1.15s cubic-bezier(.22,1,.36,1);
}

#report-tanks .week-bar-fill.fuel-petrol {
    background: linear-gradient(180deg, #FFB648, #FF8F1F);
    box-shadow: 0 0 11px rgba(255,150,20,.4), inset 1px 0 2px var(--theme-highlight, rgba(255,255,255,.38));
}

#report-tanks .week-bar-fill.fuel-diesel {
    background: linear-gradient(180deg, #43D486, #19A765);
    box-shadow: 0 0 11px rgba(30,190,110,.36), inset 1px 0 2px var(--theme-highlight, rgba(255,255,255,.36));
}

#report-tanks .week-bar-fill.fuel-cng {
    background: linear-gradient(180deg, #5AB5FF, #2478E0);
    box-shadow: 0 0 11px rgba(45,140,255,.36), inset 1px 0 2px var(--theme-highlight, rgba(255,255,255,.36));
}

#report-tanks .cap-bar-fill::after,
#report-tanks .week-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 34%, var(--theme-glass, rgba(255,255,255,.58)) 50%, transparent 66%);
    transform: translateX(115%);
    animation: tankGaugeShimmer 4.8s ease-in-out infinite 1s;
}

@keyframes reportFuelPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.08) saturate(1.08); }
}

.cap-bar-value {
    width: 130px;
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text2);
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .cap-bar-row {
        flex-wrap: wrap;
    }

    .cap-bar-label {
        width: 100%;
    }

    .cap-bar-value {
        width: auto;
    }
}

.line-chart-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--text2);
}

.line-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.line-chart-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.line-chart-swatch.is-a {
    background: linear-gradient(180deg, #6FA8FF, #4F6EF7);
}

.line-chart-swatch.is-b {
    background: var(--warning);
}

.line-chart-wrap {
    width: 100%;
}

.line-chart-svg {
    width: 100%;
    height: 170px;
    display: block;
    overflow: visible;
}

.line-chart-path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.line-chart-path.is-a {
    stroke: var(--accent-solid);
}

.line-chart-path.is-b {
    stroke: var(--warning);
    opacity: .8;
}

.line-chart-dot.is-a {
    fill: var(--accent-solid);
    stroke: var(--panel);
    stroke-width: 1.5;
}

.line-chart-dot.is-b {
    fill: var(--warning);
    stroke: var(--panel);
    stroke-width: 1.5;
}

.line-chart-x-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--text2);
}

@media (prefers-reduced-motion: reduce) {
    .line-chart-path {
        transition: none !important;
        stroke-dashoffset: 0 !important;
    }
}

.trend-chart-dark {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px 14px;
    --trend-glow-strength: 2px;
}

html[data-theme="dark"] .trend-chart-dark {
    --trend-glow-strength: 5px;
}

.trend-chart-svg {
    width: 100%;
    height: 210px;
    display: block;
    overflow: visible;
}

.trend-grid-line {
    stroke: var(--border);
    stroke-width: 1;
}

.trend-axis-label {
    font-size: 9.5px;
    fill: var(--text2);
    font-family: 'IRANSans', sans-serif;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: bidi-override;
}

.trend-area {
    stroke: none;
}

.trend-line {
    fill: none;
    stroke: var(--trend-color, var(--accent-solid));
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 var(--trend-glow-strength,2px) var(--trend-color, var(--accent-solid)));
}

.trend-line.is-faded {
    stroke-width: 1.5;
    opacity: .55;
    filter: none;
}

.trend-highlight-dot {
    stroke: var(--panel-2);
    stroke-width: 2;
}

.trend-highlight-label {
    font-size: 11px;
    font-weight: 800;
    font-family: 'IRANSans', sans-serif;
    paint-order: stroke;
    stroke: var(--panel-2);
    stroke-width: 3px;
    stroke-linejoin: round;
    direction: ltr;
    unicode-bidi: bidi-override;
}

.trend-highlight-label.is-faded {
    font-size: 9px;
    font-weight: 700;
    opacity: .8;
}

.fweek-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.fweek-net-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 5px;
}

.fweek-net-value {
    font-size: 27px;
    font-weight: 900;
    color: var(--text1);
    margin-bottom: 9px;
}

.fweek-net-value.is-profit {
    color: var(--theme-ink, #0C8A60);
}

.fweek-net-value.is-loss {
    color: var(--theme-ink, #D6472E);
}

html[data-theme="dark"] .fweek-net-value.is-profit {
    color: #3DDBA5;
}

html[data-theme="dark"] .fweek-net-value.is-loss {
    color: #FF9A7B;
}

.fweek-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 13px;
    border-radius: 999px;
}

.fweek-trend-pill.is-up {
    background: var(--success-bg);
    color: var(--success);
}

.fweek-trend-pill.is-down {
    background: var(--danger-bg);
    color: var(--danger);
}

.fweek-trend-pill.is-flat {
    background: var(--panel-2);
    color: var(--text2);
}

.fweek-totals {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text2);
}

.fweek-total-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fweek-total-item b {
    color: var(--text1);
    font-weight: 800;
}

.fweek-dot {
    width: 10px;
    height: 10px;
    border-radius: 4px;
    flex-shrink: 0;
}

.fweek-dot.is-income {
    background: linear-gradient(180deg, #2DD4A7, #0E9F6E);
}

.fweek-dot.is-expense {
    background: linear-gradient(180deg, #FF9A7B, #F1583B);
}

.fweek-chart {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 200px;
    border-bottom: 2px solid var(--border);
}

.fweek-colbars {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    padding: 8px 4px 0;
    border-radius: 12px 12px 0 0;
}

.fweek-colbars.is-today {
    background: var(--accent-tint-bg);
}

.fweek-bar-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.fweek-bar-value {
    font-size: 10.5px;
    font-weight: 800;
    margin-bottom: 5px;
    white-space: nowrap;
}

.fweek-bar-value.is-income {
    color: var(--theme-ink, #0C8A60);
}

.fweek-bar-value.is-expense {
    color: var(--theme-ink, #D6472E);
}

html[data-theme="dark"] .fweek-bar-value.is-income {
    color: #3DDBA5;
}

html[data-theme="dark"] .fweek-bar-value.is-expense {
    color: #FF9A7B;
}

.fweek-bar {
    width: 30px;
    height: 0;
    border-radius: 8px 8px 3px 3px;
    transition: height .7s cubic-bezier(.4,0,.2,1);
}

.fweek-bar.is-income {
    background: linear-gradient(180deg, #2DD4A7, #0E9F6E);
    box-shadow: 0 4px 12px rgba(14, 159, 110, .32);
}

.fweek-bar.is-expense {
    background: linear-gradient(180deg, #FF9A7B, #F1583B);
    box-shadow: 0 4px 12px rgba(241, 88, 59, .28);
}

.fweek-nodata {
    width: 22px;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    margin-bottom: 2px;
}

.fweek-days {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.fweek-day {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
}

.fweek-today-pill {
    display: inline-block;
    background: var(--accent-solid);
    color: var(--accent-ink);
    padding: 3px 13px;
    border-radius: 999px;
    font-size: 11.5px;
}

@media (max-width: 640px) {
    .fweek-bar-value {
        display: none;
    }

    .fweek-bar {
        width: 20px;
    }

    .fweek-chart {
        height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fweek-bar {
        transition: none !important;
    }
}

.sdbar-chart {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 260px;
    border-bottom: 2px solid var(--border);
}

.sdbar-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 1px 0;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.sdbar-col.is-selected {
    background: var(--accent-tint-bg);
}

.sdbar-value {
    font-size: 10px;
    font-weight: 800;
    color: var(--text2);
    white-space: nowrap;
    margin-bottom: 4px;
    z-index: 2;
    background: var(--panel);
    padding: 1px 6px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.sdbar-value.is-selected {
    color: var(--text1);
}

.sdbar-stack {
    width: 62%;
    max-width: 30px;
    min-width: 7px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    border-radius: 7px 7px 2px 2px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.sdbar-stack:not(:empty) {
    min-height: 6px;
}

.sdbar-stack.is-grown {
    transform: scaleY(1);
}

.sdbar-seg {
    width: 100%;
    min-height: 3px;
    flex-shrink: 0;
}

.sdbar-days {
    display: flex;
    gap: 4px;
    margin-top: 9px;
}

.sdbar-day {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text2);
    white-space: nowrap;
    overflow: hidden;
}

.sdbar-day-pill {
    display: inline-block;
    background: var(--accent-solid);
    color: var(--accent-ink);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
}

@media (max-width: 900px) {
    .sdbar-chart {
        gap: 2px;
    }

    .sdbar-days {
        gap: 2px;
    }

    .sdbar-day {
        font-size: 9.5px;
    }

    .sdbar-day-pill {
        padding: 2px 5px;
        font-size: 9px;
    }
}

@media (max-width: 640px) {
    .sdbar-chart {
        height: 190px;
    }

    .sdbar-value {
        font-size: 8.5px;
        padding: 1px 4px;
    }

    .sdbar-day {
        font-size: 8.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdbar-stack {
        transition: none !important;
        transform: scaleY(1);
    }
}

.trend-chart-x-labels {
    position: relative;
    height: 14px;
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--text2);
}

.trend-chart-x-labels span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.trend-chart-x-labels span.is-active {
    color: var(--text1);
    font-weight: 700;
}

.trend-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text2);
}

.trend-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trend-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .trend-line {
        transition: none !important;
        stroke-dashoffset: 0 !important;
    }
}

.donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.donut-chart {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    flex-shrink: 0;
    display:grid;
    place-items:center;
    background:var(--donut-fill);
    animation:donutReveal .75s cubic-bezier(.2,.8,.2,1) both;
}

.donut-visual { flex:0 0 auto; padding:12px; }
.donut-center { width:58%; height:58%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; color:var(--text1); background:var(--theme-glass, rgba(250,253,255,.94)); box-shadow:inset 0 0 0 1px rgba(63,83,112,.08),0 8px 24px rgba(31,48,74,.1); text-align:center; }
.donut-center span { color:var(--text2); font-size:10px; font-weight:800; }
.donut-center strong { max-width:92%; overflow:hidden; margin-top:2px; font-size:15px; line-height:1.2; text-overflow:ellipsis; }
.donut-center small { margin-top:2px; color:var(--text2); font-size:9px; font-weight:800; }
@keyframes donutReveal { from{opacity:0;transform:rotate(-22deg) scale(.82)} to{opacity:1;transform:rotate(0) scale(1)} }

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 160px;
}

.donut-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.donut-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.donut-legend-label {
    color: var(--text1);
    flex: 1;
}

.donut-legend-value {
    color: var(--text2);
    font-weight: 700;
    white-space: nowrap;
}

.goal-ring-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: space-around;
}

.goal-ring-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.goal-ring-chart {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
}

.goal-ring-chart::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--panel);
}

.goal-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.goal-ring-pct {
    font-size: 19px;
    font-weight: 800;
    color: var(--text1);
}

.goal-ring-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text1);
}

.goal-ring-sub {
    font-size: 11.5px;
    color: var(--text2);
}

.goal-ring-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 999px;
}

.goal-ring-delta.is-up {
    background: var(--success-bg);
    color: var(--success);
}

.goal-ring-delta.is-down {
    background: var(--danger-bg);
    color: var(--danger);
}

.goal-ring-delta.is-flat {
    background: var(--panel-2);
    color: var(--text2);
}

.report-print-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.report-print-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #ddd;
}

.report-print-brand {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.print-logo {
    height: 120px;
    width: auto;
    flex-shrink: 0;
}

.receipt-logo {
    height: 40px;
    display: block;
    margin: 0 auto 4px;
}

.report-print-title {
    font-size: 15px;
    font-weight: 700;
    margin-top: 4px;
}

.report-print-range {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

/* ---------- employee file print ---------- */
.employee-print-dialog { padding:18px; background:rgba(24,33,52,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal.employee-print-modal { width:min(620px,calc(100vw - 36px)); max-width:620px; padding:0; padding-inline-start:0; overflow-x:hidden; border:1px solid rgba(255,255,255,.72); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(241,246,253,.86)); box-shadow:0 24px 70px rgba(27,39,76,.26),inset 0 1px 0 rgba(255,255,255,.95); }
.employee-print-modal-head { display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:22px 24px 16px; }.employee-print-modal-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#6c8fff,#3c69df);box-shadow:0 8px 18px rgba(60,105,223,.3)}.employee-print-modal-head h3{margin:0;color:var(--text1);font-size:19px;font-weight:900}.employee-print-modal-head p{margin:3px 0 0;color:var(--text2);font-size:12px}
.employee-print-dialog-section { padding:16px 24px; border-top:1px solid rgba(113,132,168,.18); }.employee-print-dialog-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--text1);font-size:14px;font-weight:850}.employee-print-dialog-label i{color:var(--accent-solid);font-size:18px}
.employee-print-range { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border:0; border-radius:12px; overflow:hidden; background:var(--panel-2); }.employee-print-range-option{position:relative;display:flex;align-items:center;justify-content:center;min-height:38px;padding:7px 14px;border:0;border-radius:9px;color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;transition:color .15s ease,background .15s ease,box-shadow .15s ease}.employee-print-range-option input{position:absolute;opacity:0;inset:0;cursor:pointer}.employee-print-range-option i{display:none}.employee-print-range-option:hover{color:var(--text1)}.employee-print-range-option:has(input:checked){z-index:1;color:var(--text1);background:var(--panel);box-shadow:var(--shadow-card)}.employee-print-range-option:has(input:checked) i{display:block;position:absolute;inset-inline-end:9px;color:var(--accent-solid);font-size:16px}
.employee-print-custom-range { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.38); animation:validationAlertIn .2s ease both; }.employee-print-custom-range[hidden]{display:none!important}.employee-print-custom-range>label{display:grid;gap:6px;color:var(--text2);font-size:11px;font-weight:750}.employee-print-custom-range .date-picker-field{min-height:42px;background:rgba(255,255,255,.76);font-size:13px}.employee-print-custom-range .date-picker-value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.employee-print-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }.employee-print-option-card{--option-tone:var(--accent-solid);--option-tint:var(--accent-tint-bg);position:relative;display:flex;align-items:center;min-width:0;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.55);color:var(--text2);font-size:13px;font-weight:750;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.employee-print-option-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--option-tone) 35%,var(--border));box-shadow:0 8px 18px color-mix(in srgb,var(--option-tone) 14%,transparent)}.employee-print-option-card input{position:absolute;opacity:0;inset:0;cursor:pointer}.employee-print-option-card>span:not(.employee-print-option-check){min-width:0;flex:1}.employee-print-option-check{display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border:1.5px solid var(--border-strong);border-radius:5px;color:#fff}.employee-print-option-check i{display:none;font-size:13px}.employee-print-option-card:has(input:checked){color:var(--text1);background:linear-gradient(135deg,rgba(255,255,255,.78),var(--option-tint))}.employee-print-option-card:has(input:checked) .employee-print-option-check{border-color:var(--option-tone);background:var(--option-tone);box-shadow:0 3px 7px color-mix(in srgb,var(--option-tone) 28%,transparent)}.employee-print-option-card:has(input:checked) .employee-print-option-check i{display:block}.employee-print-option-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;color:#fff;background:var(--option-tone);box-shadow:0 6px 13px color-mix(in srgb,var(--option-tone) 26%,transparent);font-size:18px}.employee-print-option-card.is-blue{--option-tone:#477fe1;--option-tint:rgba(71,127,225,.12)}.employee-print-option-card.is-green{--option-tone:#48b987;--option-tint:rgba(72,185,135,.12)}.employee-print-option-card.is-purple{--option-tone:#9371d7;--option-tint:rgba(147,113,215,.12)}.employee-print-option-card.is-amber{--option-tone:#eba524;--option-tint:rgba(235,165,36,.14)}.employee-print-option-card.is-rose{--option-tone:#e26a72;--option-tint:rgba(226,106,114,.12)}.employee-print-option-card.is-cyan{--option-tone:#31b7cf;--option-tint:rgba(49,183,207,.12)}
.employee-print-dialog-actions { display:flex; justify-content:flex-start; gap:10px; margin:0 18px 18px; padding:16px 0 0; border-top:1px solid rgba(113,132,168,.18); }.employee-print-dialog-actions .btn{min-width:132px}.employee-print-dialog-actions .btn-primary{box-shadow:0 9px 19px rgba(65,105,220,.28)}
html[data-theme="dark"] .employee-print-modal{background:linear-gradient(145deg,rgba(34,41,54,.97),rgba(23,28,37,.94));border-color:rgba(255,255,255,.13)}html[data-theme="dark"] .employee-print-range,html[data-theme="dark"] .employee-print-option-card,html[data-theme="dark"] .employee-print-custom-range{background:rgba(255,255,255,.045)}html[data-theme="dark"] .employee-print-range-option:has(input:checked){background:rgba(73,110,220,.18)}html[data-theme="dark"] .employee-print-custom-range .date-picker-field{background:rgba(255,255,255,.06)}
@media (max-width:620px){.employee-print-dialog{padding:12px}.employee-print-modal-head,.employee-print-dialog-section{padding-inline:16px}.employee-print-range{grid-template-columns:1fr}.employee-print-options,.employee-print-custom-range{grid-template-columns:1fr}.employee-print-dialog-actions{margin-inline:16px}.employee-print-dialog-actions .btn{flex:1;min-width:0}}
.employee-print-container { position:relative; isolation:isolate; direction:rtl; color:#101010; background:#fff; font-family:'IRANSans',sans-serif; max-width:186mm; margin:0 auto; padding:4mm; border:0; }
.employee-print-header { position:relative; z-index:1; padding-bottom:10px; border:0; }
.employee-print-topline { display:flex; direction:rtl; justify-content:flex-start; align-items:center; gap:12px; padding-bottom:7px; border:0; font-size:10px; font-weight:700; }.employee-print-station-name{font-size:17px;line-height:1.25;font-weight:900;}
.employee-print-title-block { display:flex; direction:rtl; align-items:center; justify-content:center; gap:10mm; min-height:45mm; padding:7px 0 2px; }.employee-print-title-copy{min-width:0;flex:1;text-align:center;}.employee-print-header-logo{display:flex;align-items:center;justify-content:center;flex:0 0 72mm;}
.employee-print-logo { width:146mm; max-width:75mm; max-height:53mm; object-fit:contain; }
.employee-print-header h1,.employee-print-header p { margin:0; }.employee-print-title-copy > * + *{margin-top:5px;padding-top:5px;border-top:1px dashed #333}.employee-print-header h1{font-size:25px;line-height:1.2;font-weight:900}.employee-print-header p{font-size:13px;font-weight:700; margin-top: 10px;}
.employee-print-section { position:relative; z-index:1; margin-top:13px; break-inside:avoid; page-break-inside:avoid; }.employee-print-section h2 { margin:0 0 7px; padding:6px 10px; border:0; border-radius:1mm; color:#111; background:#d8d8d8; text-align:center; font-size:18px; font-weight:900; }
.employee-print-identity { display:grid; grid-template-columns:minmax(0,1fr) 42mm; align-items:stretch; gap:5mm; }.employee-print-avatar,.employee-print-avatar-placeholder{grid-column:2;grid-row:1;width:42mm;height:44mm;border:1px solid #222;border-radius:1mm;box-sizing:border-box;}.employee-print-avatar{object-fit:cover}.employee-print-avatar-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#f2f2f2;color:#555;text-align:center;font-size:12px;font-weight:700}.employee-print-avatar-placeholder i{font-size:28px;color:#777}.employee-print-identity .employee-print-fields--alongside{grid-column:1;grid-row:1;grid-template-rows:repeat(4,minmax(0,1fr));align-self:stretch;}.employee-print-identity .employee-print-field{min-height:11mm;}
.employee-print-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; min-width:0; border-top:1px solid #b9b9b9; border-inline-start:1px solid #b9b9b9; }.employee-print-field { display:flex; align-items:stretch; min-width:0; min-height:14mm; box-sizing:border-box; padding:0; border-bottom:1px solid #b9b9b9; border-inline-end:1px solid #b9b9b9; font-size:11px; }.employee-print-field>span{display:flex;align-items:center;justify-content:flex-start;gap:5px;flex:0 0 46%;padding:7px 9px;box-sizing:border-box;border-inline-end:1px solid #c4c4c4;background:#ececec;font-weight:800}.employee-print-field>span i{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;flex:0 0 21px;border:1px solid #bdbdbd;border-radius:50%;background:#d5d5d5}.employee-print-field>strong{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:7px 9px;box-sizing:border-box;background:#fff;text-align:center;font-weight:600}.employee-print-num{unicode-bidi:isolate;font-family:Arial,sans-serif;white-space:nowrap}.employee-print-money{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;direction:ltr;white-space:nowrap;unicode-bidi:isolate}.employee-print-currency{direction:rtl;font-family:'IRANSans',sans-serif;font-size:.82em;font-weight:700}.employee-print-date,.employee-print-time{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;unicode-bidi:isolate}.employee-print-time>span{direction:rtl}
.employee-print-section:has(.employee-print-fields):not(:has(.employee-print-identity)) .employee-print-fields{display:flex;grid-template-columns:none}.employee-print-section:has(.employee-print-fields):not(:has(.employee-print-identity)) .employee-print-field{display:grid;grid-template-rows:auto minmax(0,1fr);flex:1 1 0;text-align:center}.employee-print-section:has(.employee-print-fields):not(:has(.employee-print-identity)) .employee-print-field>span{width:100%;padding:6px;justify-content:center;border-inline-end:0;border-bottom:1px solid #c4c4c4}.employee-print-section:has(.employee-print-fields):not(:has(.employee-print-identity)) .employee-print-field>strong{display:flex;width:100%;margin:0;padding:7px 5px;justify-content:center;text-align:center;font-size:14px}
.print-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:10px; }.print-table th,.print-table td { padding:7px; border:1px solid #b9b9b9; text-align:center; vertical-align:middle; }.print-table th{color:#111;background:#d2d2d2;font-weight:900}.print-table td:has(.employee-print-num){text-align:center}.print-table tr{break-inside:avoid;page-break-inside:avoid}
.signature-area { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:30mm; margin-top:24mm; padding-top:8px; font-size:11px; }.signature-area div{border-top:1px solid #333;padding-top:5px;text-align:center;}
@media (max-width:620px){.employee-print-range,.employee-print-options,.employee-print-fields{grid-template-columns:1fr}}
@media print {
  @page { size:auto; margin:12mm 12mm 18mm; }
  body:has(.employee-print-host:not(:empty)) > * { display:none !important; }
  #reportPrintTemplate.employee-print-host { display:block !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; background:#fff !important; }
  .employee-print-container { display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; }
  #reportPrintTemplate.employee-print-host .employee-print-section h2 { color:#111 !important; background-color:#d8d8d8 !important; border:0 !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #reportPrintTemplate.employee-print-host .print-table th { color:#111 !important; background-color:#d2d2d2 !important; border-color:#aaa !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #reportPrintTemplate.employee-print-host .employee-print-field>span { color:#111 !important; background-color:#ececec !important; border-color:#c4c4c4 !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #reportPrintTemplate.employee-print-host .employee-print-field>span i { color:#111 !important; background-color:#d5d5d5 !important; border-color:#bdbdbd !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .print-table thead { display:table-header-group; }
  .print-table tr,.employee-print-section,.signature-area { break-inside:avoid; page-break-inside:avoid; }
}

/* ---------- profile: employee access ---------- */
.access-checkbox-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.access-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text1);
    cursor: pointer;
}

.access-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent-solid);
    cursor: pointer;
}

.access-checkbox.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- profile: logo settings ---------- */
.logo-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .logo-settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .logo-settings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.logo-slot {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logo-slot-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text1);
}

.logo-slot-preview {
    height: 88px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.logo-slot-preview--light {
    background: var(--theme-surface, #F4F7FD);
}

.logo-slot-preview--dark {
    background: #12151A;
}

.logo-slot-preview img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.logo-slot-preview .custom-logo-svg {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-slot-preview .custom-logo-svg svg {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: block;
}

.logo-slot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.logo-slot-actions .btn {
    flex: 1;
    min-width: 120px;
}

.logo-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.logo-code-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logo-code-textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-family: monospace;
    font-size: 12.5px;
    color: var(--text1);
    resize: vertical;
    direction: ltr;
    text-align: left;
}

.logo-code-textarea:focus {
    outline: 2px solid var(--accent-solid);
    outline-offset: 1px;
}

.logo-code-actions {
    display: flex;
    gap: 8px;
}

.logo-default-note {
    font-size: 12px;
    color: var(--text2);
}

/* ---------- profile: backup & restore ---------- */
.backup-sub {
    margin-top: -6px;
    margin-bottom: 14px;
}

.backup-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.backup-actions-row .btn {
    flex: 1;
    min-width: 180px;
}

/* ---------- top-bar / sidebar custom logo sizing ---------- */
.top-bar-logo-slot {
    display: inline-flex;
    overflow: hidden;
}

.top-bar-logo-slot .custom-logo-svg {
    display: flex;
    align-items: center;
    height: 42px;
    max-width: 160px;
    overflow: hidden;
}

.top-bar-logo-slot .custom-logo-svg svg {
    height: 100%;
    width: auto;
    max-width: 100%;
}

#sidebarLogoSlot {
    overflow: hidden;
}

#sidebarLogoSlot .custom-logo-svg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    overflow: hidden;
}

#sidebarLogoSlot .custom-logo-svg svg {
    max-width: 100%;
    max-height: 100%;
}

.print-logo.custom-logo-svg {
    display: inline-flex;
    align-items: center;
    max-width: 140px;
    overflow: hidden;
}

.print-logo.custom-logo-svg svg {
    height: 100%;
    width: auto;
    max-width: 100%;
}

@media print {
    body::before {
        display: none !important;
    }

    body > *:not(#receiptTemplate):not(#reportPrintTemplate) {
        display: none !important;
    }

    #receiptTemplate, #reportPrintTemplate {
        display: block !important;
        background: #fff !important;
    }

    #receiptTemplate:empty, #reportPrintTemplate:empty {
        display: none !important;
    }

    #reportPrintTemplate:not(.finance-report-print-host):not(.standard-report-print-host),
    #reportPrintTemplate:not(.finance-report-print-host):not(.standard-report-print-host) * {
        color: #1a1a1a !important;
        background-color: #fff !important;
        box-shadow: none !important;
        border-color: #ddd !important;
    }

    /* Each report keeps its own visual identity in print while backgrounds stay
       intentionally pale for legibility and economical office printing. */
    #reportPrintTemplate.finance-report-print-host,
    #reportPrintTemplate.standard-report-print-host {
        --print-tone:#0f766e;
        --print-soft:color-mix(in srgb,var(--print-tone) 8%,#fff);
        --print-line:color-mix(in srgb,var(--print-tone) 48%,#d8dfdf);
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }

    #reportPrintTemplate.finance-report-print-host .finance-print-header { border-bottom-color:var(--print-tone) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-heading b,
    #reportPrintTemplate.finance-report-print-host .finance-print-period>i:first-child,
    #reportPrintTemplate.finance-report-print-host .finance-print-period strong,
    #reportPrintTemplate.finance-report-print-host .finance-print-metrics span,
    #reportPrintTemplate.finance-report-print-host .finance-print-metrics span i,
    #reportPrintTemplate.finance-report-print-host .finance-print-metrics small,
    #reportPrintTemplate.finance-report-print-host .finance-print-section>h2,
    #reportPrintTemplate.finance-report-print-host .finance-print-chart>h2,
    #reportPrintTemplate.finance-report-print-host .finance-print-footer>div { color:var(--print-tone) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-period,
    #reportPrintTemplate.finance-report-print-host .finance-print-metrics>div,
    #reportPrintTemplate.finance-report-print-host .finance-print-section,
    #reportPrintTemplate.finance-report-print-host .finance-print-chart { border-color:var(--print-line) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-meta { border-color:var(--print-line) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-period,
    #reportPrintTemplate.finance-report-print-host .finance-print-section>h2,
    #reportPrintTemplate.finance-report-print-host .finance-print-chart>h2,
    #reportPrintTemplate.finance-report-print-host .finance-print-ledger th { background-color:var(--print-soft) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-section>h2,
    #reportPrintTemplate.finance-report-print-host .finance-print-chart>h2,
    #reportPrintTemplate.finance-report-print-host .finance-print-ledger th,
    #reportPrintTemplate.finance-report-print-host .finance-print-ledger td { border-color:var(--print-line) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-ledger th { color:var(--print-tone) !important; }
    #reportPrintTemplate.finance-report-print-host .finance-print-reconcile p>b { background-color:var(--print-tone) !important; }
    #reportPrintTemplate.accounts-report-print-host .accounts-print-note p { margin:0; padding:2.5mm 4mm; color:#4f3a42 !important; text-align:center; line-height:1.8; }
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger th:nth-child(1),
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger td:nth-child(1) { width:7%; text-align:center; }
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger th:nth-child(2),
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger td:nth-child(2) { width:auto; text-align:start; }
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger th:nth-child(3),
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger td:nth-child(3) { width:27%; text-align:center; }
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger th:nth-child(4),
    #reportPrintTemplate.accounts-report-print-host .accounts-print-ledger td:nth-child(4) { width:27%; text-align:center; }
    #reportPrintTemplate.comparative-report-print-host .comparative-print-table th,
    #reportPrintTemplate.comparative-report-print-host .comparative-print-table td { width:auto; text-align:center; }
    #reportPrintTemplate.comparative-report-print-host .comparative-print-table th:first-child,
    #reportPrintTemplate.comparative-report-print-host .comparative-print-table td:first-child { width:28%; text-align:start; }
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger { page-break-inside:auto; }
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger th:nth-child(1),
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger td:nth-child(1) { width:7%; text-align:center; }
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger th:nth-child(2),
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger td:nth-child(2) { width:20%; text-align:center; }
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger th:nth-child(3),
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger td:nth-child(3) { width:14%; text-align:center; }
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger th:nth-child(4),
    #reportPrintTemplate.journal-report-print-host .journal-print-ledger td:nth-child(4) { width:auto; text-align:start; }
    #reportPrintTemplate.capital-report-print-host .capital-source-print-ledger th,
    #reportPrintTemplate.capital-report-print-host .capital-source-print-ledger td,
    #reportPrintTemplate.capital-report-print-host .capital-flow-print-ledger th,
    #reportPrintTemplate.capital-report-print-host .capital-flow-print-ledger td { width:auto; text-align:center; }
    #reportPrintTemplate.capital-report-print-host .capital-source-print-ledger th:nth-child(2),
    #reportPrintTemplate.capital-report-print-host .capital-source-print-ledger td:nth-child(2),
    #reportPrintTemplate.capital-report-print-host .capital-flow-print-ledger th:nth-child(3),
    #reportPrintTemplate.capital-report-print-host .capital-flow-print-ledger td:nth-child(3) { width:25%; text-align:start; }
    #reportPrintTemplate.journal-report-print-host .finance-print-footer,
    #reportPrintTemplate.capital-report-print-host .finance-print-footer { page-break-before:auto; }

    #reportPrintTemplate.standard-report-print-host { display:block !important; color:#17233a !important; background:#fff !important; }
    #reportPrintTemplate.standard-report-print-host .report-print-page { page:finance-report; color:#17233a !important; background:#fff !important; }
    #reportPrintTemplate.standard-report-print-host .report-print-header { border-bottom-color:var(--print-tone) !important; }
    #reportPrintTemplate.standard-report-print-host .report-print-title,
    #reportPrintTemplate.standard-report-print-host .report-print-range,
    #reportPrintTemplate.standard-report-print-host .section-title,
    #reportPrintTemplate.standard-report-print-host .section-title i,
    #reportPrintTemplate.standard-report-print-host .report-section-title,
    #reportPrintTemplate.standard-report-print-host .report-section-title i,
    #reportPrintTemplate.standard-report-print-host .metric-icon,
    #reportPrintTemplate.standard-report-print-host .summary-card i { color:var(--print-tone) !important; }
    #reportPrintTemplate.standard-report-print-host .section-title-icon,
    #reportPrintTemplate.standard-report-print-host .metric-icon,
    #reportPrintTemplate.standard-report-print-host .ledger-table th { color:var(--print-tone) !important; background-color:var(--print-soft) !important; }
    #reportPrintTemplate.standard-report-print-host .report-chart-card,
    #reportPrintTemplate.standard-report-print-host .report-table-card,
    #reportPrintTemplate.standard-report-print-host .summary-card,
    #reportPrintTemplate.standard-report-print-host .ledger-table,
    #reportPrintTemplate.standard-report-print-host .ledger-table th,
    #reportPrintTemplate.standard-report-print-host .ledger-table td { border-color:var(--print-line) !important; box-shadow:none !important; }

    /* Print rendering never runs CSS animations, so .fade-in-item rows would
       stay stuck at their first keyframe (opacity 0) and print as blank pages. */
    #receiptTemplate *,
    #reportPrintTemplate * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #reportPrintTemplate .trend-line {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }

    #reportPrintTemplate .filter-tabs {
        display: none !important;
    }

    /* .ledger-table-wrap is a scrollable box in-app (max-height + overflow-y);
       reused verbatim for print templates, it clipped multi-row tables to one
       scrollable viewport instead of flowing across printed pages. */
    #reportPrintTemplate .ledger-table-wrap {
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    #reportPrintTemplate .ledger-table {
        min-width: 0 !important;
    }

    #reportPrintTemplate .ledger-table thead {
        display: table-header-group;
    }

    #reportPrintTemplate .ledger-table th {
        position: static !important;
    }

    #reportPrintTemplate .ledger-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    #reportPrintTemplate .report-print-header {
        page-break-after: avoid;
        break-after: avoid;
    }
}

/* ---------- fuel loading indicator ---------- */
#fuel-loader {
    --cycle: 3.4s;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: 'IRANSans', sans-serif;
    transition: opacity 0.45s ease;
}

#fuel-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--bg);
    opacity: 0.3;
}

#fuel-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#fuel-loader .fl-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text1);
    font-size: 20px;
    font-weight: 700;
}

#fuel-loader .fl-dots {
    display: inline-flex;
    gap: 3px;
}

#fuel-loader .fl-dots span {
    animation: fl-dot 1.2s infinite;
}

#fuel-loader .fl-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

#fuel-loader .fl-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fl-needle {
    0%   { transform: rotate(-112deg); }
    38%  { transform: rotate(58deg); }
    48%  { transform: rotate(46deg); }
    58%  { transform: rotate(62deg); }
    78%  { transform: rotate(62deg); }
    100% { transform: rotate(-112deg); }
}

@keyframes fl-rise {
    0%   { transform: translateY(0px); }
    58%  { transform: translateY(-36px); }
    78%  { transform: translateY(-36px); }
    100% { transform: translateY(0px); }
}

@keyframes fl-tilt {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2.2deg); }
}

@keyframes fl-fall {
    0%   { transform: translateY(0px) scale(0.4); opacity: 0; }
    12%  { transform: translateY(8px) scale(1); opacity: 1; }
    88%  { transform: translateY(296px) scale(1); opacity: 1; }
    100% { transform: translateY(312px) scale(0.6); opacity: 0; }
}

@keyframes fl-puddle {
    0%, 100% { transform: scale(0.85); opacity: 0.75; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes fl-dot {
    0%, 100% { opacity: 0.15; }
    40% { opacity: 1; }
}

#fuel-loader .fl-needle {
    transform-origin: 260px 241px;
    animation: fl-needle var(--cycle) ease-in-out infinite;
}

#fuel-loader .fl-rise {
    animation: fl-rise var(--cycle) ease-in-out infinite;
}

#fuel-loader .fl-tilt {
    transform-origin: 260px 272px;
    animation: fl-tilt calc(var(--cycle) / 2) ease-in-out infinite;
}

#fuel-loader .fl-drop-1 {
    animation: fl-fall var(--cycle) ease-in infinite;
}

#fuel-loader .fl-drop-2 {
    animation: fl-fall var(--cycle) ease-in infinite;
    animation-delay: calc(var(--cycle) / -2);
}

#fuel-loader .fl-puddle {
    transform-origin: 88px 430px;
    animation: fl-puddle calc(var(--cycle) / 2) ease-in-out infinite;
}


/* ---------- till (دخل) page v2 ---------- */
:root {
    --till2-neg: #E0785A;
}

.till2-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg, 20px);
    padding: 24px 24px 20px;
    margin-bottom: 14px;
    color: #F4F7FF;
    background:
        radial-gradient(120% 160% at 85% -20%, rgba(79,143,224,0.35), transparent 55%),
        linear-gradient(160deg, #141A33, #1C2547 55%, #23305C);
    box-shadow: 0 18px 40px rgba(20,26,51,0.35);
    animation: till2Rise .5s cubic-bezier(.22,1,.36,1) both;
}

.till2-hero-glow {
    position: absolute;
    inset-inline-start: -60px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63,174,114,0.28), transparent 65%);
    filter: blur(8px);
    animation: till2Float 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes till2Float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 18px); }
}

@keyframes till2Rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.till2-hero-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.till2-hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--theme-highlight, rgba(255,255,255,0.14));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #FFD87A;
    flex-shrink: 0;
    animation: profitIconPop .5s cubic-bezier(.34,1.56,.64,1) both .1s;
}

.till2-hero-label {
    font-size: 14px;
    font-weight: 800;
}

.till2-hero-hint {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .65;
    margin-top: 2px;
}

.till2-hero-value {
    position: relative;
    font-size: 32px;
    font-weight: 800;
    margin: 14px 0 16px;
    letter-spacing: -0.5px;
}

.till2-cash-hero {
    isolation: isolate;
    padding: 22px;
    min-height: 190px;
    color: var(--theme-ink, #18304A);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,0.68));
    background:
        radial-gradient(90% 120% at 12% 8%, rgba(47,169,109,0.24), transparent 52%),
        radial-gradient(80% 110% at 92% 8%, rgba(44,158,184,0.22), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,0.78)), var(--theme-glass, rgba(232,248,242,0.56)));
    box-shadow:
        0 24px 54px rgba(38,70,83,0.16),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,0.9));
}

.till2-cash-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .8;
    background:
        linear-gradient(115deg, transparent 0 32%, var(--theme-glass, rgba(255,255,255,0.46)) 44%, transparent 58%),
        repeating-linear-gradient(90deg, var(--theme-highlight, rgba(255,255,255,0.20)) 0 1px, transparent 1px 56px);
    transform: translateX(18%);
    animation: tillCashSheen 6.5s ease-in-out infinite;
}

.till2-cash-hero.is-negative {
    background:
        radial-gradient(95% 120% at 12% 8%, rgba(224,120,90,0.22), transparent 54%),
        radial-gradient(80% 110% at 92% 8%, var(--theme-highlight, rgba(255,216,122,0.18)), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,0.78)), var(--theme-glass, rgba(255,238,232,0.58)));
}

.till2-cash-hero.is-empty {
    background:
        radial-gradient(90% 120% at 12% 8%, rgba(124,92,252,0.16), transparent 52%),
        radial-gradient(80% 110% at 92% 8%, rgba(44,158,184,0.16), transparent 56%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,0.78)), var(--theme-glass, rgba(243,247,255,0.58)));
}

.till2-cash-hero .till2-hero-glow {
    inset-inline-start: auto;
    inset-inline-end: -82px;
    top: -96px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(47,169,109,0.34), transparent 68%);
}

.till2-cash-hero.is-negative .till2-hero-glow {
    background: radial-gradient(circle, rgba(224,120,90,0.32), transparent 68%);
}

.till2-cash-orb {
    position: absolute;
    inset-inline-start: 24px;
    bottom: -54px;
    width: 148px;
    height: 148px;
    border-radius: 999px;
    background: radial-gradient(circle, var(--theme-glass, rgba(255,255,255,0.68)), rgba(47,169,109,0.13) 58%, transparent 70%);
    filter: blur(.2px);
    animation: till2Float 8s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: -1;
}

.till2-cash-hero .till2-hero-head {
    align-items: flex-start;
}

.till2-cash-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: var(--theme-ink, #24734D);
    background: linear-gradient(135deg, var(--theme-glass, rgba(222,248,234,.96)), var(--theme-glass, rgba(255,255,255,.78)));
    border-color: rgba(47,169,109,.22);
    box-shadow:
        0 12px 24px rgba(47,169,109,.15),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
    animation: till2StepPop .58s cubic-bezier(.34,1.56,.64,1) both .08s, tillCashIconBreath 3.4s ease-in-out infinite .8s;
}

.till2-cash-hero.is-negative .till2-cash-icon {
    color: var(--theme-ink, #B9563E);
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,235,228,.96)), var(--theme-glass, rgba(255,255,255,.78)));
    border-color: rgba(224,120,90,.22);
    box-shadow: 0 12px 24px rgba(224,120,90,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}

.till2-cash-title-wrap {
    min-width: 0;
}

.till2-cash-hero .till2-hero-label {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
    letter-spacing: -.1px;
}

.till2-cash-hero .till2-hero-hint {
    color: var(--theme-ink, rgba(19,35,61,.66));
    opacity: 1;
    max-width: 520px;
}

.till2-cash-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--theme-ink, #24734D);
    background: var(--theme-glass, rgba(222,248,234,.78));
    border: 1px solid rgba(47,169,109,.20);
    font-size: 12px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.75));
}

.till2-cash-hero.is-negative .till2-cash-status {
    color: var(--theme-ink, #B9563E);
    background: var(--theme-glass, rgba(255,235,228,.76));
    border-color: rgba(224,120,90,.22);
}

.till2-cash-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: end;
    gap: 20px;
    margin-top: 22px;
}

.till2-cash-hero .till2-hero-value {
    color: var(--theme-ink, #1F7A4C);
    margin: 0 0 10px;
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.1;
    text-shadow: 0 10px 24px rgba(47,169,109,.13);
}

.till2-cash-hero.is-negative .till2-hero-value {
    color: var(--theme-ink, #C76448);
    text-shadow: 0 10px 24px rgba(224,120,90,.13);
}

.till2-cash-hero.is-empty .till2-hero-value {
    color: var(--theme-ink, #3D5DD8);
    text-shadow: 0 10px 24px rgba(61,93,216,.12);
}

.till2-cash-caption {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12.5px;
    font-weight: 750;
}

.till2-cash-caption i {
    color: var(--theme-ink, #2FA96D);
}

.till2-cash-mini {
    display: grid;
    gap: 10px;
}

.till2-cash-mini-row {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 17px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.7));
    box-shadow: 0 12px 24px rgba(31,48,74,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85));
    animation: till2StepPop .52s cubic-bezier(.34,1.56,.64,1) both;
}

.till2-cash-mini-row:nth-child(2) {
    animation-delay: .08s;
}

.till2-cash-mini-row span,
.till2-cash-mini-row b {
    position: relative;
    z-index: 1;
}

.till2-cash-mini-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--theme-ink, rgba(19,35,61,.72));
    font-size: 12.5px;
    font-weight: 800;
}

.till2-cash-mini-row b {
    color: var(--theme-ink, #1F7A4C);
    font-size: 14px;
}

.till2-cash-mini-row.is-out b {
    color: var(--theme-ink, #C76448);
}

.till2-cash-mini-row em {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--flow);
    opacity: .22;
    background: linear-gradient(90deg, #2FA96D, transparent);
    transform-origin: right center;
    animation: tillCashFlow .9s cubic-bezier(.22,1,.36,1) both .2s;
}

.till2-cash-mini-row.is-out em {
    background: linear-gradient(90deg, #E0785A, transparent);
}

@keyframes tillCashSheen {
    0%, 100% { transform: translateX(28%); opacity: .42; }
    50% { transform: translateX(-18%); opacity: .78; }
}

@keyframes tillCashFlow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes tillCashIconBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.035); }
}

.till2-bar {
    position: relative;
    display: flex;
    gap: 3px;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--theme-highlight, rgba(255,255,255,0.10));
    margin-bottom: 14px;
}

.till2-bar-seg {
    width: 0%;
    border-radius: 999px;
    transition: width 1s cubic-bezier(.22,1,.36,1);
}

.till2-legend {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
}

.till2-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    animation: till2Rise .45s cubic-bezier(.22,1,.36,1) both;
}

.till2-legend-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--theme-highlight, rgba(255,255,255,0.10));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.till2-legend-label {
    flex: 1;
    opacity: .85;
}

.till2-legend-value {
    font-weight: 800;
}

.till2-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 11px 16px;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 800;
    animation: till2Rise .5s cubic-bezier(.22,1,.36,1) both .15s;
}

.till2-banner i {
    font-size: 17px;
}

.till2-banner span {
    flex: 1;
}

.till2-banner b {
    font-size: 14px;
}

.till2-banner.is-short {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px dashed color-mix(in srgb, var(--danger) 45%, transparent);
}

.till2-banner.is-over {
    background: var(--success-bg);
    color: var(--success);
    border: 1px dashed color-mix(in srgb, var(--success) 45%, transparent);
}

.till2-month,
.till2-fuel {
    padding: 10px;
    margin-bottom: 14px;
    animation: till2Rise .5s cubic-bezier(.22,1,.36,1) both .1s;
}

.till2-sec-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.till2-sec-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.till2-sec-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text1);
}

.till2-sec-hint {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text2);
    margin-top: 2px;
}

.till2-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.till2-steps.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.till2-flow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.till2-flow-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(47,169,109,.16), transparent 52%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(244,250,255,.52)));
    box-shadow: 0 20px 45px rgba(31,48,74,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

.till2-flow-card::before {
    content: "";
    position: absolute;
    inset-inline-end: -58px;
    top: -58px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(47,169,109,.22), transparent 68%);
    animation: till2Float 8.5s ease-in-out infinite;
    pointer-events: none;
}

.till2-flow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background: linear-gradient(115deg, transparent 0 36%, var(--theme-glass, rgba(255,255,255,.42)) 48%, transparent 60%);
    transform: translateX(34%);
    animation: tillCashSheen 7.2s ease-in-out infinite;
    pointer-events: none;
}

.till2-flow-out {
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(224,120,90,.16), transparent 52%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(255,246,242,.54)));
}

.till2-flow-out::before {
    background: radial-gradient(circle, rgba(224,120,90,.22), transparent 68%);
}

.till2-flow-card .till2-sec-head,
.till2-flow-card .till2-flow-steps {
    position: relative;
    z-index: 1;
}

.till2-flow-card .till2-sec-head {
    margin-bottom: 16px;
}

.till2-flow-card .till2-sec-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    box-shadow: 0 12px 24px rgba(47,169,109,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    animation: tillCashIconBreath 3.6s ease-in-out infinite;
}

.till2-flow-out .till2-sec-icon {
    box-shadow: 0 12px 24px rgba(224,120,90,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.till2-flow-card .till2-sec-title {
    color: var(--theme-ink, #13233D);
    font-size: 15px;
}

.till2-flow-card .till2-sec-hint {
    margin-top: 3px;
    color: var(--theme-ink, #1F7A4C);
    font-size: 13px;
    font-weight: 900;
    opacity: 1;
}

.till2-flow-out .till2-sec-hint {
    color: var(--theme-ink, #C76448);
}

.till2-flow-steps {
    gap: 10px;
}

.till2-flow-step {
    overflow: hidden;
    min-height: 116px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    border-color: rgba(85,122,180,.20);
    box-shadow: 0 12px 24px rgba(31,48,74,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

.till2-flow-step .till2-step-icon,
.till2-flow-step .till2-step-label,
.till2-flow-step .till2-step-value {
    position: relative;
    z-index: 2;
}

.till2-flow-step .till2-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
}

.till2-flow-step .till2-step-label {
    color: var(--theme-ink, rgba(19,35,61,.72));
    font-size: 12px;
    min-height: 34px;
}

.till2-flow-step .till2-step-value {
    font-size: 15px;
    margin-bottom: 0;
}

.till2-flow-step:hover {
    border-color: rgba(47,169,109,.35);
    box-shadow: 0 16px 30px rgba(31,48,74,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.till2-flow-out .till2-flow-step:hover {
    border-color: rgba(224,120,90,.35);
}

.till2-flow-step.is-total {
    background: linear-gradient(135deg, var(--theme-glass, rgba(222,248,234,.78)), var(--theme-glass, rgba(255,255,255,.64)));
    border-color: rgba(47,169,109,.26);
}

.till2-flow-out .till2-flow-step.is-total {
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,235,228,.78)), var(--theme-glass, rgba(255,255,255,.64)));
    border-color: rgba(224,120,90,.26);
}

@media (max-width: 720px) {
    .till2-flow-grid {
        grid-template-columns: 1fr;
    }
}

.till2-step.is-total {
    background: var(--panel);
    border: 1.5px solid var(--border-strong);
}

.till2-step.is-total .till2-step-label {
    color: var(--text1);
    font-weight: 800;
}

.till2-step.is-total .till2-step-value {
    font-size: 15px;
}

.till2-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 10px 12px;
    animation: till2StepPop .5s cubic-bezier(.34,1.56,.64,1) both;
    transition: transform .2s ease, box-shadow .2s ease;
}

.till2-step[data-op]::before {
    content: attr(data-op);
    position: absolute;
    inset-inline-start: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    color: var(--text2);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

.till2-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

@keyframes till2StepPop {
    from {
        opacity: 0;
        transform: scale(.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.till2-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.till2-step-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
    line-height: 1.4;
}

.till2-step-value {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text1);
}

/* keep +/− on the reading side of the digits in RTL */
.till2-signed,
.till2-step-value,
.till2-legend-value,
.till2-cash-mini-row b,
.till2-chip b {
    direction: ltr;
    unicode-bidi: isolate;
}

.till2-step-value.is-pos {
    color: var(--success);
}

.till2-step-value.is-neg {
    color: var(--danger);
}

.till2-result {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    padding: 14px 18px;
    color: #fff;
    background-size: 200% 200%;
    animation: till2StepPop .55s cubic-bezier(.34,1.56,.64,1) both .4s, profitGradientShift 7s ease infinite;
}

.till2-result.is-profit {
    background-image: linear-gradient(135deg, #1F6B45, #3FAE72 55%, #2FBFA6);
    box-shadow: 0 10px 26px rgba(63,174,114,0.30);
}

.till2-result.is-loss {
    background-image: linear-gradient(135deg, #8A3420, #E0785A 55%, #FF6E3C);
    box-shadow: 0 10px 26px rgba(224,120,90,0.30);
}

.till2-result-face {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--theme-highlight, rgba(255,255,255,0.20));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.till2-result-word {
    font-size: 14.5px;
    font-weight: 800;
    flex: 1;
}

.till2-result-num {
    font-size: 19px;
    font-weight: 800;
}

.till2-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
    background: var(--panel-2);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
}

.till2-fuel-item {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    animation: till2Rise .45s cubic-bezier(.22,1,.36,1) both;
}

.till2-fuel-item .tank-compare-row {
    margin-bottom: 10px;
}

.till2-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-inline-start: 34px;
}

.till2-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
}

.till2-chip i {
    font-size: 13px;
}

.till2-chip b {
    color: var(--text1);
}

.till2-chip.is-sell {
    background: var(--success-bg);
    border-color: transparent;
    color: var(--success);
}

.till2-chip.is-sell b {
    color: var(--success);
}

.till2-fuel-total {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px dashed var(--border-strong);
}

.till2-fuel-total-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text1);
    margin-inline-end: auto;
}

.till2-fuel-total-label i {
    font-size: 15px;
    color: var(--accent-solid);
}

.till2-fuel-total .till2-chip {
    font-size: 12.5px;
    padding: 6px 14px;
    background: var(--panel-2);
}

.till2-capital-panel {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(85% 120% at 94% -8%, rgba(255,193,88,.20), transparent 56%),
        radial-gradient(80% 110% at 8% 10%, rgba(124,92,252,.12), transparent 54%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(248,244,255,.52)));
    box-shadow: 0 22px 48px rgba(31,48,74,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

.till2-capital-panel::before {
    content: "";
    position: absolute;
    inset-inline-end: -72px;
    top: -80px;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,193,88,.25), transparent 68%);
    animation: till2Float 9s ease-in-out infinite;
    pointer-events: none;
}

.till2-capital-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background: linear-gradient(115deg, transparent 0 38%, var(--theme-glass, rgba(255,255,255,.46)) 50%, transparent 62%);
    animation: tillCashSheen 7.4s ease-in-out infinite;
    pointer-events: none;
}

.till2-capital-panel > * {
    position: relative;
    z-index: 1;
}

.till2-capital-head {
    align-items: flex-start;
    margin-bottom: 14px;
}

.till2-capital-main-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    box-shadow: 0 14px 26px rgba(208,144,38,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.till2-capital-panel .till2-sec-title {
    color: var(--theme-ink, #13233D);
    font-size: 15.5px;
}

.till2-capital-panel .till2-sec-hint {
    color: var(--theme-ink, rgba(19,35,61,.66));
    opacity: 1;
    line-height: 1.7;
}

.till2-capital-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 14px;
}

.till2-capital-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 11px 13px;
    border-radius: 17px;
    background: var(--theme-glass, rgba(255,255,255,.60));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow: 0 12px 24px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    animation: till2StepPop .48s cubic-bezier(.34,1.56,.64,1) both;
}

.till2-capital-stat span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--theme-ink, rgba(19,35,61,.68));
    font-size: 12px;
    font-weight: 850;
}

.till2-capital-stat i {
    color: var(--theme-ink, #D18B20);
    font-size: 17px;
}

.till2-capital-stat b {
    color: var(--theme-ink, #182642);
    font-size: 13.5px;
    font-weight: 950;
}

.till2-capital-stat.is-due {
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,244,219,.78)), var(--theme-glass, rgba(255,255,255,.60)));
    border-color: rgba(209,139,32,.22);
}

.till2-capital-stat.is-due b {
    color: var(--theme-ink, #B87518);
}

.till2-capital-list,
.till2-capital-ledger {
    gap: 10px;
    background: var(--theme-highlight, rgba(255,255,255,.34));
    border-radius: 19px;
    padding: 10px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

.till2-capital-account-row,
.till2-capital-ledger-row {
    min-height: 66px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(85,122,180,.20);
    box-shadow: 0 10px 22px rgba(31,48,74,.06), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.till2-capital-account-row:hover,
.till2-capital-ledger-row:hover {
    transform: translateY(-2px);
    border-color: rgba(209,139,32,.32);
    box-shadow: 0 15px 30px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.till2-capital-panel .work-record-title {
    color: var(--theme-ink, #14243F);
    font-weight: 900;
}

.till2-capital-panel .work-record-time {
    color: var(--theme-ink, rgba(19,35,61,.62));
    font-weight: 750;
}

.till2-capital-panel .work-record-amount {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--theme-glass, rgba(255,255,255,.54));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

.till2-capital-panel .acct-pill-btn {
    min-height: 40px;
    border-radius: 13px;
    box-shadow: 0 10px 20px rgba(124,92,252,.13);
}

.till2-capital-subhead {
    margin-top: 18px;
    margin-bottom: 10px;
    padding-top: 4px;
}

.till2-capital-subhead .till2-sec-icon {
    background: var(--theme-glass, rgba(223,230,255,.78));
    color: var(--theme-ink, #4868E8);
}

@media (max-width: 760px) {
    .till2-capital-stats {
        grid-template-columns: 1fr;
    }
    .till2-capital-stat {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .till2-cash-hero {
        padding: 18px;
    }
    .till2-cash-main {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
    }
    .till2-cash-status {
        width: 100%;
        justify-content: center;
        margin-inline-start: 0;
        margin-top: 10px;
    }
    .till2-cash-hero .till2-hero-head {
        flex-wrap: wrap;
    }
    .till2-hero-value {
        font-size: 26px;
    }
    .till2-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .till2-step[data-op]::before {
        display: none;
    }
    .till2-legend {
        grid-template-columns: 1fr;
    }
    .till2-chips {
        padding-inline-start: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .till2-hero,
    .till2-hero-glow,
    .till2-cash-hero::before,
    .till2-cash-orb,
    .till2-cash-icon,
    .till2-cash-mini-row,
    .till2-cash-mini-row em,
    .till2-flow-card::before,
    .till2-flow-card::after,
    .till2-capital-panel::before,
    .till2-capital-panel::after,
    .till2-capital-stat,
    .till-custody-card,
    .till-custody-card::before,
    .till-custody-card::after,
    .till2-legend-item,
    .till2-banner,
    .till2-month,
    .till2-fuel,
    .till2-step,
    .till2-result,
    .till2-fuel-item {
        animation: none;
    }
    .till2-bar-seg {
        transition: none;
    }
}

/* ============================================================
   Premium reskin layer — typography, shell, buttons, motion
   ============================================================ */

/* ---------- focus & accessibility ---------- */
:focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
}

/* ---------- typography scale ---------- */
.greet {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.page-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 16px;
}

.page-title--compact {
    margin-bottom: 4px;
}

.page-sub--compact {
    font-size: 13.5px;
}

.alerts-title,
.compare-title,
.section-label,
.section-label-sm,
.section-label-spaced {
    font-size: 15px;
    font-weight: 800;
    color: var(--text1);
}

/* ---------- surfaces & spacing (8px grid) ---------- */
@media (min-width: 761px) {
    .main {
        padding: 24px 32px;
    }
}

.card {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.card-section,
.card-section-tight {
    padding: 24px;
}

.card-section {
    margin-bottom: 16px;
}

.alerts-card {
    padding: 16px;
    margin-bottom: 16px;
}

.compare-card {
    padding: 16px;
}

.shortcuts-row {
    gap: 16px;
    margin-bottom: 16px;
}

.dash-grid,
.dash-bottom-grid {
    gap: 16px;
}

/* ---------- glass discipline: shell only, subtle blur ---------- */
.top-bar,
html[data-theme="dark"] .top-bar,
.sidebar,
html[data-theme="dark"] .sidebar {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* ---------- sidebar ---------- */
.brand-sub {
    margin: 4px 0 16px;
}

.nav-item {
    position: relative;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    gap: 12px;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.nav-item i {
    font-size: 22px;
    transition: transform .18s ease;
}

.nav-item:hover {
    transform: translateX(-2px);
}

html[dir="rtl"] .nav-item:hover {
    transform: translateX(2px);
}

.nav-item:hover i {
    transform: scale(1.08);
}

.nav-item.active {
    background: var(--accent-bg);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-solid) 30%, transparent);
    animation: navActivate .25s cubic-bezier(.34,1.4,.64,1) both;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-ink) 85%, transparent);
}

@keyframes navActivate {
    from {
        transform: scale(.97);
    }
    to {
        transform: scale(1);
    }
}

.nav-item.active:hover {
    transform: none;
}

.nav-subitem {
    font-size: 13.5px;
    padding: 8px 12px;
}

.nav-subitem i {
    font-size: 19px;
}

.nav-submenu {
    margin-inline-start: 14px;
    padding-inline-start: 10px;
    border-inline-start:1px solid var(--border);
}

/* ---------- top bar ---------- */
.top-bar-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}

.top-bar-icon-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-solid) 35%, transparent);
}

.top-bar-icon-btn:active {
    transform: translateY(0) scale(.94);
}

.top-bar-spacer {
    width: 42px;
    height: 42px;
}

.top-bar-brand {
    font-size: 15px;
    font-weight: 800;
}

.top-bar-search-input {
    height: 42px;
}

/* ---------- buttons ---------- */
.btn {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.btn:active {
    transform: translateY(0) scale(.97);
}

.btn-primary {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-solid) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--accent-solid) 22%, transparent);
}

.btn-primary:hover {
    box-shadow: 0 2px 4px color-mix(in srgb, var(--accent-solid) 40%, transparent), 0 10px 24px color-mix(in srgb, var(--accent-solid) 32%, transparent);
}

html[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #27AE93, #3ED9BE);
}

.btn .ui-ripple,
.top-bar-icon-btn .ui-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .22;
    transform: scale(0);
    animation: uiRipple .55s ease-out forwards;
    pointer-events: none;
}

.top-bar-icon-btn {
    position: relative;
    overflow: hidden;
}

@keyframes uiRipple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* ---------- dashboard shortcut cards ---------- */
.shortcut {
    padding: 16px 8px;
    border-radius: 16px;
}

.shortcut:hover {
    box-shadow: var(--elev-hover);
    border-color: var(--border-strong);
}

.shortcut-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin: 0 auto 8px;
}

.shortcut-label {
    font-weight: 700;
}

/* ---------- fuel progress bars ---------- */
.tank-capsule-fill.fuel-petrol {
    box-shadow: 0 0 6px rgba(255,150,20,0.35), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,0.35));
}

.tank-capsule-fill.fuel-diesel {
    box-shadow: 0 0 6px rgba(30,190,110,0.30), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,0.3));
}

.tank-capsule-fill.fuel-cng {
    box-shadow: 0 0 6px rgba(45,140,255,0.30), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,0.3));
}

.tank-compare-row {
    position: relative;
}

.tank-compare-row[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    inset-inline-end: 40px;
    background: var(--text1);
    color: var(--panel);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 5;
}

.tank-compare-row[data-tip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- lists & rows ---------- */
.activity-row {
    border-radius: 12px;
    transition: background .15s ease;
}

.activity-row:hover {
    background: var(--panel-2);
}

.employee-row {
    border-radius: 14px;
    transition: background .15s ease;
}

.employee-row:hover {
    background: var(--panel-2);
}

/* ---------- scrollbars ---------- */
.activity-log-scroll::-webkit-scrollbar,
.main ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.activity-log-scroll::-webkit-scrollbar-thumb,
.main ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .nav-item i,
    .top-bar-icon-btn,
    .btn,
    .card,
    .shortcut {
        transition: none;
    }
    .btn .ui-ripple,
    .top-bar-icon-btn .ui-ripple,
    .nav-item.active {
        animation: none;
    }
}

/* ============================================================
   Cross-project UX hardening — navigation, contrast, mobile
   ============================================================ */

html {
    color-scheme: light;
    scroll-padding-top: 108px;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

::selection {
    background: var(--accent-solid);
    color: var(--accent-ink);
}

.skip-link {
    position: fixed;
    inset-inline-start: 18px;
    top: 10px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--text1);
    color: var(--panel);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--elev-hover);
    transform: translateY(-140%);
    transition: transform .18s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

body.modal-open,
body.mobile-nav-open {
    overflow: hidden;
}

#mainContent:focus {
    outline: none;
}

button,
input,
select,
textarea,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

.card {
    border-color: var(--card-border);
}

.card[role="button"],
.employee-row[role="button"],
.is-clickable-row[role="button"],
.sales-details-card[role="button"] {
    cursor: pointer;
}

.card[role="button"]:hover,
.card[role="button"]:focus-visible {
    border-color: var(--border-strong);
    box-shadow: var(--elev-hover);
}

.employee-row[role="button"]:focus-visible,
.is-clickable-row[role="button"]:focus-visible,
.cal-cell[role="button"]:focus-visible,
.sd-month-cell[role="button"]:focus-visible,
.sd-year-cell[role="button"]:focus-visible {
    border-radius: 10px;
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
}

.nav-parent.active {
    background: var(--accent-tint-bg);
    color: var(--accent-solid);
    box-shadow: none;
}

.nav-parent.active::before {
    background: var(--accent-solid);
}

.nav-parent.active .nav-parent-chevron {
    color: currentColor;
}

.nav-subitem.active {
    background: var(--accent-bg);
    color: var(--accent-ink);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-solid) 24%, transparent);
}

.nav-item[role="button"]:focus-visible,
.lang-menu-item:focus-visible {
    outline-offset: -2px;
}

.lang-menu-item {
    min-height: 40px;
}

.top-bar-icon-btn,
.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.btn {
    min-height: 44px;
}

.filter-tab {
    min-height: 40px;
}

.pill-btn {
    min-height: 42px;
}

.task-del {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.task-del:hover,
.task-del:focus-visible {
    color: var(--danger);
    background: var(--danger-bg);
}

.field label {
    color: var(--text1);
    font-weight: 700;
}

.field input::placeholder,
.field textarea::placeholder,
.top-bar-search-input::placeholder {
    color: var(--text2);
    opacity: 1;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--border-strong);
}

.overlay {
    background: rgba(12, 18, 32, .58);
    overscroll-behavior: contain;
}

.modal {
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sales-hero-card,
.finance-profit-card.is-positive {
    background-image: linear-gradient(135deg, #145A3A, #1E7D50 48%, #176E63);
    box-shadow: 0 14px 32px rgba(20, 90, 58, .28);
}

.expenses-hero-card,
.finance-profit-card.is-negative {
    background-image: linear-gradient(135deg, #752B1B, #A94331 48%, #BF4D2C);
    box-shadow: 0 14px 32px rgba(117, 43, 27, .28);
}

.sales-hero-card,
.expenses-hero-card,
.finance-profit-card {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
}

.ledger-table-wrap,
.activity-log-scroll {
    overscroll-behavior: contain;
}

.till-custody-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    margin-top: 20px;
}

.till-custody-grid > .card-section {
    min-width: 0;
    margin-bottom: 0;
}

.till-custody-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(124,92,252,.16), transparent 55%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(242,247,255,.52)));
    box-shadow: 0 22px 48px rgba(31,48,74,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    animation: till2Rise .5s cubic-bezier(.22,1,.36,1) both;
}

.till-location-card {
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(44,158,184,.16), transparent 55%),
        radial-gradient(80% 110% at 6% 8%, rgba(47,169,109,.12), transparent 55%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(239,250,248,.52)));
}

.till-owner-card {
    background:
        radial-gradient(90% 120% at 90% -10%, rgba(124,92,252,.18), transparent 55%),
        radial-gradient(80% 110% at 6% 8%, rgba(255,193,88,.13), transparent 55%),
        linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(244,246,255,.54)));
}

.till-custody-card::before {
    content: "";
    position: absolute;
    inset-inline-end: -64px;
    top: -70px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(124,92,252,.22), transparent 68%);
    animation: till2Float 8.8s ease-in-out infinite;
    pointer-events: none;
}

.till-location-card::before {
    background: radial-gradient(circle, rgba(47,169,109,.22), transparent 68%);
}

.till-custody-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background: linear-gradient(115deg, transparent 0 38%, var(--theme-glass, rgba(255,255,255,.44)) 50%, transparent 62%);
    animation: tillCashSheen 7.6s ease-in-out infinite;
    pointer-events: none;
}

.till-custody-card > * {
    position: relative;
    z-index: 1;
}

.till-custody-head {
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.till-custody-head .section-title-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-ink, #14243F);
    font-size: 15.5px;
    font-weight: 950;
}

.till-custody-head .section-title-icon i {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #7C5CFC, #5A7CFF);
    box-shadow: 0 12px 24px rgba(124,92,252,.20);
}

.till-location-card .section-title-icon i {
    background: linear-gradient(135deg, #2FA96D, #2C9EB8);
    box-shadow: 0 12px 24px rgba(47,169,109,.18);
}

.till-custody-head .btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(77,97,232,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

.till-custody-hint {
    color: var(--theme-ink, rgba(19,35,61,.66));
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.8;
    margin: -2px 0 12px;
}

.till-custody-balance {
    min-height: 48px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.60));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow: 0 10px 22px rgba(31,48,74,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

.till-custody-balance span:first-child {
    color: var(--theme-ink, rgba(19,35,61,.70));
    font-weight: 850;
}

.till-custody-empty {
    min-height: 118px;
    border-radius: 18px;
    border: 1.5px dashed rgba(85,122,180,.36);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(124,92,252,.10), transparent 58%),
        var(--theme-glass, rgba(255,255,255,.38));
    color: var(--theme-ink, rgba(19,35,61,.66));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.70));
}

.till-custody-empty i {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-ink, #6D7890);
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    box-shadow: 0 10px 20px rgba(31,48,74,.07);
}

.till-custody-card .cash-ledger-list {
    max-height: 320px;
    padding: 10px;
    border-radius: 18px;
    background: var(--theme-highlight, rgba(255,255,255,.34));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

.cash-ledger-list {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-inline-end: 3px;
}

.cash-section-subhead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    color: var(--theme-ink, #14243F);
    font-size: 13px;
    font-weight: 950;
}

.till-custody-card .cash-section-subhead::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #7C5CFC;
    box-shadow: 0 0 0 5px rgba(124,92,252,.12);
}

.cash-setup-callout,
.cash-unassigned-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(209,139,32,.30);
    border-inline-start:1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,244,219,.78)), var(--theme-glass, rgba(255,255,255,.62)));
    color: var(--text1);
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 12px 26px rgba(209,139,32,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

.cash-setup-callout > i,
.cash-unassigned-note > i {
    flex: 0 0 auto;
    color: var(--warning);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    font-size: 19px;
}

.cash-setup-callout > span,
.cash-unassigned-note > div {
    flex: 1;
    min-width: 0;
}

.cash-unassigned-note strong,
.cash-unassigned-note span {
    display: block;
}

.cash-unassigned-note span {
    margin-top: 2px;
    color: var(--text2);
}

.cash-record-unassigned {
    border-inline-start:1px solid var(--border);
    background: color-mix(in srgb, var(--warning-bg) 54%, transparent);
}

.till-custody-card .cash-handover-row,
.till-custody-card .cash-location-row {
    min-height: 66px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    border: 1px solid rgba(85,122,180,.20);
    box-shadow: 0 10px 22px rgba(31,48,74,.06), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.till-custody-card .cash-handover-row:hover,
.till-custody-card .cash-location-row:hover {
    transform: translateY(-2px);
    border-color: rgba(124,92,252,.30);
    box-shadow: 0 15px 30px rgba(31,48,74,.10), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.till-location-card .cash-location-row:hover {
    border-color: rgba(47,169,109,.30);
}

.till-custody-card .work-record-title {
    color: var(--theme-ink, #14243F);
    font-weight: 900;
}

.till-custody-card .work-record-time {
    color: var(--theme-ink, rgba(19,35,61,.62));
    font-weight: 750;
}

.till-custody-card .work-record-amount {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--theme-glass, rgba(255,255,255,.54));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.70));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

.cash-location-row .work-record-amount {
    margin-inline-start: auto;
}

.acct-pill-btn:disabled {
    cursor: not-allowed;
    opacity: .48;
    transform: none;
}

@media (max-width: 980px) {
    .till-custody-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .top-bar.search-open {
        gap: 8px;
    }

    .top-bar.search-open .top-bar-brand {
        display: none;
    }

    .top-bar.search-open .top-bar-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .top-bar.search-open .top-bar-search.open .top-bar-search-input {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        margin-inline-end: 8px;
        padding: 0 16px;
        opacity: 1;
        background: var(--panel-2);
        box-shadow: none;
    }

    body {
        font-size: 16px;
    }

    .top-bar {
        gap: 6px;
        padding: 12px;
    }

    .sidebar.mobile-open {
        top: 69px;
        max-height: calc(100dvh - 69px);
        background: var(--theme-glass, rgba(255, 255, 255, .97));
        border-bottom: 1px solid var(--border-strong);
        overscroll-behavior: contain;
    }

    html[data-theme="dark"] .sidebar.mobile-open {
        background: rgba(27, 31, 37, .98);
    }

    .sidebar.mobile-open .nav-item {
        min-height: 44px;
    }

    .sidebar.mobile-open .mobile-menu-settings {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
        padding: 16px 8px 4px;
        border-top: 1px solid var(--border);
    }

    .sidebar.mobile-open .top-bar-lang-wrap,
    .sidebar.mobile-open .theme-toggle {
        width: 100%;
    }

    .sidebar.mobile-open .top-bar-lang-wrap > .top-bar-icon-btn,
    .sidebar.mobile-open .theme-toggle {
        min-height: 44px;
        width: 100%;
        border-radius: 12px;
    }

    .sidebar.mobile-open .top-bar-lang-wrap > .top-bar-icon-btn {
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .sidebar.mobile-open .top-bar-lang-wrap > .top-bar-icon-btn::after {
        content: 'زبان';
        margin-inline-start: 10px;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
    }

    .sidebar.mobile-open .theme-toggle::after {
        content: 'تغییر تم';
        font: inherit;
        font-size: 14px;
        font-weight: 700;
    }

    .sidebar.mobile-open .top-bar-lang-wrap .lang-menu {
        position: static;
        width: 100%;
        margin-top: 8px;
        background: var(--panel);
        border-color: var(--border);
        box-shadow: none;
    }

    .top-bar-search.open .top-bar-search-input {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline: 12px;
        width: auto;
        margin: 0;
        padding: 0 16px;
        z-index: 48;
        background: var(--panel);
        border-color: var(--border-strong);
        box-shadow: var(--elev-hover);
    }

    .filter-tab,
    .pill-btn,
    .task-del {
        min-height: 44px;
    }

    .tanks-topbar-btns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .tanks-topbar-btns .btn {
        width: 100%;
        min-width: 0;
    }

    .tanks-topbar-btns .btn:only-child,
    .tanks-topbar-btns .btn:nth-child(3):last-child {
        grid-column: 1 / -1;
    }

    .grid3 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .field input,
    .field select,
    .field textarea,
    .top-bar-search-input {
        font-size: 16px;
    }

    .modal {
        max-height: calc(100dvh - 24px);
        padding: 20px;
    }

    .cash-ledger-list {
        max-height: 320px;
    }

    .cash-setup-callout {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .cash-setup-callout .btn {
        width: 100%;
    }

    .cash-handover-row,
    .cash-location-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
    }

    .cash-handover-row .work-record-icon,
    .cash-location-row .work-record-icon {
        grid-column: 1;
        grid-row: 1;
    }

    .cash-handover-row .work-record-body,
    .cash-location-row .work-record-body,
    .cash-handover-row .work-record-amount,
    .cash-location-row .work-record-amount,
    .cash-handover-row .acct-pill-btn,
    .cash-location-row .acct-pill-btn,
    .cash-handover-row .ledger-row-receipt-btn {
        grid-column: 2;
        min-width: 0;
        margin-inline-start: 0;
        justify-self: start;
    }
}

@media (max-width: 500px) {
    .top-bar:not(.search-open) {
        display: grid;
        grid-template-columns: 44px minmax(40px, 1fr) 44px 44px 44px;
        align-items: center;
        justify-content: normal;
        column-gap: 6px;
    }

    .top-bar:not(.search-open) .top-bar-nav-group {
        grid-column: 1;
    }

    .top-bar:not(.search-open) .top-bar-brand {
        grid-column: 2;
        width: 100%;
    }

    .top-bar:not(.search-open) .top-bar-search {
        grid-column: 3;
    }

    .top-bar:not(.search-open) .top-bar-notifications {
        grid-column: 4;
    }

    .top-bar:not(.search-open) > .top-bar-icon-btn:last-child {
        grid-column: 5;
    }

    .top-bar-brand > [data-i18n="brandName"] {
        display: none;
    }

    .top-bar-brand {
        flex: 0 1 auto;
        min-width: 40px;
    }

    .top-bar-logo {
        height: 38px;
        max-width: 46px;
    }

    .history-item,
    .activity-row {
        gap: 8px;
        flex-wrap: wrap;
    }

    .activity-row-time {
        margin-inline-start: auto;
    }
}

/* ---------- liquid-glass navigation shell ---------- */
.top-bar,
.sidebar {
    isolation: isolate;
    background:
        radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255,255,255,.4)), transparent 30%),
        radial-gradient(circle at 94% 100%, rgba(103,151,255,.1), transparent 34%),
        linear-gradient(135deg, var(--theme-highlight, rgba(255,255,255,.2)), var(--theme-highlight, rgba(255,255,255,.07)) 52%, var(--theme-highlight, rgba(228,238,255,.14)));
    border-color: var(--theme-stroke, rgba(255,255,255,.68));
    box-shadow:
        0 18px 48px rgba(46,66,138,.14),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)),
        inset 0 -1px 0 rgba(86,107,180,.08);
    backdrop-filter: blur(5px) saturate(145%);
    -webkit-backdrop-filter: blur(5px) saturate(145%);
}

.top-bar::before,
.sidebar::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 34%, var(--theme-highlight, rgba(255,255,255,.32)) 48%, transparent 61%),
        linear-gradient(180deg, var(--theme-highlight, rgba(255,255,255,.32)), transparent 24%);
    opacity: .38;
}

.top-bar {
    overflow: visible;
}

.sidebar {
    overflow-x: hidden;
    overflow-y: auto;
}

.top-bar > *,
.sidebar > * {
    position: relative;
    z-index: 1;
}

html[data-theme="dark"] .top-bar,
html[data-theme="dark"] .sidebar {
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.08), transparent 30%),
        radial-gradient(circle at 94% 100%, rgba(80,119,210,.1), transparent 35%),
        linear-gradient(135deg, rgba(35,41,52,.34), rgba(17,21,28,.24) 54%, rgba(28,35,50,.3));
    border-color: rgba(255,255,255,.15);
    box-shadow:
        0 20px 52px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.22);
}

html[data-theme="dark"] .top-bar::before,
html[data-theme="dark"] .sidebar::before {
    background:
        radial-gradient(circle at 14% 0%, rgba(255,255,255,.16), transparent 34%),
        linear-gradient(110deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
}

.top-bar-icon-btn {
    background: color-mix(in srgb, var(--panel) 66%, transparent);
    border-color: color-mix(in srgb, var(--glass-border) 82%, var(--border));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.55)), 0 5px 14px rgba(38,52,112,.08);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

@media (max-width: 760px) {
    .top-bar {
        margin: 10px 10px 0;
        top: 10px;
        border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
        border-radius: 20px;
    }

    .sidebar.mobile-open {
        top: 84px;
        inset-inline: 10px;
        width: auto;
        max-height: calc(100dvh - 96px);
        margin: 0;
        border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
        border-radius: 22px;
        background:
            radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255,255,255,.44)), transparent 30%),
            radial-gradient(circle at 96% 100%, rgba(91,137,242,.12), transparent 36%),
            linear-gradient(145deg, var(--theme-highlight, rgba(255,255,255,.22)), var(--theme-highlight, rgba(238,244,255,.12)));
        box-shadow: 0 22px 56px rgba(31,38,90,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
        backdrop-filter: blur(7px) saturate(150%);
        -webkit-backdrop-filter: blur(7px) saturate(150%);
    }

    html[data-theme="dark"] .sidebar.mobile-open {
        background:
            radial-gradient(circle at 8% 0%, rgba(255,255,255,.09), transparent 31%),
            radial-gradient(circle at 96% 100%, rgba(75,112,205,.11), transparent 36%),
            linear-gradient(145deg, rgba(35,41,52,.38), rgba(17,21,28,.28));
        border-color: rgba(255,255,255,.15);
        box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
    }
}

/* ---------- selective liquid-glass surfaces ---------- */
.top-bar,
.sidebar,
.lang-menu,
.date-picker-popover,
.modal,
.shortcut,
.metric-card:not(.accent),
.finance-card,
.sales-details-card,
.price-widget {
    --text2: var(--text-muted-on-glass);
}

.modal .field-system-note {
    color: var(--text-muted-on-glass);
    background: color-mix(in srgb, var(--panel) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-strong) 58%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
}

.modal input::placeholder,
.modal textarea::placeholder,
.lang-menu,
.date-picker-popover {
    color: var(--text-muted-on-glass);
}

.overlay {
    background: rgba(12,18,32,.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

html[data-theme="dark"] .overlay {
    background: rgba(4,7,12,.5);
}

.lang-menu,
.date-picker-popover,
.modal {
    background:
        radial-gradient(circle at 10% 0%, var(--theme-glass, rgba(255,255,255,.56)), transparent 32%),
        radial-gradient(circle at 96% 100%, rgba(82,130,240,.12), transparent 38%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.42)), var(--theme-highlight, rgba(242,247,255,.24)));
    border-color: var(--theme-stroke, rgba(255,255,255,.76));
    box-shadow:
        0 22px 58px rgba(31,45,100,.2),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)),
        inset 0 -1px 0 rgba(67,91,164,.08);
    backdrop-filter: blur(12px) saturate(165%);
    -webkit-backdrop-filter: blur(12px) saturate(165%);
}

.shortcut,
.metric-card:not(.accent),
.finance-card,
.sales-details-card,
.price-widget {
    background:
        radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255,255,255,.58)), transparent 34%),
        radial-gradient(circle at 96% 100%, rgba(79,110,247,.09), transparent 38%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.6)), var(--theme-glass, rgba(246,249,255,.42)));
    border-color: var(--theme-stroke, rgba(255,255,255,.74));
    box-shadow:
        0 12px 30px rgba(40,57,120,.1),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)),
        inset 0 -1px 0 rgba(76,99,170,.06);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
}

.shortcut:hover,
.metric-card:not(.accent):hover,
.finance-card:hover,
.sales-details-card:hover {
    border-color: var(--theme-stroke, rgba(255,255,255,.94));
    box-shadow:
        0 18px 42px rgba(35,52,118,.16),
        inset 0 1px 0 var(--theme-highlight, #fff);
}

.modal .field input,
.modal .field select,
.modal .field textarea,
.modal-search-field input,
.date-picker-field {
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

html[data-theme="dark"] .lang-menu,
html[data-theme="dark"] .date-picker-popover,
html[data-theme="dark"] .modal {
    background:
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.1), transparent 32%),
        radial-gradient(circle at 96% 100%, rgba(76,116,214,.12), transparent 38%),
        linear-gradient(145deg, rgba(36,42,53,.62), rgba(17,21,28,.48));
    border-color: rgba(255,255,255,.16);
    box-shadow:
        0 24px 64px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.11);
}

html[data-theme="dark"] .shortcut,
html[data-theme="dark"] .metric-card:not(.accent),
html[data-theme="dark"] .finance-card,
html[data-theme="dark"] .sales-details-card,
html[data-theme="dark"] .price-widget {
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(circle at 96% 100%, rgba(76,116,214,.09), transparent 38%),
        linear-gradient(145deg, rgba(34,40,51,.7), rgba(22,27,35,.58));
    border-color: rgba(255,255,255,.12);
    box-shadow:
        0 14px 34px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- dashboard liquid cards — unified visual language ---------- */
#view-dashboard {
    --dash-card-tone: #4F6EF7;
    --dash-card-tint: rgba(79,110,247,.12);
}

#view-dashboard .shortcut,
#view-dashboard .compare-card,
#view-dashboard .price-widget,
#view-dashboard .side-card,
#view-dashboard .card-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    background:
        radial-gradient(circle at 7% 0%, var(--theme-glass, rgba(255,255,255,.72)), transparent 31%),
        radial-gradient(circle at 100% 100%, var(--dash-card-tint), transparent 40%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.56)), var(--theme-highlight, rgba(242,247,255,.3)));
    box-shadow:
        0 14px 34px rgba(36,52,112,.11),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),
        inset 0 -1px 0 rgba(77,98,165,.06);
    backdrop-filter: blur(10px) saturate(155%);
    -webkit-backdrop-filter: blur(10px) saturate(155%);
}

#view-dashboard .shortcut::before,
#view-dashboard .compare-card::before,
#view-dashboard .price-widget::before,
#view-dashboard .side-card::before,
#view-dashboard .card-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 170px;
    height: 170px;
    inset-inline-end: -92px;
    top: -105px;
    border-radius: 50%;
    background: var(--dash-card-tint);
    filter: blur(13px);
    pointer-events: none;
}

#view-dashboard .sc-blue {
    --dash-card-tone: #2F80ED;
    --dash-card-tint: rgba(47,128,237,.18);
}

#view-dashboard .sc-red,
#view-dashboard .price-widget {
    --dash-card-tone: #F06A4D;
    --dash-card-tint: rgba(240,106,77,.16);
}

#view-dashboard .sc-cyan,
#view-dashboard .card-section {
    --dash-card-tone: #4F6EF7;
    --dash-card-tint: rgba(79,110,247,.15);
}

#view-dashboard .sc-violet,
#view-dashboard .compare-card {
    --dash-card-tone: #45A667;
    --dash-card-tint: rgba(69,166,103,.15);
}

#view-dashboard .side-card {
    --dash-card-tone: #8B67E8;
    --dash-card-tint: rgba(139,103,232,.14);
}

#view-dashboard .shortcut {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-color: color-mix(in srgb, var(--dash-card-tone) 18%, var(--theme-stroke, rgba(255,255,255,.82)));
}

#view-dashboard .shortcut:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--dash-card-tone) 42%, var(--theme-stroke, #fff));
    box-shadow:
        0 18px 40px color-mix(in srgb, var(--dash-card-tone) 17%, transparent),
        inset 0 1px 0 var(--theme-highlight, #fff);
}

#view-dashboard .shortcut-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--dash-card-tone) 68%, var(--theme-surface, #fff)),
        var(--dash-card-tone));
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.78));
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--dash-card-tone) 27%, transparent),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.38));
}

#view-dashboard .shortcut-icon i {
    color: #fff !important;
    font-size: 24px;
}

#view-dashboard .shortcut-label {
    font-weight: 800;
    color: var(--text1);
}

#view-dashboard .compare-title,
#view-dashboard .section-label,
#view-dashboard .tasks-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

#view-dashboard .compare-title::before,
#view-dashboard .section-label::before,
#view-dashboard .tasks-title::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--dash-card-tone) 65%, var(--theme-surface, #fff)),
        var(--dash-card-tone));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--dash-card-tone) 11%, transparent);
}

#view-dashboard .compare-icon-circle,
#view-dashboard .price-row-icon-circle,
#view-dashboard .activity-row-icon {
    border: 1px solid color-mix(in srgb, currentColor 22%, var(--theme-stroke, rgba(255,255,255,.72)));
    box-shadow: 0 6px 15px color-mix(in srgb, currentColor 16%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-dashboard .compare-icon-circle {
    width: 32px;
    height: 32px;
}

#view-dashboard .price-row-icon-circle,
#view-dashboard .activity-row-icon {
    width: 36px;
    height: 36px;
}

#view-dashboard .tank-compare-row,
#view-dashboard .price-widget-body .price-list-row,
#view-dashboard .activity-row {
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.58));
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 48%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.62));
}

#view-dashboard .tank-compare-row {
    padding: 8px 10px;
    margin-bottom: 8px;
}

#view-dashboard .price-widget-body {
    padding: 8px 12px 10px;
}

#view-dashboard .price-widget-body .price-list-row {
    padding: 8px 10px;
    margin-bottom: 6px;
}

#view-dashboard .price-widget-body .price-list-row:last-child {
    margin-bottom: 0;
}

#view-dashboard .activity-log-scroll {
    display: grid;
    gap: 7px;
    padding: 2px;
}

#view-dashboard .activity-row {
    padding: 9px 10px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#view-dashboard .activity-row:hover {
    border-color: color-mix(in srgb, var(--dash-card-tone) 26%, var(--theme-stroke, rgba(255,255,255,.7)));
    background: color-mix(in srgb, var(--dash-card-tint) 42%, var(--panel));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--dash-card-tone) 9%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-dashboard .price-widget-banner {
    position: relative;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--dash-card-tone) 82%, var(--theme-surface, #fff)),
        #FFB13C);
    box-shadow: inset 0 -1px 0 var(--theme-highlight, rgba(255,255,255,.34));
}

#view-dashboard .cal-cell.today {
    background: linear-gradient(145deg, #A98AF4, var(--dash-card-tone));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--dash-card-tone) 24%, transparent);
}

#view-dashboard .cal-cell.has-task:not(.today) {
    color: var(--theme-ink, #087456);
    font-weight: 800;
    background:
        radial-gradient(circle at 28% 18%, var(--theme-glass, rgba(255,255,255,.72)), transparent 34%),
        linear-gradient(145deg, rgba(111,224,184,.5), rgba(44,190,143,.2));
    border: 1px solid rgba(31,170,124,.38);
    box-shadow: 0 6px 14px rgba(31,170,124,.14), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8));
}

#view-dashboard .cal-cell.has-task:not(.today):hover {
    color: var(--theme-ink, #056347);
    border-color: rgba(20,151,106,.58);
    background: linear-gradient(145deg, rgba(125,232,193,.68), rgba(45,193,145,.3));
    box-shadow: 0 8px 18px rgba(31,170,124,.2), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

#view-dashboard .cal-cell.has-task .dot {
    position: absolute;
    width: 6px;
    height: 6px;
    inset-inline-end: 5px;
    top: 5px;
    margin: 0;
    background: #159B70;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.88));
    box-shadow: 0 0 0 3px rgba(21,155,112,.12);
}

#view-dashboard .cal-cell.today.has-task {
    box-shadow:
        0 7px 16px color-mix(in srgb, var(--dash-card-tone) 24%, transparent),
        0 0 0 2px rgba(53,202,149,.58);
}

#view-dashboard .cal-cell.today.has-task .dot {
    background: #5DE2AF;
    border-color: var(--theme-stroke, rgba(255,255,255,.95));
    box-shadow: 0 0 0 3px rgba(93,226,175,.2);
}

#view-dashboard .add-task-form {
    border-top-color: rgba(255,255,255,.64);
}

#view-dashboard .add-task-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 0%, var(--theme-highlight, rgba(255,255,255,.3)), transparent 34%),
        linear-gradient(135deg, #A47BEF, #7057D9 54%, #4F6EF7);
    box-shadow:
        0 10px 22px rgba(100,78,204,.27),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.42));
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

#view-dashboard .add-task-btn i {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    background: var(--theme-highlight, rgba(255,255,255,.18));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.3));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

#view-dashboard .add-task-btn:hover {
    transform: translateY(-2px);
    filter: saturate(112%) brightness(1.04);
    box-shadow:
        0 14px 28px rgba(100,78,204,.34),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.5));
}

#view-dashboard .add-task-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(100,78,204,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.36));
}

#view-dashboard .add-task-btn:focus-visible {
    outline: 3px solid rgba(79,110,247,.28);
    outline-offset: 3px;
}

#view-dashboard .task-item {
    padding: 8px 9px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.56));
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 45%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.6));
}

html[data-theme="dark"] #view-dashboard .shortcut,
html[data-theme="dark"] #view-dashboard .compare-card,
html[data-theme="dark"] #view-dashboard .price-widget,
html[data-theme="dark"] #view-dashboard .side-card,
html[data-theme="dark"] #view-dashboard .card-section {
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 7% 0%, rgba(255,255,255,.1), transparent 31%),
        radial-gradient(circle at 100% 100%, var(--dash-card-tint), transparent 40%),
        linear-gradient(145deg, rgba(35,42,54,.66), rgba(17,22,30,.5));
    box-shadow: 0 16px 38px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.09);
}

html[data-theme="dark"] #view-dashboard .tank-compare-row,
html[data-theme="dark"] #view-dashboard .price-widget-body .price-list-row,
html[data-theme="dark"] #view-dashboard .activity-row,
html[data-theme="dark"] #view-dashboard .task-item {
    border-color: rgba(255,255,255,.09);
    background: rgba(18,23,31,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] #view-dashboard .cal-cell.has-task:not(.today) {
    color: #8EF0CA;
    border-color: rgba(70,210,160,.34);
    background: linear-gradient(145deg, rgba(40,133,104,.42), rgba(20,78,63,.34));
    box-shadow: 0 7px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce) {
    #view-dashboard .shortcut,
    #view-dashboard .shortcut-icon,
    #view-dashboard .activity-row,
    #view-dashboard .add-task-btn {
        transition: none !important;
    }
}

/* ---------- tanks inventory — dashboard-aligned liquid UI ---------- */
#view-tanks {
    --tanks-tone: #4F6EF7;
    --tanks-tint: rgba(79,110,247,.13);
}

#view-tanks .tanks-topbar {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    padding: 15px 17px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    border-radius: 20px;
    background:
        radial-gradient(circle at 5% 0%, var(--theme-glass, rgba(255,255,255,.72)), transparent 31%),
        radial-gradient(circle at 100% 100%, var(--tanks-tint), transparent 40%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.55)), var(--theme-highlight, rgba(241,247,255,.3)));
    box-shadow: 0 14px 34px rgba(36,52,112,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    backdrop-filter: blur(10px) saturate(155%);
    -webkit-backdrop-filter: blur(10px) saturate(155%);
}

#view-tanks .tanks-topbar::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    inset-inline-end: -82px;
    top: -112px;
    border-radius: 50%;
    background: rgba(73,194,215,.17);
    filter: blur(14px);
}

#view-tanks .tanks-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

#view-tanks .tanks-heading-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 23px;
    background: linear-gradient(145deg, #6E91FF, #405BE2);
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.78));
    box-shadow: 0 9px 21px rgba(64,91,226,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
}

#view-tanks .page-title {
    margin-bottom: 3px;
}

#view-tanks .tanks-topbar-btns .btn {
    min-height: 44px;
    gap: 8px;
    padding-inline: 12px;
    border-radius: 13px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    box-shadow: 0 7px 18px rgba(44,58,116,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

#view-tanks .tanks-topbar-btns .btn i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 11%, transparent);
}

#view-tanks .tanks-topbar-btns .btn-primary {
    background: linear-gradient(135deg, #6F88F4, #405BDD);
    box-shadow: 0 9px 20px rgba(64,91,221,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.34));
}

#view-tanks .tanks-topbar-btns .btn-outline-success {
    background: linear-gradient(145deg, var(--theme-glass, rgba(232,251,241,.9)), var(--theme-glass, rgba(211,243,226,.68)));
    border-color: rgba(57,169,119,.24);
}

#view-tanks .tanks-topbar-btns .btn:hover {
    transform: translateY(-2px);
    filter: saturate(108%) brightness(1.02);
}

#view-tanks #tankSummaryRow {
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
}

#view-tanks .tank-metric-card,
#view-tanks .tank-metric-card.accent {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 102px;
    padding: 14px;
    color: var(--text1);
    border: 1px solid color-mix(in srgb, var(--metric-tone) 15%, var(--theme-stroke, rgba(255,255,255,.78)));
    background:
        radial-gradient(circle at 100% 0%, var(--metric-tint), transparent 47%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.6)), var(--theme-highlight, rgba(244,248,255,.34)));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--metric-tone) 9%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(9px) saturate(150%);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#view-tanks .tank-metric-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--metric-tone) 36%, var(--theme-stroke, rgba(255,255,255,.78)));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--metric-tone) 15%, transparent), inset 0 1px 0 var(--theme-highlight, #fff);
}

#view-tanks .tank-metric-card .metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--metric-tone) 66%, var(--theme-surface, #fff)), var(--metric-tone));
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.76));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--metric-tone) 23%, transparent);
}

#view-tanks .tank-metric-card .metric-label {
    color: var(--text2);
    font-weight: 700;
}

#view-tanks .tank-metric-card .metric-value {
    color: var(--text1);
    font-size: clamp(16px, 1.35vw, 20px);
    font-weight: 800;
}

#view-tanks .tank-metric-card.is-danger .metric-value {
    color: var(--danger);
}

#view-tanks .tank-controls-row {
    padding: 10px 12px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 17px;
    background:
        radial-gradient(circle at 5% 0%, var(--theme-glass, rgba(255,255,255,.66)), transparent 34%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.54)), var(--theme-highlight, rgba(242,247,255,.3)));
    box-shadow: 0 11px 27px rgba(36,52,112,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(9px) saturate(150%);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
}

#view-tanks .filter-tabs {
    padding: 4px;
    border: 1px solid rgba(79,110,247,.1);
    background: rgba(79,110,247,.07);
}

#view-tanks .filter-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #718AF3, #4561DF);
    box-shadow: 0 6px 15px rgba(69,97,223,.23), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}

#view-tanks .sort-wrap select {
    min-height: 40px;
    border-color: var(--theme-stroke, rgba(255,255,255,.72));
    background: var(--theme-glass, rgba(255,255,255,.58));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-tanks .tank-flat-grid {
    gap: 14px;
}

#view-tanks .tank-card {
    --fuel-surface: rgba(255,174,48,.16);
    min-height: 300px;
    border: 1px solid color-mix(in srgb, var(--fuel-accent) 22%, var(--theme-stroke, rgba(255,255,255,.78)));
    background:
        radial-gradient(circle at 100% 0%, var(--fuel-surface), transparent 43%),
        radial-gradient(circle at 3% 100%, var(--theme-glass, rgba(255,255,255,.56)), transparent 38%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.58)), var(--theme-highlight, rgba(246,249,255,.32)));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--fuel-accent) 10%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    backdrop-filter: blur(9px) saturate(150%);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
}

#view-tanks .tank-card[data-fuel="diesel"] {
    --fuel-surface: rgba(48,190,112,.15);
}

#view-tanks .tank-card[data-fuel="cng"] {
    --fuel-surface: rgba(58,145,245,.15);
}

#view-tanks .tank-card.is-low {
    --fuel-surface: rgba(224,84,65,.15);
}

#view-tanks .tank-fuel-icon-circle {
    width: 44px;
    height: 44px;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--fuel-accent) 65%, var(--theme-surface, #fff)), var(--fuel-accent));
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.76));
    box-shadow: 0 8px 19px color-mix(in srgb, var(--fuel-accent) 24%, transparent);
}

#view-tanks .tank-fuel-icon-circle i {
    color: #fff !important;
    font-size: 20px;
}

#view-tanks .tank-actions .icon-btn {
    border-radius: 50%;
    border-color: var(--theme-stroke, rgba(255,255,255,.7));
    background: var(--theme-glass, rgba(255,255,255,.45));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.7));
}

#view-tanks .tank-stats-grid {
    gap: 8px;
    border-top-color: color-mix(in srgb, var(--fuel-accent) 18%, transparent);
}

#view-tanks .tank-stat {
    padding: 8px 9px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.58));
    border-radius: 12px;
    background: var(--theme-highlight, rgba(255,255,255,.3));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.6));
}

#view-tanks .tank-footer .pill-btn {
    min-height: 42px;
    border-radius: 12px;
}

#view-tanks .add-card {
    min-height: 300px;
    flex-direction: column;
    gap: 11px;
    border: 1px dashed rgba(79,110,247,.34);
    background:
        radial-gradient(circle at 50% 15%, rgba(119,143,247,.15), transparent 35%),
        linear-gradient(145deg, var(--theme-highlight, rgba(255,255,255,.34)), var(--theme-highlight, rgba(239,244,255,.2)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.62));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

#view-tanks .add-card-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(145deg, #8098F6, #4D67DF);
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.75));
    box-shadow: 0 9px 21px rgba(77,103,223,.23), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.34));
    transition: transform .2s ease;
}

#view-tanks .add-card:hover {
    transform: translateY(-3px);
    border-color: rgba(79,110,247,.62);
    background: linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.46)), var(--theme-highlight, rgba(223,231,255,.32)));
    box-shadow: 0 15px 34px rgba(55,75,165,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

#view-tanks .add-card:hover .add-card-icon {
    transform: rotate(90deg);
}

#view-tanks .add-card:focus-visible {
    outline: 3px solid rgba(79,110,247,.25);
    outline-offset: 3px;
}

html[data-theme="dark"] #view-tanks .tanks-topbar,
html[data-theme="dark"] #view-tanks .tank-controls-row,
html[data-theme="dark"] #view-tanks .tank-metric-card,
html[data-theme="dark"] #view-tanks .tank-metric-card.accent,
html[data-theme="dark"] #view-tanks .tank-card {
    border-color: rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 100% 0%, var(--fuel-surface, var(--metric-tint, rgba(79,110,247,.1))), transparent 43%),
        linear-gradient(145deg, rgba(35,42,54,.68), rgba(17,22,30,.52));
    box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] #view-tanks .sort-wrap select,
html[data-theme="dark"] #view-tanks .tank-actions .icon-btn,
html[data-theme="dark"] #view-tanks .tank-stat {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] #view-tanks .add-card {
    border-color: rgba(111,137,244,.28);
    background: linear-gradient(145deg, rgba(50,59,77,.42), rgba(22,27,36,.35));
}

@media (max-width: 1100px) {
    #view-tanks #tankSummaryRow {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    #view-tanks .tanks-topbar {
        align-items: stretch;
    }

    #view-tanks #tankSummaryRow {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    #view-tanks .tanks-topbar-btns .btn {
        flex: 1 1 145px;
    }
}

@media (max-width: 430px) {
    #view-tanks #tankSummaryRow {
        grid-template-columns: 1fr;
    }

    #view-tanks .tanks-heading-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    #view-tanks .tank-controls-row,
    #view-tanks .sort-wrap {
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-tanks .tank-metric-card,
    #view-tanks .tanks-topbar-btns .btn,
    #view-tanks .add-card,
    #view-tanks .add-card-icon {
        transition: none !important;
    }
}

/* ---------- inventory operational forms ---------- */
.inventory-form-modal {
    --form-tone: #4F6EF7;
    --form-tone-2: #7658DC;
    width: min(560px, calc(100vw - 28px));
    max-height: min(88dvh, 820px);
    padding: 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 22px;
    background:
        radial-gradient(circle at 7% 0%, var(--theme-glass, rgba(255,255,255,.46)), transparent 31%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--form-tone) 17%, transparent), transparent 41%),
        linear-gradient(145deg, var(--theme-glass, rgba(181,191,210,.62)), rgba(128,143,169,.44));
    box-shadow: 0 27px 68px rgba(24,34,76,.29), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    backdrop-filter: blur(13px) saturate(160%);
    -webkit-backdrop-filter: blur(13px) saturate(160%);
    animation: inventoryModalIn .34s cubic-bezier(.2,.85,.28,1.08) both;
    scrollbar-width: none;
}

.inventory-form-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.inventory-form-modal.refill-entry-modal {
    --form-tone: #2EAD77;
    --form-tone-2: #228D67;
}

.inventory-form-modal.price-entry-modal {
    --form-tone: #E79A27;
    --form-tone-2: #C97323;
}

@keyframes inventoryModalIn {
    from { opacity: 0; transform: translateY(18px) scale(.965); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.inventory-modal-head {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    margin: 0 0 14px;
    padding: 12px 14px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--form-tone) 18%, transparent), transparent 42%),
        linear-gradient(135deg, var(--theme-glass, rgba(238,242,249,.96)), var(--theme-glass, rgba(204,213,229,.92)));
    box-shadow:
        0 12px 28px rgba(31,42,82,.16),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),
        inset 0 -1px 0 rgba(70,84,125,.07);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.inventory-modal-head-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--form-tone) 72%, var(--theme-surface, #fff)), var(--form-tone-2));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    box-shadow:
        0 9px 20px color-mix(in srgb, var(--form-tone) 25%, transparent),
        inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.44));
}

.inventory-modal-head > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.inventory-modal-kicker {
    display: block;
    margin-bottom: 1px;
    color: color-mix(in srgb, var(--form-tone) 82%, var(--text1));
    font-size: 10.75px;
    font-weight: 800;
    letter-spacing: -.1px;
}

.inventory-modal-head h3 {
    margin: 0;
    color: var(--text1);
    max-width: 100%;
    overflow: hidden;
    font-size: 17px;
    font-weight: 850;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.45;
}

html[data-theme="dark"] .inventory-modal-head {
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--form-tone) 15%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(41,50,64,.96), rgba(20,27,37,.94));
    box-shadow:
        0 14px 30px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(255,255,255,.035);
}

.inventory-form-modal .inventory-field {
    margin-bottom: 12px;
}

.inventory-form-modal .inventory-field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--text1);
    font-size: 12.5px;
    font-weight: 800;
}

.inventory-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.inventory-input-wrap {
    position: relative;
    display: block;
    border-radius: 14px;
}

.inventory-input-wrap > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-start: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text2);
    background: color-mix(in srgb, var(--panel) 52%, transparent);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.64));
    transform: translateY(-50%);
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    pointer-events: none;
}

.inventory-form-modal .inventory-input-wrap input,
.inventory-form-modal .inventory-input-wrap select,
.inventory-form-modal .amt-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    padding-inline-start: 50px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 14px;
    color: var(--text1);
    background: color-mix(in srgb, var(--panel) 84%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8)), 0 5px 14px rgba(35,48,102,.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.inventory-form-modal .inventory-input-wrap select {
    padding-inline-end: 38px;
}

.inventory-input-wrap:focus-within > i {
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--form-tone) 67%, var(--theme-surface, #fff)), var(--form-tone));
    border-color: var(--theme-stroke, rgba(255,255,255,.78));
    box-shadow: 0 5px 13px color-mix(in srgb, var(--form-tone) 23%, transparent);
    transform: translateY(-50%) scale(1.05);
}

.inventory-form-modal .inventory-input-wrap:focus-within input,
.inventory-form-modal .inventory-input-wrap:focus-within select {
    outline: none;
    border-color: color-mix(in srgb, var(--form-tone) 67%, var(--theme-stroke, #fff));
    background: color-mix(in srgb, var(--panel) 93%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-tone) 13%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.inventory-input-wrap.has-liquid-select {
    z-index: 5;
}

.inventory-input-wrap.has-liquid-select.is-open {
    z-index: 70;
}

.inventory-input-wrap.has-liquid-select > select,
.inventory-input-wrap.has-liquid-select > .select-arrow {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.inventory-select-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    padding-inline-start: 50px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 14px;
    color: var(--text1);
    background: color-mix(in srgb, var(--panel) 84%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8)), 0 5px 14px rgba(35,48,102,.05);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.inventory-select-trigger > i {
    flex: 0 0 auto;
    color: var(--text2);
    font-size: 16px;
    transition: transform .23s ease, color .2s ease;
}

.inventory-select-value {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.has-liquid-select.is-open .inventory-select-trigger {
    border-color: color-mix(in srgb, var(--form-tone) 66%, var(--theme-stroke, #fff));
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-tone) 13%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.has-liquid-select.is-open .inventory-select-trigger > i {
    color: var(--form-tone);
    transform: rotate(180deg);
}

.inventory-select-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 7px);
    inset-inline: 0;
    display: none;
    gap: 5px;
    max-height: 230px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 15px;
    background:
        radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255,255,255,.72)), transparent 34%),
        linear-gradient(145deg, var(--theme-glass, rgba(224,230,240,.97)), var(--theme-glass, rgba(190,201,220,.95)));
    box-shadow: 0 18px 38px rgba(27,39,83,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(20px) saturate(155%);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    transform-origin: top center;
}

.has-liquid-select.is-open .inventory-select-menu {
    display: grid;
    animation: inventoryDropdownIn .22s cubic-bezier(.2,.8,.25,1) both;
}

@keyframes inventoryDropdownIn {
    from { opacity: 0; transform: translateY(-7px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.inventory-select-option {
    width: 100%;
    min-height: 43px;
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) 24px;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--text1);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.inventory-select-option:hover,
.inventory-select-option:focus-visible {
    outline: none;
    color: color-mix(in srgb, var(--form-tone) 76%, var(--text1));
    border-color: color-mix(in srgb, var(--form-tone) 18%, var(--theme-stroke, rgba(255,255,255,.7)));
    background: color-mix(in srgb, var(--form-tone) 9%, var(--theme-glass, rgba(255,255,255,.55)));
    transform: translateX(-2px);
}

.inventory-select-option.active {
    color: #fff;
    border-color: var(--theme-stroke, rgba(255,255,255,.66));
    background: linear-gradient(135deg, color-mix(in srgb, var(--form-tone) 67%, var(--theme-surface, #fff)), var(--form-tone-2));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--form-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}

.inventory-select-option-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--form-tone);
    background: var(--theme-glass, rgba(255,255,255,.55));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
}

.inventory-select-option.active .inventory-select-option-icon {
    color: #fff;
    background: var(--theme-highlight, rgba(255,255,255,.17));
    border-color: var(--theme-stroke, rgba(255,255,255,.24));
}

.inventory-select-check {
    opacity: 0;
    justify-self: center;
}

.inventory-select-option.active .inventory-select-check {
    opacity: 1;
}

.inventory-select-option[data-value="petrol"] { --form-tone: var(--petrol); --form-tone-2: #D88418; }
.inventory-select-option[data-value="diesel"] { --form-tone: var(--diesel); --form-tone-2: #278E53; }
.inventory-select-option[data-value="cng"] { --form-tone: var(--cng); --form-tone-2: #276FC8; }

.price-entry-modal .fuel-petrol { --form-tone: var(--petrol); }
.price-entry-modal .fuel-diesel { --form-tone: var(--diesel); }
.price-entry-modal .fuel-cng { --form-tone: var(--cng); }

.inventory-form-modal .refill-info-card {
    position: relative;
    overflow: hidden;
    padding: 12px 13px;
    margin-bottom: 13px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.7));
    border-radius: 15px;
    box-shadow: 0 8px 19px rgba(35,48,102,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.75));
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    animation: inventoryPreviewIn .27s ease both;
}

@keyframes inventoryPreviewIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.inventory-form-modal .refill-gauge-track {
    height: 11px;
    padding: 2px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    background: rgba(18,31,66,.08);
    box-shadow: inset 0 1px 3px rgba(19,29,58,.12);
}

.inventory-form-modal .refill-gauge-fill {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    box-shadow: 0 0 11px color-mix(in srgb, var(--form-tone) 22%, transparent);
    transition: width .65s cubic-bezier(.22,1,.36,1), background .2s ease;
}

.inventory-form-modal .refill-gauge-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, var(--theme-glass, rgba(255,255,255,.6)) 50%, transparent 70%);
    transform: translateX(110%);
    animation: inventoryGaugeShine 3.2s ease-in-out infinite;
}

@keyframes inventoryGaugeShine {
    0%, 55% { transform: translateX(110%); opacity: 0; }
    68% { opacity: 1; }
    88%, 100% { transform: translateX(-110%); opacity: 0; }
}

.inventory-form-modal .quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: -3px 0 9px;
}

.inventory-form-modal .quick-btn {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 5px;
    border: 1px solid color-mix(in srgb, var(--form-tone) 20%, var(--theme-stroke, rgba(255,255,255,.72)));
    border-radius: 11px;
    color: color-mix(in srgb, var(--form-tone) 78%, var(--text1));
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.inventory-form-modal .quick-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--form-tone) 67%, var(--theme-surface, #fff)), var(--form-tone));
    box-shadow: 0 7px 15px color-mix(in srgb, var(--form-tone) 19%, transparent);
}

.inventory-field-hint {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0 2px 11px;
    color: var(--text2);
    font-size: 11.5px;
}

.inventory-form-modal .fuel-checkbox-row {
    margin: 2px 0 9px;
    padding: 9px 11px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.58));
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 42%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.58));
}

.inventory-form-modal .field-system-note {
    margin: 0 0 12px;
    font-size: 11px;
    line-height: 1.75;
}

.inventory-form-modal .modal-actions {
    position: relative;
    z-index: 4;
    bottom: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 9px;
    margin: 15px 0 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.inventory-form-modal .modal-actions .btn {
    min-height: 46px;
    gap: 8px;
    border-radius: 13px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.inventory-form-modal .modal-actions .btn i {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.inventory-form-modal .modal-actions .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--form-tone) 72%, var(--theme-surface, #fff)), var(--form-tone-2));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.7));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--form-tone) 25%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
}

.inventory-form-modal .modal-actions .btn-primary i {
    background: var(--theme-highlight, rgba(255,255,255,.17));
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.24));
}

.inventory-form-modal .modal-actions .btn-ghost {
    min-width: 108px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    background: color-mix(in srgb, var(--panel) 76%, transparent);
    box-shadow: 0 6px 15px rgba(35,48,102,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

.inventory-form-modal .modal-actions .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: saturate(108%) brightness(1.02);
}

.inventory-form-modal .modal-actions .btn:active:not(:disabled) {
    transform: translateY(0);
}

.inventory-form-modal .modal-actions .btn:focus-visible,
.inventory-form-modal .quick-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--form-tone) 24%, transparent);
    outline-offset: 2px;
}

html[data-theme="dark"] .inventory-form-modal {
    border-color: rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 7% 0%, rgba(255,255,255,.08), transparent 31%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--form-tone) 13%, transparent), transparent 41%),
        linear-gradient(145deg, rgba(27,34,45,.86), rgba(10,14,21,.74));
    box-shadow: 0 30px 76px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.075);
}

html[data-theme="dark"] .inventory-form-modal .inventory-input-wrap input,
html[data-theme="dark"] .inventory-form-modal .inventory-input-wrap select,
html[data-theme="dark"] .inventory-form-modal .quick-btn,
html[data-theme="dark"] .inventory-form-modal .fuel-checkbox-row,
html[data-theme="dark"] .inventory-form-modal .modal-actions .btn-ghost {
    border-color: rgba(255,255,255,.1);
    background: rgba(16,21,29,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .inventory-input-wrap > i {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
}

html[data-theme="dark"] .inventory-select-trigger {
    border-color: rgba(255,255,255,.1);
    background: rgba(16,21,29,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .inventory-select-menu {
    border-color: rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.09), transparent 34%),
        linear-gradient(145deg, rgba(37,45,58,.97), rgba(18,24,33,.96));
    box-shadow: 0 20px 44px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
}

@media (max-width: 560px) {
    .inventory-form-modal {
        width: min(calc(100% - 18px), 520px);
        padding: 15px;
        border-radius: 19px;
    }

    .inventory-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .inventory-modal-head {
        min-height: 68px;
        margin-bottom: 12px;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 16px;
    }

    .inventory-modal-head-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: 20px;
    }

    .inventory-modal-head h3 {
        font-size: 15.5px;
    }

    .inventory-form-modal .quick-amounts {
        grid-template-columns: repeat(2, 1fr);
    }

    .inventory-form-modal .modal-actions {
        grid-template-columns: 1fr;
    }

    .inventory-form-modal .modal-actions .btn-ghost {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inventory-form-modal,
    .inventory-form-modal .refill-info-card,
    .inventory-form-modal .refill-gauge-fill::after {
        animation: none !important;
    }

    .inventory-input-wrap > i,
    .inventory-form-modal .quick-btn,
    .inventory-form-modal .modal-actions .btn,
    .inventory-select-trigger,
    .inventory-select-option {
        transition: none !important;
    }

    .has-liquid-select.is-open .inventory-select-menu {
        animation: none !important;
    }
}

/* ---------- inventory forms v2 — operational bento workflow ---------- */
.tank-entry-modal {
    width: min(640px, calc(100vw - 28px));
}

.refill-entry-modal {
    width: min(590px, calc(100vw - 28px));
}

.price-entry-modal {
    width: min(690px, calc(100vw - 28px));
}

.inventory-form-body {
    display: grid;
    gap: 11px;
}

.inventory-form-panel {
    --panel-tone: var(--form-tone);
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
    padding: 13px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.58));
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--panel-tone) 12%, transparent), transparent 42%),
        linear-gradient(145deg, var(--theme-highlight, rgba(255,255,255,.28)), var(--theme-highlight, rgba(226,233,245,.17)));
    box-shadow: 0 9px 22px rgba(29,41,88,.075), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.65));
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    animation: inventoryPanelIn .34s cubic-bezier(.2,.8,.25,1) both;
}

.inventory-form-panel.has-open-select {
    z-index: 90;
}

.inventory-form-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 88px;
    height: 88px;
    inset-inline-end: -38px;
    top: -48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel-tone) 14%, transparent);
    filter: blur(9px);
    pointer-events: none;
}

.inventory-form-panel:nth-child(2) { animation-delay: 45ms; }
.inventory-form-panel:nth-child(3) { animation-delay: 90ms; }

@keyframes inventoryPanelIn {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

.inventory-form-panel.is-funding { --panel-tone: #D89A2B; }
.inventory-form-panel.is-threshold { --panel-tone: #E26955; }
.inventory-form-panel.is-selector { --panel-tone: #4F7BE8; }
.inventory-form-panel.is-amount { --panel-tone: #31A878; }
.inventory-form-panel.is-source { --panel-tone: #3E9EB7; }

.inventory-form-panel:empty {
    display: none;
}

.tank-form-flow .is-identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.tank-form-flow .is-identity .inventory-field-grid {
    display: contents;
}

.tank-form-flow .is-identity .inventory-field,
.inventory-form-panel .inventory-field:last-child,
.inventory-price-tile.inventory-field {
    margin-bottom: 0;
}

.tank-form-flow .is-funding .field-system-note,
.tank-form-flow .is-threshold .inventory-field {
    margin-bottom: 0;
}

.tank-form-flow .is-threshold {
    padding: 11px 13px;
}

.tank-form-flow .is-threshold .inventory-input-wrap > i {
    color: var(--theme-ink, #C85343);
    background: rgba(226,105,85,.1);
}

.inventory-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.inventory-price-tile {
    --tile-tone: var(--form-tone);
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--tile-tone) 22%, var(--theme-stroke, rgba(255,255,255,.64)));
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tile-tone) 17%, transparent), transparent 45%),
        linear-gradient(145deg, var(--theme-highlight, rgba(255,255,255,.32)), var(--theme-highlight, rgba(225,232,244,.19)));
    box-shadow: 0 10px 23px color-mix(in srgb, var(--tile-tone) 9%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.67));
    animation: inventoryPanelIn .34s cubic-bezier(.2,.8,.25,1) both;
}

.inventory-price-tile:nth-child(2) { animation-delay: 45ms; }
.inventory-price-tile:nth-child(3) { animation-delay: 90ms; }
.inventory-price-tile.fuel-petrol { --tile-tone: var(--petrol); }
.inventory-price-tile.fuel-diesel { --tile-tone: var(--diesel); }
.inventory-price-tile.fuel-cng { --tile-tone: var(--cng); }

.inventory-price-tile > label {
    min-height: 42px;
    display: flex !important;
    align-items: flex-start;
    color: var(--text1) !important;
    line-height: 1.55;
}

.inventory-price-tile .inventory-input-wrap > i {
    color: var(--tile-tone);
    background: color-mix(in srgb, var(--tile-tone) 10%, var(--theme-glass, rgba(255,255,255,.42)));
}

.inventory-price-tile .inventory-input-wrap:focus-within > i {
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tile-tone) 67%, var(--theme-surface, #fff)), var(--tile-tone));
}

.refill-form-flow .is-selector,
.refill-form-flow .is-amount {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(180px,.72fr);
    gap: 11px;
    align-items: stretch;
}

.refill-form-flow .is-selector .inventory-field,
.refill-form-flow .is-amount .inventory-amount-field {
    align-self: center;
    margin-bottom: 0;
}

.refill-form-flow .is-selector .refill-info-card,
.refill-form-flow .is-amount .refill-info-card {
    margin: 0;
}

.refill-form-flow .is-amount .quick-amounts,
.refill-form-flow .is-amount .inventory-field-hint {
    grid-column: 1 / -1;
}

.refill-form-flow .is-amount .quick-amounts {
    margin: 0;
}

.refill-form-flow .is-amount .inventory-field-hint {
    min-height: 18px;
    margin: -2px 2px 0;
}

.refill-form-flow .is-source {
    padding-block: 11px;
}

.inventory-form-modal .fuel-checkbox-row {
    border-color: color-mix(in srgb, #D89A2B 23%, var(--theme-stroke, rgba(255,255,255,.58)));
    background: linear-gradient(145deg, var(--theme-glass, rgba(255,248,225,.35)), var(--theme-highlight, rgba(239,224,185,.18)));
}

.inventory-form-modal .field-system-note {
    border-color: var(--theme-stroke, rgba(255,255,255,.52));
    background: var(--theme-highlight, rgba(255,255,255,.18));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.46));
}

.inventory-form-modal .modal-actions {
    grid-template-columns: minmax(0,1fr) minmax(112px,.36fr);
    gap: 10px;
    margin-top: 12px;
}

.inventory-form-modal .modal-actions .btn {
    min-height: 49px;
    border-radius: 15px;
}

.inventory-form-modal .modal-actions .btn-primary {
    position: relative;
    overflow: hidden;
}

.inventory-form-modal .modal-actions .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, var(--theme-highlight, rgba(255,255,255,.24)) 50%, transparent 68%);
    transform: translateX(120%);
    transition: transform .5s ease;
    pointer-events: none;
}

.inventory-form-modal .modal-actions .btn-primary:hover::after {
    transform: translateX(-120%);
}

html[data-theme="dark"] .inventory-form-panel,
html[data-theme="dark"] .inventory-price-tile {
    border-color: color-mix(in srgb, var(--panel-tone, var(--tile-tone)) 20%, rgba(255,255,255,.09));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--panel-tone, var(--tile-tone)) 11%, transparent), transparent 44%),
        linear-gradient(145deg, rgba(28,35,46,.66), rgba(15,20,28,.48));
    box-shadow: 0 10px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055);
}

html[data-theme="dark"] .inventory-form-modal .field-system-note {
    border-color: rgba(255,255,255,.08);
    background: rgba(10,14,20,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

@media (max-width: 680px) {
    .inventory-price-grid {
        grid-template-columns: 1fr;
    }

    .inventory-price-tile > label {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .tank-form-flow .is-identity,
    .refill-form-flow .is-selector,
    .refill-form-flow .is-amount {
        grid-template-columns: 1fr;
    }

    .refill-form-flow .is-amount .quick-amounts,
    .refill-form-flow .is-amount .inventory-field-hint {
        grid-column: auto;
    }

    .inventory-form-panel,
    .inventory-price-tile {
        border-radius: 15px;
        padding: 11px;
    }

    .inventory-form-modal .modal-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inventory-form-panel,
    .inventory-price-tile {
        animation: none !important;
    }

    .inventory-form-modal .modal-actions .btn-primary::after {
        display: none;
    }
}

/* ---------- price form v3 — readable fuel rows ---------- */
.price-entry-modal {
    width: min(520px, calc(100vw - 28px));
    --form-tone: #D99126;
    --form-tone-2: #BD681F;
}

.price-entry-modal .inventory-price-grid {
    grid-template-columns: 1fr;
    gap: 9px;
}

.price-entry-modal .inventory-price-tile {
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(130px,.72fr) minmax(190px,1fr);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 16px;
}

.inventory-price-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.inventory-price-fuel-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tile-tone) 67%, var(--theme-surface, #fff)), var(--tile-tone));
    border: 2px solid var(--theme-stroke, rgba(255,255,255,.72));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--tile-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32));
}

.inventory-price-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inventory-price-copy strong {
    color: var(--text1);
    font-size: 13.5px;
    font-weight: 850;
}

.inventory-price-copy small {
    color: var(--text2);
    font-size: 10.5px;
    line-height: 1.45;
}

.inventory-price-control {
    min-width: 0;
}

.inventory-price-control > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.price-entry-modal .inventory-price-control .inventory-input-wrap input {
    min-height: 52px;
    padding-inline-start: 50px;
    border-color: color-mix(in srgb, var(--tile-tone) 24%, var(--theme-stroke, rgba(255,255,255,.72)));
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.69));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82)), 0 5px 13px color-mix(in srgb, var(--tile-tone) 7%, transparent);
    font-size: 16px;
    font-weight: 800;
}

.price-entry-modal .inventory-price-control .inventory-input-wrap > i {
    color: var(--tile-tone);
    background: color-mix(in srgb, var(--tile-tone) 10%, var(--theme-glass, rgba(255,255,255,.62)));
}

.price-entry-modal .inventory-price-control .inventory-input-wrap:focus-within > i {
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tile-tone) 66%, var(--theme-surface, #fff)), var(--tile-tone));
}

.price-entry-modal .modal-actions {
    grid-template-columns: minmax(0,1fr) 116px;
}

html[data-theme="dark"] .price-entry-modal .inventory-price-control .inventory-input-wrap input {
    border-color: color-mix(in srgb, var(--tile-tone) 28%, rgba(255,255,255,.1));
    background: rgba(13,18,25,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

@media (max-width: 520px) {
    .price-entry-modal .inventory-price-tile {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .price-entry-modal .inventory-price-identity {
        padding-inline: 2px;
    }

    .price-entry-modal .modal-actions {
        grid-template-columns: 1fr;
    }
}

/* Dense financial data, forms and tables deliberately stay opaque. */
.ledger-table-wrap,
.sd-main,
.sd-nav-card,
.work-record-stats-panel,
.work-record-filter-cal,
.modal .field input,
.modal .field select,
.modal .field textarea {
    color: var(--text1);
}

/* ---------- unified UI scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text2) 66%, transparent) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text2) 66%, transparent);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-solid) 72%, var(--text2));
    background-clip: padding-box;
}

*::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment,
.modal::-webkit-scrollbar-button,
.overlay::-webkit-scrollbar-button {
    display: none !important;
    inline-size: 0 !important;
    block-size: 0 !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.modal,
.cash-ledger-list {
    scrollbar-gutter: auto;
}

.modal {
    padding-inline-start: 24px;
}

@media (prefers-reduced-transparency: reduce) {
    .top-bar,
    .sidebar,
    .sidebar.mobile-open,
    .lang-menu,
    .date-picker-popover,
    .modal,
    .shortcut,
    .metric-card,
    .finance-card,
    .sales-details-card,
    .price-widget {
        background: var(--panel);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --card-border: #B7C3DB;
        --border-strong: #9EACC8;
    }

    html[data-theme="dark"] {
        --card-border: rgba(255,255,255,.24);
        --border-strong: rgba(255,255,255,.32);
    }
}

/* Employee file printing is A4, independent from the 58mm sale-receipt rules. */
@media print {
    html:has(#reportPrintTemplate.employee-print-host:not(:empty)),
    body:has(#reportPrintTemplate.employee-print-host:not(:empty)) {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    #reportPrintTemplate.employee-print-host {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reportPrintTemplate.employee-print-host .employee-print-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* This must stay after receipt/employee print rules so the approved report wins the page size. */
@media print {
    @page finance-report { size:A4 portrait; margin:10mm; }
    #reportPrintTemplate.finance-report-print-host .finance-print-sheet,
    #reportPrintTemplate.finance-report-print-host .finance-print-sheet * {
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }
}

/* ---------- reports: final interactive workspaces ---------- */
#view-reports-compare{--workspace-tone:#4338CA;--workspace-deep:#3730A3;--workspace-soft:rgba(67,56,202,.11)}
#view-reports-journal{--workspace-tone:#A21CAF;--workspace-deep:#86198F;--workspace-soft:rgba(162,28,175,.11)}
#view-reports-capital{--workspace-tone:#475569;--workspace-deep:#334155;--workspace-soft:rgba(71,85,105,.11)}
#view-reports-compare .reports-title-cluster,#view-reports-journal .reports-title-cluster,#view-reports-capital .reports-title-cluster{position:relative;display:flex;align-items:center;gap:9px}
#view-reports-compare .reports-title-help,#view-reports-journal .reports-title-help,#view-reports-capital .reports-title-help{position:relative;z-index:12}
#view-reports-compare .reports-title-help summary,#view-reports-journal .reports-title-help summary,#view-reports-capital .reports-title-help summary{list-style:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--workspace-tone) 26%,transparent);border-radius:12px;color:var(--workspace-tone);background:color-mix(in srgb,var(--workspace-tone) 10%,var(--theme-glass, rgba(255,255,255,.92)));box-shadow:0 8px 18px color-mix(in srgb,var(--workspace-tone) 13%,transparent);cursor:pointer;transition:transform .2s ease,color .2s ease,background .2s ease}
#view-reports-compare .reports-title-help summary::-webkit-details-marker,#view-reports-journal .reports-title-help summary::-webkit-details-marker,#view-reports-capital .reports-title-help summary::-webkit-details-marker{display:none}
#view-reports-compare .reports-title-help summary i,#view-reports-journal .reports-title-help summary i,#view-reports-capital .reports-title-help summary i{font-size:20px;animation:reportHelpBreathe 2.8s ease-in-out infinite}
#view-reports-compare .reports-title-help[open] summary,#view-reports-compare .reports-title-help summary:hover,#view-reports-journal .reports-title-help[open] summary,#view-reports-journal .reports-title-help summary:hover,#view-reports-capital .reports-title-help[open] summary,#view-reports-capital .reports-title-help summary:hover{color:#fff;background:var(--workspace-tone);transform:translateY(-1px)}
#view-reports-compare .reports-title-help-popover,#view-reports-journal .reports-title-help-popover,#view-reports-capital .reports-title-help-popover{position:absolute;inset-inline-start:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 48px));padding:13px 15px;border:1px solid color-mix(in srgb,var(--workspace-tone) 22%,transparent);border-radius:16px;color:var(--workspace-deep);background:var(--theme-glass, rgba(255,255,255,.98));box-shadow:0 20px 45px rgba(31,41,55,.18);animation:reportHelpReveal .22s ease both}
#view-reports-compare .reports-title-help-popover strong,#view-reports-compare .reports-title-help-popover span,#view-reports-journal .reports-title-help-popover strong,#view-reports-journal .reports-title-help-popover span,#view-reports-capital .reports-title-help-popover strong,#view-reports-capital .reports-title-help-popover span{display:block}
#view-reports-compare .reports-title-help-popover span,#view-reports-journal .reports-title-help-popover span,#view-reports-capital .reports-title-help-popover span{margin-top:4px;color:var(--theme-ink, #667085);font-size:12px;line-height:1.8}
.reports-compare-summary,.reports-capital-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.compare-kpi-card,.capital-kpi-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:112px;padding:16px;border:1px solid color-mix(in srgb,var(--workspace-tone) 14%,var(--theme-stroke, rgba(255,255,255,.75)));border-radius:22px;background:radial-gradient(circle at 0 100%,var(--workspace-soft),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.86)),color-mix(in srgb,var(--workspace-tone) 5%,var(--theme-glass, rgba(255,255,255,.66))));box-shadow:0 18px 38px rgba(31,48,74,.10);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.compare-kpi-card:hover,.capital-kpi-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--workspace-tone) 30%,transparent);box-shadow:0 22px 42px color-mix(in srgb,var(--workspace-tone) 15%,transparent)}
.compare-kpi-icon,.capital-kpi-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--workspace-tone) 78%,var(--theme-surface, #fff)),var(--workspace-deep));box-shadow:0 10px 20px color-mix(in srgb,var(--workspace-tone) 24%,transparent);font-size:21px}
.compare-kpi-card .metric-value,.capital-kpi-card .metric-value{display:block;margin-top:5px;color:var(--workspace-deep);font-size:20px;line-height:1.35}.compare-kpi-card .metric-value small,.capital-kpi-card .metric-value small{margin-inline-start:5px;color:var(--theme-ink, #718096);font-size:10px}.capital-kpi-mark{color:color-mix(in srgb,var(--workspace-tone) 25%,transparent);font-size:20px}
.compare-kpi-change{align-self:start;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:900}.compare-kpi-change.is-up{color:var(--theme-ink, #087a55);background:var(--theme-surface, #e1f7ee)}.compare-kpi-change.is-down{color:var(--theme-ink, #b4233f);background:var(--theme-surface, #fde8ed)}.compare-kpi-change.is-flat{color:var(--theme-ink, #667085);background:var(--theme-surface, #edf0f4)}
.compare-insights,.capital-insights,.journal-workspace{overflow:hidden;border:1px solid color-mix(in srgb,var(--workspace-tone) 14%,var(--theme-stroke, rgba(255,255,255,.75)));border-radius:24px;background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.68)),color-mix(in srgb,var(--workspace-tone) 5%,var(--theme-glass, rgba(255,255,255,.55))));box-shadow:0 20px 42px rgba(31,48,74,.09)}
.compare-insights-head,.capital-insights-head,.journal-workspace-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}.compare-insights-head strong,.compare-insights-head span,.capital-insights-head strong,.capital-insights-head span,.journal-workspace-head strong,.journal-workspace-head span{display:block}.compare-insights-head strong,.capital-insights-head strong,.journal-workspace-head strong{color:var(--workspace-deep);font-size:16px;font-weight:950}.compare-insights-head span,.capital-insights-head span,.journal-workspace-head span{margin-top:2px;color:var(--theme-ink, #718096);font-size:12px}.compare-insights-head>i,.capital-insights-head>i,.journal-workspace-head>i{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--workspace-tone) 78%,var(--theme-surface, #fff)),var(--workspace-deep));box-shadow:0 9px 19px color-mix(in srgb,var(--workspace-tone) 22%,transparent);font-size:20px}
.compare-insight-tabs,.capital-insight-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 14px 14px;padding:5px;border:1px solid color-mix(in srgb,var(--workspace-tone) 12%,transparent);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.58))}.capital-insight-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.compare-insight-tab,.capital-insight-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 12px;border:0;border-radius:12px;color:var(--theme-ink, #667085);background:transparent;font:inherit;font-size:12.5px;font-weight:900;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease}.compare-insight-tab:hover,.capital-insight-tab:hover{color:var(--workspace-deep);background:var(--workspace-soft)}.compare-insight-tab.active,.capital-insight-tab.active{color:#fff;background:linear-gradient(135deg,var(--workspace-tone),var(--workspace-deep));box-shadow:0 9px 19px color-mix(in srgb,var(--workspace-tone) 24%,transparent)}
.compare-insight-panel,.capital-insight-panel{margin:0 14px 14px;border-color:color-mix(in srgb,var(--workspace-tone) 14%,transparent);animation:reportHelpReveal .24s ease both}.compare-insight-panel[hidden],.capital-insight-panel[hidden]{display:none!important}
.reports-journal-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.journal-kpi-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;min-height:86px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--workspace-tone) 14%,var(--theme-stroke, rgba(255,255,255,.7)));border-radius:19px;color:var(--theme-ink, #334155);background:var(--theme-glass, rgba(255,255,255,.68));box-shadow:0 14px 30px rgba(31,48,74,.08);font:inherit;text-align:start;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}.journal-kpi-card:hover,.journal-kpi-card.active{transform:translateY(-3px);border-color:color-mix(in srgb,var(--workspace-tone) 32%,transparent);background:color-mix(in srgb,var(--workspace-tone) 7%,var(--theme-surface, #fff))}.journal-kpi-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#C13BCC,var(--workspace-deep));font-size:19px}.journal-kpi-card small,.journal-kpi-card strong{display:block}.journal-kpi-card small{color:var(--theme-ink, #667085);font-size:11px;font-weight:800}.journal-kpi-card strong{margin-top:2px;color:var(--workspace-deep);font-size:19px}.journal-kpi-arrow{color:color-mix(in srgb,var(--workspace-tone) 36%,transparent)}
#view-reports-journal .report-journal-tabs{margin:0 14px 14px}#view-reports-journal .report-journal-card{margin:0 14px 14px;border-color:color-mix(in srgb,var(--workspace-tone) 14%,transparent)}
.capital-insight-panel{padding:16px}.capital-modern-list{display:grid;gap:9px;margin-top:12px}.capital-modern-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--workspace-tone) 13%,transparent);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.6));transition:transform .2s ease,border-color .2s ease}.capital-modern-row:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--workspace-tone) 28%,transparent)}.capital-row-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:var(--workspace-tone);background:var(--workspace-soft);font-size:18px}.capital-modern-row strong,.capital-modern-row small{display:block}.capital-modern-row strong{color:var(--theme-ink, #334155);font-size:13px}.capital-modern-row small{margin-top:3px;color:var(--theme-ink, #718096);font-size:11px}.capital-row-balance{color:var(--workspace-deep);font-size:13px;font-weight:950}.capital-modern-row.is-repayment .capital-row-icon{color:var(--theme-ink, #087a55);background:var(--theme-surface, #e1f7ee)}
@media(max-width:1100px){.reports-compare-summary,.reports-capital-summary,.reports-journal-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.reports-compare-summary,.reports-capital-summary,.reports-journal-summary{grid-template-columns:1fr}.compare-insight-tabs,.capital-insight-tabs{grid-template-columns:1fr}.compare-insight-tab,.capital-insight-tab{justify-content:flex-start}.capital-modern-row{grid-template-columns:auto minmax(0,1fr)}.capital-row-balance,.capital-modern-row .acct-pill-btn{grid-column:2}}
@media(prefers-reduced-motion:reduce){#view-reports-compare .reports-title-help summary i,#view-reports-journal .reports-title-help summary i,#view-reports-capital .reports-title-help summary i,.compare-insight-panel,.capital-insight-panel{animation:none!important}.compare-kpi-card,.capital-kpi-card,.journal-kpi-card,.capital-modern-row{transition:none!important}}

/* Capital toolbar follows the section's slate identity, including both export actions. */
#view-reports-capital .sd-toolbar{
    position:relative;
    overflow:visible;
    min-height:76px;
    padding:12px 14px;
    border:1px solid rgba(71,85,105,.18);
    border-radius:22px;
    background:
        radial-gradient(70% 180% at 96% -40%,rgba(71,85,105,.16),transparent 58%),
        linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.86)),var(--theme-glass, rgba(241,245,249,.68)));
    box-shadow:0 18px 40px rgba(51,65,85,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
#view-reports-capital .sd-toolbar::after{
    content:'';
    position:absolute;
    inset-inline-start:16px;
    bottom:-1px;
    width:118px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#64748B,#334155);
}
#view-reports-capital .sd-toolbar .page-title{display:flex;align-items:center;color:var(--theme-ink, #273548)}
#view-reports-capital .sd-toolbar .page-title::before{
    content:"\eb76";
    width:42px;
    height:42px;
    margin-inline-end:10px;
    border:1px solid rgba(71,85,105,.16);
    border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,#64748B,#334155);
    box-shadow:0 10px 22px rgba(51,65,85,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24));
}
#view-reports-capital .reports-title-help summary{
    border-color:rgba(71,85,105,.22);
    color:var(--theme-ink, #475569);
    background:var(--theme-glass, rgba(241,245,249,.92));
    box-shadow:0 8px 18px rgba(51,65,85,.12);
}
#view-reports-capital .reports-title-help[open] summary,#view-reports-capital .reports-title-help summary:hover{color:#fff;background:#475569}
#view-reports-capital .reports-export-actions{
    gap:6px;
    padding:5px;
    border:1px solid rgba(71,85,105,.16);
    background:var(--theme-glass, rgba(255,255,255,.68));
    box-shadow:0 10px 24px rgba(51,65,85,.11),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
#view-reports-capital .reports-export-btn{min-height:44px;color:var(--theme-ink, #475569)}
#view-reports-capital .reports-export-btn.is-print{
    color:#fff;
    background:linear-gradient(135deg,#58677C,#334155);
    box-shadow:0 9px 20px rgba(51,65,85,.27),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.16));
}
#view-reports-capital .reports-export-btn.is-excel:hover{color:var(--theme-ink, #334155);background:rgba(71,85,105,.10)}
#view-reports-capital .reports-export-btn:focus-visible{outline-color:rgba(71,85,105,.32)}
@media(max-width:640px){#view-reports-capital .sd-toolbar{align-items:stretch}.reports-export-actions{width:100%}#view-reports-capital .reports-export-btn{flex:1;justify-content:center}}

/* Journal toolbar uses the same purple identity as its filters and KPI cards. */
#view-reports-journal .sd-toolbar{
    position:relative;
    overflow:visible;
    min-height:76px;
    padding:12px 14px;
    border:1px solid rgba(162,28,175,.18);
    border-radius:22px;
    background:
        radial-gradient(70% 180% at 96% -40%,rgba(162,28,175,.17),transparent 58%),
        linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.86)),var(--theme-glass, rgba(251,242,252,.68)));
    box-shadow:0 18px 40px rgba(134,25,143,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
#view-reports-journal .sd-toolbar::after{
    content:'';
    position:absolute;
    inset-inline-start:16px;
    bottom:-1px;
    width:118px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#C13BCC,#86198F);
}
#view-reports-journal .sd-toolbar .page-title{display:flex;align-items:center;color:var(--theme-ink, #4A164F)}
#view-reports-journal .sd-toolbar .page-title::before{
    content:"\eb6d";
    width:42px;
    height:42px;
    margin-inline-end:10px;
    border:1px solid rgba(162,28,175,.16);
    border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,#C13BCC,#86198F);
    box-shadow:0 10px 22px rgba(134,25,143,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24));
}
#view-reports-journal .reports-title-help summary{
    border-color:rgba(162,28,175,.22);
    color:var(--theme-ink, #A21CAF);
    background:var(--theme-glass, rgba(252,235,254,.92));
    box-shadow:0 8px 18px rgba(134,25,143,.12);
}
#view-reports-journal .reports-title-help[open] summary,#view-reports-journal .reports-title-help summary:hover{color:#fff;background:#A21CAF}
#view-reports-journal .reports-export-actions{
    gap:6px;
    padding:5px;
    border:1px solid rgba(162,28,175,.16);
    background:var(--theme-glass, rgba(255,255,255,.68));
    box-shadow:0 10px 24px rgba(134,25,143,.11),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
#view-reports-journal .reports-export-btn{min-height:44px;color:var(--theme-ink, #A21CAF)}
#view-reports-journal .reports-export-btn.is-print{
    color:#fff;
    background:linear-gradient(135deg,#B52CC1,#86198F);
    box-shadow:0 9px 20px rgba(134,25,143,.27),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.16));
}
#view-reports-journal .reports-export-btn.is-excel:hover{color:var(--theme-ink, #86198F);background:rgba(162,28,175,.10)}
#view-reports-journal .reports-export-btn:focus-visible{outline-color:rgba(162,28,175,.32)}
@media(max-width:640px){#view-reports-journal .sd-toolbar{align-items:stretch}#view-reports-journal .reports-export-actions{width:100%}#view-reports-journal .reports-export-btn{flex:1;justify-content:center}}

/* Accounts toolbar — rose accounting identity. */
#view-reports-accounts .sd-toolbar{position:relative;overflow:visible;min-height:76px;padding:12px 14px;border:1px solid rgba(190,18,60,.18);border-radius:22px;background:radial-gradient(70% 180% at 96% -40%,rgba(190,18,60,.16),transparent 58%),linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.86)),var(--theme-glass, rgba(255,243,247,.68)));box-shadow:0 18px 40px rgba(153,27,61,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94))}
#view-reports-accounts .sd-toolbar::after{content:'';position:absolute;inset-inline-start:16px;bottom:-1px;width:118px;height:3px;border-radius:999px;background:linear-gradient(90deg,#D62955,#991B3D)}
#view-reports-accounts .sd-toolbar .page-title{display:flex;align-items:center;color:var(--theme-ink, #50172A)}
#view-reports-accounts .sd-toolbar .page-title::before{content:"\ea6f";width:42px;height:42px;margin-inline-end:10px;border:1px solid rgba(190,18,60,.16);border-radius:15px;color:#fff;background:linear-gradient(145deg,#D62955,#991B3D);box-shadow:0 10px 22px rgba(153,27,61,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24))}
#view-reports-accounts .reports-title-help summary{border-color:rgba(190,18,60,.22);color:var(--theme-ink, #BE123C);background:var(--theme-glass, rgba(255,237,242,.92));box-shadow:0 8px 18px rgba(153,27,61,.12)}
#view-reports-accounts .reports-title-help[open] summary,#view-reports-accounts .reports-title-help summary:hover{color:#fff;background:#BE123C}
#view-reports-accounts .reports-export-actions{gap:6px;padding:5px;border:1px solid rgba(190,18,60,.16);background:var(--theme-glass, rgba(255,255,255,.68));box-shadow:0 10px 24px rgba(153,27,61,.11),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96))}
#view-reports-accounts .reports-export-btn{min-height:44px;color:var(--theme-ink, #BE123C)}
#view-reports-accounts .reports-export-btn.is-print{color:#fff;background:linear-gradient(135deg,#CE2450,#991B3D);box-shadow:0 9px 20px rgba(153,27,61,.27),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.16))}
#view-reports-accounts .reports-export-btn.is-excel:hover{color:var(--theme-ink, #991B3D);background:rgba(190,18,60,.10)}
#view-reports-accounts .reports-export-btn:focus-visible{outline-color:rgba(190,18,60,.32)}

/* Comparative toolbar — indigo comparison identity. */
#view-reports-compare .sd-toolbar{position:relative;overflow:visible;min-height:76px;padding:12px 14px;border:1px solid rgba(67,56,202,.18);border-radius:22px;background:radial-gradient(70% 180% at 96% -40%,rgba(67,56,202,.16),transparent 58%),linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.86)),var(--theme-glass, rgba(244,243,255,.68)));box-shadow:0 18px 40px rgba(55,48,163,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94))}
#view-reports-compare .sd-toolbar::after{content:'';position:absolute;inset-inline-start:16px;bottom:-1px;width:118px;height:3px;border-radius:999px;background:linear-gradient(90deg,#6366F1,#3730A3)}
#view-reports-compare .sd-toolbar .page-title{display:flex;align-items:center;color:var(--theme-ink, #312E81)}
#view-reports-compare .sd-toolbar .page-title::before{content:"\ea1e";width:42px;height:42px;margin-inline-end:10px;border:1px solid rgba(67,56,202,.16);border-radius:15px;color:#fff;background:linear-gradient(145deg,#6366F1,#3730A3);box-shadow:0 10px 22px rgba(55,48,163,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24))}
#view-reports-compare .reports-title-help summary{border-color:rgba(67,56,202,.22);color:var(--theme-ink, #4338CA);background:var(--theme-glass, rgba(238,238,255,.92));box-shadow:0 8px 18px rgba(55,48,163,.12)}
#view-reports-compare .reports-title-help[open] summary,#view-reports-compare .reports-title-help summary:hover{color:#fff;background:#4338CA}
#view-reports-compare .reports-export-actions{gap:6px;padding:5px;border:1px solid rgba(67,56,202,.16);background:var(--theme-glass, rgba(255,255,255,.68));box-shadow:0 10px 24px rgba(55,48,163,.11),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96))}
#view-reports-compare .reports-export-btn{min-height:44px;color:var(--theme-ink, #4338CA)}
#view-reports-compare .reports-export-btn.is-print{color:#fff;background:linear-gradient(135deg,#5B5CE2,#3730A3);box-shadow:0 9px 20px rgba(55,48,163,.27),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.16))}
#view-reports-compare .reports-export-btn.is-excel:hover{color:var(--theme-ink, #3730A3);background:rgba(67,56,202,.10)}
#view-reports-compare .reports-export-btn:focus-visible{outline-color:rgba(67,56,202,.32)}
@media(max-width:640px){#view-reports-accounts .sd-toolbar,#view-reports-compare .sd-toolbar{align-items:stretch}#view-reports-accounts .reports-export-actions,#view-reports-compare .reports-export-actions{width:100%}#view-reports-accounts .reports-export-btn,#view-reports-compare .reports-export-btn{flex:1;justify-content:center}}

/* Final sale-document print contract: desktop printing uses one readable A4
   page and is isolated from the legacy 48/58/80mm thermal overrides above. */
@media print {
    @page sale-receipt { size:A4 portrait; margin:12mm; }
    html:has(#receiptTemplate .receipt--sale-document),
    body:has(#receiptTemplate .receipt--sale-document) {
        width:auto!important;
        min-width:0!important;
        height:auto!important;
        margin:0!important;
        padding:0!important;
        background:#fff!important;
    }
    body:has(#receiptTemplate .receipt--sale-document)>*:not(#receiptTemplate) { display:none!important; }
    #receiptTemplate:has(.receipt--sale-document) {
        display:block!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        height:auto!important;
        margin:0!important;
        padding:0!important;
        background:#fff!important;
    }
    #receiptTemplate .receipt--sale-document {
        page:sale-receipt;
        width:100%!important;
        min-width:0!important;
        max-width:180mm!important;
        min-height:0!important;
        height:auto!important;
        margin:0 auto!important;
        padding:9mm 11mm!important;
        box-sizing:border-box!important;
        overflow:visible!important;
        color:#172033!important;
        background:#fff!important;
        border:1px solid #c9d1dc!important;
        border-top:4px solid #237b62!important;
        border-radius:3mm!important;
        box-shadow:none!important;
        font-size:11pt!important;
        line-height:1.65!important;
        break-inside:avoid!important;
        page-break-inside:avoid!important;
        break-after:avoid-page!important;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }
    #receiptTemplate .receipt--sale-document .receipt-head {
        display:grid!important;
        grid-template-columns:44mm minmax(0,1fr)!important;
        grid-template-rows:auto auto!important;
        align-items:center!important;
        column-gap:8mm!important;
        min-height:30mm!important;
        padding:0 0 6mm!important;
        text-align:start!important;
        border-bottom:1px solid #aeb8c6!important;
    }
    #receiptTemplate .receipt--sale-document .receipt-logo {
        grid-column:1!important;
        grid-row:1/3!important;
        width:44mm!important;
        max-width:44mm!important;
        height:26mm!important;
        max-height:26mm!important;
        margin:0!important;
        object-fit:contain!important;
    }
    #receiptTemplate .receipt--sale-document .receipt-logo.custom-logo-svg { width:44mm!important;height:26mm!important; }
    #receiptTemplate .receipt--sale-document .receipt-station-local { grid-column:2!important;grid-row:1!important;font-size:19pt!important;font-weight:900!important;line-height:1.35!important; }
    #receiptTemplate .receipt--sale-document .receipt-station-en { grid-column:2!important;grid-row:2!important;margin:0!important;font-size:10pt!important;font-weight:700!important;color:#526072!important; }
    #receiptTemplate .receipt--sale-document>.receipt-divider:first-of-type { display:none!important; }
    #receiptTemplate .receipt--sale-document .receipt-title { margin:6mm 0 1mm!important;font-size:22pt!important;font-weight:900!important;text-align:center!important;color:#172033!important; }
    #receiptTemplate .receipt--sale-document .receipt-number { margin:0 0 4mm!important;font-size:10pt!important;letter-spacing:1.2px!important;text-align:center!important;color:#506078!important; }
    #receiptTemplate .receipt--sale-document .receipt-document-identity { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3mm!important;margin:0 0 4mm!important; }
    #receiptTemplate .receipt--sale-document .receipt-document-identity:has(>:only-child) { grid-template-columns:1fr!important; }
    #receiptTemplate .receipt--sale-document .receipt-document-identity :is(.document-number-badge,.tracking-code-badge) { width:100%!important;min-height:13mm!important;margin:0!important;padding:3mm 4mm!important;box-sizing:border-box!important;border:1px solid #b9c5d3!important;border-radius:2.5mm!important;background:#f5f8fb!important;color:#172033!important; }
    #receiptTemplate .receipt--sale-document .receipt-document-identity bdi { margin-inline-start:auto!important;font-size:10pt!important;letter-spacing:.5px!important;white-space:nowrap!important; }
    #receiptTemplate .receipt--sale-document>.correction-document-chain { margin:0 0 4mm!important;padding:3mm!important;border-color:#c8bce9!important;background:#f7f4ff!important;break-inside:avoid!important; }
    #receiptTemplate .receipt--sale-document .receipt-qr { float:none!important;display:grid!important;grid-template-columns:25mm minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-items:center!important;justify-items:start!important;gap:1mm 5mm!important;width:auto!important;min-height:29mm!important;margin:0 0 4mm!important;padding:2mm 4mm!important;box-sizing:border-box!important;border:1px solid #d3dae4!important;border-radius:3mm!important;background:#fbfcfe!important;text-align:start!important; }
    #receiptTemplate .receipt--sale-document .receipt-qr img { grid-column:1!important;grid-row:1/3!important;width:25mm!important;height:25mm!important;margin:0!important; }
    #receiptTemplate .receipt--sale-document .receipt-qr span { grid-column:2!important;grid-row:1!important;align-self:end!important;font-size:9pt!important;color:#526072!important; }
    #receiptTemplate .receipt--sale-document .receipt-qr strong { grid-column:2!important;grid-row:2!important;align-self:start!important;font-size:11pt!important;letter-spacing:1px!important; }
    #receiptTemplate .receipt--sale-document .receipt-date-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3mm!important;margin:0 0 4mm!important; }
    #receiptTemplate .receipt--sale-document .receipt-date-grid>div { min-height:19mm!important;padding:3mm!important;box-sizing:border-box!important;border:1px solid #d4dbe5!important;border-radius:2.5mm!important;background:#f7f9fc!important; }
    #receiptTemplate .receipt--sale-document .receipt-date-grid span { font-size:9pt!important;color:#59677a!important; }
    #receiptTemplate .receipt--sale-document .receipt-date-grid i { font-size:17pt!important;color:#237b62!important; }
    #receiptTemplate .receipt--sale-document .receipt-date-grid b { font-size:11pt!important;color:#172033!important; }
    #receiptTemplate .receipt--sale-document .receipt-sale-lines { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;border-top:1px solid #ccd4df!important;border-inline-start:1px solid #ccd4df!important; }
    #receiptTemplate .receipt--sale-document .receipt-sale-lines .receipt-row { min-height:14mm!important;padding:3mm 4mm!important;border:0!important;border-inline-end:1px solid #ccd4df!important;border-bottom:1px solid #ccd4df!important;box-sizing:border-box!important;font-size:10.5pt!important; }
    #receiptTemplate .receipt--sale-document .receipt-sale-lines .receipt-row b { font-size:11.5pt!important; }
    #receiptTemplate .receipt--sale-document .receipt-total { min-height:20mm!important;margin:5mm 0 0!important;padding:4mm 6mm!important;border:1px solid #99c9ba!important;border-radius:3mm!important;background:#eaf7f2!important;color:#17644f!important;font-size:13pt!important; }
    #receiptTemplate .receipt--sale-document .receipt-total strong { font-size:18pt!important;color:#17644f!important; }
    #receiptTemplate .receipt--sale-document .receipt-footer { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2mm 6mm!important;margin:5mm 0 0!important;padding:4mm 0 0!important;border-top:1px solid #cbd3dd!important;text-align:start!important;font-size:9.5pt!important; }
    #receiptTemplate .receipt--sale-document .receipt-footer .receipt-contact { justify-content:flex-start!important; }
    #receiptTemplate .receipt--sale-document .receipt-contact-divider { display:none!important; }
    #receiptTemplate .receipt--sale-document .receipt-thanks { grid-column:1/-1!important;margin:2mm 0 0!important;padding:3mm 0 0!important;border-top:1px dashed #aeb8c6!important;text-align:center!important;font-size:11pt!important;color:#237b62!important; }
}

/* Approved A4 sales-document redesign. The POS receipt remains governed by
   the thermal rules because only the back-office print uses this class. */
@media print {
    @page sale-document { size:A4 portrait; margin:10mm; }
    #receiptTemplate .sale-document-print {
        page:sale-document;
        display:flex!important;
        flex-direction:column!important;
        width:100%!important;
        max-width:190mm!important;
        min-height:267mm!important;
        margin:0 auto!important;
        padding:6mm 7mm!important;
        box-sizing:border-box!important;
        overflow:visible!important;
        color:#17251f!important;
        background:#fffdf8!important;
        border:1px solid #17654f!important;
        border-radius:2mm!important;
        box-shadow:none!important;
        font-family:'IRANSans',sans-serif!important;
        font-size:10pt!important;
        line-height:1.55!important;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }
    #receiptTemplate .sale-document-print * { box-sizing:border-box!important; }
    #receiptTemplate .sale-document-print bdi {
        direction:ltr!important;
        unicode-bidi:isolate!important;
        font-family:Arial,sans-serif!important;
        font-variant-numeric:tabular-nums!important;
    }
    #receiptTemplate .sale-doc-header {
        display:grid!important;
        grid-template-columns:minmax(0,1.18fr) minmax(48mm,.82fr)!important;
        gap:8mm!important;
        align-items:center!important;
        min-height:34mm!important;
        padding:0 0 4mm!important;
        border-bottom:1px solid #17654f!important;
    }
    #receiptTemplate .sale-doc-heading { min-width:0!important;text-align:start!important; }
    #receiptTemplate .sale-doc-heading h1 { margin:0!important;color:#075640!important;font-size:27pt!important;font-weight:900!important;line-height:1.05!important; }
    #receiptTemplate .sale-doc-corrected-badge { display:inline-flex!important;margin-top:2mm!important;padding:1.2mm 3mm!important;border:1px solid #78ad98!important;border-radius:1.5mm!important;color:#075640!important;background:#edf7f1!important;font-size:9pt!important;font-weight:850!important; }
    #receiptTemplate .sale-doc-heading dl { display:flex!important;flex-wrap:wrap!important;gap:1mm 5mm!important;margin:2.5mm 0 0!important; }
    #receiptTemplate .sale-doc-heading dl div { display:flex!important;gap:1.5mm!important;align-items:baseline!important; }
    #receiptTemplate .sale-doc-heading dt { color:#58655f!important;font-size:8.5pt!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-heading dd { margin:0!important;color:#17251f!important;font-size:9.5pt!important;font-weight:800!important; }
    #receiptTemplate .sale-doc-brand { display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3mm!important;min-width:0!important; }
    #receiptTemplate .sale-doc-logo { width:25mm!important;max-width:25mm!important;height:25mm!important;max-height:25mm!important;margin:0!important;object-fit:contain!important; }
    #receiptTemplate .sale-doc-logo.custom-logo-svg { width:25mm!important;height:25mm!important; }
    #receiptTemplate .sale-doc-brand>div { display:flex!important;flex-direction:column!important;min-width:0!important;text-align:center!important; }
    #receiptTemplate .sale-doc-brand strong { color:#075640!important;font-size:14pt!important;font-weight:900!important;line-height:1.35!important; }
    #receiptTemplate .sale-doc-brand span { color:#607069!important;font-size:8pt!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-number { display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:6mm!important;align-items:center!important;margin-top:4mm!important;padding:3mm 4mm!important;border:1px solid #70a493!important;border-radius:1.7mm!important;background:#f3f8f5!important; }
    #receiptTemplate .sale-doc-number span { color:#075640!important;font-size:10.5pt!important;font-weight:900!important; }
    #receiptTemplate .sale-doc-number bdi { justify-self:end!important;color:#101815!important;font-size:15pt!important;font-weight:900!important;letter-spacing:.7px!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-info-grid { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3mm!important;margin-top:3mm!important; }
    #receiptTemplate .sale-doc-card { min-height:29mm!important;border:1px solid #8daaa0!important;border-radius:1.7mm!important;overflow:hidden!important;background:#fff!important; }
    #receiptTemplate .sale-doc-card h2 { margin:0!important;padding:2mm 3mm!important;color:#075640!important;background:#edf4f0!important;border-bottom:1px solid #c6d5cf!important;text-align:center!important;font-size:11pt!important;font-weight:900!important; }
    #receiptTemplate .sale-doc-card dl { display:grid!important;gap:1.5mm!important;margin:0!important;padding:3mm 4mm!important; }
    #receiptTemplate .sale-doc-card dl div { display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:3mm!important; }
    #receiptTemplate .sale-doc-card dt { color:#526159!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-card dd { margin:0!important;color:#101815!important;font-weight:850!important;text-align:end!important; }
    #receiptTemplate .sale-doc-tracking>div { display:grid!important;grid-template-columns:21mm minmax(0,1fr)!important;gap:4mm!important;align-items:center!important;padding:2mm 4mm!important; }
    #receiptTemplate .sale-doc-tracking img { width:21mm!important;height:21mm!important;object-fit:contain!important; }
    #receiptTemplate .sale-doc-tracking p { display:flex!important;flex-direction:column!important;gap:1mm!important;margin:0!important;min-width:0!important; }
    #receiptTemplate .sale-doc-tracking p span { color:#526159!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-tracking p bdi { color:#101815!important;font-size:10pt!important;font-weight:900!important;letter-spacing:.35px!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-table { width:100%!important;margin-top:3mm!important;border-collapse:separate!important;border-spacing:0!important;table-layout:fixed!important;border:1px solid #17654f!important;border-radius:1.7mm!important;overflow:hidden!important;font-size:9.3pt!important; }
    #receiptTemplate .sale-doc-table th,#receiptTemplate .sale-doc-table td { padding:2.5mm 2mm!important;border:0!important;border-inline-end:1px solid #a9bbb4!important;border-bottom:1px solid #a9bbb4!important;text-align:center!important;vertical-align:middle!important; }
    #receiptTemplate .sale-doc-table :is(th,td):last-child { border-inline-end:0!important; }
    #receiptTemplate .sale-doc-table tbody tr:last-child td { border-bottom:0!important; }
    #receiptTemplate .sale-doc-table th { color:#fff!important;background:#075640!important;font-size:9.5pt!important;font-weight:900!important; }
    #receiptTemplate .sale-doc-table th:first-child { width:29%!important; }
    #receiptTemplate .sale-doc-table th:nth-child(2) { width:19%!important; }
    #receiptTemplate .sale-doc-table th:nth-child(3) { width:17%!important; }
    #receiptTemplate .sale-doc-table th:nth-child(4) { width:16%!important; }
    #receiptTemplate .sale-doc-table th:nth-child(5) { width:19%!important; }
    #receiptTemplate .sale-doc-row.is-reversal td { background:#fff0ed!important; }
    #receiptTemplate .sale-doc-row.is-replacement td { background:#eef8f1!important; }
    #receiptTemplate .sale-doc-status { display:flex!important;align-items:center!important;justify-content:center!important;gap:1.5mm!important;font-weight:900!important; }
    #receiptTemplate .sale-doc-row.is-original .sale-doc-status i { color:#718078!important; }
    #receiptTemplate .sale-doc-row.is-reversal .sale-doc-status i { color:#c72d3d!important;font-size:14pt!important; }
    #receiptTemplate .sale-doc-row.is-replacement .sale-doc-status i { color:#168a58!important;font-size:14pt!important; }
    #receiptTemplate .sale-doc-row-number { display:block!important;margin-top:.7mm!important;color:#66736d!important;font-size:6.8pt!important;letter-spacing:.15px!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-reason { display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:4mm!important;align-items:center!important;margin-top:3mm!important;padding:2.6mm 3.5mm!important;border:1px solid #8daaa0!important;border-radius:1.7mm!important;background:#fff!important; }
    #receiptTemplate .sale-doc-reason strong { color:#075640!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-reason p { margin:0!important;text-align:end!important;font-size:9.5pt!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-total { display:flex!important;align-items:center!important;justify-content:space-between!important;gap:5mm!important;margin-top:3mm!important;padding:3mm 4mm!important;border:1px solid #70a493!important;border-radius:1.7mm!important;background:#e9f6ee!important;color:#075640!important; }
    #receiptTemplate .sale-doc-total span { font-size:12pt!important;font-weight:900!important; }
    #receiptTemplate .sale-doc-total strong { font-size:15pt!important;font-weight:900!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-official { margin:3mm 0 0!important;padding:2mm 3mm!important;border:1px solid #c3d1cb!important;border-radius:1.5mm!important;color:#34574a!important;background:#fff!important;text-align:center!important;font-size:8.5pt!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-signatures { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24mm!important;margin-top:auto!important;padding:10mm 10mm 3mm!important;border:1px solid #c3d1cb!important;border-radius:1.5mm!important; }
    #receiptTemplate .sale-doc-signatures div { padding-top:2mm!important;border-top:1px solid #53655d!important;text-align:center!important;font-size:8.5pt!important;font-weight:700!important; }
    #receiptTemplate .sale-doc-footer { display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4mm!important;margin-top:3mm!important;padding:2.5mm 4mm!important;border:1px solid #8daaa0!important;border-radius:1.5mm!important;color:#34574a!important;background:#fff!important;font-size:8pt!important; }
    #receiptTemplate .sale-doc-footer div { display:flex!important;align-items:center!important;gap:2mm!important;min-width:0!important; }
    #receiptTemplate .sale-doc-footer div:last-child { justify-content:flex-end!important; }
    #receiptTemplate .sale-doc-footer i { color:#075640!important;font-size:14pt!important; }
}

/* Final reference-matched overrides; kept last so the approved A4 sheet wins. */
@media print {
    #receiptTemplate .sale-document-print { min-height:267mm!important;padding:5mm 3mm 3mm!important;color:#101713!important;background:#fffef7!important;border:0!important;border-radius:0!important; }
    #receiptTemplate .sale-doc-header { grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10mm!important;align-items:start!important;min-height:56mm!important;padding:0!important;border:0!important; }
    #receiptTemplate .sale-doc-heading { grid-column:1!important;grid-row:1!important;text-align:start!important; }
    #receiptTemplate .sale-doc-heading h1 { font-size:34pt!important;line-height:.98!important;letter-spacing:-1px!important; }
    #receiptTemplate .sale-doc-corrected-badge { margin-top:1.5mm!important;padding:1.2mm 5mm!important;border:0!important;border-radius:2.6mm!important;color:#fff!important;background:#22924f!important;font-size:11pt!important; }
    #receiptTemplate .sale-doc-heading dl { display:grid!important;gap:.7mm!important;margin:1.5mm 0 0!important; }
    #receiptTemplate .sale-doc-heading dl div { display:flex!important;justify-content:flex-start!important;gap:1.8mm!important; }
    #receiptTemplate .sale-doc-heading dt { color:#111!important;font-size:9.5pt!important;font-weight:850!important; }
    #receiptTemplate .sale-doc-heading dt::after { content:':'!important; }
    #receiptTemplate .sale-doc-heading dd { font-size:10pt!important;font-weight:850!important; }
    #receiptTemplate .sale-doc-heading dl div:first-child dd { font-size:9pt!important;letter-spacing:.2px!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-brand { grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:27mm minmax(0,1fr)!important;gap:1mm 4mm!important;align-items:center!important;justify-items:start!important; }
    #receiptTemplate .sale-doc-logo,#receiptTemplate .sale-doc-logo.custom-logo-svg { grid-row:1!important;width:27mm!important;max-width:27mm!important;height:31mm!important;max-height:31mm!important; }
    #receiptTemplate .sale-doc-brand>div { grid-row:1!important;text-align:start!important; }
    #receiptTemplate .sale-doc-brand strong { font-size:15pt!important;white-space:nowrap!important; }
    #receiptTemplate .sale-doc-brand span { margin-top:1mm!important;color:#155393!important;font-size:9.3pt!important;font-weight:750!important; }
    #receiptTemplate .sale-doc-brand p { grid-column:1/-1!important;width:100%!important;margin:1.5mm 0 0!important;padding-top:2.5mm!important;border-top:1px solid #176399!important;color:#155393!important;text-align:center!important;font-size:8.5pt!important;font-weight:700!important;word-spacing:2mm!important; }
    #receiptTemplate .sale-doc-number { display:none!important; }
    #receiptTemplate .sale-doc-info-grid { gap:3mm!important;margin-top:1mm!important; }
    #receiptTemplate .sale-doc-card { min-height:34mm!important;border:1px solid #438fa1!important;border-radius:1.5mm!important;background:transparent!important; }
    #receiptTemplate .sale-doc-card h2 { padding:2.2mm 3mm!important;color:#075640!important;background:linear-gradient(90deg,#f5fbf7,#dceee4,#f5fbf7)!important;border:0!important;font-size:13pt!important; }
    #receiptTemplate .sale-doc-card dl { gap:2.5mm!important;padding:5mm 5mm 3mm!important; }
    #receiptTemplate .sale-doc-card dt { color:#161916!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-card dd { color:#111!important;font-size:11pt!important; }
    #receiptTemplate .sale-doc-tracking>div { grid-template-columns:24mm minmax(0,1fr)!important;padding:2.5mm 4mm!important; }
    #receiptTemplate .sale-doc-tracking img { width:24mm!important;height:24mm!important; }
    #receiptTemplate .sale-doc-tracking p span { color:#111!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-tracking p bdi { font-size:11.5pt!important; }
    #receiptTemplate .sale-doc-ledger { margin-top:5mm!important;border:1px solid #0c624d!important;border-radius:1.4mm!important;overflow:hidden!important; }
    #receiptTemplate .sale-doc-table { margin:0!important;border:0!important;border-radius:0!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-table th,#receiptTemplate .sale-doc-table td { height:14mm!important;padding:2.4mm 2mm!important;border-color:#5792a0!important;font-weight:750!important; }
    #receiptTemplate .sale-doc-table th { height:13mm!important;color:#fff!important;background:linear-gradient(90deg,#064a39,#00604a,#064a39)!important;font-size:12pt!important; }
    #receiptTemplate .sale-doc-table tbody tr:last-child td { border-bottom:1px solid #5792a0!important; }
    #receiptTemplate .sale-doc-row.is-reversal td { background:#ffe9e7!important; }
    #receiptTemplate .sale-doc-row.is-replacement td { background:#edf9ef!important; }
    #receiptTemplate .sale-doc-row.is-original .sale-doc-status i { color:#08634d!important;font-size:15pt!important; }
    #receiptTemplate .sale-doc-row.is-reversal .sale-doc-status i,#receiptTemplate .sale-doc-row.is-replacement .sale-doc-status i { font-size:19pt!important; }
    #receiptTemplate .sale-doc-empty-row td { height:11mm!important;background:transparent!important; }
    #receiptTemplate .sale-doc-reason { display:flex!important;justify-content:flex-start!important;gap:1mm!important;margin:0!important;padding:2.2mm 4mm!important;border:0!important;border-radius:0!important;background:#f1f9f4!important; }
    #receiptTemplate .sale-doc-reason strong { color:#111!important;font-size:10.5pt!important; }
    #receiptTemplate .sale-doc-reason p { margin:0!important;text-align:start!important;font-size:10pt!important; }
    #receiptTemplate .sale-doc-total { margin:0!important;padding:2.5mm 4mm!important;border:0!important;border-top:1px solid #0c624d!important;border-radius:0!important;background:#edf8f1!important; }
    #receiptTemplate .sale-doc-total span { font-size:13pt!important; }
    #receiptTemplate .sale-doc-total strong { color:#111!important;font-size:18pt!important; }
    #receiptTemplate .sale-doc-official { margin:8mm 0 0!important;padding:0!important;border:0!important;background:transparent!important;color:#155393!important;font-size:9.5pt!important; }
    #receiptTemplate .sale-doc-signatures { gap:38mm!important;margin-top:11mm!important;padding:0 14mm!important;border:0!important;border-radius:0!important; }
    #receiptTemplate .sale-doc-signatures div { padding-top:2.5mm!important;border-top:1px solid #155393!important;color:#155393!important;font-size:9pt!important; }
    #receiptTemplate .sale-doc-footer { grid-template-columns:1.25fr .85fr .8fr!important;gap:5mm!important;margin-top:auto!important;padding:5mm 2mm 0!important;border:0!important;border-top:1px solid #087d82!important;border-radius:0!important;background:transparent!important;color:#155393!important;font-size:8.5pt!important; }
    #receiptTemplate .sale-doc-footer div { justify-content:flex-start!important; }
    #receiptTemplate .sale-doc-footer div:nth-child(2) { justify-content:center!important; }
    #receiptTemplate .sale-doc-footer strong { color:#075640!important;text-align:center!important;font-size:10pt!important;line-height:1.55!important; }
    #receiptTemplate .sale-doc-footer i { color:#00654e!important;font-size:16pt!important; }
}