/* SwiftCharge Update 67 - operator portal shell and charger lifecycle */

body[data-page="portal"]{
  --op-red:#a20d18;
  --op-red-dark:#7f0912;
  --op-ink:#211c19;
  --op-muted:#726961;
  --op-line:#e6ddd2;
  --op-paper:#fff;
  --op-canvas:#f6f3ee;
  background:var(--op-canvas);
}

body[data-page="portal"] .portal-shell{
  align-items:start;
  min-height:calc(100vh - 78px);
  background:linear-gradient(135deg,#f8f5f0 0%,#f3eee7 100%);
}

/* The document owns desktop scrolling. The navigation no longer creates a
   second scrollbar inside the page. Accordion behaviour keeps it compact. */
body[data-page="portal"] .portal-nav{
  position:sticky;
  top:78px;
  align-self:start;
  min-height:calc(100vh - 78px);
  height:auto;
  max-height:none;
  overflow:visible;
  padding:18px 14px 20px;
  background:linear-gradient(180deg,#211d1a 0%,#2c2622 100%);
  box-shadow:8px 0 30px rgba(35,27,21,.08);
}

body[data-page="portal"] .portal-brand{
  margin-bottom:12px;
  padding:8px 10px 17px;
  border-color:rgba(255,255,255,.13);
}

body[data-page="portal"] .portal-brand img{max-width:170px}
body[data-page="portal"] .portal-brand span{color:#d0c5bc}

body[data-page="portal"] .portal-grouped-nav{gap:8px!important}
body[data-page="portal"] .portal-dashboard-link,
body[data-page="portal"] .portal-nav-group{
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}

body[data-page="portal"] .portal-dashboard-link{
  min-height:46px;
  padding:10px 12px!important;
  color:#f7f1eb;
}

body[data-page="portal"] .portal-nav-group summary{
  min-height:46px;
  padding:10px 12px;
  color:#f7f1eb;
}

body[data-page="portal"] .portal-nav-group[open]{
  background:rgba(255,255,255,.065);
  border-color:rgba(244,204,99,.3);
}

body[data-page="portal"] .portal-nav-group>div{padding:3px 7px 8px}
body[data-page="portal"] .portal-nav-group a{
  min-height:38px;
  color:#dcd2c9!important;
  border-left:0!important;
}

body[data-page="portal"] .portal-dashboard-link.active,
body[data-page="portal"] .portal-nav-group a.active{
  background:linear-gradient(135deg,var(--op-red),#c51e2a)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(162,13,24,.28)!important;
}

body[data-page="portal"] .portal-logout{
  width:100%;
  margin-top:14px;
  border-color:rgba(255,255,255,.18);
  color:#eee5de;
}

body[data-page="portal"] .portal-content{
  width:100%;
  max-width:1600px;
  min-width:0;
  overflow:visible;
  padding:26px clamp(20px,2.4vw,38px) 52px;
}

body[data-page="portal"] .portal-content>.card,
body[data-page="portal"] .portal-section-card{
  min-width:0;
  max-width:100%;
  overflow:visible;
  border:1px solid var(--op-line);
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 50px rgba(55,39,28,.07);
}

body[data-page="portal"] .page-title{
  align-items:flex-end;
  margin:20px 0 18px;
}

body[data-page="portal"] .page-title h1{
  margin-top:4px;
  font-size:clamp(1.9rem,3vw,2.7rem);
  letter-spacing:-.035em;
}

body[data-page="portal"] .live-badge{
  border:1px solid #bfe1cb;
  border-radius:999px;
  background:#eefaf2;
  color:#167143;
  padding:8px 12px;
  font-weight:800;
}

body[data-page="portal"] .operator-global-search{
  position:relative;
  z-index:120;
  max-width:820px;
}

body[data-page="portal"] .operator-search-box{
  border:1px solid var(--op-line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 28px rgba(48,35,25,.055);
}

body[data-page="portal"] .operator-search-box:focus-within{
  border-color:#c99316;
  box-shadow:0 0 0 3px rgba(201,147,22,.12),0 10px 28px rgba(48,35,25,.07);
}

body[data-page="portal"] .admin-toolbar.operator-page-toolbar{
  margin:-2px 0 18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--op-line);
}

body[data-page="portal"] .operator-page-toolbar h3{
  margin:3px 0 5px;
  font-size:1.55rem;
  letter-spacing:-.02em;
}

body[data-page="portal"] .operator-view-tabs{
  display:flex;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin:0 0 15px;
  padding:5px;
  border:1px solid var(--op-line);
  border-radius:13px;
  background:#f4f0ea;
}

body[data-page="portal"] .operator-view-tabs button{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#5e554f;
  padding:9px 13px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

body[data-page="portal"] .operator-view-tabs button span{
  min-width:23px;
  border-radius:999px;
  background:#e7dfd5;
  padding:2px 7px;
  font-size:.76rem;
  text-align:center;
}

body[data-page="portal"] .operator-view-tabs button.active{
  background:#fff;
  color:var(--op-red);
  box-shadow:0 4px 13px rgba(48,35,25,.08);
}

body[data-page="portal"] .operator-view-tabs button.active span{
  background:#fdecef;
  color:var(--op-red);
}

body[data-page="portal"] .operator-filter-bar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(180px,260px);
  gap:10px;
  margin-bottom:18px;
}

body[data-page="portal"] .operator-filter-bar input,
body[data-page="portal"] .operator-filter-bar select{
  min-height:46px;
  border-radius:12px;
  background:#fff;
}

body[data-page="portal"] .charger-management-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:17px;
}

body[data-page="portal"] .charger-management-card{
  border:1px solid var(--op-line);
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 30px rgba(51,37,27,.055);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

body[data-page="portal"] .charger-management-card:hover{
  transform:translateY(-2px);
  border-color:#d7c7b5;
  box-shadow:0 16px 38px rgba(51,37,27,.09);
}

body[data-page="portal"] .charger-archived-card{
  background:#faf8f5;
  border-style:dashed;
}

body[data-page="portal"] .charger-archived-card .charger-card-top,
body[data-page="portal"] .charger-archived-card .charger-card-stats{opacity:.82}

body[data-page="portal"] .charger-management-card .card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:14px;
  border-top:1px solid #eee7df;
}

body[data-page="portal"] button.danger,
body[data-page="portal"] .danger{
  border:1px solid #e1afb4;
  background:#fff3f4;
  color:#970b16;
}

body[data-page="portal"] button.danger:hover{background:#fde4e7}

body[data-page="portal"] .lifecycle-workspace{max-width:920px;margin:24px auto 0}
body[data-page="portal"] .danger-zone{
  margin:18px 0;
  border:1px solid #e4b6ba;
  border-radius:15px;
  background:#fff5f6;
  padding:18px;
  color:#611018;
}
body[data-page="portal"] .danger-zone h3{margin:0 0 7px}
body[data-page="portal"] .danger-zone p{margin:0 0 10px}
body[data-page="portal"] .danger-zone ul{margin:0;padding-left:20px}
body[data-page="portal"] .lifecycle-workspace form{display:grid;gap:14px}
body[data-page="portal"] .lifecycle-workspace label{display:grid;gap:7px;font-weight:750}

body[data-page="portal"] .table-wrap{
  border:1px solid var(--op-line);
  border-radius:14px;
  background:#fff;
  overflow:auto;
}
body[data-page="portal"] table thead th{background:#f4f0ea;color:#5f554e}
body[data-page="portal"] table tbody tr:hover{background:#fffaf2}

@media(max-width:900px){
  body[data-page="portal"] .portal-nav{
    position:fixed;
    top:0;
    left:0;
    min-height:100dvh;
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body[data-page="portal"] .portal-content{padding:16px 12px 38px}
  body[data-page="portal"] .portal-section-card{border-radius:15px}
  body[data-page="portal"] .operator-filter-bar{grid-template-columns:1fr}
  body[data-page="portal"] .operator-view-tabs{width:100%}
  body[data-page="portal"] .operator-view-tabs button{flex:1;justify-content:center}
  body[data-page="portal"] .charger-management-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  body[data-page="portal"] .admin-toolbar.operator-page-toolbar{align-items:stretch}
  body[data-page="portal"] .operator-page-toolbar .toolbar-actions{display:grid;grid-template-columns:1fr 1fr}
  body[data-page="portal"] .charger-management-card .card-actions>*{flex:1 1 calc(50% - 8px)}
}