/* ==== TEKA – unified styles (login + dashboard) ==== */
:root{
  --bg:#f5f7fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --brand-1:#4f86f7; --brand-2:#22c1a6; --grad:linear-gradient(90deg, var(--brand-1), var(--brand-2));
  --radius-lg:16px; --radius:12px; --radius-sm:10px;
  --shadow-sm:0 4px 12px rgba(2,6,23,.06);
  --shadow-md:0 12px 28px rgba(2,6,23,.10);
  --shadow-lg:0 18px 50px rgba(2,6,23,.14);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  margin:0;
  /* fix navbar helyfoglalás (kb. 64px) */
  padding-top:64px;
}
.container-fluid{ max-width:100%; padding-left:20px; padding-right:20px; }
@media (min-width:1800px){ .container-fluid{ padding-left:40px; padding-right:40px; } }

/* ===== Navbar (FIXED, magas z-index) ===== */
.app-navbar{
  position:fixed; top:0; left:0; right:0;
  z-index:1030;              /* Bootstrap backdrops (1040) fölött */
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.app-navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--grad);
}
.app-logo{ height:28px; }
.app-brand-text{ font-weight:800; letter-spacing:.02em; font-size:18px; }
.app-subtitle{ color:var(--muted); font-size:14px; }
.user-dot{ width:16px; height:16px; border-radius:50%; border:1px solid var(--border); display:inline-block; }

/* Dropdown – csak z-index finomhangolás (mindent a Bootstrap kezel) */
.app-navbar .dropdown-menu{ z-index:1060;}

/* ===== Sidebar – panel + accordion ===== */
.sidebar-panel{
  background:linear-gradient(180deg, rgba(79,134,247,.9), rgba(34,193,166,.9));
  border-radius:18px; padding:14px; box-shadow:var(--shadow-md);
  position:static; z-index:auto;     /* ne legyen overlay */
}
.sidebar-section{ margin-bottom:14px; }
.sidebar-section .section-head{
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; font-weight:700; letter-spacing:.02em; font-size:.9rem;
  border-radius:12px; padding:.55rem .8rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  cursor:pointer; user-select:none;
  position:relative; z-index:1;      /* saját belső rétegezés */
}
.sidebar-section .section-head i{ transition:transform .2s ease; }
.sidebar-section .section-head.collapsed i{ transform:rotate(-90deg); }

.sidebar-list{ list-style:none; margin:.5rem 0 0; padding:0; }
.sidebar-list li{ margin:.45rem 0; }
.sidebar-list a.app-menu-item{
  display:flex; align-items:center; gap:.65rem; text-decoration:none;
  background:#fff; color:#0f172a;
  border:1px solid #e6eaf2; border-radius:12px; padding:.65rem .85rem;
  box-shadow:0 6px 14px rgba(2,6,23,.06);
  transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}
.sidebar-list a.app-menu-item i{ width:18px; text-align:center; opacity:.9; }
.sidebar-list a.app-menu-item:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(2,6,23,.09);
  border-color:#d8def0;
}
.sidebar-list a.app-menu-item.active{
  position:relative; border-color:#c7d2fe; box-shadow:0 10px 22px rgba(79,134,247,.18);
}
.sidebar-list a.app-menu-item.active::before{
  content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:4px;
  border-radius:999px; background:var(--brand-1);
}

/* ===== Hero + Chips ===== */
.hero-banner{
  background:var(--grad); color:#fff; padding:1.35rem;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; color:#111827;
  border:1px solid var(--border);
  border-radius:999px; padding:.35rem .75rem; font-size:.9rem;
  box-shadow:var(--shadow-sm);
}

/* ===== Filter bar / card ===== */
.filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:.9rem 1.1rem;
}
.filter-controls{ display:flex; align-items:end; gap:.6rem; flex-wrap:wrap; }
.filter-controls .form-floating{ min-width:140px; }
.filter-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.filter-meta .chip{ background:#f8fafc; border-color:#e2e8f0; }
.filter-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:1rem 1.2rem;
}

/* ===== Charts / Cards ===== */
.chart-card{
  background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:1rem; border:1px solid var(--border);
}
.card-title{ font-weight:700; letter-spacing:.01em; margin-bottom:.8rem; }
.chart-container{ position:relative; width:100%; height:300px; }
.chartjs-render-monitor{ border-radius:8px; }

/* ===== Form / Buttons ===== */
.form-select,.form-control{ border-radius:12px !important; border:1px solid var(--border); }
.form-floating>label{ color:var(--muted); }
.btn-primary{ background:var(--brand-1); border:none; box-shadow:0 8px 24px rgba(79,134,247,.35); }
.btn-primary:hover{ filter:brightness(1.06); }
.navbar .badge{
  min-width:1.25rem; height:1.25rem; display:inline-flex; align-items:center; justify-content:center; font-size:.65rem;
}

/* ===== Login page ===== */
body.login-bg{ background:var(--grad); display:grid; place-items:center; padding:24px; }
.login-card{
  width:min(440px,92vw); background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:28px; text-align:center;
}
.brand{ display:flex; justify-content:center; margin-bottom:14px; }
.brand img{ max-height:50px; }
.login-card h2{ margin:0 0 18px; color:#4f75ff; font-weight:700; font-size:clamp(20px,2.6vw,24px); }
.input-group{
  display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  transition:border-color .2s, box-shadow .2s;
}
.input-group:focus-within{ border-color:#93c5fd; box-shadow:0 0 0 6px rgba(59,130,246,.25); }
.input-group input{ border:0; outline:0; background:transparent; width:100%; font-size:16px; padding:6px 2px; }
.input-group i{ color:#9aa3af; }
.btn-primary.w-100{
  color:#fff; font-weight:700; font-size:16px; padding:12px 16px; border-radius:10px;
  box-shadow:0 8px 22px rgba(34,197,94,.35);
}
.alert.error{ margin-top:10px; color:#d9534f; font-size:14px; text-align:center; }
@media (max-width:480px){
  body.login-bg{ padding:16px; }
  .login-card{ padding:22px; }
  .input-group input{ font-size:17px; }
}

/* ===== App-menu (klasszikus lista, ha nem accordionban van) ===== */
.app-menu-item{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  background:rgba(255,255,255,.8); backdrop-filter:blur(6px);
  color:#0f172a; padding:.7rem .95rem; border-radius:var(--radius-sm);
  border:1px solid transparent; transition:background .15s, box-shadow .15s, border-color .15s;
}
.app-menu-item i{ width:18px; text-align:center; opacity:.85; }
.app-menu-item:hover{ background:#eef2ff; border-color:#e0e7ff; box-shadow:var(--shadow-sm); }
.app-menu-item.active{ background:#e0e7ff; border-color:#c7d2fe; font-weight:600; }

/* ===== Vészfék: ne legyen globális díszítés overlay ===== */
body::before, body::after{ content:none !important; display:none !important; }

/* ===== Flatpickr ===== */
.flatpickr-calendar{
  font-size:14px; line-height:1.25;
  z-index:1200;                 /* biztosan a kártyák fölött */
}
.flatpickr-calendar .flatpickr-months{ font-weight:600; }
.flatpickr-day{ line-height:1.9; }
.numInputWrapper input{ min-width:2.6em; }
.flatpickr-calendar svg{ position:static !important; width:14px !important; height:14px !important; transform:none !important; }
.flatpickr-calendar svg path{ fill:currentColor !important; stroke:none !important; }
input[type="date"], input[type="time"], .flatpickr-input{
  padding:.55rem .75rem; border-radius:12px; border:1px solid var(--border);
}

/* ===== App shell (sidebar + content, mobilbarát grid) ===== */
.app-shell{
  display:grid; grid-template-columns:280px 1fr; gap:16px; padding:16px 20px;
}
.app-sidebar{ position:sticky; top:76px; align-self:start; }
.app-content{ min-width:0; }

@media (min-width:1800px){
  .app-shell{ padding-left:40px; padding-right:40px; gap:20px; }
}
@media (max-width:992px){
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{ order:2; position:static; }
  .app-content{ order:1; }
}
.app-sidebar .sidebar-panel{ border-radius:16px; padding:12px; }
.app-content .hero{ margin-bottom:12px; }
.app-content .toolbar,
.app-content .filter-bar,
.app-content .filter-card{ margin-bottom:12px; }

/* ===== Kártyás tábla ===== */
.table-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-md); overflow:auto;
}
.table-card table{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px; }
.table-card thead th{
  position:sticky; top:0; background:#f8fafc; color:#0f172a;
  font-weight:700; letter-spacing:.01em; border-bottom:1px solid var(--border);
  padding:.75rem .85rem;
}
.table-card tbody td{ padding:.7rem .85rem; border-bottom:1px solid #eef2f7; }
.table-card tbody tr:hover{ background:#fafaff; }
.table-card th a{ color:inherit; text-decoration:none; }
.table-card th a:hover{ text-decoration:underline; }

.btn-small{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:10px; border:1px solid #dbe3ef; background:#fff;
  text-decoration:none; font-size:.87rem; box-shadow:0 2px 8px rgba(2,6,23,.06);
}
.btn-small:hover{ background:#eef2ff; border-color:#c7d2fe; }
.btn-small.danger{ border-color:#fecaca; color:#b91c1c; }
.btn-small.danger:hover{ background:#fee2e2; border-color:#fca5a5; }

/* ===== Offcanvas/backdrop viselkedés ===== */
/* Asztali nézetben ne legyen backdrop, hogy ne fedjen rá semmire (navbarra sem) */
@media (min-width:992px){
  .offcanvas-backdrop{ display:none !important; }
}
/* ===== Responsive sidebar layout (single-render) ===== */
:root { --sidebar-w: 280px; --page-pad: 20px; }

/* Desktop: a sidebar fix, a content kap bal paddinget */
@media (min-width: 992px){
  /* a fix navbarod ~64px magas + kis légrés */
  body { padding-left: calc(var(--sidebar-w) + var(--page-pad)); }

  #appSidebar.offcanvas-lg {
    position: fixed;
    top: 76px;                 /* 64px navbar + ~12px ráhagyás */
    bottom: 16px;
    left: var(--page-pad);
    width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    border: 0;
    box-shadow: none;          /* a saját .sidebar-panel már árnyékos */
    transform: none !important;
    visibility: visible !important;
  }

  /* ne legyen backdrop desktopon */
  .offcanvas-backdrop { display: none !important; }
}

/* Mobil: klasszikus offcanvas (alapból rejtett) – Bootstrap intézi */
#appSidebar.offcanvas { border-right: 1px solid var(--border); }

/* ==== Fix: a sidebar tényleg legyen fix széles desktopon ==== */
:root { --sidebar-w: 280px; --page-pad: 20px; }

@media (min-width: 992px){
  /* Toljuk beljebb a contentet a fix szélességű bal sáv miatt */
  body { padding-left: calc(var(--sidebar-w) + var(--page-pad)); }

  /* Az offcanvas valódi szélessége + bootstrap változó felülírása */
  #appSidebar.offcanvas-lg {
    --bs-offcanvas-width: var(--sidebar-w);   /* Bootstrap saját szélesség változója */
    position: fixed;
    top: 76px;                 /* ~64px navbar + ráhagyás */
    bottom: 16px;
    left: var(--page-pad);
    width: var(--sidebar-w) !important;
    max-width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important; /* biztos, ami biztos */
    border: 0;
    box-shadow: none;
  }

  /* A belső body ne szűkítse össze a panelt */
  #appSidebar .offcanvas-body {
    padding: 0;           /* a saját .sidebar-panel-nek van paddingje */

    overflow-y: auto;
  }

  /* A tényleges kártya töltse ki a teljes szélességet */
  #appSidebar .sidebar-panel {
    width: 100%;
    height: auto;         /* vagy 100%, ha végig érjen */
  }

  /* Desktopon ne legyen backdrop */
  .offcanvas-backdrop { display: none !important; }
}

/* ==== FullCalendar – kártyás, kontrasztos stílus ==== */

/* Toolbar */
#calendar .fc-toolbar { margin-bottom: 12px; }
#calendar .fc-toolbar-title { font-weight: 700; letter-spacing: .01em; }

/* Havi/hét nézet esemény-kártyák */
#calendar .fc-daygrid-event,
#calendar .fc-timegrid-event {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(2,6,23,.12);
  padding: 2px 6px;
}
#calendar .fc-daygrid-event .fc-event-main,
#calendar .fc-timegrid-event .fc-event-main {
  color: #fff;              /* szöveg mindig fehér a kontraszt miatt */
  font-size: .86rem;
  line-height: 1.25;
}

/* Lista nézet (table) */
#calendar .fc-list-table { border-radius: 12px; overflow: hidden; }
#calendar .fc-list { border: 1px solid var(--border); box-shadow: var(--shadow-md); }
#calendar .fc-list-sticky .fc-list-day {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}
#calendar .fc-list-table tr { transition: background .15s ease; }
#calendar .fc-list-table tr:hover { background: #f6f7ff; }
#calendar .fc-list-event-graphic { display: none; } /* kis pötty kikapcs – kártyaszín számít */

/* Belső “címke” a listában */
.ev-chip {
  display:inline-flex; gap:.35rem; align-items:center;
  padding:.2rem .5rem; border-radius:999px; background: rgba(255,255,255,.25);
  font-size: .78rem; color:#fff; font-weight:600;
}

/* Állapot szerinti osztályok (JS adja rá ezeket) */
.ev-dummy {                          /* ütemezés alatt / nincs felelős */
  background: #dc3545 !important;
  border-color: #dc3545 !important;
}
.ev-completed {                      /* kész feladat */
  filter: saturate(1.05) brightness(.92);
  position: relative;
}
.ev-completed::after{                /* pipa jelzés */
  content: "✓";
  position: absolute; right: 6px; top: 4px;
  font-weight: 800; font-size: .9rem; opacity: .9;
  color: #ffffff;
}

/* Gombok magyarul – vizuális egység */
#calendar .fc .fc-button {
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Havi nézet esemény “kártya” – csak forma, a színeket a JS állítja */
.fc-daygrid-event,
.fc-daygrid-block-event,
.fc-daygrid-dot-event {
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(2,6,23,.12);
  /* NEM állítunk background/border/text color-t itt! */
}
.fc-daygrid-event .fc-event-main,
.fc-daygrid-dot-event .fc-event-main {
  /* a színt a változó adja, ne írjuk felül */
  color: inherit;
}
/* ===== FullCalendar – mobilbarát finomhangolás ===== */

/* Kártya környezet */
#calendar{
  background:#fff; border-radius:16px;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  border:1px solid var(--border);
  padding:12px;
}

/* Toolbar gombok, cím – minden kijelzőn kicsit szebb */
.fc .fc-toolbar.fc-header-toolbar{ gap:.5rem; }
.fc .fc-toolbar-chunk{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.fc .fc-button{
  border-radius:999px;
  padding:.35rem .65rem;
  border:none;
  box-shadow:0 6px 14px rgba(2,6,23,.06);
}
.fc .fc-button-primary{ background:var(--brand-1); }
.fc .fc-button-primary:hover{ filter:brightness(1.05); }
.fc .fc-toolbar-title{ font-weight:800; }

/* Havi rács olvashatóság */
.fc-theme-standard .fc-scrollgrid{ border:0; }
.fc .fc-col-header-cell-cushion{ padding:.4rem 0; font-weight:700; }
.fc .fc-daygrid-day-number{ padding:.35rem .4rem; font-weight:600; }

/* Eseménykártya egységes kinézet (heti/havi/lista) */
.fc-event{
  border-radius:14px !important;
  box-shadow:0 8px 20px rgba(2,6,23,.10);
  overflow:hidden;
}
.fc .fc-list-event-title{ font-weight:600; }
.fc .fc-list-event-time{ font-weight:600; opacity:.9; }

/* — Mobil: 576px alatt — */
@media (max-width:576px){
  /* cím kisebb, gombok kompaktabbak */
  .fc .fc-toolbar-title{ font-size:1.15rem; }
  .fc .fc-button{ padding:.28rem .55rem; font-size:.9rem; }

  /* napnevek rövidebbek és sűrűbb rács */
  .fc .fc-col-header-cell-cushion{ padding:.3rem 0; font-size:.85rem; }
  .fc .fc-daygrid-day-number{ font-size:.9rem; }

  /* havi esemény kártya padding */
  .fc .fc-daygrid-event .fc-event-main{ padding:.3rem .45rem; }
}

/* dummy / completed állapotokra (ha használsz osztályokat) */
.ev-dummy{ opacity: .95; }
.ev-completed{ opacity: .85; filter:saturate(.85); }
/* 09-tasks hero cím vastagítás az egység kedvéért */
.hero-banner h1,
.hero-banner .h1,
.hero-banner h2,
.hero-banner .h2,
.hero-banner h3,
.hero-banner .h3,
.hero-banner h4,
.hero-banner .h4 {
  font-weight: 800;        /* passzol az app-brand-texthez */
  letter-spacing: .01em;
  margin: 0;
}
/* KPI kártyák – kompakt, letisztult */
.kpi-card{
  background: linear-gradient(180deg,#ffffff, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 16px 18px;
  min-height: 180px;              /* jóval alacsonyabb, mint a chart-card */
  box-shadow: var(--shadow-sm,0 2px 8px rgba(0,0,0,.05));
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.kpi-card .kpi-title{
  font-weight: 600; font-size: .95rem; color:#111827; margin: 0;
}
.kpi-card .kpi-value{
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 44px); /* reszponzív, de nem óriási */
  letter-spacing: -0.5px;
  margin: .3rem 0 .15rem;
}
.kpi-card .kpi-sub{
  font-size: .9rem; color:#6b7280;
}

/* kicsi ikon jelzés a jobb felső sarokban */
.kpi-card .kpi-icon{
  position:absolute; right:12px; top:12px;
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  opacity:.95;
}
.kpi-icon i{ font-size:16px; }

/* ha szeretnéd még feszesebbre, ezt kapcsold be
.kpi-card{ min-height:160px; padding:14px 16px; }
*/