/* ==============================================================================
 * Mentifyll: Töltsd fel az elméd! — Reszponzív alkalmazáskeret
 *   < 768 px   : mobil — alsó navigáció, levegős egyoszlopos elrendezés
 *   768–1023 px: tablet — alsó navigáció, szélesebb tartalom
 *   ≥ 1024 px  : asztali — oldalsáv + dashboard-rácsok
 * Készítők: Kormos Attila és a Google Gemini valamint Claude Opus
 * ============================================================================== */

/* ---------- Közös alapok ---------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

.app-header {
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

body.theme-dark .app-header {
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.topbar-title {
    display: none;
}

.nav-desktop-only {
    display: none;
}

.sidebar-brand,
.sidebar-user {
    display: none;
}

/* Dashboard-oszlopok: mobilon egyszerű, szellős egyoszlopos verem */
.dash-grid,
.dash-main,
.dash-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.dash-main > .card,
.dash-side > .card,
.dash-main > .dash-section {
    margin: 0 !important;
}

.subject-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.subject-grid > .card {
    margin: 0 !important;
}

.page-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ---------- Mobil (< 768 px): a jelenlegi elrendezés, de nem tömörödik ---------- */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        font-size: 16px;
    }

    .app-header {
        height: 56px;
        padding: 0 12px;
    }

    .app-content {
        padding: 18px 16px 28px;
    }

    .card {
        padding: 18px;
        margin-bottom: 16px;
        border-radius: var(--radius-lg);
    }

    .card-title {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    .tab-view > .card,
    .tab-view > .dash-grid {
        margin-bottom: 16px;
    }

    .tab-view > h2.card-title {
        margin-bottom: 14px;
    }

    .bottom-nav {
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        padding: 0 6px env(safe-area-inset-bottom, 0px);
    }

    .nav-item span {
        font-size: 0.68rem;
    }

    /* Gombsorok: nagyobb érintési célpont és tisztán elváló sorok */
    .card .btn,
    .modal-backdrop .btn {
        min-height: 42px;
    }

    .modal-backdrop > .card {
        padding: 18px;
        border-radius: var(--radius-lg);
    }

    /* A kártyákban lévő rugalmas sorok levegősebbek */
    .card > div[style*="display:flex"][style*="gap:6px"],
    .card > div[style*="display:flex"][style*="gap:8px"] {
        row-gap: 10px;
    }

    .toast-stack-container {
        left: 12px;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 400px) {
    .app-content {
        padding: 14px 12px 24px;
    }

    .card {
        padding: 16px;
    }
}

/* ---------- Tablet (768–1023 px) ---------- */
@media (min-width: 768px) {
    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav {
        display: flex;
    }

    .app-content {
        max-width: 960px;
        padding: 28px 28px 32px;
    }

    .app-header {
        padding: 0 24px;
    }

    .card {
        padding: 22px;
        margin-bottom: 18px;
    }

    .dash-grid,
    .dash-main,
    .dash-side {
        gap: 20px;
    }

    .subject-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* ---------- Asztali dashboard (≥ 1024 px) ---------- */
@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
        padding-left: var(--sidebar-width);
    }

    /* Felső sáv */
    .app-header {
        height: var(--topbar-height);
        padding: 0 36px;
    }

    .app-header .brand-wrapper {
        display: none;
    }

    .topbar-title {
        display: block;
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--color-heading);
        letter-spacing: -0.01em;
    }

    .header-status {
        gap: 10px;
    }

    #system-status-indicator {
        margin-right: 8px;
    }

    /* Oldalsáv = a mobil alsó navigáció újrahasznosítva */
    .bottom-nav {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: var(--sidebar-width);
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 4px;
        padding: 20px 14px 16px;
        border-top: 0;
        border-right: 1px solid var(--color-border);
        box-shadow: none;
        overflow-y: auto;
        z-index: 150;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 2px 10px 18px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--color-border);
        color: inherit;
        text-decoration: none;
    }

    .sidebar-brand img {
        width: 34px;
        height: 34px;
    }

    .sidebar-brand strong {
        display: block;
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--color-heading);
        line-height: 1.1;
    }

    .sidebar-brand small {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--color-primary);
    }

    .nav-item {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        height: 46px;
        padding: 0 14px;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
    }

    .nav-item svg {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    .nav-item span {
        font-size: 0.95rem;
        max-width: none;
        text-align: left;
    }

    .nav-item.nav-desktop-only {
        display: flex;
    }

    /* Bejelentkezés előtt nincs oldalsáv: a márka a felső sávban látszik */
    body.is-auth-view {
        padding-left: 0;
    }

    body.is-auth-view .app-header .brand-wrapper {
        display: flex;
    }

    body.is-auth-view .topbar-title {
        display: none;
    }

    .nav-item:hover {
        background: var(--color-surface-hover);
        color: var(--color-heading);
    }

    .nav-item.active {
        background: rgba(var(--color-primary-rgb), 0.14);
        color: var(--color-primary);
    }

    .nav-item.nav-add {
        background: linear-gradient(135deg, var(--color-primary), var(--color-indigo-dark));
        color: #04201c;
        margin-bottom: 10px;
        box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.25);
    }

    .nav-item.nav-add span {
        font-weight: 800;
    }

    .nav-item.nav-add .nav-add-btn {
        width: 24px;
        height: 24px;
        background: transparent;
        box-shadow: none;
        margin: 0;
    }

    .nav-item.nav-add .nav-add-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    .nav-item.nav-add.active,
    .nav-item.nav-add:hover {
        color: #04201c;
        background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    }

    .sidebar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding: 12px;
        border: 1px solid var(--color-border);
        background: var(--color-surface-variant);
        border-radius: var(--radius-md);
    }

    .sidebar-user .sidebar-user-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid var(--color-primary);
        object-fit: cover;
        background: var(--color-bg);
        flex-shrink: 0;
    }

    .sidebar-user .sidebar-user-name {
        font-weight: 700;
        font-size: 0.88rem;
        color: var(--color-heading);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-user .sidebar-user-meta {
        font-size: 0.74rem;
        color: var(--color-text-muted);
    }

    .sidebar-user .sidebar-user-text {
        min-width: 0;
        flex: 1;
    }

    .sidebar-user button {
        background: transparent;
        border: 0;
        color: var(--color-text-muted);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 6px;
        border-radius: 8px;
    }

    .sidebar-user button:hover {
        background: var(--color-surface-hover);
        color: var(--color-coral);
    }

    /* Tartalom */
    .app-content {
        max-width: 1480px;
        padding: 32px 40px 40px;
    }

    .card {
        padding: 24px;
        margin-bottom: 20px;
    }

    .app-footer {
        padding: 18px 40px 28px;
    }

    /* Ma: kétoszlopos dashboard */
    .dash-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
        gap: 24px;
        align-items: start;
    }

    .dash-main,
    .dash-side {
        gap: 24px;
    }

    .dash-side {
        position: sticky;
        top: calc(var(--topbar-height) + 20px);
    }

    /* Tantárgykártyák rácsban */
    .subject-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 20px;
    }

    /* Önálló kártyákból álló fülek: kétoszlopos (masonry) elrendezés */
    #tab-profile,
    #tab-rewards,
    #tab-analytics {
        column-count: 2;
        column-gap: 24px;
    }

    #tab-profile > .card,
    #tab-rewards > .card,
    #tab-analytics > .card,
    #tab-analytics > div {
        break-inside: avoid;
    }

    #tab-profile > h2,
    #tab-profile > .page-section-title,
    #tab-rewards > div:first-child,
    #tab-analytics > div:first-child,
    #tab-analytics > .analytics-grid-4,
    #tab-profile > #user-management-panel,
    #tab-profile > #admin-ai-panel {
        column-span: all;
    }

    /* Fókuszált, egyoszlopos felületek: középre igazítva, olvasható szélességgel */
    #tab-practice,
    #tab-exam,
    #tab-add,
    #tab-tutor {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    #tab-today,
    #tab-timetable,
    #tab-subjects {
        max-width: none;
    }

    /* Felhasználók: kártyarács */
    #users-list-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        gap: 14px !important;
    }

    .toast-stack-container {
        bottom: 28px;
        right: 32px;
    }
}

@media (min-width: 1440px) {
    .app-content {
        padding: 36px 56px 48px;
    }
}

@media print {
    body {
        padding-left: 0 !important;
        padding-bottom: 0 !important;
    }
}