:root{ --bg:#0b0f14; --fg:#e6edf3; --muted:#a8b3c1; --brand:#8fc7ff; --brand-2:#a7e3ff; --card:#11161c; --soft:#0e1319; --line:#1a222b; --shadow:0 10px 28px rgba(0,0,0,.32); --radius:18px; --today-bg:#0f2030; --today-br:#65b7ff; }
*{ box-sizing:border-box }
html{ font-size:16px; height:100%; overflow-x:hidden; width:100%; scrollbar-gutter:stable }
@media (max-width:1024px){ html{ font-size:15px } }
@media (max-width:640px){ html{ font-size:16px } }
body{ margin:0; padding:24px; min-height:100%; overflow-x:hidden; overflow-y:auto; width:100%; box-sizing:border-box; background:var(--bg); background-image:linear-gradient(rgba(11,15,20,.75),rgba(11,15,20,.75)),url('/uploads/backgrounds/background.webp'),url('/uploads/backgrounds/background.jpg'),url('/uploads/background.webp'),url('/uploads/background.jpg'); background-position:center center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; line-height:1.6; font-size:1rem; position:relative; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none }
input.password-field, input[type="password"], input[id="password"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; cursor: text !important; }
body.index-page:not([style*="background-image"]){ background-image:linear-gradient(rgba(11,15,20,.75),rgba(11,15,20,.75)),url('/uploads/index-backgrounds/index-background.webp'),url('/uploads/index-backgrounds/index-background.jpg'),url('/uploads/backgrounds/background.webp'),url('/uploads/backgrounds/background.jpg'),url('/uploads/background.webp'),url('/uploads/background.jpg') }
img,video,iframe,table{ max-width:100% }
a{ color:#a7e3ff; text-decoration:none } a:hover{text-decoration:underline}
.wrap{ max-width:1360px; margin:0 auto; width:100%; box-sizing:border-box; padding:0 24px }
@media (max-width:768px){ .wrap{ padding:0 16px } }
.request-wrap{ max-width:1100px; width:100%; box-sizing:border-box; margin:0 auto; padding:0 }
img,video,iframe{ max-width:100%; height:auto }
.request-wrap .card{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:all .3s ease }
.request-wrap .card:not(.request-form-card):hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.5) }
.request-wrap .card.request-form-card{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow) }
.request-wrap .req-item{ background:#0a0f14; border:1px solid #1e2a38 }
.request-wrap .live-np-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
@media (max-width:640px){ .request-wrap .live-np-grid{ grid-template-columns:1fr!important; gap:1rem } .request-wrap .now-card{ flex-direction:column!important; align-items:stretch!important; gap:.8rem; padding:1.2rem } .request-wrap .now-card__cover-wrap{ width:100%!important; max-width:100%!important; flex:0 0 auto!important; min-width:0!important; justify-content:center; margin:0 } .request-wrap .now-card__cover,.request-wrap .now-card__cover--placeholder{ width:100%!important; max-width:100%!important; height:auto!important; aspect-ratio:1/1; border-radius:12px; margin:0 } .request-wrap .now-card__content{ width:100%!important; max-width:100%!important; min-width:0!important; flex:1 1 auto; margin:0 } }
.request-wrap .page-title{ background:linear-gradient(135deg,#8fc7ff,#a7e3ff,#8fc7ff); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent }
.request-wrap input,.request-wrap textarea{ background:linear-gradient(180deg,rgba(13,18,23,.95),rgba(8,12,17,.95)); border:1px solid rgba(143,199,255,.2); transition:all .25s ease; position:relative }
.request-wrap input:focus,.request-wrap textarea:focus{ border-color:#8fc7ff; box-shadow:0 0 0 3px rgba(143,199,255,.2),0 4px 12px rgba(143,199,255,.15); transform:translateY(-1px) }
.request-wrap .btn{ background:linear-gradient(135deg,#a7e3ff,#8fc7ff); box-shadow:0 4px 12px rgba(143,199,255,.2),inset 0 1px 0 rgba(255,255,255,.2); transition:all .25s ease; position:relative; overflow:hidden }
.request-wrap .btn::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transition:left .5s ease }
.request-wrap .btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(143,199,255,.25),inset 0 1px 0 rgba(255,255,255,.3) }
.request-wrap .btn:hover::before{ left:100% }
.request-wrap .btn:active{ transform:translateY(0) }
.request-wrap .btn.ghost{ background:transparent; color:#dfe2ee; border:1px dashed #2a3d52; box-shadow:none }
.request-wrap .btn.ghost:hover{ box-shadow:none; transform:none; background:rgba(143,199,255,.05); border-color:#4a6b8a }
.request-wrap #captchaWrap{ display:flex!important; flex-direction:row!important; align-items:center; gap:.7rem }
.request-wrap #captchaWrap #capQuestion{ flex:0 0 auto }
.request-wrap #captchaWrap #capAnswer{ flex:0 1 auto; max-width:160px }
.request-wrap #captchaWrap #capRefresh{ flex:0 0 auto; margin-left:0; height:auto }
.request-wrap label{ color:#cfe2f7; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.85em; margin-bottom:.5rem }
.request-wrap .now-card{ background:#0a0f14; border-radius:16px; padding:1.2rem; border:1px solid #1e2a38 }
.request-wrap .now-card strong{ color:#9fb6cc; font-weight:600 }
.request-wrap .now-card #onAir{ color:#eee; font-weight:700; font-size:1.05em; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto }
.request-wrap .now-card #onAir span[style*="#fb8502"]{ color:#fb8502!important }
.request-wrap .now-card #npArtist{ color:#fb8502; font-weight:700; font-size:1.05em; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto }
.request-wrap .now-card #program{ font-weight:600; color:#eee; word-wrap:break-word; overflow-wrap:break-word }
.request-wrap .now-card #program span{ color:#eee; font-weight:700 }
.request-wrap .now-card #npTitle{ color:#eee; font-weight:700; word-wrap:break-word; overflow-wrap:break-word }
.request-wrap .now-card #since{ font-weight:600; color:#9fb6cc; word-wrap:break-word; overflow-wrap:break-word }
.request-wrap .now-card #since .kv-time{ color:#8fc7ff; font-weight:600; word-wrap:break-word; overflow-wrap:break-word }
.request-wrap .now-card #npUpdated{ color:#8fc7ff; font-weight:600; word-wrap:break-word; overflow-wrap:break-word }
.request-wrap .now-card #npUpdated::before{ content:'Laatst geüpdatet: '; color:#9fb6cc; font-weight:600 }
.request-wrap .req-item strong{ color:#cfe2f7; font-weight:700 }
.request-wrap .req-item{ color:#9fb6cc }
.request-wrap .req-item > div:first-child{ color:#8fc7ff; font-weight:600 }
.request-wrap .notice{ background:linear-gradient(135deg,rgba(143,199,255,.1),rgba(167,227,255,.05)); border:1px solid rgba(143,199,255,.2); border-radius:12px; padding:1rem }
.site-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:1rem }
.site-header[style*="text-align:center"]{ justify-content:center; flex-direction:column; text-align:center }
.site-header h1{ margin:0; font-size:clamp(22px,2.8vw,32px); background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; flex:1 }
.site-header[style*="text-align:center"] h1{ flex:none }
.site-header > div{ display:flex; align-items:center }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; align-items:stretch }
.col-12{ grid-column:span 12 } .col-6{ grid-column:span 6 }
.dj-top-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; align-items:stretch }
.dj-top-card{ display:flex; flex-direction:column; gap:1rem; height:100% }
.dj-top-card .page-title{ margin:0 }
.dj-top-card__section{ display:flex; flex-direction:column; gap:.8rem }
.dj-top-card__subtitle{ margin:0; font-size:clamp(16px,1.6vw,18px); font-weight:650; color:#8fc7ff; letter-spacing:.01em }
/* maak Huidige show kaart visueel gelijk aan andere .card secties en compacter uitgelijnd */
.dj-top-divider{ display:none }
.dj-top-card .dj-status{ gap:1rem; align-items:center }
.dj-top-card .dj-status-avatar-wrap{ width:120px; height:120px }
.dj-top-card .dj-status-info{ gap:.45rem }
.dj-controls-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:stretch }
.dj-controls-grid > .card{ grid-column:1 / -1 }
.col-7{ grid-column:span 7 } .col-5{ grid-column:span 5 }
@media (max-width:1024px){ .col-7,.col-5{ grid-column:span 12 } .dj-controls-grid{ grid-template-columns:1fr } .requests-filters{ flex-wrap:wrap } #dashboardStats{ grid-template-columns:repeat(3,1fr)!important } }
@media (max-width:800px){ .grid{ grid-template-columns:1fr!important } .col-6,.col-7,.col-5{ grid-column:span 12!important } .dj-controls-grid{ grid-template-columns:1fr } .dj-top-grid{ grid-template-columns:1fr } #dashboardStats{ grid-template-columns:repeat(2,1fr)!important } }
@media (max-width:480px){ #dashboardStats{ grid-template-columns:1fr!important } }
@media (max-width:1024px){ .page-title{ font-size:clamp(18px,2.5vw,22px)!important } .card{ padding:18px } .dj-status-line{ font-size:1.05em!important } .now-card__content{ font-size:1rem } }
@media (max-width:800px){ .dj-status-line{ font-size:1em!important } table{ font-size:.9rem } .status-card__dj{ font-size:1.1rem!important } .status-card__row{ font-size:1rem!important } }
@media (max-width:640px){ body{ padding:16px; line-height:1.65 } html{ font-size:16px } .card{ padding:16px; font-size:1.05rem } .btn{ min-height:44px; padding:.8rem 1.1rem; font-size:1rem; line-height:1.5 } input,select,textarea{ padding:.9rem 1rem; font-size:16px; line-height:1.5 } label{ font-size:1rem; margin-top:.8rem } .inline-controls{ flex-direction:column; gap:.8rem!important } .inline-controls>*{ flex:1 1 auto!important; width:100%; min-width:auto!important } .dj-manual-card .inline-controls>*:not(.btn){ min-width:auto } .dj-controls-grid{ gap:12px } table{ font-size:.95rem; line-height:1.6 } th,td{ padding:.8rem .6rem } .actions{ display:flex; flex-wrap:wrap; gap:.5rem } .actions button{ margin:0; padding:.5rem .7rem; font-size:.9rem } .requests-filters{ flex-wrap:wrap; gap:.6rem!important } .request-search-input{ max-width:100%; width:100%; font-size:16px!important } .request-filter-btn{ font-size:1rem!important; padding:.7rem .9rem!important } .page-title{ font-size:clamp(20px,3vw,22px)!important; margin-bottom:16px!important } .now-card{ gap:1.2rem } .now-card__content{ font-size:1.05rem; gap:.5rem } .status-card__dj{ font-size:1.2rem!important } .status-card__row{ font-size:1.05rem!important; line-height:1.6 } .dj-status-line{ font-size:1.1em!important; line-height:1.5 } .muted{ font-size:1rem!important } .request-wrap #captchaWrap{ flex-direction:column!important; align-items:stretch!important; gap:.6rem!important } .request-wrap #captchaWrap > div{ width:100% } .request-wrap #capAnswer{ max-width:100%!important; width:100% } .request-wrap #capRefresh{ width:auto!important; align-self:flex-start; font-size:.9rem; padding:.65rem 1rem!important; min-height:44px; flex:0 0 auto } .request-wrap #submitBtn{ width:100%; margin-top:.8rem } }
.card{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 16px 18px }
.page-title{ margin:0 0 14px; font-size:clamp(18px,2.2vw,22px); background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
label{ display:block; margin-top:.6rem; font-weight:650 }
input,textarea,select{ width:100%; margin-top:.28rem; padding:.7rem .8rem; background:#0d1217; color:var(--fg); border:1px solid #22303d; border-radius:10px }
input::placeholder,textarea::placeholder{ color:#90a0b2 }
input:focus,textarea:focus,select:focus{ border-color:#2e4b66; outline:0; box-shadow:0 0 0 3px rgba(143,211,255,.18) }
.inline-controls{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center }
.inline-controls>*{ flex:1 1 220px }
.inline-controls .btn{ flex:0 0 auto }
.btn{ appearance:none; border:0; cursor:pointer; border-radius:999px; padding:.65rem .9rem; min-height:40px; font-weight:800; color:#0b1824; background:linear-gradient(180deg,#c2e5ff,#9ad3ff); border:1px solid rgba(255,255,255,.35); box-shadow:0 6px 16px rgba(0,0,0,.35) }
.btn.ghost{ background:transparent; color:#dfe2ee; border:1px dashed #2a3d52 }
.btn.outline{ background:#0f141a; color:#e6f2ff; border:1px solid #2a3d52 }
table{ width:100%; border-collapse:collapse; font-size:.95rem }
th,td{ border-bottom:1px solid var(--line); padding:.65rem .5rem; text-align:left; vertical-align:top; word-break:break-word }
thead th{ color:#cfe2f7; font-weight:700 }
tbody tr:hover{ background:#0f151c }
#reqTable tbody{ min-height:0 }

.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:inline-block; border:1px solid rgba(255,255,255,.08); }
.avatar.sm{ width:48px; height:48px; }
.avatar.lg{ width:72px; height:72px; }

.kv-line{ display:flex; gap:.5rem; align-items:baseline }
.kv-time{ color:#8fc7ff; font-weight:600 }

.req-item{ background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:.75rem .85rem; margin:.6rem 0 }
.req-item-split{ display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap }
.req-item-left{ flex:1; min-width:200px }
.req-item-right{ flex:2; min-width:200px }
.req-item-time{ color:#8fc7ff; font-weight:600; font-size:.9em; margin-bottom:.6rem }
.req-item-track{ display:flex; flex-direction:column; gap:.4rem }
.req-item-requester{ display:flex; flex-direction:column; gap:.4rem }
.req-item-message{ margin-top:.4rem; word-wrap:break-word; word-break:break-word; overflow-wrap:break-word }
@media (max-width:640px){
  .req-item-split{ flex-direction:column; gap:1rem }
  .req-item-left,.req-item-right{ min-width:100%; width:100% }
}

.calendar{ user-select:none }
.cover-hint{ font-size:.78rem; color:#6e8095; margin-top:.35rem }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 .6rem }
.cal-title{ font-weight:800; letter-spacing:.2px }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; color:#cfe2f7; font-weight:700; text-align:center }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; grid-auto-rows:minmax(60px,auto) }
.cal-cell{ border:1px solid var(--line); background:#0e1419; border-radius:8px; padding:.5rem; min-height:54px; cursor:pointer }
.cal-cell.dim{ opacity:.45 }
.cal-cell .d{ font-size:.9rem; color:#a8b3c1; font-weight:700 }
.cal-cell.today{ border-color:#65b7ff; box-shadow:inset 0 0 0 1px #65b7ff; background:#0f2030 }
.cal-cell.selected{ border-color:#8fc7ff; box-shadow:0 0 0 2px rgba(143,199,255,.35); }
.cal-dot{ width:6px; height:6px; border-radius:50%; background:#8fc7ff; display:inline-block; margin-right:4px }
.cal-preview{ display:none; margin-top:.8rem; padding:.8rem; border-radius:10px; background:#0a0f14; border:1px solid #1e2a38; color:#dbe5f4; box-shadow:0 8px 20px rgba(0,0,0,.35) }
.cal-preview__title{ font-weight:650; color:#a7e3ff; margin-bottom:.4rem; text-transform:capitalize; letter-spacing:.02em }
.cal-preview__empty{ color:#8fa6bb; font-size:.9em; text-align:center; padding:.3rem 0 }
.cal-preview__list{ display:flex; flex-direction:column; gap:.45rem }
.cal-preview__item{ display:flex; align-items:flex-start; gap:.75rem; padding:.6rem .75rem; border-radius:8px; background:#0e151d; border:1px solid #1e2a38 }
.cal-preview__cover{ width:64px; height:64px; border-radius:8px; border:1px solid rgba(255,255,255,.14); overflow:hidden; flex-shrink:0; background:#0b1218; display:flex; align-items:center; justify-content:center }
.cal-preview__cover img{ width:100%; height:100%; object-fit:cover; display:block }
.cal-preview__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem }
.cal-preview__time{ font-weight:600; color:#8fc7ff }
.cal-preview__meta{ font-size:.9em; color:#9fb6cc }
.automation-cover-preview{ margin-top:.6rem; display:flex; align-items:center; justify-content:flex-start; min-height:80px }
.automation-cover-thumb{ width:140px; height:140px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0b1218; flex-shrink:0; aspect-ratio:1/1 }
.automation-cover-thumb img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1 }
.automation-cover-placeholder{ padding:.9rem 1rem; border-radius:10px; border:1px dashed rgba(255,255,255,.18); color:#8fa6bb; font-size:.9rem; background:#0d141b }
.quick-links-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-top:.5rem }
.quick-link-btn{ display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:#0a0f14; border:1px solid #1e2a38; border-radius:12px; text-decoration:none; color:inherit; transition:all .25s ease; cursor:pointer; position:relative; overflow:hidden }
.quick-link-btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(143,199,255,.05),rgba(167,227,255,.05)); opacity:0; transition:opacity .25s ease }
.quick-link-btn:hover{ border-color:#2e4b66; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3) }
.quick-link-btn:hover::before{ opacity:1 }
.quick-link-btn:hover .quick-link-arrow{ transform:translateX(4px); color:#8fc7ff }
.quick-link-icon{ font-size:2rem; line-height:1; flex-shrink:0; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:rgba(143,199,255,.1); border-radius:12px; border:1px solid rgba(143,199,255,.2) }
.quick-link-content{ flex:1; min-width:0 }
.quick-link-title{ font-weight:700; color:#e6f2ff; font-size:1rem; margin-bottom:.25rem }
.quick-link-desc{ font-size:.85em; color:#9fb6cc; line-height:1.4 }
.quick-link-arrow{ font-size:1.5rem; color:#6e8ba8; transition:all .25s ease; flex-shrink:0 }
@media (max-width:640px){ .quick-links-grid{ grid-template-columns:1fr } }

.status-badge{ display:inline-block; padding:.25rem .5rem; border-radius:6px; font-size:.85em; font-weight:600; text-transform:capitalize; white-space:nowrap }
.status-badge.status-pending{ background:#3b3b1f; color:#ffd700; border:1px solid #ffd70040 }
.status-badge.status-approved{ background:#1f3b2f; color:#4ade80; border:1px solid #4ade8040 }
.status-badge.status-played{ background:#1f2f3b; color:#60a5fa; border:1px solid #60a5fa40 }
.status-badge.status-rejected{ background:#3b1f1f; color:#f87171; border:1px solid #f8717140 }

.actions{ white-space:nowrap }
.actions button{ margin-right:.3rem; padding:.4rem .6rem; font-size:.85em }

#djs tbody td{ vertical-align:middle }

.status-card{ background:#0a0f14; border:1px solid #1e2a38; border-radius:12px; padding:1.1rem; box-shadow:var(--shadow); max-width:420px }
.status-card__title{ color:#8fc7ff; text-transform:uppercase; font-weight:700; letter-spacing:.05em; font-size:.9rem; margin-bottom:.75rem }
.status-card__body{ display:flex; gap:1rem; align-items:center }
.status-card__avatar-wrap{ flex:0 0 110px; width:110px; display:flex; align-items:center; justify-content:center }
.status-card__avatar{ width:110px; height:110px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.12); }
.status-card__avatar-placeholder{ width:110px; height:110px; border-radius:12px; border:1px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#4a6178; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.8rem; text-align:center; padding:.55rem; }
.status-card__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.45rem }
.status-card__dj{ font-size:1.15rem; font-weight:700; color:#eee }
.status-card__row{ font-size:.95rem; color:#9fb6cc }
.status-card__row strong{ color:#bdd9ff; margin-right:.3rem }
.status-card__np{ margin-top:.4rem; padding-top:.6rem; border-top:1px solid #1e2a38; font-size:.92rem; color:#a7e3ff }
.status-card__np-label{ display:block; font-weight:650; color:#8fc7ff; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem }
.status-card__np-text{ color:#c3d8f0; font-size:.95em }
.status-card--preview{ max-width:none!important; width:calc(100% - 1.5rem)!important; margin:0; margin-left:0.5rem }
.status-card--preview .status-card__avatar-wrap{ flex:0 0 180px; width:180px; height:180px; align-self:center }
.status-card--preview .status-card__avatar,
.status-card--preview .status-card__avatar-placeholder{ width:180px; height:180px; border-radius:14px }
.status-card--preview .status-card__body{ align-items:center; min-height:auto; gap:1.5rem; padding:0.5rem }
.status-card--preview{ padding:0.9rem }

.now-card{ display:flex; gap:1rem; align-items:center }
.now-card__cover-wrap{ flex:0 0 120px; width:120px; display:flex; align-items:center; justify-content:center }
.now-card__cover{ width:120px; height:120px; border-radius:12px; border:1px solid rgba(255,255,255,.08); object-fit:cover; background:#0d1217 }
.now-card__cover--placeholder{ width:120px; height:120px; border-radius:12px; border:1px dashed rgba(255,255,255,.18); color:#4a6178; font-size:.8rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:.55rem }
.now-card__content{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; justify-content:center }

.dj-status{ display:flex; gap:1.1rem; align-items:center; padding:.2rem 0 }
.dj-status-avatar-wrap{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:140px; height:140px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0b1218; position:relative }
.dj-status-avatar{ width:100%; height:100%; object-fit:cover; display:block }
.dj-status-avatar-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:.78rem; line-height:1.3; letter-spacing:.01em; color:#5f7894; background:rgba(11,18,24,.92); padding:.6rem; }
.dj-status-avatar-wrap.has-cover .dj-status-avatar-placeholder{ display:none }
.dj-status-avatar-wrap:not(.has-cover) .dj-status-avatar{ display:none }
.dj-status-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.6rem; justify-content:center }
.dj-status-meta{ display:flex; flex-direction:column; gap:.55rem }
.dj-status-line{ font-size:1.08em; color:#eee; line-height:1.45 }
.dj-status-line strong{ color:#9fb6cc; margin-right:.45rem; font-weight:650 }
.dj-status--compact{ gap:.75rem; align-items:flex-start }
.dj-status--compact .dj-status-info{ gap:.5rem }

.dj-status-avatar-wrap img{ display:block }
@media (max-width:800px){
  .dj-status{ flex-direction:column; align-items:flex-start; }
  .dj-status-avatar-wrap{ width:140px; height:140px; max-height:none; margin-bottom:.6rem; }
}

/* Mobile fine-tuning voor de nieuwe card-in-card opmaak van Huidige show/Now Playing */
@media (max-width:800px){
  .dj-manual-card .dj-status{ flex-direction:column; align-items:flex-start; gap:.8rem }
  .dj-manual-card .dj-status-avatar-wrap{ width:140px; height:140px; margin:0 0 .6rem 0 }
  .dj-manual-card .dj-status-info{ width:100%; min-width:0 }
  .dj-manual-card .dj-status--compact{ align-items:flex-start }
}

.dj-manual-grid{ display:flex; flex-direction:column; gap:1rem }
.dj-manual-card{ background:#0a0f14; padding:1rem; border-radius:10px; border:1px solid #1e2a38; display:flex; flex-direction:column; gap:.8rem }
.dj-manual-title{ font-weight:600; color:#a7e3ff; font-size:.95em }
.dj-manual-card .inline-controls{ gap:.6rem }
.dj-manual-card .inline-controls>*:not(.btn){ min-width:150px }
.dj-manual-card .inline-controls .btn{ flex:0 0 auto }

.actions{ white-space:nowrap }
.actions button{ margin-right:.3rem; padding:.4rem .6rem; font-size:.85em }

/* Request table message column - break long messages in admin and DJ console */
#reqs tbody td:nth-child(6),
#reqTable tbody td:nth-child(6){
  max-width:200px;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:normal;
  line-height:1.4;
}

.requests-filters{ display:flex; gap:.4rem; align-items:center; flex-wrap:nowrap }
.request-search-input{ max-width:160px; margin:0; flex-shrink:0; padding:.65rem .75rem; font-size:.9rem }
.request-filter-btn{ white-space:nowrap; flex-shrink:0; padding:.65rem .8rem; font-size:.9rem; min-width:auto }

#djs tbody td{ vertical-align:middle }

.status-card{ background:#0a0f14; border:1px solid #1e2a38; border-radius:12px; padding:1.1rem; box-shadow:var(--shadow); max-width:420px }
.status-card__title{ color:#8fc7ff; text-transform:uppercase; font-weight:700; letter-spacing:.05em; font-size:.9rem; margin-bottom:.75rem }
.status-card__body{ display:flex; gap:1rem; align-items:center }
.status-card__avatar-wrap{ flex:0 0 110px; width:110px; display:flex; align-items:center; justify-content:center }
.status-card__avatar{ width:110px; height:110px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.12); }
.status-card__avatar-placeholder{ width:110px; height:110px; border-radius:12px; border:1px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#4a6178; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.78rem; text-align:center; padding:.5rem; }
.status-card__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.45rem }
.status-card__dj{ font-size:1.15rem; font-weight:700; color:#eee }
.status-card__row{ font-size:.95rem; color:#9fb6cc }
.status-card__row strong{ color:#bdd9ff; margin-right:.3rem }
.status-card__np{ margin-top:.4rem; padding-top:.6rem; border-top:1px solid #1e2a38; font-size:.92rem; color:#a7e3ff }
.status-card__np-label{ display:block; font-weight:650; color:#8fc7ff; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem }
.status-card__np-text{ color:#c3d8f0; font-size:.95em }
 
.week-show-item{ display:flex; align-items:center; gap:1rem; padding:.8rem; background:#0a0f14; border-radius:8px; border:1px solid #1e2a38 }
.week-show-cover{ width:70px; height:70px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0b1218; flex-shrink:0; display:flex; align-items:center; justify-content:center }
.week-show-cover img{ width:100%; height:100%; object-fit:cover; display:block }
.week-show-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem }
.week-show-title{ font-weight:600; color:#a7e3ff }
.week-show-meta{ font-size:.9em; color:#9fb6cc; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center }
.week-show-meta .dot{ color:#3f5168 }

.day-show-item{ display:flex; align-items:center; gap:1rem; padding:.7rem; background:#0a0f14; border-radius:8px; border:1px solid #1e2a38 }
.day-show-cover{ width:70px; height:70px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0b1218; flex-shrink:0; display:flex; align-items:center; justify-content:center }
.day-show-cover img{ width:100%; height:100%; object-fit:cover; display:block }
.day-show-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem }
.day-show-time{ font-weight:600; color:#8fc7ff; display:flex; align-items:center; gap:.4rem }
.day-show-meta{ font-size:.9em; color:#9fb6cc; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap }
.day-show-meta .dot{ color:#3f5168 }

.np-stack{ display:flex; flex-direction:column; gap:.25rem; min-height:2.4rem }
.np-artist{ font-weight:700; color:#fb8502; font-size:1.05rem }
.np-title{ font-weight:600; color:#eee; font-size:.95rem }

.dj-status{ display:flex; gap:1.1rem; align-items:center; padding:.2rem 0 }
.dj-status-avatar-wrap{ flex:0 0 auto; width:140px; height:140px; border-radius:12px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.12); background:#0b1218; display:flex; align-items:center; justify-content:center }
.dj-status-avatar{ width:100%; height:100%; object-fit:cover; display:block }
.dj-status-avatar-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:.78rem; line-height:1.3; letter-spacing:.01em; color:#5f7894; background:rgba(11,18,24,.92); padding:.6rem; }
.dj-status-avatar-wrap.has-cover .dj-status-avatar-placeholder{ display:none }
.dj-status-avatar-wrap:not(.has-cover) .dj-status-avatar{ display:none }
.dj-status-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.6rem; justify-content:center }
.dj-status-meta{ display:flex; flex-direction:column; gap:.55rem }
.dj-status-line{ font-size:1.08em; color:#eee; line-height:1.45 }
.dj-status-line strong{ color:#9fb6cc; margin-right:.45rem; font-weight:650 }
.dj-status-placeholder{ margin-top:.6rem; padding:1rem; border-radius:10px; border:1px dashed rgba(255,255,255,.18); background:#0a0f14; color:#9fb6cc; text-align:center; font-size:.95rem }
.dj-status--compact{ gap:.75rem; align-items:flex-start }
.dj-status--compact .dj-status-info{ gap:.5rem }

.dj-upcoming-list{ display:flex; flex-direction:column; gap:.75rem; margin-top:.6rem; padding-right:0 }
.dj-upcoming-list.has-scroll{ max-height:325px; overflow-y:auto; overflow-x:hidden; padding-right:4px; scrollbar-width:thin; scrollbar-color:rgba(143,199,255,.65) rgba(16,21,27,.6) }
.request-wrap .dj-upcoming-list.has-scroll{ max-height:440px }
.dj-upcoming-list.has-scroll::-webkit-scrollbar{ width:6px }
.dj-upcoming-list.has-scroll::-webkit-scrollbar-track{ background:rgba(16,21,27,.65); border-radius:999px; margin:12px 0 }
.dj-upcoming-list.has-scroll::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8fc7ff,#5d9ef5); border-radius:999px; border:0; min-height:60px }
.dj-upcoming-list.has-scroll::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#a7e3ff,#6fb1ff) }
.dj-upcoming-list.has-scroll .dj-upcoming-item{ flex-shrink:0; min-height:auto }
.preview-holder{ max-height:300px; overflow:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:rgba(143,199,255,.65) rgba(16,21,27,.6) }
.preview-holder::-webkit-scrollbar{ width:6px }
.preview-holder::-webkit-scrollbar-track{ background:rgba(16,21,27,.65); border-radius:999px }
.preview-holder::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8fc7ff,#5d9ef5); border-radius:999px }
.preview-holder::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#a7e3ff,#6fb1ff) }
#embedPreview{ max-height:none!important; overflow:visible!important; padding-right:0!important }
.preview-holder#embedPreview{ max-height:none!important; overflow:visible!important; padding-right:0!important }
#embedPreviewRequestForm{ max-height:none!important; overflow:visible!important; padding-right:0!important }
#tickerEmbedScript{ scrollbar-width:thin!important; scrollbar-color:rgba(143,199,255,.65) rgba(16,21,27,.6)!important }
#tickerEmbedScript::-webkit-scrollbar{ width:6px!important }
#tickerEmbedScript::-webkit-scrollbar-track{ background:rgba(16,21,27,.65)!important; border-radius:999px!important }
#tickerEmbedScript::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8fc7ff,#5d9ef5)!important; border-radius:999px!important }
#tickerEmbedScript::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#a7e3ff,#6fb1ff)!important }
.preview-holder#embedPreviewRequestForm{ max-height:none!important; overflow:visible!important; padding-right:0!important }
#embedScript{ scrollbar-width:thin!important; scrollbar-color:rgba(143,199,255,.65) rgba(16,21,27,.6)!important }
#embedScript::-webkit-scrollbar{ width:6px!important }
#embedScript::-webkit-scrollbar-track{ background:rgba(16,21,27,.65)!important; border-radius:999px!important }
#embedScript::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8fc7ff,#5d9ef5)!important; border-radius:999px!important }
#embedScript::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#a7e3ff,#6fb1ff)!important }
#embedScriptNuLive,#embedScriptNowPlaying,#embedScriptKomendeShows,#embedScriptRequestsList,#embedScriptRequestForm{ scrollbar-width:thin!important; scrollbar-color:rgba(143,199,255,.65) rgba(16,21,27,.6)!important }
#embedScriptNuLive::-webkit-scrollbar,#embedScriptNowPlaying::-webkit-scrollbar,#embedScriptKomendeShows::-webkit-scrollbar,#embedScriptRequestsList::-webkit-scrollbar,#embedScriptRequestForm::-webkit-scrollbar{ width:6px!important }
#embedScriptNuLive::-webkit-scrollbar-track,#embedScriptNowPlaying::-webkit-scrollbar-track,#embedScriptKomendeShows::-webkit-scrollbar-track,#embedScriptRequestsList::-webkit-scrollbar-track,#embedScriptRequestForm::-webkit-scrollbar-track{ background:rgba(16,21,27,.65)!important; border-radius:999px!important }
#embedScriptNuLive::-webkit-scrollbar-thumb,#embedScriptNowPlaying::-webkit-scrollbar-thumb,#embedScriptKomendeShows::-webkit-scrollbar-thumb,#embedScriptRequestsList::-webkit-scrollbar-thumb,#embedScriptRequestForm::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8fc7ff,#5d9ef5)!important; border-radius:999px!important }
#embedScriptNuLive::-webkit-scrollbar-thumb:hover,#embedScriptNowPlaying::-webkit-scrollbar-thumb:hover,#embedScriptKomendeShows::-webkit-scrollbar-thumb:hover,#embedScriptRequestsList::-webkit-scrollbar-thumb:hover,#embedScriptRequestForm::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#a7e3ff,#6fb1ff)!important }
#topRequestsList{ scrollbar-width:thin!important; scrollbar-color:rgba(143,199,255,.65) rgba(16,21,27,.6)!important }
#topRequestsList::-webkit-scrollbar{ width:6px!important }
#topRequestsList::-webkit-scrollbar-track{ background:rgba(16,21,27,.65)!important; border-radius:999px!important }
#topRequestsList::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#8fc7ff,#5d9ef5)!important; border-radius:999px!important }
#topRequestsList::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#a7e3ff,#6fb1ff)!important }
.dj-upcoming-item{ display:flex; gap:.75rem; align-items:center; padding:.75rem; border-radius:12px; background:#0a0f14; border:1px solid #1e2a38 }
.dj-upcoming-cover{ width:70px; height:70px; border-radius:10px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.12); background:#0b1218; flex-shrink:0; display:flex; align-items:center; justify-content:center }
.dj-upcoming-cover img{ width:100%; height:100%; object-fit:cover; display:block }
.dj-upcoming-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.7rem; color:#5f7894; background:rgba(11,18,24,.92); padding:.4rem }
.dj-upcoming-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25rem; color:#dbe5f4 }
.dj-upcoming-title{ font-weight:600; color:#f1f7ff }
.dj-upcoming-meta{ font-size:.9rem; color:#9fb6cc }

.dj-status-avatar-wrap img{ display:block }
@media (max-width:800px){
  .dj-status{ flex-direction:column; align-items:flex-start; }
  .dj-status-avatar-wrap{ width:140px; height:140px; max-height:none; margin-bottom:.6rem; }
}