/* ========================================
   Responsive Styles
   Mobile First Approach - Enhanced
   ======================================== */

/* CSS Variables for Responsive Design */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --min-touch-target: 44px;
    --mobile-padding: 1rem;
    --tablet-padding: 1.5rem;
    --desktop-padding: 2rem;
    --bottom-nav-height: 64px;
}

/* ========================================
   Bottom Navigation (Mobile Only)
   ======================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    padding-bottom: var(--safe-area-bottom);
    background: white;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.dark .bottom-nav {
    background: #1e293b;
    border-top-color: #374151;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    min-width: 64px;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0.75rem;
}

.dark .bottom-nav-item {
    color: #94a3b8;
}

.bottom-nav-item:active {
    transform: scale(0.95);
}

.bottom-nav-item.active {
    color: #0ea5e9;
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.1);
}

.bottom-nav-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.bottom-nav-label {
    font-size: 0.625rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

/* Hide bottom nav on desktop */
@media (min-width: 1024px) {
    .bottom-nav {
        display: none !important;
    }
}

/* Add padding to main content for bottom nav */
@media (max-width: 1023px) {
    #main-content {
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 1rem) !important;
    }
    
    /* Hide sidebar completely on mobile */
    .sidebar {
        display: none !important;
    }
    
    #sidebar-overlay {
        display: none !important;
    }
    
    /* Adjust toast position above bottom nav */
    #toast-container {
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 1rem) !important;
    }
}

/* ========================================
   Base Mobile Styles (< 640px)
   ======================================== */

/* Sidebar */
.sidebar {
    width: 280px;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

.sidebar.open {
    transform: translateX(0);
}

/* Ensure touch targets are at least 44px */
.nav-link,
.btn,
button,
.action-btn,
.settings-nav-item,
.admin-tab {
    min-height: var(--min-touch-target);
}

/* Smooth scrolling for horizontal scroll containers */
.settings-nav,
.admin-tabs,
.filter-section,
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/* Hide scrollbar but keep functionality */
.settings-nav::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar {
    height: 4px;
}

.settings-nav::-webkit-scrollbar-track,
.admin-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.settings-nav::-webkit-scrollbar-thumb,
.admin-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dark .settings-nav::-webkit-scrollbar-thumb,
.dark .admin-tabs::-webkit-scrollbar-thumb {
    background: #475569;
}

/* ========================================
   Topbar Responsive Overrides
   ======================================== */
@media (max-width: 767px) {
    .topbar-center {
        display: none;
    }
    
    .topbar-page-info {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .topbar-page-info {
        display: flex;
    }
}

/* ========================================
   Small Mobile (< 480px)
   ======================================== */
@media (max-width: 479px) {
    /* Typography scaling */
    html {
        font-size: 14px;
    }
    
    /* Reduce padding */
    .main-content {
        padding: 0.75rem !important;
        padding-bottom: calc(0.75rem + var(--safe-area-bottom)) !important;
    }
    
    /* Page header cards */
    .page-header-card,
    .page-header-card.service-gradient,
    .page-header-card.settings-gradient,
    .page-header-card.admin-gradient,
    .welcome-card {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 1rem;
    }
    
    .page-header-title,
    .welcome-name {
        font-size: 1.25rem;
    }
    
    .page-header-icon,
    .welcome-avatar {
        width: 44px;
        height: 44px;
    }
    
    .page-header-icon svg,
    .welcome-avatar svg {
        width: 20px;
        height: 20px;
    }
    
    /* Stats in header cards */
    .page-header-stats,
    .admin-header-stats {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .page-header-stat,
    .admin-header-stat {
        padding: 0.5rem 0.75rem;
        min-width: 55px;
    }
    
    .page-header-stat .stat-number,
    .admin-header-stat-value {
        font-size: 1rem;
    }
    
    .page-header-stat .stat-label,
    .admin-header-stat-label {
        font-size: 0.5625rem;
    }
    
    /* Cards */
    .card,
    .settings-card,
    .settings-section,
    .stat-card,
    .chart-card,
    .service-list,
    .recent-services-card {
        border-radius: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .settings-card-body,
    .settings-section-body {
        padding: 1rem;
    }
    
    /* Stats grid */
    .stats-grid {
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    /* Navigation tabs */
    .settings-nav,
    .admin-tabs {
        gap: 0.375rem;
        padding-bottom: 0.75rem;
        margin: 0 -0.75rem 1rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .settings-nav-item,
    .admin-tab {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Buttons */
    .btn,
    .page-header-btn,
    .backup-action-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Form inputs */
    .input,
    .select,
    .settings-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        padding: 0.75rem;
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: var(--min-touch-target);
    }
    
    /* Modal */
    .modal-content {
        width: calc(100% - 1rem);
        max-width: none;
        margin: 0.5rem;
        max-height: calc(100vh - 1rem - var(--safe-area-top) - var(--safe-area-bottom));
        border-radius: 1rem;
    }
    
    /* Service Form Modal - Full Screen on Mobile */
    .modal-content:has(.service-form-modal) {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    
    /* Backup section */
    .backup-overview-card {
        padding: 1rem;
        border-radius: 1rem;
    }
    
    .backup-overview-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .backup-overview-icon {
        width: 44px;
        height: 44px;
    }
    
    .backup-overview-info h3 {
        font-size: 1rem;
    }
    
    .backup-last-info {
        text-align: center;
        width: 100%;
    }
    
    .backup-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .backup-stat-item {
        padding: 0.75rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .backup-stat-value {
        font-size: 1.25rem;
    }
    
    .backup-action-card {
        padding: 1rem;
    }
    
    .backup-action-icon {
        width: 48px;
        height: 48px;
    }
    
    /* Theme selector */
    .theme-selector {
        grid-template-columns: 1fr;
    }
    
    .font-size-selector {
        flex-direction: column;
    }
    
    /* Toggle items */
    .settings-toggle-item {
        padding: 0.875rem 1rem;
    }
    
    .settings-toggle-icon {
        width: 36px;
        height: 36px;
    }
    
    /* Danger zone */
    .danger-zone-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .danger-zone-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Mobile (< 768px)
   ======================================== */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    .main-content {
        padding: var(--mobile-padding);
        padding-bottom: calc(var(--mobile-padding) + var(--safe-area-bottom));
    }
    
    /* Stat grid */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .chart-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Table responsive */
    .table-responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .table-responsive table {
        min-width: 600px;
    }
    
    /* Card mobile view */
    .card-mobile {
        display: block;
    }
    
    .table-desktop {
        display: none;
    }
    
    /* Form grid */
    .form-grid,
    .settings-form-grid {
        grid-template-columns: 1fr;
    }
    
    /* Modal */
    .modal-content {
        width: calc(100% - 2rem);
        max-width: none;
        margin: 1rem;
        max-height: calc(100vh - 2rem - var(--safe-area-top) - var(--safe-area-bottom));
    }
    
    /* Page header cards - stack vertically */
    .page-header-card,
    .page-header-card.service-gradient,
    .page-header-card.settings-gradient,
    .page-header-card.admin-gradient {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }
    
    .page-header-content {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    
    .page-header-stats,
    .admin-header-stats,
    .settings-header-info {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .page-header-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Welcome card */
    .welcome-card {
        padding: 1.25rem;
    }
    
    .welcome-content {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }
    
    .welcome-info {
        width: 100%;
    }
    
    .welcome-date {
        justify-content: center;
    }
    
    /* Backup actions grid */
    .backup-actions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Backup stats */
    .backup-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Import preview stats */
    .import-preview-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* User/Branch cards */
    .users-grid,
    .branches-grid {
        grid-template-columns: 1fr;
    }
    
    /* Service card actions */
    .service-card-actions {
        flex-wrap: wrap;
    }
    
    /* Recent service item */
    .recent-service-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .recent-service-right {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Navbar */
    header.sticky {
        padding-top: var(--safe-area-top);
    }
    
    /* Toast notifications - position at bottom on mobile */
    #toast-container {
        top: auto;
        bottom: calc(1rem + var(--safe-area-bottom));
        left: 1rem;
        right: 1rem;
    }
    
    /* Action buttons - ensure touch target */
    .action-btn {
        width: 40px;
        height: 40px;
    }
    
    /* Logo upload */
    .logo-upload-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .logo-upload-actions {
        justify-content: center;
    }
}

/* ========================================
   Tablet (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
    
    .main-content {
        padding: var(--tablet-padding);
    }
    
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .chart-grid,
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Collapsed sidebar */
    .sidebar {
        width: 80px;
    }
    
    .sidebar .nav-link span,
    .sidebar .logo-text,
    .sidebar .user-info {
        display: none;
    }
    
    .sidebar .nav-link {
        justify-content: center;
        padding: 0.75rem;
    }
    
    .sidebar .logo-container {
        justify-content: center;
    }
    
    .form-grid,
    .settings-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Adjust main content margin for collapsed sidebar */
    .flex-1.flex.flex-col.min-h-screen {
        margin-left: 80px;
    }
}

/* ========================================
   Desktop (>= 1024px)
   ======================================== */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
    
    .main-content {
        padding: var(--desktop-padding);
    }
    
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .chart-grid,
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar {
        transform: translateX(0) !important;
    }
    
    #sidebar-overlay {
        display: none !important;
    }
    
    .card-mobile {
        display: none;
    }
    
    .table-desktop {
        display: table;
    }
    
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   Large Desktop (>= 1280px)
   ======================================== */
@media (min-width: 1280px) {
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .chart-grid,
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .container-xl {
        max-width: 1280px;
        margin: 0 auto;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .nav-link,
    .btn,
    button:not(.toggle-switch-modern),
    .action-btn,
    .settings-nav-item,
    .admin-tab,
    .theme-option-card,
    .font-size-option {
        min-height: var(--min-touch-target);
    }
    
    /* Remove hover effects that don't work well on touch */
    .stat-card:hover,
    .user-card:hover,
    .branch-card:hover,
    .backup-action-card:hover,
    .recent-service-item:hover {
        transform: none;
    }
    
    /* Add active states instead */
    .stat-card:active,
    .user-card:active,
    .branch-card:active,
    .backup-action-card:active,
    .recent-service-item:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* Better tap feedback */
    .btn:active,
    button:active,
    .action-btn:active {
        transform: scale(0.95);
    }
}

/* ========================================
   Landscape Mobile
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        max-height: calc(100vh - 1rem);
        margin: 0.5rem;
    }
    
    .sidebar {
        padding-bottom: 60px;
    }
    
    /* Reduce vertical spacing */
    .page-header-card,
    .welcome-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .stats-grid {
        margin-bottom: 1rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .sidebar,
    .navbar,
    .no-print,
    #toast-container,
    #modal-container,
    header.sticky,
    #hamburger-btn,
    .page-header-btn,
    .action-btn {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .flex-1.flex.flex-col.min-h-screen {
        margin-left: 0 !important;
    }
    
    .card,
    .settings-card,
    .stat-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .page-header-card,
    .welcome-card {
        background: #f5f5f5 !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ========================================
   Accessibility - Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   Accessibility - High Contrast
   ======================================== */
@media (prefers-contrast: high) {
    .card,
    .settings-card,
    .stat-card {
        border-width: 2px;
    }
    
    .btn,
    button {
        border: 2px solid currentColor;
    }
    
    .input,
    .select,
    input,
    textarea,
    select {
        border-width: 2px;
    }
    
    .nav-link.active {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* ========================================
   Dark Mode Specific Responsive
   ======================================== */
@media (max-width: 767px) {
    .dark .table-responsive {
        background: #1e293b;
    }
    
    .dark #toast-container .toast {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* ========================================
   iOS Specific Fixes
   ======================================== */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS momentum scrolling */
    .sidebar,
    .modal-content,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px;
    }
    
    /* Safe area padding for notch devices */
    @media (max-width: 767px) {
        body {
            padding-left: var(--safe-area-left);
            padding-right: var(--safe-area-right);
        }
        
        .sidebar.open {
            padding-top: var(--safe-area-top);
        }
        
        header.sticky {
            padding-top: max(1rem, var(--safe-area-top));
            padding-left: max(1rem, var(--safe-area-left));
            padding-right: max(1rem, var(--safe-area-right));
        }
    }
}

/* ========================================
   Utility Classes for Responsive
   ======================================== */

/* Scroll indicator for horizontal scroll */
.scroll-indicator {
    position: relative;
}

.scroll-indicator::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-color, white));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-indicator.has-scroll::after {
    opacity: 1;
}

.dark .scroll-indicator::after {
    --bg-color: #1e293b;
}

/* Responsive text utilities */
.text-responsive {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.heading-responsive {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

/* Responsive spacing utilities */
.p-responsive {
    padding: clamp(0.75rem, 3vw, 1.5rem);
}

.gap-responsive {
    gap: clamp(0.5rem, 2vw, 1rem);
}

/* Stack on mobile utility */
@media (max-width: 640px) {
    .stack-mobile {
        flex-direction: column !important;
    }
    
    .stack-mobile > * {
        width: 100% !important;
    }
}

/* Full width on mobile */
@media (max-width: 767px) {
    .full-mobile {
        width: 100% !important;
        max-width: none !important;
    }
}