/* Accounts, Super admin, the View as dropdown and the banner (job super-admin). */

.admin-nav{display:flex; flex-direction:column; gap:1px; padding:10px 10px 2px; border-top:1px solid var(--hair); margin-top:8px}
.admin-nav[hidden]{display:none}
.navitem[hidden]{display:none}
.view-as{display:flex; flex-direction:column; gap:4px; padding:0 10px 8px}
.view-as[hidden]{display:none}
.view-as label{font-size:11px; font-weight:600; color:var(--muted)}
.view-as select{font:inherit; font-size:12.5px; width:100%; padding:6px 26px 6px 8px; color:var(--ink); background-color:var(--surface);
  border:1px solid var(--hair-strong); border-radius:var(--radius-s); appearance:none; -webkit-appearance:none;
  background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 7px center; background-size:14px}
.view-as select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
body.no-cases .admin-nav{border-top:0; margin-top:0}

/* Stays on screen with the title strip, on every page. */
.view-banner{flex:0 0 100%; order:-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 12px; margin-bottom:8px; border-radius:var(--radius-s);
  background:var(--warning); color:var(--surface); font-size:13px; font-weight:600; line-height:1.4}
.view-banner[hidden]{display:none}
.view-banner-stop{margin-left:auto; font:inherit; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:var(--radius-s); cursor:pointer;
  background:var(--surface); color:var(--ink); border:0}
.view-banner-stop[hidden]{display:none}
.view-banner-stop:focus-visible{outline:2px solid var(--surface); outline-offset:2px}

/* Hide what the account can't do. The server refuses it either way. */
body.without-edit_events .tl-events [data-role="add"],
body.without-export_timeline #timelineExportButton,
body.without-find_inconsistencies #btnFindInconsistencies,
body.without-edit_hearings .hh-remove,
body.without-edit_hearings #addHearingButton,
body.without-edit_hearings #hearingAddForm{display:none !important}

.btn.danger{color:var(--critical)}
.btn.danger:hover{color:var(--critical); border-color:var(--critical)}

.status-chip{display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:600;
  background:var(--surface-2); color:var(--muted)}
.status-chip[data-status="active"]{background:var(--good-bg); color:var(--good)}
.status-chip[data-status="invited"]{background:var(--warning-bg); color:var(--warning)}
.status-chip[data-status="suspended"], .status-chip[data-status="disabled"]{background:var(--critical-bg); color:var(--critical)}

.mail-alert{display:flex; flex-direction:column; gap:4px; margin-bottom:14px; padding:12px 16px; border-radius:var(--radius-m); font-size:13px; line-height:1.5;
  background:var(--critical-bg); color:var(--critical); border:1px solid var(--critical)}
.mail-alert b{font-weight:600}
.mail-alert span{color:var(--ink)}
.mail-alert .mail-alert-detail{font-family:var(--font-mono); font-size:12px; overflow-wrap:anywhere}

.org-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap:14px; align-items:start}
.org-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column; gap:12px}
.org-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.org-head h2{font-family:var(--font-title); font-weight:600; font-size:17px; letter-spacing:-.015em; color:var(--ink); margin-right:auto; overflow-wrap:anywhere}
.org-facts{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:5px 14px; font-size:13px; margin:0}
.org-facts dt{color:var(--muted)}
.org-facts dd{margin:0; color:var(--ink); overflow-wrap:anywhere}
.org-facts a{color:var(--accent)}
.org-facts .mono{font-family:var(--font-mono); font-size:12px}
.address-note{display:block; font-size:12px; color:var(--warning)}
.org-actions{display:flex; gap:8px; flex-wrap:wrap}

.admin-section{margin-top:28px}
.activity-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.activity-head h2{font-family:var(--font-title); font-weight:600; font-size:15.5px; letter-spacing:-.01em; color:var(--ink)}
.activity-head .check-row{grid-template-columns:18px auto; font-size:12.5px; color:var(--muted)}
.admin-empty{font-size:13px; color:var(--muted)}
.admin-lead{font-size:13.5px; line-height:1.55; color:var(--muted); max-width:72ch; margin-bottom:14px}
.activity-scroll{overflow-x:auto; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-l)}
.activity-table{width:100%; border-collapse:collapse; font-size:12.5px}
.activity-table th{ text-align:left; font-weight:600; color:var(--muted); padding:9px 14px; border-bottom:1px solid var(--hair); white-space:nowrap}
.activity-table td{padding:8px 14px; border-bottom:1px solid var(--hair); color:var(--ink); vertical-align:top}
.activity-table tr:last-child td{border-bottom:0}
.activity-table .mono{font-family:var(--font-mono); font-size:11.5px; white-space:nowrap}
.activity-detail{overflow-wrap:anywhere; min-width:160px}

.account-tree{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:1100px}
.account-row{margin-left:calc(var(--depth) * 26px); background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-m); box-shadow:var(--shadow);
  padding:12px 14px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; position:relative}
.account-main{flex:1 1 260px; min-width:0}
.account-name{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14px; color:var(--ink)}
.account-name b{font-weight:600; overflow-wrap:anywhere}
.account-meta{font-size:12.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere}
.account-actions{display:flex; gap:6px; flex-wrap:wrap}
.account-actions .btn{height:30px; padding:0 10px; font-size:12.5px}

dialog.admin-dialog{border:0; border-radius:var(--radius-l); padding:0; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
  width:min(460px, 92vw); max-height:88vh; margin:auto}
dialog.admin-dialog.is-wide{width:min(640px, 92vw)}
dialog.admin-dialog::backdrop{background:rgba(10,14,18,.5); backdrop-filter:blur(2px)}
dialog.admin-dialog form{display:flex; flex-direction:column; gap:14px; padding:20px 24px 22px}
dialog.admin-dialog form > .dlg-head{margin:-20px -24px 2px; padding:16px 24px; position:sticky; top:-1px; background:var(--surface); z-index:1}
.dlg-note{font-size:13px; line-height:1.5; color:var(--muted)}
.dlg-note b{color:var(--ink); font-weight:600}
.dlg-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 16px}
.dlg-grid[hidden]{display:none}
dialog.admin-dialog:not(.is-wide) .dlg-grid{grid-template-columns:minmax(0, 1fr)}
.dlg-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:4px}
.dlg-actions .btn{height:36px}
.admin-dialog .login-error{margin:0}
.permission-group{border:1px solid var(--hair); border-radius:var(--radius-m); padding:10px 12px 12px; margin:0; display:flex; flex-direction:column; gap:8px; min-width:0}
.permission-group legend{font-size:12px; font-weight:600; color:var(--muted); padding:0 5px}
.check-row{display:grid; grid-template-columns:18px minmax(0, 1fr); gap:9px; align-items:start; font-size:13px; cursor:pointer}
.check-row input{width:15px; height:15px; margin:2px 0 0; accent-color:var(--accent)}
.check-row b{display:block; font-weight:500; color:var(--ink)}
.check-row small{display:block; font-size:12px; color:var(--muted); line-height:1.4}
.check-row.is-off{cursor:default; opacity:.6}
.case-checks{display:flex; flex-direction:column; gap:8px}
.case-checks[hidden]{display:none}

.code-input{font-family:var(--font-mono); font-size:20px !important; letter-spacing:.2em; text-align:center}
.invite-gone{display:flex; flex-direction:column; gap:14px; padding:12px 24px 24px; align-items:flex-start}
.invite-gone[hidden]{display:none}
.invite-loading{padding:12px 24px 24px}
.invite-loading[hidden]{display:none}

@media (max-width:640px){
  .account-row{margin-left:calc(var(--depth) * 12px)}
  .dlg-grid{grid-template-columns:minmax(0, 1fr)}
  .org-facts{grid-template-columns:minmax(0, 1fr); gap:0}
  .org-facts dd{margin-bottom:6px}
}