/* ============================================================
   skyp.css — Skycomp house shell for the AI Readiness Audit.
   Adapted from the Skycomp Platform v2 theme (design handoff),
   self-contained and vendored for this isolated box. All shell
   selectors are .skyp-* so they never collide with Bootstrap.
   ============================================================ */

/* ── Quicksand (vendored woff2, no CDN at runtime) ─────────── */
@font-face { font-family:'Quicksand'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/vendor/quicksand/quicksand-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Quicksand'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/vendor/quicksand/quicksand-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Quicksand'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/vendor/quicksand/quicksand-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Quicksand'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/vendor/quicksand/quicksand-latin-700-normal.woff2') format('woff2'); }

:root {
  /* Brand — Skycomp Marketing Style Guide 2020 */
  --skyp-brand:#009ee2; --skyp-brand-dim:#0088c4; --skyp-accent:#f5b301;
  --skyp-bg:#f6f8fb; --skyp-panel:#fff; --skyp-panel-2:#fafbfc;
  --skyp-border:#e5e9ef; --skyp-border-soft:#eef0f2;
  --skyp-text:#1a1a1a; --skyp-text-dim:#666; --skyp-text-faint:#999;
  --skyp-hover:rgba(0,0,0,.035); --skyp-brand-bg:#e6f6fd; --skyp-active-bg:#e6f6fd;
  --skyp-font:'Quicksand',Roboto,system-ui,-apple-system,sans-serif;
  --skyp-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --skyp-radius:6px; --skyp-radius-lg:8px; --skyp-sidebar-w:260px; --skyp-topbar-h:52px;
  --skyp-shadow:0 1px 2px rgba(15,23,42,.04);
}
[data-skyp-theme="dark"] {
  --skyp-bg:#0c1220; --skyp-panel:#141a2a; --skyp-panel-2:#1a2030;
  --skyp-border:#2a3348; --skyp-border-soft:#1e2638;
  --skyp-text:#e6ecf5; --skyp-text-dim:#8a97b0; --skyp-text-faint:#6b7a96;
  --skyp-hover:rgba(255,255,255,.04); --skyp-brand-bg:rgba(0,158,226,.15); --skyp-active-bg:rgba(0,158,226,.18);
  --skyp-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Map Bootstrap's primary onto the Skycomp brand so .btn-primary,
   .bg-primary, .text-primary, links etc. all read as house style. */
:root {
  --bs-primary:#009ee2; --bs-primary-rgb:0,158,226;
  --bs-link-color:#0088c4; --bs-link-color-rgb:0,136,196;
  --bs-link-hover-color:#006fa0;
}
.btn-primary { --bs-btn-bg:#009ee2; --bs-btn-border-color:#009ee2;
  --bs-btn-hover-bg:#0088c4; --bs-btn-hover-border-color:#0088c4;
  --bs-btn-active-bg:#0088c4; --bs-btn-active-border-color:#0077ad; }
.bg-primary { background-color:#009ee2 !important; }
.text-primary { color:#009ee2 !important; }

/* ── Shell grid ────────────────────────────────────────────── */
.skyp-body { margin:0; background:var(--skyp-bg); font-family:var(--skyp-font); color:var(--skyp-text); }
.skyp-shell { min-height:100vh; display:flex; flex-direction:column; background:var(--skyp-bg); }
.skyp-body-grid { flex:1; display:grid; grid-template-columns:var(--skyp-sidebar-w) 1fr;
  min-height:0; align-items:stretch; }
.skyp-shell-bare .skyp-main { grid-column:1 / -1; }

/* ── Top bar ───────────────────────────────────────────────── */
.skyp-topbar { height:var(--skyp-topbar-h); background:var(--skyp-panel);
  border-bottom:1px solid var(--skyp-border); display:flex; align-items:center; gap:14px;
  padding:0 20px; flex-shrink:0; }
.skyp-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--skyp-text); }
.skyp-brand-plate { background:var(--skyp-brand); border-radius:var(--skyp-radius); padding:5px 9px;
  display:inline-flex; align-items:center; color:#fff; font-size:15px; }
.skyp-brand-text { font:700 15px/1 var(--skyp-font); letter-spacing:.01em; }
.skyp-brand-dot { color:var(--skyp-brand); }
.skyp-brand-tag { font:400 11px/1 var(--skyp-mono); color:var(--skyp-text-faint); margin-left:2px; }
.skyp-topbar-right { margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.skyp-mode-btn { width:32px; height:32px; border-radius:var(--skyp-radius); background:var(--skyp-panel-2);
  border:1px solid var(--skyp-border); color:var(--skyp-text-dim); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.skyp-mode-btn:hover { color:var(--skyp-text); border-color:var(--skyp-brand); }
.skyp-user-chip { display:inline-flex; align-items:center; gap:8px; padding:4px 6px 4px 4px;
  border-radius:999px; background:var(--skyp-panel-2); border:1px solid var(--skyp-border);
  font:500 13px/1 var(--skyp-font); color:var(--skyp-text); text-decoration:none; }
.skyp-user-av { width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--skyp-brand),#0066cc); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font:700 11px/1 var(--skyp-font); }
img.skyp-user-av { object-fit:cover; padding:0; }
.skyp-user-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skyp-signout { color:var(--skyp-text-dim); font-size:15px; text-decoration:none; padding:4px 6px; }
.skyp-signout:hover { color:var(--skyp-brand); }
.skyp-burger { display:none; background:none; border:none; color:var(--skyp-text-dim); font-size:20px; }

/* ── Sidebar ───────────────────────────────────────────────── */
.skyp-sidebar { background:var(--skyp-panel); border-right:1px solid var(--skyp-border);
  padding:14px 10px; overflow:auto; min-height:0; }
.skyp-sb-group { font:500 10px/1 var(--skyp-font); color:var(--skyp-text-faint);
  letter-spacing:.14em; text-transform:uppercase; padding:12px 12px 6px; }
.skyp-sb-item { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--skyp-radius); color:var(--skyp-text); font:500 13.5px/1 var(--skyp-font);
  text-decoration:none; }
.skyp-sb-item:hover { background:var(--skyp-hover); }
.skyp-sb-item.is-active { background:var(--skyp-active-bg); color:var(--skyp-brand); }
.skyp-sb-ico { font-size:15px; width:18px; display:inline-flex; justify-content:center; }
.skyp-sb-label { flex:1; }
.skyp-sb-badge { font:600 10px/1 var(--skyp-mono); background:var(--skyp-brand-bg); color:var(--skyp-brand);
  padding:2px 6px; border-radius:999px; }

/* ── Main + footer ─────────────────────────────────────────── */
.skyp-main { overflow:auto; background:var(--skyp-bg); color:var(--skyp-text); min-height:0; }
.skyp-footer { background:var(--skyp-panel); border-top:1px solid var(--skyp-border);
  padding:12px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  color:var(--skyp-text-dim); font:400 12.5px/1.4 var(--skyp-font); flex-shrink:0; }
.skyp-footer-mono { font-family:var(--skyp-mono); font-size:11px; color:var(--skyp-text-faint); }
.skyp-footer-sep { color:var(--skyp-text-faint); }
.skyp-footer-right { margin-left:auto; }

/* ── App helpers ───────────────────────────────────────────── */
.skyp-page-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:1.25rem; }
.skyp-page-head h1 { font-weight:700; font-size:1.5rem; margin:0; }
.skyp-card { background:var(--skyp-panel); border:1px solid var(--skyp-border);
  border-radius:var(--skyp-radius-lg); box-shadow:var(--skyp-shadow); }
.skyp-stat { text-align:center; padding:1rem; }
.skyp-stat .n { font-weight:700; font-size:2rem; line-height:1.1; color:var(--skyp-text); }
.skyp-stat .l { font-size:.8rem; color:var(--skyp-text-dim); }
/* Severity palette (matches the risk model) */
.sev-CRITICAL{ background:#b3123a; color:#fff; }
.sev-HIGH    { background:#e8590c; color:#fff; }
.sev-MEDIUM  { background:#f0a500; color:#1a1a1a; }
.sev-LOW     { background:#2f9e44; color:#fff; }
.sev-INFO    { background:#6c757d; color:#fff; }
.sev-badge{ display:inline-block; padding:.2em .55em; border-radius:999px; font-size:.72rem; font-weight:600; }

/* Bootstrap tables/cards read on the dark panel too */
[data-skyp-theme="dark"] .table { --bs-table-color:var(--skyp-text); --bs-table-bg:transparent;
  --bs-table-border-color:var(--skyp-border); }
[data-skyp-theme="dark"] .card { --bs-card-bg:var(--skyp-panel); --bs-card-border-color:var(--skyp-border);
  color:var(--skyp-text); }

@media (max-width:900px){
  .skyp-body-grid { grid-template-columns:1fr; }
  .skyp-sidebar { position:fixed; inset:var(--skyp-topbar-h) 0 0 0; width:100%; z-index:50;
    transform:translateX(-100%); transition:transform .2s; }
  .skyp-sidebar.is-open { transform:translateX(0); }
  .skyp-user-name { display:none; }
  .skyp-brand-tag { display:none; }
  .skyp-burger { display:inline-flex; }
}

/* ── Client context block (sidebar) ────────────────────────── */
.skyp-client-back { display:inline-flex; align-items:center; gap:6px; font:500 12px/1 var(--skyp-font);
  color:var(--skyp-text-dim); text-decoration:none; padding:6px 12px 2px; }
.skyp-client-back:hover { color:var(--skyp-brand); }
.skyp-client-card { padding:8px 12px 12px; border-bottom:1px solid var(--skyp-border); margin-bottom:6px; }
.skyp-client-name { font:700 14px/1.25 var(--skyp-font); color:var(--skyp-text); }
.skyp-client-domain { font:400 11.5px/1.3 var(--skyp-mono); color:var(--skyp-text-faint); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }