/* =========================================================
   Nagycstag Admin UI
   Modern Light-Blue Glass (default) + Dark mode
   Features: Apple-like blur, subtle noise, hover lift, pro sidebar
   ========================================================= */

:root{
  --bg-0:#eef5ff;
  --bg-1:#eaf2ff;

  --surface: rgba(235,245,255,.72);
  --surface-strong: rgba(255,255,255,.86);
  --surface-soft: rgba(235,245,255,.55);

  --text:#0b1a33;
  --text-2:#1e293b;
  --text-3:#475569;
  --text-4:#94a3b8;

  --border: rgba(15,23,42,.12);
  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --brand-soft: rgba(37,99,235,.15);

  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 12px 36px rgba(30,64,175,.15);
  --shadow-sm:0 6px 18px rgba(30,64,175,.12);
  --ring:0 0 0 4px rgba(37,99,235,.22);
}

html[data-theme="dark"]{
  --bg-0:#071022;
  --bg-1:#050b18;

  --surface: rgba(10,20,40,.58);
  --surface-strong: rgba(10,20,40,.82);
  --surface-soft: rgba(10,20,40,.45);

  --text:#e7eefc;
  --text-2:#d6e2ff;
  --text-3:#a9b9dd;
  --text-4:#7e93bf;

  --border: rgba(231,238,252,.12);
  --brand:#60a5fa;
  --brand-2:#93c5fd;
  --brand-soft: rgba(96,165,250,.16);

  --shadow:0 18px 55px rgba(0,0,0,.45);
  --shadow-sm:0 10px 28px rgba(0,0,0,.32);
  --ring:0 0 0 4px rgba(96,165,250,.22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
  line-height:1.55;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(59,130,246,.25), transparent 55%),
    radial-gradient(800px 500px at 85% 15%, rgba(147,197,253,.35), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

/* ---------- Typography / visibility ---------- */
h1,h2,h3,h4,h5,h6{ color: var(--text); letter-spacing:-.2px; }
p{ color: var(--text-3); }
label,.form-label{ color: var(--text-2) !important; font-weight:800; font-size:13px; }
.text-muted,.muted,.form-text,small{ color: var(--text-4) !important; }
a{ color: var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
hr{ border:none; border-top:1px solid var(--border); margin:18px 0; }

/* ---------- Glass surfaces (cards/containers) ---------- */
.card,
.container,
.container-fluid,
.panel,
.box,
.bg-white{
  background: var(--surface) !important;
  border: 1.5px solid rgba(37,99,235,.25) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  color: var(--text) !important;
  position: relative;
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}

.card .card{ background: var(--surface-soft) !important; box-shadow: var(--shadow-sm); }

/* Premium hover (NO floating / NO movement) */
.card,
.container,
.container-fluid,
.panel,
.box{
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
  transform: none !important;
}

.card:hover,
.container:hover,
.container-fluid:hover,
.panel:hover,
.box:hover{
  transform: none !important;
  border-color: rgba(37,99,235,.30) !important;
  box-shadow: 0 16px 44px rgba(30,64,175,.14), inset 0 1px 0 rgba(255,255,255,.35);
}

/* remove shine pseudo if present */
.card::before,
.container::before,
.container-fluid::before,
.panel::before,
.box::before{
  opacity: 0 !important;
}

/* ---------- Bootstrap card header compatibility ---------- */
.card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- Forms ---------- */
/* IMPORTANT: do NOT style checkboxes/radios like text inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
.form-control:not(.form-check-input),
.form-select{
  background: var(--surface-strong) !important;
  border: 1.5px solid rgba(37,99,235,.25) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  font-size: 14px;
  color: var(--text) !important;
  outline:none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder,textarea::placeholder{ color: var(--text-4); }
input:focus,select:focus,textarea:focus,
.form-control:focus,.form-select:focus{
  border-color: var(--brand) !important;
  box-shadow: var(--ring) !important;
}

/* Checkboxes / switches: make the tick visible */
.form-check-input,
input[type="checkbox"],
input[type="radio"]{
  width: 1.15em;
  height: 1.15em;
  padding: 0 !important;
  margin-top: .2rem;
  border-radius: 6px;
  border: 1.5px solid rgba(37,99,235,.35) !important;
  background: var(--surface-strong) !important;
  appearance: auto;
  -webkit-appearance: auto;
  accent-color: var(--brand);
}

input[type="radio"],
.form-check-input[type="radio"]{
  border-radius: 999px;
}

html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"]{
  background: rgba(10,20,40,.78) !important;
  border-color: rgba(96,165,250,.35) !important;
  accent-color: var(--brand);
}

/* ---------- Buttons ---------- */
.btn,button{
  border-radius: var(--radius-sm) !important;
  font-weight: 900;
}

/* Ensure link-buttons are always clickable (some layouts had overlays) */
a.btn{ pointer-events: auto; position: relative; z-index: 3; }
.btn-primary{
  background: linear-gradient(135deg, var(--brand), rgba(255,255,255,.28)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.35);
}
.btn-primary:hover{ background: linear-gradient(135deg, var(--brand-2), rgba(255,255,255,.18)) !important; }
.btn-outline-primary{
  border-color: rgba(37,99,235,.35) !important;
  color: var(--brand) !important;
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.10) !important;
  color: var(--text) !important;
}
.btn-secondary{
  background: rgba(255,255,255,.55) !important;
  border: 1.5px solid rgba(37,99,235,.25) !important;
  color: var(--text-2) !important;
}
html[data-theme="dark"] .btn-secondary{ background: rgba(10,20,40,.55) !important; }
.btn-danger{
  background: linear-gradient(135deg, var(--danger), rgba(255,255,255,.20)) !important;
  border-color: rgba(220,38,38,.25) !important;
}

/* ---------- Tables ---------- */
table{ color: var(--text) !important; }
.table{ color: var(--text) !important; }
.table thead th{
  color: var(--text-3) !important;
  background: rgba(255,255,255,.35) !important;
  border-color: var(--border) !important;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .35px;
}
.table td,.table th{ border-color: var(--border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ background: rgba(255,255,255,.20) !important; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{ background: rgba(10,20,40,.35) !important; }

/* ---------- Alerts ---------- */
.alert{
  background: var(--surface) !important;
  border: 1.5px solid rgba(37,99,235,.25) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Dropdown / modal ---------- */
.dropdown-menu{
  background: var(--surface-strong) !important;
  border: 1.5px solid rgba(37,99,235,.25) !important;
}
.dropdown-item{ color: var(--text-3) !important; }
.dropdown-item:hover{ background: rgba(37,99,235,.10) !important; color: var(--text) !important; }
.modal-content{
  background: var(--surface-strong) !important;
  border: 1.5px solid rgba(37,99,235,.25) !important;
  color: var(--text) !important;
}

/* ---------- Sidebar (existing .sidebar markup) ---------- */
.sidebar{
  min-height: 100vh;
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  padding: 20px 14px;
  box-shadow: 0 18px 55px rgba(30,64,175,.10);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
}
.sidebar h1,.sidebar h2,.sidebar h3,.sidebar h4{ color: var(--text) !important; }
.sidebar a{
  color: var(--text-3) !important;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.sidebar a:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.18);
  color: var(--text-2) !important;
  transform: translateY(-1px);
}
.sidebar a.active{
  background: var(--brand-soft);
  border-color: rgba(37,99,235,.22);
  color: var(--brand) !important;
}

/* If you later switch to inline SVG icons inside .sidebar a .icon */
.sidebar .icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.38);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .sidebar .icon{ background: rgba(10,20,40,.45); }
.sidebar svg{ width: 18px; height: 18px; fill: currentColor; opacity: .92; }

/* ---------- Apple-like subtle noise overlay ---------- */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none; /* never eat clicks */
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .card,.container,.container-fluid,.panel,.box{ padding: 16px !important; }
  table{ display:block; overflow-x:auto; }
}


/* =========================================================
   Premium hover (NO floating / NO movement)
   - subtle depth
   - soft border highlight
   ========================================================= */
.card,
.container,
.container-fluid,
.panel,
.box{
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
  transform: none !important;
}

.card:hover,
.container:hover,
.container-fluid:hover,
.panel:hover,
.box:hover{
  transform: none !important;
  border-color: rgba(37,99,235,.22) !important;
  box-shadow: 0 16px 44px rgba(30,64,175,.14), inset 0 1px 0 rgba(255,255,255,.35);
}

/* remove shine / float pseudo effects if present */
.card::before,
.container::before,
.container-fluid::before,
.panel::before,
.box::before{
  opacity: 0 !important;
}


/* ===== Age badge (visible under birth dates) ===== */
.age-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color: var(--text-2) !important;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
}
html[data-theme="dark"] .age-badge{
  color: var(--text-2) !important;
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.22);
}


/* =========================================================
   Patch: readable font + visible age hint + clearer tile borders
   ========================================================= */

/* Use a classic, readable UI font */
body{
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
}

/* Do not clip helper texts like age badges */
.card, .container, .container-fluid, .panel, .box{
  overflow: visible !important;
}

/* Clearer tile borders ("csempék") */
.card, .container, .container-fluid, .panel, .box{
  border: 1.5px solid rgba(37,99,235,.25) !important;
  box-shadow: 0 12px 32px rgba(30,64,175,.14), inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box{
  border-color: rgba(96,165,250,.22) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}


/* Ensure no shine overlay (and never block clicks) */
.card::before,.container::before,.container-fluid::before,.panel::before,.box::before{ opacity:0 !important; pointer-events:none !important; }
html[data-theme="dark"] .card,html[data-theme="dark"] .container,html[data-theme="dark"] .container-fluid,html[data-theme="dark"] .panel,html[data-theme="dark"] .box{ border-color: rgba(96,165,250,.22) !important; }


/* ---------- Click layering safety (prevents glass/noise overlays from eating clicks) ---------- */
body{ position: relative; }
/* Put the noise layer behind everything, even on pages that don't use .container/.card */
body::before{ z-index: -1 !important; }
.container, .container-fluid, .card, .panel, .box{ position: relative; z-index: 1; }
a.print-btn, .print-wrap, .print-card, .actions{ position: relative; z-index: 1; }
a, button, input, label, select, textarea{ position: relative; z-index: 2; }