/* ============================================================
   ZTM CONTROL CENTRE - COMPLETE STYLESHEET (V29)
   ============================================================ */

/* 1. THEMA VARIABELEN (WHITE & DARK MODE) */
:root {
    --bg-body: #f0f2f5;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --text-main: #333333;
    --text-dim: #888888;
    --border-color: #dddddd;
    --box-bg: #f8f9fa;
    --log-bg: #1a1a1a;
    --log-text: #00ff41;
    --accent-blue: #2196F3;
    --accent-red: #f44336;
}

body.dark-mode {
    --bg-body: #050505;
    --bg-card: #0a0a0a;
    --bg-header: #0f0f0f;
    --text-main: #e0e0e0;
    --text-dim: #666666;
    --border-color: #222222;
    --box-bg: #111111;
    --log-bg: #020202;
    --log-text: #00ff41;
}

/* 2. ALGEMENE LAYOUT */
body { 
    margin: 0; 
    background: var(--bg-body); 
    color: var(--text-main); 
    font-family: 'Segoe UI', Roboto, sans-serif; 
    transition: background 0.3s, color 0.3s;
    letter-spacing: 0.5px;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
}

/* 3. HEADER & TOP NAVIGATIE */
.header-ui { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: var(--bg-header); 
    padding: 10px 20px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    margin-bottom: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

h1 { font-size: 18px; margin: 0; color: var(--accent-blue); font-weight: 800; text-transform: uppercase; }

.user-info { display: flex; align-items: center; gap: 10px; }

/* Knoppen bovenin */
.btn-top { 
    border: 1px solid rgba(255,255,255,0.1); 
    color: white; 
    padding: 8px 12px; 
    border-radius: 4px; 
    font-weight: bold; 
    cursor: pointer; 
    text-decoration: none; 
    font-size: 10px; 
    text-transform: uppercase; 
    transition: 0.2s; 
}

.theme-btn { background: var(--accent-blue); }
.btn-reset-top { background: #ff9800; }
.pink { background: #E91E63; }
.purple { background: #673AB7; }

.username { font-size: 12px; color: var(--accent-blue); font-weight: bold; margin-left: 10px; }
.logout-link { color: var(--text-dim); font-size: 10px; text-decoration: none; margin-left: 5px; }

/* 4. MATRIX / PIP GRID */
.module-box { 
    background: var(--bg-card); 
    padding: 20px; 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    margin-bottom: 20px; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

.pip-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(4, 105px); 
    gap: 12px; 
}

.small-box { 
    background: var(--box-bg); 
    border: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    border-radius: 6px; 
    transition: 0.1s; 
    text-align: center;
}

.small-box:hover { border-color: var(--accent-blue); background: rgba(33, 150, 243, 0.05); }

.box-nr { font-size: 18px; font-weight: 800; color: var(--text-dim); }
.box-txt { font-size: 12px; font-weight: bold; }

/* EXCLUSIEVE SELECTIE (BLAUWE CIRKEL/RAND) */
.box-selected { 
    border: 2px solid var(--accent-blue) !important; 
    background: rgba(33, 150, 243, 0.15) !important; 
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.5), inset 0 0 10px rgba(33, 150, 243, 0.2) !important; 
    z-index: 10;
}

.clicked-blue { background: var(--accent-blue) !important; color: white !important; }

/* 5. MIDDENVAK (UITGANG 13) */
.main-box { 
    grid-column: 2 / 4; 
    grid-row: 2 / 4; 
    background: #000000; 
    border: 2px solid var(--accent-blue); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    border-radius: 8px; 
}

.main-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; margin-bottom: 5px; }
.current-info { font-size: 20px; color: var(--accent-blue); font-weight: 900; text-shadow: 0 0 10px rgba(33, 150, 243, 0.5); }

/* 6. ADMIN LOCK STATUS */
.system-locked .small-box { 
    border-color: var(--accent-red) !important; 
    background: rgba(244, 67, 54, 0.05); 
    cursor: not-allowed; 
    opacity: 0.6; 
}

.main-box.lock-active { 
    background: #001f3f !important; 
    border: 3px solid var(--accent-blue) !important; 
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.4); 
}

.lock-text { color: var(--accent-blue); font-size: 26px; font-weight: 900; letter-spacing: 4px; }
.lock-label { background: var(--box-bg); padding: 5px 12px; border-radius: 20px; color: #ff9800; font-size: 10px; border: 1px solid var(--border-color); font-weight: bold; }

/* 7. GROOT SCHAKELEN GRID */
.groot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.btn-groot { 
    background: var(--box-bg); 
    border: 1px solid var(--border-color); 
    color: var(--text-main); 
    padding: 15px; 
    cursor: pointer; 
    font-weight: 800; 
    font-size: 11px; 
    border-radius: 6px; 
    transition: 0.2s;
}

.btn-groot:hover { border-color: var(--accent-red); }

.btn-groot.active { 
    background: var(--accent-red) !important; 
    border-color: #ffffff !important; 
    color: #ffffff !important; 
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.6); 
}

/* 8. LOG CONSOLE */
.log-console { 
    background: var(--log-bg); 
    height: 180px; 
    overflow-y: auto; 
    padding: 15px; 
    font-family: 'Courier New', monospace; 
    color: var(--log-text); 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
}

.log-entry { margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; text-align: left; }
.log-time { color: #666666; margin-right: 12px; font-size: 11px; }
.log-entry strong { color: #008f11; text-transform: uppercase; }

/* 9. ADMIN SECTIES (USERS / ZANDAR / LBAND) */
.admin-mode { background: var(--box-bg); padding: 5px 12px; border-radius: 20px; font-size: 10px; cursor: pointer; border: 1px solid var(--accent-blue); color: var(--accent-blue); font-weight: bold; }

.admin-section { border-left: 5px solid var(--accent-blue); }

.admin-input { 
    background: var(--bg-body); 
    border: 1px solid var(--border-color); 
    color: var(--text-main); 
    padding: 12px; 
    border-radius: 6px; 
    width: 100%; 
    box-sizing: border-box;
}

.users-table { width: 100%; border-collapse: collapse; }
.users-table td { padding: 12px; border-bottom: 1px solid var(--border-color); color: var(--text-main); font-weight: bold; }

.del-link { color: var(--accent-red); text-decoration: none; font-weight: bold; border: 1px solid var(--accent-red); padding: 4px 10px; border-radius: 4px; font-size: 10px; }
.del-link:hover { background: var(--accent-red); color: white; }

/* 10. FOOTER */
.main-footer { 
    text-align: center; 
    margin-top: 40px; 
    padding: 20px; 
    font-size: 11px; 
    color: var(--text-dim); 
    border-top: 1px solid var(--border-color); 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    font-weight: bold;
}

body.dark-mode .main-footer { color: #444444; }

/* CUSTOM SCROLLBAR VOOR LOGS */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ==========================
   RECEIVER SELECT (rx-*)
   Scoped styling: geen impact op andere pagina?s
   ========================== */

.rx-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.rx-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}

/* ?Screenshot vibe?: groene select tiles */
.rx-tile{
  background: linear-gradient(#1f7a1f, #196619);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.rx-line1{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  color:#eaffea;
}

.rx-nr{
  font-weight:900;
  font-size:14px;
  opacity:0.95;
}

.rx-name{
  font-weight:900;
  font-size:13px;
  text-align:right;
  flex:1;
}

.rx-indicators{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.rx-ind{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:18px;
  border-radius: 10px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.rx-on{ background:#f44336; }   /* muted */
.rx-off{ background:#4CAF50; }  /* audio door */
.rx-unk{ background:#777; }     /* onbekend */

.rx-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.rx-btn{
  flex:1;
  padding:8px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:900;
  background: rgba(0,0,0,0.25);
  color: #fff;
}

.rx-btn:hover{
  background: rgba(0,0,0,0.35);
}

.rx-hint{
  margin-top:10px;
  font-size:12px;
  color: var(--text-dim);
}
.groot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.btn-groot {
    width: 100%;
    padding: 12px;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 10px;
    transition: 0.2s;
}

.btn-groot:hover {
    background: var(--bg-body);
    border-color: var(--accent-blue);
}

.btn-groot.active {
    background: var(--accent-blue) !important;
    color: white !important;
}

.log-console {
    background: #000;
    color: #00ff41;
    font-family: monospace;
    padding: 10px;
    height: 150px;
    overflow-y: auto;
    font-size: 11px;
    border-radius: 4px;
}