/* ══════════════════════════════════════════════════════════════════════════
   SS User Directory Access — MMC console skin
   ──────────────────────────────────────────────────────────────────────────
   Modelled on Active Directory Users and Computers. Deliberately not sharing
   anything with the platform dashboards: this console shows identity only, and
   looking materially different from the Circl admin tooling is part of how an
   operator knows which surface they are on and what it is allowed to tell them.
   ══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",Tahoma,"Helvetica Neue",Arial,sans-serif;
  font-size:12px;
  color:#000;
  background:#F0F0F0;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── Pre-authorisation blackout ────────────────────────────────────────── */
/*
   The console is hidden until authorisation succeeds, and hidden by a
   stylesheet rather than by script.

   Previously the markup rendered immediately and the guard ran afterwards, so
   an unauthorised visitor saw the full directory chrome for as long as the
   Firestore round trip took. Nothing was populated, but the shape of the tool —
   and the fact that it exists — was on screen. Doing this in CSS means it is
   true from first paint, with no window where a slow script leaves it visible.
*/
body > .appbar,
body > .panes,
body > .statusbar { display: none }
body.authed > .appbar    { display: flex }
body.authed > .panes     { display: flex }
body.authed > .statusbar { display: flex }

#boot{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#F0F0F0; color:#6A6A6A; font-size:12px; z-index:500;
}
body.authed #boot{ display:none }

/* ── App bar ───────────────────────────────────────────────────────────── */
/* The directory-console layout is kept — a tree of organisational units beside
   a list of objects is genuinely the clearest way to navigate accounts by
   project. The Windows furniture is not: File/Action/View menus and
   right-click-to-act are muscle memory from one specific program, not good
   interaction design, and they hide every action behind a gesture nobody
   discovers. Selecting a row opens a detail panel instead, where what you can
   do to an account is visible and labelled. */
.appbar{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(#FCFCFC,#F1F1F1); border-bottom:1px solid #C6C6C6;
  padding:0 12px; height:42px; flex:0 0 42px;
}
.appbar .title{ font-size:13px; font-weight:600; letter-spacing:-.01em }
.appbar .dom{ font-size:11.5px; color:#666 }
.appbar .sp{ flex:1 }
.appbar input{
  height:25px; padding:0 9px; font-family:inherit; font-size:12px;
  border:1px solid #A8A8A8; border-radius:2px; width:238px; background:#fff;
}
.appbar input:focus{ outline:1px solid #3399FF; outline-offset:-2px }
.lnk{
  font-size:11.5px; color:#1E5AA8; cursor:pointer; background:none; border:none;
  font-family:inherit; padding:4px 6px; border-radius:2px;
}
.lnk:hover{ background:#E3EFFA; text-decoration:underline }

/* ── Split panes ───────────────────────────────────────────────────────── */
.panes{ display:flex; flex:1; min-height:0; background:#F0F0F0; padding:2px; gap:2px }
.pane{ background:#fff; border:1px solid #A0A0A0; display:flex; flex-direction:column; min-height:0 }
.pane-tree{ flex:0 0 288px; overflow:auto }
.pane-list{ flex:1; min-width:0 }

/* ── Tree ──────────────────────────────────────────────────────────────── */
.tree{ padding:3px 0; user-select:none; font-size:12px }
.tnode{ display:flex; align-items:center; gap:3px; padding:1px 6px 1px 0; cursor:default; white-space:nowrap }
.tnode:hover .tlabel{ background:#E5F3FF; outline:1px solid #CCE8FF }
.tnode.sel .tlabel{ background:#CCE8FF; outline:1px solid #99D1FF }
.tnode.sel:focus-within .tlabel{ background:#3399FF; color:#fff }
.twist{
  width:14px; height:14px; flex:0 0 14px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#5A5A5A;
}
.twist svg{ width:9px; height:9px; transition:transform .1s }
.twist.open svg{ transform:rotate(90deg) }
.twist.leaf{ visibility:hidden }
.ticon{ width:16px; height:16px; flex:0 0 16px; display:flex; align-items:center; justify-content:center }
.tlabel{ padding:1px 4px; border-radius:1px }

/* ── List ──────────────────────────────────────────────────────────────── */
.list-head{
  background:#F0F0F0; border-bottom:1px solid #C6C6C6;
  padding:4px 9px; font-size:12px; display:flex; gap:10px; align-items:baseline;
  flex:0 0 auto;
}
.list-head b{ font-weight:600 }
.list-head span{ color:#555 }
.cols{ display:flex; background:#F5F5F5; border-bottom:1px solid #D4D4D4; flex:0 0 auto }
.col{
  padding:4px 8px; font-size:12px; font-weight:400;
  border-right:1px solid #D4D4D4; cursor:pointer; display:flex; align-items:center; gap:5px;
  user-select:none;
}
.col:hover{ background:#E9F3FB }
.col .sort{ font-size:8px; color:#555 }
.col-name{ flex:1; min-width:150px }
.col-type{ flex:0 0 118px }
.col-email{ flex:1.5; min-width:170px }
.col-status{ flex:0 0 96px }
.rows{ flex:1; overflow:auto; min-height:0 }
.row{ display:flex; align-items:center; cursor:default; border:1px solid transparent }
.row:hover{ background:#E5F3FF }
.row.sel{ background:#CCE8FF; border-color:#99D1FF }
.row .cell{ padding:3px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.row .cell.col-name{ display:flex; align-items:center; gap:6px }
.row .uicon{ width:16px; height:16px; flex:0 0 16px }
.dim{ color:#6A6A6A }
.empty{ padding:22px; color:#6A6A6A; text-align:center }

/* ── Status bar ────────────────────────────────────────────────────────── */
.statusbar{
  height:22px; flex:0 0 22px; background:#F0F0F0; border-top:1px solid #DFDFDF;
  display:flex; align-items:center; padding:0 9px; gap:14px; font-size:11.5px; color:#444;
}

/* ── Detail panel ──────────────────────────────────────────────────────── */
.pane-detail{ flex:0 0 352px; overflow:auto; display:none }
.pane-detail.open{ display:flex; flex-direction:column }
.dt-head{
  background:linear-gradient(#FBFCFD,#EEF3F8); border-bottom:1px solid #D4DEE8;
  padding:12px 14px; display:flex; align-items:flex-start; gap:10px; flex:0 0 auto;
}
.dt-head .av{ width:32px; height:32px; flex:0 0 32px }
.dt-head .nm{ font-size:14px; font-weight:600; line-height:1.25; word-break:break-word }
.dt-head .sub{ font-size:11.5px; color:#5A5A5A; margin-top:1px; word-break:break-all }
.dt-head .cl{
  margin-left:auto; cursor:pointer; color:#666; font-size:16px; line-height:1;
  padding:1px 5px; border-radius:2px; background:none; border:none;
}
.dt-head .cl:hover{ background:#E81123; color:#fff }
.dt-body{ padding:13px 14px; overflow:auto; flex:1; min-height:0 }
.dt-sect{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#6A6A6A; margin:16px 0 8px; padding-bottom:4px; border-bottom:1px solid #E2E2E2;
}
.dt-sect:first-child{ margin-top:0 }
.dt-f{ margin-bottom:10px }
.dt-f label{ display:block; font-size:11px; color:#555; margin-bottom:3px }
.dt-f input{
  width:100%; padding:4px 7px; font-family:inherit; font-size:12px;
  border:1px solid #A8A8A8; border-radius:2px; background:#fff;
}
.dt-f input:focus{ outline:1px solid #3399FF; outline-offset:-2px }
.dt-f input:disabled{ background:#F2F2F2; color:#666 }
.dt-f .hint{ font-size:10.5px; color:#777; margin-top:3px; line-height:1.4 }
.dt-ro{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:11.5px; border-bottom:1px solid #F0F0F0 }
.dt-ro span{ color:#666; flex:0 0 auto }
.dt-ro b{ font-weight:400; text-align:right; word-break:break-all }
.dt-acts{ display:flex; flex-direction:column; gap:7px }
.abtn{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; font-family:inherit; font-size:12px; cursor:pointer;
  border:1px solid #BCBCBC; border-radius:3px; background:linear-gradient(#FDFDFD,#F2F2F2);
}
.abtn:hover:not(:disabled){ background:linear-gradient(#F6FBFF,#E4F0FA); border-color:#7FB0DE }
.abtn:disabled{ opacity:.5; cursor:default }
.abtn svg{ width:14px; height:14px; flex:0 0 14px; color:#3B5C7E }
.abtn.danger{ color:#A3261E }
.abtn.danger svg{ color:#A3261E }
.abtn.danger:hover:not(:disabled){ background:#FDF0EF; border-color:#D9A29D }
.badge{
  display:inline-block; padding:1px 7px; border-radius:9px; font-size:10.5px;
  border:1px solid; margin-top:4px;
}
.badge.on{ background:#EAF6EC; border-color:#A8D4AE; color:#1B6B25 }
.badge.off{ background:#FBEDEC; border-color:#E0AFAA; color:#A3261E }
.badge.pend{ background:#FFF8E1; border-color:#E4CE8A; color:#7A5E10 }
.dt-msg{ font-size:11.5px; min-height:15px; margin-top:8px }
.dt-msg.err{ color:#B3261E }
.dt-msg.ok{ color:#136B18 }
/* ── Account log ───────────────────────────────────────────────────────── */
.log-row{
  display:flex; gap:9px; padding:6px 0; border-bottom:1px solid #F0F0F0;
  font-size:11.5px; align-items:baseline;
}
.log-row:last-child{ border-bottom:none }
.log-when{ flex:0 0 96px; color:#7A7A7A; font-variant-numeric:tabular-nums }
.log-what{ flex:1; color:#1A1A1A; min-width:0 }
.log-who{ flex:0 0 auto; color:#7A7A7A; max-width:128px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.log-empty{ padding:9px 0; color:#7A7A7A; font-size:11.5px }
.log-more{
  margin-top:7px; font-size:11px; color:#1E5AA8; cursor:pointer;
  background:none; border:none; padding:3px 0; font-family:inherit;
}
.log-more:hover{ text-decoration:underline }

.placeholder{
  display:flex; align-items:center; justify-content:center; height:100%;
  color:#8A8A8A; font-size:12px; padding:22px; text-align:center;
}

/* ── Dialog (Windows property sheet) ───────────────────────────────────── */
.mask{
  position:fixed; inset:0; background:rgba(0,0,0,.16); z-index:950;
  display:none; align-items:center; justify-content:center;
}
.mask.open{ display:flex }
.dlg{
  width:394px; max-width:94vw; background:#F0F0F0;
  border:1px solid #6A6A6A; box-shadow:0 5px 22px rgba(0,0,0,.34);
}
.dlg-title{
  background:linear-gradient(#FDFDFD,#EDEDED); border-bottom:1px solid #CFCFCF;
  padding:7px 10px; font-size:12px; font-weight:600; display:flex; align-items:center;
}
.dlg-title .x{ margin-left:auto; cursor:pointer; color:#555; padding:0 4px; font-size:14px; line-height:1 }
.dlg-title .x:hover{ background:#E81123; color:#fff }
.tabs{ display:flex; gap:2px; padding:7px 9px 0; background:#F0F0F0 }
.tab{
  padding:4px 13px; border:1px solid #A0A0A0; border-bottom:none;
  background:#E4E4E4; font-size:12px; cursor:pointer; border-radius:3px 3px 0 0;
}
.tab.on{ background:#fff; position:relative; top:1px; padding-bottom:5px }
.dlg-body{ background:#fff; border:1px solid #A0A0A0; margin:0 9px; padding:13px }
.fld{ display:flex; align-items:center; gap:9px; margin-bottom:9px }
.fld label{ flex:0 0 108px; text-align:right; color:#222 }
.fld input{
  flex:1; padding:3px 5px; font-family:inherit; font-size:12px;
  border:1px solid #7A7A7A; background:#fff;
}
.fld input:focus{ outline:1px solid #3399FF; outline-offset:-2px }
.fld input:disabled{ background:#F0F0F0; color:#666 }
.fld .ro{ flex:1; color:#444; padding:3px 0 }
.dlg-foot{ padding:11px 9px; display:flex; gap:7px; justify-content:flex-end }
.btn{
  min-width:76px; padding:4px 13px; font-family:inherit; font-size:12px;
  border:1px solid #A0A0A0; background:linear-gradient(#FDFDFD,#EFEFEF); cursor:pointer;
}
.btn:hover:not(:disabled){ background:linear-gradient(#F4FAFE,#DCEDF9); border-color:#6EA8DC }
.btn:disabled{ opacity:.5; cursor:default }
.btn.pri{ border-color:#5A8DC0 }
.dlg-msg{ padding:0 9px 9px; font-size:11.5px; min-height:16px }
.dlg-msg.err{ color:#B3261E }
.dlg-msg.ok{ color:#136B18 }
.warnbox{
  background:#FFFCE6; border:1px solid #E4D08A; padding:7px 9px;
  font-size:11.5px; margin-bottom:11px; color:#5A4A11;
}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-page{
  height:100%; display:flex; align-items:center; justify-content:center;
  background:#1F3B57; overflow:auto;
}
.login-box{ width:344px; max-width:94vw; background:#F0F0F0; border:1px solid #6A6A6A; box-shadow:0 7px 26px rgba(0,0,0,.42) }
.login-box .dlg-body{ margin:9px; padding:16px }
.login-box .fld label{ flex:0 0 74px }
.brand{ text-align:center; margin-bottom:15px }
.brand .t{ font-size:15px; font-weight:600 }
.brand .s{ font-size:11.5px; color:#555; margin-top:2px }

@media (max-width:760px){
  .pane-tree{ flex:0 0 172px }
  .col-email,.col-type{ display:none }
}