/* MagIge DATALAB — Közös Stíluslap */

/* Alapvető betűtípus beállítások és háttér */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #faf7f2;
}

/* Tipográfiai osztályok */
.serif-antique {
    font-family: 'Cinzel', serif;
}

.serif-book {
    font-family: 'Lora', Georgia, serif;
}

.rovas-font {
    font-family: 'Noto Sans Old Hungarian', 'Segoe UI Historic', 'Courier New', serif !important;
}

.rovas-preview {
    font-family: 'Noto Sans Old Hungarian', serif !important;
    direction: rtl;
}

/* Szűrhetőség és keresés */
.tool-card.hidden-by-search {
    display: none;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(180, 130, 50, 0.12);
}

/* TÉMA VÁLTOZÓK ÉS ALAPBEÁLLÍTÁSOK */
:root {
    --theme-color: #78350f;
    --theme-color-hover: #451a03;
    --theme-glow: rgba(120, 53, 4, 0.05);
    --theme-glow-hover: rgba(120, 53, 4, 0.12);
    --theme-scrollbar: #78350f;
}

.theme-plum {
    --theme-color: #581c87;
    --theme-color-hover: #3b0764;
    --theme-glow: rgba(88, 28, 135, 0.05);
    --theme-glow-hover: rgba(88, 28, 135, 0.12);
    --theme-scrollbar: #581c87;
}

.theme-slate {
    --theme-color: #475569;
    --theme-color-hover: #1e293b;
    --theme-glow: rgba(71, 85, 105, 0.05);
    --theme-glow-hover: rgba(71, 85, 105, 0.12);
    --theme-scrollbar: #475569;
}

.theme-amber {
    --theme-color: #ca8a04;
    --theme-color-hover: #854d0e;
    --theme-glow: rgba(133, 77, 14, 0.05);
    --theme-glow-hover: rgba(133, 77, 14, 0.12);
    --theme-scrollbar: #ca8a04;
}

.theme-cobalt {
    --theme-color: #1e3a8a;
    --theme-color-hover: #0f172a;
    --theme-glow: rgba(30, 58, 138, 0.05);
    --theme-glow-hover: rgba(30, 58, 138, 0.12);
    --theme-scrollbar: #1e3a8a;
}

.theme-gold {
    --theme-color: #c4a472;
    --theme-color-hover: #a16207;
    --theme-glow: rgba(139, 92, 26, 0.05);
    --theme-glow-hover: rgba(139, 92, 26, 0.12);
    --theme-scrollbar: #c4a472;
}

.theme-magenta {
    --theme-color: #d946ef;
    --theme-color-hover: #86198f;
    --theme-glow: rgba(134, 25, 143, 0.05);
    --theme-glow-hover: rgba(134, 25, 143, 0.12);
    --theme-scrollbar: #d946ef;
}

.theme-violet {
    --theme-color: #a78bfa;
    --theme-color-hover: #6d28d9;
    --theme-glow: rgba(109, 40, 217, 0.05);
    --theme-glow-hover: rgba(109, 40, 217, 0.12);
    --theme-scrollbar: #a78bfa;
}

.theme-teak {
    --theme-color: #78350f;
    --theme-color-hover: #451a03;
    --theme-glow: rgba(120, 53, 4, 0.05);
    --theme-glow-hover: rgba(120, 53, 4, 0.12);
    --theme-scrollbar: #78350f;
}

.theme-burgundy {
    --theme-color: #9f1239;
    --theme-color-hover: #4c0519;
    --theme-glow: rgba(159, 18, 57, 0.05);
    --theme-glow-hover: rgba(159, 18, 57, 0.12);
    --theme-scrollbar: #9f1239;
}

.theme-forest {
    --theme-color: #164e32;
    --theme-color-hover: #0f291e;
    --theme-glow: rgba(15, 41, 30, 0.05);
    --theme-glow-hover: rgba(15, 41, 30, 0.12);
    --theme-scrollbar: #164e32;
}

/* 1. Kártya stílusok: Tool Card (Főoldal) */
.tool-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: #ffffff;
    border: 1px solid #e2dacd;
}

.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -12px rgba(139, 92, 26, 0.15);
    border-color: #c4a472;
}

.tool-card:hover .card-arrow {
    transform: translateX(5px);
    color: #78350f;
}

.card-arrow {
    transition: all 0.3s ease;
}

/* Kiemelt kártyák mintázata (pl. Rovásírás) */
.featured-card {
    background: linear-gradient(to bottom, #ffffff, #fdfbf7);
    border: 2px solid #d9b473 !important;
    box-shadow: 0 10px 30px -15px rgba(180, 130, 50, 0.15);
}

.featured-card:hover {
    border-color: #b48c41 !important;
    box-shadow: 0 25px 45px -12px rgba(180, 130, 50, 0.25);
}

/* 2. Kártya stílusok: Premium Card (Belső aloldalak) */
.premium-card {
    background: #ffffff;
    border: 1px solid #e2dacd;
    box-shadow: 0 4px 20px -8px var(--theme-glow);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card:hover {
    border-color: var(--theme-color);
    box-shadow: 0 12px 30px -10px var(--theme-glow-hover);
}

/* Csővezeték folyamat-nyíl összekötő */
.connector-line {
    width: 2px;
    height: 24px;
    background: linear-gradient(to bottom, #475569, #c4a472);
}

/* 3. Gombok stílusai */
.btn-plum {
    background: linear-gradient(135deg, #3b0764, #581c87);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-plum:hover {
    background: linear-gradient(135deg, #2e024f, #3b0764);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 28, 135, 0.25);
}

.btn-slate {
    background: linear-gradient(135deg, #1e293b, #475569);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-slate:hover {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25);
}

.btn-amber {
    background: linear-gradient(135deg, #854d0e, #a16207);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-amber:hover {
    background: linear-gradient(135deg, #713f12, #854d0e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(161, 98, 7, 0.25);
}
.btn-outline-amber {
    border: 1px solid #eab308;
    color: #854d0e;
    background: transparent;
    transition: all 0.2s ease;
}
.btn-outline-amber:hover {
    background: #fefce8;
    border-color: #854d0e;
}

.btn-cobalt {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-cobalt:hover {
    background: linear-gradient(135deg, #020617, #0f172a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}

.btn-gold {
    background: linear-gradient(135deg, #854d0e, #a16207);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #713f12, #854d0e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(113, 63, 18, 0.2);
}
.btn-outline-gold {
    border: 1px solid #d9b473;
    color: #854d0e;
    background: transparent;
    transition: all 0.2s ease;
}
.btn-outline-gold:hover {
    background: #fdfbf7;
    border-color: #b48c41;
}

.btn-magenta {
    background: linear-gradient(135deg, #701a75, #d946ef);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-magenta:hover {
    background: linear-gradient(135deg, #4a044e, #701a75);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.25);
}
.btn-outline-magenta {
    border: 1px solid #f0abfc;
    color: #86198f;
    background: transparent;
    transition: all 0.2s ease;
}
.btn-outline-magenta:hover {
    background: #fdf4ff;
    border-color: #86198f;
}

.btn-violet {
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-violet:hover {
    background: linear-gradient(135deg, #2e1065, #4c1d95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.btn-outline-violet {
    border: 1px solid #ddd6fe;
    color: #6d28d9;
    background: transparent;
    transition: all 0.2s ease;
}
.btn-outline-violet:hover {
    background: #f5f3ff;
    border-color: #6d28d9;
}

.btn-teak {
    background: linear-gradient(135deg, #451a03, #78350f);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-teak:hover {
    background: linear-gradient(135deg, #2d0f02, #451a03);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(120, 53, 4, 0.25);
}

.btn-burgundy {
    background: linear-gradient(135deg, #4c0519, #9f1239);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-burgundy:hover {
    background: linear-gradient(135deg, #310411, #4c0519);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(159, 18, 57, 0.25);
}

.btn-forest {
    background: linear-gradient(135deg, #0f291e, #164e32);
    color: #ffffff;
    transition: all 0.2s ease;
}
.btn-forest:hover {
    background: linear-gradient(135deg, #0a1c14, #0f291e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 41, 30, 0.25);
}
.btn-outline-forest {
    border: 1px solid #164e32;
    color: #164e32;
    background: transparent;
    transition: all 0.2s ease;
}
.btn-outline-forest:hover {
    background: #f0fdf4;
    border-color: #0f291e;
}

/* 4. Görgetősávok (Custom Scrollbar) */
.custom-scroll::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1ebd9;
}

.custom-scroll::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar);
    border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--theme-color-hover);
}

/* 5. Jelvények (Badgek) */
.badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
}

.badge-kodolas      { background-color: #fef8eb; color: #b45309; border: 1px solid #fde6c1; }
.badge-kriptografia { background-color: #faf5ff; color: #6b21a8; border: 1px solid #f3e8ff; }
.badge-forenzika    { background-color: #fefce8; color: #854d0e; border: 1px solid #fef08a; }
.badge-magyar       { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.badge-rendszer     { background-color: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.badge-rovas        { background-color: #fff1f2; color: #be123c; border: 1px solid #ffe4e6; }

/* 6. Különleges egyedi stílusok aloldalanként */

/* Monospace adatok */
.hex-font, .code-output {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
}
.hex-font {
    font-weight: 700;
}

/* Drag & Drop */
.drop-zone {
    border: 2px dashed var(--theme-color);
    transition: all 0.2s ease;
}
.drop-zone.dragover {
    background-color: #fdfdfd;
    border-color: var(--theme-color-hover);
}
/* Speciális drop-zone háttérszínek téma szerint */
.theme-amber .drop-zone.dragover { background-color: #fef3c7; border-color: #92400e; }
.theme-forest .drop-zone.dragover { background-color: #f0fdf4; border-color: #0f291e; }

/* Frekvencia diagram oszlopok animációja */
.freq-bar {
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animált TOTP kör */
.circle-go {
    transition: stroke-dashoffset 1s linear;
}

/* Layer badge stílusok */
.layer-badge {
    font-size: 10px;
    font-weight: 850;
    padding: 4px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Speciális Rovásírás betűtípus RTL támogatással */
.rovas-text {
    font-family: 'Noto Sans Old Hungarian', 'Segoe UI Historic', 'Courier New', serif !important;
    direction: rtl;
    unicode-bidi: bidi-override;
}
.rovas-font-only {
    font-family: 'Noto Sans Old Hungarian', serif !important;
}
.badge-rovas {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

/* Fülek (Tabok) */
.tab-btn, .mode-btn {
    transition: all 0.2s;
}
.tab-btn.active, .mode-btn.active {
    background-color: var(--theme-color) !important;
    color: #ffffff !important;
    border-color: var(--theme-color) !important;
}

/* Kiegészítő kisegítő osztályok */
.hidden {
    display: none !important;
}