/* 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}

/* Toast deliberately not overridden here. The base app is the single toast authority. */

/* 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}
}

/* N07 V3 warehouse dashboard desktop visual refresh — user-approved clean direction.
   Presentation-only. No business data, routing, API or operation semantics are changed. */
@media (min-width:761px){
  body.n07-v2-visual{background:#f4f7fb!important;color:#132038!important}
  body.n07-v2-visual .main{background-color:#f4f7fb!important;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 .sidebar{background:linear-gradient(180deg,#111b29 0%,#172536 100%)!important;border-right:1px solid #26384b!important;box-shadow:6px 0 24px rgba(15,23,42,.08)!important}
  body.n07-v2-visual .viettel-strip{background:linear-gradient(135deg,#f1182a 0%,#df0015 100%)!important;box-shadow:0 10px 24px rgba(227,6,19,.18)!important}
  body.n07-v2-visual .brand-row{border-bottom:1px solid rgba(255,255,255,.07)!important}
  body.n07-v2-visual #nav button{border-radius:9px!important;margin:2px 9px!important;transition:background .14s ease,color .14s ease,transform .14s ease!important}
  body.n07-v2-visual #nav button:hover{background:rgba(255,255,255,.075)!important;transform:translateX(1px)}
  body.n07-v2-visual #nav button.active{background:linear-gradient(135deg,#f21d32 0%,#df0619 100%)!important;box-shadow:0 8px 18px rgba(227,6,19,.2)!important}
  body.n07-v2-visual .sidebar-bottom .status-pill{background:#123f35!important;border-color:#1a624f!important;color:#35d69a!important}
  body.n07-v2-visual .sidebar-bottom button{background:#213144!important;border-color:#31455b!important;color:#f8fafc!important}
  body.n07-v2-visual .sidebar-bottom button:hover{background:#2a3e55!important}

  body.n07-v2-visual .topbar{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e6ebf2!important;box-shadow:0 3px 16px rgba(15,23,42,.035)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  body.n07-v2-visual .topbar h2{font-weight:850!important;letter-spacing:-.025em!important;color:#111c32!important}
  body.n07-v2-visual #runtime-line{color:#78869b!important}
  body.n07-v2-visual .warehouse-switch button{border:1px solid #dfe6ee!important;border-radius:11px!important;background:#fff!important;box-shadow:0 4px 12px rgba(15,23,42,.045)!important}
  body.n07-v2-visual .warehouse-switch button.active{background:linear-gradient(135deg,#f21d32 0%,#df0619 100%)!important;border-color:#df0619!important;box-shadow:0 8px 20px rgba(227,6,19,.2)!important}
  body.n07-v2-visual .user-chip,body.n07-v2-visual .top-notification{background:#fff!important;border-color:#e1e7ef!important;box-shadow:0 3px 10px rgba(15,23,42,.04)!important}

  body.n07-v2-visual #page-dashboard{padding-top:14px!important}
  body.n07-v2-visual #page-dashboard>.warehouse-context-card{margin-bottom:12px!important;padding:14px 16px!important;border:1px solid #e2e8f0!important;border-radius:12px!important;background:#fff!important;box-shadow:0 5px 18px rgba(18,24,35,.045)!important}
  body.n07-v2-visual #page-dashboard>.warehouse-context-card label{font-weight:760!important;color:#26364c!important}
  body.n07-v2-visual #page-dashboard>.warehouse-context-card input,
  body.n07-v2-visual #page-dashboard>.warehouse-context-card select{height:40px!important;border-radius:8px!important;border-color:#d9e1eb!important;background:#fff!important;font-weight:650!important;color:#17233a!important}

  body.n07-v2-visual #dashboard-metrics.metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:12px!important}
  body.n07-v2-visual #dashboard-metrics .overview-card{position:relative!important;min-height:94px!important;padding:16px 18px!important;border:1px solid #e2e8f0!important;border-radius:12px!important;background:#fff!important;box-shadow:0 6px 18px rgba(18,24,35,.05)!important;overflow:hidden!important;isolation:isolate}
  body.n07-v2-visual #dashboard-metrics .overview-card::after{content:"";position:absolute;right:-18px;bottom:-25px;width:118px;height:72px;border-radius:55% 45% 0 0;background:linear-gradient(155deg,transparent 15%,rgba(227,6,19,.035) 16% 30%,rgba(227,6,19,.075) 31% 33%,transparent 34% 47%,rgba(227,6,19,.055) 48% 50%,transparent 51%);z-index:-1;pointer-events:none}
  body.n07-v2-visual #dashboard-metrics .overview-card.green::after{background:linear-gradient(155deg,transparent 15%,rgba(21,154,85,.035) 16% 30%,rgba(21,154,85,.075) 31% 33%,transparent 34% 47%,rgba(21,154,85,.055) 48% 50%,transparent 51%)}
  body.n07-v2-visual #dashboard-metrics .overview-card.orange::after{background:linear-gradient(155deg,transparent 15%,rgba(245,137,24,.035) 16% 30%,rgba(245,137,24,.085) 31% 33%,transparent 34% 47%,rgba(245,137,24,.06) 48% 50%,transparent 51%)}
  body.n07-v2-visual #dashboard-metrics .overview-icon{width:49px!important;height:49px!important;min-width:49px!important;border-radius:50%!important;display:grid!important;place-items:center!important}
  body.n07-v2-visual #dashboard-metrics .overview-card.red .overview-icon,
  body.n07-v2-visual #dashboard-metrics .overview-card.red-soft .overview-icon{background:#fff0f2!important;color:#e30613!important}
  body.n07-v2-visual #dashboard-metrics .overview-card.green .overview-icon{background:#e9f8f0!important;color:#0aa15b!important}
  body.n07-v2-visual #dashboard-metrics .overview-card.orange .overview-icon{background:#fff4e6!important;color:#f08b16!important}
  body.n07-v2-visual #dashboard-metrics .overview-label{font-size:11px!important;font-weight:800!important;letter-spacing:.035em!important;color:#637187!important}
  body.n07-v2-visual #dashboard-metrics .overview-card strong{font-size:25px!important;line-height:1.08!important;color:#101a2d!important;letter-spacing:-.02em!important}
  body.n07-v2-visual #dashboard-metrics .overview-card.green strong{color:#0a9d59!important}
  body.n07-v2-visual #dashboard-metrics .overview-card.orange strong{color:#f08b16!important}
  body.n07-v2-visual #dashboard-metrics .overview-card small{font-size:10px!important;color:#8a96a8!important}

  body.n07-v2-visual .dashboard-main-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;gap:12px!important;margin-bottom:12px!important;align-items:stretch!important}
  body.n07-v2-visual .dashboard-main-grid>.card,
  body.n07-v2-visual #dashboard-analytics>.analytics-card{border:1px solid #e2e8f0!important;border-radius:12px!important;background:rgba(255,255,255,.965)!important;box-shadow:0 6px 18px rgba(18,24,35,.045)!important}
  body.n07-v2-visual .dashboard-main-grid>.card{padding:14px!important;height:100%!important}
  body.n07-v2-visual .dashboard-main-grid h3,
  body.n07-v2-visual #dashboard-analytics h3{font-size:16px!important;font-weight:850!important;letter-spacing:-.012em!important;color:#152138!important}
  body.n07-v2-visual .dashboard-warehouse-card{border:1px solid #e0e7ef!important;border-radius:10px!important;background:#fff!important;padding:12px 13px!important}
  body.n07-v2-visual .dashboard-wh-title strong{color:#e30613!important;font-weight:850!important}
  body.n07-v2-visual .dashboard-wh-title span{border-radius:999px!important;background:#fff0f2!important;color:#e30613!important;padding:3px 8px!important;font-weight:800!important}
  body.n07-v2-visual .kv-list{column-gap:18px!important;row-gap:7px!important}
  body.n07-v2-visual .dashboard-system-line{margin-top:10px!important;border:1px solid #e3e9f1!important;border-radius:9px!important;background:#fbfcfe!important;padding:9px 11px!important}

  body.n07-v2-visual .quick-grid{gap:9px!important}
  body.n07-v2-visual .quick-grid button{min-height:96px!important;border:1px solid #dfe6ee!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease!important}
  body.n07-v2-visual .quick-grid button:hover{transform:translateY(-1px)!important;box-shadow:0 7px 18px rgba(18,24,35,.07)!important;border-color:#cfd8e4!important}
  body.n07-v2-visual .quick-grid button:nth-child(1),body.n07-v2-visual .quick-grid button:nth-child(2){background:linear-gradient(180deg,#fff7f8 0%,#fff0f2 100%)!important;border-color:#f7dadd!important}
  body.n07-v2-visual .quick-grid button:nth-child(3){background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%)!important;border-color:#d9e6f7!important}
  body.n07-v2-visual .quick-grid button:nth-child(4){background:linear-gradient(180deg,#fbf9ff 0%,#f3efff 100%)!important;border-color:#e5def8!important}
  body.n07-v2-visual .quick-grid button:nth-child(5){background:linear-gradient(180deg,#f7fffb 0%,#ecfaf3 100%)!important;border-color:#d6efe1!important}
  body.n07-v2-visual .quick-grid button:nth-child(6){background:linear-gradient(180deg,#fffaf5 0%,#fff1e5 100%)!important;border-color:#f4dfc9!important}
  body.n07-v2-visual .quick-grid button:nth-child(1) .quick-icon,body.n07-v2-visual .quick-grid button:nth-child(2) .quick-icon{color:#e30613!important}
  body.n07-v2-visual .quick-grid button:nth-child(3) .quick-icon{color:#0e5eb8!important}
  body.n07-v2-visual .quick-grid button:nth-child(4) .quick-icon{color:#3321aa!important}
  body.n07-v2-visual .quick-grid button:nth-child(5) .quick-icon{color:#0a9d59!important}
  body.n07-v2-visual .quick-grid button:nth-child(6) .quick-icon{color:#e86f13!important}
  body.n07-v2-visual .quick-grid button span{font-weight:820!important;color:#172238!important}

  body.n07-v2-visual #dashboard-analytics{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(150px,auto)!important;gap:12px!important;align-items:stretch!important}
  body.n07-v2-visual #dashboard-analytics>.analytics-card{padding:14px 16px!important;min-height:150px!important;height:100%!important}
  body.n07-v2-visual .analytics-sub{color:#7f8b9d!important;font-size:10px!important;margin-top:-2px!important;margin-bottom:10px!important}
  body.n07-v2-visual .capacity-box{border:1px solid #e1e8f0!important;border-radius:10px!important;background:#fbfcfe!important;padding:12px!important}
  body.n07-v2-visual .capacity-box strong{font-size:23px!important;color:#152138!important}
  body.n07-v2-visual .capacity-track,body.n07-v2-visual .bar-track{height:8px!important;background:#e9eef4!important;border-radius:999px!important}
  body.n07-v2-visual .capacity-fill,body.n07-v2-visual .bar-fill{border-radius:999px!important;background:#e30613!important}
  body.n07-v2-visual .bar-row{grid-template-columns:minmax(82px,auto) 1fr 28px!important;gap:10px!important;align-items:center!important}
  body.n07-v2-visual .bar-row>span:first-child{font-size:11px!important;color:#405069!important}
  body.n07-v2-visual .bar-value{font-weight:800!important;color:#172238!important}

  body.n07-v2-visual .dashboard-donut-card{overflow:hidden!important}
  body.n07-v2-visual .dashboard-donut-layout{display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;gap:18px!important;align-items:center!important;min-height:112px!important}
  body.n07-v2-visual .dashboard-donut{width:116px!important;height:116px!important;border-radius:50%!important;display:grid!important;place-items:center!important;position:relative!important;margin:auto!important;box-shadow:inset 0 0 0 1px rgba(227,6,19,.035)!important}
  body.n07-v2-visual .dashboard-donut::after{content:"";position:absolute!important;inset:22px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 0 0 1px #eef2f6!important}
  body.n07-v2-visual .dashboard-donut-center{position:relative!important;z-index:1!important;display:grid!important;text-align:center!important;line-height:1.05!important}
  body.n07-v2-visual .dashboard-donut-center strong{font-size:24px!important;color:#152138!important}
  body.n07-v2-visual .dashboard-donut-center span{font-size:9px!important;color:#7d899a!important;margin-top:4px!important}
  body.n07-v2-visual .dashboard-donut-legend{display:grid!important;gap:7px!important;align-content:center!important}
  body.n07-v2-visual .dashboard-donut-legend-row{display:grid!important;grid-template-columns:10px minmax(0,1fr) 28px 44px!important;gap:8px!important;align-items:center!important;font-size:10px!important;color:#435269!important}
  body.n07-v2-visual .dashboard-donut-legend-row i{width:8px!important;height:8px!important;border-radius:50%!important;display:block!important}
  body.n07-v2-visual .dashboard-donut-legend-row strong{font-size:10px!important;color:#172238!important;text-align:right!important}
  body.n07-v2-visual .dashboard-donut-legend-row em{font-style:normal!important;color:#7f8b9d!important;text-align:right!important}

  body.n07-v2-visual .card,body.n07-v2-visual .filter-card{border-color:#e2e8f0!important}
  body.n07-v2-visual button:focus-visible,body.n07-v2-visual input:focus-visible,body.n07-v2-visual select:focus-visible{outline:3px solid rgba(227,6,19,.15)!important;outline-offset:1px!important}
}