/* ════════════════════════════════════════════════════════════════════════════
   base.css — GlobalSecurity.nu gedeelde stijlen
   Geladen door index.php én pro.php
   ════════════════════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box}

/* ── GEDEELDE CSS VARIABELEN ── */
:root {
  --bg2:     #090b14;
  --bg3:     #0d1020;
  --border:  #181b2e;
  --border2: #20243a;
  --text:    #e8edff;
  --muted:   #7078a0;
  --muted2:  #8a94b8;

  /* Dreigingsniveaus */
  --t1: #22c55e; --t1bg: #0a1f12;
  --t2: #84cc16; --t2bg: #111e05;
  --t3: #eab308; --t3bg: #1f1a05;
  --t4: #f97316; --t4bg: #1f1005;
  --t5: #ef4444; --t5bg: #1f0505;
  --t6: #dc2626; --t6bg: #280000;
  --t7: #991b1b; --t7bg: #330000;

  /* Kleuren */
  --red:    #ef4444;
  --orange: #f97316;
  --yellow: #f0c44a;
  --blue:   #4a9af0;
  --purple: #a04af0;
}

/* ── BODY BASIS ── */
body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── GRID ACHTERGROND ── */
body::before {
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:0;
}

.app { position:relative;z-index:1; }

/* ── TOPBAR BASIS ── */
.topbar {
  display:flex;align-items:center;gap:16px;
  background:var(--bg2);
  position:sticky;top:0;z-index:100;
}
.logo {
  font-family:'Bebas Neue',sans-serif;
  display:flex;align-items:center;gap:10px;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SIDEBAR BASIS ── */
.sidebar {
  background:var(--bg2);
  border-right:1px solid var(--border);
  overflow-y:auto;
}

/* ── PANELS ── */
.panel { display:none; }
.panel.active { display:block; }
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── LOADING & EMPTY STATES ── */
.loading { color:var(--text);font-size:13px;padding:20px;letter-spacing:1px; }
.empty-state { text-align:center;padding:60px 20px;color:var(--text);font-size:13px; }
.empty-state .icon { font-size:32px;margin-bottom:12px; }
.shimmer {
  background:linear-gradient(90deg,var(--border) 25%,var(--bg3) 50%,var(--border) 75%);
  background-size:200% 100%;animation:shim 1.5s infinite;
  height:12px;border-radius:2px;margin-bottom:8px;
}
@keyframes shim{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── HAMBURGER KNOP ── */
.hamburger {
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;
  background:none;border:1px solid var(--border2);
  cursor:pointer;flex-shrink:0;transition:border-color .2s;
  padding:0;position:relative;z-index:110;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.hamburger:hover { border-color:var(--accent,#4af0c4); }
.hamburger span {
  display:block;width:16px;height:1.5px;
  background:var(--text);transition:all .25s ease;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0;transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── MOBIELE SIDEBAR OVERLAY ── */
.sidebar-overlay {
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);z-index:200;
  opacity:0;transition:opacity .25s ease;
  pointer-events:none;
}
.sidebar-overlay.visible { opacity:1;pointer-events:auto; }

/* ── GEDEELDE MOBIELE REGELS ── */
@media(max-width:768px) {
  .hamburger { display:flex; }

  .sidebar {
    position:fixed;top:0;left:0;bottom:0;
    width:260px;z-index:201;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    /* hoogte reset voor sticky desktop rule */
    height:100vh;top:0;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay { display:block; }
}

/* ── BRONNEN TABLE (gedeeld) ── */
.sources-table {
  width:100%;border-collapse:collapse;font-size:13px;
}
.sources-table th {
  text-align:left;padding:8px 12px;
  font-size:13px;letter-spacing:.5px;color:var(--muted);
  border-bottom:1px solid var(--border2);text-transform:uppercase;
}
.sources-table td {
  padding:8px 12px;border-bottom:1px solid var(--border);
  color:var(--text);vertical-align:top;
}
.sources-table tr:hover td { background:var(--bg3); }
.sources-table a { color:var(--blue);text-decoration:none; }
.sources-table a:hover { color:var(--accent); }
.cat-pill {
  display:inline-block;font-size:13px;padding:1px 6px;
  border:1px solid var(--border2);margin:1px;
}

/* ── CATEGORIE TAGS (gedeeld) ── */
.item-cat-tag {
  display:inline-block;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:2px 6px;border:1px solid;
  margin-left:8px;vertical-align:middle;opacity:0.85;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}