@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

html, body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f4f7f6;
    color: #2c3e50;
    font-size: 1.05rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
}

/* Big, Friendly Buttons */
.btn {
    border-radius: 50px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 1.05rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    touch-action: manipulation;
}

.btn-sm {
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary { background-color: #4a90e2; border-color: #4a90e2; }
.btn-success { background-color: #2ecc71; border-color: #2ecc71; }
.btn-danger { background-color: #e74c3c; border-color: #e74c3c; }

/* Soft Cards */
.card, .upload-card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    background: #ffffff;
}

/* Form Inputs */
.form-control, .form-select {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 1rem;
    border: 2px solid #e0e6ed;
}

.form-control:focus, .form-select:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.25);
}

/* Navbar */
.navbar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Guest UI Specifics */
.custom-file-upload {
    font-size: 1.4rem;
    padding: 20px;
    background-color: #4a90e2;
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.3);
    border-radius: 50px;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-weight: 800;
    width: 100%;
    text-align: center;
    transition: transform 0.2s ease;
}

.custom-file-upload:active {
    transform: scale(0.95);
}

.gallery-img {
    border-radius: 16px;
}

.nav-pills .nav-link {
    border-radius: 50px;
    font-weight: 700;
    color: #7f8c8d;
    padding: 14px;
    font-size: 1.1rem;
}

.nav-pills .nav-link.active {
    background-color: #4a90e2;
    color: white;
    box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
}

/* ═══════════ THEME TOGGLE BUTTON STYLES ═══════════ */
.theme-toggle-btn {
    height: 38px;
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    text-decoration: none !important;
}
.theme-toggle-btn:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL OBSIDIAN DARK THEME (BLACK & WHITE / HIGH-TECH CHARCOAL)
   Applied automatically across the whole system when [data-theme="dark"]
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #090d16 !important;
    color: #f8fafc !important;
}

/* ── Headings & Links ── */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: #f8fafc !important;
}

[data-theme="dark"] a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.nav-top-link) {
    color: #60a5fa;
}
[data-theme="dark"] a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.nav-top-link):hover {
    color: #93c5fd;
}

/* ── Navbars & Headers ── */
[data-theme="dark"] .navbar,
[data-theme="dark"] .top-navbar,
[data-theme="dark"] .landing-nav,
[data-theme="dark"] .admin-topbar {
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .brand-text {
    color: #f8fafc !important;
}

[data-theme="dark"] .nav-top-link {
    color: #94a3b8 !important;
}
[data-theme="dark"] .nav-top-link:hover,
[data-theme="dark"] .nav-top-link.active {
    color: #60a5fa !important;
    background: #1e293b !important;
}

/* ── Theme Switcher in Dark Mode ── */
[data-theme="dark"] .theme-toggle-btn {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: #273549 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* ── Return Dashboard Buttons ── */
[data-theme="dark"] .btn-nav-dashboard {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-nav-dashboard:hover {
    background-color: #273549 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* ── All Card Elements Across System ── */
[data-theme="dark"] .card,
[data-theme="dark"] .card-custom,
[data-theme="dark"] .upload-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .billing-card,
[data-theme="dark"] .demo-panel-card,
[data-theme="dark"] .event-card,
[data-theme="dark"] .photo-card,
[data-theme="dark"] .mod-sidebar,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .guest-join-card,
[data-theme="dark"] .guest-photo-card,
[data-theme="dark"] .feature-pill,
[data-theme="dark"] .stat-card {
    background-color: #111827 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-custom-header {
    background-color: #111827 !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .event-card-body,
[data-theme="dark"] .photo-card-body {
    background-color: #111827 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .guest-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .like-count {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .card-footer {
    background-color: #111827 !important;
    border-top: 1px solid #1e293b !important;
}

/* ── Stat Rows & Metrics ── */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-val {
    color: #f8fafc !important;
}
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-lbl {
    color: #94a3b8 !important;
}
[data-theme="dark"] .pricing-price {
    color: #f8fafc !important;
}
[data-theme="dark"] .feature-list li {
    color: #cbd5e1 !important;
}

/* ── Event Card Header Contrast ── */
[data-theme="dark"] .event-card-header {
    border-bottom: 1px solid #1e293b !important;
}

/* ── Auth Switch (Login / Register) ── */
[data-theme="dark"] .auth-switch {
    background-color: #0b111e !important;
    border: 1px solid #1e293b !important;
}
[data-theme="dark"] .auth-switch button {
    color: #94a3b8 !important;
}
[data-theme="dark"] .auth-switch button.active {
    background-color: #1e293b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ── Settings Navigation Items ── */
[data-theme="dark"] .settings-nav-item {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .settings-nav-item:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .settings-nav-item.active {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

/* ── Form Controls & Inputs ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .profile-input,
[data-theme="dark"] .code-input,
[data-theme="dark"] .search-pill-input,
[data-theme="dark"] .input-group-text {
    background-color: #0b111e !important;
    border-color: #2b384e !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .profile-input:focus,
[data-theme="dark"] .code-input:focus,
[data-theme="dark"] .search-pill-input:focus {
    background-color: #0e1626 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .profile-input::placeholder,
[data-theme="dark"] .code-input::placeholder,
[data-theme="dark"] .search-pill-input::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] .form-label {
    color: #cbd5e1 !important;
}

/* ── Tables ── */
[data-theme="dark"] .table,
[data-theme="dark"] .admin-table {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .table th,
[data-theme="dark"] .admin-table th {
    background-color: #161f30 !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #1e293b !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .admin-table td {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #1e293b !important;
}
[data-theme="dark"] .table tr:hover td,
[data-theme="dark"] .admin-table tr:hover td {
    background-color: #192336 !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #141c2c;
    color: #e2e8f0;
}

/* ── Modals & Dialogs ── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .profile-modal-content {
    background-color: #111827 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}
[data-theme="dark"] .modal-header {
    border-bottom: 1px solid #1e293b !important;
}
[data-theme="dark"] .modal-footer {
    border-top: 1px solid #1e293b !important;
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Buttons ── */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-slide {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-slide:hover {
    background-color: #273549 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary.active {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}
[data-theme="dark"] .like-btn {
    background: rgba(17, 24, 39, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid #1e293b !important;
}

/* ── Dropdown Menus & Profile Component ── */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .profile-menu-card {
    background-color: #111827 !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .dropdown-header {
    color: #64748b !important;
}
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .profile-menu-item {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .profile-menu-item:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] .dropdown-divider-soft {
    border-color: #1e293b !important;
}
[data-theme="dark"] .profile-card-header {
    background-color: #162032 !important;
    border: 1px solid #1e293b !important;
}
[data-theme="dark"] .menu-icon-circle {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .menu-icon-circle[style*="background: rgba(26, 86, 219"] {
    background: rgba(37, 99, 235, 0.25) !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .profile-menu-item:hover .menu-icon-circle {
    background: #2563eb !important;
    color: #ffffff !important;
}
[data-theme="dark"] .profile-menu-footer small {
    color: #64748b !important;
}
[data-theme="dark"] .avatar-arrow-badge {
    background: #1e293b !important;
    border-color: #0f172a !important;
    color: #cbd5e1 !important;
}

/* ── Utility Classes & Overrides ── */
[data-theme="dark"] .bg-white {
    background-color: #111827 !important;
}
[data-theme="dark"] .bg-light {
    background-color: #161f30 !important;
    border-color: #1e293b !important;
}
[data-theme="dark"] .text-dark {
    color: #f8fafc !important;
}
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}
[data-theme="dark"] .text-secondary {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .border {
    border-color: #1e293b !important;
}
[data-theme="dark"] .border-bottom {
    border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .border-top {
    border-top-color: #1e293b !important;
}

/* ── Badges ── */
[data-theme="dark"] .code-pill {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .badge.bg-light {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .bg-primary-subtle {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}
[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
[data-theme="dark"] .bg-info-subtle {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

/* ── Lists & Progress ── */
[data-theme="dark"] .list-group-item {
    background-color: #111827 !important;
    border-color: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .list-group-item.bg-light {
    background-color: #161f30 !important;
}
[data-theme="dark"] .progress {
    background-color: #1e293b !important;
}

/* ── Alerts ── */
[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #7dd3fc !important;
}

/* ── Landing Page Features Section Overlay ── */
[data-theme="dark"] .feature-section {
    background: rgba(15, 23, 42, 0.95) !important;
    border-top: 1px solid #1e293b !important;
}
[data-theme="dark"] .feature-icon-box {
    background: #1e293b !important;
    color: #60a5fa !important;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL MOBILE RESPONSIVE ENGINE (MOBILE-FIRST POLISH)
   Enhances small screens (< 768px and < 576px) across the system
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        font-size: 0.98rem;
    }

    h1, .h1 { font-size: 1.85rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.1rem; }

    /* Compact Mobile Buttons */
    .btn {
        padding: 10px 18px;
        font-size: 0.94rem;
    }

    .btn-sm {
        padding: 5px 12px !important;
        font-size: 0.78rem !important;
    }

    /* Cards & Spacing on Mobile */
    .card, .upload-card, .auth-card {
        border-radius: 16px;
    }

    /* Modals on Mobile */
    .modal-dialog {
        margin: 12px;
        max-width: calc(100% - 24px) !important;
    }

    .modal-content {
        border-radius: 18px !important;
    }

    .modal-header, .modal-footer {
        padding: 14px 18px !important;
    }

    .modal-body {
        padding: 16px 18px !important;
    }

    /* Smooth Momentum Touch Scrolling */
    .overflow-auto, 
    .table-responsive,
    .gallery-scroll-container,
    .mod-sidebar {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent awkward clipping on mobile tables */
    .table-responsive {
        border-radius: 12px;
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 0.94rem;
    }

    /* Ensure container gutters don't waste screen width on mobile */
    .container, .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    /* Big custom file upload scaled for thumb interaction */
    .custom-file-upload {
        font-size: 1.05rem !important;
        padding: 14px 18px !important;
    }

    /* Form inputs compact */
    .form-control, .form-select {
        padding: 10px 12px;
        font-size: 0.92rem;
    }

    /* Dropdown Menus fit inside viewport */
    .dropdown-menu {
        max-width: 92vw;
    }

    /* Mobile Theme Toggle Compact */
    .theme-toggle-btn {
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 0.8rem !important;
    }
}