/* BumiNet customer portal. One shell and dashboard, using shared foundation tokens. */
.fi-panel-customer{
 --portal-bg:#f5f7fb;--portal-card:#fff;--portal-text:#17253a;--portal-muted:#607087;--portal-line:#dce4ef;--portal-accent:#245bda;--portal-soft:#edf3ff;
 --bn-foundation-bg:var(--portal-bg);--bn-foundation-card:var(--portal-card);--bn-foundation-text:var(--portal-text);--bn-foundation-muted:var(--portal-muted);--bn-foundation-line:var(--portal-line);--bn-foundation-blue:var(--portal-accent);--bn-foundation-radius:16px;--bn-foundation-shadow:none;
 --bn-blue:var(--portal-accent);--bn-indigo:#4f46e5;--bn-border:var(--portal-line);--bn-surface:var(--portal-card);
 --v3-ink:var(--portal-text);--v3-muted:var(--portal-muted);--v3-line:var(--portal-line);--v3-surface:var(--portal-card);
 color:var(--portal-text);background:var(--portal-bg);
}
.dark .fi-panel-customer{--portal-bg:#0c1422;--portal-card:#142034;--portal-text:#edf2f9;--portal-muted:#b0bfd2;--portal-line:#304059;--portal-accent:#99bbff;--portal-soft:#213858}
.fi-panel-customer .fi-main{max-width:1280px;min-width:0;padding-bottom:2rem}
.fi-panel-customer :is(.fi-page,.fi-page-content,.fi-page-header-main-ctn){min-width:0;max-width:100%}
.fi-panel-customer :is(.fi-topbar,.fi-sidebar-header){background:var(--portal-card);border-bottom:1px solid var(--portal-line)}
.fi-panel-customer .fi-sidebar{background:var(--portal-card);border-inline-end:1px solid var(--portal-line);box-shadow:none}
.fi-panel-customer .fi-sidebar-nav{padding:1rem .75rem 2rem;overflow-y:auto;overscroll-behavior:contain}
.fi-panel-customer .fi-sidebar-item-btn{min-height:46px;padding:.7rem .8rem;border-radius:10px;gap:.75rem;color:var(--portal-text)}
.fi-panel-customer .fi-sidebar-item-label{color:inherit;font-size:.9rem;line-height:1.4;white-space:normal}
.fi-panel-customer .fi-sidebar-item-icon{color:var(--portal-muted);width:20px;height:20px;flex-shrink:0}
.fi-panel-customer .fi-sidebar-item-btn:hover{background:var(--portal-soft)}
.fi-panel-customer .fi-sidebar-item.fi-active>.fi-sidebar-item-btn{background:var(--portal-soft);color:var(--portal-accent);box-shadow:inset 3px 0 var(--portal-accent)}
.fi-panel-customer .fi-sidebar-item.fi-active .fi-sidebar-item-icon{color:var(--portal-accent)}
.fi-panel-customer .fi-sidebar-group-label{color:var(--portal-muted);font-size:.75rem;letter-spacing:.02em}
.fi-panel-customer .fi-sidebar-group-btn{padding:.7rem .8rem}
.fi-panel-customer .fi-header-heading{font-size:1.5rem;line-height:1.3}
.fi-panel-customer .fi-header-subheading{color:var(--portal-muted);font-size:.9rem;line-height:1.6}
.fi-panel-customer :is(.fi-section,.fi-ta){box-shadow:none;border-radius:16px}
.fi-panel-customer a:focus-visible,.fi-panel-customer button:focus-visible{outline:3px solid var(--portal-accent);outline-offset:3px}
.bn-customer-dashboard-v3{display:grid;gap:1.25rem;width:100%;min-width:0;margin:auto}
.fi-page:has(.bn-customer-dashboard-v3)>.fi-page-header,.fi-page:has(.bn-customer-dashboard-v3) .fi-header{display:none}
.bn-customer-dashboard-v3 :is(div,section,article,header,nav,dl,dd){min-width:0}
.bn-customer-dashboard-v3 :is(h1,h2,p,strong,dd,code){overflow-wrap:anywhere}
.bn-v3-hero,.bn-v3-card,.bn-v3-profile,.bn-v3-preview{background:var(--portal-card);border:1px solid var(--portal-line);border-radius:16px}
.bn-v3-hero{padding:1.5rem}
.bn-v3-hero-copy{display:grid;gap:.65rem}
.bn-v3-kicker,.bn-v3-card>header span{font-size:.7rem;letter-spacing:.08em;font-weight:700;color:var(--portal-accent)}
.bn-v3-hero h1{font-size:1.65rem;font-weight:750;line-height:1.25;margin:0;color:var(--portal-text)}
.bn-v3-hero p{font-size:.9rem;line-height:1.6;color:var(--portal-muted);margin:0}
.bn-v3-identity{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.8rem}
.bn-v3-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}
.bn-v3-card{overflow:hidden}
.bn-v3-card>header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.25rem;border-bottom:1px solid var(--portal-line)}
.bn-v3-card>header>div{display:grid;gap:.3rem}
.bn-v3-card>header h2{font-size:1.05rem;font-weight:700;line-height:1.4;margin:0}
.bn-v3-card>header>.fi-icon{width:22px;height:22px;color:var(--portal-muted);flex-shrink:0}
.bn-v3-service{display:grid;gap:1rem;padding:1.25rem}
.bn-v3-service+.bn-v3-service{border-top:1px solid var(--portal-line)}
.bn-v3-service-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.bn-v3-service-head>div{display:grid;gap:.3rem}
.bn-v3-service-head small{font-size:.8rem;color:var(--portal-muted)}
.bn-v3-service-head strong{font-size:1rem;line-height:1.5}
.bn-v3-service dl{display:grid;gap:.85rem;margin:0}
.bn-v3-service dt{font-size:.8rem;color:var(--portal-muted)}
.bn-v3-service dd{font-size:.9rem;margin:.2rem 0 0;line-height:1.5}
.bn-v3-billing{display:grid;align-content:start}
.bn-v3-bill-total{display:grid;justify-items:start;padding:1.25rem;gap:.5rem}
.bn-v3-bill-total>span{font-size:.85rem;color:var(--portal-muted)}
.bn-v3-bill-total>strong{font-size:1.8rem;line-height:1.2}
.bn-v3-bill-meta{display:grid;padding:0 1.25rem 1.25rem;gap:.4rem;font-size:.8rem;color:var(--portal-muted)}
.bn-v3-billing>.fi-btn{min-height:44px;margin:0 1.25rem 1.25rem}
.bn-v3-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.bn-v3-actions a{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:.7rem;background:var(--portal-card);border:1px solid var(--portal-line);border-radius:12px;padding:1rem;min-height:76px;text-decoration:none;color:var(--portal-text)}
.bn-v3-actions a:hover{border-color:var(--portal-accent)}
.bn-v3-actions a>span{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--portal-soft);color:var(--portal-accent)}
.bn-v3-actions a>span .fi-icon{width:20px;height:20px}
.bn-v3-actions a>.fi-icon{display:none}
.bn-v3-actions a>div{display:grid;gap:.25rem}
.bn-v3-actions strong{font-size:.85rem}
.bn-v3-actions small{font-size:.75rem;line-height:1.5;color:var(--portal-muted)}
.bn-hotspot-body{padding:1.25rem}
.bn-hotspot-body p{font-size:.9rem;line-height:1.6;color:var(--portal-muted);margin:0}
.bn-hotspot-credentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0}
.bn-hotspot-credentials>div{padding:1rem;border:1px solid var(--portal-line);border-radius:10px}
.bn-hotspot-credentials dt{color:var(--portal-muted);font-size:.8rem;margin-bottom:.5rem}
.bn-hotspot-credentials dd{margin:0;font-size:1.05rem;user-select:all}
.bn-hotspot-credentials code{font-family:ui-monospace,monospace;white-space:normal}
.bn-v3-profile summary{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;align-items:center;gap:.75rem;padding:1.15rem;cursor:pointer;list-style:none}
.bn-v3-profile summary .fi-icon{width:20px;height:20px;color:var(--portal-accent)}
.bn-v3-profile summary>div{display:grid;gap:.2rem}
.bn-v3-profile summary strong{font-size:.9rem}
.bn-v3-profile summary small{font-size:.8rem;color:var(--portal-muted)}
.bn-v3-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1.25rem;border-top:1px solid var(--portal-line)}
.bn-v3-profile-grid>div{display:grid;gap:.3rem}
.bn-v3-profile-grid span{font-size:.8rem;color:var(--portal-muted)}
.bn-v3-profile-grid strong{font-size:.9rem}
.bn-v3-alerts,.bn-v3-onboarding{display:grid;gap:1rem}
.bn-v3-alerts article,.bn-v3-empty-state{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1.25rem;background:var(--portal-soft);border:1px solid var(--portal-line);border-radius:16px}
.bn-v3-alerts article>div,.bn-v3-empty-state>div{flex:1;min-width:180px}
.bn-v3-alerts .fi-icon,.bn-v3-empty-state .fi-icon{width:24px;height:24px}
.bn-v3-alerts p,.bn-v3-empty-state p{font-size:.9rem;color:var(--portal-muted);line-height:1.6}
.bn-v3-empty-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.bn-v3-card-empty{display:grid;justify-items:center;gap:.5rem;padding:1.5rem;text-align:center}
.bn-v3-card-empty .fi-icon{width:28px;height:28px;color:var(--portal-muted)}
.bn-v3-card-empty p{font-size:.85rem;color:var(--portal-muted);line-height:1.6}
.bn-v3-preview{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem}
.bn-v3-preview>div{display:flex;align-items:center;gap:.5rem}
.bn-v3-preview .fi-icon{width:20px;height:20px}
.bn-v3-preview form{max-width:100%}
@media(max-width:1100px){.bn-v3-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){.fi-panel-customer .fi-sidebar{width:min(19rem,calc(100vw - 3rem));height:100dvh;border-radius:0 16px 16px 0}.fi-panel-customer .fi-sidebar-nav{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));min-height:0}}
@media(max-width:700px){
 .bn-customer-dashboard-v3{gap:1rem}.bn-v3-primary,.bn-hotspot-credentials,.bn-v3-profile-grid{grid-template-columns:minmax(0,1fr)}
 .bn-v3-billing{grid-row:1}.bn-v3-hero{padding:1.15rem}.bn-v3-hero h1{font-size:1.35rem}
 .bn-v3-actions a{grid-template-columns:minmax(0,1fr);align-content:start}.bn-v3-actions a>span{display:none}
 .fi-panel-customer .fi-header{flex-wrap:wrap;gap:1rem}.fi-panel-customer .fi-header-actions-ctn{max-width:100%;flex-wrap:wrap}
}