/*
 * Dev Portal theme. Loaded AFTER a page's own <style>, so it re-colours the page through the CSS variables the pages already use
 * and lays the portal out like Creative Tim's Argon Dashboard (MIT): white vertical sidenav, gradient header band, soft-shadow cards,
 * Open Sans. Only the design (tokens, spacing, layout) is reproduced as CSS; no Argon code, images or icons are copied.
 * Icons: Bootstrap Icons (MIT), loaded by the page. Light only: portal-shell.js forces data-theme="light", there is no dark mode.
 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

/* Argon tokens: primary #5e72e4, success #2dce89, info #11cdef, warning #fb6340, danger #f5365c, text #525f7f, headings #32325d. */
:root, :root[data-theme]{
  --bg-void:#f8f9fe; --bg-panel:#ffffff; --bg-raised:#f6f9fc; --bg-hover:#f6f9fc; --border:#e9ecef;
  --text:#525f7f; --text-dim:#667488; --heading:#32325d;
  --accent:#5e72e4; --accent-dim:#324cdd; --accent-2:#5e72e4; --on-accent:#ffffff;
  --success:#0b7a50; --success-bright:#2dce89; --danger:#d7183f; --warn:#c9400f; --info:#0a7388;
  --fb:#1877f2; --ig:#e1306c; --th:#32325d; --x:#32325d;
  --radius:.375rem;
  --shadow:0 0 2rem 0 rgba(136,152,170,.15);
  --shadow-lg:0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  --btn-shadow:0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
  --grad:linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  --sidebar-w:250px;
  --sans:"Open Sans", sans-serif;
  --mono:"Open Sans", sans-serif;
  color-scheme:light;
}
:root{
  --ground:var(--bg-void); --panel:var(--bg-panel); --panel-raised:var(--bg-raised); --line:var(--border); --text-faint:#8898aa;
  --accent-ink:var(--on-accent); --amber:var(--warn); --amber-dim:#fff1ed; --focus:var(--accent); --scan:transparent;
}
html{ color-scheme:light; }
/* Every page used to carry its own sign-in overlay; there is one sign-in page now (login/), so these stay hidden. */
#auth-container{ display:none !important; }
body{ background:var(--bg-void); background-image:none; color:var(--text); font-family:var(--sans); font-size:1rem; font-weight:400; line-height:1.5; }
body, button, input, select, textarea, table, .pixel, .eyebrow, code, .mono{ font-family:var(--sans); }
code, pre, .mono{ font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
a{ color:var(--accent); }
a:hover{ color:var(--accent-dim); }
h1, h2, h3, h4, h5, h6{ font-family:var(--sans); color:var(--heading); font-weight:600; letter-spacing:0; text-transform:none; line-height:1.5; }
::selection{ background:var(--accent); color:#fff; }

/* ---- layout: sidenav + header band + content ---- */
.sidenav{ position:fixed; top:0; bottom:0; left:0; width:var(--sidebar-w); z-index:50; display:flex; flex-direction:column; overflow-y:auto; background:#fff; box-shadow:var(--shadow); border-right:1px solid var(--border); }
.sidenav-brand{ display:block; padding:1.25rem 1.5rem 1rem; text-align:center; }
.sidenav-brand img{ display:block; height:3.25rem; width:auto; margin:0 auto; }
.sidenav-links{ padding:0 1rem 1.5rem; }
.nav-heading{ display:flex; align-items:center; gap:.5rem; margin:1.25rem 0 .25rem; padding:0 .5rem; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
.nav-group[hidden], .nav-link[hidden]{ display:none; }
.nav-link{ display:flex; align-items:center; gap:.25rem; padding:.675rem 1rem; border-radius:.25rem; color:var(--text); text-decoration:none; font-size:.9rem; font-weight:600; position:relative; }
.nav-link i.bi{ width:2.25rem; font-size:1.05rem; color:var(--accent); flex:none; }
.nav-link:hover{ color:var(--accent); background:var(--bg-raised); }
.nav-link.active{ color:var(--accent); background:var(--bg-raised); }
.nav-link.active::after{ content:""; position:absolute; right:-1rem; top:0; bottom:0; width:2px; background:var(--accent); border-radius:2px; }
.nav-sections{ margin:.15rem 0 .5rem 1.5rem; padding-left:.75rem; border-left:1px solid var(--border); display:flex; flex-direction:column; }
.nav-sec{ display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border:none; background:none; border-radius:.25rem; cursor:pointer; font:inherit; font-size:.82rem; color:var(--text-dim); text-align:left; }
.nav-sec i.bi{ width:1.25rem; font-size:.9rem; flex:none; }
.nav-sec:hover{ color:var(--accent); }
.nav-sec.on{ color:var(--accent); font-weight:700; }
.nav-sec-group{ margin:.5rem 0 .1rem .5rem; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
.pshell-badge{ margin-left:auto; min-width:1.2rem; padding:0 .4rem; border-radius:.375rem; background:var(--danger); color:#fff; font-size:.7rem; font-weight:700; line-height:1.2rem; text-align:center; }
.pshell-badge[hidden]{ display:none; }

.pshell-band{ position:absolute; top:0; left:var(--sidebar-w); right:0; height:320px; background:var(--grad); z-index:0; }
.pshell-conf{ position:fixed; top:0; left:var(--sidebar-w); right:0; z-index:40; height:1.5rem; display:flex; align-items:center; justify-content:center; padding:0 .75rem; background:#fff; border-bottom:1px solid var(--border);
  font-size:.7rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; }
.pshell-conf b{ margin-right:.4rem; color:var(--danger); letter-spacing:.06em; }
.pshell-conf-auth{ margin:1.25rem 0 0; text-align:center; font-size:.72rem; color:var(--danger); }
.pshell-topbar{ position:absolute; top:1.5rem; left:var(--sidebar-w); right:0; height:3.5rem; z-index:2; display:flex; align-items:center; gap:.75rem; padding:0 1.5rem; color:#fff; }
.pshell-crumb{ margin-right:auto; font-size:.875rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:.5rem; }
.pshell-crumb b{ color:#fff; font-weight:700; }
.pshell-crumb i{ font-size:.7rem; }
.pshell-burger{ display:none; border:none; background:rgba(255,255,255,.15); color:#fff; width:2.25rem; height:2.25rem; border-radius:.375rem; font-size:1.4rem; cursor:pointer; align-items:center; justify-content:center; }
.pshell-signout, .pshell-viewas{ height:2.25rem; border:none; border-radius:.375rem; background:rgba(255,255,255,.15); color:#fff; font:inherit; font-size:.8125rem; font-weight:600; padding:0 .9rem; cursor:pointer; display:flex; align-items:center; gap:.4rem; }
.pshell-viewas{ max-width:12rem; }
.pshell-user{ font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.92); padding:0 .25rem; white-space:nowrap; max-width:11rem; overflow:hidden; text-overflow:ellipsis; }
.pshell-user[hidden]{ display:none; }
@media (max-width:991px){ .pshell-user{ display:none; } }
.pshell-viewas[hidden]{ display:none; }
.pshell-viewas option, .pshell-viewas optgroup{ color:var(--heading); background:#fff; }
.pshell-signout:hover, .pshell-viewas:hover{ background:rgba(255,255,255,.28); }
.pshell-preview{ display:flex; align-items:center; gap:.5rem; padding:0 .4rem 0 .8rem; height:2.25rem; border-radius:.375rem; background:#fff; color:var(--heading); font-size:.8125rem; box-shadow:var(--btn-shadow); white-space:nowrap; }
.pshell-preview i{ color:var(--warn); }
.pshell-preview button{ border:none; background:var(--bg-raised); color:var(--heading); border-radius:.25rem; padding:.25rem .6rem; font:inherit; font-size:.75rem; font-weight:700; cursor:pointer; }
.pshell-preview button:hover{ color:var(--accent); }

body.has-shell{ padding:5.5rem 1.5rem 3rem calc(var(--sidebar-w) + 1.5rem); position:relative; min-height:100vh; }
body.has-shell > .app, body.has-shell > .wrap, body.has-shell > main{ position:relative; z-index:1; }
body.has-shell #theme-btn, body.has-shell #logout-btn{ display:none; }
body.no-side{ padding-left:calc(var(--sidebar-w) + 1.5rem); }
.app{ max-width:1180px; margin:0 auto; }

/* page title sits on the gradient band */
header.top{ background:transparent; border:none; color:#fff; padding:0 0 1.25rem; margin:0; }
header.top h1, header.top h2{ color:#fff; font-size:1.5rem; font-weight:600; margin:.1rem 0 .25rem; }
header.top .eyebrow{ color:rgba(255,255,255,.8); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0; }
header.top p, header.top .sub, header.top .lede{ color:rgba(255,255,255,.85); }
header.top a, header.top .ghost-link{ color:#fff; }
.ghost-link{ background:rgba(255,255,255,.15); color:#fff; border:none; box-shadow:none; border-radius:.375rem; padding:.45rem .9rem; font-size:.8125rem; font-weight:600; text-decoration:none; }
.ghost-link:hover{ background:rgba(255,255,255,.28); color:#fff; }

/* the Social Media tool's own nav: a row of pills inside the page */
nav.nav{ position:static; display:flex; flex-wrap:wrap; gap:.25rem; margin:0 0 1rem; padding:.5rem; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); }
nav.nav button{ background:transparent; border:none; border-radius:.25rem; padding:.5rem .9rem; color:var(--text); font:inherit; font-size:.875rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:.4rem; }
nav.nav button i.bi{ color:var(--accent); }
nav.nav button:hover{ background:var(--bg-raised); }
nav.nav button.on{ background:var(--accent); color:#fff; box-shadow:var(--btn-shadow); }
nav.nav button.on i.bi{ color:#fff; }
.nav-brand{ display:none; }
body.shell-tabs .tabs{ display:none; } /* the sidenav lists a tabbed tool's tabs instead */

/* ---- cards ---- */
.card, .tool-card, .platform-specs, .req, .panel, .pill-status, .auth-form{ background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow); }
.card{ padding:1.5rem; margin-bottom:1.5rem; }
.card h2, .card h3{ color:var(--heading); }
.actionbar{ background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.tool-card{ transition:box-shadow .15s ease, transform .15s ease; }
.tool-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.tool-card .tool-icon{ background:var(--bg-raised); border:none; border-radius:.375rem; color:var(--accent); }
.tool-section h3{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid var(--border); }
.tool-card .tool-cta{ font-weight:600; color:var(--accent); }
.platform-specs{ padding:1rem 1.25rem; margin:1rem 0 1.25rem; border-left:4px solid var(--accent); font-size:.8125rem; line-height:1.5; color:var(--text); }
.platform-specs summary{ cursor:pointer; font-weight:700; font-size:.875rem; color:var(--heading); }
.platform-specs summary i{ color:var(--accent); margin-right:.4rem; }
.platform-specs .ps-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:.75rem; }
@media (max-width:720px){ .platform-specs .ps-cols{ grid-template-columns:1fr; } }
.platform-specs h4{ margin:0 0 .4rem; font-size:.8125rem; color:var(--accent); }
.platform-specs ul{ margin:0; padding-left:1.1rem; }
.platform-specs li{ margin:0 0 .4rem; color:var(--text-dim); }
.platform-specs li b{ color:var(--heading); }
.platform-specs .ps-both{ margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border); }
.step i{ background:var(--accent); color:#fff; }

/* ---- buttons ---- */
.btn, .auth-submit{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.625rem 1.25rem; border:1px solid var(--accent); border-radius:.375rem; background:var(--accent); color:#fff; font-size:.875rem; font-weight:600; letter-spacing:.025em; line-height:1.5; text-transform:none; box-shadow:var(--btn-shadow); cursor:pointer; transition:all .15s ease; }
.btn:hover, .auth-submit:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn.small{ padding:.25rem .5rem; font-size:.75rem; }
.btn.soft{ background:#fff; border-color:var(--border); color:var(--heading); }
.btn.soft:hover{ border-color:var(--accent); color:var(--accent); background:#fff; }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.good{ background:var(--success); border-color:var(--success); color:#fff; }
.btn:disabled, .auth-submit:disabled{ opacity:.65; transform:none; box-shadow:none; cursor:not-allowed; }
.theme-btn, #logout-btn{ border-radius:.375rem; }

/* ---- forms ---- */
label, .lbl{ color:var(--heading); font-size:.875rem; font-weight:600; }
textarea, input[type=url], input[type=text], input[type=datetime-local], input[type=date], input[type=time], input[type=email], input[type=password], input[type=number], input[type=search], select{
  padding:.625rem .75rem; background:#fff; border:1px solid #cad1d7; border-radius:.375rem; color:var(--text); font-size:.875rem; line-height:1.5; box-shadow:0 3px 2px rgba(233,236,239,.05); transition:box-shadow .15s ease; }
textarea:focus, input:focus, select:focus{ outline:0; border-color:var(--accent); box-shadow:0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); }
input::placeholder, textarea::placeholder{ color:#adb5bd; }
.opt input, input[type=checkbox], input[type=radio]{ accent-color:var(--accent); }
.auth-form-group input{ background:#fff; border:1px solid #cad1d7; border-radius:.375rem; }
.auth-form{ padding:2rem; }
.auth-form h2{ color:var(--heading); }
.auth-error, .banner{ border-radius:.375rem; }
.banner.warn{ background:#fff1ed; border:1px solid #fcd3c8; color:#b73a1a; }
.chip, .subtabs button, .ptabs button, .tile, .when, .edit-tile{ background:#fff; border:1px solid var(--border); border-radius:.375rem; color:var(--text); }
.chip:hover, .tile:hover{ border-color:var(--accent); color:var(--accent); }
.chip.on, .subtabs button.on, .ptabs button.on, .edit-tile.on, .when.on{ background:#eef0fd; border-color:var(--accent); color:var(--accent); }
.drop:hover, .drop.over{ border-color:var(--accent); background:#f4f5fd; }
.bub.out{ background:#eef0fd; border-color:var(--accent); }
.cal-col, .cal-cell{ background:#fff; box-shadow:var(--shadow); border-color:transparent; }
.cal-col.today, .cal-cell.today{ border-color:var(--accent); }
.mock{ box-shadow:var(--shadow-lg); }

/* ---- tables (Argon: light grey header row, uppercase small labels) ---- */
table{ color:var(--text); }
th{ background:var(--bg-raised); color:var(--text-dim); font-size:.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--border); }
td{ font-size:.8125rem; border-top:1px solid var(--border); }

/* ---- badges / pills (Argon: soft tinted, squared) ---- */
.pill, .badge{ display:inline-block; padding:.25rem .5rem; border-radius:.375rem; background:var(--bg-raised); border:1px solid transparent; color:var(--text); font-size:.72rem; font-weight:600; line-height:1.2; }
.pill.approved, .pill.notes, .pill.good{ background:#d7f5e6; color:#0b6a46; border-color:transparent; }
.pill.denied, .pill.bad{ background:#fde1e8; color:#b3112f; border-color:transparent; }
.pill.changes{ background:#ffe9e1; color:#a93a0c; border-color:transparent; }
.pill.open{ background:#dcf6fc; color:#08657a; border-color:transparent; }
.pill.closed{ background:#f1f3f5; color:var(--text-dim); border-color:transparent; }
.badge-n{ background:var(--danger); color:#fff; }

/* tabs inside pages (Argon nav-pills look) */
.tabs{ display:flex; flex-wrap:wrap; gap:.25rem; margin:0 0 1rem; padding:.5rem; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); }
.tab, .tab-btn{ padding:.5rem 1rem; border:none; border-radius:.25rem; background:transparent; color:var(--text); font:inherit; font-size:.875rem; font-weight:600; cursor:pointer; }
.tab:hover, .tab-btn:hover{ background:var(--bg-raised); color:var(--accent); }
.tab.active, .tab-btn.active{ background:var(--accent); color:#fff; box-shadow:var(--btn-shadow); }

/* ---- phones and small tablets: sidenav slides in ---- */
@media (max-width:991px){
  .sidenav{ transform:translateX(-100%); transition:transform .2s ease; }
  body.nav-open .sidenav{ transform:none; box-shadow:0 0 3rem rgba(0,0,0,.25); }
  .pshell-band, .pshell-conf, .pshell-topbar{ left:0; }
  .pshell-burger{ display:flex; }
  .pshell-crumb{ display:none; }
  .pshell-topbar{ padding:0 1rem; justify-content:flex-end; }
  .pshell-burger{ margin-right:auto; }
  body.has-shell, body.no-side{ padding-left:1rem; padding-right:1rem; }
  .pshell-signout span{ display:none; }
}

/* ---- portal home: Argon "stat cards over the header band" ---- */
.dash-hello h1{ color:#fff; font-size:1.5rem; margin:.1rem 0 .25rem; }
.dash-hello .eyebrow{ color:rgba(255,255,255,.8); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0; }
.dash-hello .sub, .dash-hello p{ color:rgba(255,255,255,.85); }
.dpill{ background:rgba(255,255,255,.18); border:none; color:#fff; border-radius:.375rem; padding:.3rem .6rem; font-size:.72rem; font-weight:700; }
.dpill.ok, .dpill.warn, .dpill.bad{ color:#fff; border:none; }
.stats{ gap:1.5rem; }
.stat{ display:flex; flex-direction:column-reverse; gap:.25rem; background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem 1.5rem; }
.stat span{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
.stat b{ font-size:1.5rem; font-weight:700; color:var(--heading); letter-spacing:0; }
.stat.hot b{ color:var(--accent); }
.dash h3{ font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--heading); border-bottom:none; margin:2.25rem 0 .75rem; padding:0; }
.attn, .gcard{ background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow); }
.attn{ border-left:4px solid var(--accent); }
.attn:hover, .gcard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.attn .t, .gcard .gn{ color:var(--heading); }
.attn .go, .gcard .gcta{ font-family:var(--sans); font-size:.75rem; font-weight:700; color:var(--accent); }
.attn.info{ border-left-color:var(--border); }
.caught-up{ background:#e3f8ee; border:none; color:#12805a; border-radius:var(--radius); }
.all-tools summary{ color:var(--heading); font-weight:600; cursor:pointer; }

/* ---- sign-in screen: Argon auth page (gradient band, white card overlapping it) ---- */
#auth-container{ background:var(--grad) no-repeat top / 100% 320px, var(--bg-void); }
.auth-form{ box-shadow:var(--shadow-lg); }
.auth-logo{ display:block; height:3.5rem; width:auto; margin:0 auto 1.25rem; }
.auth-sub{ color:var(--text-dim); }
.auth-toggle button, #auth-forgot-password{ color:var(--accent); background:none; border:none; font:inherit; font-size:.8125rem; font-weight:600; cursor:pointer; text-decoration:none; }
body:not(.has-shell){ background:var(--grad) no-repeat top / 100% 320px, var(--bg-void); } /* update-password.html has no shell: same gradient band as the sign-in screen */

/* content is fluid and left-aligned like Argon's container-fluid, so it lines up with the top row */
body.has-shell .app{ max-width:1400px; margin:0; }
@media (max-width:991px){ .pshell-preview span{ display:none; } }

/* ---- colour pass: readable text greens/reds, vibrant fills for check marks ---- */
.step.done{ opacity:1; background:#f1fbf6; border-color:#bfe9d3; }
.step.done .step-check, .step-check.on{ background:var(--success-bright); border-color:var(--success-bright); color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(45,206,137,.45); }
.step-detail.done{ color:var(--success); font-weight:600; }
.caught-up{ background:#d7f5e6; color:#0b6a46; }
.banner.ok, .auth-ok{ color:#0b6a46; }
.step-detail, .step small, .sub, .hint, .dim, small{ color:var(--text-dim); }

/* ---- top-right alignment: the top row and the page content share one box, and header links look like the top-row buttons ---- */
.pshell-topbar{ right:auto; width:calc(100% - var(--sidebar-w)); max-width:calc(1400px + 3rem); box-sizing:border-box; }
body.has-shell header.top a, body.has-shell .top-actions a, body.has-shell a#back-link{
  display:inline-flex !important; align-items:center; height:2.25rem; box-sizing:border-box; padding:0 .9rem !important; border:none !important; border-radius:.375rem !important;
  background:rgba(255,255,255,.15) !important; color:#fff !important; font-size:.8125rem !important; font-weight:600 !important; text-decoration:none !important; box-shadow:none !important; }
body.has-shell header.top a:hover, body.has-shell a#back-link:hover{ background:rgba(255,255,255,.28) !important; }
body.has-shell header.top .top-actions{ display:flex; gap:.5rem; align-items:center; }

.pshell-crumb a{ color:rgba(255,255,255,.85); text-decoration:none; } .pshell-crumb a:hover{ color:#fff; }
/* the sidenav and the breadcrumb already lead home */
body.has-shell a#back-link, body.has-shell header.top a[href="../"]{ display:none !important; }

/* sidenav progress tick (sections the page reports as filled in) */
.nav-sec i.bi.nav-tick{ margin-left:auto; width:auto; font-size:1rem; color:var(--success-bright); }
.nav-sec.on i.bi.nav-tick{ color:var(--success-bright); }