:root{
  --bg: #0b1020;
  --panel: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.10);
  --card2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --line: rgba(255,255,255,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.28);
  --shadow2: 0 10px 30px rgba(0,0,0,.22);
  --radius: 18px;
  --radius2: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(900px 600px at 60% 95%, rgba(56,189,248,.18), transparent 60%),
    var(--bg);
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.92; }

.container{
  max-width: 1200px;
  margin: 18px auto 60px;
  padding: 0 16px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(10,14,30,.65);
  backdrop-filter: blur(14px);
}

.brand{
  font-weight: 800;
  letter-spacing: .2px;
}

.topbar nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar nav a{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.topbar nav a.active{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
}

.pagehead{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin: 10px 0 14px;
}

h1{ margin: 0 0 6px; font-size: 28px; letter-spacing: -.2px; }
h2{ margin: 0 0 10px; font-size: 18px; letter-spacing: -.1px; }

.muted{ color: var(--muted); }
.small{ font-size: 12.5px; }

.card{
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.06));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 16px;
  margin: 12px 0;
}

.tip{
  padding: 10px 12px;
  border-radius: var(--radius2);
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 13px;
}

.row{ display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }
.between{ justify-content: space-between; }

input, select, textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
}

input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.085);
}

textarea{ resize: vertical; min-height: 90px; }

.btn, button{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.14);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}

.btn:hover, button:hover{ background: rgba(255,255,255,.18); }
.btn:active, button:active{ transform: translateY(1px); }

.btn-ghost{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.btn-ghost:hover{ background: rgba(255,255,255,.10); }

.form-actions{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.inline{ display:inline; }

.checkbox-inline{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  height: 44px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-size: 12px;
  color: var(--muted);
}

.tablewrap{
  overflow:auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}

.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  text-align: left;
  vertical-align: middle;
}

.table th{
  position: sticky;
  top: 0;
  background: rgba(10,14,30,.55);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.table tr:hover td{ background: rgba(255,255,255,.04); }

.right{ text-align: right; }
.center{ text-align: center; }

.w90{ width: 90px !important; }
.w110{ width: 110px !important; }

.error{
  color: #ffd1d1;
  background: rgba(255, 77, 79, .12);
  border: 1px solid rgba(255, 77, 79, .22);
  padding: 10px 12px;
  border-radius: 14px;
}

/* --- Form grid (keeps your earlier layout fix) --- */
.form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  align-items: end;
}
.field{ display:flex; flex-direction: column; gap: 6px; }
.field label{ font-size: 13px; color: rgba(255,255,255,.80); }

.span-2{ grid-column: span 2; }
.span-3{ grid-column: span 3; }
.span-4{ grid-column: span 4; }
.span-5{ grid-column: span 5; }
.span-6{ grid-column: span 6; }
.span-7{ grid-column: span 7; }
.span-8{ grid-column: span 8; }
.span-12{ grid-column: span 12; }

@media (max-width: 900px){
  .table{ min-width: 760px; }
  .form-grid{ grid-template-columns: 1fr; }
  .span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{ grid-column: span 1; }
  .form-actions{ justify-content: stretch; }
  .form-actions button{ width: 100%; }
}
/* --- Mobile/desktop visibility helpers --- */
.only-mobile { display: none; }
.only-desktop { display: block; }

@media (max-width: 900px){
  .only-mobile { display: block; }
  .only-desktop { display: none; }
}

.card-compact { padding: 14px; }

/* --- Status badges --- */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.b-red{ background: rgba(255, 77, 79, .18); border-color: rgba(255, 77, 79, .28); }
.b-amber{ background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .28); }
.b-green{ background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .26); }
.only-mobile { display: none; }
.only-desktop { display: block; }

@media (max-width: 900px){
  .only-mobile { display: block; }
  .only-desktop { display: none; }
}
.card-compact { padding: 14px; }
.w100 { width: 100px !important; }
/* Index table tweaks */
.table td { white-space: nowrap; }
.table td:first-child { white-space: normal; } /* név lehet hosszabb */
.table th.right, .table td.right { text-align: right; }
.table td { padding-top: 14px; padding-bottom: 14px; }
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.b-red{ background: rgba(255, 77, 79, .18); border-color: rgba(255, 77, 79, .28); }
.b-amber{ background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .28); }
.b-green{ background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .26); }
.b-gray{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.75); }

.only-mobile { display: none; }
.only-desktop { display: block; }
@media (max-width: 900px){
  .only-mobile { display: block; }
  .only-desktop { display: none; }
}
.card-compact { padding: 14px; }
/* --- Fix: dropdown (select/option) olvashatóság dark UI-n --- */
:root { color-scheme: dark; } /* segít a natív elemeknél is */

select {
  background-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
}

/* a legfontosabb: az option elemek saját háttér+szín */
select option {
  background-color: #0b1020;  /* sötét háttér */
  color: rgba(255,255,255,.92);
}

/* optgroup esetére is */
select optgroup {
  background-color: #0b1020;
  color: rgba(255,255,255,.75);
}

/* Safari néha mást csinál, ez segít */
select:focus {
  outline: none;
}