/**
 * Gasty Wiki – Tailwind Docs layout + Gasty dark/teal colors
 */

/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --g-bg:          #080d18;
  --g-sidebar-bg:  #080d18;
  --g-border:      rgba(255,255,255,0.06);
  --g-teal:        #2ec8ce;
  --g-teal-glow:   rgba(45,212,191,0.15);
  --g-white:       #f8fafc;
  --g-text:        #cbd5e1;
  --g-muted:       #748399;
  --g-dim:         #64748b;
  --g-sidebar-w:   272px;
  --g-topnav-h:    56px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  background-color: var(--g-bg) !important;
  color: var(--g-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Gasty atmospheric glow */
body::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 50vw; height: 50vh;
  background: radial-gradient(ellipse at top right,
    rgba(45,212,191,0.04) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   COLORS
   ============================================================ */
.main-color      { background-color: var(--g-teal) !important; }
.main-color-text { color: var(--g-teal) !important; }

a, a:visited      { text-decoration: none !important; }
a:hover, a:active { color: #5eead4 !important; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--g-white) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}
h1 { 
  font-size: 3rem !important; 
  margin: 0 0 1.25rem !important;
  font-weight: 600;
  display: inline-block;
  line-height: 1.15 !important;
  background-image: linear-gradient(to right, #e2e8f0 45%, #70f0f0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
h2 { font-size: 1.6rem !important; margin: 2.25rem 0 0.75rem !important; padding-bottom: 0.5rem; border-bottom: 1px solid var(--g-border); }
h3 { font-size: 1.05rem !important; margin: 1.75rem 0 0.5rem !important; }
h4 { font-size: 0.95rem !important; margin: 1.25rem 0 0.4rem !important; }
h5 { font-size: 0.875rem !important; margin: 1rem 0 0.3rem !important; }
h6 { font-size: 0.8rem !important; margin: 0.75rem 0 0.25rem !important; }


h4, h5, h6,
h4 strong, h5 strong, h6 strong {
  color: #5db9ff !important;
}

p  { color: var(--g-text); line-height: 1.8; margin-bottom: 1rem; }
strong { color: var(--g-white); }

/* ============================================================
   GLOBAL TOP NAV – full width, fixed above sidebar
   ============================================================ */
#gw-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--g-topnav-h);
  z-index: 1002;
  background: var(--g-sidebar-bg);
  border-bottom: 1px solid var(--g-border);
  display: flex;
  align-items: center;
}

/* Left section: same width as sidebar, contains toggle + logo */
.gw-topnav-left {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--g-sidebar-w);
  min-width: var(--g-sidebar-w);
  padding: 0 16px 0 16px;
  height: 100%;
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), min-width 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Logo in top nav */
#gw-topnav-logo {
  padding-left: 20px;
}
#gw-topnav-logo .gasty-logo-svg {
  width: auto;
  height: 36px !important;
  flex-shrink: 0;
}
#gw-topnav-logo span {
  color: var(--g-white) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap;
}

/* Toggle button in top nav */
.gw-topnav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--g-dim);
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
  padding: 0;
}
.gw-topnav-btn:hover { color: var(--g-text); background: rgba(255,255,255,0.05); }
.gw-topnav-btn i { font-size: 18px; line-height: 1; color: inherit !important; }

/* Right section: search + nav links + admin buttons */
.gw-topnav-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 1.25rem;
  padding-left: 1rem;
  min-width: 0;
}

/* Search – inside right section */
.gw-topnav-search {
  max-width: 90%;
  width: 280px;
  flex-shrink: 0;
}
.gw-topnav-search form {
  position: relative;
  display: flex;
  align-items: center;
}
.gw-topnav-search i.material-icons {
  position: absolute;
  left: 10px;
  color: var(--g-muted);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}
#topnav-search {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--g-border) !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-radius: 8px !important;
  color: var(--g-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  height: 34px !important;
  padding: 0 12px 0 34px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.15s, background 0.15s !important;
}
#topnav-search::placeholder { color: var(--g-muted) !important; }
#topnav-search:focus {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(45,212,191,0.4) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.08) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(45,212,191,0.08) !important;
  outline: none !important;
}

/* External nav links */
.gw-topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 4px;
}
.gw-topnav-links a {
  color: var(--g-text) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.gw-topnav-links a:hover {
  color: var(--g-white) !important;
}
/* Bejelentkezés – pill-style button */
.gw-topnav-links .gw-topnav-login-btn {
  color: var(--g-teal) !important;
  border: 1px solid rgba(45,212,191,0.3) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}
.gw-topnav-links .gw-topnav-login-btn:hover {
  background: rgba(45,212,191,0.08) !important;
  border-color: rgba(45,212,191,0.6) !important;
  color: var(--g-teal) !important;
}

/* ============================================================
   LAYOUT
   ============================================================ */
main {
  padding-left: var(--g-sidebar-w) !important;
  padding-top: var(--g-topnav-h) !important;
  transition: padding-left 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  z-index: 1;
}

header {
  padding-left: 0 !important;
}

@media only screen and (max-width: 992px) {
  #gw-topnav .gw-topnav-left { width: auto; min-width: auto; border-right: none; }
  main { padding-left: 0 !important; }
  .sidebar-footer { display: none !important; }
}

/* Collapsed sidebar */
body.sidebar-closed ul.sidenav.sidenav-fixed {
  transform: translateX(calc(-1 * var(--g-sidebar-w))) !important;
}
body.sidebar-closed main {
  padding-left: 0 !important;
}
body.sidebar-closed .gw-topnav-left {
  width: 60px !important;
  min-width: 60px !important;
}
body.sidebar-closed #gw-topnav-logo span,
body.sidebar-closed #gw-topnav-logo .gasty-logo-svg ~ span {
  display: none;
}
body.sidebar-closed .sidebar-footer { opacity: 0; pointer-events: none; }

/* ── Main layout wrapper ── */
main > .gw-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--g-topnav-h));
  position: relative;
  z-index: 1;
}

/* Content area */
.gw-content {
  flex: 1;
  padding: 0;
  background-color: #080d18;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 12px 12px;
}

/* Article wrapper */
.gw-article-wrap {
  /* max-width: 860px; */
  padding: 3rem 6% 5rem;
  margin-left: 8%;
  margin-right: 8%;
  background-color: var(--g-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2rem;
  margin-top: 4rem;
}

/* Footer bar */
.gw-footer {
  display: flex;
  align-items: center;
  padding: 0.75rem 3rem;
  border-top: 1px solid var(--g-border);
  font-size: 0.72rem;
  color: var(--g-muted);
  gap: 1rem;
  background-color: var(--g-bg);
}
.gw-footer a { color: var(--g-dim) !important; }
.gw-footer a:hover { color: var(--g-teal) !important; }

/* Footer left – subtle icon buttons (print / edit) */
.gw-footer-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gw-footer-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  color: var(--g-muted) !important;
  text-decoration: none !important;
  transition: color 0.12s, background 0.12s !important;
  appearance: none;
  border: 0;
  background: transparent;
}
.gw-footer-icon-btn i {
  font-size: 15px !important;
  line-height: 1 !important;
  color: inherit !important;
}
.gw-footer-icon-btn:hover {
  color: var(--g-text) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
ul.sidenav.sidenav-fixed {
  width: var(--g-sidebar-w) !important;
  top: var(--g-topnav-h) !important;
  height: calc(100vh - var(--g-topnav-h)) !important;
  background-color: var(--g-sidebar-bg) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 0.5rem !important;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Nav items – Tailwind style ── */
ul.sidenav.sidenav-fixed li {
  line-height: 1 !important;
  height: auto !important;
}

ul.sidenav.sidenav-fixed li a {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  height: auto !important;
  padding: 5px 20px 5px 20px !important;
  border-left: 2px solid transparent !important;
  transition: color 0.12s, background 0.12s !important;
  white-space: normal !important;
}

ul.sidenav.sidenav-fixed .nav-section-header li a {
  color: #99a1ae !important;
}

ul.sidenav.sidenav-fixed .nav-section-items li a {
  color: #c3cad4 !important;
}

ul.sidenav.sidenav-fixed li:hover { background: transparent !important; }
ul.sidenav.sidenav-fixed li:hover > a {
  color: var(--g-text) !important;
  background: transparent !important;
}
/* sub_index / subsub_index hover handled by their own rules below */

/* Active state – teal left border, no background */
ul.sidenav.sidenav-fixed li.active > a {
  color: var(--g-teal) !important;
  font-weight: 500 !important;
  border-left: 2px solid var(--g-teal) !important;
  background: transparent !important;
}
ul.sidenav.sidenav-fixed li.active {
  background: transparent !important;
}

/* ── Nav section wrappers (collapsible) ── */
ul.sidenav.sidenav-fixed li.nav-section {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.nav-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1rem 0.3rem 16px !important;
  font-family: monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Section label – like Tailwind's GETTING STARTED */
.nav-section-link {
  color: #818d9e !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0 !important;
  border-left: none !important;
  background: transparent !important;
  flex: 1 !important;
  height: auto !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
.nav-section-link:hover { color: var(--g-text) !important; background: transparent !important; }

/* Chevron toggle button */
.nav-section-chevron {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px !important;
  color: var(--g-muted) !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 4px !important;
  transition: color 0.12s, background 0.12s !important;
  flex-shrink: 0 !important;
}
.nav-section-chevron:hover { color: var(--g-text) !important; background: rgba(255,255,255,0.05) !important; }
.nav-section-chevron i {
  font-size: 16px !important;
  transition: transform 0.22s ease !important;
  transform: rotate(90deg); /* open by default: pointing down */
  color: inherit !important;
  line-height: 1 !important;
}
.nav-section.closed > .nav-section-header .nav-section-chevron i {
  transform: rotate(0deg); /* closed: pointing right */
}

/* Items list – collapsible via max-height + Tailwind-style vertical track */
.nav-section-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 36px !important;           /* Align with section header text */
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.nav-section.closed > .nav-section-items {
  max-height: 0 !important;
}

/* Sub-items (2nd level) – Tailwind pattern: li overlaps ul border */
ul.sidenav.sidenav-fixed li.sub_index {
  margin-left: -1px !important;            /* Overlap the ul border so a's border covers it */
}
ul.sidenav.sidenav-fixed li.sub_index a {
  padding: 5px 16px 5px 16px !important;
  font-size: 0.9rem !important;
  margin-left: 0 !important;
  border-left: 3px solid rgba(255,255,255,0.1) !important; 
  transition: color 0.12s, border-color 0.12s !important;
}
ul.sidenav.sidenav-fixed li.sub_index:hover > a {
  color: var(--g-text) !important;
  border-left-color: rgba(255,255,255,0.25) !important;
  background: transparent !important;
}
ul.sidenav.sidenav-fixed li.sub_index.active > a {
  color: var(--g-white) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--g-white) !important;
  background: transparent !important;
}

/* 3rd level nested UL – same track pattern, deeper indent */
ul.sidenav.sidenav-fixed li.sub_index > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 16px !important;
  /* border-left: 1px solid rgba(255,255,255,0.07) !important; */
}

/* Sub-sub-items (3rd level) */
ul.sidenav.sidenav-fixed li.subsub_index {
  margin-left: -1px !important;
}
ul.sidenav.sidenav-fixed li.subsub_index a {
  padding: 4px 16px 4px 14px !important;
  font-size: 0.775rem !important;
  margin-left: 0 !important;
  border-left: 1px solid transparent !important;
}
ul.sidenav.sidenav-fixed li.subsub_index:hover > a {
  color: var(--g-text) !important;
  /* border-left-color: rgba(255,255,255,0.2) !important; */
  background: transparent !important;
}
ul.sidenav.sidenav-fixed li.subsub_index.active > a {
  color: var(--g-white) !important;
  border-left: 1px solid var(--g-bg) !important;
}

ul.sidenav.sidenav-fixed > li:last-child { margin-bottom: 100px !important; }

/* ── Sidebar footer ── */
.sidebar-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--g-sidebar-w) !important;
  background-color: var(--g-sidebar-bg) !important;
  border-top: 1px solid var(--g-border) !important;
  border-right: 1px solid var(--g-border) !important;
  padding: 12px 20px 16px !important;
  color: var(--g-dim) !important;
  z-index: 999 !important;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s !important;
}
body.sidebar-closed .sidebar-footer {
  width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.sidebar-footer .default-title {
  color: var(--g-text) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}
.sidebar-footer .default-title::before {
  opacity: 0 !important;
  background: var(--g-teal) !important;
  color: #060c18 !important;
  font-size: 9px !important;
}
.sidebar-footer .default-description {
  color: var(--g-muted) !important;
  font-size: 0.7rem !important;
}

.divider { background-color: var(--g-border) !important; height: 1px !important; }

/* ============================================================
   ARTICLE – clean, no card, like Tailwind docs
   ============================================================ */
article {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2.5rem 0 4rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 780px;
  min-height: calc(100vh - 230px);
}

article p       { color: var(--g-text); line-height: 1.8; }
article li      { color: var(--g-text); line-height: 1.8; color: #b6c1cf; }
article strong  { color: var(--g-white); font-weight: 600; }
article em      { color: var(--g-text); font-style: italic; }
article a       { color: var(--g-teal) !important; text-decoration: underline !important; text-decoration-color: rgba(45,212,191,0.35) !important; text-underline-offset: 3px !important; }
article a:hover { text-decoration-color: var(--g-teal) !important; }
article p > img { 
  border-radius: 18px;
  border: 2px solid #71809670;
  box-shadow: 0px 8px 24px 0px #03060c;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0;
  margin-right: 0;
}

article p > img[alt="draft_logo"] { 
  border-radius: 0;
  border: 0px;
  box-shadow: none;
  margin-top: -3rem;
  margin-bottom: 2rem;
  margin-left: 0;
  margin-right: 0;
  filter: grayscale(1);
  opacity: 0.6;
}

article h5, article h6 {
  font-family: monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1.6px !important;
  margin: 2.25rem 0 0.25rem !important;
}

.bg-gradient {
  display: block;
  position: fixed;
  top: 40%;
  left: 0%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(40 139 147 / 10%) 0%, rgb(20 39 54 / 24%) 40%, rgb(32 71 72 / 0%) 60%);
  z-index: 999999;
  mix-blend-mode: lighten;
  width: 70vh;
  height: 60vh;
  transform: scale(2.2) translate(calc(-50% / 2.2), calc(-50% / 2.2));
  transform-origin: center center;
  will-change: opacity;
}

/* Horizontal rule */
article hr {
  border: none !important;
  border-top: 1px solid var(--g-border) !important;
  margin: 2rem 0 !important;
}

/* ============================================================
   BLOCKQUOTE
   ============================================================ */
article blockquote {
  border-left: 0px solid var(--g-teal) !important;
  margin: 1.5rem 0 !important;
  padding: 1.75rem 2.25rem !important;
  background: rgba(45,212,191,0.05) !important;
  border-radius: 1rem !important;
}

article blockquote p {
  color: var(--g-text) !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
}

article blockquote strong {
  color: var(--g-teal) !important;
}

/* ============================================================
   CODE
   ============================================================ */
code {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
  font-size: 0.8125em !important;
  background: rgba(45,212,191,0.08) !important;
  color: var(--g-teal) !important;
  border: 1px solid rgba(45,212,191,0.14) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

pre {
  background: #060c18 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  overflow-x: auto;
  margin: 0;
}

pre code {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5rem 0 !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

th {
  background: rgba(255,255,255,0.03) !important;
  color: var(--g-dim) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0.6rem 1rem !important;
  border: 1px solid var(--g-border) !important;
}

td {
  padding: 0.6rem 1rem !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text) !important;
  vertical-align: top !important;
}

tr:nth-child(even) td { background: rgba(255,255,255,0.015) !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.825rem !important;
  border-radius: 7px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s ease !important;
}

.btn.main-color {
  background: var(--g-teal) !important;
  color: #060c18 !important;
  box-shadow: 0 0 16px rgba(45,212,191,0.2) !important;
}
.btn.main-color:hover {
  background: #5eead4 !important;
  box-shadow: 0 0 24px rgba(45,212,191,0.35) !important;
}

.btn-floating.main-color {
  background: var(--g-teal) !important;
  color: #060c18 !important;
  box-shadow: 0 0 12px rgba(45,212,191,0.22) !important;
}
.btn-floating.main-color i { color: #060c18 !important; }

/* ============================================================
   FORMS
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea.materialize-textarea {
  color: var(--g-text) !important;
  background: transparent !important;
  border-bottom-color: var(--g-border) !important;
  font-family: 'Inter', sans-serif !important;
}

input:not([type]):focus:not([readonly]),
input[type="text"]:not(.browser-default):focus:not([readonly]),
input[type="password"]:not(.browser-default):focus:not([readonly]),
input[type="search"]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--g-teal) !important;
  box-shadow: 0 1px 0 0 var(--g-teal) !important;
  -webkit-box-shadow: 0 1px 0 0 var(--g-teal) !important;
}

label { color: var(--g-muted) !important; font-size: 0.8rem !important; }

/* ============================================================
   MARK
   ============================================================ */
mark {
  background: rgba(45,212,191,0.14) !important;
  color: var(--g-teal) !important;
  border-radius: 3px;
  padding: 0 3px;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  background: #0d1526 !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 12px !important;
  color: var(--g-text) !important;
}
.modal .modal-content h4 {
  color: var(--g-teal) !important;
  font-size: 1.05rem !important;
}
.modal-footer {
  background: #0d1526 !important;
  border-top: 1px solid var(--g-border) !important;
}

/* ============================================================
   IMAGES
   ============================================================ */
img { max-width: 100%; border-radius: 8px; }
img.polaroid {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 10px !important;
  padding: 8px !important;
}

/* ============================================================
   FOOTER TEXT
   ============================================================ */
.col small, .col small a {
  color: var(--g-muted) !important;
  font-size: 0.72rem !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--g-bg); }
::-webkit-scrollbar-thumb        { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover  { background: var(--g-teal); }
*                                { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; }

/* ============================================================
   EDITOR
   ============================================================ */
.EasyMDEContainer .CodeMirror {
  background: #060c18 !important;
  color: var(--g-text) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 0 0 8px 8px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.EasyMDEContainer .editor-toolbar {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--g-border) !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
}
.EasyMDEContainer .editor-toolbar i.separator { 
  border-left: 0;
  border-right: 0;
  padding-left: 12px;
  padding-right: 12px;
  opacity: 0.4;
}
.EasyMDEContainer .editor-toolbar > *        { color: var(--g-dim) !important; }
.EasyMDEContainer .editor-toolbar > .active,
.editor-toolbar > button:hover               { background: var(--g-teal-glow) !important; color: var(--g-teal) !important; border-radius: 4px !important; }
.editor-preview                              { background: #060c18 !important; color: var(--g-text) !important; }
.editor-toolbar.fullscreen                   { background: var(--g-bg) !important; }
.EasyMDEContainer .CodeMirror-fullscreen     { background: var(--g-bg) !important; }

/* Fix: kurzor pozíció igazítás – a heading sorok eltérő line-height-je
   elcsúsztatja a CodeMirror kurzort; a font-size marad, csak a
   line-height-t normalizáljuk, hogy a kurzor mindig a szöveg mellé essen */
.EasyMDEContainer .cm-s-easymde .cm-header-1,
.EasyMDEContainer .cm-s-easymde .cm-header-2,
.EasyMDEContainer .cm-s-easymde .cm-header-3,
.EasyMDEContainer .cm-s-easymde .cm-header-4,
.EasyMDEContainer .cm-s-easymde .cm-header-5,
.EasyMDEContainer .cm-s-easymde .cm-header-6 { line-height: 1 !important; }

/* ============================================================
   MISC
   ============================================================ */
.sidenav-overlay { background: rgba(0,0,0,0.8) !important; }

.material-tooltip {
  background: #1e293b !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text) !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.775rem !important;
}

#toast-container .toast {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.825rem !important;
}