/* ==========================================================================
   FÁJL: stilusok/masons_alap.css
   CÉL: A MASONS CRM globális megjelenésének (színek, betűtípusok, elrendezés) 
        szabályozása. Ezt a fájlt minden aloldal be fogja tölteni.
   ========================================================================== */

/* 
 * 1. GYÖKÉR VÁLTOZÓK (:root)
 * Ide tesszük azokat a színeket és értékeket, amiket többször használunk. 
 * Később, ha hivatkozunk rájuk (pl. var(--accent-gold)), a böngésző innen olvassa ki.
 * Ha lecseréled az arany színt itt, az egész CRM-ben megváltozik.
 */
:root {
    --bg-color: #000000;         /* A legalsó réteg színe (fekete) */
    --card-bg: #ffffff;          /* A kártyák és dobozok háttere (fehér) */
    --accent-gold: #d4af37;      /* A MASONS arany (kiemelésekhez, gombokhoz) */
    --text-dark: #202124;        /* Sötétszürke a főszövegekhez (jobban olvasható a koromfeketénél) */
    --text-gray: #5f6368;        /* Halványszürke a másodlagos szövegekhez és határolókhoz */
    --input-border: #dadce0;     /* A beviteli mezők alapértelmezett keretszíne */
}

/* 
 * 2. ALAPVETŐ OLDALBEÁLLÍTÁSOK (html, body)
 * Ez minden weblap "vászna". Itt állítjuk be a hátteret és a betűtípust.
 */
html {
    /* 100% magasságot adunk a dokumentumnak, hogy a háttérkép leérjen az aljáig */
    height: 100%;
}

body {
    /* min-height biztosítja, hogy ha a tartalom hosszabb, a háttér is megnyúljon vele */
    min-height: 100%;
    margin: 0; /* A böngészők alapból tesznek egy kis üres teret a szélekre. Ezt nullázzuk. */
    font-family: 'Roboto', sans-serif; /* A Google Material stílusú betűtípusa */
    
    /* Háttérkép beállításai */
    background-color: var(--bg-color); /* Ha a kép nem tölt be, ez a szín jelenik meg */
    background-image: url('../kepek/crm.masons.hu---bg-login.webp'); /* A '../' visszalép egy mappát, mert most a 'stilusok' mappában vagyunk! */
    background-size: cover; /* Kitölti a teljes képernyőt torzítás nélkül (levágja a kilógó részeket) */
    background-position: center; /* Mindig a kép közepe maradjon fókuszban */
    background-repeat: no-repeat; /* Ne csempézze a képet, ha túl nagy a kijelző */
    background-attachment: fixed; /* Görgetéskor a háttér a helyén marad (Parallax hatás) */
    
    /* Flexbox (Rugalmas dobozmodell) bekapcsolása. Ezzel tudunk tökéletesen középre igazítani dolgokat. */
    display: flex;
    align-items: center; /* Függőlegesen (Y tengely) középre igazít */
    justify-content: center; /* Vízszintesen (X tengely) középre igazít */
}

/* 
 * 3. STRUKTURÁLIS ELEMEK (Dobozok, Kártyák)
 */

/* Ez tartja egyben a belépő kártyát és az alatta lévő láblécet. */
.wrapper {
    display: flex;
    flex-direction: column; /* A benne lévő elemeket (kártya + footer) egymás alá rendezi */
    align-items: center;
    width: 100%;
    max-width: 900px; /* A kártya sosem lesz szélesebb 900 képpontnál a nagy monitorokon sem */
    padding: 20px; /* Belső térköz a képernyő szélétől, hogy telefonon ne érjen hozzá a széléhez */
    box-sizing: border-box; /* A padding mérete befelé számoljon, ne növessze meg a doboz teljes szélességét */
}

/* A fehér belépő kártya dizájnja */
.login-container {
    background-color: var(--card-bg);
    width: 100%;
    min-height: 450px;
    border-radius: 28px; /* Erős kerekítés a modern, barátságos megjelenésért */
    display: flex; /* Ezen belül a bal (infó) és jobb (űrlap) oldal egymás mellé kerül */
    padding: 48px; /* Párnázás: a doboz falától 48 képpontnyira kezdődik csak a belső tartalom (hogy "levegőzzön") */
    box-sizing: border-box;
    
    /* Árnyékolás (box-shadow). Paraméterek sorrendje: 
       X-eltolás, Y-eltolás, Elmosódás (blur), Szín és átlátszóság (rgba). 
       Itt két árnyék van vesszővel elválasztva a finomabb, rétegzett hatásért. */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 
 * 4. BELSŐ ELEMEK ÉS FORMAZÁSOK (Betűk, Gombok, Mezők)
 */
.info-side {
    flex: 1; /* A rendelkezésre álló hely 50%-át foglalja el (mivel a másik oldal is 'flex: 1') */
    padding-right: 40px; /* Helyet hagy a két oszlop között, hogy ne érjenek össze */
}

.logo {
    width: 160px;
    margin-bottom: 20px;
    display: block; /* Hogy a logó úgy viselkedjen, mint egy doboz, és érvényesüljön a margója */
}

h1 {
    font-size: 32px;
    font-weight: 400; /* Kicsit vékonyabb, elegánsabb betűvastagság (alap a 700) */
    margin: 0 0 15px 0; /* Margók: Fent 0, Jobb 0, Lent 15px, Bal 0 (Óramutató járása szerint) */
    color: var(--accent-gold);
}

.sub-text {
    font-size: 16px;
    line-height: 1.4; /* Sorköz: a betűméret 1.4-szerese (könnyebb olvasni) */
    color: var(--text-dark);
}

.form-side {
    flex: 1; /* A másik 50% helyet foglalja el */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Az űrlapot függőlegesen középre húzza a saját felén */
}

.input-wrapper {
    position: relative; /* Ez fontos: ehhez képest tudjuk majd pozicionálni az ugró feliratot (label) */
    margin-bottom: 8px;
    width: 100%;
}

/* A beviteli mező (E-mail, Jelszó) */
input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 13px 15px;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
    
    /* Ezzel a natív villogó vonal (kurzor) arany színű lesz a fekete helyett: */
    caret-color: var(--accent-gold); 
}

/* Amikor belekattintunk a mezőbe (focus állapot) */
input:focus {
    border: 2px solid var(--accent-gold); /* Arany színű, kicsit vastagabb keret */
    padding: 12px 14px; /* Kompenzáljuk a vastagabb keretet 1 pixel levonásával, így nem "ugrik" meg a doboz mérete */
}

/* A beviteli mező vonalán ülő felirat */
.input-label {
    position: absolute; /* Kiszakítjuk a normál sorrendből, és szabadon mozgathatjuk */
    left: 10px; /* Balról 10 pixelre */
    top: -10px; /* Felülre kitoljuk 10 pixellel (így ráül a keretre) */
    background-color: white; /* Fehér hátteret kap, így kitakarja a keret vonalát a szöveg mögött */
    padding: 0 5px; /* Pici hely a szöveg körül, hogy ne érjen rögtön a kerethez */
    font-size: 12px;
    color: var(--text-gray);
}

.link-text {
    color: var(--accent-gold);
    text-decoration: none; /* Leveszi a linkek alapértelmezett aláhúzását */
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 35px;
    display: inline-block;
}

.notice {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.4;
    margin-bottom: 40px;
}

.action-row {
    display: flex;
    justify-content: flex-end; /* A gombokat a doboz jobb szélére tolja */
    align-items: center;
    gap: 20px; /* 20 pixel fix távolság a "Fiók létrehozása" és a "Tovább" gomb között */
}

.btn-ghost {
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--accent-gold);
    color: white;
    border: none; /* Leveszi a gombok alap keretét */
    padding: 10px 24px;
    border-radius: 18px; /* Pirula alakú gomb */
    font-weight: 500;
    cursor: pointer; /* Amikor fölé visszük az egeret, kis kéz ikonra vált */
}

/* A lábléc formázása */
.custom-footer {
    margin-top: 25px;
    text-align: center;
    color: #70757a;
    font-size: 13px;
    line-height: 1.6;
}

.custom-footer a {
    color: #70757a;
    text-decoration: none;
    font-weight: 500;
}

.custom-footer a:hover {
    text-decoration: underline; /* Ha ráviszi az egeret (hover), aláhúzza a linket */
}

/* ==========================================================================
   5. RESZPONSZÍVITÁS (MOBIL NÉZET)
   ========================================================================== */
/* 
 * A @media lekérdezés figyeli a kijelző szélességét.
 * Ha a szélesség kisebb, mint 768 pixel (általában mobilok és álló tabletek),
 * akkor az itt lévő szabályok FELÜLÍRJÁK a korábbiakat.
 */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column; /* Egymás mellé (row) helyett egymás ALÁ (column) teszi a bal és jobb oldalt */
        padding: 30px 20px; /* Kisebb párnázás a szűkebb képernyő miatt */
    }

    .info-side {
        padding-right: 0; /* Megszüntetjük az oszlopok közti távolságot, mert már egymás alatt vannak */
        margin-bottom: 30px; /* Helyet hagyunk lefelé, az űrlap előtt */
        text-align: center; /* A szövegeket és elemeket középre igazítjuk */
    }

    .logo {
        margin: 0 auto 20px auto; /* Margin auto: Automatikusan középre húzza a képet vízszintesen */
    }

    h1 {
        font-size: 26px; /* Kisebb betű a mobilon, hogy kiférjen */
    }

    .sub-text {
        font-size: 14px;
    }

    .action-row {
        justify-content: space-between; /* A két gombot széthúzza a teljes szélességre (bal és jobb szélre) */
        width: 100%;
    }
}

/* ==========================================================================
   7. ORGANIKUS ANIMÁCIÓK (Mazda stílusú szívdobbanás)
   ========================================================================== */

/* A prémium "szívdobbanás" kurzor vagy indikátor */
.mazda-kurzor {
    display: inline-block;
    width: 12px;
    height: 18px;
    background-color: var(--accent-gold);
    margin-left: 2px;
    vertical-align: text-bottom;
    
    /* 
     * Az animáció meghívása:
     * 1. Név: mazda-szivdobbanas
     * 2. Hossz: 1.2s (Ez egy nyugodt, kb. 50 BPM-es emberi szívverés ritmusa)
     * 3. Ritmus (Timing function): ease-out (A folyamat vége felé finoman lelassul az átmenet)
     * 4. Ismétlődés: infinite (végtelen)
     */
    animation: mazda-szivdobbanas 1.2s ease-out infinite;
}

/* 
 * KULCSKOCKÁK (@keyframes) a szívdobbanáshoz
 * Itt hozzuk létre a feszülés-elernyedés organikus ritmusát.
 */
@keyframes mazda-szivdobbanas {
    /* 0%: A ciklus elején teljesen sötét (kikapcsolva) */
    0% { 
        opacity: 0; 
    }
    
    /* 10%: A másodperc tizedrésze alatt hirtelen felvillan maximális fényerőre (Szisztolé) */
    10% { 
        opacity: 1; 
    }
    
    /* 25%: Egy nagyon pici ideig megtartja a maximális fényt (a dobbanás csúcspontja) */
    25% { 
        opacity: 1; 
    }
    
    /* 100%: A maradék időben (a ciklus 75%-ában) lassan, lágyan halványul el teljesen (Diasztolé) */
    100% { 
        opacity: 0; 
    }
}

/* ==========================================================================
   8. SÚGÓ BUBORÉKOK (Tooltips) ÉS IKONOK
   ========================================================================== */

/* A tároló, ami érzékeli az egeret */
.tooltip-tarolo {
    cursor: help; 
}

/* Az ⓘ ikon formázása és animálása */
.info-ikon {
    font-size: 13px; 
    color: var(--accent-gold); 
    margin-left: 8px; 
    margin-right: 2px;
    animation: info-pulzalas 2s ease-in-out infinite;
}

/* A lélegző animáció kulcskockái */
@keyframes info-pulzalas {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Maga a felugró szövegbuborék */
.tooltip-szoveg {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background-color: var(--card-bg);
    color: var(--text-dark);
    text-align: center;
    border: 1px solid var(--accent-gold);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    
    position: absolute;
    z-index: 100;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease-in-out;
    
    /* BIZTONSÁGI EXTRA: Ez megakadályozza, hogy maga a buborék "ellopja" 
       az egeret, amikor felugrik. Csak vizuális elemként viselkedik. */
    pointer-events: none; 
}

/* A buborék aljára rajzolt arany nyíl */
.tooltip-szoveg::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--accent-gold) transparent transparent transparent;
}

/* A VARÁZSLAT: Ez a szabály mondja meg, hogy rámutatáskor jelenjen meg! */
.tooltip-tarolo:hover .tooltip-szoveg {
    visibility: visible;
    opacity: 1;
}
/* ELRENDEZÉS */
body { margin: 0; padding: 0; background: #000; overflow: hidden; }

/* FIX TOP BAR */
.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: #111;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    justify-content: space-between;
}

.logo-section img { height: 35px; }

.top-nav { display: flex; gap: 30px; margin-left: 50px; flex-grow: 1; }
.top-nav a { 
    color: #888; text-decoration: none; font-size: 14px; 
    transition: 0.3s; padding: 20px 0; border-bottom: 2px solid transparent;
}
.top-nav a:hover, .top-nav a.active { color: var(--accent-gold); border-bottom: 2px solid var(--accent-gold); }

/* USER PROFILE SECTION */
.user-profile { display: flex; align-items: center; gap: 12px; }
.online-dot { 
    width: 10px; height: 10px; background: #28a745; 
    border-radius: 50%; box-shadow: 0 0 8px #28a745; 
}
.user-name { color: #fff; font-size: 14px; font-weight: 500; }
.logout-mini { text-decoration: none; font-size: 18px; filter: grayscale(1); transition: 0.3s; }
.logout-mini:hover { filter: grayscale(0); transform: scale(1.1); }

/* GRID KIIGAZÍTÁS */
.admin-grid { 
    display: grid; 
    grid-template-columns: 250px 1fr; 
    margin-top: 60px; /* Hely a top-bar-nak */
    height: calc(100vh - 60px); 
}

.sidebar { background: #0a0a0a; padding: 30px 15px; border-right: 1px solid #222; }
.sidebar-label { font-size: 11px; color: #444; letter-spacing: 2px; margin-bottom: 20px; }
.side-nav a { 
    display: block; color: #ccc; text-decoration: none; 
    padding: 12px 15px; border-radius: 6px; margin-bottom: 5px; font-size: 13px;
}
.side-nav a:hover { background: #1a1a1a; color: var(--accent-gold); }
.admin-grid { 
    display: grid; 
    grid-template-columns: 250px 1fr; /* Fix 250px balra, a maradék jobbra */
    margin-top: 100px; 
    height: calc(100vh - 60px);
    width: 100%; /* Legyen teljes szélességű */
}

.content { 
    padding: 40px; 
    background: #000; 
    color: #fff; 
    overflow-y: auto; /* Ha hosszú a lista, lehessen görgetni a tartalom részt */
}

.sidebar { 
    background: #0a0a0a; 
    padding: 30px 15px; 
    border-right: 1px solid #333; 
    height: 100%; /* Töltse ki a magasságot */
}
.logo-section {
    display: flex;
    align-items: center;
    padding-right: 20px;
    border-right: 1px solid #333; /* Egy vékony elválasztó a logó és a menü között */
    height: 100%;
}

.logo-section img {
    height: 35px; /* Állítsd be a neked tetsző magasságot */
    width: auto;
    display: block;
    transition: opacity 0.3s;
}

.logo-section img:hover {
    opacity: 0.8;
}