
/* WHB P0 original product design system — private operator, owner and network workspaces.
   Tokens, identities and authorization boundaries remain first-party. */
:root{--console-background:#f3f6f7;--console-card:#fff;--console-navy:#102f57;--console-teal:#168c95;--console-border:#dce7e9;--console-text:#244053}
.app{background:var(--console-background)}
.rail{background:linear-gradient(165deg,#0c213e 0%,#102f57 74%,#163e62 100%);border-right:1px solid #264c67}
.rail-nav a{transition:background .2s ease;position:relative}
.rail-nav a.active{background:#284e73;box-shadow:inset 3px 0 #7fc6a2}
.rail-nav a:hover{background:#234a6d}
.identity strong{letter-spacing:.035em}
.canvas{max-width:1800px;padding-block:32px 50px}
.topline{padding:23px 0 15px;border-bottom:1px solid #dce7e9;margin-bottom:18px}
.topline h1{font-size:clamp(29px,3vw,42px);letter-spacing:-.045em}
.topline p{font-size:14px}
.top-actions a{transition:box-shadow .15s ease,transform .15s ease}
.top-actions a:hover{box-shadow:0 5px 13px #102f5722;transform:translateY(-1px)}
.boundary{border-left:4px solid #1b97a6;background:#eaf3f3}
.panel,.metric,.property-stat{box-shadow:0 8px 25px #102f570a;border:1px solid var(--console-border);background:var(--console-card)}
.panel{border-radius:17px}
.kicker{color:#147985}
.metric{border-radius:16px;min-height:151px}
.metric span{font-size:12px;font-weight:750;color:#546d7c}
.metric strong{font-size:clamp(30px,3vw,39px)}
.metric:before{width:3px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:7px;margin-bottom:22px}
.live-tag,.status-pill{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.panel-heading h2,.section-heading h2{letter-spacing:-.03em}
.panel-heading h3{color:#102f57;margin:6px 0 12px;font-size:17px}
.dashboard-insights{margin:25px 0}
.insights-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:17px}
.insight-panel{min-width:0;min-height:298px}
.chart-bars{display:grid;gap:16px;margin-top:20px}
.chart-bar-row{display:grid;gap:6px}
.chart-bar-heading{display:flex;justify-content:space-between;gap:14px;font-size:12px;font-weight:700;color:#526d80}
.chart-bar-heading strong{color:#102f57}
.chart-bar-track{height:12px;border-radius:10px;background:#e9f0f2;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#0b527b,#20a4b0);min-width:0}
.insight-composition{display:flex;align-items:center;gap:22px;min-width:0;margin:16px 0}
.composition-ring{--share:0%;position:relative;width:160px;height:160px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(#168c95 0 var(--share),#e2ecee var(--share) 100%)}
.composition-ring:before{content:"";position:absolute;inset:23px;background:white;border-radius:50%}
.composition-ring span,.composition-ring small{z-index:1;position:relative}
.composition-ring span{font-size:32px;font-weight:900;color:#102f57;letter-spacing:-.04em}
.composition-ring small{font-size:11px;font-weight:750;color:#547382}
.composition-legend{min-width:0}
.composition-legend p{display:flex;align-items:center;gap:8px;margin:11px 0;color:#35556c;font-size:12px}
.composition-legend strong{min-width:19px}
.composition-legend a{font-size:12px;font-weight:800;color:#0b527b}
.legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none}
.legend-dot.active{background:#168c95}.legend-dot.pending{background:#e2ecee;border:1px solid #adc9cf}
.pipeline-fill{background:linear-gradient(90deg,#0b527b,#20a4b0)}
.control-row{min-width:0}
.control-row>*{min-width:0}
.control-status{flex:0 0 auto}
.foot{padding:16px 0;border-top:1px solid #dce7e9}
.property-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:24px 0}
.property-stat{border-radius:17px;padding:23px;min-width:0;position:relative;overflow:hidden}
.property-stat:before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,#0b527b,#20a4b0)}
.property-stat span,.property-stat small{display:block;color:#5a7180;font-size:12px;line-height:1.6}
.property-stat strong{display:block;color:#102f57;font-size:37px;margin:8px 0;font-weight:900}
.portfolio-toolbar{display:flex;flex-wrap:wrap;gap:15px;align-items:end;margin:20px 0;padding:15px;border:1px solid var(--console-border);border-radius:13px;background:#f5f9f9}
.portfolio-toolbar label{font-size:12px;color:#35576d;font-weight:800;display:grid;gap:7px;flex:1 1 210px;min-width:0}
.portfolio-toolbar input,.portfolio-toolbar select{display:block;width:100%;max-width:100%;min-width:0;padding:12px 13px;font:inherit;font-size:16px;color:#102f57;background:white;border:1px solid #c9dadf;border-radius:9px;box-sizing:border-box}
.portfolio-toolbar span{flex:1 1 155px;font-size:12px;color:#527182}
.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.property-card{display:grid;gap:0;grid-template-columns:minmax(0,1fr);background:#fff;padding:0;overflow:hidden;border:1px solid #dce7e9;box-shadow:0 7px 23px #102f570a;min-width:0}
.property-visual{height:120px;background:radial-gradient(circle at 73% 25%,#91d5d5 0 12%,transparent 13%),linear-gradient(145deg,#122f51,#0b527b 58%,#1a7e8e);position:relative;overflow:hidden}
.property-visual:after{content:"";position:absolute;width:140px;height:140px;border:1px solid #c1eddd55;border-radius:50%;right:22px;top:29px}
.property-visual-mark{position:absolute;left:25px;bottom:-15px;width:90px;height:68px;border:2px solid #c7e4e2;background:#cde8e222;transform:perspective(130px) rotateX(5deg);border-radius:12px 12px 0 0}
.property-visual-mark:before{content:"";position:absolute;left:-9px;top:-29px;width:101px;height:50px;border-top:3px solid #c7e4e2;transform:rotate(-30deg)}
.property-visual-mark:after{content:"";position:absolute;left:34px;bottom:0;width:22px;height:42px;border:2px solid #c7e4e2;border-bottom:0;border-radius:11px 11px 0 0}
.property-details{padding:19px 21px;min-width:0}
.property-details strong{font-size:18px;line-height:1.4}
.property-details p{color:#516a79;overflow-wrap:anywhere}
.property-status{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.property-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 21px 20px}
.property-actions a{display:inline-flex;align-items:center;border:1px solid #b9d3d6;border-radius:8px;padding:10px 11px;font-size:11px;font-weight:800;text-decoration:none;color:#0b527b;background:#eff6f7;min-width:0;overflow-wrap:anywhere}
.property-actions a:first-child{background:#0b527b;border-color:#0b527b;color:white}
.property-actions a:hover{border-color:#1b97a6}
.directory-viewbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #dce7e9;border-radius:15px;padding:15px 19px;margin-top:23px}
.directory-viewbar p{display:grid;gap:4px;margin:0;font-size:13px;color:#37556a}
.directory-viewbar p strong{font-size:16px;color:#102f57}
.view-switch{display:flex;flex-wrap:wrap;padding:4px;gap:4px;border-radius:10px;background:#eaf2f3}
.view-switch button{border:0;border-radius:8px;background:transparent;padding:10px 13px;color:#3c6170;font-size:12px;font-weight:800;cursor:pointer}
.view-switch button[aria-pressed="true"]{background:#0b527b;color:#fff;box-shadow:0 3px 9px #102f571a}
.search-layout{grid-template-columns:minmax(240px,.45fr) minmax(0,1fr);gap:17px;align-items:start}
.directory-main-stack{display:grid;gap:17px;min-width:0}
.directory-main-stack .directory-results{margin-top:0}
.directory-map-card{min-width:0}
.region-map{height:340px}
.search-filters{min-width:0}
.search-filters form{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.search-filters form label:first-child,.search-filters .filter-actions{grid-column:1/-1}
.result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.provider-card{border-color:#dae5e8;box-shadow:0 3px 12px #102f5708}
.provider-card h3{font-size:17px}
#directory-workspace[data-view="map"] .directory-results{display:none}
#directory-workspace[data-view="list"] .directory-map-card{display:none}
#directory-workspace[data-view="list"] .search-layout{grid-template-columns:minmax(240px,.35fr) minmax(0,1fr)}
#directory-workspace[data-view="list"] .result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#directory-workspace [hidden]{display:none!important}
:where(.canvas,.panel,.property-card,.property-details,.insight-panel,.directory-main-stack,.portfolio-toolbar,.search-layout,.property-overview,.insights-grid)>*{min-width:0}
:is(.panel,.metric,.property-card,.property-stat,.canvas) :is(h1,h2,h3,p,strong,span,a,label,button){overflow-wrap:anywhere}
:is(button,a,input,select):focus-visible{outline:3px solid #1b97a6;outline-offset:3px}
@media(max-width:1200px){.insights-grid{grid-template-columns:minmax(0,1fr)}.search-layout{grid-template-columns:minmax(260px,.7fr) minmax(0,1fr)}.search-filters form{grid-template-columns:1fr}.result-cards{grid-template-columns:1fr}}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.property-overview{grid-template-columns:repeat(3,minmax(0,1fr))}.portfolio-grid{grid-template-columns:1fr 1fr}.search-layout,#directory-workspace[data-view="list"] .search-layout{grid-template-columns:minmax(0,1fr)}.directory-main-stack{grid-template-columns:minmax(0,1fr)}.search-filters form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.rail{padding:16px}.rail-nav{overflow-x:auto}.canvas{padding:22px 14px 42px}.topline{padding-top:10px}.topline h1{font-size:31px}.top-actions{gap:8px}.kpis{gap:10px}.insight-composition{flex-wrap:wrap}.property-overview{gap:9px}.property-stat{padding:15px 12px}.property-stat strong{font-size:29px}.property-stat span{font-size:11px}.portfolio-grid{grid-template-columns:minmax(0,1fr)}.search-filters form{grid-template-columns:minmax(0,1fr)}.view-switch{width:100%;justify-content:space-between}.view-switch button{flex:1 1 auto}.directory-viewbar{padding:14px}.region-map{height:320px}.result-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:390px){.kpis{gap:8px}.metric{min-height:139px;padding:12px}.metric span{font-size:11px}.metric strong{font-size:29px}.metric small{font-size:10px}.property-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.property-stat:last-child{grid-column:1/-1}.property-stat strong{font-size:27px}.composition-ring{width:132px;height:132px}.composition-ring:before{inset:18px}.region-map{height:310px}.directory-viewbar{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.rail-nav a,.top-actions a{transition:none}}
