/* ============================================================
   CIS WS2025 Hardening Tracker - Styles
   moresecurity.info
   ============================================================ */

  :root {
    --bg: #07090d;
    --surface: #0c0f16;
    --surface2: #111520;
    --surface3: #161c2a;
    --border: #1a2132;
    --border2: #22304a;
    --accent: #00c8ff;
    --accent2: #0088bb;
    --green: #00e676;
    --green2: #00a854;
    --red: #ff4444;
    --orange: #ff8c00;
    --yellow: #ffd600;
    --purple: #b388ff;
    --text: #dde4f0;
    --text2: #7a8fb5;
    --text3: #3d4f6e;
    --mono: 'Share Tech Mono', monospace;
    --sans: 'Barlow', sans-serif;
    --cond: 'Barlow Condensed', sans-serif;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100vh; overflow-x:hidden; }
  body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,200,255,.008) 3px,rgba(0,200,255,.008) 4px);
  }

  /* HEADER */
  header {
    background:linear-gradient(135deg,#07090d,#0c1220 60%,#07090d);
    border-bottom:1px solid var(--border2);
    padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:200; backdrop-filter:blur(20px);
  }
  .hdr-left { display:flex; align-items:center; gap:14px; }
  .shield { width:40px;height:40px;background:linear-gradient(135deg,var(--accent),#006b99);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
    animation:pulse 3s ease-in-out infinite; }
  @keyframes pulse{0%,100%{filter:drop-shadow(0 0 4px rgba(0,200,255,.3))}50%{filter:drop-shadow(0 0 12px rgba(0,200,255,.6))}}
  .hdr-title h1 { font-family:var(--cond);font-size:20px;font-weight:900;letter-spacing:2px;text-transform:uppercase;line-height:1; }
  .hdr-title p { font-family:var(--mono);font-size:10px;color:var(--text2);letter-spacing:.8px;margin-top:3px; }
  .hdr-right { display:flex;gap:8px;align-items:center; }
  .btn { padding:7px 16px;border-radius:4px;font-family:var(--cond);font-size:12px;font-weight:700;
    letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:1px solid;transition:all .2s; }
  .btn-outline { background:transparent;border-color:var(--border2);color:var(--text2); }
  .btn-outline:hover { border-color:var(--accent);color:var(--accent);background:rgba(0,200,255,.05); }
  .btn-danger { background:transparent;border-color:var(--red);color:var(--red); }
  .btn-danger:hover { background:rgba(255,68,68,.1); }

  /* LAYOUT */
  .layout { display:grid;grid-template-columns:1fr 290px;min-height:calc(100vh - 69px); }
  .main { padding:20px 24px;overflow-y:auto;border-right:1px solid var(--border); }
  .sidebar { padding:20px 18px;background:var(--surface);position:sticky;top:69px;
    height:calc(100vh - 69px);overflow-y:auto; }

  /* SEARCH + FILTERS */
  .top-bar { display:flex;gap:10px;margin-bottom:16px;align-items:center; }
  .search-wrap { position:relative;flex:1; }
  .search-wrap input {
    width:100%;padding:8px 12px 8px 34px;background:var(--surface);border:1px solid var(--border2);
    border-radius:5px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;
    transition:border-color .2s;
  }
  .search-wrap input:focus { border-color:var(--accent); }
  .search-wrap::before { content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%);
    color:var(--text3);font-size:14px; }
  .scope-tabs { display:flex;gap:0;background:var(--surface);border-radius:5px;padding:3px;border:1px solid var(--border); }
  .scope-tab { padding:5px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.8px;
    cursor:pointer;transition:all .2s;color:var(--text2);font-family:var(--cond);text-transform:uppercase;
    border:none;background:transparent; }
  .scope-tab.active { background:var(--accent);color:#000; }

  /* FILTER BAR */
  .filter-bar { display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap; }
  .cat-btn { padding:5px 12px;border-radius:16px;font-size:10px;font-weight:600;letter-spacing:.6px;
    cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--text3);
    text-transform:uppercase;font-family:var(--mono);transition:all .2s; }
  .cat-btn.active,.cat-btn:hover { border-color:var(--accent);color:var(--accent);background:rgba(0,200,255,.07); }

  /* SECTION */
  .section { margin-bottom:24px; }
  .sec-header { display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;
    border-bottom:1px solid var(--border); }
  .sec-num { font-family:var(--mono);font-size:10px;color:var(--accent);background:rgba(0,200,255,.1);
    border:1px solid rgba(0,200,255,.25);padding:2px 7px;border-radius:3px; }
  .sec-title { font-family:var(--cond);font-size:15px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; }
  .sec-count { margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text3); }
  .sec-prog { height:2px;background:var(--border);border-radius:1px;margin-bottom:12px;overflow:hidden; }
  .sec-prog-bar { height:100%;background:linear-gradient(90deg,var(--green2),var(--green));transition:width .4s; }

  /* CARD */
  .card { background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:13px 16px;
    margin-bottom:6px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden; }
  .card::before { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border2);transition:background .2s; }
  .card:hover { border-color:var(--border2);background:var(--surface2);transform:translateX(2px); }
  .card.checked { border-color:rgba(0,230,118,.25);background:rgba(0,230,118,.03); }
  .card.checked::before { background:var(--green); }
  .card.expanded { border-color:rgba(0,200,255,.25); }
  .card.dc-only { --border-tint:rgba(180,136,255,.2); }
  .card.ms-only { --border-tint:rgba(0,200,255,.2); }

  .card-top { display:flex;align-items:flex-start;gap:12px; }
  .checkbox { width:18px;height:18px;border:2px solid var(--border2);border-radius:3px;flex-shrink:0;
    margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:11px; }
  .card.checked .checkbox { background:var(--green);border-color:var(--green);color:#000; }
  .card-info { flex:1;min-width:0; }
  .card-title-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px; }
  .card-title { font-size:13px;font-weight:600;color:var(--text);line-height:1.3; }
  .card-id { font-family:var(--mono);font-size:9px;color:var(--accent);background:rgba(0,200,255,.08);
    border:1px solid rgba(0,200,255,.18);padding:2px 5px;border-radius:2px;flex-shrink:0; }
  .badge { font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.5px;
    padding:2px 6px;border-radius:2px;text-transform:uppercase;flex-shrink:0; }
  .badge-dc { background:rgba(180,136,255,.12);color:var(--purple);border:1px solid rgba(180,136,255,.25); }
  .badge-ms { background:rgba(0,200,255,.1);color:var(--accent);border:1px solid rgba(0,200,255,.2); }
  .badge-auto { background:rgba(0,230,118,.08);color:var(--green);border:1px solid rgba(0,230,118,.2); }
  .badge-manual { background:rgba(255,140,0,.1);color:var(--orange);border:1px solid rgba(255,140,0,.25); }
  .card-desc { font-size:11px;color:var(--text2);line-height:1.5; }

  /* DETAILS */
  .card-details { display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border); }
  .card.expanded .card-details { display:block; }
  .detail-grid { display:grid;grid-template-columns:110px 1fr;gap:6px 10px;margin-bottom:10px; }
  .dl { font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;padding-top:1px; }
  .dv { font-size:11px;color:var(--text2);line-height:1.5; }
  .dv-good { color:var(--green); }
  .cmd { background:#040609;border:1px solid var(--border);border-radius:3px;padding:8px 10px;
    font-family:var(--mono);font-size:10px;color:#6ec6ff;position:relative;white-space:pre-wrap;word-break:break-all; }
  .copy-btn { position:absolute;top:5px;right:5px;padding:2px 7px;font-size:9px;font-family:var(--cond);
    background:var(--surface3);border:1px solid var(--border2);color:var(--text3);border-radius:2px;
    cursor:pointer;text-transform:uppercase;letter-spacing:.4px;transition:all .2s; }
  .copy-btn:hover { color:var(--accent);border-color:var(--accent); }
  .tip { background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.15);border-radius:3px;
    padding:8px 10px;font-size:11px;color:var(--text2);display:flex;gap:8px;align-items:flex-start;margin-top:6px; }
  .tip::before { content:'💡';flex-shrink:0; }

  /* SIDEBAR */
  .sb-label { font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text3);
    text-transform:uppercase;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border); }
  .sb-section { margin-bottom:20px; }
  .rings { display:flex;gap:12px;justify-content:center;margin-bottom:4px; }
  .ring-wrap { position:relative;width:76px;height:76px; }
  .ring-wrap svg { transform:rotate(-90deg);width:76px;height:76px; }
  .ring-bg { fill:none;stroke:var(--border);stroke-width:6; }
  .ring-v { fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .5s; }
  .ring-inner { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
  .ring-num { font-family:var(--cond);font-size:18px;font-weight:900;line-height:1; }
  .ring-pct { font-family:var(--mono);font-size:8px;color:var(--text3); }
  .ring-sub { font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;text-align:center;margin-top:2px; }
  .ring-group { display:flex;flex-direction:column;align-items:center;gap:2px; }

  .bar-wrap { margin-bottom:7px; }
  .bar-row { display:flex;justify-content:space-between;margin-bottom:3px; }
  .bar-name { font-family:var(--mono);font-size:9px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px; }
  .bar-pct { font-family:var(--mono);font-size:9px; }
  .bar { height:4px;background:var(--border);border-radius:2px;overflow:hidden; }
  .bar-fill { height:100%;border-radius:2px;transition:width .5s; }

  .stats { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
  .stat { background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:8px;text-align:center; }
  .stat-n { font-family:var(--cond);font-size:20px;font-weight:900;line-height:1;margin-bottom:2px; }
  .stat-l { font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px; }

  .gap-item { display:flex;gap:7px;align-items:flex-start;padding:5px 0;border-bottom:1px solid var(--border);font-size:10px;color:var(--text2); }
  .gap-item:last-child { border-bottom:none; }
  .gap-dot { width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:2px; }

  .export-btn { width:100%;padding:8px;background:transparent;border:1px solid var(--border2);color:var(--text2);
    border-radius:4px;font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.8px;
    text-transform:uppercase;cursor:pointer;transition:all .2s;margin-bottom:5px;display:flex;align-items:center;justify-content:center;gap:6px; }
  .export-btn:hover { border-color:var(--accent);color:var(--accent);background:rgba(0,200,255,.04); }

  .progress-banner { background:linear-gradient(135deg,rgba(0,200,255,.08),rgba(0,200,255,.03));
    border:1px solid rgba(0,200,255,.2);border-radius:5px;padding:12px 16px;margin-bottom:18px;
    display:flex;align-items:center;gap:16px; }
  .pb-text { font-family:var(--mono);font-size:11px;color:var(--text2); }
  .pb-pct { font-family:var(--cond);font-size:28px;font-weight:900;color:var(--accent);line-height:1; }
  .pb-bar { flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden; }
  .pb-bar-fill { height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .5s; }

  .toast { position:fixed;bottom:20px;right:20px;background:var(--surface3);border:1px solid var(--green);
    color:var(--green);padding:9px 14px;border-radius:4px;font-family:var(--mono);font-size:11px;
    z-index:9998;opacity:0;transform:translateY(8px);transition:all .3s;pointer-events:none; }
  .toast.show { opacity:1;transform:translateY(0); }
  .hidden { display:none!important; }
  ::-webkit-scrollbar { width:4px; }
  ::-webkit-scrollbar-track { background:var(--bg); }
  ::-webkit-scrollbar-thumb { background:var(--border2);border-radius:2px; }


  /* INFO PANEL */
  .info-panel { background:var(--surface2);border:1px solid var(--border2);border-radius:5px;padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:12px; }
  .info-row { display:flex;gap:12px;align-items:flex-start; }
  .info-icon { font-size:16px;flex-shrink:0;margin-top:1px; }
  .info-label { display:block;font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:4px; }
  .info-text { font-size:12px;color:var(--text2);line-height:1.6;margin:0; }
  .info-divider { border:none;border-top:1px solid var(--border);margin:2px 0; }


  /* ============================================================
     MOBILE RESPONSIVE
     ============================================================ */

  /* Mobile header */
  @media (max-width: 768px) {
    header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 16px;
    }
    .hdr-title h1 { font-size: 14px; }
    .hdr-sub { display: none; }
    .hdr-right {
      width: 100%;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
    .scope-tabs { width: 100%; }
    .scope-tab { flex: 1; font-size: 10px; padding: 6px 8px; }
    .hdr-actions { display: flex; gap: 6px; width: 100%; }
    .hdr-actions .btn { flex: 1; font-size: 10px; padding: 6px 8px; }
  }

  /* Mobile layout — stack sidebar below controls */
  @media (max-width: 900px) {
    .layout {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }
    .sidebar {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 85%;
      max-width: 340px;
      z-index: 300;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      overflow-y: auto;
      border-left: 1px solid var(--border2);
      box-shadow: -8px 0 32px rgba(0,0,0,0.6);
    }
    .sidebar.open {
      transform: translateX(0);
    }
    .sidebar-close {
      display: flex;
    }
    #btnSidebar {
      display: inline-flex;
    }
    /* Overlay when sidebar open */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 299;
    }
    .sidebar-overlay.show {
      display: block;
    }
  }

  /* Hide toggle btn and close btn on desktop */
  @media (min-width: 901px) {
    #btnSidebar { display: none; }
    .sidebar-close { display: none; }
    .sidebar { transform: none !important; }
  }

  /* Mobile card improvements */
  @media (max-width: 600px) {
    .card-top { gap: 8px; }
    .card-title { font-size: 11px; }
    .card-id { font-size: 9px; }
    .card-title-row { flex-wrap: wrap; gap: 4px; }
    .detail-grid { grid-template-columns: 1fr; gap: 6px; }
    .dl { font-size: 9px; padding-top: 0; }
    .dv { font-size: 11px; }
    .cmd { font-size: 10px; padding: 8px 10px; padding-right: 60px; }
    .info-text { font-size: 11px; }
    .filter-bar { gap: 4px; padding: 8px 12px; }
    .cat-btn { font-size: 9px; padding: 4px 8px; }
    .rings { gap: 16px; }
    .ring-wrap { width: 70px; height: 70px; }
    .progress-banner { padding: 10px 14px; gap: 10px; }
    .pb-pct { font-size: 22px; }
  }

  /* Sidebar close button */
  .sidebar-close {
    background: none;
    border: 1px solid var(--border2);
    color: var(--text2);
    font-family: var(--mono);
    font-size: 11px;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 4px;
    margin: 12px 16px 0;
    width: calc(100% - 32px);
  }
  .sidebar-close:hover { color: var(--text); border-color: var(--accent); }

  /* Add hdr-actions wrapper style */
  .hdr-actions { display: flex; gap: 8px; align-items: center; }


  @media print {
    .sidebar,.hdr-right,.top-bar,.filter-bar { display:none; }
    .layout { grid-template-columns:1fr; }
    .card-details { display:block!important; }
  }