/* =========================================================================
   BIFRATECH — Master Control page (admin.html). Colours come from style.css.
   ========================================================================= */
body.admin-page{ min-height:100vh; display:block; overflow-y:auto; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.admin-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:12px 16px; background:rgba(4,14,34,.88);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.admin-title{ display:flex; flex-direction:column; line-height:1.25; }
.admin-title strong{ color:#fff; font-size:18px; }
.admin-title span{ color:var(--muted); font-size:13px; }
.admin-top-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.admin-who{ color:var(--muted); font-size:14px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-top-actions[hidden]{ display:none; }

.admin-main{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:24px 16px 80px; }

.admin-login{
  max-width:460px; margin:6vh auto 0; padding:28px; border-radius:22px;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--panel2),var(--panel3));
  box-shadow:var(--shadow);
}
.admin-login h1{ margin:0 0 8px; font-size:28px; }
.admin-login .field{ margin-bottom:14px; }
.admin-login .primary-button{ width:100%; min-height:54px; margin-top:8px; }
.admin-login .turnstile-slot{ margin:6px 0; min-height:0; }

.admin-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.tile{
  text-align:left; padding:16px 18px; border-radius:18px; border:1px solid var(--line); cursor:pointer;
  color:var(--text); background:linear-gradient(180deg,var(--panel2),var(--panel3)); font:inherit;
}
.tile:hover, .tile:focus-visible{ border-color:var(--cyan); }
.tile .n{ display:block; font-size:32px; font-weight:900; color:#fff; line-height:1.1; }
.tile .l{ display:block; margin-top:4px; color:var(--muted); font-size:13px; font-weight:800; }
.tile .attn{ display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:900;
  background:rgba(255,157,24,.22); border:1px solid rgba(255,157,24,.6); color:#FFD9A0; }

.admin-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.admin-tabs button{
  min-height:46px; padding:10px 20px; border-radius:999px; font-weight:900; cursor:pointer;
  color:var(--muted); background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.admin-tabs button[aria-selected="true"]{
  color:#fff; background:linear-gradient(135deg,var(--cyan),var(--blue2)); box-shadow:0 8px 24px rgba(0,190,255,.28);
}

.admin-search{ display:flex; gap:10px; margin-bottom:8px; }
.admin-search input{
  flex:1; min-width:0; border:1px solid rgba(89,190,255,.28); border-radius:15px; padding:14px 16px;
  color:#fff; background:#092653; outline:none;
}
.admin-search input:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(18,216,245,.10); }
.admin-count{ color:var(--muted); font-size:14px; margin:6px 2px 14px; }

.rec .rec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px; margin-top:12px; }
.rec .kv{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rec .kv .k{ color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.3px; }
.rec .kv .v{ overflow-wrap:anywhere; }
.rec .kv.wide{ grid-column:1/-1; }
.rec .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.rec .actions input[type="text"], .rec .actions select{
  flex:1 1 180px; min-width:0; min-height:44px; border-radius:12px; padding:10px 12px;
  color:#fff; background:#092653; border:1px solid rgba(89,190,255,.28);
}
.rec .actions select option{ background:#111827; color:#fff; }
.btn{
  min-height:44px; padding:10px 18px; border-radius:12px; font-weight:900; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid var(--line);
}
.btn:disabled{ opacity:.55; cursor:wait; }
.btn--yes{ background:linear-gradient(135deg,#1fbf75,#0f8f58); border-color:rgba(53,213,138,.6); }
.btn--no{ background:rgba(255,100,100,.18); border-color:rgba(255,100,100,.55); }
.btn--link{ background:rgba(18,216,245,.12); }
.code-link{
  border:0; background:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  font:inherit;
}
.who-line{ color:var(--muted); font-size:13px; }

@media(max-width:820px){
  .admin-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  .admin-who{ display:none; }
  .rec .rec-grid{ grid-template-columns:1fr; }
  .admin-login{ padding:20px; }
  .admin-search{ flex-wrap:wrap; }
  .admin-search .dash-refresh{ width:100%; }
}

/* ---- platform screens: team, switches, identity, jobs, health ---- */
.perm-list{ display:grid; gap:6px; margin-top:12px; }
.perm-row{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); cursor:pointer; }
.perm-row input{ width:24px; height:24px; flex:none; margin-top:2px; accent-color:var(--cyan); }
.perm-row strong{ display:block; color:#fff; }
.perm-row small{ display:block; color:var(--muted); margin-top:2px; line-height:1.4; }
.switch-row{ margin-top:10px; }
.id-pair{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
.id-pair:empty{ display:none; }
.id-fig{ margin:0; }
.id-fig img{ width:100%; max-height:420px; object-fit:contain; border-radius:12px; background:#041022; border:1px solid var(--line); }
.id-fig figcaption{ color:var(--muted); font-size:13px; margin-top:4px; }
.match-box{ display:flex; gap:10px; flex-wrap:wrap; width:100%; align-items:center; }
.match-box select{ flex:1 1 220px; min-width:0; min-height:44px; border-radius:12px; padding:10px 12px; color:#fff; background:#092653; border:1px solid rgba(89,190,255,.28); }
.fault-out{ margin-top:10px; line-height:1.55; }
.fault-out ol{ padding-left:22px; }
.err-line{ padding:8px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.dash-help{ color:var(--muted); line-height:1.5; }
@media(max-width:560px){ .id-pair{ grid-template-columns:1fr; } }

/* ---- System map (Health tab) ---- */
.sysmap .sys-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:6px 0; }
.sys-node{ border:1px solid rgba(95,190,255,.28); border-radius:14px; padding:10px 12px; background:rgba(6,22,51,.55); display:flex; flex-direction:column; gap:3px; }
.sys-node[data-state="bad"]{ border-color:#FF6464; box-shadow:0 0 0 1px #FF6464 inset; }
.sys-top{ display:flex; align-items:center; gap:8px; }
.sys-state{ font-weight:700; font-size:14px; }
.sys-node small{ color:#B9CAE0; font-size:12px; line-height:1.35; }
.sys-node small.sys-fix{ color:#FFC56B; }
.sys-dot{ width:14px; height:14px; border-radius:50%; flex:none; background:#7C8BA3; }
.sys-dot.ok{ background:#35D58A; box-shadow:0 0 8px #35D58A; }
.sys-dot.bad{ background:#FF6464; box-shadow:0 0 8px #FF6464; }
.sys-dot.warn{ background:#FF9D18; }
.sys-dot.off{ background:#7C8BA3; }
.sys-dot.checking{ background:#12D8F5; opacity:.5; }
.sys-arrow{ text-align:center; color:#12D8F5; font-size:14px; line-height:1; margin:2px 0; }

a#openWebsite{ text-decoration:none; display:inline-flex; align-items:center; }

/* ---- Payments + Legal tabs ---- */
.pay-form .pay-field{ display:flex; flex-direction:column; gap:4px; margin:0 0 10px; }
.pay-form .pay-field span{ font-size:13px; color:#B9CAE0; font-weight:700; }
.pay-form input, .pay-form select, .pay-form textarea, .rec input, textarea.legal-edit{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(95,190,255,.3); background:rgba(6,22,51,.7); color:#EAF4FF; font:inherit; }
textarea.legal-edit{ margin-top:8px; min-height:180px; resize:vertical; }
.rec details{ margin-top:8px; color:#B9CAE0; }

/* ---- Messages tab ---- */
.chat-summary{ margin:6px 0; padding:8px 10px; border-radius:10px; background:rgba(255,197,107,.12); color:#FFE0AE; font-size:14px; }
.chat-thread{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.chat-line{ padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.05); }
.chat-line p{ margin:2px 0 0; white-space:pre-line; overflow-wrap:anywhere; }
.chat-line--customer{ border-left:3px solid #12D8F5; }
.chat-line--ai{ border-left:3px solid #FFC56B; }
.chat-line--staff{ border-left:3px solid #35D58A; }
textarea.chat-reply{ min-height:64px; }
.day-row{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.day-pick{ display:inline-flex; gap:4px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(95,190,255,.3); }
.err-text{ color:#FF9A9A; }
.ai-settings summary{ cursor:pointer; font-weight:800; }