/* sa_ui.css — modern Super Admin (Platform Console) look for DemoLaudary.
   Scoped to #saApp, loaded after the built-in styles. Remove the <link> in
   index.php to go back to the old console instantly. */

#saApp{
  min-height:100vh; color:#E6F0F2;
  background:
    radial-gradient(900px 420px at 85% -80px, rgba(12,155,167,.16), transparent 70%),
    radial-gradient(700px 380px at -5% 120px, rgba(53,114,198,.10), transparent 70%),
    #0A141B;
}

/* ---------- Sticky header with section links ---------- */
#saApp .sa-header{
  position:sticky; top:0; z-index:60; gap:20px; padding:12px 28px;
  background:rgba(10,20,27,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #1C303D;
}
#saApp .sa-brand-mark{width:40px; height:40px; border-radius:12px; box-shadow:0 6px 18px rgba(12,155,167,.35);}
#saApp .sa-brand-name{font-size:15.5px;}
#saApp .sa-brand-sub{font-size:9.5px; letter-spacing:.14em; color:#6F8894;}
.sa-nav{display:flex; gap:4px; margin:0 auto; padding:4px; background:#0E1B24; border:1px solid #1C303D; border-radius:12px;}
.sa-nav a{padding:7px 14px; border-radius:9px; font-size:12.5px; font-weight:600; color:#9FB3BA; text-decoration:none; transition:background .15s,color .15s;}
.sa-nav a:hover{background:#152B37; color:#E6F0F2;}
#saApp .sa-logout{border-radius:10px;}

/* ---------- Layout ---------- */
#saApp .sa-main{max-width:1180px; padding:26px 28px 80px; gap:20px;}
#saApp .sa-card{
  background:linear-gradient(180deg,#12222C 0%,#101E27 100%);
  border:1px solid #1C303D; border-radius:18px; padding:24px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
#saApp .sa-card-head h2{font-size:17px; letter-spacing:.01em;}
#saApp .sa-card-head p{font-size:12.8px; line-height:1.55; max-width:860px;}

/* ---------- KPI strip ---------- */
.sa-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;}
.sa-kpi{position:relative; display:flex; flex-direction:column; gap:3px; padding:16px 18px; border-radius:16px; overflow:hidden;
  background:#101E27; border:1px solid #1C303D;}
.sa-kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#0C9BA7,#3572C6);}
.sa-kpi-l{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6F8894;}
.sa-kpi-n{font-size:28px; font-weight:700; line-height:1.15; color:#F0F6F7; letter-spacing:-.01em;}
.sa-kpi-n small{font-size:15px; font-weight:600; color:#6F8894;}
.sa-kpi-s{font-size:11.5px; color:#7E98A2;}

/* ---------- 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 #7E98A2; border-bottom:2px solid #7E98A2; transform:rotate(45deg); transition:transform .18s;}
.sa-fold.closed > .sa-card-head::after{transform:rotate(-45deg);}
.sa-fold > .sa-card-head:hover h2{color:#52D5D0;}
.sa-fold > .sa-card-head:focus-visible{outline:2px solid #0C9BA7; 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;}
#saApp .sa-card[id]{scroll-margin-top:84px;}

/* ---------- Forms ---------- */
#saApp .sa-field input, #saApp .sa-field textarea, #saApp .sa-field select{
  border-radius:11px; background:#0C1820; border:1px solid #243A47; transition:border-color .15s, box-shadow .15s;}
#saApp .sa-field input:focus, #saApp .sa-field textarea:focus, #saApp .sa-field select:focus{
  border-color:#0C9BA7; box-shadow:0 0 0 3px rgba(12,155,167,.18); outline:none;}
#saApp .sa-btn{border-radius:11px; box-shadow:0 6px 16px rgba(12,155,167,.28);}
#saApp .sa-btn-ghost{border-radius:10px; border-color:#2A4453; color:#C9D8DD;}

/* ---------- Tenant table as soft rows ---------- */
#saApp .sa-table{border-collapse:separate; border-spacing:0 8px; font-size:13px;}
#saApp .sa-table th{border-bottom:0; padding:4px 14px; font-size:10.5px; letter-spacing:.1em; color:#6F8894;}
#saApp .sa-row td{background:#0F1D26; border:0; padding:14px; vertical-align:middle;}
#saApp .sa-row td:first-child{border-radius:14px 0 0 14px; padding-left:12px;}
#saApp .sa-row td:last-child{border-radius:0 14px 14px 0;}
#saApp .sa-row:hover td{background:#14293A;}
#saApp .sa-detail td{padding:0 0 6px; background:transparent; border:0;}
#saApp .sa-detail-grid{padding:4px 0 8px;}
#saApp .sa-detail-block{border-radius:14px; background:#0F1D26;}
#saApp .sa-table code{background:#0A141B; border:1px solid #1C303D; border-radius:7px;}
#saApp .sa-pill{padding:4px 11px; font-size:11px; letter-spacing:.02em;}
#saApp .sa-pill::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px;}
.sa-biz{display:flex; align-items:center; gap:10px;}
.sa-biz strong{font-size:13.5px; font-weight:600;}
.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,#17A5B8,#3572C6);}
#saApp .sa-actions{flex-wrap:wrap; justify-content:flex-end; gap:8px;}
#saApp .sa-expand{width:28px; height:28px; border-radius:9px;}

/* ---------- Automation switch ---------- */
.sa-switch{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:20px; cursor:pointer;
  border:1px solid #2A4453; background:#0C1820; color:#8FA6AE; 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:#2A4453; 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:#C9D8DD; transition:transform .15s;}
.sa-switch.on{border-color:#175057; background:#0F2E33; color:#8FE6E0;}
.sa-switch.on .sa-knob{background:#0C9BA7;}
.sa-switch.on .sa-knob::after{transform:translateX(12px); background:#fff;}
.sa-switch:hover{border-color:#0C9BA7;}

/* ---------- Flash + small polish ---------- */
#saApp .sa-flash{border-radius:12px; padding:13px 18px;}
#saApp .sa-stat{border-radius:11px;}

/* ---------- Narrow screens ---------- */
@media (max-width:900px){
  #saApp .sa-header{flex-wrap:wrap; padding:10px 16px;}
  .sa-nav{order:3; width:100%; margin:0; overflow-x:auto;}
  #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:24px;}
}

/* Per-tenant channel permissions (Super Admin > Tenants) */
.sa-ch{display:inline-block;}
.sa-ch>summary{list-style:none;cursor:pointer;}
.sa-ch>summary::-webkit-details-marker{display:none;}
.sa-ch-form{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:10px 12px;border:1px solid rgba(128,128,128,.35);border-radius:10px;min-width:190px;}
.sa-ch-form label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}