/* YallaVit brand: navy, orange, turquoise; semantic colors retain status labels. */
:root{--ink:#102f62;--muted:#63718a;--accent:#f36508;--soft:#fff0e5;--line:#e2e7ef;--bg:#f4f6fa;--navy:#0d2f66;--turquoise:#00afbd;--orange:#ff6900}
body{color:var(--ink)}button.primary:hover{background:#d95300}a{color:#174c87}.content{max-width:1540px}.brand{margin:0 0 30px;justify-content:center}.brand-logo{display:block;width:192px;height:56px;overflow:hidden;flex:none;background:#fff}.brand-logo img{display:block;width:200px;max-width:none;height:auto;transform:translateY(-25px)}.sidebar{padding-top:24px}.nav button.active{background:#e8f0fb;color:var(--navy);box-shadow:inset -3px 0 var(--orange)}.nav button:hover{background:#f3f6fb}.login-box .brand{display:flex;flex-direction:column;gap:12px}.login-box .brand-logo{width:270px;height:80px}.login-box .brand-logo img{width:280px;transform:translateY(-34px)}.login-tagline{font-size:12px;color:var(--muted)}.topbar{background:#fff}.sidebar-bottom{font-size:11px}.identity .avatar{background:#e4f5f7;color:#087c8a}
.dashboard .page-head{margin-bottom:12px}.dashboard h1{font-size:27px}.dashboard-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--turquoise)}.scope-chip{border:1px solid var(--line);border-radius:20px;padding:5px 10px;margin-right:auto;background:#fff}.section-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 13px}.section-kicker h2,.operation-heading h2{font-size:17px;margin:0}.section-kicker>span{font-size:11px;color:var(--muted)}
.tone-navy{--tone:#123c75;--tint:#eaf0f9;--tone-note:#4c6788}.tone-orange,.tone-amber{--tone:#a84904;--tint:#fff0df;--tone-note:#875931}.tone-teal{--tone:#087984;--tint:#e0f6f7;--tone-note:#3d747b}.tone-violet,.tone-blue{--tone:#315da6;--tint:#eaf0ff;--tone-note:#526889}.tone-green{--tone:#17784c;--tint:#e7f5ed;--tone-note:#49705c}.tone-pink{--tone:#bf2a65;--tint:#ffeaf1;--tone-note:#895369}.tone-red{--tone:#b63e45;--tint:#feedef;--tone-note:#88535a}
.money-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.metric-card{min-width:0;text-align:right;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:18px 20px 20px;background:var(--tint);color:var(--ink);border:1px solid transparent;border-radius:14px;box-shadow:0 3px 12px #102f6205;transition:transform .15s,box-shadow .15s}.metric-card:hover{background:var(--tint);transform:translateY(-2px);box-shadow:0 8px 20px #102f6212;border-color:var(--tone)}.metric-head{display:flex;align-items:center;justify-content:space-between}.metric-icon{width:36px;height:36px;display:inline-grid;place-items:center;color:var(--tone);background:#ffffffb8;border-radius:11px;flex:none}.metric-icon svg{width:21px;height:21px}.metric-arrow{color:var(--tone);font-size:16px;font-weight:normal}.metric-label{font-size:12px;color:var(--tone);font-weight:600}.metric-value{font:700 28px/1.35 Arial,Tahoma,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.6px;overflow-wrap:anywhere}.metric-value small{font:normal 11px Tahoma,Arial,sans-serif;letter-spacing:0}.metric-note{font-size:11px;line-height:1.6;color:var(--tone-note);font-weight:normal}.money-grid .tone-navy{background:var(--navy);color:white}.money-grid .tone-navy .metric-label,.money-grid .tone-navy .metric-note,.money-grid .tone-navy .metric-arrow{color:#dfeafa}.money-grid .tone-navy .metric-icon{background:#ffffff1a;color:#68e1e8}.money-grid .tone-navy:hover{background:#123b76}
.profit-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 18px;border:1px solid var(--line);background:#fff;border-radius:10px;margin-top:12px;font-size:12px}.profit-strip>svg{width:21px;height:21px;color:var(--turquoise)}.profit-strip>strong{margin-left:10px}.profit-strip .money{font-size:16px}.profit-strip>.tiny{margin-right:auto}.period-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:15px}.period-shortcuts .metric-card{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:17px 20px;background:#fff;border:1px solid var(--line);border-right:4px solid var(--tone)}.period-shortcuts .metric-head{grid-column:2;grid-row:1/4}.period-shortcuts .metric-arrow{display:none}.period-shortcuts .metric-icon{background:var(--tint);height:47px;width:47px}.period-shortcuts .metric-label,.period-shortcuts .metric-value,.period-shortcuts .metric-note{grid-column:1}.period-shortcuts .metric-value{font-size:25px}
.date-controls{border:1px solid var(--line);background:#fff;border-radius:12px;padding:15px 18px;margin-bottom:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.date-presets{display:flex;gap:4px;flex-wrap:wrap}.date-presets button{padding:8px 10px;border:0;background:transparent;font-size:12px;font-weight:normal;white-space:nowrap}.date-presets button.active{background:var(--navy);color:white;font-weight:bold}.date-custom{display:flex;gap:9px;align-items:flex-end;margin-right:auto;flex-wrap:wrap}.date-custom label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--muted)}.date-custom input{height:36px;border:1px solid var(--line);border-radius:6px;background:#fafbfd;padding:4px 7px;color:var(--ink);font-size:12px;max-width:148px}.date-custom button{height:36px;font-size:11px;padding:5px 12px}.date-scope{flex-basis:100%;margin:0;color:var(--ink);font-size:11px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.date-scope svg{width:15px;height:15px;color:#8594a8}.date-scope>span{color:var(--muted)}
.operation-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 14px}.operation-heading>button{margin-right:auto}.selected-total{background:#e7edf8;color:var(--navy);padding:5px 9px;border-radius:6px;font-size:11px}.rates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.rate-card{display:flex;flex-direction:column;gap:12px;text-align:right;padding:18px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--tone);border-radius:12px;min-width:0}.rate-card:hover{background:var(--tint)}.rate-heading{display:flex;align-items:center;gap:8px;font-size:12px}.rate-heading .metric-icon{width:29px;height:29px;background:var(--tint)}.rate-heading .metric-icon svg{width:17px;height:17px}.info-mark{margin-right:auto;color:var(--muted);font-weight:normal}.rate-value{font:700 33px Arial,Tahoma,sans-serif;color:var(--tone);font-variant-numeric:tabular-nums}.rate-note{font-size:11px;color:var(--muted);font-weight:normal;line-height:1.7}.rate-card progress,.status-row progress{width:100%;height:6px;appearance:none;border:0;border-radius:10px;background:#edf0f5;overflow:hidden;accent-color:var(--tone)}progress::-webkit-progress-bar{background:#edf0f5;border-radius:10px}progress::-webkit-progress-value{background:var(--tone);border-radius:10px}progress::-moz-progress-bar{background:var(--tone);border-radius:10px}.shipment-note{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px;line-height:1.9;margin:13px 0 23px}.shipment-note>svg{width:17px;height:17px;flex:none;color:var(--orange)}.shipment-note>button{margin-right:auto}.shipment-note strong{color:var(--ink)}
.analytics-grid{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.3fr);gap:18px;margin:18px 0}.analytics-grid>.panel{margin:0;min-width:0}.panel{border-radius:12px}.panel-head h2{font-size:15px}.status-breakdown{padding:13px 19px 17px}.status-row{display:grid;grid-template-columns:8px minmax(80px,1fr) minmax(40px,1fr) 35px;align-items:center;gap:9px;width:100%;border:0;background:none;padding:10px 1px;font-size:11px;font-weight:normal}.status-row:hover{background:var(--tint)}.status-row strong{text-align:left;font-size:13px}.status-dot{height:7px;width:7px;background:var(--tone);border-radius:50%}.trend-wrap{padding:16px 18px 12px;position:relative}.trend-chart{display:block;width:100%;height:auto;max-height:260px;direction:ltr;overflow:visible}.chart-grid{stroke:#e9edf3;stroke-width:1}.chart-tick{fill:#748098;font:11px Arial,sans-serif}.chart-value{fill:var(--navy);font:600 12px Arial,sans-serif}.chart-bar{fill:var(--turquoise)}.trend-caption{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;line-height:1.8;margin-top:8px;flex-wrap:wrap}.chart-no-data{text-align:center;font-size:12px;color:var(--muted);margin:-125px 0 100px;position:relative}.chart-data{font-size:11px;color:var(--muted);margin-top:14px}.chart-data summary{cursor:pointer}.chart-data .table-wrap{margin-top:10px}.metric-definitions p{font-size:13px;color:var(--muted)}.metric-definitions h3{margin-bottom:7px}.pagination{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin:14px 0 23px}.dashboard .empty{min-height:135px;padding:26px}.dashboard .empty-icon{display:none}.dashboard .empty p{font-size:12px;max-width:520px}.dashboard .badge{font-size:11px}.dashboard .panel+.panel{margin-top:18px}.dashboard .tiny{font-size:11px}
@media(min-width:1500px){.content{padding-right:40px;padding-left:40px}}
@media(max-width:1200px){.money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-grid{grid-template-columns:1fr}.date-custom{margin-right:0}.date-controls{gap:12px}.metric-card{gap:7px}.metric-value{font-size:29px}}
@media(max-width:700px){.dashboard h1{font-size:24px}.section-kicker{align-items:flex-start}.section-kicker>span{font-size:10px;max-width:145px}.money-grid{gap:10px}.metric-card{padding:14px;gap:7px}.metric-value{font-size:25px}.metric-label{font-size:11px}.metric-note{font-size:10px}.metric-icon{width:29px;height:29px;border-radius:8px}.metric-icon svg{width:18px;height:18px}.period-shortcuts{gap:10px}.period-shortcuts .metric-card{padding:13px;gap:5px 9px}.period-shortcuts .metric-icon{height:33px;width:33px}.period-shortcuts .metric-note{font-size:10px}.rates-grid{gap:9px}.rate-card{padding:13px 10px;gap:10px}.rate-heading{font-size:11px;flex-wrap:wrap;gap:5px}.rate-heading .info-mark{display:none}.rate-heading .metric-icon{width:24px;height:24px}.rate-value{font-size:27px}.rate-note{font-size:10px}.date-controls{padding:13px}.date-presets{gap:2px}.date-presets button{padding:8px;font-size:11px}.date-custom{gap:7px}.date-custom input{max-width:133px}.date-custom button{font-size:10px;padding:5px 9px}.date-scope>span{font-size:10px}.profit-strip{font-size:11px;padding:11px 13px}.profit-strip>.tiny{margin-right:0;flex-basis:100%}.operation-heading h2{font-size:16px}.selected-total{font-size:10px}.operation-heading>button{font-size:10px}.dashboard-meta{margin-bottom:18px}.shipment-note{font-size:11px}.scope-chip{font-size:10px}.trend-wrap{padding:13px}.trend-chart{min-height:180px}}
@media(max-width:420px){.rates-grid{grid-template-columns:1fr}.rate-card{display:grid;grid-template-columns:1fr auto;align-items:center}.rate-heading{grid-column:1}.rate-value{grid-row:1/3;grid-column:2}.rate-card progress{grid-column:1}.rate-note{grid-column:1/3}.period-shortcuts .metric-card{padding:12px 9px}.period-shortcuts .metric-head{display:none}.period-shortcuts .metric-label{font-size:11px}.metric-value{font-size:23px}.date-custom{width:100%;display:grid;grid-template-columns:1fr 1fr}.date-custom input{max-width:none;width:100%}.date-custom button{grid-column:1/3}.status-row{grid-template-columns:8px minmax(95px,1fr) minmax(30px,1fr) 24px}}
@media(prefers-reduced-motion:reduce){.metric-card{transition:none}.metric-card:hover{transform:none}}