/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM: HARMONIC WORKSPACE
   Dashboard SaaS Client-Side — Soft Office, Low-Fatigue
   ═══════════════════════════════════════════════════════════════ */

:root {
  --hw-bg:       #F4F5F7;
  --hw-surface:  #FFFFFF;
  --hw-card:     #FFFFFF;
  --hw-border:   #E2E5EA;
  --hw-border-hl:#CBD5E1;
  --hw-primary:  #2563EB;
  --hw-primary-l:rgba(37,99,235,.08);
  --hw-accent:   #6C3AED;
  --hw-accent-l: rgba(108,58,237,.08);
  --hw-text:     #1A1D23;
  --hw-sub:      #6B7280;
  --hw-muted:    #9CA3AF;
  --hw-success:  #059669;
  --hw-success-l:rgba(5,150,105,.08);
  --hw-warning:  #D97706;
  --hw-warning-l:rgba(217,119,6,.08);
  --hw-error:    #DC2626;
  --hw-error-l:  rgba(220,38,38,.08);
  --hw-titanium: #94A3B8;
  --hw-ff:       'Inter', system-ui, -apple-system, sans-serif;
  --hw-mono:     'Geist Mono', 'JetBrains Mono', monospace;
  --hw-radius:   10px;
  --hw-radius-sm:6px;
  --hw-shadow:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --hw-shadow-lg:0 4px 12px rgba(0,0,0,.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--hw-ff); background:var(--hw-bg); color:var(--hw-text);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { font-weight:600; line-height:1.2; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ── LAYOUT ────────────────────────────────────────────────── */
.app-layout { display:flex; height:100vh; overflow:hidden; }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width:260px; background:var(--hw-surface); border-right:1px solid var(--hw-border);
  display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto;
}
.sidebar-brand {
  padding:20px 20px 16px; font-size:1.1rem; font-weight:700;
  border-bottom:1px solid var(--hw-border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-brand .brand-dot { width:8px; height:8px; border-radius:50%; background:var(--hw-success); }
.sidebar-brand span { color:var(--hw-primary); }

.sidebar-section { padding:12px 12px 4px; font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--hw-muted); font-weight:600; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:4px 8px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--hw-radius-sm);
  font-size:.88rem; font-weight:500; color:var(--hw-sub);
  cursor:pointer; transition:all .15s;
}
.nav-item:hover { background:var(--hw-primary-l); color:var(--hw-primary); }
.nav-item.active { background:var(--hw-primary-l); color:var(--hw-primary); font-weight:600; }
.nav-item .nav-icon { font-size:1.1rem; width:22px; text-align:center; }
.nav-item .nav-badge {
  margin-left:auto; padding:1px 7px; border-radius:50px;
  font-size:.68rem; font-weight:700; background:var(--hw-error-l); color:var(--hw-error);
}

.sidebar-footer {
  margin-top:auto; padding:16px; border-top:1px solid var(--hw-border);
  font-size:.75rem; color:var(--hw-muted); text-align:center;
}
.sidebar-footer a { color:var(--hw-primary); font-weight:600; }

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main-content { flex:1; overflow-y:auto; display:flex; flex-direction:column; }

.topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; background:var(--hw-surface);
  border-bottom:1px solid var(--hw-border); flex-shrink:0;
}
.topbar-title { font-size:1.15rem; font-weight:700; }
.topbar-sub { font-size:.82rem; color:var(--hw-sub); }
.topbar-actions { display:flex; gap:10px; align-items:center; }
.topbar-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:50px; font-size:.72rem; font-weight:600;
}
.topbar-badge.live { background:var(--hw-success-l); color:var(--hw-success); }
.topbar-badge.warn { background:var(--hw-warning-l); color:var(--hw-warning); }
.btn-back {
  padding:6px 14px; border-radius:var(--hw-radius-sm);
  border:1px solid var(--hw-border); background:var(--hw-surface);
  font-size:.82rem; color:var(--hw-sub); cursor:pointer; font-weight:500;
  transition:all .15s;
}
.btn-back:hover { border-color:var(--hw-primary); color:var(--hw-primary); }

.page-content { padding:24px 28px; flex:1; }

/* ── KPI CARDS ─────────────────────────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.kpi-card {
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); padding:20px; box-shadow:var(--hw-shadow);
}
.kpi-card .kpi-label { font-size:.78rem; color:var(--hw-sub); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.kpi-card .kpi-value { font-size:1.8rem; font-weight:700; font-family:var(--hw-mono); }
.kpi-card .kpi-delta { font-size:.75rem; font-weight:600; margin-top:4px; }
.kpi-card .kpi-delta.up { color:var(--hw-success); }
.kpi-card .kpi-delta.down { color:var(--hw-error); }

/* ── PANELS / SECTIONS ─────────────────────────────────────── */
.panel {
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); box-shadow:var(--hw-shadow); margin-bottom:20px;
}
.panel-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--hw-border);
}
.panel-title { font-size:.95rem; font-weight:700; }
.panel-body { padding:20px; }
.panel-tabs { display:flex; gap:0; }
.panel-tab {
  padding:8px 16px; font-size:.82rem; font-weight:500; color:var(--hw-sub);
  cursor:pointer; border-bottom:2px solid transparent; transition:all .15s;
}
.panel-tab.active { color:var(--hw-primary); border-bottom-color:var(--hw-primary); font-weight:600; }

/* ── DATA TABLE ────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th {
  text-align:left; padding:10px 14px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.5px; color:var(--hw-muted); font-weight:600;
  border-bottom:1px solid var(--hw-border); background:var(--hw-bg);
  position:sticky; top:0; cursor:pointer; user-select:none;
}
.data-table th:hover { color:var(--hw-primary); }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--hw-border); vertical-align:middle; }
.data-table tr:hover { background:rgba(37,99,235,.02); }
.data-table .sort-icon { margin-left:4px; font-size:.65rem; color:var(--hw-muted); }

/* Status badges */
.status { display:inline-flex; padding:2px 8px; border-radius:50px; font-size:.72rem; font-weight:600; }
.status-success { background:var(--hw-success-l); color:var(--hw-success); }
.status-warning { background:var(--hw-warning-l); color:var(--hw-warning); }
.status-error   { background:var(--hw-error-l);   color:var(--hw-error); }
.status-info    { background:var(--hw-primary-l); color:var(--hw-primary); }
.status-muted   { background:rgba(148,163,184,.1); color:var(--hw-titanium); }

/* ── CHARTS (SVG containers) ───────────────────────────────── */
.chart-container { position:relative; width:100%; }
.chart-container svg { display:block; width:100%; }
.chart-tooltip {
  position:absolute; padding:8px 12px; background:var(--hw-text); color:#fff;
  border-radius:var(--hw-radius-sm); font-size:.75rem; pointer-events:none;
  box-shadow:var(--hw-shadow-lg); z-index:100; opacity:0; transition:opacity .15s;
}
.chart-legend { display:flex; gap:16px; margin-top:12px; font-size:.78rem; color:var(--hw-sub); }
.chart-legend span { display:flex; align-items:center; gap:6px; }
.chart-legend .dot { width:8px; height:8px; border-radius:50%; }

/* ── LOG VIEWER ────────────────────────────────────────────── */
.log-viewer {
  background:#1A1D23; border-radius:var(--hw-radius); overflow:hidden;
  font-family:var(--hw-mono); font-size:.78rem; color:#D1D5DB;
}
.log-toolbar {
  display:flex; gap:8px; padding:10px 14px; background:#111318;
  border-bottom:1px solid rgba(255,255,255,.06); align-items:center;
}
.log-toolbar input {
  flex:1; background:#0D0F14; border:1px solid rgba(255,255,255,.08);
  border-radius:var(--hw-radius-sm); padding:6px 10px; color:#D1D5DB;
  font-family:var(--hw-mono); font-size:.75rem; outline:none;
}
.log-toolbar .log-filter {
  padding:4px 10px; border-radius:var(--hw-radius-sm);
  border:1px solid rgba(255,255,255,.1); background:transparent;
  color:var(--hw-muted); font-size:.72rem; cursor:pointer; font-family:var(--hw-mono);
}
.log-toolbar .log-filter.active { background:rgba(37,99,235,.2); color:#93C5FD; border-color:rgba(37,99,235,.3); }
.log-entries { max-height:300px; overflow-y:auto; padding:8px 0; }
.log-entry { padding:3px 14px; display:flex; gap:10px; transition:background .1s; font-size:.75rem; }
.log-entry:hover { background:rgba(255,255,255,.03); }
.log-ts { color:#6B7280; flex-shrink:0; min-width:70px; }
.log-level { font-weight:600; flex-shrink:0; min-width:55px; }
.log-level.info  { color:#60A5FA; }
.log-level.warn  { color:#FBBF24; }
.log-level.error { color:#F87171; }
.log-level.crit  { color:#F87171; background:rgba(248,113,113,.12); padding:0 4px; border-radius:3px; }
.log-msg { color:#D1D5DB; }
.log-agent { color:#A78BFA; margin-left:auto; flex-shrink:0; }

/* ── GRID LAYOUTS ──────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:20px; }

/* ── ALERT CARDS ───────────────────────────────────────────── */
.alert-card {
  padding:14px 18px; border-radius:var(--hw-radius); border-left:3px solid;
  display:flex; align-items:flex-start; gap:12px; margin-bottom:10px;
}
.alert-card.critical { background:var(--hw-error-l); border-color:var(--hw-error); }
.alert-card.warning  { background:var(--hw-warning-l); border-color:var(--hw-warning); }
.alert-card.info     { background:var(--hw-primary-l); border-color:var(--hw-primary); }
.alert-card .alert-icon { font-size:1.1rem; flex-shrink:0; }
.alert-card .alert-body { flex:1; }
.alert-card .alert-title { font-weight:600; font-size:.88rem; margin-bottom:2px; }
.alert-card .alert-desc { font-size:.82rem; color:var(--hw-sub); }
.alert-card .alert-time { font-size:.72rem; color:var(--hw-muted); flex-shrink:0; font-family:var(--hw-mono); }

/* ── CYBER COMPLIANCE BAR ──────────────────────────────────── */
.compliance-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--hw-bg); border-radius:var(--hw-radius); font-size:.82rem; margin-bottom:16px; }
.compliance-score {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; font-family:var(--hw-mono); flex-shrink:0;
}
.compliance-score.high { background:var(--hw-success-l); color:var(--hw-success); border:2px solid var(--hw-success); }
.compliance-score.med  { background:var(--hw-warning-l); color:var(--hw-warning); border:2px solid var(--hw-warning); }

/* ── PROGRESS BAR ──────────────────────────────────────────── */
.progress-bar { height:6px; background:var(--hw-border); border-radius:3px; overflow:hidden; }
.progress-bar .fill { height:100%; border-radius:3px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.progress-bar .fill.blue   { background:var(--hw-primary); }
.progress-bar .fill.green  { background:var(--hw-success); }
.progress-bar .fill.red    { background:var(--hw-error); }
.progress-bar .fill.yellow { background:var(--hw-warning); }

/* ── PAGE VIEWS (Module sections) ──────────────────────────── */
.module-view { display:none; }
.module-view.active { display:block; }

/* ── Hidden helper ─────────────────────────────────────────── */
.hidden { display:none !important; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:900px) {
  .sidebar { width:60px; }
  .sidebar-brand span, .nav-item span:not(.nav-icon), .sidebar-section,
  .sidebar-footer, .nav-badge { display:none; }
  .nav-item { justify-content:center; padding:12px; }
  .grid-2, .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .sidebar { display:none; }
  .topbar { padding:12px 16px; }
  .page-content { padding:16px; }
  .kpi-row { grid-template-columns:1fr 1fr; }
}