/* /assets/styles.css */
:root{
  --bg:#fff;
  --fg:#111;
  --muted:#666;
  --line:#eee;
  --btn:#fff;
  --btnLine:#ddd;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ }
body{
  margin:8px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
}

a{ color:inherit; text-decoration:none; }
button, input{ font: inherit; }

.small{ color:var(--muted); font-size:12px; }
.error{
  color:#b00020;
  margin:8px 0;
  white-space:pre-wrap;
  display:none;
}

.btn{
  padding:8px 10px;
  border:1px solid var(--btnLine);
  border-radius:10px;
  background:var(--btn);
  cursor:pointer;
}
.btn:hover{ background:#fafafa; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.iconBtn{
  padding:8px 10px;
  border:1px solid var(--btnLine);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.iconBtn:hover{ background:#fafafa; }
.iconBtn:disabled{ opacity:.55; cursor:not-allowed; }

input[type="text"], input[type="password"]{
  border:1px solid var(--btnLine);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
input[type="text"]:focus, input[type="password"]:focus{
  border-color:#bbb;
}

/* ===== Topbar (index) ===== */

/* ===== Branding (per site) ===== */
.topbarBrand{
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brandLogo{
  width:34px;
  height:34px;
  object-fit:contain;
}
.brandTitle{
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: min(420px, 60vw);
}

.topbar{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-bottom:8px;
  align-items:center;
}

.topbarRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.lang{
  display:flex;
  gap:6px;
  align-items:center;
}
.lang button{
  padding:8px 10px;
  border:1px solid var(--btnLine);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.lang button.active{ font-weight:700; }

#q{
  width: min(640px, 100%);
  min-width: 0;
}

.chk{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:14px;
  color:#222;
  user-select:none;
}
.chk input{
  width:18px;
  height:18px;
}

/* ===== Sticky download block ===== */
.downloadSticky{
  position:fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  max-width: min(320px, 92vw);
}

.downloadSticky .btn.primary{
  font-weight:700;
  box-shadow: var(--shadow);
  background:#fff;
}

.stickyMeta{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  background: rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px 8px;
  box-shadow: var(--shadow);
}

.smallBtn{
  padding:7px 9px;
  font-size:13px;
}

/* voorkom dat sticky bovenop je topbar valt op mobiel */
@media (max-width: 700px){
  .downloadSticky{
    top:auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ===== Table ===== */
table.list{
  width:100%;
  border-collapse:collapse;
  table-layout:auto; /* gevraagd */
}
table.list th, table.list td{
  border-bottom:1px solid var(--line);
  padding:6px 6px; /* klein */
  text-align:left;
  vertical-align:middle;
}

.rowlink{ cursor:pointer; }
.rowlink:hover{ background:#fafafa; }

.thSortable{
  user-select:none;
  cursor:pointer;
  white-space:nowrap;
}
.thSortable:hover{ text-decoration:underline; }

.thSortable[data-dir="asc"]::after{ content:" ▲"; font-size:11px; color:var(--muted); }
.thSortable[data-dir="desc"]::after{ content:" ▼"; font-size:11px; color:var(--muted); }

.cbcell{ width:56px; }
.thumbcell{ width:76px; }
.photoscell{ width:64px; text-align:center; font-variant-numeric: tabular-nums; }
.nocell{ width:120px; font-variant-numeric: tabular-nums; }

.list input[type="checkbox"]{
  width:22px;
  height:22px;
  cursor:pointer;
}
.noSelect{
  color:#aaa;
  display:inline-block;
  min-width:22px;
}

.thumbbox{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  overflow:hidden;
}
.thumbbox.thumbEmpty{ background:#fafafa; }
.thumbimg{
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:10px;
  display:block;
}

.descname{
  font-weight:300;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.1;
}

/* ===== Login ===== */
.authPage{
  min-height: calc(100vh - 16px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.loginCard{
  width: min(420px, 92vw);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow);
  background:#fff;
}
.loginCard h1{
  margin:0 0 8px;
  font-size:22px;
}
.loginCard p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
}
.loginCard input{ width:100%; font-size:16px; }
.loginCard button{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--btnLine);
  background:#fff;
  cursor:pointer;
  font-size:16px;
}
.loginCard button:hover{ background:#fafafa; }

/* ===== Detail page ===== */
.detailTop{
    background: #fff;
    top: 0px;
    padding: 5px;
    z-index: 9998;
    position: sticky;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
.detailTop .left{
  display:flex;
  align-items:center;
  gap:8px;
}
.detailTop .center{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.detailTop .right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.articleCur{
  font-weight:700;
  letter-spacing:.3px;
  font-variant-numeric: tabular-nums;
}

.gallery{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 12px;
}
.thumbCard{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:8px;
  width:180px;
  text-align:left;
}
.thumbCard .gimg{
  width:100%;
  height:180px;
  object-fit:contain;
  border-radius:10px;
  display:block;
  cursor:pointer;
}
.thumbcap{
  margin-top:6px;
  font-size:12px;
  opacity:.9;
  word-break: break-word;
  padding-right:40px;
}
.dlMini{
  position:absolute;
  right:8px;
  top:8px; /* gevraagd: rechts boven */
  width:30px;
  height:30px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}
.dlMini:hover{ background:#f7f7f7; }

/* ===== Modal viewer ===== */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding:10px;
  z-index:9999;
  overscroll-behavior:contain;
}
.modalOverlay.open{ display:flex; }
.modal{
  width:min(1100px, 98vw);
  height:min(92vh, 920px);
  background:#fff;
  border-radius:0; /* geen radius */
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modalHeader{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.modalHeader .fileName{
  flex:1;
  font-size:13px;
  opacity:.92;
  word-break:break-all;
  min-width:0;
}
.modalBody{
  flex:1;
  position:relative;
  overflow:hidden;
  background:#111; /* gevraagd */
  touch-action:none;
}
.stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stage img{
  max-width:none;
  max-height:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none; /* pan/zoom via body */
  border-radius:0;
  background:transparent;
}

.navBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:0;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  z-index:2;
}
.navBtn:hover{ background:rgba(0,0,0,.5); }
.navPrev{ left:10px; }
.navNext{ right:10px; }

.hud{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  z-index:2;
}
.hud .iconBtn{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.1);
}
.hud .iconBtn:hover{ background:#fff; }

/* mobile detail topbar */
@media (max-width: 700px){
  .detailTop{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .detailTop .center{ justify-content:flex-start; }
  .detailTop .right{ justify-content:flex-start; }
  .thumbCard{ width: min(180px, 48vw); }
  .thumbCard .gimg{ height:160px; }
}


/* ===== Mobile spacing tweaks ===== */
@media (max-width: 700px){
  body{ margin:6px; }
  .topbarRow{ gap:6px; }
  .btn,.iconBtn{ border-radius:10px; }
}