/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Mobile-First Breakpoints for Project Ascension
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global Mobile Spacing ──────────────────────────────────────── */
@media (max-width: 768px) {
    .main-content {
        padding: 0 12px 100px 12px !important; /* bottom space for mobile nav */
    }

    .container {
        padding: 12px;
    }

    h2 {
        font-size: 1.4rem !important;
    }

    .glass-panel {
        border-radius: 14px;
    }
}

/* ── Dashboard ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .dash-column {
        display: contents;
    }

    .quest-section.main-quests { order: 1; }
    .character-card { order: 2; }
    .quest-section.daily-quests { order: 3; }
    .quest-section.bad-habits { order: 4; }
    .boss-section { order: 5; }
}

@media (max-width: 480px) {
    .dashboard-container {
        padding: 0 !important;
    }

    .character-card {
        padding: 20px 15px !important;
    }

    .character-card h2 {
        font-size: 1.4rem !important;
    }

    .stats-grid {
        gap: 6px;
    }

    .stat-val {
        font-size: 1rem !important;
    }

    .quest-card {
        padding: 12px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .quest-card .btn-sm,
    .quest-card .btn-outline {
        width: 100%;
    }

    .add-bad-habit-form {
        flex-direction: column !important;
    }

    .add-bad-habit-form .input-field,
    .add-bad-habit-form select {
        width: 100% !important;
    }

    .day-selection {
        padding: 25px 15px !important;
        margin: 15px auto !important;
    }

    .day-selection .options-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .day-selection .options-grid .btn {
        padding: 14px 10px !important;
        font-size: 0.8rem !important;
    }

    .completion-banner {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .completion-ring-container {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ── Stats Page ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .stats-container {
        padding: 0 !important;
    }

    .primary-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stats-bottom-row {
        grid-template-columns: 1fr !important;
    }

    .discipline-banner {
        flex-direction: column !important;
        text-align: center;
        gap: 15px !important;
    }

    .discipline-segments {
        display: none !important;
    }

    .badges-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .primary-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .stat-card {
        padding: 15px 10px !important;
    }

    .stat-card-value {
        font-size: 1.6rem !important;
    }
}

/* ── Schedule Page ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .schedule-container {
        padding: 0 !important;
    }

    .ist-clock-banner {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }

    .ist-time-display {
        font-size: 2rem !important;
    }

    .week-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 4px !important;
    }

    .day-col-header {
        padding: 8px 2px !important;
    }

    .day-name-short {
        font-size: 0.65rem !important;
    }

    .day-number {
        font-size: 1rem !important;
    }

    .day-month {
        display: none !important;
    }

    .day-col-body {
        display: none !important;
    }

    .day-detail-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .upcoming-item {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ── Compete Page ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .compete-container {
        padding: 15px 0 !important;
    }

    .compete-container .glass-panel {
        padding: 25px 15px !important;
    }

    .compete-container h1 {
        font-size: 1.5rem !important;
    }

    .compete-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Boss Page ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .boss-header {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center;
    }

    .boss-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .boss-nav .btn {
        font-size: 0.8rem !important;
        padding: 8px 14px !important;
    }

    .boss-arena {
        padding: 20px !important;
        margin: 0 !important;
    }

    .guild-hall-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Store Page ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .titles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .titles-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .titles-grid .glass-panel {
        padding: 14px 10px !important;
    }

    .titles-grid h3 {
        font-size: 0.9rem !important;
    }
}

/* ── Onboarding ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .onboarding-step {
        padding: 25px 18px !important;
    }

    .onboarding-step h1 {
        font-size: 1.8rem !important;
    }

    .onboarding-step h2 {
        font-size: 1.3rem !important;
    }

    .form-group-row {
        flex-direction: column;
        gap: 0;
    }

    .options-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .onboarding-quote {
        font-size: 1.2rem !important;
        padding: 18px 14px !important;
    }

    .quote-begin-btn {
        font-size: 0.85rem !important;
        padding: 14px 28px !important;
    }
}

/* ── Settings Page ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .settings-container .glass-panel {
        padding: 25px 15px !important;
        margin: 15px auto !important;
    }

    .settings-container .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Notifications ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    #notification-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 90px !important; /* above mobile nav */
    }

    .notification {
        width: 100% !important;
    }
}

/* ── Touch Target Safety ────────────────────────────────────────── */
@media (max-width: 768px) {
    .btn, .btn-sm, .input-field, .nav-link, select {
        min-height: 44px;
    }

    a, button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ── Safe Area for Notched Phones ────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }

    .main-content {
        padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    }
}