/* sa_ui.css — Super Admin (Platform Console): premium dark + light theme.
   Scoped to #saApp only, so the tenant / industry screens are never affected.
   Theme is chosen by  #saApp[data-sa-theme="dark|light"]  (set by sa_theme.js,
   remembered in localStorage "sa_theme"). Without JS the console stays dark.
   Rollback: remove the <link> to this file and the sa_theme.js <script> in index.php. */

/* =====================================================================
   1. THEME TOKENS
   ===================================================================== */
#saApp{
  /* The console now wears the tenant app's theme: every colour below points at the
     tenant tokens, so it follows <html data-theme="light|dark"> exactly like a
     tenant dashboard does. */
  --sa-bg:var(--paper);
  --sa-glow-a:transparent;
  --sa-glow-b:transparent;
  --sa-header:var(--surface);
  --sa-surface:var(--surface);
  --sa-surface-2:var(--surface-2);
  --sa-surface-3:var(--surface-2);
  --sa-line:var(--line);
  --sa-line-2:var(--line);
  --sa-text:var(--text);
  --sa-text-2:var(--text-dim);
  --sa-text-3:var(--text-faint);
  --sa-accent:var(--teal);
  --sa-accent-strong:var(--teal-dark);
  --sa-accent-2:var(--blue);
  --sa-accent-text:var(--teal);
  --sa-accent-soft:var(--teal-tint);
  --sa-ok:var(--green);   --sa-ok-bg:var(--green-tint);  --sa-ok-line:var(--green-tint);
  --sa-bad:var(--red);    --sa-bad-bg:var(--red-tint);   --sa-bad-line:var(--red-tint);
  --sa-warn:var(--marigold); --sa-warn-bg:var(--marigold-tint);
  --sa-info:var(--blue);  --sa-info-bg:var(--blue-tint);
  --sa-solid-danger:var(--red);
  --sa-shadow:var(--shadow-1);
  --sa-shadow-pop:var(--shadow-2);
  --sa-btn-shadow:none;
  --sa-focus:var(--teal-tint);
  --sa-scrim:rgba(0,0,0,.45);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
#saApp{
  min-height:100vh; color:var(--sa-text);
  font-family:var(--font-body); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background:var(--paper);
}
#saApp h2, #saApp h3, #saApp h4{font-family:inherit; letter-spacing:-.005em;}
#saApp ::selection{background:var(--sa-accent); color:#fff;}
#saApp :focus-visible{outline:2px solid var(--sa-accent); outline-offset:2px;}
#saApp a{color:inherit;}
#saApp code{
  font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  background:var(--sa-surface-2); color:var(--sa-accent-text);
  border:1px solid var(--sa-line); border-radius:7px; padding:2px 7px; font-size:12px;
}
#saApp .sa-muted{color:var(--sa-text-3); font-style:italic;}
#saApp .sa-hint{font-weight:400; color:var(--sa-text-3);}
#saApp .sa-note{margin-top:6px; font-size:11.5px; color:var(--sa-text-3); line-height:1.55;}
#saApp .sa-note b{color:var(--sa-text-2);}
#saApp .sa-empty{text-align:center; color:var(--sa-text-3); padding:28px 0;}

/* Smooth cross-fade only while the theme is being switched */
#saApp.sa-theming, #saApp.sa-theming *{
  transition:background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
@media (prefers-reduced-motion:reduce){
  #saApp.sa-theming, #saApp.sa-theming *{transition:none !important;}
}

/* =====================================================================
   3. HEADER + NAV
   ===================================================================== */
#saApp .sa-header{
  position:sticky; top:0; z-index:60; gap:20px; padding:12px 28px;
  background:var(--sa-header); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--sa-line);
}
#saApp .sa-brand-mark{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(140deg,var(--sa-accent),var(--sa-accent-2));
  box-shadow:0 6px 18px rgba(12,155,167,.32);
}
#saApp .sa-brand-name{font-size:15.5px; font-weight:700; color:var(--sa-text); letter-spacing:.1px;}
#saApp .sa-brand-sub{font-size:9.5px; letter-spacing:.14em; color:var(--sa-text-3); font-weight:600;}

.sa-nav{
  display:flex; gap:4px; margin:0 auto; padding:4px;
  background:var(--sa-surface-2); border:1px solid var(--sa-line); border-radius:12px;
}
.sa-nav a{
  padding:7px 14px; border-radius:9px; font-size:12.5px; font-weight:600;
  color:var(--sa-text-2); text-decoration:none; white-space:nowrap; transition:background .15s,color .15s;
}
.sa-nav a:hover{background:var(--sa-surface-3); color:var(--sa-text);}

#saApp .sa-user{gap:10px;}
#saApp .sa-user-name{font-size:12.5px; font-weight:600; color:var(--sa-text-2);}
#saApp .sa-logout{
  padding:8px 15px; border-radius:10px; border:1px solid var(--sa-line-2);
  background:var(--sa-surface); color:var(--sa-text); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s,border-color .15s;
}
#saApp .sa-logout:hover{background:var(--sa-surface-3); border-color:var(--sa-accent);}

/* Theme toggle (sun / moon) */
#saApp .sa-theme-toggle{
  position:relative; width:38px; height:38px; flex:0 0 38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--sa-line-2); background:var(--sa-surface); color:var(--sa-text-2);
  cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
#saApp .sa-theme-toggle:hover{background:var(--sa-surface-3); border-color:var(--sa-accent); color:var(--sa-accent-text);}
#saApp .sa-theme-toggle svg{width:18px; height:18px; display:block;}
#saApp .sa-theme-toggle .sa-ic-moon{display:none;}
#saApp[data-sa-theme="light"] .sa-theme-toggle .sa-ic-sun{display:none;}
#saApp[data-sa-theme="light"] .sa-theme-toggle .sa-ic-moon{display:block;}

/* =====================================================================
   4. LAYOUT, CARDS, KPI
   ===================================================================== */
#saApp .sa-main{max-width:1320px; padding:26px 28px 80px; gap:20px; grid-template-columns:minmax(0,1fr);}
#saApp .sa-main > *{min-width:0;}
#saApp .sa-card{
  background:var(--sa-surface); border:1px solid var(--sa-line); border-radius:var(--radius-l);
  padding:18px 20px; box-shadow:var(--sa-shadow);
}
#saApp .sa-card-head h2{margin:0 0 4px; font-size:15.5px; font-weight:700; color:var(--sa-text); letter-spacing:.005em;}
#saApp .sa-card-head p{margin:0 0 18px; font-size:12.8px; line-height:1.6; max-width:860px; color:var(--sa-text-2);}
#saApp .sa-card-head p b{color:var(--sa-text);}
#saApp .sa-card[id]{scroll-margin-top:84px;}

.sa-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
.sa-kpi{
  position:relative; display:flex; flex-direction:column; gap:3px; padding:18px 20px; border-radius:16px; overflow:hidden;
  background:var(--sa-surface); border:1px solid var(--sa-line); box-shadow:var(--sa-shadow);
}
.sa-kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--sa-accent),var(--sa-accent-2));}
.sa-kpi-l{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sa-text-3);}
.sa-kpi-n{font-size:29px; font-weight:700; line-height:1.15; color:var(--sa-text); letter-spacing:-.015em;}
.sa-kpi-n small{font-size:15px; font-weight:600; color:var(--sa-text-3);}
.sa-kpi-s{font-size:11.5px; color:var(--sa-text-2);}

/* Collapsible cards */
.sa-fold > .sa-card-head{position:relative; cursor:pointer; padding-right:36px; user-select:none;}
.sa-fold > .sa-card-head::after{
  content:""; position:absolute; right:4px; top:7px; width:9px; height:9px;
  border-right:2px solid var(--sa-text-3); border-bottom:2px solid var(--sa-text-3);
  transform:rotate(45deg); transition:transform .18s, border-color .15s;
}
.sa-fold.closed > .sa-card-head::after{transform:rotate(-45deg);}
.sa-fold > .sa-card-head:hover h2{color:var(--sa-accent-text);}
.sa-fold > .sa-card-head:hover::after{border-color:var(--sa-accent);}
.sa-fold > .sa-card-head:focus-visible{outline:2px solid var(--sa-accent); outline-offset:6px; border-radius:8px;}
.sa-fold.closed{padding-top:20px; padding-bottom:20px;}
.sa-fold.closed > :not(.sa-card-head){display:none !important;}
.sa-fold.closed .sa-card-head p{display:none;}
.sa-fold.closed .sa-card-head h2{margin:0;}

/* =====================================================================
   5. FORMS + BUTTONS
   ===================================================================== */
#saApp .sa-field label{font-size:12px; font-weight:600; color:var(--sa-text-2);}
#saApp input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
#saApp select, #saApp textarea{
  background:var(--sa-surface-2); color:var(--sa-text);
  border:1px solid var(--sa-line-2); border-radius:11px;
  font-family:inherit; transition:border-color .15s, box-shadow .15s, background .15s;
}
#saApp select{height:42px; padding:0 34px 0 12px; font-size:13px; cursor:pointer;}
#saApp .sa-field input:not([type=checkbox]):not([type=radio]){height:42px; padding:0 13px; font-size:13px;}
#saApp .sa-field textarea{padding:11px 13px; font-size:13px; line-height:1.55;}
#saApp input::placeholder, #saApp textarea::placeholder{color:var(--sa-text-3); opacity:1;}
#saApp input:focus, #saApp select:focus, #saApp textarea:focus{
  border-color:var(--sa-accent); box-shadow:0 0 0 3px var(--sa-focus); outline:none;
}
#saApp input:disabled, #saApp select:disabled, #saApp textarea:disabled{opacity:.55; cursor:not-allowed;}
#saApp input[type=checkbox], #saApp input[type=radio]{accent-color:var(--sa-accent); width:16px; height:16px;}
#saApp .sa-toggle{color:var(--sa-text); font-size:13px;}
#saApp .sa-actions input[type=date]{height:34px; padding:0 10px; font-size:12px; border-radius:9px;}

#saApp .sa-btn{
  white-space:nowrap; padding:11px 22px; border-radius:11px; border:0; font-size:13px; font-weight:700; color:#fff; cursor:pointer;
  background:var(--teal);
  box-shadow:none; transition:filter .15s, transform .08s, box-shadow .15s;
}
#saApp .sa-btn:hover{filter:brightness(1.07);}
#saApp .sa-btn:active{transform:translateY(1px);}
#saApp .sa-btn:disabled{opacity:.55; cursor:not-allowed; filter:none;}

#saApp .sa-btn-ghost{
  white-space:nowrap; padding:7px 14px; border-radius:10px; border:1px solid var(--sa-line-2);
  background:var(--sa-surface); color:var(--sa-text); font-size:12px; font-weight:600; cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
#saApp .sa-btn-ghost:hover{background:var(--sa-surface-3); border-color:var(--sa-accent);}
#saApp .sa-btn-ghost:disabled{opacity:.55; cursor:not-allowed;}

#saApp .sa-btn-danger{
  white-space:nowrap; padding:7px 14px; border-radius:10px; border:1px solid var(--sa-bad-line);
  background:transparent; color:var(--sa-bad); font-size:12px; font-weight:600; cursor:pointer;
  transition:background .15s,border-color .15s;
}
#saApp .sa-btn-danger:hover{background:var(--sa-bad-bg); border-color:var(--sa-bad);}
#saApp .sa-btn-danger-solid{
  white-space:nowrap; padding:9px 18px; border-radius:10px; border:0; background:var(--sa-solid-danger); color:#fff;
  font-size:12.5px; font-weight:700; cursor:pointer;
}
#saApp .sa-btn-danger-solid:hover:not(:disabled){filter:brightness(1.08);}
#saApp .sa-btn-danger-solid:disabled{opacity:.4; cursor:not-allowed;}

/* =====================================================================
   6. TENANT TABLE + DETAILS
   ===================================================================== */
#saApp .sa-table-wrap{overflow-x:auto; margin:0 -4px; padding:0 4px;}
#saApp .sa-table{border-collapse:separate; border-spacing:0 8px; font-size:13px; min-width:980px;}
#saApp .sa-table th{
  border-bottom:0; padding:4px 14px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sa-text-3); text-align:left;
}
#saApp .sa-row td{
  background:var(--sa-surface-2); color:var(--sa-text); padding:14px; vertical-align:middle;
  border-top:1px solid var(--sa-line); border-bottom:1px solid var(--sa-line);
}
#saApp .sa-row td:first-child{border-left:1px solid var(--sa-line); border-radius:14px 0 0 14px; padding-left:12px;}
#saApp .sa-row td:last-child{border-right:1px solid var(--sa-line); border-radius:0 14px 14px 0;}
#saApp .sa-row:hover td{background:var(--sa-surface-3);}
/* Keep short columns on one line so the Action column gets the room */
#saApp .sa-row td:nth-child(2), #saApp .sa-row td:nth-child(5), #saApp .sa-row td:nth-child(6), #saApp .sa-row td:nth-child(7){white-space:nowrap;}
#saApp .sa-row td:last-child{min-width:300px;}
#saApp .sa-detail td{padding:0 0 6px; background:transparent; border:0;}
#saApp .sa-detail-grid{padding:4px 0 8px; gap:14px;}
#saApp .sa-detail-block{background:var(--sa-surface-2); border:1px solid var(--sa-line); border-radius:14px; padding:16px 18px;}
#saApp .sa-detail-block h4{margin:0 0 12px; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--sa-text-3); font-weight:700;}
#saApp .sa-dl dt{font-size:12px; color:var(--sa-text-3);}
#saApp .sa-dl dd{font-size:12.8px; color:var(--sa-text);}
#saApp .sa-hash{font-size:11.5px; letter-spacing:.3px;}

#saApp .sa-pill{display:inline-block; white-space:nowrap; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.02em; border:1px solid transparent;}
#saApp .sa-pill::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px;}
#saApp .sa-pill.on{background:var(--sa-ok-bg); color:var(--sa-ok); border-color:var(--sa-ok-line);}
#saApp .sa-pill.off{background:var(--sa-bad-bg); color:var(--sa-bad); border-color:var(--sa-bad-line);}

.sa-biz{display:flex; align-items:center; gap:10px;}
.sa-biz strong{font-size:13.5px; font-weight:600; color:var(--sa-text);}
.sa-avatar{
  width:34px; height:34px; border-radius:10px; flex:0 0 34px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff; background:linear-gradient(145deg,var(--sa-accent),var(--sa-accent-2));
}
#saApp .sa-actions{flex-wrap:wrap; justify-content:flex-end; gap:8px;}
#saApp .sa-expand{
  width:28px; height:28px; border-radius:9px; border:1px solid var(--sa-line-2); background:var(--sa-surface);
  color:var(--sa-accent-text); font-size:15px; font-weight:700; line-height:1; cursor:pointer; transition:background .15s,border-color .15s;
}
#saApp .sa-expand:hover{background:var(--sa-accent-soft); border-color:var(--sa-accent);}

#saApp .sa-stats{gap:10px;}
#saApp .sa-stat{background:var(--sa-surface); border:1px solid var(--sa-line); border-radius:12px; padding:10px;}
#saApp .sa-stat-n{color:var(--sa-accent-text); font-size:16px; font-weight:700;}
#saApp .sa-stat-l{color:var(--sa-text-3);}

#saApp .sa-dns{border:1px solid var(--sa-line-2); border-radius:11px; overflow:hidden; background:var(--sa-surface);}
#saApp .sa-dns-row{border-bottom:1px solid var(--sa-line);}
#saApp .sa-dns-l{color:var(--sa-text-3);}
#saApp .sa-dns-row code{background:transparent; border:0; padding:0; color:var(--sa-accent-text);}

/* Per-tenant channel permissions */
.sa-ch{display:inline-block;}
.sa-ch > summary{list-style:none; cursor:pointer;}
.sa-ch > summary::-webkit-details-marker{display:none;}
#saApp .sa-ch[open] > summary{background:var(--sa-accent-soft); border-color:var(--sa-accent); color:var(--sa-accent-text);}
#saApp .sa-ch-form{
  display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:12px 14px; min-width:200px;
  background:var(--sa-surface); border:1px solid var(--sa-line-2); border-radius:12px; box-shadow:var(--sa-shadow);
}
#saApp .sa-ch-form label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sa-text); cursor:pointer;}

/* Automation switch (kept for any screen that uses it) */
.sa-switch{
  display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:20px; cursor:pointer;
  border:1px solid var(--sa-line-2); background:var(--sa-surface-2); color:var(--sa-text-2); font-size:12px; font-weight:600;
  transition:background .15s,border-color .15s,color .15s;
}
.sa-knob{position:relative; width:30px; height:18px; border-radius:12px; background:var(--sa-line-2); flex:0 0 30px; transition:background .15s;}
.sa-knob::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s;}
.sa-switch.on{border-color:var(--sa-ok-line); background:var(--sa-ok-bg); color:var(--sa-ok);}
.sa-switch.on .sa-knob{background:var(--sa-accent);}
.sa-switch.on .sa-knob::after{transform:translateX(12px);}
.sa-switch:hover{border-color:var(--sa-accent);}

/* =====================================================================
   7. FLASH, MODAL
   ===================================================================== */
#saApp .sa-flash{border-radius:12px; padding:13px 18px; font-size:13px; font-weight:500;}
#saApp .sa-flash.ok{background:var(--sa-ok-bg); color:var(--sa-ok); border:1px solid var(--sa-ok-line);}
#saApp .sa-flash.err{background:var(--sa-bad-bg); color:var(--sa-bad); border:1px solid var(--sa-bad-line);}

#saApp .sa-modal{background:var(--sa-scrim); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
#saApp .sa-modal-card{
  background:var(--sa-surface); border:1px solid var(--sa-line-2); border-radius:18px; padding:26px; box-shadow:var(--sa-shadow-pop);
}
#saApp .sa-modal-card h3{margin:0 0 10px; font-size:17px; font-weight:700; color:var(--sa-bad);}
#saApp .sa-modal-card p{color:var(--sa-text-2); font-size:13px; line-height:1.6;}
#saApp .sa-modal-card p strong{color:var(--sa-text);}
#saApp .sa-modal-label{color:var(--sa-text-2); font-size:11.5px; font-weight:600;}
#saApp .sa-modal-input{height:44px; padding:0 14px; border-radius:11px; font-size:13.5px;}
#saApp .sa-modal-input:focus{border-color:var(--sa-solid-danger); box-shadow:0 0 0 3px var(--sa-bad-bg);}
#saApp .sa-modal-err{color:var(--sa-bad);}

/* =====================================================================
   8. PLATFORM WHATSAPP + MESSAGING PANELS (shared pmeta-* components)
   ===================================================================== */
#saApp .pmeta-grid{gap:14px;}
#saApp .pmeta-field{background:var(--sa-surface-2); border:1px solid var(--sa-line); border-radius:14px; padding:16px;}
#saApp .pmeta-field label{color:var(--sa-text); font-size:12.5px; font-weight:700;}
#saApp .pmeta-field .hint{color:var(--sa-text-3); font-size:11.5px; line-height:1.55;}
#saApp .pmeta-field h3{color:var(--sa-text);}
#saApp .pmeta-state{border:1px solid transparent; font-weight:700;}
#saApp .pmeta-state.ok{background:var(--sa-ok-bg); color:var(--sa-ok); border-color:var(--sa-ok-line);}
#saApp .pmeta-state.miss{background:var(--sa-bad-bg); color:var(--sa-bad); border-color:var(--sa-bad-line);}
#saApp .pmeta-state.env{background:var(--sa-info-bg); color:var(--sa-info);}
#saApp .pmeta-copy{
  background:var(--sa-surface); color:var(--sa-text); border:1px solid var(--sa-line-2); border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
#saApp .pmeta-actions{gap:10px; margin-top:16px; align-items:center;}
#saApp #msgAdminRoot table{color:var(--sa-text);}
#saApp #msgAdminRoot th{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sa-text-3);
}
#saApp #msgAdminRoot td{color:var(--sa-text);}

/* Status text written by script with colours meant for a dark background:
   in light mode swap them for readable equivalents (no JS change needed). */
html[data-theme="light"] #saApp [style*="3DD9A8" i], html[data-theme="light"] #saApp [style*="61, 217, 168"]{color:#0B6B58 !important;}
html[data-theme="light"] #saApp [style*="FF8A7A" i], html[data-theme="light"] #saApp [style*="255, 138, 122"]{color:#B1233B !important;}
html[data-theme="light"] #saApp [style*="F6C177" i], html[data-theme="light"] #saApp [style*="246, 193, 119"]{color:#8A5A06 !important;}

/* =====================================================================
   9. RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  #saApp .sa-header{flex-wrap:wrap; padding:10px 16px; gap:12px;}
  .sa-nav{order:3; width:100%; margin:0; overflow-x:auto;}
  #saApp .sa-user{margin-left:auto;}
}
@media (max-width:900px){
  #saApp .sa-main{padding:18px 14px 60px;}
  #saApp .sa-card{padding:18px 16px; border-radius:16px;}
  #saApp .sa-form{grid-template-columns:1fr;}
  .sa-kpi-n{font-size:25px;}
}
@media (max-width:520px){
  #saApp .sa-user-name{display:none;}
  #saApp .sa-brand-sub{display:none;}
}

/* =====================================================================
   TENANT-STYLE SHELL (sidebar + topbar + one page at a time)
   ===================================================================== */
#saApp .sa-top-title{font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--text);}
#saApp .sa-stat-sub{margin-top:5px; font-size:11.8px; color:var(--text-faint);}
#saApp .stat-value small{font-size:15px; font-weight:600; color:var(--text-faint);}
#saApp .content{max-width:1680px;}
#saApp .sa-flash{margin-bottom:14px;}
#saApp .view > .sa-card{margin-bottom:14px;}
#saApp .view > .stat-grid{margin-bottom:14px;}
@media (max-width:600px){
  #saApp .sa-top-title{font-size:15px;}
  #saApp .sa-card{padding:14px;}
}