/* ============================================================
   White Portal admin console theme — light rail per Admin.dc.html.
   Active only when the employee's chosen design is 'whiteportal'
   (html[data-design="whiteportal"], set by theme.js). Admin.html then
   boots the CLASSIC left-rail shell (Hub & Spoke is skipped for this
   design) and this additive layer restyles it to the prototype:
   #F5F7F7 canvas, white surfaces, #E4E9EA hairlines, teal headings,
   green icons/links, lime primary pills, 3px brand gradient top line.
   Removing this file or switching design restores everything.
   ============================================================ */
html[data-design="whiteportal"]{
  --bg:#F5F7F7;
  --surface:#FFFFFF;
  --ink:#02373D;
  --muted:rgba(2,55,61,.6);
  --line:#E4E9EA;
  --petrol:#003D44;
  --petrol-tint:rgba(0,61,68,.06);
  --radius:12px;
  --radius-sm:8px;
  --shadow:none;
}
html[data-design="whiteportal"] body:not(.hs){background:#F5F7F7; color:#02373D;}
/* 3px brand gradient line at the very top of the console. */
html[data-design="whiteportal"] body:not(.hs)::before{
  content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:linear-gradient(90deg, #C1FA00 0%, #48822A 55%, #003D44 100%);
}
html[dir="rtl"][data-design="whiteportal"] body:not(.hs)::before{
  background:linear-gradient(270deg, #C1FA00 0%, #48822A 55%, #003D44 100%);
}

/* ---- Top bar: white, hairline, teal brand, green portal link ---- */
html[data-design="whiteportal"] body:not(.hs) .topbar{background:#fff; color:#003D44; border-block-end:1px solid #E4E9EA; top:3px;}
html[data-design="whiteportal"] body:not(.hs) .topbar .brand{color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .topbar .brand small{color:#48822A; opacity:1; font-weight:700;}
html[data-design="whiteportal"] body:not(.hs) .topbar a.portal-link{color:#48822A;}
html[data-design="whiteportal"] body:not(.hs) .topbar a.portal-link:hover{color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .topbar .lang-toggle{background:#fff; border:1px solid #E4E9EA; color:#02373D; border-radius:999px;}
html[data-design="whiteportal"] body:not(.hs) .topbar .lang-toggle:hover{background:rgba(0,61,68,.06);}
html[data-design="whiteportal"] body:not(.hs) .user-chip .who b{color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .user-chip .who span{color:rgba(2,55,61,.55);}
html[data-design="whiteportal"] body:not(.hs) .user-chip .avatar{background:#003D44; color:#C1FA00;}
html[data-design="whiteportal"] body:not(.hs) .signout-btn{color:#48822A; border-color:#E4E9EA;}
html[data-design="whiteportal"] body:not(.hs) .signout-btn:hover{color:#003D44; background:rgba(0,61,68,.06);}

/* ---- Sidebar: white 232px rail, green icons, solid-teal active ---- */
html[data-design="whiteportal"] body:not(.hs) nav.side{
  width:232px; background:#fff; border-inline-end:1px solid #E4E9EA; padding:18px 12px 14px;
}
html[data-design="whiteportal"] body:not(.hs) nav.side button{
  border-radius:8px; font-size:.85rem; font-weight:500; color:#02373D;
  transition:background 120ms cubic-bezier(.2,.6,.2,1);
}
html[data-design="whiteportal"] body:not(.hs) nav.side button svg{color:#48822A;}
html[data-design="whiteportal"] body:not(.hs) nav.side button:hover{background:rgba(0,61,68,.06); color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) nav.side button.on{background:#003D44; color:#fff;}
html[data-design="whiteportal"] body:not(.hs) nav.side button.on svg{color:#C1FA00;}
html[data-design="whiteportal"] body:not(.hs) nav.side .nav-grp-head,
html[data-design="whiteportal"] body:not(.hs) nav.side .nav-group{
  color:rgba(2,55,61,.45); opacity:1; border-block-start:1px solid #EEF1F2; letter-spacing:.08em;
}
html[data-design="whiteportal"] body:not(.hs) nav.side .nav-badge,
html[data-design="whiteportal"] body:not(.hs) nav.side .count-badge{
  background:#C1FA00; color:#003D44; border-radius:999px; font-weight:700;
}
html[data-design="whiteportal"] body:not(.hs) nav.side button.on .nav-badge,
html[data-design="whiteportal"] body:not(.hs) nav.side button.on .count-badge{display:none;}

/* ---- Cards / tables ---- */
html[data-design="whiteportal"] body:not(.hs) .card{border-color:#E4E9EA; border-radius:12px; box-shadow:none;}
html[data-design="whiteportal"] body:not(.hs) .screen-head h2{color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) table.grid th{
  color:rgba(2,55,61,.5); letter-spacing:.04em; text-transform:uppercase; font-size:.72rem;
  border-block-end:1px solid #E4E9EA;
}
html[dir="rtl"][data-design="whiteportal"] body:not(.hs) table.grid th{letter-spacing:0;}
html[data-design="whiteportal"] body:not(.hs) table.grid td{border-block-end:1px solid #EEF1F2;}

/* ---- Buttons: lime primary pill (hover -> green + white), ghost pill ---- */
html[data-design="whiteportal"] body:not(.hs) .btn{
  border-radius:999px; border-color:#E4E9EA; color:#003D44; font-weight:500;
  transition:background 120ms cubic-bezier(.2,.6,.2,1);
}
html[data-design="whiteportal"] body:not(.hs) .btn:hover{background:rgba(0,61,68,.06); border-color:#E4E9EA; color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .btn.primary,
html[data-design="whiteportal"] body:not(.hs) .btn.lime{background:#C1FA00; border-color:#C1FA00; color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .btn.primary:hover,
html[data-design="whiteportal"] body:not(.hs) .btn.lime:hover{background:#48822A; border-color:#48822A; color:#fff;}
html[data-design="whiteportal"] body:not(.hs) .btn.danger{border-color:rgba(210,38,48,.35); color:#D22630; border-radius:999px;}
html[data-design="whiteportal"] body:not(.hs) .btn.danger:hover{background:rgba(210,38,48,.08); border-color:#D22630;}
html[data-design="whiteportal"] body:not(.hs) .login-btn{background:#C1FA00; color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .login-btn:hover{background:#48822A; color:#fff;}

/* ---- Status pills per the prototype ---- */
html[data-design="whiteportal"] body:not(.hs) .pill{border-radius:999px; font-weight:500; font-size:.72rem; padding:3px 11px;}
html[data-design="whiteportal"] body:not(.hs) .pill.published,
html[data-design="whiteportal"] body:not(.hs) .pill.active,
html[data-design="whiteportal"] body:not(.hs) .pill.sent{background:#C1FA00; color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .pill.pending,
html[data-design="whiteportal"] body:not(.hs) .pill.queued{background:rgba(0,61,68,.07); color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .pill.draft,
html[data-design="whiteportal"] body:not(.hs) .pill.inactive{background:transparent; color:rgba(2,55,61,.6); border:1px solid #E4E9EA;}
html[data-design="whiteportal"] body:not(.hs) .pill.featured{background:#003D44; color:#C1FA00;}

/* ---- Inputs, focus, misc ---- */
html[data-design="whiteportal"] body:not(.hs) input,
html[data-design="whiteportal"] body:not(.hs) select,
html[data-design="whiteportal"] body:not(.hs) textarea{border-color:#E4E9EA; background:#F5F7F7; color:#02373D;}
html[data-design="whiteportal"] body:not(.hs) input:focus,
html[data-design="whiteportal"] body:not(.hs) select:focus,
html[data-design="whiteportal"] body:not(.hs) textarea:focus{border-color:#48822A; background:#fff;}
html[data-design="whiteportal"] body:not(.hs) :focus-visible{outline:4px solid rgba(193,250,0,.55); outline-offset:2px;}
html[data-design="whiteportal"] body:not(.hs) a{color:#48822A;}
html[data-design="whiteportal"] body:not(.hs) a:hover{color:#003D44;}
html[data-design="whiteportal"] body:not(.hs) .screen-head .strata-sm{
  background:linear-gradient(90deg, #C1FA00 0%, #48822A 55%, #003D44 100%) !important;
}
@media (max-width:960px){
  html[data-design="whiteportal"] body:not(.hs) nav.side{width:100%; border-inline-end:0; border-block-end:1px solid #E4E9EA;}
}

/* ---- OneGIG platform lockup in the white top bar ---- */
html[data-design="whiteportal"] body:not(.hs) .topbar .brand{
  display:flex; flex-direction:column; gap:3px; line-height:1; font-size:1.16rem; font-weight:800; color:#003D44;
}
html[data-design="whiteportal"] body:not(.hs) .topbar .brand::first-line{letter-spacing:-.01em;}
html[data-design="whiteportal"] body:not(.hs) .topbar .brand small{
  margin-inline-start:0; font-size:.62rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:#48822A; opacity:1;
}