:root{
  --bg:#0b1412;--panel:#111f1b;--panel2:#0e1a17;--border:#1d332e;
  --text:#e8f0ec;--muted:#7ab0a0;--muted2:#4d7568;
  --accent:#2ab5a0;--accent2:#1d6fa8;--danger:#e0574f;--gold:#f4c430;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;font-family:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Layout */
.topbar{
  display:flex;align-items:center;gap:1rem;padding:0.7rem 1.25rem;
  background:var(--panel2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:0.6rem;font-weight:800;font-size:1.15rem;
  letter-spacing:0.02em;color:var(--text);text-decoration:none;}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);}
.nav{display:flex;gap:0.25rem;flex-wrap:wrap;margin-left:0.5rem;}
.nav a{padding:0.4rem 0.8rem;border-radius:8px;color:var(--muted);font-weight:600;font-size:0.92rem;}
.nav a:hover{background:var(--panel);color:var(--text);text-decoration:none;}
.nav a.active{background:var(--accent);color:#07110e;}
.topbar .spacer{flex:1;}
.nav-user{color:var(--muted);font-weight:600;font-size:0.9rem;white-space:nowrap;}

.container{max-width:1150px;margin:1.5rem auto;padding:0 1.25rem;}
h1{font-size:1.7rem;margin:0 0 0.35rem;font-weight:800;}
h2{font-size:1.2rem;margin:1.5rem 0 0.6rem;font-weight:700;color:var(--muted);}
.subtitle{color:var(--muted2);margin:0 0 1.25rem;}

/* Cards / grid */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem;}
.card h3{margin:0 0 0.35rem;font-size:1.05rem;}
.card .meta{color:var(--muted2);font-size:0.85rem;}
.stat{font-size:2rem;font-weight:800;color:var(--accent);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 0.95rem;border-radius:8px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);font-weight:600;
  font-size:0.9rem;cursor:pointer;text-decoration:none;transition:all .12s;}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#07110e;}
.btn-primary:hover{background:#33cbb4;color:#07110e;border-color:#33cbb4;}
.btn-danger{color:var(--danger);border-color:#3a2320;}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-sm{padding:0.3rem 0.6rem;font-size:0.82rem;}
.btn-row{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin:0.5rem 0 1.25rem;}

/* Forms */
.form-group{margin-bottom:1rem;}
label{display:block;font-weight:600;margin-bottom:0.3rem;color:var(--muted);font-size:0.9rem;}
input[type=text],input[type=password],input[type=number],input[type=color],select,textarea{
  width:100%;padding:0.55rem 0.7rem;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:0.95rem;font-family:inherit;outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
input[type=color]{height:42px;padding:0.2rem;}
.help{color:var(--muted2);font-size:0.82rem;margin-top:0.25rem;}
.checkbox{display:flex;align-items:center;gap:0.5rem;}
.checkbox input{width:auto;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:640px){.row2{grid-template-columns:1fr;}}

/* Table */
table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--border);}
th,td{padding:0.6rem 0.75rem;text-align:left;border-bottom:1px solid var(--border);}
th{background:var(--panel2);color:var(--muted);font-size:0.78rem;text-transform:uppercase;
  letter-spacing:0.06em;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,0.02);}

/* On narrow screens (phones/tablets/the display itself) let wide admin tables
   scroll horizontally so the action buttons (Bewerken, etc.) stay reachable. */
@media (max-width:720px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  th,td{white-space:nowrap;}
}

.badge{display:inline-block;padding:0.15rem 0.55rem;border-radius:999px;font-size:0.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
.badge-slide{background:rgba(42,181,160,0.18);color:#7fe6d6;}
.badge-ticker{background:rgba(244,196,48,0.16);color:var(--gold);}
.badge-image{background:rgba(29,111,168,0.2);color:#8fc4f0;}
.badge-gallery{background:rgba(180,120,220,0.18);color:#d4b6f0;}
.badge-on{background:rgba(42,181,160,0.2);color:#7fe6d6;}
.badge-off{background:rgba(224,87,79,0.18);color:#f0a49f;}
.badge-default{background:var(--gold);color:#1a1400;}

/* Gallery thumbs */
.thumbs{display:grid;gap:0.75rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.thumb{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;}
.thumb img{width:100%;height:130px;object-fit:cover;display:block;}
.thumb .cap{padding:0.4rem 0.55rem;font-size:0.8rem;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.thumb .del{position:absolute;top:6px;right:6px;}
.picture-card.is-on,.picture-card:has(.picture-toggle:checked){
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.pic-switch{display:flex;align-items:center;gap:0.4rem;margin:0;padding:0.35rem 0.55rem;cursor:pointer;
  font-size:0.78rem;color:var(--muted);font-weight:600;border-top:1px solid var(--border);}
.pic-switch input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer;}

/* Flash */
.flash{padding:0.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-weight:600;}
.flash.success{background:rgba(42,181,160,0.15);border:1px solid var(--accent);color:#a7ede0;}
.flash.error{background:rgba(224,87,79,0.15);border:1px solid var(--danger);color:#f3b1ac;}

.empty{padding:2.5rem;text-align:center;color:var(--muted2);border:1px dashed var(--border);
  border-radius:var(--radius);}

/* Dashboard folder cards with on-display toggle */
.folder-card{position:relative;}
.folder-card.is-on,.folder-card:has(.folder-toggle:checked){
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.folder-cover{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:0.6rem;}
.folder-check{position:absolute;top:10px;right:10px;background:rgba(8,16,14,0.82);
  border:1px solid var(--border);border-radius:999px;padding:0.25rem 0.6rem;}
.folder-check .switch{display:flex;align-items:center;gap:0.4rem;margin:0;cursor:pointer;
  font-size:0.78rem;color:var(--muted);font-weight:600;}
.folder-check .switch input{width:auto;margin:0;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}

/* Upload progress */
.upload-progress{display:none;margin-top:0.85rem;}
.upload-progress.active{display:block;}
.progress-track{height:12px;background:var(--bg);border:1px solid var(--border);
  border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .15s ease;}
.progress-label{font-size:0.85rem;color:var(--muted);margin-top:0.4rem;
  font-family:'Barlow',sans-serif;}

/* Login */
.login-wrap{max-width:360px;margin:8vh auto;padding:2rem;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);}

/* Multi-folder picker for gallery messages */
.folder-picklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:0.4rem;margin-top:0.3rem;}
.folder-pick{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.7rem;
    border:1px solid var(--border,#1a2e2a);border-radius:8px;cursor:pointer;}
.folder-pick input{width:auto;margin:0;}
.folder-pick em{color:var(--text2,#7ab0a0);font-style:normal;font-size:0.85em;}

/* Editor font rendering + picker labels */
.ql-editor .ql-font-serif,.ql-font-serif{font-family:Georgia,'Times New Roman',serif;}
.ql-editor .ql-font-monospace,.ql-font-monospace{font-family:'Share Tech Mono','Courier New',monospace;}
.ql-editor .ql-font-barlow-condensed,.ql-font-barlow-condensed{font-family:'Barlow Condensed',sans-serif;}
.ql-editor .ql-font-share-tech-mono,.ql-font-share-tech-mono{font-family:'Share Tech Mono',monospace;}
.ql-snow .ql-picker.ql-font{width:130px;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before{content:'Serif';font-family:Georgia,serif;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before{content:'Monospace';font-family:monospace;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="barlow-condensed"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="barlow-condensed"]::before{content:'Barlow Condensed';font-family:'Barlow Condensed',sans-serif;}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="share-tech-mono"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="share-tech-mono"]::before{content:'Tech Mono';font-family:'Share Tech Mono',monospace;}

/* Settings section headings */
.section-title{font-family:'Barlow Condensed',sans-serif;font-size:1.25rem;font-weight:700;
    text-transform:uppercase;letter-spacing:0.04em;margin:1.6rem 0 0.6rem;
    padding-bottom:0.3rem;border-bottom:1px solid var(--border);}
.section-title:first-child{margin-top:0;}
.subsection-title{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;
    letter-spacing:0.02em;margin:1.2rem 0 0.6rem;color:var(--text);}
.user-list{display:flex;flex-direction:column;gap:0.5rem;max-width:640px;margin-bottom:0.5rem;}
.user-row{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;background:var(--panel);
    border:1px solid var(--border);border-radius:var(--radius);padding:0.5rem 0.7rem;}
.user-row .user-edit{display:flex;align-items:center;gap:0.5rem;flex:1;flex-wrap:wrap;margin:0;}
.user-row .user-edit input{margin:0;}
.user-row .user-edit input[name=username]{flex:0 0 10rem;}
.user-row .user-edit input[name=password]{flex:1;min-width:12rem;}
.user-row form{margin:0;}

/* Quill dark tweaks */
.ql-toolbar.ql-snow,.ql-container.ql-snow{border-color:var(--border)!important;}
.ql-container{background:var(--bg);border-radius:0 0 8px 8px;min-height:240px;font-size:1rem;}
.ql-toolbar{background:var(--panel2);border-radius:8px 8px 0 0;}
.ql-editor{color:var(--text);}
.ql-editor .dvs-table-embed{display:block;width:100%;overflow-x:auto;margin:0.75rem 0;}
.ql-editor .dvs-table-embed-inner{display:block;min-width:100%;}
.ql-editor table.dvs-table,.ql-editor table{width:max-content;min-width:100%;border-collapse:collapse;
  table-layout:auto;font-size:0.95rem;line-height:1.35;background:var(--panel);}
.ql-editor table.dvs-table th,.ql-editor table.dvs-table td,.ql-editor table th,.ql-editor table td{
  border:1px solid var(--border);padding:0.3rem 0.55rem;vertical-align:top;}
.ql-editor table strong{font-weight:700;}
.ql-editor .dvs-doc-embed{display:block;width:100%;overflow-x:auto;margin:0.75rem 0;}
.ql-editor .dvs-doc-embed-inner{display:block;min-width:100%;}
.ql-editor .dvs-doc-embed-inner p{margin:0.35rem 0;}
.ql-editor .dvs-doc-embed-inner ul,.ql-editor .dvs-doc-embed-inner ol{margin:0.35rem 0 0.35rem 1.25rem;padding:0;}
.ql-editor img{max-width:100%;height:auto;border-radius:4px;}
.ql-editor .dvs-img-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;
  margin:0.35rem 0;vertical-align:bottom;}
.ql-editor .dvs-img-wrap img{display:block;max-width:100%;height:auto;border-radius:4px;
  outline:2px solid transparent;outline-offset:2px;}
.ql-editor .dvs-img-wrap:hover img,.ql-editor .dvs-img-wrap:focus-within img{
  outline-color:var(--accent);}
.ql-editor .dvs-img-handle{position:absolute;right:-7px;bottom:-7px;width:18px;height:18px;
  background:var(--accent);border:2px solid #fff;border-radius:3px;cursor:nwse-resize;
  box-shadow:0 1px 4px rgba(0,0,0,0.4);z-index:5;display:block;pointer-events:auto;}
.ql-editor .dvs-doc-embed-inner img{max-width:100%;height:auto;margin:0.5rem 0;border-radius:4px;}
.ql-editor .dvs-doc-embed-inner table{width:max-content;min-width:100%;border-collapse:collapse;margin:0.5rem 0;}
.ql-editor .dvs-doc-embed-inner table td,.ql-editor .dvs-doc-embed-inner table th{
  border:1px solid var(--border);padding:0.3rem 0.55rem;vertical-align:top;}
.ql-editor .dvs-web-embed{display:block;width:100%;margin:0.75rem 0;}
.ql-editor .dvs-web-embed iframe.web-embed{display:block;width:100%;height:360px;border:1px solid var(--border);
  border-radius:8px;background:rgba(0,0,0,0.2);}
/* Lists in the admin editor */
.ql-editor ol,.ql-editor ul{margin:0.35rem 0;padding-left:1.5em;}
.ql-editor ul > li::before,.ql-editor ol li::before{color:var(--text);}
.ql-snow .ql-stroke{stroke:var(--muted);}
.ql-snow .ql-fill{fill:var(--muted);}
.ql-snow .ql-picker{color:var(--muted);}