:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --muted: #6b7280;
    --border: #e6eaf1;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;
    --green: #0f9f79;
    --green-soft: #ecfdf5;
    --violet: #7c3aed;
    --danger: #dc2626;
    --shadow-sm: 0 5px 18px rgba(31, 41, 55, .055);
    --shadow-md: 0 14px 40px rgba(31, 41, 55, .09);
    --radius: 18px;
    --sidebar-width: 258px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: 'Prompt', 'Noto Sans Thai', Tahoma, sans-serif; color: var(--text); background: var(--bg); font-size: 14px; }
a { text-decoration: none; }
.form-control, .form-select, .btn, .input-group-text { border-radius: 11px; }
.form-control, .form-select { border-color: #dce2eb; min-height: 42px; padding: .55rem .78rem; }
.form-control:focus, .form-select:focus { border-color: #8eb4ff; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .10); }
.form-label { font-weight: 500; color: #374151; margin-bottom: .4rem; }
.btn { min-height: 40px; padding: .5rem .9rem; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); }
.btn-icon { width: 40px; height: 40px; min-height: 40px; border: 1px solid var(--border); background: #fff; display: inline-grid; place-items: center; padding: 0; border-radius: 12px; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: rgba(255,255,255,.96); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 1035; box-shadow: 8px 0 30px rgba(31,41,55,.03); }
.sidebar-brand { height: 78px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; color: #fff; display: grid; place-items: center; font-size: 19px; background: linear-gradient(135deg, #2563eb, #0f9f79); box-shadow: 0 8px 22px rgba(37,99,235,.24); }
.brand-title { font-weight: 650; letter-spacing: -.1px; }
.brand-subtitle { font-size: 11px; color: var(--muted); margin-top: 1px; }
.sidebar-nav { padding: 16px 12px; flex: 1; overflow-y: auto; }
.nav-section { margin: 18px 10px 7px; color: #9ca3af; font-size: 10px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; }
.nav-item-link { display: flex; align-items: center; gap: 12px; color: #475569; padding: 11px 12px; border-radius: 12px; margin: 3px 0; font-weight: 500; transition: .18s ease; }
.nav-item-link i { font-size: 17px; width: 22px; text-align: center; color: #64748b; }
.nav-item-link:hover { background: #f5f8ff; color: var(--primary); }
.nav-item-link.active { background: linear-gradient(90deg, #edf4ff, #f4fbff); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.nav-item-link.active i { color: var(--primary); }
.sidebar-footer { padding: 14px 18px 18px; border-top: 1px solid var(--border); background: #fbfcfe; }
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; }
.topbar { height: 64px; position: sticky; top: 0; z-index: 1020; background: rgba(248,250,252,.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(226,232,240,.8); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; }
.topbar-title { display: flex; align-items: center; gap: 9px; font-weight: 550; }
.status-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 4px rgba(16,185,129,.09); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.badge-soft { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; color: #1d4ed8; background: #eaf2ff; font-size: 12px; font-weight: 600; }
.badge-soft.green { color: #047857; background: #ecfdf5; }
.content-wrap { padding: 26px; max-width: 1680px; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
.page-heading h1 { font-size: clamp(1.45rem, 2.1vw, 2rem); font-weight: 650; letter-spacing: -.035em; margin: 2px 0 4px; }
.page-heading p { color: var(--muted); margin: 0; }
.action-heading { align-items: center; }
.eyebrow { color: var(--primary); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; }
.page-card { background: rgba(255,255,255,.98); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.metric-card { position: relative; overflow: hidden; border: 1px solid var(--border); background: #fff; border-radius: var(--radius); padding: 20px; display: flex; gap: 15px; min-height: 132px; box-shadow: var(--shadow-sm); }
.metric-card::after { content: ''; position: absolute; width: 105px; height: 105px; border-radius: 50%; right: -32px; top: -38px; opacity: .12; }
.metric-blue::after { background:#2563eb; } .metric-green::after { background:#10b981; } .metric-violet::after { background:#8b5cf6; }
.metric-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; }
.metric-blue .metric-icon { color:#2563eb; background:#eff6ff; } .metric-green .metric-icon { color:#059669; background:#ecfdf5; } .metric-violet .metric-icon { color:#7c3aed; background:#f5f3ff; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { font-size: 29px; font-weight: 650; line-height: 1.15; margin: 4px 0 2px; letter-spacing: -.03em; }
.metric-value.metric-text { font-size: 22px; }
.metric-foot { color: #94a3b8; font-size: 11px; }
.card-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:15px; }
.card-title-row h2 { font-size: 17px; margin: 0 0 4px; font-weight: 600; } .card-title-row p { color:var(--muted); margin:0; font-size:12px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.feature-item { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; border:1px solid var(--border); color:var(--text); border-radius:14px; padding:13px; background:#fff; transition:.18s; }
.feature-item:hover { transform: translateY(-1px); box-shadow:var(--shadow-sm); border-color:#cfdaf0; }
.feature-item .feature-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--primary); background:var(--primary-soft); font-size:17px; }
.feature-item strong { display:block; font-weight:600; } .feature-item span { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.timeline-mini > div { display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px dashed var(--border); }
.timeline-mini > div:last-child { border-bottom:0; }.timeline-mini > div>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--primary);background:var(--primary-soft);font-weight:650}.timeline-mini p{margin:0}.timeline-mini strong,.timeline-mini small{display:block}.timeline-mini small{color:var(--muted);margin-top:2px}
.hint-card { display:flex; gap:11px; align-items:flex-start; border:1px solid #d7e7ff; background:linear-gradient(90deg,#f3f8ff,#f8fbff); border-radius:14px; padding:12px 14px; color:#315a9b; }
.hint-card>i { color:#f59e0b; font-size:16px; margin-top:1px; }.hint-card strong,.hint-card span{display:block}.hint-card strong{font-size:12px}.hint-card span{font-size:11px;color:#657896;margin-top:2px}
.grid-card { padding: 0; overflow: hidden; }
.grid-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--border); background:#fbfcfe; }
.search-box { position:relative; max-width:440px; flex:1; }.search-box>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#94a3b8;z-index:1}.search-box .form-control{padding-left:38px;background:#fff}
#employeeGrid,#serviceGrid,#userGrid,#roleGrid,#expenseGrid,#wageGrid { min-height: 260px; }
.tabulator { border:0 !important; background:#fff !important; font-family:'Prompt','Noto Sans Thai',Tahoma,sans-serif !important; font-size:13px !important; }
.tabulator .tabulator-header { border:0 !important; border-bottom:1px solid var(--border) !important; background:#f8fafc !important; color:#475569 !important; }
.tabulator .tabulator-header .tabulator-col { background:transparent !important; border-right:1px solid #edf0f5 !important; }.tabulator .tabulator-col-title{font-weight:600}
.tabulator-row { border-bottom:1px solid #eff2f6 !important; min-height:46px !important; }.tabulator-row:hover{background:#f8fbff !important}.tabulator-row .tabulator-cell{border-right:1px solid #f1f3f7 !important;padding:10px 11px !important}.tabulator-footer{border-top:1px solid var(--border)!important;background:#fbfcfe!important;padding:8px!important}
.tabulator .tabulator-header-filter input,.tabulator .tabulator-header-filter select{border:1px solid #dde3ec;border-radius:8px;padding:5px 7px;font-family:inherit;outline:none;width:100%}
.grid-action { width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;color:var(--primary);background:var(--primary-soft);transition:.15s}.grid-action:hover{background:#dbeafe;color:#1d4ed8}
.status-badge { display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap}.status-badge.green{background:#ecfdf5;color:#047857}.status-badge.gray{background:#f1f5f9;color:#64748b}.status-badge.blue{background:#eff6ff;color:#2563eb}
.form-card { padding:22px; }.narrow-form{max-width:720px}.form-section-title{display:flex;gap:10px;align-items:flex-start;margin-bottom:15px}.form-section-title>i{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--primary);background:var(--primary-soft)}.form-section-title strong,.form-section-title span{display:block}.form-section-title strong{font-weight:600}.form-section-title span{font-size:11px;color:var(--muted);margin-top:2px}.form-divider{border-color:var(--border);opacity:1;margin:24px 0}.form-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border);margin:24px -22px -22px;padding:16px 22px;background:#fbfcfe;border-radius:0 0 var(--radius) var(--radius)}
.rate-table-wrap{border:1px solid var(--border);border-radius:14px;overflow:auto}.rate-table{margin:0;min-width:620px}.rate-table thead th{background:#f8fafc;color:#64748b;font-size:12px;font-weight:600;border-bottom-color:var(--border)}
.global-loading { position:fixed;inset:0;display:none;place-items:center;background:rgba(248,250,252,.62);backdrop-filter:blur(3px);z-index:3000 }.global-loading.show{display:grid}.loading-card{min-width:190px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:16px;padding:18px 20px;display:flex;align-items:center;justify-content:center;gap:12px}.loading-text{font-weight:500;color:#475569}
.sidebar-backdrop{display:none}
.login-page{background:#f3f6fb;min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(420px,.95fr)}.login-visual{position:relative;overflow:hidden;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.2),transparent 30%),linear-gradient(145deg,#123b78,#0b796e);color:#fff;align-items:center;padding:8vw}.visual-content{position:relative;z-index:2;max-width:620px}.login-logo{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:27px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 45px rgba(0,0,0,.12)}.login-logo.mobile{background:linear-gradient(135deg,#2563eb,#0f9f79);margin-bottom:18px}.visual-content h1{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.05em;margin:24px 0 12px}.visual-content>p{font-size:17px;color:rgba(255,255,255,.78);max-width:540px}.visual-points{margin-top:35px;display:grid;gap:13px;color:rgba(255,255,255,.88)}.visual-points i{color:#8bf0c9;margin-right:8px}.visual-orb{position:absolute;border-radius:50%;filter:blur(1px);background:rgba(255,255,255,.07)}.orb-1{width:360px;height:360px;right:-120px;top:-100px}.orb-2{width:260px;height:260px;left:-100px;bottom:-80px}.login-form-panel{display:grid;place-items:center;padding:40px;background:rgba(255,255,255,.92)}.login-form-wrap{width:min(100%,450px)}.login-form-wrap h2{font-size:2rem;font-weight:650;letter-spacing:-.04em;margin:4px 0 5px}.input-icon-wrap{position:relative}.input-icon-wrap>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#94a3b8;z-index:2}.input-icon-wrap .form-control{padding-left:45px}.login-hint{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:#f8fafc;border:1px solid var(--border);font-size:11px;color:#64748b}.login-hint i{color:var(--primary);margin-top:1px}
@media(max-width:1199.98px){.feature-grid{grid-template-columns:1fr}.content-wrap{padding:22px}}
@media(max-width:991.98px){.sidebar{transform:translateX(-105%);transition:transform .22s ease}.app-main{margin-left:0}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:1030}.topbar{padding:0 16px}.content-wrap{padding:18px}.login-shell{grid-template-columns:1fr}.login-form-panel{min-height:100vh}.login-form-wrap{max-width:520px}}
@media(max-width:575.98px){body{font-size:13px}.content-wrap{padding:14px}.page-heading{align-items:flex-start;flex-direction:column}.action-heading .btn{width:100%}.grid-toolbar{align-items:stretch;flex-direction:column}.search-box{max-width:none}.grid-toolbar>.btn{width:100%}.page-card{border-radius:15px}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}.topbar-title span:last-child{display:none}.login-form-panel{padding:24px}.metric-card{min-height:118px}}


/* ===== Phase 2: Today Board / Attendance / Service Session ===== */
.metric-red::after { background:#ef4444; }
.metric-amber::after { background:#f59e0b; }
.metric-red .metric-icon { color:#dc2626; background:#fef2f2; }
.metric-amber .metric-icon { color:#d97706; background:#fffbeb; }
.metric-card.compact { min-height:112px; padding:16px; align-items:center; }
.metric-card.compact .metric-icon { width:42px; height:42px; flex-basis:42px; border-radius:13px; }
.metric-card.compact .metric-value { font-size:25px; }
.status-badge.amber { background:#fffbeb; color:#b45309; }
.grid-action.green { color:#047857; background:#ecfdf5; border:0; }
.grid-action.green:hover { color:#065f46; background:#d1fae5; }
#serviceSessionGrid { min-height:300px; }
.service-grid-toolbar .search-box { max-width:520px; }
.date-filter-wrap { position:relative; min-width:180px; }
.date-filter-wrap>i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#94a3b8; z-index:2; pointer-events:none; }
.date-filter-wrap .form-control { padding-left:39px; background:#fff; }
.today-legend { display:flex; gap:13px; flex-wrap:wrap; color:#64748b; font-size:11px; }
.today-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; border-radius:999px; display:inline-block; }
.legend-dot.available { background:#10b981; }
.legend-dot.busy { background:#ef4444; }
.legend-dot.break { background:#f59e0b; }
.employee-status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:14px; }
.employee-status-card { border:1px solid var(--border); border-radius:16px; padding:15px; background:#fff; box-shadow:0 4px 14px rgba(31,41,55,.035); position:relative; overflow:hidden; }
.employee-status-card::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:#cbd5e1; }
.employee-status-card.status-available::before { background:#10b981; }
.employee-status-card.status-busy::before { background:#ef4444; }
.employee-status-card.status-break::before { background:#f59e0b; }
.employee-status-card.status-out::before { background:#64748b; }
.employee-status-top { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; }
.employee-avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#eef4ff,#eefbf8); color:#1d4ed8; font-weight:700; font-size:17px; border:1px solid #e5ecf7; }
.employee-status-name { min-width:0; }
.employee-status-name strong,.employee-status-name span { display:block; }
.employee-status-name strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.employee-status-name span { color:var(--muted); font-size:10.5px; margin-top:1px; }
.employee-state { white-space:nowrap; border-radius:999px; padding:5px 8px; font-size:10.5px; font-weight:600; }
.state-available { color:#047857; background:#ecfdf5; }
.state-busy { color:#b91c1c; background:#fef2f2; }
.state-break { color:#b45309; background:#fffbeb; }
.state-not-in,.state-out { color:#64748b; background:#f1f5f9; }
.employee-service { margin:13px 0 12px; min-height:42px; border-radius:11px; padding:9px 10px; background:#f8fafc; border:1px solid #edf1f6; }
.employee-service strong,.employee-service span { display:block; }
.employee-service strong { font-size:12px; font-weight:600; }
.employee-service span { color:#64748b; font-size:10.5px; margin-top:2px; }
.employee-service.muted { display:flex; align-items:center; }
.employee-service.muted span { margin:0; }
.employee-actions { display:flex; gap:6px; flex-wrap:wrap; min-height:31px; }
.employee-actions .btn { min-height:31px; padding:.32rem .58rem; font-size:11px; border-radius:9px; }
.empty-state { padding:32px; text-align:center; color:#94a3b8; border:1px dashed #dbe2ec; border-radius:14px; background:#fbfcfe; }
.time-mode-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.time-mode-option { position:relative; cursor:pointer; margin:0; }
.time-mode-option>input { position:absolute; opacity:0; pointer-events:none; }
.time-mode-option>span { display:grid; grid-template-columns:38px 1fr; column-gap:10px; border:1px solid #dce2eb; border-radius:14px; padding:12px; min-height:74px; background:#fff; transition:.15s ease; }
.time-mode-option>span>i { grid-row:1 / span 2; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#2563eb; background:#eff6ff; font-size:17px; }
.time-mode-option strong,.time-mode-option small { display:block; }
.time-mode-option strong { font-size:12px; font-weight:600; align-self:end; }
.time-mode-option small { color:#64748b; font-size:10.5px; margin-top:2px; align-self:start; }
.time-mode-option>input:checked+span { border-color:#8bb3ff; background:#f7faff; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.calculated-end-card { min-height:74px; border:1px dashed #bfd3f5; border-radius:14px; padding:11px 13px; background:#f8fbff; display:flex; flex-direction:column; justify-content:center; }
.calculated-end-card span { color:#64748b; font-size:10.5px; }
.calculated-end-card strong { font-size:20px; color:#1d4ed8; margin-top:2px; }
@media(max-width:767.98px){
    .time-mode-switch{grid-template-columns:1fr}
    .employee-status-grid{grid-template-columns:1fr}
    .today-legend{display:none}
}


/* ===== Phase 3: Expense / Wage Summary ===== */
#expenseGrid,#wageGrid { min-height:300px; }
.expense-grid-toolbar .search-box { max-width:560px; }
.expense-mode-switch { padding:10px 14px; border:1px solid var(--border); border-radius:13px; background:#fbfcfe; }
.expense-mode-switch .form-check-input { width:2.5em; height:1.25em; margin-top:.12em; }
.expense-total-preview strong { font-size:18px; }
.wage-filter-card { padding:16px 18px; }
.finance-summary-card { min-height:190px; }
.finance-line { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px dashed var(--border); color:#64748b; }
.finance-line strong { color:var(--text); font-weight:600; text-align:right; }
.finance-line.total { border-bottom:0; padding-top:14px; margin-top:2px; font-size:15px; }
.finance-line.total strong { color:#047857; font-size:18px; }
.finance-big-number { font-size:clamp(1.55rem,3vw,2.15rem); font-weight:650; letter-spacing:-.035em; color:#1d4ed8; margin-top:18px; }
.quick-stack { display:grid; gap:8px; }
.quick-stack>a { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 11px; background:#fff; transition:.15s ease; }
.quick-stack>a:hover { border-color:#cdd9ee; background:#f8fbff; transform:translateY(-1px); }
.quick-stack>a>i:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
.quick-stack>a>i:last-child { color:#94a3b8; }
.quick-stack>a span { font-weight:500; }
@media(max-width:575.98px){
    .expense-mode-switch{width:100%}
    .finance-summary-card{min-height:auto}
}

/* ===== Phase 4: Executive Dashboard / Reports ===== */
.report-export-actions { display:flex; gap:8px; flex-wrap:wrap; }
.report-filter-card { padding:16px 18px; }
.report-quick-range { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.report-chart-card { min-height:360px; }
.chart-wrap { position:relative; min-height:270px; height:300px; }
.home-chart-wrap { height:260px; min-height:240px; }
.report-tabs-card { overflow:hidden; }
.report-tabs { gap:6px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.report-tabs .nav-link { color:#526174; border-radius:10px; padding:.48rem .8rem; font-size:12px; font-weight:500; }
.report-tabs .nav-link.active { background:#eaf2ff; color:#1d4ed8; }
#serviceReportGrid,#employeeReportGrid,#expenseReportGrid,#serviceDetailGrid { min-height:300px; }
.top-service-list { display:grid; gap:8px; }
.top-service-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--border); }
.top-service-row:last-child { border-bottom:0; }
.top-service-row .rank { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#eff6ff; color:#1d4ed8; font-weight:650; font-size:11px; }
.top-service-row div { min-width:0; }
.top-service-row strong,.top-service-row small { display:block; }
.top-service-row strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-service-row small { font-size:10px; color:#94a3b8; margin-top:2px; }
.top-service-row b { color:#0f766e; font-size:12px; font-weight:650; }
.empty-mini { color:#94a3b8; text-align:center; padding:24px 10px; border:1px dashed var(--border); border-radius:12px; background:#fbfcfe; }
@media(max-width:767.98px){
    .report-export-actions{width:100%}.report-export-actions .btn{flex:1}
    .report-filter-card .d-flex{align-items:stretch!important}.report-filter-card .d-flex>div:not(.report-quick-range){flex:1;min-width:140px}.report-filter-card #applyReport{width:100%}
    .chart-wrap{height:260px}.report-tabs{overflow-x:auto;flex-wrap:nowrap}.report-tabs .nav-link{white-space:nowrap}
}