/* ==========================================================================
   RESPONSIVE OVERRIDES — Mobile-First Architecture
   
   Base styles (in individual files) are MOBILE defaults.
   This file contains ONLY additional tweaks and refinements
   for specific breakpoint ranges.
   
   Breakpoints:
   - Default: 0px+ (mobile phones)
   - 481px+: Larger phones / small tablets
   - 801px+: Desktop (handled in component files)
   ========================================================================== */

/* ==========================================================================
   EXTRA SMALL PHONES (max-width: 360px)
   Fine-tune for very small screens like iPhone SE
   ========================================================================== */

@media (max-width: 360px) {
    .app-header {
        padding: 8px var(--spacing-sm);
    }

    .brand-logo {
        width: 34px;
        height: 34px;
    }

    .brand-name {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .brand-subtitle {
        font-size: 6px;
    }

    .header-right {
        gap: 4px;
    }

    .date-widget,
    .total-appointments-badge,
    .total-revenue-badge {
        padding: 5px 7px;
        min-height: 32px;
    }

    .date-text,
    #total-appt-count,
    #total-revenue-amount {
        font-size: 10px;
    }

    .calendar-icon,
    .people-icon,
    .revenue-icon {
        font-size: 13px !important;
    }

    .logout-widget-btn,
    .theme-toggle-btn {
        width: 32px;
        height: 32px;
    }

    .user-badge {
        padding: 4px 7px;
    }

    .user-badge-name {
        font-size: 10px;
    }

    .user-badge-role {
        font-size: 7px;
    }

    .mobile-tab {
        padding: 10px 14px;
        gap: 6px;
    }

    .mobile-tab-name {
        font-size: 12px;
    }

    .login-brand-logo {
        width: 80px;
        height: 80px;
    }

    .login-brand-name {
        font-size: 20px;
        letter-spacing: 3px;
    }
}

/* ==========================================================================
   MEDIUM PHONES & SMALL TABLETS (481px — 800px)
   Slightly more breathing room
   ========================================================================== */

@media (min-width: 481px) and (max-width: 800px) {
    .app-header {
        padding: 12px var(--spacing-lg);
    }

    .brand-logo {
        width: 48px;
        height: 48px;
    }

    .brand-name {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .brand-subtitle {
        font-size: 8px;
    }

    .date-widget,
    .total-appointments-badge,
    .total-revenue-badge {
        padding: 8px 12px;
    }

    .date-text,
    #total-appt-count,
    #total-revenue-amount {
        font-size: 13px;
    }

    .login-card {
        width: 380px;
        padding: 28px;
    }

    .login-brand-logo {
        width: 110px;
        height: 110px;
    }

    .login-brand-name {
        font-size: 26px;
        letter-spacing: 5px;
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE OVERRIDES
   When phone is held horizontally, shrink header even more
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .app-header {
        padding: 6px var(--spacing-md);
    }

    .brand-logo {
        width: 30px;
        height: 30px;
    }

    .brand-name {
        font-size: 14px;
    }

    .brand-subtitle {
        display: none;
    }

    .mobile-barber-selector {
        margin-bottom: 4px;
        padding: 4px var(--spacing-sm);
    }

    .mobile-tab {
        padding: 8px 14px;
        min-height: 36px;
    }

    .column-header {
        padding: 8px var(--spacing-md);
    }

    .barber-avatar {
        width: 30px;
        height: 30px;
    }

    .column-stats {
        padding: 4px var(--spacing-md) 6px var(--spacing-md);
    }

    /* Make slots scroll faster in landscape */
    .slots-container {
        padding-bottom: var(--spacing-md);
    }
}

/* ==========================================================================
   DARK THEME — MOBILE-SPECIFIC OVERRIDES
   (Dark theme desktop overrides are in their respective component files)
   ========================================================================== */

.dark-theme body {
    background-color: #000000 !important;
}

.dark-theme .app-header {
    background: rgba(0, 0, 0, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.dark-theme .brand-subtitle {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #A0A8B5 !important;
}

.dark-theme .date-widget {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-theme .date-text {
    color: #F5F6FA !important;
}

.dark-theme .empty-slot-btn {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.dark-theme .empty-slot-btn:active {
    background: rgba(230, 126, 34, 0.08) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

@media (min-width: 801px) {
    .dark-theme .empty-slot-btn:hover {
        background: rgba(230, 126, 34, 0.08) !important;
        border-color: var(--theme-primary) !important;
        color: var(--theme-primary) !important;
    }
}

.dark-theme .modal-card {
    background: #080808 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7) !important;
}

.dark-theme .modal-card::before {
    background: rgba(255, 255, 255, 0.15) !important;
}

@media (min-width: 801px) {
    .dark-theme .modal-card {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
    }
}

.dark-theme .modal-form label {
    color: #F5F6FA !important;
}

.dark-theme .input-wrapper input {
    background: #0D0D0D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F5F6FA !important;
}

.dark-theme .input-wrapper input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2) !important;
}

.dark-theme .input-wrapper select {
    background: #0D0D0D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F5F6FA !important;
}

.dark-theme .input-wrapper.select-wrapper::after {
    color: #A0A8B5 !important;
}

.dark-theme .btn-text {
    color: #A0A8B5 !important;
}

.dark-theme .btn-text:active,
.dark-theme .btn-text:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #F5F6FA !important;
}

.dark-theme .custom-slot-btn {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #F5F6FA !important;
}

.dark-theme .custom-slot-btn:active,
.dark-theme .custom-slot-btn:hover {
    background: rgba(230, 126, 34, 0.1) !important;
    border-color: var(--theme-primary) !important;
}

/* Dark Login */
.dark-theme .login-overlay {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.98) 100%),
                linear-gradient(-45deg, rgba(230, 126, 34, 0.06), rgba(108, 92, 231, 0.06), rgba(0, 184, 148, 0.06)) !important;
    background-size: 300% 300% !important;
}

.dark-theme .login-card {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(230, 126, 34, 0.06) !important;
}

.dark-theme .login-brand-name {
    color: #F5F6FA !important;
}

.dark-theme .login-brand-subtitle {
    color: #A0A8B5 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-theme .login-helper-prompt {
    background: rgba(230, 126, 34, 0.12) !important;
    color: var(--theme-primary) !important;
}

.dark-theme .login-form-group label {
    color: #F5F6FA !important;
}

.dark-theme .login-input-wrapper input {
    background-color: #0D0D0D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #F5F6FA !important;
}

.dark-theme .login-input-wrapper input::placeholder {
    color: #636E72 !important;
}

.dark-theme .login-input-wrapper input:focus {
    background-color: #0A0A0A !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2) !important;
}

.dark-theme .login-input-icon {
    color: #636E72 !important;
}

.dark-theme .login-error-msg {
    background-color: rgba(214, 48, 49, 0.12) !important;
    color: #FF7675 !important;
}

.dark-theme .login-error-msg .error-icon {
    color: #FF7675 !important;
}

.dark-theme .logout-widget-btn {
    background: rgba(255, 118, 117, 0.08) !important;
    border-color: rgba(255, 118, 117, 0.12) !important;
}