:root{
  --saas-bg:#0b1220;
  --saas-surface:#0f172a;
  --saas-surface2:#111c33;
  --saas-border:rgba(148,163,184,.18);
  --saas-text:#e5e7eb;
  --saas-muted:#94a3b8;
  --saas-accent:#7c3aed;
  --saas-accent2:#06b6d4;
  --saas-danger:#ef4444;
  --saas-success:#22c55e;
  --saas-warning:#f59e0b;
  --saas-radius:18px;
}

body.saas{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.20), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(6,182,212,.18), transparent 60%),
              var(--saas-bg);
  color:var(--saas-text);
}

/* Ensure inherited text doesn't fall back to light theme defaults */
body.saas, body.saas p, body.saas span, body.saas small, body.saas strong, body.saas b{color:var(--saas-text)}
body.saas .muted{color:var(--saas-muted) !important}

/* Links */
body.saas a{color:rgba(226,232,240,.92)}
body.saas a:hover{color:#fff}

body.saas .sidebar{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.70));
  border-left: 1px solid var(--saas-border);
}

/* Make sidebar header match dark theme (style.css defaults to light) */
body.saas .sidebar-header{
  background: linear-gradient(180deg, rgba(17,28,51,.85), rgba(15,23,42,.60));
  border-color: var(--saas-border);
}
body.saas .sidebar-header .brand-logo,
body.saas .sidebar-header .brand-logo-placeholder{
  background: rgba(2,6,23,.35);
  border-color: var(--saas-border);
}
body.saas .sidebar-header .brand-logo{padding:6px}
body.saas .sidebar-menu a i{color:rgba(226,232,240,.70)}

body.saas .sidebar .brand-text h3{color:var(--saas-text);font-weight:800;letter-spacing:.2px}
body.saas .sidebar .brand-text p{color:var(--saas-muted)}

body.saas .brand-logo{border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

body.saas .sidebar-menu a{
  color:rgba(226,232,240,.90);
  border:1px solid transparent;
  border-radius:14px;
  margin:6px 10px;
}
body.saas .sidebar-menu a:hover{
  background:rgba(124,58,237,.10);
  border-color:rgba(124,58,237,.22);
}
body.saas .sidebar-menu a.active{
  background:linear-gradient(90deg, rgba(124,58,237,.18), rgba(6,182,212,.12));
  border-color:rgba(124,58,237,.28);
}

body.saas .main{background:transparent}
body.saas .topbar{
  background:rgba(15,23,42,.55);
  border:1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  margin:18px 18px 0;
  backdrop-filter: blur(10px);
}

/* Use the same header component as the main system, but styled for SaaS */
body.saas .header{
  background:rgba(15,23,42,.55);
  border:1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
body.saas .header-title h1,
body.saas .header-title h2,
body.saas .header h1,
body.saas .header h2{color:var(--saas-text)}
body.saas .header-title p{color:var(--saas-muted)}
body.saas .topbar h2{color:var(--saas-text);font-weight:800}

/* parent pages already use .main-content padding from style.css */
body.saas .content{padding:0}

body.saas .card{
  background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.62));
  border:1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

body.saas .card h3{color:var(--saas-text);font-weight:800}

body.saas .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
body.saas .kpi{
  background:linear-gradient(180deg, rgba(17,28,51,.9), rgba(15,23,42,.55));
  border:1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  padding:14px;
  display:flex;
  align-items:center;
  gap:12px;
}
body.saas .kpi .ico{
  width:46px;height:46px;border-radius:16px;
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.18));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(124,58,237,.22);
}
body.saas .kpi .v{font-size:22px;font-weight:900;line-height:1}
body.saas .kpi .t{color:var(--saas-muted);font-size:12px;margin-top:4px}

body.saas .table{
  border-color: var(--saas-border);
}
body.saas .table th{
  color:rgba(226,232,240,.92);
  background:rgba(17,28,51,.55);
}
body.saas .table td{color:rgba(226,232,240,.88);border-color: var(--saas-border)}

body.saas input, body.saas select, body.saas textarea{
  background: rgba(2,6,23,.55);
  border:1px solid var(--saas-border);
  color:var(--saas-text);
  border-radius:14px;
}
/* Some browsers render date/time inputs with default (dark) text */
body.saas input[type="date"],
body.saas input[type="datetime-local"],
body.saas input[type="time"],
body.saas input[type="email"],
body.saas input[type="number"],
body.saas input[type="password"],
body.saas input[type="text"]{
  color:var(--saas-text);
  -webkit-text-fill-color: var(--saas-text);
}
body.saas input::placeholder, body.saas textarea::placeholder{color:rgba(148,163,184,.9)}
body.saas select option{background:#0b1220;color:var(--saas-text)}
body.saas input:focus, body.saas select:focus, body.saas textarea:focus{outline:none;border-color:rgba(124,58,237,.55);box-shadow:0 0 0 4px rgba(124,58,237,.16)}
body.saas label{color:rgba(226,232,240,.86)}

/* Alerts (override light theme) */
body.saas .alert{border-color:var(--saas-border);background:rgba(15,23,42,.55);color:rgba(226,232,240,.92)}
body.saas .alert-success{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.10);color:#bbf7d0}
body.saas .alert-danger{border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.10);color:#fecaca}
body.saas .alert-warning{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.10);color:#fde68a}

/* Form grid defaults for SaaS pages */
body.saas .form-grid input, body.saas .form-grid select, body.saas .form-grid textarea{width:100%}
body.saas input[type="file"]{padding:10px;border-radius:14px}
body.saas input[type="file"]::-webkit-file-upload-button{border:1px solid rgba(124,58,237,.28);background:rgba(124,58,237,.18);color:rgba(226,232,240,.95);border-radius:12px;padding:10px 12px;margin-left:12px;cursor:pointer}
body.saas input[type="file"]::file-selector-button{border:1px solid rgba(124,58,237,.28);background:rgba(124,58,237,.18);color:rgba(226,232,240,.95);border-radius:12px;padding:10px 12px;margin-left:12px;cursor:pointer}

body.saas .btn{
  border-radius:14px;
  border:1px solid rgba(124,58,237,.28);
  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(6,182,212,.55));
  color:white;
}
body.saas .btn:hover{filter:brightness(1.05)}
body.saas .btn.btn-ghost{
  background: transparent;
  border-color: var(--saas-border);
  color: rgba(226,232,240,.92);
}

body.saas .badge{border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px}
body.saas .badge-success{background:rgba(34,197,94,.16);color:#86efac;border:1px solid rgba(34,197,94,.25)}
body.saas .badge-danger{background:rgba(239,68,68,.16);color:#fca5a5;border:1px solid rgba(239,68,68,.25)}
/* Warning badge (fix invalid rgba that was breaking CSS parsing) */
body.saas .badge-warning{background:rgba(245,158,11,.16);color:#fde68a;border:1px solid rgba(245,158,11,.25)}

body.saas .progress{height:10px;background:rgba(148,163,184,.16);border-radius:999px;overflow:hidden;border:1px solid var(--saas-border)}
body.saas .progress > div{height:100%;background:linear-gradient(90deg, rgba(124,58,237,.95), rgba(6,182,212,.75))}

/* Sidebar scroll always */
body.saas .sidebar{height:100vh;overflow:hidden}
body.saas .sidebar-menu{overflow-y:auto;max-height:calc(100vh - 160px);padding-bottom:22px}

/* ===== Make SaaS pages match internal layout system ===== */
body.saas .main-content{background:transparent}
body.saas .header{
  background:rgba(15,23,42,.55);
  border:1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  backdrop-filter: blur(10px);
}
body.saas .header-title h1{color:var(--saas-text)}
body.saas .header-title p{color:var(--saas-muted)}

/* Sidebar header in dark mode */
body.saas .sidebar-header{
  background:rgba(15,23,42,.65);
  border:1px solid var(--saas-border);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
body.saas .sidebar-menu a i{color:rgba(226,232,240,.75)}
body.saas .sidebar-footer{border-color:var(--saas-border)}
body.saas .user-avatar-mini{background:rgba(226,232,240,.06);border-color:var(--saas-border);color:rgba(226,232,240,.92)}
body.saas .user-info-mini small{color:var(--saas-muted)}

/* SaaS specific components used in parent_* pages */
body.saas .saas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
body.saas .saas-kpi{background:linear-gradient(180deg, rgba(17,28,51,.9), rgba(15,23,42,.55));border:1px solid var(--saas-border);border-radius: var(--saas-radius);padding:14px;display:flex;align-items:center;gap:12px}
body.saas .saas-kpi .kpi-icon{width:46px;height:46px;border-radius:16px;background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.18));display:flex;align-items:center;justify-content:center;border:1px solid rgba(124,58,237,.22)}
body.saas .saas-kpi .kpi-label{color:var(--saas-muted);font-size:12px;margin-bottom:4px}
body.saas .saas-kpi .kpi-value{font-size:22px;font-weight:900;line-height:1}

body.saas .saas-mini-list{display:grid;gap:10px}

body.saas .saas-office-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
body.saas .saas-office{background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.62));border:1px solid var(--saas-border);border-radius: var(--saas-radius);box-shadow: 0 18px 50px rgba(0,0,0,.22);padding:14px;display:flex;flex-direction:column;gap:12px}
body.saas .saas-office .office-head{display:flex;align-items:center;gap:12px}
body.saas .saas-office .mini-logo{display:flex;align-items:center;justify-content:center;border-radius:16px;border:1px solid var(--saas-border);background:rgba(2,6,23,.35);overflow:hidden;flex:0 0 auto}
body.saas .saas-office .mini-logo img{width:100%;height:100%;object-fit:cover;display:block}
body.saas .saas-office .office-name{font-weight:900;color:var(--saas-text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.saas .saas-office .office-slug{color:var(--saas-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.saas .saas-office .office-body .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed rgba(148,163,184,.18)}
body.saas .saas-office .office-body .row:first-child{border-top:0}
body.saas .saas-office .office-body span{color:var(--saas-muted);font-size:12px}
body.saas .saas-office .office-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

body.saas .btn.btn-outline{background:transparent;color:rgba(226,232,240,.92);border-color:var(--saas-border)}
body.saas .btn.btn-outline:hover{background:rgba(124,58,237,.10)}
body.saas .btn.btn-sm{padding:10px 12px;font-size:13px}

body.saas .saas-progress{height:10px;background:rgba(148,163,184,.16);border-radius:999px;overflow:hidden;border:1px solid var(--saas-border)}
body.saas .saas-progress span{display:block;height:100%;background:linear-gradient(90deg, rgba(124,58,237,.95), rgba(6,182,212,.75))}

@media (max-width: 920px){
  body.saas .main-content{margin-right:0}
}