/* Admin dark theme overrides (2026-01-04) */

:root{
  --admin-bg: var(--bg, #0b1220);
  --admin-panel: var(--panel, #0f172a);
  --admin-card: var(--card, #111c33);
  --admin-text: var(--text, #e5e7eb);
  --admin-muted: var(--muted, rgba(229,231,235,.72));
  --admin-border: var(--border, rgba(255,255,255,.10));
  --admin-shadow: var(--shadow, 0 16px 40px rgba(0,0,0,.45));
}

html, body{
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
}
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.container{ background: transparent !important; }

.card, .modal-card, .panel, .box, .content-card{
  background: var(--admin-card) !important;
  color: var(--admin-text) !important;
  border: 1px solid var(--admin-border) !important;
  box-shadow: var(--admin-shadow) !important;
}

.card h1, .card h2, .card h3,
.modal-card h1, .modal-card h2, .modal-card h3{
  color: rgba(255,255,255,.92) !important;
}

small, .muted, .hint, .sub, .desc{
  color: var(--admin-muted) !important;
}

/* Modal overlay + header */
.modal-backdrop, .modal, .overlay{
  background: rgba(0,0,0,.55) !important;
}
.modal-header{
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.modal-footer{
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* ESZLE iframe clickability */
#eszleModal iframe{
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}
#eszleModal .modal-card{
  overflow: hidden !important;
}
#eszleModal .modal-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
}

/* Buttons */
.btn, button, input[type="submit"], a.btn{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.btn:hover, button:hover, input[type="submit"]:hover, a.btn:hover{
  background: rgba(255,255,255,.10) !important;
}
.btn.primary, .btn-primary, button.primary{
  background: rgba(139,92,246,.95) !important;
  border-color: rgba(139,92,246,.95) !important;
  color: #0b1220 !important;
}
.btn.ghost{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.90) !important;
}
.btn.danger{
  background: rgba(239,68,68,.20) !important;
  border-color: rgba(239,68,68,.30) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Forms */
label{ color: rgba(255,255,255,.78) !important; }
input, select, textarea{
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45) !important; }
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(139,92,246,.55) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.18) !important;
}

/* Tables */
table{
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
th{
  background: rgba(139,92,246,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
td{
  color: rgba(255,255,255,.90) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
tr:hover td{
  background: rgba(255,255,255,.04) !important;
}

/* Notices */
.notice, .alert{
  background: rgba(56,189,248,.10) !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  color: rgba(229,231,235,.95) !important;
}
/* --- HOTFIX: maradék fehér elemek felülírása --- */

/* Bootstrap / általános form elemek */
.form-control, .form-select, .form-check-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
textarea, select{
  background: rgba(9,16,28,.65) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Input group (bal oldali "címke", ikon, stb.) */
.input-group-text{
  background: rgba(9,16,28,.55) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* Modal belső elemek – sokszor itt jön a fehér */
.modal .modal-content,
.modal .modal-header,
.modal .modal-body,
.modal .modal-footer{
  background: rgba(16,31,54,.95) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Card / panel / list típusú elemek (gyakran marad fehér) */
.card, .card-header, .card-body, .card-footer,
.list-group, .list-group-item{
  background: rgba(16,31,54,.92) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Dropdownok (pl. bootstrap dropdown) */
.dropdown-menu, .dropdown-item{
  background: rgba(16,31,54,.98) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.dropdown-item:hover{
  background: rgba(255,255,255,.06) !important;
}

/* Linkek, amik "kék a fehéren" érzést adnak */
a, .link, .text-primary{
  color: var(--accent2) !important;
}

/* HR / elválasztók */
hr, .divider{
  border-color: rgba(255,255,255,.10) !important;
}

/* Ha valahol konkrétan fehér background van ráégetve */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"]{
  background: rgba(16,31,54,.92) !important;
  color: var(--text) !important;
}

/* =====================================================================
   HARD OVERRIDES (wins against embedded light-theme <style> blocks)
   ===================================================================== */

/* Prevent horizontal scrolling inside modals */
.modal-card,
.modal-box,
.modal-box--editor,
.modal-content,
.modal-body,
.modal-inner {
  overflow-x: hidden !important;
}

/* Make form controls fit the modal width */
.modal-card *,
.modal-box * {
  box-sizing: border-box !important;
}
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-card button,
.modal-box input,
.modal-box select,
.modal-box textarea,
.modal-box button {
  max-width: 100% !important;
}

/* Darken the modal/card containers (some pages set these to white) */
.modal-card,
.modal-box,
.modal-box--editor,
.user-edit-modal,
.perms-modal,
.sessions-modal,
.eszle-admin-modal {
  background: rgba(13, 23, 43, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Close (X) button visibility */
.modal-close,
.modal-card .close,
.modal-card button.close,
button.modal-close {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}
.modal-close:hover,
.modal-card .close:hover,
button.modal-close:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* Tabs / menu chips in modals (avoid white backgrounds) */
.tab,
.tabs button,
.modal-tabs button,
.modal-card .tab,
.modal-card .tabs button {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.tab.active,
.tabs button.active,
.modal-tabs button.active {
  background: rgba(126, 87, 194, 0.28) !important;
  border-color: rgba(126, 87, 194, 0.55) !important;
}

/* User edit tiles / permission tiles (some pages set to #fff) */
.user-edit-tile,
.perm-tile,
.user-edit-tile *,
.perm-tile * {
  background: transparent;
}
.user-edit-tile,
.perm-tile {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Toggles (active/inactive) — keep readable in dark mode */
.btn-toggle-active,
.btn-toggle-inactive {
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.btn-toggle-active {
  background: rgba(46, 204, 113, 0.22) !important;
}
.btn-toggle-inactive {
  background: rgba(231, 76, 60, 0.20) !important;
}

/* Pills / chips (role, status, etc.) */
.pill,
.chip,
.badge,
.tag,
.role,
.status {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Tables inside modals (some pages set white header rows) */
.modal-card table,
.modal-box table {
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
}
.modal-card th,
.modal-box th {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
}
.modal-card td,
.modal-box td {
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Select dropdowns: ensure text readable (light default often causes issues) */
select,
select option {
  background: rgba(13, 23, 43, 0.98) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* =====================================================================
   V2 + ESZLE dashboard "csempék" (home-tile)
   Ezeket a lapok inline <style>-ban világos színekkel definiálják,
   ezért itt (külön) felülírjuk, hogy a már bevezetett dark kinézethez
   igazodjanak – logika módosítás nélkül.
   ===================================================================== */

.home-tile{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.40) !important;
  text-decoration: none !important;
}
.home-tile:hover{
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,0.55) !important;
}
.home-tile-icon{
  background: rgba(139,92,246,0.20) !important;
}
.home-tile-title{
  color: rgba(255,255,255,0.94) !important;
}
.home-tile-desc,
.home-tile-meta{
  color: rgba(229,231,235,0.72) !important;
}
.home-tile-link{
  color: rgba(167,139,250,0.95) !important;
}

/* =====================================================================
   Felhasználó szerkesztése – csempék (user-edit-*)
   A title/sub elemek inline CSS-ben fixen sötét (#111/#6b...) színűek,
   ezért sötét háttéren olvashatatlanok.
   ===================================================================== */

.user-edit-tile{
  text-decoration: none !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
}
.user-edit-tile:hover{
  background: rgba(255,255,255,0.09) !important;
}
.user-edit-title{
  color: rgba(255,255,255,0.94) !important;
}
.user-edit-sub{
  color: rgba(229,231,235,0.70) !important;
}
.user-edit-arrow{
  color: rgba(229,231,235,0.55) !important;
}
.user-edit-icon{
  background: rgba(139,92,246,0.20) !important;
}

/* =====================================================================
   ESZLE Médiatár (media-*) – több elem világos színnel volt megadva
   ===================================================================== */

.media-item{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
}
.media-item:hover{
  background: rgba(255,255,255,0.08) !important;
}
.media-item img{
  background: rgba(255,255,255,0.04) !important;
}
.media-item .meta{
  color: rgba(229,231,235,0.70) !important;
}
.media-tools,
.media-row{
  color: rgba(255,255,255,0.90) !important;
}


/* Force tables to stay within modal width */
.modal-card table,
.modal-box table {
  width: 100% !important;
  table-layout: fixed !important;
}
.modal-card td,
.modal-card th,
.modal-box td,
.modal-box th {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Form controls default dark (if any inline CSS sets light colors) */
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-box input,
.modal-box select,
.modal-box textarea {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
}