/* V2 visual authority overlay for N07 V3 Web. Presentation only; no business logic. */
:root{--n07-auto-green:#159a55;--n07-auto-green-deep:#0f8448;--n07-auto-green-soft:#eaf8f0;--n07-code-gray:#7d8796;--n07-code-gray-on-red:#d5dae1}
.inventory-donut-card .css-donut.n07-v2-donut,
.inventory-capacity-card .capacity-donut.n07-v2-capacity{width:145px!important;height:145px!important;min-width:145px!important;min-height:145px!important;position:relative!important;display:grid!important;place-items:center!important;margin:auto!important;border-radius:50%!important;background:none!important;overflow:visible!important;isolation:isolate}
.inventory-donut-card .css-donut.n07-v2-donut::after{display:none!important;content:none!important}
.inventory-capacity-card .capacity-donut.n07-v2-capacity::after{content:""!important;position:absolute!important;inset:29px!important;border-radius:50%!important;background:#fff!important;z-index:1!important}
.n07-v2-ring{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;overflow:visible;pointer-events:none}
.inventory-donut-card .css-donut.n07-v2-donut>div,
.inventory-capacity-card .capacity-donut.n07-v2-capacity>div{position:relative!important;z-index:2!important;text-align:center}
.inventory-donut-card .css-donut.n07-v2-donut>div{width:87px;height:87px;border-radius:50%;display:grid;place-content:center;background:#fff}
.inventory-donut-card .css-donut.n07-v2-donut strong,
.inventory-capacity-card .capacity-donut.n07-v2-capacity strong{font-size:20px!important;line-height:1.1!important}
.inventory-donut-card .css-donut.n07-v2-donut span,
.inventory-capacity-card .capacity-donut.n07-v2-capacity span{font-size:9.5px!important;color:#65707e!important}

/* Dashboard KPI rings: exact used/total fraction drives the colored arc. */
.dashboard-top-card .n07-dashboard-capacity-ring{position:relative!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:none!important;overflow:visible!important;isolation:isolate}
.dashboard-top-card .n07-dashboard-capacity-ring::before,
.dashboard-top-card .n07-dashboard-capacity-ring::after{display:none!important;content:none!important}
.dashboard-top-card .n07-dashboard-capacity-ring>.n07-dashboard-capacity-svg{z-index:0!important}
.dashboard-top-card .n07-dashboard-capacity-ring>*:not(.n07-v2-ring){position:relative!important;z-index:2!important}

/* Vehicle category semantics: motorbike stays Viettel red; AUTO_EV/car becomes green. */
.vehicle-glyph-car,.warehouse-domain-auto,.n07-auto-icon{color:var(--n07-auto-green)!important}
.dashboard-top-card.pin-car .top-card-icon,
.overview-card.gray .overview-icon,
.capacity-box.capacity-car .capacity-vehicle-icon,
.type-group[data-type-warehouse="AUTO_EV"] .type-title-icon>span{color:var(--n07-auto-green)!important;background:var(--n07-auto-green-soft)!important}
.dashboard-top-card.pin-car .sparkline polyline{stroke:var(--n07-auto-green)!important}
.type-pill.car,.n07-auto-pill{background:var(--n07-auto-green-soft)!important;color:var(--n07-auto-green)!important}

/* Warehouse switch exception: inactive AUTO_EV uses green icon but same black title as motorbike; active red uses white icon/title; technical code stays neutral gray. */
.warehouse-switch button[data-wh="AUTO_EV"]:not(.active) .warehouse-domain-auto{color:var(--n07-auto-green)!important}
.warehouse-switch button[data-wh="AUTO_EV"]:not(.active) .warehouse-title{color:#111827!important}
.warehouse-switch button[data-wh="AUTO_EV"]:not(.active) .warehouse-code{color:var(--n07-code-gray)!important}
.warehouse-switch button[data-wh="AUTO_EV"].active .warehouse-domain-auto,
.warehouse-switch button[data-wh="AUTO_EV"].active .warehouse-title{color:#fff!important}
.warehouse-switch button[data-wh="AUTO_EV"].active .warehouse-code{color:var(--n07-code-gray-on-red)!important}

/* AUTO_EV labels: semantic title green; technical code remains neutral like VF_E2W. */
.dashboard-warehouse-card.n07-auto-scope .dashboard-wh-title strong{color:var(--n07-auto-green)!important}
.dashboard-warehouse-card.n07-auto-scope .dashboard-wh-title span{color:var(--n07-auto-green)!important;background:var(--n07-auto-green-soft)!important}
.type-group[data-type-warehouse="AUTO_EV"] .type-title-icon>strong{color:var(--n07-auto-green)!important}
.type-group[data-type-warehouse="AUTO_EV"] .type-title-icon em{color:var(--n07-code-gray)!important}
.permission-warehouse-card.n07-auto-scope .permission-warehouse-head strong{color:var(--n07-auto-green)!important}
.permission-warehouse-card.n07-auto-scope .permission-warehouse-head span{color:var(--n07-auto-green)!important}
.subcard.n07-auto-scope>strong{color:var(--n07-auto-green)!important}

/* Keep motorbike identity red even when AUTO_EV green rules are active. */
.warehouse-switch button[data-wh="VF_E2W"]:not(.active) .warehouse-domain-vf{color:#e30613!important}
.dashboard-top-card.pin-bike .top-card-icon,.capacity-box.capacity-bike .capacity-vehicle-icon{color:#e30613!important;background:#fff0f2!important}

/* Progress bars must encode data, not decoration. JS writes exact widths with !important. */
.mini-progress,.bar-track{overflow:hidden!important}
.mini-progress>i,.bar-fill,.progress-fill,.capacity-fill{transition:width .12s ease-out!important;max-width:100%!important}

/* Temporary perf HUD only appears with ?perf=1. Keep it clear of the mobile bottom navigation. */
@media (max-width:760px){
  #n07-perf-hud{right:10px!important;bottom:110px!important;max-width:calc(100vw - 20px)!important;padding:7px 9px!important;border-radius:9px!important;font-size:11px!important;line-height:1.3!important;white-space:normal!important}
}

@media (min-width:761px){
  /* Direct V2-style backdrop: one blurred warehouse photo + one authority overlay. No SVG transport tint and no stacked composite. */
  body.n07-v2-visual .main{background-image:linear-gradient(180deg,rgba(246,248,251,.72),rgba(246,248,251,.86)),url('/warehouse_bg_web_v3.webp')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
  body.n07-v2-visual .card{background:rgba(255,255,255,.965)!important;box-shadow:0 5px 18px rgba(18,24,35,.055)!important}
  body.n07-v2-visual .inventory-donut-card .donut-layout{grid-template-columns:170px 1fr!important;gap:15px!important;align-items:center!important}
}