/* V586 - match approved visual */
:root{
 --v586-nav:#0b2746;
 --v586-nav2:#102f52;
 --v586-blue:#1e7bf6;
 --v586-green:#20b875;
 --v586-orange:#ffad32;
 --v586-purple:#7f46e8;
 --v586-red:#ff5767;
 --v586-cyan:#11b6c7;
 --v586-indigo:#5368e8;
 --v586-page:#f4f8fc;
 --v586-border:#dde7f1;
 --v586-text:#16375d;
 --v586-muted:#71849a;
}
body{background:var(--v586-page)!important}
.v577-page{
 max-width:none!important;
 width:100%!important;
 padding:18px 20px 28px!important;
 background:var(--v586-page)!important;
 font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
 color:var(--v586-text)!important
}
.v577-head{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 margin:0 0 10px!important;gap:12px!important
}
.v577-head h1{
 margin:0!important;font-size:26px!important;font-weight:800!important;letter-spacing:-.2px!important;
 color:#16375d!important;text-transform:none!important
}
.v577-head p{font-size:12px!important;color:#5d7898!important;margin:4px 0 0!important}
.v577-topbar{
 display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;
 background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:-48px 0 12px auto!important
}
.v577-topbar input[type=date],.v577-topbar select,.v577-topbar button{
 height:38px!important;border:1px solid #d7e3ee!important;border-radius:8px!important;background:#fff!important;
 color:#27496e!important;font-size:12px!important;font-weight:700!important;box-shadow:0 2px 8px rgba(15,45,75,.04)!important
}
.v577-tabs{
 display:flex!important;width:100%!important;gap:0!important;background:#fff!important;border:1px solid #dce6ef!important;
 border-radius:9px!important;padding:0!important;overflow:hidden!important;margin:0 0 12px!important
}
.v577-tabs button{
 flex:1 1 auto!important;height:38px!important;border:0!important;border-right:1px solid #e6edf4!important;
 border-radius:0!important;background:#fff!important;color:#355675!important;font-size:11px!important;font-weight:700!important
}
.v577-tabs button:last-child{border-right:0!important}
.v577-tabs button.active,.v577-tabs button[aria-selected=true]{
 background:#147df5!important;color:#fff!important;box-shadow:none!important
}

/* Remove old large banner look, convert to compact status bar */
.v577-banner{
 display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
 background:#fff!important;border:1px solid #dce6ef!important;border-radius:9px!important;
 padding:9px 12px!important;box-shadow:0 3px 10px rgba(20,55,90,.04)!important;margin:0 0 12px!important;color:#264767!important
}
.v577-banner:before{display:none!important}
.v577-banner h2{font-size:13px!important;color:#294d72!important;margin:0!important;font-weight:800!important}
.v577-banner p,.v577-banner span,.v577-banner small{font-size:10px!important;color:#71849a!important}
.v577-banner aside{margin-left:auto!important;text-align:right!important}
.v577-banner aside strong{
 display:inline-flex!important;align-items:center!important;gap:6px!important;background:#e8f8ef!important;
 color:#1e8f59!important;border-radius:999px!important;padding:6px 10px!important;font-size:10px!important
}
.v577-banner:after{
 content:"00:05"!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
 background:transparent!important;border:0!important;padding:0!important;margin:0!important;color:#173c66!important;font-size:11px!important;font-weight:800!important
}

/* KPI row exactly like mockup */
.v577-kpis{
 display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px!important
}
.v577-kpi{
 position:relative!important;min-height:132px!important;border:0!important;border-radius:11px!important;padding:16px 14px!important;
 box-shadow:0 8px 18px rgba(30,70,120,.10)!important;color:#fff!important;overflow:hidden!important
}
.v577-kpi:before,.v577-kpi:after{content:""!important;position:absolute!important;border-radius:50%!important;background:rgba(255,255,255,.14)!important}
.v577-kpi:before{width:72px!important;height:72px!important;right:-16px!important;top:-18px!important}
.v577-kpi:after{width:36px!important;height:36px!important;left:10px!important;top:10px!important}
.v577-kpi:nth-child(1){background:linear-gradient(135deg,#2088ff,#1669e9)!important}
.v577-kpi:nth-child(2){background:linear-gradient(135deg,#2bc77f,#1ca861)!important}
.v577-kpi:nth-child(3){background:linear-gradient(135deg,#ffb941,#ff9826)!important}
.v577-kpi:nth-child(4){background:linear-gradient(135deg,#8b53ef,#7137d8)!important}
.v577-kpi:nth-child(5){background:linear-gradient(135deg,#ff6975,#ef4f61)!important}
.v577-kpi:nth-child(6){background:linear-gradient(135deg,#20c8cb,#0ea6b6)!important}
.v577-kpi:nth-child(7){background:linear-gradient(135deg,#6077f2,#4c5fd7)!important}
.v577-kpi span,.v577-kpi small{
 position:relative!important;z-index:2!important;display:block!important;margin-left:38px!important;
 font-size:10px!important;color:#fff!important;opacity:.95!important;text-transform:none!important;font-weight:700!important;letter-spacing:0!important
}
.v577-kpi strong{
 position:relative!important;z-index:2!important;display:block!important;margin:16px 0 0!important;font-size:22px!important;
 line-height:1!important;color:#fff!important;font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
/* green trend line illusion */
.v577-kpi strong:after{content:" ↗";font-size:11px!important;font-weight:700!important;color:#fff!important;opacity:.9!important}

/* Main analytical grid */
.v577-grid{
 display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr)!important;gap:12px!important;align-items:start!important
}
.v577-card,.v577-chart,.v577-panel,.v577-section{
 background:#fff!important;border:1px solid var(--v586-border)!important;border-radius:10px!important;
 box-shadow:0 3px 12px rgba(25,60,95,.045)!important;padding:14px!important;min-width:0!important
}
.v577-card h3,.v577-chart h3,.v577-panel h3,.v577-section h3{
 margin:0 0 10px!important;padding:0!important;border:0!important;font-size:13px!important;font-weight:800!important;color:#1b4168!important
}
.v577-chart{min-height:330px!important}
.v577-orders{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important
}
.v577-orders>div{
 min-height:82px!important;border:1px solid #e3ebf3!important;border-radius:9px!important;background:#fbfdff!important;padding:11px!important
}
.v577-orders strong{font-size:19px!important;color:#17466e!important}
.v577-table{
 width:100%!important;min-width:620px!important;border-collapse:collapse!important
}
.v577-table th{
 background:#f3f7fb!important;color:#56718e!important;font-size:9px!important;text-transform:none!important;font-weight:800!important;padding:9px!important
}
.v577-table td{
 color:#294a6b!important;font-size:10.5px!important;padding:9px!important;border-bottom:1px solid #edf2f6!important
}
.v577-table tbody tr:hover td{background:#f9fbfd!important}
.v577-note textarea{
 min-height:100px!important;border:1px solid #dce5ee!important;background:#fbfdff!important;border-radius:8px!important;font-size:12px!important
}
.v577-auto{
 background:linear-gradient(135deg,#146dc6,#1557a0)!important;border:0!important;color:#fff!important
}
.v577-auto h3,.v577-auto p,.v577-auto small,.v577-auto strong{color:#fff!important}
.v577-auto button{
 height:34px!important;background:#dcebfb!important;color:#15508d!important;border:0!important;border-radius:7px!important;font-size:11px!important;font-weight:800!important
}

/* Desktop 12–15 inch */
@media(max-width:1500px){
 .v577-page{padding:14px 16px 24px!important}
 .v577-kpis{grid-template-columns:repeat(7,minmax(120px,1fr))!important;gap:8px!important}
 .v577-kpi{min-height:118px!important;padding:14px 12px!important}
 .v577-kpi strong{font-size:19px!important}
 .v577-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,.95fr)!important}
}

/* Tablet */
@media(max-width:1100px){
 .v577-topbar{margin:0 0 10px!important;justify-content:flex-start!important;flex-wrap:wrap!important}
 .v577-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .v577-grid{grid-template-columns:1fr!important}
}

/* Mobile matching mockup */
@media(max-width:767px){
 .v577-page{padding:8px 8px 78px!important}
 .v577-head{display:block!important;margin-bottom:8px!important}
 .v577-head h1{font-size:18px!important}
 .v577-head p{font-size:10px!important}
 .v577-topbar{
   display:grid!important;grid-template-columns:1fr auto!important;gap:6px!important;margin:0 0 8px!important
 }
 .v577-topbar input[type=date],.v577-topbar select,.v577-topbar button{height:34px!important;font-size:10px!important}
 .v577-tabs{overflow-x:auto!important}
 .v577-tabs button{min-width:96px!important;font-size:10px!important;flex:0 0 auto!important}
 .v577-banner{padding:8px 9px!important;align-items:flex-start!important;flex-wrap:wrap!important}
 .v577-banner h2{font-size:11px!important}
 .v577-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .v577-kpi{min-height:90px!important;border-radius:9px!important;padding:10px!important}
 .v577-kpi span,.v577-kpi small{margin-left:26px!important;font-size:8px!important}
 .v577-kpi strong{font-size:16px!important;margin-top:12px!important;white-space:normal!important}
 .v577-kpi:after{width:28px!important;height:28px!important;left:8px!important;top:8px!important}
 .v577-grid{display:block!important}
 .v577-card,.v577-chart,.v577-panel,.v577-section{margin-bottom:8px!important;padding:10px!important;border-radius:9px!important}
 .v577-chart{min-height:220px!important}
 .v577-orders{grid-template-columns:1fr!important}
 .v577-table{min-width:560px!important}
 .v577-card:has(.v577-table),.v577-panel:has(.v577-table){overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
}
@media(max-width:420px){
 .v577-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .v577-kpi strong{font-size:15px!important}
}

/* keep print clean */
@media print{
 .v577-page{background:#fff!important;padding:0!important}
 .v577-topbar,.v577-tabs{display:none!important}
 .v577-card,.v577-chart,.v577-panel,.v577-section,.v577-kpi{box-shadow:none!important}
}