/* Görgetősáv helyének fenntartása – a fix topbar sose lógjon a csúszkára / az oldalon túl */
html{ scrollbar-gutter: stable; }
body{ overflow-x: clip; max-width: 100%; }

/* ===== Inter font ===== */
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* assets/app.css */
:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --card: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --soft: rgba(255,255,255,.04);

  --brand: #60a5fa;
  --on-brand: #0b1220;
  --brand2:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 18px;
  /* Űrlapmezők – közös fókusz / mélység */
  --field-radius: 14px;
  --field-radius-lg: 16px;
  --field-inset: 0 1px 0 rgba(255,255,255,.07) inset;
  --field-inset-light: 0 1px 2px rgba(15,23,42,.05) inset;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

[data-theme="light"]{
  --bg:#f0f4fa;
  --panel: rgba(15,23,42,.04);
  --panel2: rgba(15,23,42,.07);
  --card: rgba(255,255,255,.92);
  --line: rgba(15,23,42,.11);
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.58);
  --soft: rgba(15,23,42,.03);
  --shadow: 0 18px 55px rgba(2,6,23,.12);
  --brand: #3b82f6;
  --on-brand: #0b1220;
}

/* Onyx: mély fekete, lila akcentus */
[data-theme="onyx"]{
  --bg:#08080d;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.065);
  --line: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.55);
  --soft: rgba(255,255,255,.03);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --brand: #a78bfa;
  --on-brand: #140f22;
  --brand2:#34d399;
}

/* Borostyán: meleg sötét, arany akcentus */
[data-theme="warm"]{
  --bg:#100d06;
  --panel: rgba(255,220,130,.05);
  --panel2: rgba(255,220,130,.08);
  --card: rgba(255,220,130,.065);
  --line: rgba(255,220,130,.12);
  --text: rgba(255,245,220,.92);
  --muted: rgba(255,220,130,.58);
  --soft: rgba(255,220,130,.03);
  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --brand: #f59e0b;
  --on-brand: #231502;
  --brand2:#fb923c;
}

/* ===== Prémium témák ===== */

/* Premium Dark: tömör, visszafogott – Linear/Vercel stílus */
[data-theme="premium-dark"]{
  --bg:#0f1117;
  --panel: rgba(255,255,255,.045);
  --panel2: rgba(255,255,255,.075);
  --card: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.085);
  --text: rgba(255,255,255,.93);
  --muted: rgba(255,255,255,.48);
  --soft: rgba(255,255,255,.022);
  --brand: #818cf8;
  --on-brand: #0f1030;
  --brand2:#34d399;
  --warn:#f59e0b;
  --danger:#f87171;
  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --radius: 10px;
  --field-radius: 8px;
  --field-radius-lg: 10px;
}

/* Premium Light: fehér, légies – Notion/Stripe stílus */
[data-theme="premium-light"]{
  --bg:#f8f9fb;
  --panel: rgba(15,23,42,.03);
  --panel2: rgba(15,23,42,.055);
  --card: #ffffff;
  --line: rgba(15,23,42,.10);
  --text: #0f172a;
  --muted: rgba(15,23,42,.50);
  --soft: rgba(15,23,42,.02);
  --brand: #4f46e5;
  --on-brand: #ffffff;
  --brand2:#059669;
  --warn:#d97706;
  --danger:#dc2626;
  --shadow: 0 1px 3px rgba(15,23,42,.07), 0 8px 24px rgba(15,23,42,.06);
  --radius: 10px;
  --field-radius: 8px;
  --field-radius-lg: 10px;
}

/* Premium Gold: mély fekete, arany akcentus – exkluzív */
[data-theme="premium-gold"]{
  --bg:#0c0c0e;
  --panel: rgba(212,168,83,.055);
  --panel2: rgba(212,168,83,.09);
  --card: rgba(255,255,255,.048);
  --line: rgba(212,168,83,.15);
  --text: rgba(255,245,220,.93);
  --muted: rgba(255,245,220,.48);
  --soft: rgba(212,168,83,.022);
  --brand: #d4a853;
  --on-brand: #12100b;
  --brand2:#86efac;
  --warn:#fb923c;
  --danger:#f87171;
  --shadow: 0 20px 60px rgba(0,0,0,.6);
  --radius: 10px;
  --field-radius: 8px;
  --field-radius-lg: 10px;
}

/* Premium Light – összetevő felülírások (mint a sima light téma) */
[data-theme="premium-light"] .wrap > .sidebar{
  background:rgba(15,23,42,.03);
  border-right:1px solid rgba(15,23,42,.08);
}
[data-theme="premium-light"] .card{ background:#fff; }
[data-theme="premium-light"] .btn{ background:rgba(15,23,42,.06); color:#0f172a; }
[data-theme="premium-light"] .btn:hover{ background:rgba(15,23,42,.10); }
[data-theme="premium-light"] .btn.primary{ background:#4f46e5; color:#fff; }
[data-theme="premium-light"] input,
[data-theme="premium-light"] select,
[data-theme="premium-light"] textarea{
  background:rgba(15,23,42,.04); color:#0f172a;
  border-color:rgba(15,23,42,.12);
}
[data-theme="premium-light"] input::placeholder{ color:rgba(15,23,42,.38) !important; }
[data-theme="premium-light"] .modal input,
[data-theme="premium-light"] .modal textarea,
[data-theme="premium-light"] .modal select{
  background:rgba(15,23,42,.05); color:#0f172a;
}
[data-theme="premium-light"] .modal .modalActions,
[data-theme="premium-light"] .modal > .btnRow{ background:rgba(15,23,42,.04); }
[data-theme="premium-light"] .modal > h3,
[data-theme="premium-light"] .modal h3:first-child{ background:linear-gradient(180deg,rgba(200,164,77,.12),rgba(200,164,77,.03)); }
[data-theme="premium-light"] .tbUserDropdown{ background:#fff; box-shadow:0 12px 40px rgba(15,23,42,.13); }
[data-theme="premium-light"] .tbUserBtn{ background:rgba(0,0,0,.04); }
[data-theme="premium-light"] .tbUserBtn:hover{ background:rgba(0,0,0,.08); }
[data-theme="premium-light"] .tbIconBtn{ background:rgba(0,0,0,.04); }
[data-theme="premium-light"] .tbIconBtn:hover{ background:rgba(0,0,0,.08); }
[data-theme="premium-light"] .tbThemeDrop{ background:#fff; box-shadow:0 12px 40px rgba(15,23,42,.13); }
[data-theme="premium-light"] .tbDropItemDanger{ color:#dc2626; }
[data-theme="premium-light"] .tbDropItemDanger:hover{ background:rgba(239,68,68,.06); }
[data-theme="premium-light"] .toolbarRow,
[data-theme="premium-light"] .kg-toolbar{ background:rgba(15,23,42,.03); border-color:rgba(15,23,42,.09); }
[data-theme="premium-light"] .ctrl,
[data-theme="premium-light"] .main .control{
  background:rgba(15,23,42,.04); color:#0f172a;
  border-color:rgba(15,23,42,.12);
}
[data-theme="premium-light"] .ctrl:focus,
[data-theme="premium-light"] .main .control:focus{ border-color:#4f46e5; }
[data-theme="premium-light"] select.ctrl,
[data-theme="premium-light"] .main select.control{ background:rgba(15,23,42,.04); }
[data-theme="premium-light"] .subNavBtn{ background:rgba(15,23,42,.05); color:var(--muted); }
[data-theme="premium-light"] .subNavBtn:hover{ background:rgba(15,23,42,.09); color:var(--text); }
[data-theme="premium-light"] .subNavBtn.active{ background:rgba(79,70,229,.10); border-color:rgba(79,70,229,.35); color:#0f172a; }
[data-theme="premium-light"] .kgTable thead th{ background:rgba(15,23,42,.04); }
[data-theme="premium-light"] .kgTable tbody tr:hover{ background:rgba(15,23,42,.04); }
[data-theme="premium-light"] .kgTableWrap{ background:rgba(255,255,255,.7); }
[data-theme="premium-light"] .main input.control,
[data-theme="premium-light"] .main textarea.control{
  background:rgba(15,23,42,.04); color:#0f172a; border-color:rgba(15,23,42,.11);
}
[data-theme="premium-light"] .main input.control:focus,
[data-theme="premium-light"] .main textarea.control:focus{ border-color:#4f46e5; }
[data-theme="premium-light"] .main select.control{ background:rgba(15,23,42,.04); color:#0f172a; }
[data-theme="premium-light"] .main .toolbar{ background:rgba(15,23,42,.03); }

/* ===== Témaváltó sáv a sidebarban ===== */
.themeBar{
  display:flex; gap:6px; align-items:center;
  padding:8px 10px; border-radius:12px;
  border:1px solid var(--line);
  background:var(--soft);
  margin-top:8px;
}
.themeBar-label{
  font-size:10px; font-weight:900; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
  flex-shrink:0; margin-right:2px;
}
.themeSwatchWrap{ display:flex; gap:5px; flex:1; }
.themeSwatch{
  width:22px; height:22px; border-radius:7px;
  cursor:pointer; border:2px solid transparent;
  transition:border-color .15s, transform .12s;
  flex-shrink:0; position:relative;
}
.themeSwatch:hover{ transform:scale(1.12); }
.themeSwatch.active{
  border-color:var(--text) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.themeSwatch[data-t="dark"]          { background:linear-gradient(135deg,#0b1220,#1e3a5f); }
.themeSwatch[data-t="light"]         { background:linear-gradient(135deg,#f0f4fa,#c7d8f8); }
.themeSwatch[data-t="onyx"]          { background:linear-gradient(135deg,#08080d,#2d1f4e); }
.themeSwatch[data-t="warm"]          { background:linear-gradient(135deg,#100d06,#4a2d00); }
.themeSwatch[data-t="premium-dark"]  { background:linear-gradient(135deg,#0f1117,#1e2340); }
.themeSwatch[data-t="premium-light"] { background:linear-gradient(135deg,#f8f9fb,#e0e2f5); }
.themeSwatch[data-t="premium-gold"]  { background:linear-gradient(135deg,#0c0c0e,#3a2a0a); border-color:rgba(212,168,83,.5) !important; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
small{ color:var(--muted); }

.wrap{
  display:grid;
  grid-template-columns: 270px 1fr;
  min-height:100vh;
}

/* ========== BAL OLDALI MENÜ: .wrap > .sidebar – minden oldalon egyforma, felülírja az oldalspecifikus stílusokat ========== */
.wrap > .sidebar{
  --line: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --soft: rgba(255,255,255,.04);
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  /* Korábban sticky + 100vh volt, ami miatt az oldalsó menü nem gördült az oldallal.
     Most hagyjuk, hogy együtt scrollozzon a tartalommal. */
  position:relative;
  top:auto;
  height:auto;
  padding:18px;
  border-right:1px solid var(--line);
  /* Egységes háttér, hogy ne legyen külön színű sáv a menü alatt */
  background: var(--bg);
}
/* A .sidebar feher szoveg-tokeneket allit be (sotet savot feltetelez).
   MINDEN vilagos temanal vissza kell forditani, kulonben a menu lathatatlan. */
[data-theme="light"] .wrap > .sidebar,
[data-theme="premium-light"] .wrap > .sidebar{
  --line: rgba(15,23,42,.10);
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);
  --soft: rgba(15,23,42,.03);
  --panel: rgba(15,23,42,.04);
  --panel2: rgba(15,23,42,.06);
}
[data-theme="onyx"] .wrap > .sidebar{
  --line: rgba(167,139,250,.14);
  --text: rgba(255,255,255,.90);
  --muted: rgba(200,180,255,.55);
  --soft: rgba(167,139,250,.04);
}
[data-theme="warm"] .wrap > .sidebar{
  --line: rgba(255,180,50,.14);
  --text: rgba(255,245,220,.92);
  --muted: rgba(255,200,100,.55);
  --soft: rgba(255,180,50,.04);
}
/* Light téma: card és btn finomhangolás */
[data-theme="light"] .card{
  background: rgba(255,255,255,.88);
  box-shadow: 0 2px 16px rgba(15,23,42,.08);
}
[data-theme="light"] .btn{
  background: rgba(15,23,42,.07);
  border-color: rgba(15,23,42,.14);
  color: rgba(15,23,42,.85);
}
[data-theme="light"] .btn:hover{
  background: rgba(15,23,42,.12);
}
[data-theme="light"] .btn.primary{
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea{
  background: rgba(255,255,255,.85) !important;
  color: rgba(15,23,42,.9) !important;
  border-color: rgba(15,23,42,.15) !important;
}
[data-theme="light"] input::placeholder{ color: rgba(15,23,42,.38) !important; }
.wrap > .sidebar .brand{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(34,197,94,.10));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.wrap > .sidebar .brand .logo{
  width:34px; height:34px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08));
  border:1px solid var(--line);
}
.wrap > .sidebar .brand h1{ margin:0; font-size:14px; letter-spacing:.2px; }
.wrap > .sidebar .brand p{ margin:2px 0 0 0; font-size:12px; color:var(--muted); }
.wrap > .sidebar .brand-sub{ margin: 2px 0 0 0; font-size: 12px; color: var(--muted); }

.wrap > .sidebar .nav{
  margin-top:16px;
  display:flex; flex-direction:column; gap:8px;
}
.wrap > .sidebar .nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--muted);
  background: transparent;
  text-decoration: none;
}
.wrap > .sidebar .nav a:hover{
  background: var(--soft);
  border-color: var(--line);
  color: var(--muted);
}
.wrap > .sidebar .nav a.active{
  background: linear-gradient(135deg, rgba(96,165,250,.22), rgba(96,165,250,.08));
  border-color: rgba(96,165,250,.45);
  color: var(--text);
  font-weight: 700;
}
.wrap > .sidebar .sidebar-nav .nav-item{
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 8px 12px; border-radius: 10px; border: 1px solid transparent;
  color: var(--muted); background: transparent; text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.wrap > .sidebar .sidebar-nav .nav-item:hover{
  background: var(--panel); color: var(--text);
}
.wrap > .sidebar .sidebar-nav .nav-item.active{
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--text);
  font-weight: 600;
}
.wrap > .sidebar .sidebar-nav .nav-item .nav-label{ flex: 1; text-align: left; }
.wrap > .sidebar .sidebar-nav .nav-item .nav-icon{
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  opacity: .55; transition: opacity .13s;
}
.wrap > .sidebar .sidebar-nav .nav-item:hover .nav-icon{ opacity: .8; }
.wrap > .sidebar .sidebar-nav .nav-item.active .nav-icon{ opacity: 1; color: var(--brand); }
.wrap > .sidebar .sidebar-nav-group{ margin-top: 14px; }
.wrap > .sidebar .sidebar-nav-group:first-child{ margin-top: 0; }
.wrap > .sidebar .sidebar-nav-group-title{
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 6px 12px 6px 12px; margin-bottom: 4px;
}
.wrap > .sidebar .sidebar-nav-group .nav-item{ margin-top: 2px; }

/* Sidebar .card blokkok: mindig ugyanúgy, ne érintse az oldal .card szabálya */
.wrap > .sidebar .card,
.wrap > .sidebar .sidebar-user-card,
.wrap > .sidebar .sidebar-teendok{
  margin-top: 14px !important;
  padding: 12px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.wrap > .sidebar .sidebar-teendok{ margin-top: 10px !important; padding: 10px 12px !important; }
.wrap > .sidebar .sidebar-user-label{ margin: 0 0 4px 0; font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.wrap > .sidebar .sidebar-user-name{ margin: 0; font-weight: 700; font-size: 14px; }
.wrap > .sidebar .sidebar-company-form{ margin-top: 10px; }
.wrap > .sidebar .sidebar-company-select,
.wrap > .sidebar select{
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.wrap > .sidebar .sidebar-logout{ display: inline-block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.wrap > .sidebar .sidebar-logout:hover{ color: var(--brand); }
.wrap > .sidebar .sidebar-teendok{ margin-top: 10px; padding: 10px 12px; }
.wrap > .sidebar .sidebar-teendok-link{ display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.wrap > .sidebar .sidebar-teendok-link:hover{ color: var(--text); }
.wrap > .sidebar .sidebar-teendok-icon{ font-size: 16px; }
.wrap > .sidebar .badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}
.wrap > .sidebar .bellBadge{
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(239,68,68,.2); color: var(--danger); font-size: 11px; font-weight: 900;
}

/* Régi egyedi szabályok (kompatibilitás, ha valahol .sidebar közvetlenül használt) */
.sidebar{ position:sticky; top:0; height:100vh; padding:18px; border-right:1px solid var(--line); background: linear-gradient(180deg, var(--panel2), transparent); }
.brand{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(34,197,94,.10)); border:1px solid var(--line); box-shadow: var(--shadow); }
.brand .logo{ width:34px; height:34px; border-radius: 12px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08)); border:1px solid var(--line); }
.brand h1{ margin:0; font-size:14px; letter-spacing:.2px; }
.brand p{ margin:2px 0 0 0; font-size:12px; color:var(--muted); }
.nav{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.nav a{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:14px; border:1px solid transparent; color:var(--muted); background: transparent; }
.nav a:hover{ background: var(--soft); border-color: var(--line); color: var(--muted); }
.nav a.active{ background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: color-mix(in srgb, var(--brand) 35%, transparent); color: var(--text); font-weight: 600; }
.sidebar-nav .nav-item.active .nav-label, .nav a.active .nav-label{ font-weight: 600; }
.sidebar-nav .nav-item{ display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; color: var(--muted); background: transparent; text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .13s ease, border-color .13s ease, color .13s ease; }
.sidebar-nav .nav-item:hover{ background: var(--panel); color: var(--text); }
.sidebar-nav .nav-item .nav-label{ flex: 1; text-align: left; }
.sidebar-nav .nav-item .nav-icon{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; opacity:.55; transition:opacity .13s; }
.sidebar-nav .nav-item:hover .nav-icon{ opacity:.8; }
.sidebar-nav .nav-item.active .nav-icon{ opacity:1; color:var(--brand); }
.sidebar-nav-group{ margin-top: 22px; }
.sidebar-nav-group:first-child{ margin-top: 0; }
.sidebar-nav-group-title{
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .10em;
  color: var(--muted); padding: 0 12px 6px 12px; margin-bottom: 2px;
  /* Volt itt egy opacity:.55, ami a mar halvany --muted-et ~2:1-re vitte le.
     A masodlagossagot a --muted onmagaban is megadja. */
  border-top: 1px solid var(--line); padding-top: 14px;
}
.sidebar-nav-group:first-child .sidebar-nav-group-title{ border-top: none; padding-top: 6px; }
.sidebar-nav-group .nav-item{ margin-top: 1px; }
.brand-sub{ margin: 2px 0 0 0; font-size: 12px; color: var(--muted); }
.sidebar-user-card{ margin-top: 14px; padding: 12px 14px; }
.sidebar-user-label{ margin: 0 0 4px 0; font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sidebar-user-name{ margin: 0; font-weight: 700; font-size: 14px; }
.sidebar-company-form{ margin-top: 10px; }
.sidebar-company-select{ width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font-size: 12px; outline: none; }
.sidebar-logout{ display: inline-block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.sidebar-logout:hover{ color: var(--brand); }
.sidebar-teendok{ margin-top: 10px; padding: 10px 12px; }
.sidebar-teendok-link{ display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.sidebar-teendok-link:hover{ color: var(--text); }
.sidebar-teendok-icon{ font-size: 16px; }
.topbar-bell{ position: relative; }
.bellBadge{ display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(239,68,68,.2); color: var(--danger); font-size: 11px; font-weight: 900; }
.badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}

.main{
  padding:18px 22px 34px 22px;
  min-width: 0;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  flex-wrap: wrap;
  padding:14px 16px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  min-width: 0;
  max-width: 100%;
}
.topbar .left{
  display:flex; flex-direction:column;
  min-width:0;
  flex:1;
}
.h-title{ margin:0; font-size:16px; letter-spacing:.2px; }
.h-sub{ margin:2px 0 0 0; font-size:12px; color:var(--muted); overflow-wrap:break-word; word-wrap:break-word; max-width:100%; }
.topbar .actions{
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  max-width:100%;
  min-width:0;
}

.actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; max-width:100%; }

/* Offer rows — hover-only action buttons */
.offerRow{ border-radius:var(--radius); transition:background .12s; }
.offerRow:hover{ background:rgba(255,255,255,.04); }
.offerRow .offerRowActions{ opacity:0; transition:opacity .15s; }
.offerRow:hover .offerRowActions{ opacity:1; }
.offerRow + .offerRow{ border-top:1px solid var(--line); }

/* Offer KPI cards bar */
.offerKpiBar{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.offerKpiCard{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px;
  min-width:0;
}
.offerKpiCard--accent{ border-color:rgba(96,165,250,.4); background:rgba(96,165,250,.08); }
.offerKpiCard--muted{ opacity:.6; }
.offerKpiIcon{ font-size:20px; flex-shrink:0; }
.offerKpiBody{ min-width:0; }
.offerKpiVal{ font-size:15px; font-weight:800; line-height:1.1; word-break:break-word; }
.offerKpiLbl{ font-size:11px; color:var(--muted); margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* Offer money summary row (aligned to the 5-card grid: bejött 1 · összes 3 · donut 1) */
.offerMoneyRow{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:14px; align-items:stretch; }
.omCard{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; min-width:0; }
.omCardAccepted{ grid-column:span 1; display:flex; flex-direction:column; justify-content:center; }
.omCardTotal{ grid-column:span 3; }
.omCardDonut{ grid-column:span 1; display:flex; align-items:center; justify-content:center; padding:8px; }
.omLbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.omAcceptedLbl{ color:var(--fg-ok); }
.omLostLbl{ color:#f87171; }
.omHeroVal{ font-size:20px; font-weight:900; color:var(--fg-ok); line-height:1.15; margin-top:2px; word-break:break-word; }
.omLostVal{ font-size:16px; font-weight:900; color:#f87171; line-height:1.15; margin-top:2px; word-break:break-word; }
.omTotalHead{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px; }
.omTotalLbl{ font-size:13px; font-weight:800; }
.omTotalVal{ font-size:17px; font-weight:900; white-space:nowrap; }
.omBar{ display:flex; height:12px; border-radius:999px; overflow:hidden; margin-bottom:10px; background:rgba(127,127,127,.14); }
.omBar span{ display:block; height:100%; }
.omRow{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; padding:4px 0; color:var(--muted); }
.omRow + .omRow{ border-top:1px solid var(--line); }
.omRow b{ font-weight:800; color:var(--text); white-space:nowrap; }
.omDot{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; }
@media(max-width:900px){
  .offerKpiBar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .offerMoneyRow{ grid-template-columns:1fr; }
  .offerMoneyRow > .omCard{ grid-column:auto; }
}
.input{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px;
  border-radius: var(--field-radius-lg);
  border:1px solid var(--line);
  background: rgba(255,255,255,.07);
  min-width: min(240px, 100%);
  max-width: 100%;
  box-shadow: var(--field-inset), 0 1px 3px rgba(0,0,0,.05);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:hover{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}
.input:focus-within{
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: var(--field-inset), 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);
}
[data-theme="light"] .input{
  background: rgba(255,255,255,.94);
  box-shadow: var(--field-inset-light);
}
[data-theme="light"] .input:focus-within{
  box-shadow: var(--field-inset-light), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.input input{
  width:100%;
  border:0;
  outline:none;
  background: transparent;
  color: var(--text);
  font-weight:600;
}
.input input::placeholder{
  color: var(--muted);
  opacity: .88;
}
.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  font-weight:800;
  cursor:pointer;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn.primary{
  border-color: rgba(96,165,250,.55);
  background: linear-gradient(135deg, rgba(96,165,250,.30), rgba(96,165,250,.12));
}
.btn.good{
  border-color: rgba(34,197,94,.55);
  background: linear-gradient(135deg, rgba(34,197,94,.26), rgba(34,197,94,.10));
}
.btn.danger{
  border-color: rgba(239,68,68,.55);
  background: linear-gradient(135deg, rgba(239,68,68,.24), rgba(239,68,68,.10));
}
.btn.ghost{
  background: transparent;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  margin-top:14px;
}

.card{
  grid-column: span 12;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding:14px;
  backdrop-filter: blur(10px);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.card h3{ margin:0 0 10px 0; font-size:14px; }
.card .muted{ color:var(--muted); font-size:12px; }

.kpi{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px;
}
.kpi .num{ font-size:26px; font-weight:900; letter-spacing:.2px; }
.kpi .tag{
  font-size:11px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}

.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.table th{
  text-align:left;
  font-size:12px;
  color: var(--muted);
  padding:0 10px 6px 10px;
}
.table td{
  padding:12px 10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.06);
}
.table tr td:first-child{
  border-left:1px solid var(--line);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.table tr td:last-child{
  border-right:1px solid var(--line);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
}
.chip.dot::before{
  content:"";
  width:8px;height:8px;border-radius:99px;
  background: var(--brand);
}
.chip.sent.dot::before{ background: var(--warn); }
.chip.won.dot::before{ background: var(--brand2); }
.chip.lost.dot::before{ background: var(--danger); }
.chip.closed.dot::before{ background: rgba(255,255,255,.35); }

.split{
  display:flex; gap:10px; flex-wrap:wrap;
  min-width:0;
  max-width:100%;
}
.split > *{ min-width:0; max-width:100%; }
.select{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:800;
  outline:none;
}

.toastwrap{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}
.toast{
  width:min(380px, calc(100vw - 32px));
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.toast .t{ font-weight:900; margin:0 0 4px 0; }
.toast .d{ margin:0; color:var(--muted); font-size:12px; }

.modalback{
  position:fixed; inset:0;
  background: rgba(2,6,23,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9998;
  padding: max(16px, env(safe-area-inset-bottom));
}
.modalback.open{ display:flex; animation: kgSheetFade .2s ease forwards; }
@keyframes kgSheetFade{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  width:min(720px, calc(100vw - 32px));
  max-height:min(90vh, 880px);
  display:flex;
  flex-direction:column;
  border-radius: 20px;
  border:1px solid var(--line);
  background: linear-gradient(165deg, var(--card) 0%, var(--panel2) 48%, var(--panel) 100%);
  box-shadow: 0 28px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
  padding:0;
  overflow:hidden;
  animation: kgSheetPop .3s cubic-bezier(.34,1.25,.64,1) both;
}
@keyframes kgSheetPop{
  from{ opacity:0; transform: translateY(18px) scale(.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.modal > h3, .modal h3:first-child{
  margin:0;
  padding:16px 20px 12px;
  font-size:1.12rem;
  font-weight:950;
  letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(200,164,77,.10), rgba(200,164,77,.02));
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
}
.modal .row{ display:flex; gap:12px; flex-wrap:wrap; padding:16px 20px; }
.modal .row > *{ flex:1; min-width: 200px; }
.modal label, .modal .fieldLabel{ display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
.modal input, .modal textarea, .modal select{
  width:100%;
  box-sizing:border-box;
  padding:11px 14px;
  border-radius: var(--field-radius);
  border:1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  outline:none;
  font-weight:600;
  font-size:14px;
  font-family:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: var(--field-inset);
}
.modal input:hover, .modal textarea:hover, .modal select:hover{
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
}
.modal input:focus, .modal textarea:focus, .modal select:focus{
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
  box-shadow: var(--field-inset), 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}
[data-theme="light"] .modal input,
[data-theme="light"] .modal textarea,
[data-theme="light"] .modal select{
  box-shadow: var(--field-inset-light);
}
[data-theme="light"] .modal input:focus,
[data-theme="light"] .modal textarea:focus,
[data-theme="light"] .modal select:focus{
  box-shadow: var(--field-inset-light), 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.modal textarea{ min-height: 100px; resize: vertical; }
.modal .modalActions, .modal > .btnRow{
  padding:14px 20px 18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  background: rgba(0,0,0,.1);
}
[data-theme="light"] .modal .modalActions,
[data-theme="light"] .modal > .btnRow{ background: rgba(15,23,42,.04); }
[data-theme="light"] .modal > h3, [data-theme="light"] .modal h3:first-child{ background: rgba(59,130,246,.08); }
/* Dinamikus modal (KG.showModal) – belső padding */
body > .modalback > .modal:not(.npModal){
  padding: 22px 24px 24px;
  overflow-y: auto;
}
body > .modalback > .modal:not(.npModal) > h3:first-child{
  margin: -6px -4px 16px -4px;
  padding: 0 4px 14px;
}

/* Egységes „sheet” modál (projekt feladat, gyors űrlapok) */
.kgSheetBack{
  position:fixed; inset:0; z-index:9996;
  background: rgba(2,6,23,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:none; align-items:center; justify-content:center;
  padding: max(16px, env(safe-area-inset-bottom));
  opacity:0;
  transition: opacity .22s ease;
}
.kgSheetBack.open{
  display:flex; opacity:1;
}
.kgSheet{
  width:min(540px, 100%);
  max-height:min(88vh, 920px);
  display:flex; flex-direction:column;
  border-radius: 20px;
  border:1px solid var(--line);
  background: linear-gradient(165deg, var(--card) 0%, var(--panel2) 50%, var(--bg) 100%);
  box-shadow: 0 28px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow:hidden;
  animation: kgSheetPop .3s cubic-bezier(.34,1.25,.64,1) both;
}
.kgSheet-head{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(96,165,250,.12), rgba(96,165,250,.04));
}
.kgSheet-head h3{
  margin:0; font-size:1.18rem; font-weight:950; letter-spacing:-.03em; line-height:1.2;
}
.kgSheet-head p{
  margin:8px 0 0; font-size:13px; color:var(--muted); line-height:1.45; max-width:42em;
}
.kgSheet-body{
  padding:18px 22px 8px;
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling: touch;
}
.kgSheet-field{ margin-bottom:18px; }
.kgSheet-field > label{
  display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.055em; color:var(--muted); margin-bottom:7px;
}
.kgSheet-foot{
  padding:16px 22px 20px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;
  align-items:center;
  background: rgba(0,0,0,.14);
}
[data-theme="light"] .kgSheet-head{
  background: linear-gradient(180deg, rgba(59,130,246,.1), rgba(59,130,246,.03));
}
[data-theme="light"] .kgSheet-foot{ background: rgba(15,23,42,.05); }
.kgSheet .ctrl, .kgSheet input[type="text"], .kgSheet input[type="number"], .kgSheet input[type="search"], .kgSheet textarea, .kgSheet select{
  width:100%; max-width:100%; box-sizing:border-box;
}
.kgSheet textarea{ min-height:80px; resize:vertical; border-radius:12px; padding:12px 14px; }
[data-theme="light"] .kgSheet{
  box-shadow: 0 24px 70px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06) inset;
}
[data-theme="premium-light"] .kgSheet-head{
  background: linear-gradient(180deg, rgba(79,70,229,.09), rgba(79,70,229,.02));
}
[data-theme="premium-light"] .kgSheet-foot{ background: rgba(15,23,42,.05); }
[data-theme="premium-light"] .kgSheet{
  box-shadow: 0 24px 70px rgba(15,23,42,.15), 0 0 0 1px rgba(15,23,42,.06) inset;
}

@media (max-width: 980px){
  .wrap{ grid-template-columns: 1fr; }
  .sidebar{ height:auto; position:relative; }
  .topbar{ position:relative; top:auto; }
  .input{ min-width: 180px; }
}
/* ===== Select / Option fix (dark + light) ===== */
select, option{
  color: var(--text);
  background-color: var(--bg);
}

select{
  color-scheme: dark; /* a natív dropdown UI-t is sötétre húzza */
}

[data-theme="light"] select,
[data-theme="premium-light"] select{
  color-scheme: light;
}

[data-theme="light"] option,
[data-theme="premium-light"] option{
  background-color: #ffffff;
  color: rgba(15,23,42,.92);
}

/* Edge/Chrome: sometimes needs explicit */
select:focus{
  outline: none;
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 0 0 4px rgba(96,165,250,.10);
}
/* ===== Notifications bell ===== */
.kgBell{ display:inline-flex; align-items:center; gap:8px; }
.kgBellBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(239,68,68,.14);
  font-weight:950;
  font-size:12px;
  line-height:1;
}

/* ===== Dashboard: mini weekly strip ===== */
.weekStrip{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}
.weekDay{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.weekDay:hover{ filter: brightness(1.05); }
.weekDay.today{
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 0 0 4px rgba(96,165,250,.10);
}
.weekDay .wLbl{ font-weight:950; font-size:12px; opacity:.9; }
.weekDay .wCnt{ font-weight:950; font-size:12px; opacity:.9; }


/* ===== KG Bell + Week Strip ===== */
.kgBellBtn{ position:relative; }
.kgBellBtn .kgBellCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-weight:950;
  font-size:12px;
  margin-left:6px;
}
.kgBellBtn.hasDue{
  border-color: rgba(245,158,11,.45) !important;
  background: rgba(245,158,11,.10) !important;
}
.kgWeekStrip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 6px 0;
}
.kgWeekStrip .kgDay{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-radius:14px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  cursor:pointer;
}
.kgWeekStrip .kgDay .k{ color: var(--muted); font-weight:900; font-size:12px; }
.kgWeekStrip .kgDay .v{ font-variant-numeric: tabular-nums; }
.kgWeekStrip .kgDay .c{
  margin-left:2px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  font-weight:950;
  color: var(--muted);
  background: rgba(255,255,255,.06);
}
.kgWeekStrip .kgDay.has .c{ color: var(--text); }
.kgWeekStrip .kgDay.today{
  border-color: rgba(96,165,250,.45);
  background: rgba(96,165,250,.10);
}

/* ===== Topbar ikonok (harang, témavaltó) ===== */
.tbIconBtn{
  position:relative; width:34px; height:34px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s; flex-shrink:0;
}
.tbIconBtn:hover{ background:rgba(255,255,255,.11); color:var(--text); border-color:rgba(255,255,255,.2); }
.bellBadge{
  position:absolute; top:-5px; right:-5px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; border:2px solid var(--bg);
  background:rgba(245,158,11,.85); color:#fff;
  font-size:9px; font-weight:950; line-height:12px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* ===== Témaváltó legördülő ===== */
.tbThemeWrap{ position:relative; }
.tbThemeDrop{
  position:absolute; top:calc(100% + 8px); right:0;
  width:210px; padding:10px 12px 12px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--bg); box-shadow:0 16px 48px rgba(0,0,0,.45);
  display:none; z-index:300;
  animation:tbDropIn .15s ease;
}
.tbThemeDrop.open{ display:block; }
.tbThemeDropLabel{
  font-size:10px; font-weight:900; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.tbThemeSwatches{ display:flex; gap:6px; justify-content:space-between; }
.tbSwatch{
  flex:1; height:28px; border-radius:8px; cursor:pointer;
  border:2px solid transparent;
  transition:border-color .12s, transform .1s;
}
.tbSwatch:hover{ transform:scale(1.08); }
.tbSwatch.active{ border-color:var(--text); box-shadow:0 0 0 2px rgba(255,255,255,.2); }
.tbSwatch[data-t="dark"]          { background:linear-gradient(135deg,#0b1220,#1e3a5f); }
.tbSwatch[data-t="light"]         { background:linear-gradient(135deg,#f0f4fa,#c7d8f8); }
.tbSwatch[data-t="onyx"]          { background:linear-gradient(135deg,#08080d,#2d1f4e); }
.tbSwatch[data-t="warm"]          { background:linear-gradient(135deg,#100d06,#4a2d00); }
.tbSwatch[data-t="premium-dark"]  { background:linear-gradient(135deg,#0f1117,#1e2340); }
.tbSwatch[data-t="premium-light"] { background:linear-gradient(135deg,#f8f9fb,#e0e2f5); }
.tbSwatch[data-t="premium-gold"]  { background:linear-gradient(135deg,#0c0c0e,#3a2a0a); border:1px solid rgba(212,168,83,.4) !important; }
.tbThemeNames{
  display:flex; justify-content:space-between;
  margin-top:5px; padding:0 2px;
  font-size:9px; color:var(--muted); font-weight:900;
}
.tbThemeNames span{ flex:1; text-align:center; }
.tbThemeSection{ margin-top:8px; }
.tbThemeSectionLabel{
  font-size:9px; font-weight:900; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:5px; opacity:.6;
}

/* ===== Felhasználói legördülő ===== */
.tbUserWrap{ position:relative; }
.tbUserBtn{
  display:flex; align-items:center; gap:7px;
  padding:5px 10px 5px 5px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--text); cursor:pointer;
  transition:background .12s, border-color .12s;
}
.tbUserBtn:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2); }
.tbUserBtn[aria-expanded="true"]{ background:rgba(255,255,255,.10); border-color:rgba(96,165,250,.4); }
.tbAvatar{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(96,165,250,.5),rgba(34,197,94,.35));
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:950; color:#fff;
}
.tbUserLabelWrap{ display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
.tbUserName{ font-size:13px; font-weight:800; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbUserCompany{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.tbChevron{ color:var(--muted); flex-shrink:0; transition:transform .15s; }
.tbUserBtn[aria-expanded="true"] .tbChevron{ transform:rotate(180deg); }

.tbUserDropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  width:240px; border:1px solid var(--line); border-radius:14px;
  background:var(--bg); box-shadow:0 16px 48px rgba(0,0,0,.45);
  display:none; z-index:300; overflow:hidden;
  animation:tbDropIn .15s ease;
}
.tbUserDropdown.open{ display:block; }

@keyframes tbDropIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}
.tbDropHead{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.tbDropAvatar{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(96,165,250,.5),rgba(34,197,94,.35));
  border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:950; color:#fff;
}
.tbDropName { font-size:13px; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbDropEmail{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbDropSection{ padding:8px 10px; }
.tbDropSectionLabel{
  font-size:10px; font-weight:900; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; padding:0 4px;
}
.tbCoSel{
  width:100%; padding:7px 10px; border-radius:8px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--text); font-size:12px; font-weight:800; outline:none; cursor:pointer;
}
.tbCoSel:focus{ border-color:rgba(96,165,250,.5); }
.tbDropCompanyText{ font-size:12px; font-weight:800; color:var(--text); padding:4px 0; }
.tbDropDivider{ height:1px; background:var(--line); margin:2px 0; }
.tbDropItem{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; font-size:13px; font-weight:800;
  color:var(--text); text-decoration:none;
  transition:background .1s;
}
.tbDropItem:hover{ background:rgba(255,255,255,.07); }
.tbDropItem svg{ color:var(--muted); flex-shrink:0; }
.tbDropItemDanger{ color:rgba(252,165,165,.9); }
.tbDropItemDanger:hover{ background:rgba(239,68,68,.10); }
.tbDropItemDanger svg{ color:rgba(252,165,165,.7); }

[data-theme="light"] .tbUserDropdown{ background:#fff; box-shadow:0 12px 40px rgba(15,23,42,.15); }
[data-theme="light"] .tbUserBtn{ background:rgba(0,0,0,.04); }
[data-theme="light"] .tbUserBtn:hover{ background:rgba(0,0,0,.08); }
[data-theme="light"] .tbIconBtn{ background:rgba(0,0,0,.04); }
[data-theme="light"] .tbIconBtn:hover{ background:rgba(0,0,0,.08); }
[data-theme="light"] .tbThemeDrop{ background:#fff; box-shadow:0 12px 40px rgba(15,23,42,.15); }
[data-theme="light"] .tbDropItemDanger{ color:#dc2626; }
[data-theme="light"] .tbDropItemDanger:hover{ background:rgba(239,68,68,.06); }

/* ===== Gyors műveletek (egységes blokk több oldalon) ===== */
.kgQuickActionsTitle{
  margin:0 0 10px 0;
  font-size:15px;
  font-weight:950;
  letter-spacing:-.02em;
  color:var(--text);
  line-height:1.25;
}
.kgQuickActionsGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.kgQuickActionsGrid > *{
  flex:1 1 160px;
  min-width:min(100%, 140px);
  box-sizing:border-box;
}
.kgQuickActionsGrid > button.btn,
.kgQuickActionsGrid > a.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Főoldal / Partnerek: fő tartalom + 360px jobb sáv */
.dashGrid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:14px;
  align-items:start;
}
.rightRail{
  position:sticky;
  top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media (max-width:1100px){
  .dashGrid{ grid-template-columns:1fr; }
  .rightRail{ position:static; }
}

/* ========== Modern: kereső, legördülő, lista-eszköztár (.ctrl / .control) ========== */
.toolbarRow,
.kg-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--soft);
}
.ctrl,
.main .control{
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
  border-radius:var(--field-radius);
  padding:11px 14px;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  outline:none;
  box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  min-height:44px;
  box-shadow: var(--field-inset);
}
input.ctrl[type="text"],
input.ctrl[type="search"],
input.ctrl:not([type]),
.main input.control[type="text"],
.main input.control:not([type]){
  -webkit-appearance:none;
  appearance:none;
}
.ctrl::placeholder,
.main .control::placeholder{
  color:var(--muted);
  opacity:.88;
  font-weight:500;
}
.ctrl:hover,
.main .control:hover{
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  background:var(--card);
}
.ctrl:focus,
.main .control:focus{
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: var(--field-inset), 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
}
select.ctrl,
select.select,
.main select.control{
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  padding-right:42px;
  background-color:var(--panel2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}
select.ctrl:hover,
.main select.control:hover{
  background-color:var(--card);
}
select.ctrl:focus,
.main select.control:focus{
  background-color:var(--card);
}
.ctrl.w1{
  flex:1 1 min(100%, 380px);
  min-width:200px;
}
.toolbarRow select.ctrl,
.kg-toolbar select.ctrl{
  flex:0 1 220px;
  min-width:168px;
  max-width:min(100%, 280px);
}
.field-search{
  position:relative;
  flex:1 1 min(100%, 400px);
  min-width:200px;
  max-width:520px;
}
.field-search .ctrl,
.field-search input{
  width:100%;
  padding-left:44px;
}
.field-search::before{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  opacity:.55;
  background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M20 20l-4.2-4.2' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M20 20l-4.2-4.2' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
  z-index:1;
}
.invoiceSubNavBtn,
.leadSubNavBtn,
.contractSubNavBtn,
.offerSubNavBtn{
  padding:8px 16px !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:700 !important;
  transition:background .14s, border-color .14s, color .14s, transform .1s !important;
}
.invoiceSubNavBtn:hover,
.leadSubNavBtn:hover,
.contractSubNavBtn:hover,
.offerSubNavBtn:hover{
  transform:translateY(-1px);
}
[data-theme="light"] .toolbarRow,
[data-theme="light"] .kg-toolbar{
  background:rgba(255,255,255,.65);
}
[data-theme="light"] .ctrl,
[data-theme="light"] .main .control{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow: var(--field-inset-light) !important;
}
[data-theme="light"] .ctrl:focus,
[data-theme="light"] .main .control:focus{
  box-shadow: var(--field-inset-light), 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}
[data-theme="light"] select.ctrl,
[data-theme="light"] .main select.control,
[data-theme="premium-light"] select.ctrl,
[data-theme="premium-light"] .main select.control{
  background-color:rgba(255,255,255,.96) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 11px center !important;
}
[data-theme="premium-light"] .ctrl,
[data-theme="premium-light"] .main .control{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow: var(--field-inset-light) !important;
}
[data-theme="premium-light"] .ctrl:focus,
[data-theme="premium-light"] .main .control:focus{
  box-shadow: var(--field-inset-light), 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}
[data-theme="onyx"] select.ctrl,
[data-theme="warm"] select.ctrl,
[data-theme="onyx"] .main select.control,
[data-theme="warm"] .main select.control{
  background-color:var(--panel2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}

/* Régi oldalak input !important felülírása + kereső ikon (#q) */
.main input.control,
.main textarea.control{
  background:var(--panel2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--field-radius) !important;
  padding:11px 14px !important;
  font-size:14px !important;
  font-weight:600 !important;
  min-height:44px;
  box-shadow: var(--field-inset) !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
.main input.control:hover,
.main textarea.control:hover{
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line)) !important;
}
.main input.control:focus,
.main textarea.control:focus{
  border-color: color-mix(in srgb, var(--brand) 52%, var(--line)) !important;
  box-shadow: var(--field-inset), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}
.main select.control{
  padding:11px 42px 11px 14px !important;
  font-size:14px !important;
  font-weight:600 !important;
  min-height:44px;
  -webkit-appearance:none !important;
  appearance:none !important;
  background-color:var(--panel2) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 11px center !important;
  border:1px solid var(--line) !important;
  border-radius:var(--field-radius) !important;
  cursor:pointer;
  box-shadow: var(--field-inset) !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
.main select.control:hover{
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line)) !important;
}
.main select.control:focus{
  border-color: color-mix(in srgb, var(--brand) 52%, var(--line)) !important;
  box-shadow: var(--field-inset), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}
.main .searchWrap input#q.control,
.main .toolbar input#q.control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E"),linear-gradient(var(--panel2),var(--panel2)) !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:14px center,0 0 !important;
  background-size:19px 19px,100% 100% !important;
  padding-left:44px !important;
}
[data-theme="light"] .main input.control,
[data-theme="light"] .main textarea.control{
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(15,23,42,.12) !important;
  box-shadow: var(--field-inset-light) !important;
}
[data-theme="light"] .main input.control:focus,
[data-theme="light"] .main textarea.control:focus{
  box-shadow: var(--field-inset-light), 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}
[data-theme="light"] .main select.control{
  background-color:rgba(255,255,255,.96) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 11px center !important;
  box-shadow: var(--field-inset-light) !important;
}
[data-theme="light"] .main select.control:focus{
  box-shadow: var(--field-inset-light), 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}
[data-theme="light"] .main .searchWrap input#q.control,
[data-theme="light"] .main .toolbar input#q.control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E"),linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96)) !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:14px center,0 0 !important;
  background-size:19px 19px,100% 100% !important;
}
.main .toolbar{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--soft);
  gap:12px !important;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.main .toolbar > *{ min-width:0; max-width:100%; }
[data-theme="light"] .main .toolbar{
  background:rgba(255,255,255,.65);
}

/* ============================================================
   DESIGN SYSTEM – egységes komponensek (v2)
   Minden oldal ezeket használja, a régi lokális stílusok
   előbb-utóbb ide migrálnak.
   ============================================================ */

/* ── Egységes sub-navigáció / tab sáv ─────────────────────── */
.subNav{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin-bottom:12px;
}
.subNavBtn{
  padding:6px 14px; border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted); font-size:12px; font-weight:900;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
  font-family:inherit;
}
.subNavBtn:hover{ background:rgba(255,255,255,.10); color:var(--text); }
.subNavBtn.active{
  border-color:rgba(96,165,250,.5);
  background:rgba(96,165,250,.15);
  color:var(--text);
}
[data-theme="light"] .subNavBtn{ background:rgba(15,23,42,.05); color:var(--muted); }
[data-theme="light"] .subNavBtn:hover{ background:rgba(15,23,42,.09); color:var(--text); }
[data-theme="light"] .subNavBtn.active{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.4); color:var(--text); }

/* Backward compat aliasok – a régi lokális osztályok ugyanerre mutatnak */
.leadSubNavBtn, .invoiceSubNavBtn, .invoiceMainNavBtn,
.invoiceDirectionBtn, .pgTab, .calcTab, .sTab{
  padding:6px 14px; border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted); font-size:12px; font-weight:900;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
  font-family:inherit;
}
.leadSubNavBtn:hover, .invoiceSubNavBtn:hover, .invoiceMainNavBtn:hover,
.invoiceDirectionBtn:hover, .pgTab:hover, .calcTab:hover, .sTab:hover{
  background:rgba(255,255,255,.10); color:var(--text);
}
.leadSubNavBtn.active, .invoiceSubNavBtn.active, .invoiceMainNavBtn.active,
.invoiceDirectionBtn.active, .pgTab.active, .calcTab.active, .sTab.active{
  border-color:rgba(96,165,250,.5);
  background:rgba(96,165,250,.15);
  color:var(--text);
}
[data-theme="light"] .leadSubNavBtn,
[data-theme="light"] .invoiceSubNavBtn,
[data-theme="light"] .invoiceMainNavBtn,
[data-theme="light"] .invoiceDirectionBtn,
[data-theme="light"] .pgTab,
[data-theme="light"] .calcTab,
[data-theme="light"] .sTab{ background:rgba(15,23,42,.05); color:var(--muted); }
[data-theme="light"] .leadSubNavBtn.active,
[data-theme="light"] .invoiceSubNavBtn.active,
[data-theme="light"] .invoiceMainNavBtn.active,
[data-theme="light"] .invoiceDirectionBtn.active,
[data-theme="light"] .pgTab.active,
[data-theme="light"] .calcTab.active,
[data-theme="light"] .sTab.active{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.4); }

/* ── Egységes státusz badge / pill ────────────────────────── */
.kg-badge,
.pill,
.stBadge,
.invBadge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
/* Variánsok – státusz szerinti szín */
.kg-badge--new,  .kg-badge.new,  .stBadge.new,
.invBadge--brand, .stLead.new{
  background:rgba(96,165,250,.14); color:var(--brand); border-color:rgba(96,165,250,.3);
}
.kg-badge--ok, .kg-badge.ok, .stBadge.active,
.invBadge--ok, .stLead.quoted{
  background:rgba(34,197,94,.14); color:#22c55e; border-color:rgba(34,197,94,.3);
}
.kg-badge--warn, .kg-badge.warn,
.invBadge--warn, .stLead.in_progress{
  background:rgba(245,158,11,.14); color:#f59e0b; border-color:rgba(245,158,11,.3);
}
.kg-badge--danger, .kg-badge.danger, .stBadge.blacklisted,
.invBadge--bad, .stLead.rejected{
  background:rgba(239,68,68,.12); color:#ef4444; border-color:rgba(239,68,68,.3);
}
.kg-badge--muted, .kg-badge.muted, .stBadge.archived,
.invBadge--neutral{
  background:rgba(148,163,184,.12); color:var(--muted); border-color:rgba(148,163,184,.2);
}

/* ── Egységes adattábla ────────────────────────────────────── */
.kgTable{
  width:100%; border-collapse:collapse; font-size:13px;
}
.kgTable thead th{
  text-align:left; padding:9px 12px;
  font-size:10px; font-weight:900;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
[data-theme="light"] .kgTable thead th{ background:rgba(15,23,42,.04); }
.kgTable td{
  padding:9px 12px; border-bottom:1px solid var(--line);
  vertical-align:middle; color:var(--text);
  overflow:hidden; text-overflow:ellipsis;
}
.kgTable tbody tr:last-child td{ border-bottom:none; }
.kgTable tbody tr{ transition:background .12s; }
.kgTable tbody tr.clickable{ cursor:pointer; }
.kgTable tbody tr:hover{ background:rgba(255,255,255,.055); }
[data-theme="light"] .kgTable tbody tr:hover{ background:rgba(15,23,42,.04); }
.kgTable td.num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:850; white-space:nowrap; }
.kgTable td.muted{ color:var(--muted); font-size:12px; }
/* Wrapper */
.kgTableWrap{
  border:1px solid var(--line); border-radius:14px;
  overflow:hidden; overflow-x:auto;
  background:rgba(255,255,255,.02);
}
[data-theme="light"] .kgTableWrap{ background:rgba(255,255,255,.6); }

/* Backward compat – régi táblázatosztályok megkapják az alap kgTable kinézetet */
.pricelist-table, .actTable, .tbl, .reportTable, .docTable{
  width:100%; border-collapse:collapse; font-size:13px;
}
.pricelist-table th, .actTable th, .tbl th, .reportTable th, .docTable th{
  text-align:left; padding:9px 12px;
  font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.pricelist-table td, .actTable td, .tbl td, .reportTable td, .docTable td{
  padding:9px 12px; border-bottom:1px solid var(--line);
  vertical-align:middle; color:var(--text);
}
.pricelist-table tbody tr:last-child td,
.actTable tbody tr:last-child td,
.tbl tbody tr:last-child td,
.reportTable tbody tr:last-child td,
.docTable tbody tr:last-child td{ border-bottom:none; }
.pricelist-table tbody tr:hover,
.actTable tbody tr:hover,
.tbl tbody tr:hover,
.reportTable tbody tr:hover,
.docTable tbody tr:hover{ background:rgba(255,255,255,.055); }
[data-theme="light"] .pricelist-table th,
[data-theme="light"] .actTable th,
[data-theme="light"] .tbl th,
[data-theme="light"] .reportTable th,
[data-theme="light"] .docTable th{ background:rgba(15,23,42,.04); }

/* ── Tipográfia – globális egységesítés ────────────────────── */
.main{ font-family: var(--font); }
.main h1, .main h2, .main h3, .main h4{ font-family: var(--font); }
/* Hint / muted szöveg */
.hint{ color:var(--muted); font-size:12px; line-height:1.5; }
/* Szekció fejléc */
.sectionTitle{
  font-size:11px; font-weight:900; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin:0 0 10px 0;
}

/* ===== KG Charts (assets/kg_charts.js) – megosztott diagram-stílusok ===== */
.kgc{ display:block; }
.kgc [data-kgtip]{ cursor:default; transition:opacity .15s ease; }
.kgc circle[data-kgtip]:hover,
.kgc rect[data-kgtip]:hover{ opacity:.82; }
.kgc-tip{
  position:fixed; z-index:9999; pointer-events:none;
  max-width:260px; padding:6px 10px; border-radius:9px;
  font-size:12px; font-weight:700; line-height:1.35; white-space:nowrap;
  background:#0f1424; color:#f1f5f9;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
[data-theme="light"] .kgc-tip{ background:#111827; color:#f8fafc; border-color:rgba(15,23,42,.3); }
.kgc-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
.kgc-legend-item{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--muted);
}
.kgc-legend-item i{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.kgc-legend-item b{ color:var(--text); font-weight:900; font-variant-numeric:tabular-nums; }
.kgc-bar{
  width:100%; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--line) 60%, transparent);
}
.kgc-bar-fill{ height:100%; border-radius:999px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.kgc-stack{
  width:100%; display:flex; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--line) 55%, transparent);
}
.kgc-stack .kgc-seg{ height:100%; transition:width .5s cubic-bezier(.4,0,.2,1); }
.kgc-stack .kgc-seg + .kgc-seg{ box-shadow:-1px 0 0 rgba(0,0,0,.18); }


/* ==========================================================================
   KARCZAGIMEDIA PRÉMIUM ARCULAT – globális override (a fájl végén, felülír)
   Készítő: KarczagiMedia · Termék: Command Center
   ========================================================================== */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/cinzel-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/cinzel-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/cinzel-400-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+A720-A7FF;}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/cinzel-600-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+A720-A7FF;}
@font-face{font-family:"InterKM";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"InterKM";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"InterKM";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.woff2") format("woff2");}

/* Sötét KM prémium – az összes sötét téma erre olvad */
:root,
[data-theme="onyx"],
[data-theme="warm"],
[data-theme="premium-dark"],
[data-theme="premium-gold"]{
  --bg:#0b0b0d;
  --panel:rgba(255,255,255,.045);
  --panel2:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);
  --text:#e8eaed;
  --muted:#99a2ac;
  --soft:rgba(255,255,255,.035);
  --brand:#c8a44d;
  --on-brand:#12100b;
  /* Allapot-SZOVEGSZINEK. Sotet hatterre pasztell, vilagosra telitett:
     ugyanaz a jelentes, de mindket temaban olvashato. */
  --fg-ok:#86efac; --fg-warn:#fcd34d; --fg-danger:#fca5a5; --fg-info:#93c5fd;
  /* A marka SZOVEGKENT a lap hatteren. Sotet temaban maga a marka jo,
     vilagosban a bronz csak 2,7:1 – ott sotetebb valtozat kell. */
  --brand-ink:#c8a44d;   /* arany kitolteseN sotet szoveg: 8,1:1 */
  --brand2:#22c55e;
  --warn:#e6a53a;
  --danger:#ef4444;
  --shadow:0 20px 60px rgba(0,0,0,.5);
  --radius:12px;
  --font:"InterKM",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head:"Cinzel","InterKM",serif;
}
/* Világos KM prémium – a világos témák erre olvadnak */
[data-theme="light"],
[data-theme="premium-light"]{
  --bg:#f4f3ef;
  --panel:rgba(11,11,13,.035);
  --panel2:rgba(11,11,13,.06);
  --card:#ffffff;
  --line:rgba(11,11,13,.10);
  --text:#17181c;
  --muted:#5c6570;
  --soft:rgba(11,11,13,.025);
  --brand:#b58848;
  --on-brand:#12100b;
  --fg-ok:#15803d; --fg-warn:#a16207; --fg-danger:#b91c1c; --fg-info:#1d4ed8;
  --brand-ink:#6f5223;   /* bronz kitolteseN sotet szoveg: 6,0:1 (feher csak 3,2) */
  --brand2:#16a34a;
  --shadow:0 16px 50px rgba(2,6,23,.10);
}
body{ font-family:var(--font); }

/* --- KM lockup a sidebarban (1. fázis) --- */
.wrap > .sidebar .brand{
  background: linear-gradient(135deg, rgba(200,164,77,.16), rgba(200,164,77,.035));
  border:1px solid rgba(200,164,77,.24);
}
.wrap > .sidebar .brand .logo{
  background:#141109 url("brand/km-mark-gold.svg") center/64% no-repeat;
  border:1px solid rgba(200,164,77,.4);
}
.wrap > .sidebar .brand h1{
  font-family:var(--font-head);
  font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--text);
  line-height:1.1;
}
.wrap > .sidebar .brand-sub,
.wrap > .sidebar .brand p{
  color:var(--brand); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:600;
}
/* Cinzel az oldalcímre (topbar) */
.topbar .h-title{ font-family:var(--font-head); letter-spacing:.01em; }

/* ==========================================================================
   KM KOMPONENS-CSISZOLÁS (3. fázis) – appended override
   ========================================================================== */
/* Sidebar menü – aktív = arany akcentus + bal arany sáv */
.wrap > .sidebar .sidebar-nav .nav-item.active,
.wrap > .sidebar .nav a.active{
  background:linear-gradient(90deg, rgba(200,164,77,.16), rgba(200,164,77,.035));
  color:var(--brand);
  box-shadow:inset 3px 0 0 var(--brand);
}
.wrap > .sidebar .sidebar-nav .nav-item.active .nav-icon{ color:var(--brand); opacity:1; }
.wrap > .sidebar .sidebar-nav .nav-item:hover{ background:rgba(200,164,77,.07); }
.wrap > .sidebar .nav a:hover{ background:rgba(200,164,77,.07); }

/* Gombok – primary arany gradiens, sötét szöveg; ghost arany kontúr */
.btn.primary{
  background:linear-gradient(180deg,#e6c877 0%,#c8a44d 60%,#b58848 100%);
  color:#181206; border:1px solid rgba(200,164,77,.5);
  box-shadow:0 6px 18px rgba(200,164,77,.22); font-weight:800;
}
.btn.primary:hover{ filter:brightness(1.06); }
.btn.ghost{ background:transparent; color:var(--brand); border:1px solid rgba(200,164,77,.4); }
.btn.ghost:hover{ background:rgba(200,164,77,.08); }

/* Táblázat – prémium fejléc + finom sor-hover */
.kgTable thead th{
  text-transform:uppercase; letter-spacing:.06em; font-size:11px;
  color:var(--muted); font-weight:700;
}
.kgTable tbody tr:hover{ background:rgba(200,164,77,.05); }

/* Fókusz + görgetősáv arany (prémium finomság) */
:focus-visible{ outline:2px solid rgba(200,164,77,.55); outline-offset:2px; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(200,164,77,.24); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(200,164,77,.42); }

/* KM – maradék kék leftover felülírás */
[data-theme="light"] .btn.primary{
  background:linear-gradient(180deg,#e6c877 0%,#c8a44d 60%,#b58848 100%);
  border-color:rgba(200,164,77,.5); color:#181206;
}
.wrap > .sidebar .nav a.active{ border-color:rgba(200,164,77,.4); }

/* KM – user-avatar arany (nem kék/zöld) */
.tbAvatar, .tbDropAvatar{ background:linear-gradient(135deg, rgba(200,164,77,.55), rgba(200,164,77,.22)); color:#181206; }

/* ==========================================================================
   KM EGYSÉGES FELSŐ SÁV – teljes szélességű fix top bar + logó (layout átterv)
   ========================================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:60px; padding:0 18px;
  border-radius:0 !important; border:0;
  border-bottom:1px solid rgba(200,164,77,.16);
  background:linear-gradient(180deg,#111116,#0c0c0f);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  flex-wrap:nowrap; gap:16px;
}
.tb-brand{
  display:flex; align-items:center; gap:11px; flex-shrink:0;
  width:252px; height:100%; padding-right:14px;
  border-right:1px solid rgba(200,164,77,.14);
}
.tb-logo{
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:#141109 url("brand/km-mark-gold.svg") center/60% no-repeat;
  border:1px solid rgba(200,164,77,.4);
  box-shadow:0 0 22px rgba(200,164,77,.12);
}
.tb-brandTxt{ display:flex; flex-direction:column; line-height:1.05; }
.tb-name{ font-family:var(--font-head); font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--text); }
.tb-prod{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); font-weight:700; margin-top:2px; }
.topbar .left{ flex:1; min-width:0; }
.topbar .actions{ flex-shrink:0; }

/* tartalom a fix sáv alá */
.wrap{ padding-top:60px; }
.wrap > .sidebar{ top:60px; height:calc(100vh - 60px); }
.sidebar{ position:sticky; top:60px; height:calc(100vh - 60px); padding-top:14px; }

@media (max-width:900px){
  .tb-brand{ width:auto; border-right:0; padding-right:8px; }
  .tb-brandTxt .tb-prod{ display:none; }
}

/* Sidebar: valódi sticky a fix sáv alatt (felülír minden korábbit) */
.wrap > .sidebar{
  position:sticky; top:60px;
  height:calc(100vh - 60px);
  align-self:start;

  /* A menü GÖRGETHETŐ, ha nem fér ki.
     MÉRVE 2026-08-06: itt fix magasság állt `overflow` NÉLKÜL, ezért a
     képernyőnél magasabb menü alsó pontjai egyszerűen levágódtak – nem
     látszottak és nem is lehetett hozzájuk férni. ~35 menüpont van, ami
     egy átlagos laptop-képernyőn biztosan túllóg.
     Az `overscroll-behavior: contain` azt akadályozza meg, hogy a menü
     aljára érve a görgetés „átugorjon" a fő tartalomra. */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;

  /* Diszkrét görgetősáv – ne vágjon ketté egy sötét menüt egy világos csík. */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.wrap > .sidebar::-webkit-scrollbar{ width:8px; }
.wrap > .sidebar::-webkit-scrollbar-track{ background:transparent; }
.wrap > .sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
.wrap > .sidebar:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); background-clip:content-box; }

/* Világos témákon a fehér hüvelyk láthatatlan lenne. */
[data-theme="light"] .wrap > .sidebar,
[data-theme="premium-light"] .wrap > .sidebar{
  scrollbar-color:rgba(15,23,42,.22) transparent;
}
[data-theme="light"] .wrap > .sidebar::-webkit-scrollbar-thumb,
[data-theme="premium-light"] .wrap > .sidebar::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.20); background-clip:content-box;
}

/* ===== Topbar magasabb + szebb CTA-k ===== */
.topbar{ height:72px; padding:0 22px; }
.tb-brand{ width:248px; flex-shrink:0; }

/* Gyors-CTA reszponzív összecsukás – ne lógjon túl a topbar */
.topbar .actions{ flex-shrink:1; min-width:0; flex-wrap:nowrap; }
.tb-quickctas{ display:inline-flex; align-items:center; gap:8px; }
.tb-quickmenu{ display:none; position:relative; }
.tb-quickmenu > summary{ list-style:none; cursor:pointer; user-select:none; }
.tb-quickmenu > summary::-webkit-details-marker{ display:none; }
.tb-qcaret{ font-size:10px; opacity:.7; }
.tb-quickmenu[open] > summary{ background:rgba(200,164,77,.16); }
.tb-quickmenu-list{ position:absolute; top:calc(100% + 8px); left:0; min-width:196px; background:var(--panel,#14171d); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; z-index:400; display:flex; flex-direction:column; gap:2px; }
.tb-quickmenu-list a{ display:block; padding:9px 12px; border-radius:8px; color:var(--text); text-decoration:none; font-size:13px; font-weight:700; white-space:nowrap; }
.tb-quickmenu-list a:hover{ background:rgba(200,164,77,.14); color:#e6c877; }
@media (max-width:1500px){
  .tb-quickctas{ display:none; }
  .tb-quickmenu{ display:inline-block; }
}
/* Sose feszítse szét a topbart: cím + user-név rövidül, minden zsugorodhat */
.topbar{ max-width:100%; }
.topbar .left{ min-width:0; overflow:hidden; }
.topbar .h-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.topbar .actions{ min-width:0; }
.tbUserName{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbUserLabelWrap{ min-width:0; overflow:hidden; }
/* Fokozatos összecsukás keskeny / méretezett nézeten */
@media (max-width:1150px){
  .topbar .tb-brand{ width:auto !important; padding-right:10px !important; }
  .topbar .tb-brandTxt{ display:none !important; }   /* marad a logó, tűnik a márkanév-szöveg */
  .topbar .h-sub{ display:none !important; }
}
@media (max-width:900px){
  .topbar .tbUserLabelWrap{ display:none !important; }  /* marad az avatar, tűnik a user-név */
  .topbar{ gap:10px !important; padding:0 12px !important; }
}

.tb-brandInner{ display:contents; }
.tb-logo{ width:40px; height:40px; border-radius:12px; }
.tb-name{ font-size:15px; }
.wrap{ padding-top:72px; }
.wrap > .sidebar{ top:72px; height:calc(100vh - 72px); }
.sidebar{ top:72px; height:calc(100vh - 72px); }

/* Gombok / CTA-k – prémium */
.btn{
  border-radius:11px; padding:9px 16px; font-weight:700; font-size:13.5px; letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn.primary{
  background:linear-gradient(180deg,#f0d488 0%,#d4af57 48%,#b98a3f 100%);
  color:#1a1206; border:1px solid rgba(200,164,77,.55);
  box-shadow:0 8px 22px rgba(200,164,77,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 12px 30px rgba(200,164,77,.42), inset 0 1px 0 rgba(255,255,255,.45); }
.btn.ghost{ background:rgba(200,164,77,.06); color:var(--brand); border:1px solid rgba(200,164,77,.4); }
.btn.ghost:hover{ background:rgba(200,164,77,.12); border-color:rgba(200,164,77,.6); }
.btn.good{ box-shadow:0 6px 18px rgba(34,197,94,.2); }

/* Topbar ikon-gombok – prémium, egységes */
.tbIconBtn{
  width:40px; height:40px; border-radius:12px;
  border:1px solid rgba(200,164,77,.18); background:rgba(255,255,255,.045);
  color:var(--muted); display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tbIconBtn:hover{ background:rgba(200,164,77,.12); color:var(--brand); border-color:rgba(200,164,77,.42); }

/* ===== KM wordmark logó a topbarban (screen blend = fekete háttér eltűnik) ===== */
.tb-brand{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; }
.tb-wordmark{
  display:block; width:162px; height:34px;
  background:url("brand/km-wordmark-trim.webp") left center/contain no-repeat;
  mix-blend-mode:screen;
}
.tb-brand .tb-prod{ font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brand); font-weight:700; margin:0; padding-left:3px; }
@media (max-width:900px){ .tb-wordmark{ width:132px; height:28px; } .tb-brand .tb-prod{ display:none; } }

/* ===== KM 2-betűs monogram logó a topbarban (felülír) ===== */
.tb-brand{ flex-direction:row; align-items:center; gap:11px; }
.tb-logo{
  width:46px; height:46px; border-radius:0; flex-shrink:0;
  background:url("brand/km-logo.png") center/contain no-repeat;
  border:none; box-shadow:none;
}
.tb-brandTxt{ display:flex; flex-direction:column; line-height:1.05; }
.tb-name{ font-family:var(--font-head); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--text); }
.tb-brand .tb-prod{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); font-weight:700; margin-top:2px; padding-left:1px; }


/* ═══════════════════════════════════════════════════════════════════════
   MARKASZINNEL KITOLTOTT FELULETEK – olvashatosag
   ---------------------------------------------------------------------
   A `small{ color:var(--muted) }` globalis elem-szabaly ERŐSEBB, mint az
   oroklodes, ezert egy kitoltott (aktiv) fulon belul is halvany szurke
   maradt – ami a markaszinen gyakorlatilag lathatatlan (1,1:1).
   Itt visszaadjuk az oroklest, hogy a masodlagos sor is az --on-brand
   szint vigye. Uj kitoltott komponensnel eleg a listahoz felvenni.
   ═══════════════════════════════════════════════════════════════════════ */
.btn.primary small,   .btn.primary .muted,
.rkTab.on small,      .rkTab.on .muted,
.flTab.on small,      .flTab.on .muted,
.flView.on small,
.aiTab.on small,
.fvNavBtn.active small,
.fvSeg button.on small,
.subNavBtn.on small,  .subNavBtn.active small,
.nav-item.active small,
.fk-chip[aria-pressed="true"] small,
.fk-seg button[aria-pressed="true"] small,
.fk-switch button[aria-pressed="true"] small{
  color: inherit;
  /* A halvanyitas is tul sok a kitoltott hatteren */
  opacity: .82;
}