/* ============================================================
   ILK Admin — OPFRIS-LAAG (2026-07-07)
   Admin-only, gescoped onder .admin-body, geladen NÁ style.css.
   Doel: de harde champagne-.55 randen + "washed-out" hover-blokken verzachten,
   diepte + subtiele radius toevoegen, rustiger hiërarchie. Zelfde functies eronder.
   Terug te draaien: verwijder de <link> in admin.html. Raakt de publieke site NIET.
   ============================================================ */

/* Zachtere, warme achtergrond met subtiele gloed */
.admin-body{ background:radial-gradient(130% 90% at 50% -10%, #130c0e 0%, #080708 62%) fixed; }

/* ── Topbar ─────────────────────────────────────────── */
.admin-body .topbar{
  background:linear-gradient(180deg, rgba(18,13,14,.98), rgba(9,8,9,.98));
  border-bottom:1px solid rgba(232,197,160,.15);
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 24px -20px rgba(0,0,0,.8);
}
.admin-body .topbar-title{ color:rgba(240,230,216,.75); }
.admin-body .logout-btn{ border:1px solid rgba(232,197,160,.22); border-radius:7px; }
.admin-body .logout-btn:hover{ background:rgba(232,197,160,.05); }

/* ── Sidebar ────────────────────────────────────────── */
.admin-body .sidebar{ background:#0b0a0a; border-right:1px solid rgba(232,197,160,.13); }
.admin-body .sidebar-section{ color:rgba(232,197,160,.62); }
.admin-body .sidebar-icon{ opacity:.72; }
@media (min-width:901px){
  .admin-body .sidebar{ padding:1rem 0; }
  .admin-body .sidebar-item{ border-radius:0 9px 9px 0; margin-right:.55rem; }
  .admin-body .sidebar-item:hover{ background:rgba(232,197,160,.06); color:var(--champagne); }
  .admin-body .sidebar-item.active{ background:rgba(139,21,56,.16); border-left-color:var(--oxblood-light); color:var(--champagne); }
}

/* ── Panels / koppen ────────────────────────────────── */
.admin-body .panel-title{ letter-spacing:.005em; }
.admin-body .panel-sub{ color:rgba(240,230,216,.62); }

/* ── Cards ──────────────────────────────────────────── */
.admin-body .card,
.admin-body .stat-card{
  background:linear-gradient(162deg,#16110f 0%, #100c0d 100%);
  border:1px solid rgba(232,197,160,.14);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 16px 36px -24px rgba(0,0,0,.72);
}
.admin-body .stat-card{ transition:border-color .2s, transform .12s; }
.admin-body .stat-card:hover{ border-color:rgba(232,197,160,.3); transform:translateY(-1px); }

/* ── Velden / inputs ────────────────────────────────── */
.admin-body .field-input,
.admin-body .form-input,
.admin-body select.field-input,
.admin-body textarea.field-input,
.admin-body .add-form{
  background:#0c0a0b;
  border:1px solid rgba(232,197,160,.16);
  border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
}
.admin-body .field-input:focus,
.admin-body .form-input:focus,
.admin-body select.field-input:focus,
.admin-body textarea.field-input:focus{
  border-color:rgba(232,197,160,.6);
  box-shadow:0 0 0 3px rgba(232,197,160,.13);
}
.admin-body .field-input::placeholder,
.admin-body .form-input::placeholder{ color:rgba(240,230,216,.42); }
.admin-body .field-label{ color:rgba(240,230,216,.72); }

/* ── Knoppen ────────────────────────────────────────── */
.admin-body .save-btn,
.admin-body .login-btn{
  border-radius:7px;
  box-shadow:0 8px 20px -12px rgba(139,21,56,.75);
  transition:background .2s, transform .1s, box-shadow .2s;
}
.admin-body .save-btn:hover,
.admin-body .login-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(139,21,56,.9); }
.admin-body .save-btn:active,
.admin-body .login-btn:active{ transform:translateY(0); }
.admin-body .save-btn.secondary{ border:1px solid rgba(232,197,160,.22); color:rgba(240,230,216,.9); box-shadow:none; }
.admin-body .save-btn.secondary:hover{ border-color:var(--champagne); color:var(--champagne); background:rgba(232,197,160,.05); }
.admin-body .save-btn.danger{ box-shadow:0 8px 20px -12px rgba(139,21,56,.6); }

/* ── Tabellen ───────────────────────────────────────── */
.admin-body table.data-table th{ border-bottom:1px solid rgba(232,197,160,.16); color:rgba(232,197,160,.6); }
.admin-body table.data-table td{ border-bottom:1px solid rgba(232,197,160,.08); }
.admin-body table.data-table tr:hover td{ background:rgba(232,197,160,.045); }

/* ── Tabs ───────────────────────────────────────────── */
.admin-body .page-tabs{ border-bottom:1px solid rgba(232,197,160,.16); }
.admin-body .lang-admin-tab{ border:1px solid rgba(232,197,160,.2); border-radius:6px; }
.admin-body .lang-admin-tab:not(:first-child){ border-left:1px solid rgba(232,197,160,.2); }
.admin-body .lang-admin-tab.active,
.admin-body .lang-admin-tab:hover{ background:rgba(232,197,160,.1); color:var(--champagne); border-color:rgba(232,197,160,.4); }

/* ── Kaart-varianten (berichten / upload / foto / dropzone) ── */
.admin-body .msg-card,
.admin-body .photo-card-admin{ border:1px solid rgba(232,197,160,.14); border-radius:10px; }
.admin-body .msg-card:hover,
.admin-body .photo-card-admin:hover{ border-color:rgba(232,197,160,.3); }
.admin-body .drop-zone{ border:2px dashed rgba(232,197,160,.24); border-radius:10px; }
.admin-body .drop-zone:hover,
.admin-body .drop-zone.dragover{ border-color:var(--champagne); background:rgba(232,197,160,.05); }

/* ── Badges (grijs was washed-out) ──────────────────── */
.admin-body .badge{ border-radius:5px; }
.admin-body .badge.gray{ background:rgba(240,230,216,.08); color:rgba(240,230,216,.75); border:1px solid rgba(240,230,216,.14); }

/* ── Toggle-schakelaar ──────────────────────────────── */
.admin-body .toggle-slider{ background:rgba(240,230,216,.15); border:1px solid rgba(232,197,160,.16); border-radius:999px; }
.admin-body .toggle-slider::before{ border-radius:50%; background:rgba(240,230,216,.85); }
.admin-body .toggle input:checked + .toggle-slider{ background:var(--oxblood); border-color:var(--oxblood); }

/* ── Instellingen-rijen ─────────────────────────────── */
.admin-body .settings-row{ border-bottom:1px solid rgba(232,197,160,.1); }

/* ── Login-kaart ────────────────────────────────────── */
.admin-body .login-box{
  border:1px solid rgba(232,197,160,.18);
  border-radius:16px;
  background:linear-gradient(160deg, rgba(24,12,15,.92), rgba(13,7,9,.95));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);
}

/* ── Zoekveld harmoniseren met de opfris ────────────── */
.admin-body .ilk-search-input{ border-radius:8px; border-color:rgba(232,197,160,.2); }
.admin-body .ilk-search-input:focus{ box-shadow:0 0 0 3px rgba(232,197,160,.12); }

/* ── "Meer"-knop + inklapbaar deel (kort menu) ──────── */
.admin-body #sidebar-more{ display:none; }
.admin-body #sidebar-more.show{ display:block; }
.admin-body .sidebar-more-toggle{
  display:flex; align-items:center; gap:.6rem; padding:.72rem 1.25rem; margin:.5rem .55rem 0 0;
  font-size:.8rem; color:var(--champagne); text-decoration:none; cursor:pointer;
  border-top:1px solid rgba(232,197,160,.12); border-radius:0 9px 9px 0;
}
.admin-body .sidebar-more-toggle:hover{ background:rgba(232,197,160,.06); }
.admin-body .sidebar-more-toggle .sidebar-icon{ opacity:.72; }
.admin-body .sidebar-more-toggle .more-caret{ margin-left:auto; transition:transform .2s; font-size:.7rem; }
.admin-body .sidebar-more-toggle.open .more-caret{ transform:rotate(180deg); }
/* Mobiel = horizontale scroller: toon alles inline, verberg de Meer-knop */
@media (max-width:900px){
  .admin-body #sidebar-more{ display:contents !important; }
  .admin-body .sidebar-more-toggle{ display:none !important; }
}