/* =====================================================================
   LOGICUM — RESPONSIVE.CSS  (Mobile-First Additions)

   Breakpoints:
     base / < 480px   Smartphone (mobile-first default)
     min-width: 480px Small phones that are wider
     min-width: 768px Tablet
     min-width: 1024px Desktop
     min-width: 1440px Large Monitor

   POLICY:
   - Mobile styles are the default (no media query needed)
   - Use @media (min-width: ...) to enhance for larger screens
   - This file only adds what is missing from style.css;
     it does not duplicate existing rules
   ===================================================================== */


/* ─── 1. GLOBAL: IMAGE RESPONSIVENESS ─────────────────────────────── */

img {
    max-width: 100%;
    height: auto;
}


/* ─── 2. FLUID TYPOGRAPHY (clamp) ────────────────────────────────── */

/*
 * These use clamp() to scale fluidly between breakpoints.
 * Many elements in style.css already use !important overrides,
 * so we must match that specificity here.
 */

/* Welcome / greeting screen */
.welcome-title {
    font-size: clamp(1.25rem, 5vw, 1.875rem) !important;
}

.welcome-subtitle {
    font-size: clamp(0.8125rem, 2vw, 0.9375rem) !important;
}

/* Library page heading */
.library-header h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
}

.library-subtitle {
    font-size: clamp(0.875rem, 1.8vw, 1rem) !important;
}

/* Projects page heading */
.projects-subtitle {
    font-size: clamp(0.875rem, 1.8vw, 1rem) !important;
}

/* Settings section headings */
.settings-section-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
}

/* Settings card titles */
.settings-card-title {
    font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;
}


/* ─── 3. SETTINGS MODAL — RESPONSIVE ─────────────────────────────── */

/*
 * Settings is a fixed-position modal. On mobile it becomes a
 * bottom-sheet so content is naturally reachable by thumbs.
 */

@media (max-width: 768px) {
    #settingsView {
        padding: 10px !important;
    }

    .settings-window {
        max-height: 92dvh !important;
        border-radius: 20px !important;
    }

    .settings-view-header {
        padding: 22px 20px 8px !important;
    }

    .settings-tabs {
        padding: 0 16px 10px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .settings-tab-btn {
        flex-shrink: 0 !important;
        font-size: 13px !important;
        padding: 7px 10px !important;
    }

    .settings-panels {
        padding: 16px 16px 28px !important;
    }

    .settings-card {
        border-radius: 14px !important;
        padding: 14px 14px !important;
    }

    /* Theme cards: 2-column grid on mobile instead of 3 */
    .theme-card-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Bottom-sheet style on very small phones */
@media (max-width: 480px) {
    #settingsView {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .settings-window {
        max-height: 95dvh !important;
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
    }

    .settings-view-header {
        padding: 18px 16px 6px !important;
    }

    .settings-panels {
        padding: 14px 14px 24px !important;
    }

    /* Theme cards: single column on smallest phones */
    .theme-card-row {
        grid-template-columns: 1fr !important;
    }
}

/* iOS: prevent input zoom (font-size < 16px triggers zoom on Safari) */
@media (max-width: 768px) {
    .settings-form input[type="text"],
    .settings-form input[type="email"],
    .settings-form input[type="password"],
    .settings-form textarea,
    .settings-form select,
    .login-form input[type="text"],
    .login-form input[type="email"],
    .login-form input[type="password"],
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .library-search-bar input[type="text"],
    .search-input {
        font-size: 16px !important;
    }
}


/* ─── 4. PROJECTS VIEW — RESPONSIVE ──────────────────────────────── */

/*
 * Projects header has 40px padding on all sides by default.
 * On mobile we reduce sides but preserve the 64px left padding
 * that keeps content clear of the fixed hamburger button.
 */

@media (max-width: 768px) {
    .projects-header {
        padding: 24px 20px 12px 64px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .projects-list {
        padding: 12px 20px 28px !important;
    }
}

@media (max-width: 390px) {
    .projects-header {
        /* 58px left: matches existing 390px mobile-btn adjustment */
        padding: 20px 14px 10px 58px !important;
    }

    .projects-list {
        padding: 10px 14px 24px !important;
    }
}


/* ─── 5. LIBRARY VIEW — RESPONSIVE ───────────────────────────────── */

/* Reduce the large 40px grid padding on mobile */
@media (max-width: 768px) {
    .documents-grid {
        padding: 20px !important;
        gap: 16px !important;
    }

    .library-search-bar {
        max-width: 100% !important;
    }

    .library-actions {
        flex-wrap: wrap !important;
    }

    .library-actions .upload-first-btn,
    .library-actions .library-folder-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .documents-grid {
        padding: 14px !important;
        gap: 12px !important;
    }
}


/* ─── 6. MINDMAP VIEW — RESPONSIVE ───────────────────────────────── */

/*
 * #mindMapView has padding: 40px 40px 28px by default.
 * On mobile we tighten it; the mindmap-header still gets
 * padding-left: 64px from style.css to clear the hamburger button.
 */

@media (max-width: 768px) {
    #mindMapView {
        padding: 20px 16px 16px !important;
    }
}

@media (max-width: 480px) {
    #mindMapView {
        padding: 16px 12px 12px !important;
    }
}


/* ─── 7. BUTTONS — FULL-WIDTH ON SMALL SCREENS ───────────────────── */

@media (max-width: 480px) {
    /* Action buttons inside modals */
    #newProjectModal .btn-primary,
    #newProjectModal .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Projects header new-project button */
    .projects-header .btn-primary,
    .projects-header .project-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Library upload */
    .library-header .upload-first-btn,
    .library-header .library-folder-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ─── 8. TABLET (≥ 768px) ────────────────────────────────────────── */

@media (min-width: 768px) {
    /* Settings tabs: no horizontal scroll needed on wider screens */
    .settings-tabs {
        overflow-x: visible !important;
        flex-wrap: wrap !important;
    }

    .settings-tab-btn {
        flex-shrink: 1 !important;
    }

    /* Theme cards: restore 3-column grid */
    .theme-card-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ─── 9. DESKTOP (≥ 1024px) ─────────────────────────────────────── */

@media (min-width: 1024px) {
    /* Library: standard multi-column grid restored */
    .documents-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        padding: 40px !important;
        gap: 24px !important;
    }
}


/* ─── 10. LARGE MONITOR (≥ 1440px) ──────────────────────────────── */

/*
 * On large displays, give the UI more breathing room:
 * wider sidebar, more generous padding, wider reading column.
 */

@media (min-width: 1440px) {
    /* Slightly wider sidebar */
    :root {
        --sidebar-width: 280px !important;
    }

    .sidebar {
        width: 280px !important;
    }

    /* Projects: more generous padding */
    .projects-header {
        padding: 52px 56px 16px !important;
    }

    .projects-list {
        padding: 16px 56px 48px !important;
    }

    /* Library: wider grid with bigger gaps */
    .library-header {
        padding: 52px 56px 24px !important;
    }

    .documents-grid {
        padding: 56px !important;
        gap: 32px !important;
        grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)) !important;
    }

    /* Mind map */
    #mindMapView {
        padding: 52px 56px 32px !important;
    }

    /* Chat: wider comfortable reading column */
    #chatView.chat-sidebar-collapsed .chat-messages,
    #chatView:not(.chat-sidebar-open) .chat-messages {
        max-width: 960px !important;
    }

    /* Settings modal: more room */
    .settings-window {
        max-width: 980px !important;
    }

    .settings-view-header {
        padding: 36px 56px 12px !important;
    }

    .settings-tabs {
        padding: 0 56px 12px !important;
    }

    .settings-panels {
        padding: 24px 56px 56px !important;
    }

    /* Logo text */
    .logo-text {
        font-size: 1.5rem !important;
    }
}