/* ========================================
   ServiceSeeker Mobile CSS
   Mobile-first responsive styles for optimal 
   user experience on phones and tablets
   ======================================== */

/* ========================================
   BASE MOBILE RESET & VARIABLES
   ======================================== */

:root {
    /* Touch-friendly spacing */
    --touch-target-min: 44px;
    --mobile-padding: 16px;
    --mobile-gap: 12px;
    
    /* Mobile breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
}

/* Improve touch targets for all interactive elements */
@media (max-width: 768px) {
    button,
    .btn,
    a.nav-link,
    input[type="submit"],
    input[type="button"],
    .clickable,
    .list-group-item-action,
    .dropdown-toggle,
    .nav-link {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    .btn-close {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }
}

/* ========================================
   TYPOGRAPHY - MOBILE SCALING
   ======================================== */

@media (max-width: 576px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    h4, h5, h6 {
        font-size: 1.1rem;
    }

    p, .body-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    .small, small {
        font-size: 0.875rem;
    }
}

/* ========================================
   LAYOUT - MOBILE CONTAINERS
   ======================================== */

@media (max-width: 576px) {
    .container,
    .container-fluid {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }

    .content {
        padding-top: 0.75rem;
        padding-bottom: 1rem;
    }

    /* Privacy and Terms: the page frame, the container and the card each added side
       padding, leaving ~247px of text on a 375px phone. The card has no visible edge
       here, so only the frame's padding and a small inset stay (~300px of text). !important because
       the card uses Bootstrap's p-4 utility, which is itself !important. */
    .legal-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .legal-page .card-body {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Stack columns on mobile */
@media (max-width: 576px) {
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
}

/* ========================================
   NAVIGATION - MOBILE MENU
   ======================================== */

@media (max-width: 768px) {
    /* Mobile header adjustments */
    .navbar,
    header {
        padding: 0.5rem var(--mobile-padding);
    }

    .navbar-brand {
        font-size: 1.25rem;
    }

    /* Mobile menu toggle */
    .navbar-toggler {
        border: none;
        padding: 0.5rem;
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    .navbar-toggler:focus {
        box-shadow: none;
        outline: 2px solid rgba(71, 104, 168, 0.5);
        outline-offset: 2px;
    }

    /* Full-width mobile nav menu */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 1050;
        padding: 1rem;
        overflow-y: auto;
    }

    .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-item {
        border-bottom: 1px solid #e9ecef;
    }

    .nav-link {
        padding: 1rem 0.5rem;
        font-size: 1.1rem;
    }
}

/* Mobile offcanvas menu */
@media (max-width: 768px) {
    .offcanvas {
        width: 85% !important;
        max-width: 320px;
    }

    .offcanvas-header {
        border-bottom: 1px solid #e9ecef;
    }

    .offcanvas-body {
        padding: 1rem;
    }

    .offcanvas .nav-link {
        padding: 0.875rem 0.5rem;
        border-radius: 8px;
        transition: background-color 0.2s;
    }

    .offcanvas .nav-link:hover,
    .offcanvas .nav-link:active {
        background-color: #f8f9fa;
    }
}

/* ========================================
   BUTTONS - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 576px) {
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        border-radius: 8px;
    }

    .btn-lg {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }

    /* WCAG 2.1 AA: Ensure minimum 44x44px touch target for small buttons */
    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    /* Full-width buttons on mobile */
    .btn-block-mobile {
        width: 100%;
        display: block;
    }

    /* Button groups stack on mobile */
    .btn-group-mobile {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-group-mobile .btn {
        width: 100%;
    }
}

/* Touch feedback for buttons */
@media (max-width: 768px) {
    .btn:active {
        transform: scale(0.98);
    }

    .btn-primary:active,
    .btn-success:active,
    .btn-danger:active {
        filter: brightness(0.9);
    }
}

/* Ensure touch targets meet WCAG 2.5.5 - 44x44px minimum */
@media (max-width: 768px) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Ensure icon buttons also meet touch target requirements */
    .btn-icon,
    .btn-outline-secondary.btn-sm,
    .btn-link.btn-sm {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ========================================
   FORMS - MOBILE FRIENDLY
   ======================================== */

@media (max-width: 576px) {
    .form-control,
    .form-select {
        padding: 0.875rem 1rem;
        font-size: 16px; /* Prevents iOS zoom on focus */
        border-radius: 8px;
    }

    .form-label {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .form-text {
        font-size: 0.85rem;
    }

    /* Floating labels adjustment */
    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.75rem + 2px);
        padding: 1.5rem 1rem 0.5rem;
    }

    .form-floating > label {
        padding: 1rem;
    }

    /* Stack form rows on mobile */
    .row.g-3 > [class*="col-"] {
        margin-bottom: 1rem;
    }

    /* Input groups: stack a field and its button on a phone... */
    .input-group {
        flex-wrap: wrap;
    }

    .input-group .form-control,
    .input-group .btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* ...except the show/hide password pair. The eye belongs beside the field;
       stacked, it became a full-width bar under it on Login and Register. */
    .input-group.password-field {
        flex-wrap: nowrap;
    }

    .input-group.password-field > .form-floating {
        flex: 1 1 auto;
        min-width: 0;
    }

    .input-group.password-field > .password-toggle {
        flex: 0 0 auto;
        width: auto;
    }
}

/* Checkbox and radio - larger touch targets */
@media (max-width: 768px) {
    .form-check {
        padding-left: 2rem;
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
    }

    /* The negative margin pairs with .form-check's padding above. Applied to a
       bare .form-check-input it pushed "Remember me" off the left edge. */
    .form-check .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0;
        margin-left: -2rem;
    }

    .form-check-label {
        padding-left: 0.5rem;
        line-height: var(--touch-target-min);
    }
}

/* ========================================
   CARDS - MOBILE LAYOUT
   ======================================== */

@media (max-width: 576px) {
    .card {
        border-radius: 12px;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .card-body {
        padding: 1rem;
    }

    .card-header,
    .card-footer {
        padding: 0.875rem 1rem;
    }

    .card-title {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    /* Full-bleed cards on mobile */
    .card-mobile-full {
        border-radius: 0;
        margin-left: calc(-1 * var(--mobile-padding));
        margin-right: calc(-1 * var(--mobile-padding));
        border-left: none;
        border-right: none;
    }
}

/* Card grid responsive */
@media (max-width: 768px) {
    .card-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .card-grid .card {
        width: 100%;
    }
}

/* ========================================
   MODALS - MOBILE FULL-SCREEN
   ======================================== */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
        border: none;
    }

    .modal-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
        border-radius: 0;
        padding: 1rem;
    }

    .btn-close {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }

    .modal-body {
        padding: 1rem;
        flex: 1;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 1rem;
        border-top: 1px solid #e9ecef;
    }

    .modal-footer .btn {
        flex: 1;
    }

    /* Slide-up animation for mobile modals */
    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }
}

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transform: none;
        transition: none;
    }
}

/* ========================================
   TABLES - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 576px) {
    /* Table scroll wrapper */
    .table-responsive {
        font-size: 0.9rem;
    }

    .table td,
    .table th {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }

    /* Card-style tables on mobile */
    .table-mobile-cards {
        border: none;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards tbody tr {
        display: block;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .table-mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border: none;
        white-space: normal;
    }

    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        margin-right: 1rem;
    }
}

/* ========================================
   LISTS - MOBILE STYLING
   ======================================== */

@media (max-width: 576px) {
    .list-group-item {
        padding: 1rem;
        border-left: none;
        border-right: none;
        border-radius: 0 !important;
    }

    .list-group {
        margin-left: calc(-1 * var(--mobile-padding));
        margin-right: calc(-1 * var(--mobile-padding));
        border-radius: 0;
    }

    .list-group-item:first-child {
        border-top: none;
    }

    /* Clickable list items */
    .list-group-item-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .list-group-item-action::after {
        content: "›";
        font-size: 1.5rem;
        color: #adb5bd;
    }
}

/* ========================================
   TABS & PILLS - MOBILE SCROLLABLE
   ======================================== */

@media (max-width: 576px) {
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }
}

/* ========================================
   ALERTS & NOTIFICATIONS - MOBILE
   ======================================== */

@media (max-width: 576px) {
    .alert {
        border-radius: 0;
        margin-left: calc(-1 * var(--mobile-padding));
        margin-right: calc(-1 * var(--mobile-padding));
        padding: 1rem var(--mobile-padding);
        border-left: none;
        border-right: none;
    }

    /* Toast notifications */
    .toast-container {
        bottom: 80px !important;
        left: var(--mobile-padding) !important;
        right: var(--mobile-padding) !important;
    }

    .toast {
        width: 100%;
        max-width: none;
    }
}

/* ========================================
   HERO SECTION - MOBILE
   ======================================== */

@media (max-width: 576px) {
    .hero-section,
    .hero {
        padding: 2rem var(--mobile-padding);
        min-height: auto;
    }

    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-cta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-cta .btn {
        width: 100%;
    }
}

/* ========================================
   DASHBOARD - MOBILE LAYOUT
   ======================================== */

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .dashboard-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card .stat-value {
        font-size: 1.5rem;
    }

    .stat-card .stat-label {
        font-size: 0.8rem;
    }
}

/* ========================================
   BOTTOM NAVIGATION BAR - MOBILE
   ======================================== */

/* Hidden by default. Every rule below used to live inside the max-width:768px
   query, which meant desktop had NO styles for this element at all — the nav
   rendered as a row of raw underlined links under the footer. */
.bottom-nav {
    display: none;
}

/* 640px, matching the sidebar's own breakpoint in MainLayout.razor.css. The bar
   used to show up to 768px while the desktop sidebar started at 641px, so both
   were on screen together between those widths; and the padding that clears the
   bar lived in a 576px query, so content sat behind it from 577px up. */
@media (max-width: 640px) {
    :root {
        --ss-bottomnav-h: 80px;
    }

    main {
        padding-bottom: var(--ss-bottomnav-h); /* clears the fixed bottom bar */
    }

    /* A page that already sizes itself to the viewport minus the bar must not
       also sit inside padding reserving room for it, or it scrolls by exactly
       the height of the bar. */
    main:has(.chat-page) {
        padding-bottom: 0;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--ss-bg-surface);
        border-top: 1px solid var(--ss-border);
        display: flex;
        justify-content: space-around;
        padding: 0.5rem;
        /* Keep the last row of content clear of the iOS home indicator. */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 1030;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    /* .bottom-nav-item sets display:flex, which would otherwise defeat the
       hidden attribute on the nav-mode slot that is not in use. */
    .bottom-nav-item[hidden] {
        display: none !important;
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        color: var(--ss-text-muted);
        text-decoration: none;
        min-width: 60px;
        min-height: 44px;
        transition: color 0.2s;
    }

    .bottom-nav-item.active {
        color: var(--ss-primary);
    }

    .bottom-nav-item i {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .bottom-nav-item span {
        font-size: 0.7rem;
        font-weight: 500;
    }
}

/* ========================================
   QUICK JOB CREATION - MOBILE
   ======================================== */

@media (max-width: 576px) {
    .quickjob-form {
        padding: 1rem;
    }

    .quickjob-stepper {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .quickjob-stepper .step {
        min-width: 80px;
        flex-shrink: 0;
    }

    .voice-input-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .ai-response-card {
        padding: 1rem;
        margin: 0 calc(-1 * var(--mobile-padding));
        border-radius: 0;
    }
}

/* ========================================
   PROVIDER CARDS - MOBILE
   ======================================== */

@media (max-width: 576px) {
    .provider-card {
        padding: 1rem;
    }

    .provider-card .provider-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .provider-card .provider-avatar {
        width: 48px;
        height: 48px;
    }

    .provider-card .provider-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }

    .provider-card .provider-actions .btn {
        flex: 1;
    }

    .provider-rating {
        font-size: 0.9rem;
    }
}

/* ========================================
   SEARCH RESULTS - MOBILE
   ======================================== */

@media (max-width: 576px) {
    .search-filters {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .search-filters .filter-btn {
        flex: 1 1 calc(50% - 0.25rem);
        text-align: center;
        padding: 0.625rem 0.5rem;
        font-size: 0.85rem;
    }

    .search-results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .search-result-item {
        padding: 1rem;
    }
}

/* ========================================
   PROFILE & SETTINGS - MOBILE
   ======================================== */

@media (max-width: 576px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
    }

    .profile-tabs {
        margin: 0 calc(-1 * var(--mobile-padding));
    }

    .settings-section {
        padding: 1rem;
        margin: 0 calc(-1 * var(--mobile-padding));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .settings-item {
        padding: 1rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* ========================================
   UTILITY CLASSES - MOBILE
   ======================================== */

@media (max-width: 576px) {
    /* Hide on mobile */
    .d-mobile-none {
        display: none !important;
    }

    /* Show only on mobile */
    .d-mobile-block {
        display: block !important;
    }

    .d-mobile-flex {
        display: flex !important;
    }

    /* Mobile-specific spacing */
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }

    .mt-mobile-3 {
        margin-top: 1rem !important;
    }

    .p-mobile-3 {
        padding: 1rem !important;
    }

    .px-mobile-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Full width on mobile */
    .w-mobile-100 {
        width: 100% !important;
    }

    /* Text alignment on mobile */
    .text-mobile-center {
        text-align: center !important;
    }

    .text-mobile-left {
        text-align: left !important;
    }
}

/* ========================================
   SAFE AREA INSETS (iPhone X+)
   ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }

    /* Only where the bar is actually on screen — this used to add 80px of dead
       space below every desktop page too. */
    @media (max-width: 640px) {
        main {
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
        }
    }

    .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

@supports (padding: env(safe-area-inset-top)) {
    .navbar,
    header {
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }
}

/* ========================================
   TOUCH OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .btn:hover,
    .card:hover,
    .list-group-item:hover {
        transform: none;
        box-shadow: inherit;
    }

    /* Add active state feedback instead */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .card:active,
    .list-group-item-action:active {
        background-color: #f8f9fa;
    }

    /* Disable text selection on buttons */
    button,
    .btn {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ========================================
   LANDSCAPE MOBILE ADJUSTMENTS
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        min-height: auto;
    }

    .hero-section {
        min-height: auto;
        padding: 1.5rem;
    }

    .bottom-nav {
        padding: 0.25rem;
    }

    .bottom-nav-item span {
        display: none;
    }
}

/* ========================================
   DARK MODE OVERRIDES FOR MOBILE ELEMENTS
   Fix hardcoded "background: white" that
   breaks dark mode on mobile viewports.
   ======================================== */

@media (max-width: 768px) {
    [data-bs-theme="dark"] .navbar-collapse {
        background: var(--ss-bg-surface, #1a2535);
    }

    [data-bs-theme="dark"] .nav-item {
        border-bottom-color: var(--ss-border, rgba(255, 255, 255, 0.1));
    }

    [data-bs-theme="dark"] .offcanvas-header {
        border-bottom-color: var(--ss-border, rgba(255, 255, 255, 0.1));
    }

    [data-bs-theme="dark"] .offcanvas .nav-link:hover,
    [data-bs-theme="dark"] .offcanvas .nav-link:active {
        background-color: var(--ss-bg-surface-secondary, #2b3035);
    }

    [data-bs-theme="dark"] .bottom-nav {
        background: var(--ss-bg-surface, #1a2535);
        border-top-color: var(--ss-border, rgba(255, 255, 255, 0.1));
    }
}

@media (max-width: 576px) {
    [data-bs-theme="dark"] .modal-header {
        background: var(--ss-bg-surface, #1a2535);
        border-bottom-color: var(--ss-border, rgba(255, 255, 255, 0.1));
    }

    [data-bs-theme="dark"] .modal-footer {
        background: var(--ss-bg-surface, #1a2535);
        border-top-color: var(--ss-border, rgba(255, 255, 255, 0.1));
    }

    [data-bs-theme="dark"] .table-mobile-cards tbody tr {
        background: var(--ss-bg-surface, #1a2535);
        border-color: var(--ss-border, rgba(255, 255, 255, 0.1));
    }

    [data-bs-theme="dark"] .table-mobile-cards tbody td::before {
        color: var(--ss-text-muted, #a8a8a8);
    }
}

/* ========================================
   PRINT STYLES - HIDE MOBILE ELEMENTS
   ======================================== */

@media print {
    .bottom-nav,
    .mobile-only,
    .offcanvas {
        display: none !important;
    }
}