/* Cyberly-stijl voor remote.vermeersupport.nl (zelfde huisstijl als intranet/netwerk.php en HA).
   Wordt na de eigen <style> van elke pagina geladen en overschrijft die. */
:root{
  --cy-bg:#05080e; --cy-vlak:#08101a; --cy-rand:#123040; --cy-rand2:#1b4a5e;
  --cy-txt:#cdf6ff; --cy-dim:#5d8797; --cy-zwak:#2d4a57; --cy-neon:#19e3ff; --cy-reeks:#11a2bf;
  --cy-goed:#0ca30c; --cy-letop:#fab219; --cy-kritiek:#d03b3b;
  --cy-mono:"DejaVu Sans Mono","JetBrains Mono","Fira Code",ui-monospace,monospace;
  /* tokens die de pagina's zelf al gebruiken */
  --bg:var(--cy-bg); --sidebar-bg:rgba(6,12,20,.92); --card-bg:rgba(8,16,26,.82);
  --border:var(--cy-rand); --glass-bg:rgba(8,16,26,.85); --glass-border:var(--cy-rand2);
  --accent:var(--cy-neon); --accent-hover:#7eefff; --accent-glow:rgba(25,227,255,.35);
  --text:var(--cy-txt); --text-muted:var(--cy-dim);
  --input-bg:#03080d; --input-border:var(--cy-rand2); --input-focus:rgba(25,227,255,.25);
}
html,body{background:var(--cy-bg)!important;color:var(--cy-txt);font-family:var(--cy-mono)!important}
button,input,select,textarea{font-family:var(--cy-mono)}

/* achtergrond: raster i.p.v. paarse blobs, plus scanlijnen en vignet */
.blob{display:none!important}
.bg{background:
  linear-gradient(rgba(25,227,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(25,227,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  radial-gradient(ellipse at 50% 0%,#0a1a28 0%,var(--cy-bg) 70%)!important}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5))}

/* geen scanlijnen over de videospeler/lightbox */
body:has(.modal-overlay.open)::after,body:has(.lightbox-overlay.open)::after{display:none}

/* panelen: hoekige randen met neon hoekje */
.card,.form-card,.file-card,.table-wrap,.stat-card,.dir-card,.create-dir-card,.media-modal,.info-box,.secret-block{
  background:rgba(8,16,26,.85)!important;border:1px solid var(--cy-rand)!important;border-radius:4px!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45)!important;backdrop-filter:none!important;position:relative}
.card::before,.form-card::before,.file-card::before,.table-wrap::before,.stat-card::before,.dir-card::before,.create-dir-card::before,.media-modal::before{
  content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--cy-neon);border-left:2px solid var(--cy-neon);pointer-events:none;z-index:2}
.card::after,.form-card::after,.media-modal::after{
  content:'';position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:2px solid var(--cy-neon);border-right:2px solid var(--cy-neon);pointer-events:none}

/* koppen */
.page-title,.card-title,h1,.table-title,.media-modal-title{color:var(--cy-neon)!important;text-shadow:0 0 12px rgba(25,227,255,.45);letter-spacing:.06em!important;text-transform:uppercase}
.page-title,.card-title,h1{font-size:1.25rem!important}
.logo-name,.sidebar-logo-name{color:var(--cy-neon)!important;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 10px rgba(25,227,255,.5)}
.logo-sub,.sidebar-logo-sub,.page-sub,.card-sub,.sub{color:var(--cy-dim)!important}
label,.nav-label,th,.stat-label,.secret-label{color:var(--cy-dim)!important;letter-spacing:.15em!important}

/* logo-icoon */
.logo-icon,.sidebar-logo-icon{background:transparent!important;border:1px solid var(--cy-neon);border-radius:4px!important;box-shadow:0 0 12px rgba(25,227,255,.35),inset 0 0 8px rgba(25,227,255,.2)!important}
.logo-icon svg,.sidebar-logo-icon svg{fill:var(--cy-neon)!important}
.logo-icon .material-icons{color:var(--cy-neon)!important}

/* zijbalk */
.sidebar{background:linear-gradient(180deg,#0a1724,#060c14)!important;border-right:1px solid var(--cy-rand)!important;backdrop-filter:none!important}
.nav-link{border-radius:2px!important;border-left:2px solid transparent}
.nav-link:hover{background:rgba(25,227,255,.06)!important;color:var(--cy-txt)!important}
.nav-link.active{background:linear-gradient(90deg,rgba(25,227,255,.16),transparent)!important;color:var(--cy-neon)!important;border-left-color:var(--cy-neon);text-shadow:0 0 8px rgba(25,227,255,.5)}
.sidebar-footer{border-top-color:var(--cy-rand)!important}
.user-avatar,.avatar{background:#03141a!important;border:1px solid var(--cy-neon);color:var(--cy-neon)!important;box-shadow:0 0 8px rgba(25,227,255,.3)}

/* knoppen */
.btn,.btn-submit,.btn-icon,.lightbox-btn{border-radius:3px!important}
.btn-primary,.btn-submit{background:rgba(25,227,255,.1)!important;color:var(--cy-neon)!important;border:1px solid var(--cy-neon)!important;
  box-shadow:0 0 12px rgba(25,227,255,.25),inset 0 0 10px rgba(25,227,255,.08)!important;text-transform:uppercase;letter-spacing:.12em}
.btn-primary:hover,.btn-submit:hover{background:rgba(25,227,255,.2)!important;box-shadow:0 0 20px rgba(25,227,255,.45),inset 0 0 12px rgba(25,227,255,.15)!important;color:#fff!important}
.btn-primary svg,.btn-submit svg{fill:currentColor!important}
.btn-ghost{background:transparent!important;border:1px solid var(--cy-rand2)!important;color:var(--cy-dim)!important}
.btn-ghost:hover{border-color:var(--cy-neon)!important;color:var(--cy-txt)!important}
.btn-icon:hover{color:var(--cy-neon)!important;background:rgba(25,227,255,.08)!important}
.btn-icon.danger:hover{color:#ff8080!important;background:rgba(208,59,59,.12)!important}
.spinner{border-color:rgba(25,227,255,.25)!important;border-top-color:var(--cy-neon)!important}

/* invoervelden */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea,.search-box,.search-input,.type-select{
  background:#03080d!important;border:1px solid var(--cy-rand2)!important;border-radius:3px!important;color:var(--cy-txt)!important}
input:focus,select:focus,textarea:focus,.search-box:focus,.search-input:focus{border-color:var(--cy-neon)!important;box-shadow:0 0 0 2px rgba(25,227,255,.2),0 0 12px rgba(25,227,255,.25)!important}
input::placeholder{color:var(--cy-zwak)!important}
select option{background:var(--cy-vlak)!important}
input[type=checkbox]{accent-color:var(--cy-neon)}

/* tabellen */
th{border-bottom:1px solid var(--cy-rand)!important}
td{border-bottom-color:#0c1c27!important}
tr:hover td,tr.file-row:hover td{background:rgba(25,227,255,.04)!important}

/* meldingen en badges */
.flash,.alert,.error-msg{border-radius:3px!important}
.flash-success,.flash-ok{background:rgba(12,163,12,.1)!important;border:1px solid #0a5a2a!important;color:#5fe35f!important}
.flash-error,.flash-err,.alert,.error-msg{background:rgba(208,59,59,.12)!important;border:1px solid var(--cy-kritiek)!important;color:#ff9a9a!important}
.badge,.media-badge{border-radius:2px!important;letter-spacing:.08em}
.toggle input:checked + .slider{background:var(--cy-reeks)!important;box-shadow:0 0 8px rgba(25,227,255,.4)}

/* mediatiles */
.tile,.movie-tile,.ep-card{border-radius:3px!important;border:1px solid var(--cy-rand)!important;background:rgba(8,16,26,.8)!important}
.tile:hover,.movie-tile:not(.no-video):hover,.ep-card:hover{border-color:var(--cy-neon)!important;box-shadow:0 0 16px rgba(25,227,255,.3)!important}
.poster-wrap,.ep-thumb{border-radius:2px 2px 0 0!important}
.play-btn,.ep-play-btn{background:rgba(25,227,255,.15)!important;border:1px solid var(--cy-neon)!important;color:var(--cy-neon)!important;box-shadow:0 0 18px rgba(25,227,255,.5)!important}
.modal-overlay,.lightbox-overlay{background:rgba(2,5,9,.88)!important;backdrop-filter:blur(3px)}

/* 2FA-stappen */
.step.active .step-num{background:transparent!important;border:1px solid var(--cy-neon)!important;color:var(--cy-neon)!important;box-shadow:0 0 10px rgba(25,227,255,.4)}
.secret-value{color:var(--cy-neon)!important}
#qrCanvas{border-radius:3px!important}

/* scrollbalken */
*{scrollbar-color:var(--cy-rand2) transparent}
::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--cy-rand2);border-radius:0} ::-webkit-scrollbar-track{background:transparent}

/* mobiel: zijbalk als uitschuifmenu met hamburgerknop (knop wordt door cyberly-menu.js toegevoegd) */
.cy-hamburger{display:none}
@media (max-width:768px){
  .cy-hamburger{display:grid;place-items:center;position:fixed;top:10px;left:10px;z-index:1001;width:42px;height:42px;
    background:rgba(5,10,16,.92);border:1px solid var(--cy-neon);border-radius:3px;color:var(--cy-neon);cursor:pointer;
    box-shadow:0 0 12px rgba(25,227,255,.3)}
  .cy-hamburger span,.cy-hamburger span::before,.cy-hamburger span::after{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:transform .2s,background .2s}
  .cy-hamburger span::before,.cy-hamburger span::after{content:'';position:absolute;left:0}
  .cy-hamburger span::before{top:-6px} .cy-hamburger span::after{top:6px}
  .cy-menu-open .cy-hamburger span{background:transparent}
  .cy-menu-open .cy-hamburger span::before{transform:translateY(6px) rotate(45deg)}
  .cy-menu-open .cy-hamburger span::after{transform:translateY(-6px) rotate(-45deg)}
  .sidebar{display:flex!important;position:fixed!important;top:0;left:0;bottom:0;height:100%!important;width:250px!important;z-index:1000;
    transform:translateX(-105%);transition:transform .22s ease;padding-top:64px!important;box-shadow:0 0 30px rgba(0,0,0,.6);overflow-y:auto!important;overscroll-behavior:contain}
  .cy-menu-open .sidebar{transform:none}
  .cy-scherm{position:fixed;inset:0;background:rgba(2,5,9,.6);z-index:999;display:none}
  .cy-menu-open .cy-scherm{display:block}
  .main{padding-top:62px!important}
}

/* bevestigingsvenster (uitloggen) */
.cy-bevestig{position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:1rem;background:rgba(2,5,9,.82);backdrop-filter:blur(3px)}
.cy-bevestig.open{display:grid}
.cy-bevestig-kader{position:relative;width:min(360px,100%);padding:1.6rem 1.5rem 1.3rem;text-align:center;background:rgba(8,16,26,.96);border:1px solid var(--cy-rand2);border-radius:4px;
  box-shadow:0 0 30px rgba(25,227,255,.15),0 20px 50px rgba(0,0,0,.6);animation:cyIn .16s ease-out}
.cy-bevestig-kader::before,.cy-bevestig-kader::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none}
.cy-bevestig-kader::before{top:-1px;left:-1px;border-top:2px solid var(--cy-neon);border-left:2px solid var(--cy-neon)}
.cy-bevestig-kader::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--cy-neon);border-right:2px solid var(--cy-neon)}
@keyframes cyIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.cy-bevestig-icoon{width:48px;height:48px;margin:0 auto .8rem;display:grid;place-items:center;border:1px solid var(--cy-neon);border-radius:4px;box-shadow:0 0 14px rgba(25,227,255,.35)}
.cy-bevestig-icoon svg{width:24px;height:24px;fill:var(--cy-neon)}
.cy-bevestig h2{margin:0 0 .4rem;font-size:1.05rem!important;color:var(--cy-neon);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 10px rgba(25,227,255,.45)}
.cy-bevestig p{margin:0 0 1.3rem;color:var(--cy-txt);font-size:.88rem}
.cy-bevestig-knoppen{display:flex;gap:.7rem;justify-content:center}
.cy-bevestig-knoppen>*{flex:1;font:inherit;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.6rem .8rem;border-radius:3px;cursor:pointer;text-decoration:none;text-align:center}
.cy-nee{background:transparent;border:1px solid var(--cy-rand2);color:var(--cy-dim)}
.cy-nee:hover,.cy-nee:focus{border-color:var(--cy-neon);color:var(--cy-txt);outline:none}
.cy-ja{background:rgba(208,59,59,.15);border:1px solid var(--cy-kritiek);color:#ff9a9a;box-shadow:0 0 12px rgba(208,59,59,.25)}
.cy-ja:hover{background:rgba(208,59,59,.3);color:#fff}