/**
 * Responsive Styles - All breakpoints centralized
 * File: assets/css/responsive.css
 * 
 * Breakpoints:
 * - Base: 0-479px (small mobile)
 * - SM: 480px-639px (large mobile)
 * - MD: 640px-767px (small tablet)
 * - LG: 768px-1023px (tablet/landscape)
 * - XL: 1024px+ (desktop)
 */

/* ========================================
   BASE STYLES (All screens)
   ======================================== */
body {
    overflow-x: hidden;
}

/* Tables - Horizontal scroll */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

table {
    min-width: 600px;
}

/* Touch improvements */
button,
.btn,
.button,
a.btn {
    -webkit-tap-highlight-color: rgba(107, 70, 193, 0.2);
}


/* ========================================
   SMALL MOBILE (max-width: 479px)
   ======================================== */
@media (max-width: 479px) {
    
    /* Typography */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
    
    .container {
        padding: 0 0.75rem;
    }
    
    /* Grids - Single column */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    
    .form-row-group {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    
    button + button,
    .btn + .btn {
        margin-top: 0.75rem;
    }
}


/* ========================================
   MOBILE (max-width: 640px)
   ======================================== */
@media (max-width: 640px) {
    
    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .container {
        padding: 0 1rem;
    }
    
    /* Grids */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .form-row-group {
        grid-template-columns: 1fr !important;
    }
    
    .radio-group {
        grid-template-columns: 1fr !important;
    }
    
    /* Cards */
    .card,
    .contractor-card,
    .job-card {
        margin-bottom: 1rem;
    }
    
    .contractor-card {
        flex-direction: column;
        text-align: center;
    }
    
    .contractor-card .contractor-logo {
        margin: 0 auto 1rem;
    }
    
    .contractor-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .contractor-actions .btn {
        width: 100%;
    }
    
    /* Business profile */
    .business-header {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
    }
    
    .business-logo {
        margin: 0 auto;
    }
    
    .business-meta {
        justify-content: center;
    }
    
    /* Dashboard */
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
    
    .stat-card {
        text-align: center;
    }
    
    /* Photo grids */
    .photo-grid,
    .photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }
    
    /* Filter bar */
    .filter-bar {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filter-bar select,
    .filter-bar input {
        width: 100%;
    }
    
    /* Job details */
    .job-details-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Links in text */
    p a {
        padding: 0.25rem 0;
        display: inline-block;
    }
}


/* ========================================
   MOBILE COMPONENTS (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    
    /* Buttons */
    .btn, .button {
        min-height: 48px;
        padding: 1rem 1.75rem;
        font-size: 1.05rem;
    }
    
    .btn-large, .button-large {
        min-height: 56px;
        padding: 1.25rem 2.25rem;
        font-size: 1.15rem;
    }
    
    /* Form elements */
    .form-row label {
        font-size: 1rem;
    }
    
    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row input[type="tel"],
    .form-row input[type="password"],
    .form-row input[type="number"],
    .form-row select,
    .form-row textarea {
        font-size: 1rem;
        padding: 0.875rem;
        min-height: 48px;
    }
    
    .form-row .helper,
    .form-row .error-msg {
        font-size: 0.95rem;
    }
    
    .checkbox-row label {
        font-size: 1rem;
    }
    
    .checkbox-row input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
    
    /* Alerts */
    .alert,
    .info-box {
        font-size: 1rem;
    }
    
    /* Badges */
    .badge {
        font-size: 0.8rem;
        padding: 0.375rem 0.625rem;
    }
    
    /* Dashboard alerts */
    .dashboard-alert {
        flex-direction: column;
        text-align: center;
        align-items: center;
        margin: 0 1rem 1rem;
        border-radius: 8px;
    }
    
    .dashboard-alert svg {
        margin-top: 0;
    }
    
    .alert-content strong {
        font-size: 1.1rem;
    }
    
    /* Feedback FAB */
    .ott-feedback-fab {
        bottom: 16px;
        left: 16px;
    }
    
    .ott-feedback-fab button {
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        min-height: auto;
        justify-content: center;
    }
    
    .ott-feedback-fab button span {
        display: none;
    }
}


/* ========================================
   MODAL RESPONSIVE (max-width: 640px)
   ======================================== */
@media (max-width: 640px) {
    
    /* Standard modals become bottom sheets */
    .ott-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    
    .ott-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        animation: slideUpMobile 0.3s ease-out;
    }
    
    .ott-modal-header {
        padding: 1rem 1.25rem;
    }
    
    .ott-modal-body {
        padding: 1.25rem;
    }
    
    .modal-footer {
        flex-direction: column-reverse;
        padding: 1rem 1.25rem;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Legacy modals */
    .modal-content,
    .modal {
        width: 95%;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
    
    /* Feedback modal */
    .ott-feedback-modal {
        width: 95%;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
        position: fixed;
        bottom: 0;
    }
    
    .ott-feedback-modal-header {
        padding: 16px 20px;
    }
    
    .ott-feedback-modal-body {
        padding: 20px;
    }
    
    .ott-feedback-actions {
        flex-direction: column-reverse;
    }
    
    .ott-feedback-actions button {
        width: 100%;
    }
    
    /* Tutorial modal */
    .tutorial-modal {
        width: 95%;
        max-width: none;
        margin: 0 auto;
    }
    
    .tutorial-modal.position-top,
    .tutorial-modal.position-bottom,
    .tutorial-modal.position-left,
    .tutorial-modal.position-right {
        left: 50% !important;
        transform: translateX(-50%);
        top: auto !important;
        bottom: 20px !important;
    }
    
    .tutorial-modal .tutorial-arrow {
        display: none;
    }
    
    .tutorial-footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .tutorial-steps {
        order: 2;
    }
    
    .tutorial-actions {
        order: 1;
        width: 100%;
        flex-direction: column;
    }
    
    .tutorial-btn {
        width: 100%;
        min-height: 48px;
    }
    
    .tutorial-voting-buttons {
        flex-direction: column;
    }
    
    .tutorial-vote-btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
    
    /* Photo manager modal */
    .photo-manager-modal.open {
        padding: 0;
        align-items: stretch;
    }
    
    .photo-manager-content {
        max-height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }
    
    .logo-preview-area {
        flex-direction: column;
        text-align: center;
    }
    
    .logo-info {
        align-items: center;
    }
    
    .shape-selector {
        flex-wrap: wrap;
    }
    
    .shape-option {
        flex: 1 1 calc(33% - 0.5rem);
        padding: 0.5rem;
    }
    
    .photos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .cropper-preview-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cropper-actions {
        text-align: center;
    }
    
    .cropper-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Before/After collages */
    .collage-panes {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .collage-swap-btn {
        transform: rotate(90deg);
    }
    
    .pane-dropzone {
        aspect-ratio: 16/9;
    }
    
    .ba-preview-slider {
        max-width: 100%;
    }
    
    /* Logo cropper modal */
    .logo-cropper-content {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .logo-cropper-footer {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    
    .logo-cropper-footer button {
        width: 100%;
        justify-content: center;
    }
}


/* ========================================
   TABLET (640px - 900px)
   ======================================== */
@media (min-width: 640px) and (max-width: 900px) {
    
    /* 2-column grids */
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Photo grid - 3 columns */
    .photo-grid,
    .photos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Dashboard stats - 2 columns */
    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Category selector */
    .selector-pane {
        padding: 1.5rem;
    }
    
    .category-search-input {
        font-size: 1.125rem;
    }
    
    .selector-item,
    .tier-option {
        padding: 1.25rem 1.5rem;
    }
}


/* ========================================
   MEDIUM (max-width: 900px)
   ======================================== */
@media (max-width: 900px) {
    
    /* Main grid */
    .main-grid {
        grid-template-columns: 1fr;
    }
    
    /* Sidebar layouts */
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        order: -1;
    }
    
    /* Business header */
    .business-header {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
    }
    
    /* CTA buttons */
    .cta-button {
        grid-column: 1 / -1;
    }
    
    /* Claim banner */
    .claim-banner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    /* Navigation */
    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    /* Tables */
    .responsive-table {
        display: block;
        overflow-x: auto;
    }
}


/* ========================================
   LANDSCAPE PHONE
   ======================================== */
@media (max-width: 900px) and (orientation: landscape) {
    
    .dashboard-header {
        padding: 1rem 0;
    }
    
    .modal-content,
    .ott-modal {
        max-height: 80vh;
    }
}


/* ========================================
   TABLET/DESKTOP (min-width: 768px)
   ======================================== */
@media (min-width: 768px) {
    
    .hide-desktop {
        display: none !important;
    }
    
    .hide-mobile {
        display: block !important;
    }
    
    .hide-mobile.flex {
        display: flex !important;
    }
    
    .hide-mobile.inline {
        display: inline !important;
    }
    
    .hide-mobile.inline-flex {
        display: inline-flex !important;
    }
    
    /* Dashboard alert spacing */
    .dashboard-alert {
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


/* ========================================
   DESKTOP (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    
    .container {
        padding: 0 2rem;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .photo-grid,
    .photos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ========================================
   CATEGORY SELECTOR (992px+)
   ======================================== */
@media (min-width: 992px) {
    .selector-layout {
        flex-direction: row;
        gap: 0;
    }
    
    .selector-pane {
        border-bottom: none;
        border-right: 2px solid var(--border-gray, #e2e8f0);
    }
    
    .selector-pane:last-child {
        border-right: none;
    }
    
    .selector-left {
        flex: 1;
        min-width: 0;
    }
    
    .selector-center {
        display: block;
        flex: 0 0 280px;
        background: #f7fafc;
    }
    
    .selector-right {
        flex: 0 0 280px;
    }
    
    [data-mode="single"] .selector-center {
        display: none;
    }
    
    [data-mode="single"] .selector-left {
        flex: 1;
    }
}

@media (min-width: 1200px) {
    .selector-left {
        flex: 1.5;
    }
    
    .selector-center,
    .selector-right {
        flex: 0 0 320px;
    }
}


/* ========================================
   VISIBILITY UTILITIES
   ======================================== */
.hide-mobile {
    display: none !important;
}


/* ========================================
   TOUCH-SPECIFIC
   ======================================== */
@media (hover: none) {
    button,
    .btn,
    .button {
        -webkit-user-select: none;
        user-select: none;
    }
}


/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    
    .btn,
    .button,
    nav,
    .filter-bar,
    .action-group,
    .ott-feedback-fab,
    .ott-modal-overlay,
    .modal-overlay {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
    }
    
    body {
        background: white;
        color: black;
    }
}


/* ========================================
   FAB RESPONSIVE (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    
    .ott-fab {
        bottom: 16px;
        left: 16px;
    }
    
    /* Always minimized on mobile */
    .ott-fab .ott-fab-btn {
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        min-height: auto;
        justify-content: center;
    }
    
    .ott-fab .ott-fab-btn span {
        display: none;
    }
    
    /* Modal adjustments */
    .ott-fab-modal {
        width: 95%;
        max-height: 85vh;
    }
    
    .ott-fab-form-row {
        grid-template-columns: 1fr;
    }
    
    .ott-fab-modal-footer {
        flex-direction: column;
        gap: 12px;
    }
    
    .ott-fab-link {
        order: 2;
    }
    
    .ott-fab-actions {
        width: 100%;
        order: 1;
    }
    
    .ott-fab-actions button,
    .ott-fab-btn-cancel,
    .ott-fab-btn-submit {
        flex: 1;
    }
}

/* ========================================
   TOAST RESPONSIVE (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    .ott-toast {
        min-width: 280px;
        max-width: calc(100vw - 40px);
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
    }

    .ott-toast--tr, .ott-toast--br {
        right: 10px;
    }

    .ott-toast--tl, .ott-toast--bl {
        left: 10px;
    }

    .ott-toast--tr, .ott-toast--tl {
        top: 10px;
    }

    .ott-toast--br, .ott-toast--bl {
        bottom: 10px;
    }

    .ott-toast-icon {
        width: 20px;
        height: 20px;
    }

    .ott-toast-close {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .ott-toast {
        min-width: 260px;
        padding: 0.875rem 1rem;
    }

    .ott-toast-message {
        font-size: 0.9375rem;
    }
}

/* ========================================
   LAYOUT RESPONSIVE
   ======================================== */

/* Hide business name on tablet */
@media (max-width: 1024px) {
    .contractor-business-name {
        display: none;
    }
    
    .main-navigation a:not(.btn) {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
    
    .nav-dropdown-toggle {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
    
    .site-tagline {
        display: none;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .btn-cta-primary,
    .btn-cta-secondary {
        margin: 0.5rem 1.5rem;
        padding: 1rem 1.5rem !important;
        min-height: 56px;
        font-size: 1.05rem;
        width: calc(100% - 3rem);
        justify-content: center;
    }
}

/* Phone - hamburger menu */
@media (max-width: 768px) {
    .site-logo-img {
        height: 50px;
    }
    
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85%;
        height: 100vh;
        background: white;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 5rem 0 2rem;
        transition: right 0.3s;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    
    .main-navigation.active {
        right: 0;
    }
    
    .main-navigation a:not(.btn) {
        padding: 1rem 1.5rem;
        border-radius: 0;
        font-size: 1rem;
    }
    
    .main-navigation a:not(.btn).active {
        background: #f7fafc;
        border-left: 4px solid var(--primary, #6b46c1);
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .mobile-auth-buttons {
        display: flex;
    }
    
    .user-menu {
        width: 100%;
    }
    
    .user-menu-toggle {
        width: calc(100% - 3rem);
        margin: 0 1.5rem;
        justify-content: flex-start;
    }
    
    .user-menu-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e2e8f0;
        border-radius: 0;
        margin-top: 0.5rem;
    }
    
    .nav-dropdown {
        width: 100%;
    }
    
    .nav-dropdown-toggle {
        width: calc(100% - 3rem);
        margin: 0 1.5rem;
        padding: 1rem 1.5rem;
        justify-content: space-between;
        border-radius: 0;
        font-size: 1rem;
    }
    
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e2e8f0;
        border-radius: 0;
        width: 100%;
        background: #f7fafc;
    }
    
    .nav-dropdown-menu a {
        padding: 1rem 2.5rem;
    }
    
    /* Content pages */
    .content-page {
        padding: 1.5rem 1rem;
    }
    
    .content-header h1 {
        font-size: 2rem;
    }
    
    .content-header .subtitle {
        font-size: 1.0625rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .content-grid-2,
    .content-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .hero-gradient {
        padding: 2.5rem 1.5rem;
    }
    
    .hero-gradient h1 {
        font-size: 1.75rem;
    }
    
    .hero-gradient p {
        font-size: 1.0625rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .header-container {
        padding: 0 1rem;
    }
    
    .site-logo-img {
        height: 38px;
    }
    
    .user-name {
        display: none;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .site-footer {
        margin-top: 2rem;
        padding: 2rem 0 1rem;
    }
    
    .footer-mission {
        font-size: 1rem;
    }
    
    .footer-column p {
        font-size: 1rem;
    }
    
    .footer-column ul li a {
        font-size: 1rem;
    }
    
    .footer-bottom {
        font-size: 0.95rem;
    }
}