/* Simpel, strak dark design - opgeschoond en gededupliceerd */

:root{
  --bg:#0b0f14;
  --card:#121826;
  --text:#eaf0ff;
  --muted:#aab4c8;
  --accent:#ff9800;
  --border:rgba(255,255,255,.10);
  --danger:#ff5a7a;
  --ok:#39d98a;
}

/* Reset / base */
*{box-sizing:border-box}
html{font-size:13.5px}
body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  background:
linear-gradient(
  rgba(10,14,20,0.85),
  rgba(10,14,20,0.85)
),
url("../assets/bgdash.webp") center/cover no-repeat;
 color:var(--text);
}
a{color:var(--accent);text-decoration:none}

/* Layout */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:14px;
}
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
  padding:4px 0;
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand .t{font-weight:800;letter-spacing:.02em;font-size:13px}
.brand .s{color:var(--muted);font-size:10px}

/* Cards / panels */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.card:hover{border-color:rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(0,0,0,.4)}

.grid{display:grid;gap:14px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}

.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.small{color:var(--muted);font-size:12px}

/* Forms / controls */
label{display:block;color:var(--muted);font-size:12px;margin:10px 0 6px}
input,textarea,select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  color:var(--text);
}
textarea{min-height:90px;resize:vertical}

/* Buttons / pills / badges */
.btnrow{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.btn{
  display:inline-block;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:5px 9px;
  border-radius:7px;
  cursor:pointer;
  font-size:11.5px;
  transition: background .15s ease, transform .12s ease;
}
.btn:hover{background:rgba(255,255,255,.07)}
.btn:active{transform:translateY(0.5px)}
.btn.primary{background:var(--accent);color:#16110a;border:none;font-weight:700}
.btn.danger{background:rgba(255,90,122,.14);border-color:rgba(255,90,122,.35)}
.btn.dash{background:rgba(4,241,114,.14);border-color:rgba(3,249,11,.35)}
.btn.tab.active{background:linear-gradient(135deg,#ffb000,#ff7a00);color:#000}

.pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.pill.open{border-color:rgba(57,217,138,.35);color:var(--ok)}
.pill.closed{border-color:rgba(255,90,122,.35);color:var(--danger)}

.flash{
  margin:12px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);

  text-align:center;        /* 🔑 tekst centreren */
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;   /* 🔑 horizontaal centreren */
line-height:1.4;
  gap:8px;
  text-align:center;
  animation:flashFade 0.4s ease 2s forwards;
}


/* status kleuren */
.flash.ok{ text-align:center;  border-color:rgba(57,217,138,.35)}
.flash.err{border-color:rgba(255,90,122,.35)}

/* 🔑 NA de animatie: echt weg */
@keyframes flashFade{
  to{
    opacity:0;
    margin:0;
    padding:0;
    height:0;
    border-width:0;
  }
}



/* Badges - unified and variants */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:999px;font-size:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.badge.new{color:#9fbaf0;background:rgba(159,186,240,.12);border-color:rgba(159,186,240,.25)}
.badge.busy{color:#e0b96a;background:rgba(224,185,106,.12);border-color:rgba(224,185,106,.25)}
.badge.done{color:#7fd6a2;background:rgba(127,214,162,.12);border-color:rgba(127,214,162,.25)}
.badge-info{color:#4fc3f7;background:rgba(79,195,247,.15);border-color:rgba(79,195,247,.45)}
.badge-warning{color:#ffb300;background:rgba(255,179,0,.15);border-color:rgba(255,179,0,.45)}
.badge-error{color:#ff5252;background:rgba(255,82,82,.15);border-color:rgba(255,82,82,.45)}
.badge-succes{color:#10ed6c;background:rgba(10,222,52,.15);border-color:rgba(255,82,82,.45)}
.badge-ip{color:#f6f4f9;background:rgba(255,82,82,.15);border-color:rgba(250,246,246,.45)}
.badge-verzoek{color:#4fc3f7;background:rgba(96,5,242,.15);border-color:rgba(79,195,247,.45)}
.badge-active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transform:none}

/* Request list / cards */
.reqlist{display:grid;gap:10px}
.reqcard{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:12px;
  padding:9px;
  transition:box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.reqcard:hover{box-shadow:0 0 0 1px rgba(255,152,0,.35), 0 8px 30px rgba(0,0,0,.6)}
.reqtop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.reqtitle{font-weight:700;font-size:14px;line-height:1.2}
.reqsub{color:var(--muted);font-size:10.5px;margin-top:4px}
.reqmsg{margin-top:10px;color:var(--text);opacity:.95;background:rgba(0,0,0,.30);padding:6px 8px;border-radius:8px}
.reqactions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.reqactions .btn{padding:5px 8px;border-radius:10px;font-size:11.5px}

/* Key/value rows */
.split{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kv{display:grid;gap:8px;margin-top:10px}
.kv .row{display:flex;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:10px}
.kv .row:first-child{border-top:0;padding-top:0}
.kv .k{color:var(--muted);font-size:10px}
.kv .v{font-weight:700;font-size:12px}

/* Dashboard grid */
.dashboard-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:12px;

}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:1024px){.dashboard-grid{grid-template-columns:1fr}}

.avatar{width:60px;height:60px;border-radius:12px;object-fit:cover;border:1px solid var(--border);background:rgba(0,0,0,.2)}
.dj-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;margin:auto;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.dj-avatar.placeholder{display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,.06);color:#bbb}

/* Theme system */
html[data-theme="dark"]{
  --bg:#0b0f14;--card:#121826;--text:#eaf0ff;--muted:#aab4c8;--accent:#ff9800;
}
html[data-theme="blue"]{
  --bg:#08121e;--card:#0f1b2e;--text:#eaf0ff;--muted:#9fb4d9;--accent:#4da3ff;
}
html[data-theme="orange"]{
  --bg:#140b05;--card:#1f140c;--text:#fff1e6;--muted:#e0b899;--accent:#ff8c1a;
}
html[data-theme="light"]{
  --bg:#f4f6fb;--card:#ffffff;--text:#1c2333;--muted:#667085;--accent:#ff9800;
}
.theme-switcher{display:flex;gap:6px}
.theme-switcher button{border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:8px}
.theme-switcher button.active{background:var(--accent);color:#111;font-weight:700}

/* Responsive tuning */
@media (min-width:768px) and (max-width:1199px){
  html{font-size:15px}
  .container{max-width:100%;padding:16px}
  .card{padding:14px;border-radius:12px}
  .reqcard{padding:10px}
  .reqtitle{font-size:15px}
  .reqmsg{padding:6px 8px;font-size:14px}
  .btn{padding:6px 8px;font-size:13px}
  .reqactions .btn{padding:6px 8px;font-size:12px}
  .top{gap:10px}
}

@media (max-width:1024px){
  html{font-size:12.8px}
  .dashboard-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  html{font-size:13px}
  .container{max-width:100%;padding:12px}
  .grid2{grid-template-columns:1fr}
  .dashboard-grid{grid-template-columns:1fr}
}

@media (max-width:768px){
  html{font-size:12.5px}
  .container{padding:10px}
  .btn{font-size:11px;padding:5px 8px}
  .avatar{width:52px;height:52px}
  .dj-avatar{width:52px;height:52px}
}






#streamWidget .row:first-child{
  border-top:0;
  padding-top:0;
}

/* =========================
   Stream widget: adaptive ticker
   ========================= */

/* =========================
   Stream widget: GRID layout (FIX)
   ========================= */

#streamWidget .row{
  display: grid;
  grid-template-columns: 90px 1fr; /* label | waarde */
  align-items: center;
  gap: 10px;
}

/* label */
#streamWidget .row .k{
  white-space: nowrap;
}

/* waarde */
#streamWidget .row .v{
  min-width: 0;
  overflow: hidden;
}


/* =========================
   INLINE NOW PLAYING TICKER (STABLE)
   ========================= */

.np-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* dit element wordt gemeten */
.np-text{
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* scroll actief */
.np-text.scroll{
  
    animation: np-scroll 14s linear infinite;
}

@keyframes np-scroll{
  from { transform: translateX(10%); }
  to   { transform: translateX(-100%); }
}