*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Fluent UI / Entra light theme */
  --bg:#F3F2F1; --s1:#FFFFFF; --s2:#FAF9F8; --s3:#F3F2F1;
  --border:#EDEBE9;
  --text:#201F1E; --dim:#605E5C; --faint:#A19F9D;
  /* green was the one colour family with no -bg/-bdr pair, so every green
     badge in this file hardcodes #DFF6DD and therefore does not change in dark
     mode. Added to match the others; the literals above can migrate to it. */
  --green:#107C10; --green-d:#0B6A0B; --green-bg:#DFF6DD; --green-bdr:#9FD89B;
  --red:#A4262C; --red-bg:#FDE7E9; --red-bdr:#F4ABAB;
  --amber:#986F0B; --amber-bg:#FFF4CE; --amber-bdr:#FFD335;
  --blue:#0078D4; --blue-bg:#EFF6FC; --blue-bdr:#C7E0F4;
  --purple:#5C2E91; --purple-bg:#EDE7F6; --purple-bdr:#C5B5DF;
  --teal:#00897B; --teal-bg:#E0F2F1; --teal-bdr:#80CBC4;
  --sidebar:220px;
}
html,body { height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; }

/* ── SCREENS ─────────────────────────────────────────── */
#loading-screen { display:none; align-items:center; justify-content:center; min-height:100vh; }
#app { display:none; height:100vh; flex-direction:row; }
#app.visible { display:flex; }

/* ── LOGIN ──────────────────────────────────────────── */
#login-screen { display:none; }
.login-split { display:flex; min-height:100vh; }
.login-left { width:360px; min-width:360px; background:#1B1A19; border-right:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; padding:44px 40px; }
.login-logo { width:160px; height:auto; display:block; margin-bottom:16px; }
.login-env-badge { display:inline-flex; align-items:center; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(91,193,116,0.65); background:rgba(91,193,116,0.07); border:1px solid rgba(91,193,116,0.14); border-radius:4px; padding:3px 9px; align-self:flex-start; }
.login-left-body { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:40px; }
.login-left-desc { font-size:12px; color:rgba(255,255,255,0.28); line-height:1.9; max-width:250px; }
.login-restriction { font-size:10px; color:rgba(255,255,255,0.16); letter-spacing:0.3px; }
.login-right { flex:1; display:flex; align-items:center; justify-content:center; padding:48px 40px; background:#FFFFFF; }
.auth-wrap { width:100%; max-width:300px; }
.login-heading { font-size:21px; font-weight:700; color:var(--text); letter-spacing:-0.4px; margin-bottom:5px; }
.login-sub { font-size:12px; color:var(--faint); margin-bottom:28px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:11px; font-weight:600; color:var(--dim); margin-bottom:7px; }
.field input { width:100%; background:#FFFFFF; border:1px solid #8A8886; border-radius:2px; padding:11px 13px; color:var(--text); font-size:14px; font-family:inherit; outline:none; transition:border-color .12s; }
.field input::placeholder { color:var(--faint); }
.field input:focus { border-color:#0078D4; }
/* The site's primary button.
   ⚠️ This existed ONLY as `.auth-wrap .btn-primary`, scoped to the sign-in
   card, so the 17 other pages using the class got no rule at all and rendered
   a bare browser button — "Log a breach", "Add entry", "New announcement" and
   the rest. The scoped rule below still wins inside .auth-wrap, where the
   button is full width.
   Matches .btn-secondary's geometry so a primary and a secondary sitting side
   by side line up, and takes its colour from .fluent-btn-primary. */
.btn-primary {
  background: var(--grass); color: #FFFFFF;
  border: 1px solid var(--grass); border-radius: 2px;
  padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { background: var(--grass-d); border-color: var(--grass-d); }
.btn-primary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* The secondary. Same geometry as .btn-primary so the two line up side by
   side. Was defined only in datahub/datahub.css, which the marketing pages do
   not load, so Edit and Copy rendered as bare browser buttons there. */
.btn-secondary {
  background: var(--s1); border: 1px solid var(--border); border-radius: 2px;
  padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.btn-secondary:hover:not(:disabled) { background: var(--s2); border-color: var(--faint); }
.btn-secondary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

/* Form controls. Was defined only in datahub/datahub.css, so every input and
   textarea on the marketing pages fell back to the browser default — which is
   what made the campaign form look unstyled. */
.input {
  width: 100%; background: var(--s1); color: var(--text);
  border: 1px solid var(--ms-bdr, #8A8886); border-radius: 2px;
  padding: 7px 9px; font-family: inherit; font-size: 13px; outline: none;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.input:disabled { background: var(--s3); color: var(--faint); cursor: not-allowed; }
textarea.input { resize: vertical; line-height: 1.5; }
select.input { cursor: pointer; }
html[data-theme="dark"] { --ms-bdr: #4A5A68; }

/* showConfirm({ wide: true }) adds this, and nothing defined it — so a form
   that asked for room never got any and stayed at the narrow default. */
.modal.modal-wide { max-width: 620px; }

.auth-wrap .btn-primary { width:100%; padding:12px; background:#0078D4; color:#FFFFFF; border:none; border-radius:2px; font-size:14px; font-weight:600; cursor:pointer; transition:background .12s; margin-top:20px; letter-spacing:-0.2px; display:block; }
.auth-wrap .btn-primary:hover { background:#106EBE; }
.auth-wrap .btn-primary:disabled { opacity:.4; cursor:not-allowed; }
#login-error { color:var(--red); font-size:11px; margin-top:12px; min-height:16px; }
@media(max-width:680px) {
  .login-split { flex-direction:column; }
  .login-left { width:100%; min-width:0; padding:28px; flex-direction:row; align-items:center; gap:16px; }
  .login-left-body, .login-restriction { display:none; }
  .login-right { padding:28px; align-items:flex-start; }
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────
   QA Hub's rail is defined in qahub.css, not here.

   The platform console's rail rules used to sit at this point in the file -
   .sidebar, .sidebar-header, nav, .nav-item, .sidebar-footer, .user-pill,
   .user-avatar, .signout-btn - and a second, later layer re-skinned every
   one of them with !important. Both described a 220px column of labelled
   links. This site has a 64px icon rail with a different structure, so the
   two layers were not being overridden, they were fighting: the later
   `!important` ones won, and the rail lost its padding and spacing.

   ⚠️ Deleting them is why this file is no longer byte-identical to
   hosting/platform/shared.css. If you diff the two, these holes are
   deliberate. Everything else is still worth keeping in step.                */

/* ── MAIN ────────────────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar { padding:12px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:#FFFFFF; flex-shrink:0; min-height:48px; }
.topbar h1 { font-size:16px; font-weight:600; color:var(--text); letter-spacing:-.011em; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
#last-sync { font-size:11px; color:var(--faint); }
.back-btn { display:flex; align-items:center; gap:6px; padding:5px 10px; background:transparent; border:1px solid transparent; border-radius:2px; color:var(--dim); font-size:12px; font-weight:500; cursor:pointer; transition:all .1s; }
.back-btn:hover { background:var(--s3); border-color:var(--border); color:var(--text); }
.back-btn svg { width:12px; height:12px; }
.breadcrumb { font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px; }
.breadcrumb svg { width:10px; height:10px; }
.content { flex:1; overflow-y:auto; padding:24px 28px; background:var(--bg); }
/* Content is capped and centred rather than spanning the viewport. At 1440px a
   table is still wide enough for every column PM has, and past that the only
   effect of more width is a longer eye-travel between the first and last cell.
   Applied to the inner wrapper so pages that lay out their own full-bleed
   elements are unaffected. */
.content > * { max-width: 1440px; }
.content > .atabs { max-width: 1440px; }
.section { display:none; } .section.active { display:block; }

/* ── MAINTENANCE BANNER ──────────────────────────────── */
#maintenance-top { flex-shrink:0; }
.maintenance-banner {
  display:flex; align-items:center; gap:14px; padding:12px 22px;
  border-bottom:1px solid var(--red-bdr);
  background:#FDE7E9;
}
.maintenance-banner .m-icon { font-size:22px; flex-shrink:0; }
.maintenance-banner .m-title { font-size:13px; font-weight:600; color:var(--red); }
.maintenance-banner .m-sub   { font-size:11px; color:var(--dim); margin-top:1px; }
.maintenance-banner .m-btn {
  margin-left:auto; padding:7px 14px; border-radius:2px; border:1px solid var(--red-bdr);
  background:#FFFFFF; color:var(--red); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .1s;
}
.maintenance-banner .m-btn:hover { background:var(--red-bg); }

/* ── MAINTENANCE CONTROL CARD ────────────────────────── */
.maintenance-card {
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:#FFFFFF; border:1px solid var(--border); border-radius:4px; margin-bottom:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.maintenance-card.active { background:#FDE7E9; border-color:var(--red-bdr); }
.m-card-icon { width:38px; height:38px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:var(--s3); }
.maintenance-card.active .m-card-icon { background:var(--red-bg); }
.m-card-title { font-size:13px; font-weight:600; color:var(--text); }
.m-card-sub { font-size:11px; color:var(--dim); margin-top:2px; }
.maintenance-card.active .m-card-title { color:var(--red); }
.m-toggle-btn {
  margin-left:auto; padding:7px 16px; border-radius:2px; border:1px solid; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .1s;
}
.m-toggle-btn.off { background:var(--red-bg); border-color:var(--red-bdr); color:var(--red); }
.m-toggle-btn.off:hover { background:#FAD1D3; }
.m-toggle-btn.on  { background:#DFF6DD; border-color:#9FD89B; color:var(--green); }
.m-toggle-btn.on:hover  { background:#C8EFC6; }

/* ── ALERTS ──────────────────────────────────────────── */
#alerts-container { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.alert-banner { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:4px; border:1px solid; font-size:12px; }
.alert-banner.critical { background:var(--red-bg); border-color:var(--red-bdr); }
.alert-banner.warning  { background:var(--amber-bg); border-color:var(--amber-bdr); }
.alert-banner.info     { background:var(--blue-bg); border-color:var(--blue-bdr); }
.alert-banner svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; }
.alert-banner.critical svg{color:var(--red);} .alert-banner.warning svg{color:var(--amber);} .alert-banner.info svg{color:var(--blue);}
.alert-title { font-weight:600; } .alert-desc { color:var(--dim); margin-top:1px; font-size:11px; }

/* ── STATS ───────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:22px; }
.stat-card { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:13px 15px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.stat-label { font-size:10px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.stat-value { font-size:22px; font-weight:700; color:var(--text); }

/* ── SYSTEM HEALTH ───────────────────────────────────── */
.health-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-bottom:22px; }
.health-card { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:12px 15px; display:flex; align-items:center; gap:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.health-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.health-dot.green { background:#107C10; }
.health-dot.red   { background:var(--red); }
.health-dot.amber { background:var(--amber); }
.health-dot.grey  { background:var(--faint); }
.health-dot.pulse { animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.health-label { font-size:11px; color:var(--dim); flex:1; }
.health-value { font-size:11px; font-weight:600; color:var(--text); }

/* ── FLAGS ───────────────────────────────────────────── */
.flag-list { display:flex; flex-direction:column; gap:6px; }
.flag-row { display:flex; align-items:center; gap:10px; padding:10px 13px; background:#FFFFFF; border:1px solid var(--border); border-radius:4px; font-size:12px; cursor:pointer; transition:background .1s; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.flag-row:hover { background:var(--blue-bg); border-color:var(--blue-bdr); }
.flag-row svg { width:13px; height:13px; flex-shrink:0; color:var(--amber); }
.flag-row.critical svg { color:var(--red); }
.flag-chevron { margin-left:auto; color:var(--faint); flex-shrink:0; }
.flag-label { flex:1; } .flag-meta { font-size:11px; color:var(--faint); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── SEARCH ──────────────────────────────────────────── */
.search-bar { margin-bottom:12px; }
.search-input { width:260px; background:#FFFFFF; border:1px solid #8A8886; border-radius:2px; padding:7px 11px 7px 30px; color:var(--text); font-size:12px; outline:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23A19F9D' stroke-width='2'/%3E%3Cpath d='m21 21-4.35-4.35' stroke='%23A19F9D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:10px center; transition:border-color .12s; }
.search-input:focus { border-color:#0078D4; }
.search-input::placeholder { color:var(--faint); }

/* ── TABLE ───────────────────────────────────────────── */
.table-wrap { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead { background:#FAFAFA; }
th { padding:9px 14px; text-align:left; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--dim); white-space:nowrap; border-bottom:1px solid var(--border); }
td { padding:10px 14px; border-top:1px solid var(--border); vertical-align:middle; font-size:12px; }
tr:hover td { background:var(--blue-bg); }
.mono { font-family:'SF Mono','Fira Code',monospace; font-size:11px; color:var(--dim); }
.tag { display:inline-flex; align-items:center; font-size:10px; font-weight:600; padding:2px 7px; border-radius:2px; white-space:nowrap; border:1px solid transparent; }
.tag.red    { background:var(--red-bg);    color:var(--red);    border-color:var(--red-bdr); }
.tag.green  { background:#DFF6DD;          color:var(--green);  border-color:#9FD89B; }
.tag.amber  { background:var(--amber-bg);  color:var(--amber);  border-color:var(--amber-bdr); }
.tag.purple { background:var(--purple-bg); color:var(--purple); border-color:var(--purple-bdr); }
.tag.blue   { background:var(--blue-bg);   color:var(--blue);   border-color:var(--blue-bdr); }
.tag.teal   { background:var(--teal-bg);   color:var(--teal);   border-color:var(--teal-bdr); }

/* ── ICON BUTTONS ────────────────────────────────────── */
.actions { display:flex; gap:4px; align-items:center; }
.icon-btn { display:flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:2px; border:1px solid transparent; background:transparent; cursor:pointer; transition:all .1s; flex-shrink:0; color:var(--dim); }
.icon-btn svg { width:12px; height:12px; }
.icon-btn:hover { background:var(--s3); border-color:var(--border); }
.icon-btn.blue   { color:var(--blue); }   .icon-btn.blue:hover   { background:var(--blue-bg);   border-color:var(--blue-bdr); }
.icon-btn.purple { color:var(--purple); } .icon-btn.purple:hover { background:var(--purple-bg); border-color:var(--purple-bdr); }
.icon-btn.amber  { color:var(--amber); }  .icon-btn.amber:hover  { background:var(--amber-bg);  border-color:var(--amber-bdr); }
.icon-btn.red    { color:var(--red); }    .icon-btn.red:hover    { background:var(--red-bg);    border-color:var(--red-bdr); }
.icon-btn.green  { color:var(--green); }  .icon-btn.green:hover  { background:#DFF6DD; border-color:#9FD89B; }
.icon-btn.active-amber { background:var(--amber-bg); border-color:var(--amber-bdr); color:var(--amber); }

/* ── REFRESH BTN ─────────────────────────────────────── */
.refresh-btn { display:flex; align-items:center; gap:5px; padding:5px 10px; background:transparent; border:1px solid transparent; border-radius:2px; color:var(--dim); font-size:11px; font-weight:500; cursor:pointer; transition:all .1s; }
.refresh-btn:hover { background:var(--s3); border-color:var(--border); color:var(--text); }
.refresh-btn svg { width:12px; height:12px; }
.refresh-btn.spinning svg { animation:spin .7s linear infinite; }

/* ── DETAIL PAGE ─────────────────────────────────────── */
.detail-page-header { display:flex; align-items:center; gap:18px; margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.detail-page-avatar { width:56px; height:56px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex-shrink:0; }
.detail-page-avatar.user   { background:var(--blue-bg); color:var(--blue); }
.detail-page-avatar.circle { background:var(--purple-bg); color:var(--purple); }
.detail-page-name { font-size:20px; font-weight:700; letter-spacing:-0.3px; color:var(--text); }
.detail-page-sub  { font-size:12px; color:var(--dim); margin-top:3px; }
.detail-page-badges { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.detail-grid { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
@media(max-width:860px){.detail-grid{grid-template-columns:1fr;}}
.info-card { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.info-card-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--blue); padding:12px 16px 8px; border-bottom:1px solid var(--border); }
.info-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; border-bottom:1px solid var(--border); }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:11px; color:var(--faint); font-weight:500; white-space:nowrap; flex-shrink:0; }
.info-value { font-size:12px; color:var(--text); text-align:right; word-break:break-all; }
.info-value.mono { font-family:'SF Mono','Fira Code',monospace; font-size:11px; color:var(--dim); }
.action-card { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; overflow:hidden; position:sticky; top:0; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.action-card-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--blue); padding:12px 16px 8px; border-bottom:1px solid var(--border); }
.action-btn { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; font-size:13px; font-weight:500; }
.action-btn:last-child { border-bottom:none; }
.action-btn svg { width:15px; height:15px; flex-shrink:0; }
.action-btn .action-desc { font-size:11px; color:var(--faint); margin-top:1px; font-weight:400; }
.action-btn.blue{color:var(--blue);} .action-btn.blue:hover{background:var(--blue-bg);}
.action-btn.amber{color:var(--amber);} .action-btn.amber:hover{background:var(--amber-bg);}
.action-btn.red{color:var(--red);} .action-btn.red:hover{background:var(--red-bg);}
.action-btn.green{color:var(--green);} .action-btn.green:hover{background:#DFF6DD;}
.action-btn.teal{color:var(--teal);} .action-btn.teal:hover{background:var(--teal-bg);}
.action-btn.purple{color:var(--purple);} .action-btn.purple:hover{background:var(--purple-bg);}
.members-grid { display:flex; flex-wrap:wrap; gap:6px; padding:13px 16px; }
.member-chip { font-size:11px; padding:3px 9px; border-radius:2px; background:var(--s2); border:1px solid var(--border); color:var(--dim); font-family:monospace; }
.member-chip-wrap { display:inline-flex; align-items:center; gap:4px; }
.member-remove { display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:2px; border:none; background:transparent; cursor:pointer; color:var(--faint); font-size:10px; line-height:1; transition:all .1s; }
.member-remove:hover { background:var(--red-bg); color:var(--red); }
.modal select { width:100%; background:#FFFFFF; border:1px solid #8A8886; border-radius:2px; padding:8px 11px; color:var(--text); font-size:12px; outline:none; font-family:inherit; }
.modal select:focus { border-color:#0078D4; }
.admin-item { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:12px; }
.admin-item:last-child { border-bottom:none; }
.admin-item-name { flex:1; color:var(--text); font-weight:500; }
.admin-item-meta { font-size:11px; color:var(--faint); }
.admin-self-tag { font-size:10px; background:#DFF6DD; color:var(--green); border:1px solid #9FD89B; padding:1px 7px; border-radius:2px; }

/* ── ANNOUNCE ────────────────────────────────────────── */
.announce-form { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:18px; margin-bottom:20px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.announce-form .form-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--faint); margin-bottom:6px; display:block; }
.announce-form input, .announce-form textarea {
  width:100%; background:#FFFFFF; border:1px solid #8A8886; border-radius:2px;
  padding:9px 12px; color:var(--text); font-size:13px; outline:none; transition:border-color .12s;
  font-family:inherit; resize:none;
}
.announce-form input:focus, .announce-form textarea:focus { border-color:#0078D4; }
.announce-form input { margin-bottom:10px; }
.announce-form textarea { height:90px; }
.announce-send-btn { display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 18px; background:#0078D4; color:#fff; border:none; border-radius:2px; font-size:13px; font-weight:600; cursor:pointer; transition:background .12s; }
.announce-send-btn:hover { background:#106EBE; }
.announce-send-btn:disabled { opacity:.5; cursor:not-allowed; }
.announce-send-btn svg { width:14px; height:14px; }
.announce-list { display:flex; flex-direction:column; gap:8px; }
.announce-item { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:14px 16px; display:flex; align-items:flex-start; gap:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.announce-item-body { flex:1; }
.announce-item-title { font-size:13px; font-weight:600; margin-bottom:4px; color:var(--text); }
.announce-item-text  { font-size:12px; color:var(--dim); line-height:1.6; white-space:pre-wrap; }
.announce-item-meta  { font-size:10px; color:var(--faint); margin-top:6px; }
.announce-delete { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:2px; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--faint); transition:all .1s; flex-shrink:0; }
.announce-delete:hover { background:var(--red-bg); border-color:var(--red-bdr); color:var(--red); }
.announce-delete svg { width:12px; height:12px; }

/* ── SCHEDULE FORM ───────────────────────────────────── */
.schedule-section { border-top:1px solid var(--border); padding-top:14px; margin-top:2px; }
.schedule-check-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; color:var(--dim); margin-bottom:8px; }
.schedule-check-label input[type="checkbox"] { width:14px; height:14px; accent-color:#0078D4; cursor:pointer; }
input[type="datetime-local"] { color-scheme:light; width:100%; background:#FFFFFF; border:1px solid #8A8886; border-radius:2px; padding:8px 11px; color:var(--text); font-size:12px; outline:none; font-family:inherit; }
input[type="datetime-local"]:focus { border-color:#0078D4; }

/* ── EMPTY / LOADING ─────────────────────────────────── */
.empty { text-align:center; padding:44px 20px; color:var(--faint); font-size:12px; }
.loading { text-align:center; padding:32px; color:var(--faint); font-size:12px; }
.spinner { width:15px; height:15px; border:2px solid var(--border); border-top-color:#0078D4; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; margin-right:6px; vertical-align:middle; }
.spinner-lg { width:24px; height:24px; border:2px solid var(--border); border-top-color:#0078D4; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── TOAST ───────────────────────────────────────────── */
#toast { position:fixed; bottom:18px; right:18px; background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:9px 14px; font-size:12px; color:var(--text); display:flex; align-items:center; gap:7px; box-shadow:0 4px 20px rgba(0,0,0,.16); transform:translateY(60px); opacity:0; transition:all .18s; z-index:9999; pointer-events:none; }
#toast.show{transform:translateY(0);opacity:1;} #toast.success{border-color:#9FD89B;} #toast.error{border-color:var(--red-bdr);} #toast.warn{border-color:var(--amber-bdr);}

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:900; opacity:0; pointer-events:none; transition:opacity .15s; }
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; box-shadow:0 8px 32px rgba(0,0,0,.14); padding:24px; width:420px; max-width:90vw; max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:scale(.97); transition:transform .15s; }
.modal-overlay.open .modal{transform:scale(1);}
.modal-icon { display:none; }
.modal h3 { font-size:14px; font-weight:600; margin-bottom:6px; color:var(--text); }
.modal p  { color:var(--dim); font-size:12px; line-height:1.7; margin-bottom:16px; }
.modal p strong{color:var(--text);font-weight:600;}
#modal-extra { margin-bottom:16px; }
.modal-actions { display:flex; justify-content:flex-end; gap:7px; }
.btn-cancel { padding:7px 14px; border-radius:2px; border:1px solid #8A8886; background:#FFFFFF; color:var(--dim); cursor:pointer; font-size:12px; font-weight:500; }
.btn-cancel:hover{background:var(--s3);}
.btn-confirm { padding:7px 14px; border-radius:2px; border:none; color:#fff; cursor:pointer; font-size:12px; font-weight:600; background:#0078D4; }
.btn-confirm:hover{background:#106EBE;} .btn-confirm.amber{background:#C7A200;} .btn-confirm.green{background:#107C10;}
/* Only `amber` and `green` existed, so every other value passed as
   confirmClass fell through to the default blue - `danger` on 6 dialogs,
   `red` on 8, `success` on 3, `blue` on 2. A delete dialog whose confirm
   button is the same blue as Save is the one place that should not look
   routine. Aliases rather than a rename, so no call site has to change. */
.btn-confirm.red, .btn-confirm.danger { background:#A4262C; }
.btn-confirm.red:hover, .btn-confirm.danger:hover { background:#8E1F24; }
.btn-confirm.success { background:#107C10; }
.btn-confirm.success:hover { background:#0B5A0B; }
.btn-confirm.blue:hover { background:#106EBE; }
.modal.modal-wide { width:560px; }
.data-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
@media(max-width:600px) { .data-type-grid { grid-template-columns:1fr; } }
.entra-2col-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:560px) { .entra-2col-grid { grid-template-columns:1fr; } }
.data-type-item { display:flex; align-items:flex-start; gap:9px; background:#FAFAFA; border:1px solid var(--border); border-radius:4px; padding:10px 12px; cursor:pointer; transition:border-color .12s; }
.data-type-item:hover { border-color:#0078D4; background:var(--blue-bg); }
.data-type-item input[type=checkbox] { margin-top:1px; width:14px; height:14px; flex-shrink:0; accent-color:#0078D4; cursor:pointer; }
.data-type-item label { font-size:12px; font-weight:600; color:var(--text); cursor:pointer; display:block; }
.data-type-item .dt-desc { font-size:11px; color:var(--dim); margin-top:1px; }
.pkg-status-box { background:#FAFAFA; border:1px solid var(--border); border-radius:4px; padding:14px 16px; margin-bottom:16px; }
.pkg-status-box .pkg-label { font-size:11px; color:var(--dim); margin-bottom:2px; }
.pkg-status-box .pkg-url { font-size:11px; color:var(--blue); word-break:break-all; font-family:monospace; }
.pkg-expiry-warn { background:var(--amber-bg); border:1px solid var(--amber-bdr); border-radius:4px; padding:10px 14px; font-size:12px; color:var(--amber); line-height:1.6; margin-bottom:16px; }
.manage-step-title { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }

.divider{border:none;border-top:1px solid var(--border);margin:20px 0;}
.section-header{display:flex;align-items:center;gap:8px;margin:26px 0 12px;}
.section-header h2{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:-.005em;}
.chips{display:flex;flex-wrap:wrap;gap:5px;}
.chip{font-size:11px;padding:3px 8px;border-radius:2px;background:var(--s2);border:1px solid var(--border);color:var(--dim);font-family:monospace;}

/* ── MASS ACTION BAR ────────────────────────────────────── */
.mass-bar { display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--blue-bg); border:1px solid var(--blue-bdr); border-radius:2px; margin-bottom:10px; font-size:12px; }
.mass-bar-count { font-weight:600; color:var(--blue); flex:1; }
.mass-bar-btn { padding:5px 11px; border-radius:2px; border:1px solid; font-size:11px; font-weight:600; cursor:pointer; transition:opacity .1s; white-space:nowrap; }
.mass-bar-btn.red    { background:var(--red-bg);    border-color:var(--red-bdr);    color:var(--red); }
.mass-bar-btn.amber  { background:var(--amber-bg);  border-color:var(--amber-bdr);  color:var(--amber); }
.mass-bar-btn.green  { background:#DFF6DD;           border-color:#9FD89B;           color:var(--green); }
.mass-bar-btn.blue   { background:var(--blue-bg);   border-color:var(--blue-bdr);   color:var(--blue); }
.mass-bar-btn.purple { background:var(--purple-bg); border-color:var(--purple-bdr); color:var(--purple); }
.mass-bar-btn:hover { opacity:.8; }
.mass-clear { background:none; border:none; color:var(--blue); cursor:pointer; font-size:12px; font-weight:600; text-decoration:underline; padding:0 2px; font-family:inherit; }
.mass-clear:hover { color:#004578; }
table input[type="checkbox"] { width:14px; height:14px; accent-color:#0078D4; cursor:pointer; }
.create-btn { display:flex; align-items:center; gap:6px; padding:6px 12px; background:#0078D4; color:#fff; border:none; border-radius:2px; font-size:12px; font-weight:600; cursor:pointer; transition:background .12s; white-space:nowrap; }
.create-btn:hover { background:#106EBE; }
.create-btn svg { width:13px; height:13px; }
.section-hdr-btn { display:flex; align-items:center; gap:6px; padding:6px 12px; border:none; border-radius:2px; font-size:12px; font-weight:600; cursor:pointer; color:#fff; transition:background .12s; white-space:nowrap; }
.section-hdr-btn.green { background:#107C10; }
.section-hdr-btn.green:hover { background:#0B6A0B; }
.section-hdr-btn.blue { background:#0078D4; }
.section-hdr-btn.blue:hover { background:#106EBE; }

/* ── DETAIL LIST ROWS ────────────────────────────────────── */
.detail-list-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.detail-list-row:last-child { border-bottom:none; }
.detail-list-row:hover { background:var(--blue-bg); }
.detail-list-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.detail-list-avatar.user   { background:var(--blue-bg);   color:var(--blue); }
.detail-list-avatar.circle { background:var(--purple-bg); color:var(--purple); }
.detail-list-name { font-size:13px; font-weight:500; color:var(--text); }
.detail-list-sub  { font-size:11px; color:var(--faint); margin-top:1px; }

/* ── ANALYTICS ───────────────────────────────────────── */
.analytics-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:20px; }
.analytics-kpi { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:16px 18px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.analytics-kpi-label { font-size:11px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.analytics-kpi-value { font-size:28px; font-weight:700; letter-spacing:-0.5px; color:var(--text); line-height:1; }
.analytics-kpi-sub { font-size:11px; color:var(--faint); margin-top:4px; }
.analytics-charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media(max-width:900px){.analytics-charts-grid{grid-template-columns:1fr;}}
.analytics-chart-card { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:18px 20px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.analytics-chart-title { font-size:11px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.analytics-chart-wrap { position:relative; height:160px; }
.analytics-asc-card { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:20px 22px; display:flex; align-items:center; gap:16px; margin-bottom:20px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.analytics-asc-icon { width:44px; height:44px; border-radius:4px; background:var(--blue-bg); border:1px solid var(--blue-bdr); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.analytics-asc-icon svg { width:20px; height:20px; color:var(--blue); }
.analytics-asc-text h3 { font-size:14px; font-weight:600; margin-bottom:3px; color:var(--text); }
.analytics-asc-text p { font-size:12px; color:var(--dim); }
.analytics-asc-link { margin-left:auto; padding:7px 14px; background:var(--blue-bg); border:1px solid var(--blue-bdr); border-radius:2px; color:var(--blue); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; transition:opacity .1s; }
.analytics-asc-link:hover { background:#DEEFFE; }
.analytics-period-tabs { display:flex; gap:4px; margin-bottom:18px; }
.analytics-period-tab { padding:5px 12px; border-radius:2px; border:1px solid var(--border); background:#FFFFFF; color:var(--dim); font-size:11px; font-weight:600; cursor:pointer; transition:all .1s; }
.analytics-period-tab.active { background:var(--blue-bg); border-color:var(--blue-bdr); color:var(--blue); }
.analytics-period-tab:hover:not(.active) { background:var(--s3); }
.analytics-retention-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12px; }
.analytics-retention-row:last-child { border-bottom:none; }
.analytics-retention-label { width:120px; color:var(--dim); flex-shrink:0; }
.analytics-retention-bar-wrap { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.analytics-retention-bar { height:100%; border-radius:3px; background:#0078D4; transition:width .4s; }
.analytics-retention-pct { width:36px; text-align:right; font-weight:600; color:var(--text); }

/* ── MOBILE ─────────────────────────────────────────── */
.hamburger-btn {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 2px;
  border: 1px solid transparent; background: transparent;
  cursor: pointer; color: var(--dim); flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--s3); border-color: var(--border); color: var(--text); }
.hamburger-btn svg { width: 16px; height: 16px; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 199; }
@media(max-width:768px) {
  .hamburger-btn { display: flex; }
  .sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .sidebar-overlay.visible { opacity: 1; pointer-events: all; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; transform: translateX(-100%); transition: transform 0.25s ease; }
  .sidebar.mobile-open { transform: translateX(0); }
  #last-sync { display: none; }
  .content { padding: 14px 16px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .search-input { width: 100%; flex: 1; min-width: 0; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .analytics-charts-grid { grid-template-columns: 1fr; }

  /* Entra-style lists (users/circles/groups/referrals/admins) use fixed-px
     grid columns per page - scroll horizontally instead of crushing them. */
  .entra-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entra-list-header, .entra-list-row { min-width: max-content; }

  .fluent-search-wrap { flex: 1 1 100%; }
  .fluent-search-wrap input { width: 100%; }

  .signout-btn, .theme-toggle-btn { width: 32px; height: 32px; }
  .hamburger-btn { width: 36px; height: 36px; }
}

/* ── GCP OUTAGE BANNER ───────────────────────────────── */
.gcp-outage-banner { display:flex; align-items:center; gap:10px; padding:9px 18px; font-size:12px; flex-shrink:0; border-bottom:1px solid; }
.gcp-outage-banner.critical { background:var(--red-bg); border-color:var(--red-bdr); color:var(--red); }
.gcp-outage-banner.warning  { background:var(--amber-bg); border-color:var(--amber-bdr); color:var(--amber); }
.gcp-outage-banner svg { flex-shrink:0; }
.gcp-outage-text { flex:1; line-height:1.4; }
.gcp-outage-services { opacity:.7; }
.gcp-outage-link { font-size:11px; padding:3px 9px; border-radius:2px; border:1px solid currentColor; opacity:.75; text-decoration:none; color:inherit; white-space:nowrap; flex-shrink:0; }
.gcp-outage-link:hover { opacity:1; }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#C8C6C4; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#A19F9D; }

/* ════════════════════════════════════════════════════════
   FLUENT UI / ENTRA COMPONENT LIBRARY
   ════════════════════════════════════════════════════════ */

/* ── Command bar ── */
.fluent-cmdbar { display:flex; align-items:center; gap:4px; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; row-gap:6px; }
.fluent-btn { display:flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid transparent; border-radius:2px; font-size:13px; font-weight:400; cursor:pointer; transition:background .08s; white-space:nowrap; font-family:inherit; background:transparent; color:var(--text); line-height:1; }
.fluent-btn:hover { background:var(--s3); border-color:var(--border); }
/* Primary actions carry the brand green rather than Fluent's blue. Blue is
   kept for informational surfaces, where it means "notice this", not "this is
   the button that does the thing". */
.fluent-btn-primary { background:var(--green); color:#FFFFFF; font-weight:600; border-color:var(--green); }
.fluent-btn-primary:hover { background:var(--grass-d); border-color:var(--grass-d); }
.fluent-btn svg { width:13px; height:13px; }
.fluent-cmdbar-sep { width:1px; height:20px; background:var(--border); margin:0 4px; flex-shrink:0; }

/* ── Pivot tabs ── */
.fluent-pivot { display:flex; border-bottom:1px solid var(--border); margin-bottom:16px; }
.fluent-pivot-item { padding:10px 16px; border:none; border-bottom:2px solid transparent; background:transparent; cursor:pointer; font-size:14px; font-weight:400; color:var(--dim); transition:all .1s; font-family:inherit; margin-bottom:-1px; white-space:nowrap; }
.fluent-pivot-item:hover { color:var(--text); background:var(--s2); }
.fluent-pivot-item.active { color:#0078D4; border-bottom-color:#0078D4; font-weight:600; }

/* ── Fluent search ── */
.fluent-search-wrap { position:relative; display:flex; align-items:center; }
.fluent-search-wrap svg { position:absolute; left:8px; width:14px; height:14px; color:var(--faint); pointer-events:none; }
.fluent-search-wrap input { width:220px; padding:6px 10px 6px 30px; border:1px solid #8A8886; border-radius:2px; font-size:13px; color:var(--text); background:#FFFFFF; outline:none; font-family:inherit; }
.fluent-search-wrap input:focus { border-color:#0078D4; }
.fluent-search-wrap input::placeholder { color:var(--faint); }

/* ── Fluent select ── */
.fluent-select { padding:6px 10px; border:1px solid #8A8886; border-radius:2px; font-size:13px; color:var(--text); background:#FFFFFF; outline:none; cursor:pointer; font-family:inherit; }
.fluent-select:focus { border-color:#0078D4; }

/* ── Split button ── */
.fluent-split { display:flex; align-items:stretch; border-radius:2px; overflow:hidden; flex-shrink:0; position:relative; }
.fluent-split-main { display:flex; align-items:center; gap:6px; padding:5px 10px; background:#0078D4; color:#FFFFFF; font-size:13px; font-weight:600; border:none; cursor:pointer; font-family:inherit; transition:background .08s; white-space:nowrap; line-height:1; }
.fluent-split-main:hover { background:#106EBE; }
.fluent-split-main svg { width:13px; height:13px; }
.fluent-split-div { width:1px; background:rgba(255,255,255,0.3); flex-shrink:0; }
.fluent-split-caret { display:flex; align-items:center; padding:0 7px; background:#0078D4; color:#FFFFFF; border:none; cursor:pointer; font-family:inherit; transition:background .08s; }
.fluent-split-caret:hover { background:#106EBE; }
.fluent-split-caret svg { width:10px; height:10px; }

/* ── Dropdown ── */
.fluent-dd { position:relative; flex-shrink:0; }
.fluent-dd-menu { display:none; position:absolute; top:calc(100% + 3px); left:0; background:#FFFFFF; border:1px solid #EDEBE9; border-radius:2px; box-shadow:0 4px 20px rgba(0,0,0,.14); min-width:210px; max-width:calc(100vw - 32px); max-height:min(420px,70vh); overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:400; padding:4px 0; }
.fluent-dd-menu.right { left:auto; right:0; }
.fluent-dd-item { display:flex; align-items:center; gap:9px; width:100%; padding:8px 14px; border:none; background:transparent; font-size:13px; color:var(--text); text-align:left; cursor:pointer; font-family:inherit; transition:background .06s; white-space:nowrap; box-sizing:border-box; }
.fluent-dd-item:hover { background:#F3F2F1; }
.fluent-dd-item svg { width:14px; height:14px; color:var(--dim); flex-shrink:0; }
.fluent-dd-item.dd-danger { color:var(--red); }
.fluent-dd-item.dd-danger svg { color:var(--red); }
.fluent-dd-item.dd-danger:hover { background:var(--red-bg); }
.fluent-dd-item.dd-check { cursor:default; gap:10px; }
.fluent-dd-item.dd-check input { accent-color:#0078D4; flex-shrink:0; }
.fluent-dd-sep { height:1px; background:#EDEBE9; margin:4px 0; }
.fluent-dd-lbl { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); padding:8px 14px 2px; }

/* ── Ghost action buttons ── */
.fluent-ghost { display:flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid transparent; border-radius:2px; font-size:13px; font-weight:400; cursor:pointer; font-family:inherit; background:transparent; color:var(--text); white-space:nowrap; transition:all .08s; line-height:1; }
.fluent-ghost:hover:not(:disabled) { background:var(--s3); border-color:var(--border); }
.fluent-ghost:disabled { opacity:.38; cursor:not-allowed; }
.fluent-ghost svg { width:14px; height:14px; }
.fluent-ghost.g-danger { color:var(--red); }
.fluent-ghost.g-danger:hover:not(:disabled) { background:var(--red-bg); border-color:var(--red-bdr); }

/* ── Icon-only button ── */
.fluent-icn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid transparent; border-radius:2px; background:transparent; cursor:pointer; color:var(--dim); transition:all .08s; flex-shrink:0; }
.fluent-icn:hover { background:var(--s3); border-color:var(--border); color:var(--text); }
.fluent-icn svg { width:14px; height:14px; }
.fluent-icn.spinning svg { animation:entra-spin .7s linear infinite; }
@keyframes entra-spin { to { transform:rotate(360deg); } }

/* ── Selection info bar ── */
.entra-sel-bar { display:flex; align-items:center; gap:10px; padding:5px 14px; background:var(--blue-bg); border:1px solid var(--blue-bdr); border-radius:2px; margin-bottom:10px; }
.entra-sel-n { font-size:13px; font-weight:600; color:var(--blue); }
.entra-sel-clr { margin-left:auto; background:none; border:none; font-size:12px; color:var(--blue); cursor:pointer; text-decoration:underline; font-family:inherit; padding:0; }
.entra-sel-clr:hover { color:#004578; }

/* ── Entra DetailsList ── */
.entra-list { background:#FFFFFF; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.entra-list-header { display:grid; align-items:center; height:42px; border-bottom:1px solid var(--border); background:#FAFAF9; }
.entra-list-col-hdr { font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.4px; padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entra-list-row { display:grid; align-items:center; min-height:44px; border-bottom:1px solid #F3F2F1; cursor:pointer; transition:background .06s; }
.entra-list-row:last-of-type { border-bottom:none; }
.entra-list-row:hover { background:#EFF6FC; }
.entra-list-row.selected { background:#DEEFFE; }
.entra-col-check { display:flex; align-items:center; justify-content:center; }
.entra-col-name { display:flex; align-items:center; gap:10px; padding:6px 12px; min-width:0; overflow:hidden; }
.entra-col-val { font-size:12px; color:var(--dim); padding:0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entra-avatar-sm { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#FFFFFF; }
.entra-row-primary { font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entra-row-secondary { font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.entra-status-cell { display:flex; align-items:center; gap:7px; padding:0 12px; font-size:13px; color:var(--text); flex-wrap:wrap; row-gap:3px; }
.entra-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.entra-status-dot.active   { background:#107C10; }
.entra-status-dot.disabled { background:#A4262C; }
.entra-status-extra { font-size:11px; font-weight:500; }
.entra-status-extra.teal { color:#00897B; }
.entra-status-extra.blue  { color:#0078D4; }
.entra-list-footer { padding:6px 16px; font-size:12px; color:var(--faint); border-top:1px solid var(--border); background:#FAFAF9; }

/* ── Entra detail page ── */
.entra-detail-header { display:flex; align-items:flex-start; gap:20px; padding:24px 0 20px; border-bottom:1px solid var(--border); margin-bottom:0; }
.entra-avatar { width:72px; height:72px; border-radius:50%; background:#0078D4; color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:600; flex-shrink:0; }
.entra-header-info { flex:1; min-width:0; padding-top:6px; }
.entra-display-name { font-size:20px; font-weight:600; color:var(--text); margin-bottom:3px; }
.entra-email { font-size:13px; color:var(--dim); margin-bottom:10px; }
.entra-badges { display:flex; gap:6px; flex-wrap:wrap; }

.entra-action-bar { display:flex; align-items:center; gap:2px; padding:6px 0; border-bottom:1px solid var(--border); margin-bottom:20px; }
.entra-action-btn { display:flex; align-items:center; gap:6px; padding:6px 12px; border:none; border-radius:2px; background:transparent; color:var(--text); font-size:13px; font-weight:400; cursor:pointer; transition:background .08s; white-space:nowrap; font-family:inherit; }
.entra-action-btn:hover { background:var(--s3); }
.entra-action-btn.warn { color:var(--amber); }
.entra-action-btn.warn:hover { background:var(--amber-bg); }
.entra-action-btn.success { color:var(--green); }
.entra-action-btn.success:hover { background:#DFF6DD; }
.entra-action-btn.danger { color:var(--red); }
.entra-action-btn.danger:hover { background:var(--red-bg); }
.entra-action-sep { width:1px; height:20px; background:var(--border); margin:0 4px; }

.entra-props-section { background:#FFFFFF; border:1px solid var(--border); border-radius:4px; padding:20px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.entra-section-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.entra-props-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px 24px; }
.entra-prop-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--faint); margin-bottom:5px; }
.entra-prop-value { font-size:13px; color:var(--text); word-break:break-all; }

/* ── Scheduled action amber info bar ── */
.entra-sched-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--amber-bg); border:1px solid var(--amber-bdr); border-radius:4px; padding:10px 16px; margin-bottom:0; font-size:13px; color:var(--amber); }
.entra-sched-bar-cancel { padding:4px 12px; border-radius:2px; border:1px solid var(--amber-bdr); background:transparent; color:var(--amber); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.entra-sched-bar-cancel:hover { background:var(--amber-bg); }

/* ── User detail tab navigation ── */
.entra-detail-nav { display:flex; border-bottom:1px solid var(--border); margin-top:0; background:#FFFFFF; }
.entra-detail-nav-item { padding:10px 16px; border:none; border-bottom:2px solid transparent; background:transparent; cursor:pointer; font-size:13px; font-weight:400; color:var(--dim); transition:all .1s; font-family:inherit; margin-bottom:-1px; white-space:nowrap; }
.entra-detail-nav-item:hover { color:var(--text); background:var(--s3); }
.entra-detail-nav-item.active { color:#0078D4; border-bottom-color:#0078D4; font-weight:600; }
.entra-tab-panel { padding-top:16px; }

/* ════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --bg:#1B1A19; --s1:#252423; --s2:#2D2C2B; --s3:#323130;
  --border:#484644;
  --text:#FAF9F8; --dim:#C8C6C4; --faint:#8A8886;
  --green:#54B354; --green-d:#4DA84D; --green-bg:rgba(84,179,84,0.12); --green-bdr:rgba(84,179,84,0.3);
  --red:#F1707B; --red-bg:rgba(241,112,123,0.12); --red-bdr:rgba(241,112,123,0.3);
  --amber:#FFC83D; --amber-bg:rgba(255,200,61,0.1); --amber-bdr:rgba(255,200,61,0.3);
  --blue:#479EF5; --blue-bg:rgba(71,158,245,0.1); --blue-bdr:rgba(71,158,245,0.28);
  --purple:#A196D0; --purple-bg:rgba(161,150,208,0.1); --purple-bdr:rgba(161,150,208,0.28);
  --teal:#26C3A3; --teal-bg:rgba(38,195,163,0.1); --teal-bdr:rgba(38,195,163,0.28);
}

/* Surfaces */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .health-card,
[data-theme="dark"] .flag-row,
[data-theme="dark"] .announce-form,
[data-theme="dark"] .announce-item,
[data-theme="dark"] .analytics-kpi,
[data-theme="dark"] .analytics-chart-card,
[data-theme="dark"] .analytics-asc-card,
[data-theme="dark"] .maintenance-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .modal,
[data-theme="dark"] .entra-list,
[data-theme="dark"] .entra-props-section,
[data-theme="dark"] .entra-detail-nav { background:var(--s1); }

[data-theme="dark"] thead,
[data-theme="dark"] .entra-list-header,
[data-theme="dark"] .entra-list-footer { background:var(--s2); }

[data-theme="dark"] .entra-list-row { border-bottom-color:var(--border); }
[data-theme="dark"] .entra-list-row:hover { background:rgba(71,158,245,0.07); }
[data-theme="dark"] .entra-list-row.selected { background:rgba(71,158,245,0.14); }
[data-theme="dark"] .data-type-item,
[data-theme="dark"] .pkg-status-box { background:var(--s2); border-color:var(--border); }
[data-theme="dark"] .maintenance-card.active { background:var(--red-bg); }

/* Nav active state */
[data-theme="dark"] .nav-item.active { background:rgba(71,158,245,0.12); }

/* Inputs, selects, textareas */
[data-theme="dark"] .field input,
[data-theme="dark"] .fluent-search-wrap input,
[data-theme="dark"] .fluent-select,
[data-theme="dark"] .modal select,
[data-theme="dark"] .announce-form input,
[data-theme="dark"] .announce-form textarea,
[data-theme="dark"] input[type="datetime-local"] { background:var(--s2); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .fluent-search-wrap input:focus,
[data-theme="dark"] .fluent-select:focus,
[data-theme="dark"] .announce-form input:focus,
[data-theme="dark"] .announce-form textarea:focus,
[data-theme="dark"] input[type="datetime-local"]:focus { border-color:var(--blue); }

/* Dropdowns */
[data-theme="dark"] .fluent-dd-menu { background:var(--s1); border-color:var(--border); box-shadow:0 4px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .fluent-dd-item:hover { background:var(--s3); }
[data-theme="dark"] .fluent-dd-sep { background:var(--border); }

/* Table rows */
[data-theme="dark"] tr:hover td { background:rgba(71,158,245,0.07); }
[data-theme="dark"] .detail-list-row:hover { background:rgba(71,158,245,0.07); }
[data-theme="dark"] .flag-row:hover { background:var(--blue-bg); border-color:var(--blue-bdr); }

/* Toast & modal */
[data-theme="dark"] #toast { background:var(--s1); }
[data-theme="dark"] .modal-overlay { background:rgba(0,0,0,.55); }
[data-theme="dark"] .btn-cancel { background:var(--s2); border-color:var(--border); color:var(--dim); }
[data-theme="dark"] .btn-cancel:hover { background:var(--s3); }

/* Login */
[data-theme="dark"] .login-right { background:var(--s1); }
[data-theme="dark"] .field input { background:var(--s2); }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:var(--border); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#6D6B6A; }

/* Theme toggle button */
.theme-toggle-btn { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:4px; background:none; border:1px solid transparent; cursor:pointer; color:var(--faint); transition:all .1s; flex-shrink:0; }
.theme-toggle-btn:hover { background:var(--blue-bg); border-color:var(--blue-bdr); color:var(--blue); }
.theme-toggle-btn svg { width:13px; height:13px; }

/* Page-specific dark overrides - emails.html */
[data-theme="dark"] .compose-input,
[data-theme="dark"] .compose-select,
[data-theme="dark"] .compose-textarea { background:var(--s2); border-color:var(--border); }
[data-theme="dark"] .compose-input:focus,
[data-theme="dark"] .compose-select:focus,
[data-theme="dark"] .compose-textarea:focus { border-color:var(--blue); }
[data-theme="dark"] .recipient-dropdown { background:var(--s1); box-shadow:0 4px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .body-tool-btn { background:var(--s2); border-color:var(--border); }
[data-theme="dark"] .btn-preview { background:var(--s2); border-color:var(--border); }
[data-theme="dark"] .hint-block-body code { background:var(--s2); }
[data-theme="dark"] .template-card { background:var(--s1); }
[data-theme="dark"] .preview-modal { background:var(--s1); }
[data-theme="dark"] .preview-modal-header { background:var(--s2); }
[data-theme="dark"] .preview-close { background:var(--s2); border-color:var(--border); }

/* Page-specific dark overrides - users.html comms tab + inline inputs */
[data-theme="dark"] .comms-input,
[data-theme="dark"] .comms-textarea { background:var(--s2); border-color:var(--border); }
[data-theme="dark"] .comms-tool-btn { background:var(--s2); border-color:var(--border); }

/* Announcements inline inputs - target by id */
[data-theme="dark"] #announce-title,
[data-theme="dark"] #announce-body { background:var(--s2) !important; border-color:var(--border) !important; color:var(--text) !important; }

/* Page-specific dark overrides - groups.html */
[data-theme="dark"] .move-select { background:var(--s2) !important; border-color:var(--border) !important; color:var(--text) !important; }
[data-theme="dark"] #modal-extra select,
[data-theme="dark"] #modal-extra input[type="text"] { background:var(--s2) !important; border-color:var(--border) !important; }
/* ══════════════════════════════════════════════════════════════════════════
   ShapedSocial Platform - skin layer
   ──────────────────────────────────────────────────────────────────────────
   Appended AFTER the inherited Entra/Fluent component CSS, never instead of
   it. The 22 admin pages depend on ~58KB of component classes (.tag, .modal,
   .stat, tables, forms); rewriting those would have meant reimplementing every
   one and missing some. So the component layer is kept verbatim and retinted
   through the ten :root custom properties it already reads, with the page
   chrome replaced outright below.

   The look is deliberate: mid-2000s web-app furniture - an olive tab strip, a
   grass-green identity band, a blue-grey rail, and white content panels with
   pale blue title bars. Type is the Lucida Grande stack of the era, small and
   dense, because these are operator screens read at length, not landing pages.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Retint of the inherited token contract - same names, period palette. */
  --bg:#E4EBF1;
  --s1:#FFFFFF;
  --s2:#F5F8FB;
  --s3:#E9EFF5;
  --border:#B6C6D6;
  --text:#1B2836;
  --dim:#4C5F71;
  --faint:#8093A4;

  /* ShapedSocial green. Very dark, so it carries the chrome and buttons while
     hover and active states are lifted above it rather than sunk below: on a
     colour this deep, going darker for feedback is invisible. */
  --green:#143D00; --green-d:#0E2B00;
  --red:#9B2C22;   --red-bg:#FBEAE8;   --red-bdr:#E0A9A2;
  --amber:#8A6512; --amber-bg:#FDF3D9; --amber-bdr:#E8C765;
  --blue:#1A4F9C;  --blue-bg:#DCE9F5;  --blue-bdr:#A9C6E2;
  --purple:#553A8B;--purple-bg:#E9E3F3;--purple-bdr:#BCA9DC;
  --teal:#1A6F72;  --teal-bg:#DEEFEF;  --teal-bdr:#96C6C7;

  --sidebar:208px;

  /* Chrome, Entra style: one dark neutral bar, Fluent blue as the single
     accent, white rail. The green olive/grass skin that sat here was the
     retro look; these are the Fluent tokens the rest of the file was
     written against. */
  --olive:#1B1A19;      /* the top bar, Fluent neutral-dark */
  --olive-d:#11100F;
  --grass:#0078D4;      /* Fluent communication blue */
  --grass-d:#106EBE;
  --rail:#FFFFFF;
  --rail-2:#FAF9F8;
  --panel-head:#F3F2F1;
  --row-alt:#FAF9F8;
  --link:#0078D4;
}

html[data-theme="dark"]{
  --bg:#141A20; --s1:#1B232B; --s2:#202A33; --s3:#18212A;
  --border:#33434F; --text:#E2E9EF; --dim:#9FB0BF; --faint:#6F8291;
  --blue:#7FAEE3; --blue-bg:#182635; --blue-bdr:#2E4A66;
  --rail:#1B232B; --rail-2:#202A33; --panel-head:#1B2836;
  --row-alt:#1E2830; --link:#8FB8E8;
  --olive:#11100F; --olive-d:#0B0A0A; --grass:#2899F5; --grass-d:#0078D4;
}

body{
  /* Fluent's own stack, Segoe first, matching the base theme at the top of
     this file rather than the Lucida Grande the retro skin used. */
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13px;
  background:var(--bg);
  color:var(--text);
}

/* ── Top bar ────────────────────────────────────────────────────────────
   Brand, section nav, context and sign-out on one 52px line. This replaced a
   26px tab strip stacked on a 49px identity band: the same information in
   half the height, and without two greens arguing with each other. */
.cg-topnav{
  display:flex; align-items:center; gap:2px;
  background:var(--olive);
  padding:0 16px;
  height:52px;
  font-size:13px;
  position:relative; z-index:40;
}
/* The brand and the context sit inside the same bar. */
/* ── Shell ─────────────────────────────────────────────────────────────── */
/* ── Left rail ─────────────────────────────────────────────────────────── */
/* ── Content panel ─────────────────────────────────────────────────────── */
/* ── Tables ────────────────────────────────────────────────────────────── */
table{ font-size:11.5px }
thead th{
  background:var(--s3) !important;
  border-bottom:1px solid var(--border) !important;
  font-size:10px !important; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim) !important; font-weight:700 !important;
}
tbody tr:nth-child(even){ background:var(--row-alt) }
tbody tr:hover{ background:var(--blue-bg) }
td{ border-bottom:1px solid #E3EAF1 !important }
a{ color:var(--link) }

/* ── Buttons ───────────────────────────────────────────────────────────── */
button, .btn-confirm, .refresh-btn{
  font-family:inherit !important; font-size:11px !important;
  border-radius:3px !important;
}
.refresh-btn{
  background:var(--s1) !important; border:1px solid var(--border) !important;
  color:var(--text) !important;
}
.refresh-btn:hover{ background:var(--s3) !important }

/* ── Footer ────────────────────────────────────────────────────────────── */
.cg-foot{
  /* Full width of whatever it sits in, never a flex item competing with the
     content area, and never overlapping: it is ordinary flow content. */
  grid-column:1/-1; width:100%; max-width:none !important; flex:0 0 auto; clear:both;
  box-sizing:border-box;
  text-align:center; padding:16px 12px 4px; margin-top:26px; font-size:10.5px; color:var(--faint);
  border-top:1px solid var(--border);
  display:flex; gap:6px 18px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.cg-foot span:not(:last-child)::after{ content:'\00b7'; margin-left:18px; color:var(--border) }
.cg-foot a{ color:var(--dim); text-decoration:none }
.cg-foot a:hover{ text-decoration:underline; color:var(--link) }

/* ── Platform-only pieces ──────────────────────────────────────────────── */
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
.proj{
  border:1px solid var(--blue-bdr); border-radius:5px; background:var(--s1);
  padding:0; overflow:hidden; text-decoration:none; color:inherit; display:block;
}
.proj:hover{ border-color:var(--grass); box-shadow:0 1px 5px rgba(0,0,0,.09) }
.proj-head{
  background:var(--panel-head); border-bottom:1px solid var(--blue-bdr);
  padding:9px 12px; display:flex; align-items:center; gap:9px;
}
.proj-mark{
  width:26px; height:26px; border-radius:4px; background:var(--grass);
  color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex:0 0 26px;
}
.proj-name{ font-size:14px; font-weight:700; color:var(--link) }
.proj-body{ padding:11px 12px; display:flex; flex-direction:column; gap:7px }
.proj-row{ display:flex; justify-content:space-between; font-size:11.5px }
.proj-row span:first-child{ color:var(--dim) }
.proj-row b{ font-variant-numeric:tabular-nums }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px }
.kpi{ border:1px solid var(--border); border-radius:5px; background:var(--s1); padding:10px 12px }
.kpi .k{ font-size:9.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim); font-weight:700 }
.kpi .v{ font-size:23px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.25 }
.kpi .s{ font-size:10.5px; color:var(--faint) }
.kpi.ok .v{ color:var(--green) }
.kpi.bad .v{ color:var(--red) }

.sect{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border) }
.sect:first-child{ margin-top:0 }

@media (max-width:768px){
  .cg-band .cg-org{ display:none }
  .cg-topnav{ overflow-x:auto }
  #app{ height:auto !important }
}

/* QA environment marker.
   The consoles are visually identical apart from the data behind them, so the
   environment has to be impossible to miss - set by shared.js from the
   hostname. */
html[data-env="qa"] body::before {
  content: "QA ENVIRONMENT - NOT PRODUCTION DATA";
  display: block;
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #B8860B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  padding: 5px 8px;
}

/* ── Analytics tab strip ─────────────────────────────────────────────────
   One section, five pages. Sits directly under the page title so it reads as
   part of the heading rather than as content. */
.atabs {
  display: flex; gap: 2px; margin: 0 0 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.atab {
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--dim);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atab:hover { color: var(--text); text-decoration: none; }
.atab.on { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Top band ─────────────────────────────────────────────────────────────
   Identity and the way out, nothing else. The section links that used to live
   here were a third route to navigation the home wall and the rail both
   already provide. */
.cg-out { display:inline-flex; align-items:center; gap:7px; }
.cg-out svg { width:15px; height:15px; }
.cg-home { display:inline-block; width:0; }


/* Brand marks on the wall. The line icons are inline <svg> stroked in
   currentColor; a logo is an <img>, so it keeps its own colours and none of
   that applies to it. Sized here because `.tile svg` cannot reach it. */
.tile img.brand { width: 30px; height: 30px; display: block; flex: none; }

/* App-icon marks that are square artwork rather than a transparent glyph. The
   Microsoft SVGs beside them are shaped logos on nothing, so they need no
   corner; a square favicon does, or it reads as a sticker on the tile. */
.tile img.brand-rounded { border-radius: 7px; }