/* Mobile-only overrides - all rules inside @media queries */
/* Desktop layout is NOT affected by this file */

/* Hide mobile-only elements on desktop */
.hamburger-btn,
.mobile-menu-overlay,
.mobile-menu-panel {
    display: none;
}

@media (max-width: 768px) {

    /* ================================
       Phase 0 - Foundation
       ================================ */

    body {
        overflow-x: hidden;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    .page-inner {
        max-width: 100vw;
        padding: 0 0.5rem;
    }

    .page-scroll {
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1 1 auto;
    }

    /* Allow mobile to scroll naturally */
    body.app-shell {
        overflow: auto;
    }

    .app-content {
        overflow: visible;
    }

    .details-photo-wrapper img {
        max-width: 100%;
        height: auto;
    }

    /* ================================
       Phase 1 - Hamburger menu
       ================================ */

    /* Hide desktop nav and user menu on mobile */
    .header-top {
        display: none;
    }

    .main-nav {
        display: none;
    }

    /* Show hamburger button */
    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        z-index: 2900;
        background: transparent !important;
        border: 1px solid #d1d5db !important;
        border-radius: 6px !important;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: #374151 !important;
    }

    .hamburger-btn svg {
        width: 22px;
        height: 22px;
        pointer-events: none;
    }

    .app-header-inner {
        position: relative;
        min-height: 48px;
    }

    /* Overlay behind panel */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2950;
    }

    .mobile-menu-overlay.open {
        display: block;
    }

    /* Slide-from-right panel */
    .mobile-menu-panel {
        position: fixed;
        top: 0;
        right: -280px;
        width: 270px;
        height: 100vh;
        background: #ffffff;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
        z-index: 3000;
        display: flex;
        flex-direction: column;
        padding: 0;
        transition: right 0.25s ease;
        overflow-y: auto;
    }

    .mobile-menu-panel.open {
        right: 0;
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
        font-size: 1rem;
    }

    .mobile-menu-close {
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        color: #6b7280 !important;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    .mobile-menu-close svg {
        width: 20px;
        height: 20px;
        pointer-events: none;
    }

    /* Nav pills in mobile menu */
    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0.75rem;
        gap: 0.35rem;
    }

    .mobile-menu-pill {
        display: block;
        padding: 0.5rem 0.75rem;
        border-radius: 9999px;
        border: 1px solid #d1d5db;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: #111827;
        background: #f9fafb;
        text-transform: uppercase;
        text-align: center;
        transition: background-color 0.15s ease;
    }

    .mobile-menu-pill:hover {
        background: #e5e7eb;
    }

    .mobile-menu-pill-active {
        background: #7B5300;
        border-color: #634000;
        color: #ffffff;
    }

    /* Menu items (account, settings, etc.) */
    .mobile-menu-item {
        display: block;
        padding: 0.45rem 0.75rem;
        text-decoration: none;
        font-size: 0.9rem;
        color: #374151;
        border-radius: 4px;
    }

    .mobile-menu-item:hover {
        background: #f3f4f6;
    }

    .mobile-menu-item-active {
        font-weight: 600;
        background: #f3f4f6;
    }

    .mobile-menu-item-logout {
        color: #dc2626;
    }

    .mobile-menu-divider {
        height: 1px;
        background: #e5e7eb;
        margin: 0.25rem 0.75rem;
    }


    /* ================================
       Phase 2 - Tab bars (vertical stack)
       ================================ */

    .page-tabs {
        flex-direction: column;
        gap: 0.25rem;
    }

    .page-tabs .page-tab {
        width: 100%;
        text-align: center;
    }

    /* details_pet tab bar */
    .tab-bar {
        flex-direction: column;
        gap: 0.25rem;
    }

    .tab-bar .page-tab {
        width: 100%;
        text-align: center;
    }

    /* Action buttons in tab bar stay horizontal */
    .tab-bar .icon-btn {
        width: auto;
    }


    /* ================================
       Phase 3 - Tables
       ================================ */

    /* Force card view on list pages - hide table view toggle */
    #viewToggleBtn {
        display: none;
    }


    /* Wrap all tables in horizontal scroll */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Keep table structure when scrolling */
    table thead,
    table tbody,
    table tr,
    table th,
    table td {
        white-space: nowrap;
    }

    /* Details page tables (details_pet, details_vet, details_species) - allow wrapping */
    #tabDetails table,
    #tabDetails table th,
    #tabDetails table td,
    .page-scroll > table,
    .page-scroll > table th,
    .page-scroll > table td {
        white-space: normal;
    }

    #tabDetails table {
        display: table;
    }

    /* Event list table in details_pet - horizontal scroll */
    #eventsContainer table {
        white-space: nowrap;
    }

    #eventsContainer table td,
    #eventsContainer table th {
        white-space: nowrap;
    }

    /* Health data table - horizontal scroll */
    #healthDataContainer table {
        white-space: nowrap;
    }

    /* Settings tables - horizontal scroll */
    #tabSystem table,
    #tabEmail table,
    #tabSubscriptions table,
    #tabHealth table,
    #tabEvents table {
        white-space: nowrap;
    }

    /* Bin tables - horizontal scroll */
    #binPets table,
    #binSpecies table,
    #binVets table,
    #binUsers table {
        white-space: nowrap;
    }


    /* ================================
       Phase 4 - Card grids (single column)
       ================================ */

    /* Pet cards */
    .pets-card-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    /* Species cards */
    .species-card-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    /* Vet cards */
    .vets-card-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    /* Card thumbnails - slightly smaller on mobile */
    .pet-card-thumb,
    .species-card-thumb,
    .vet-card-thumb {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }

    /* Index page - stat cards */
    .home-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .home-stat-card {
        width: 100%;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .home-stat-icon {
        margin-bottom: 0;
    }

    .home-stat-value {
        font-size: 1.2rem;
    }

    /* Index page - feature cards */
    .home-feature-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Index page - support cards */
    .home-support-grid {
        flex-direction: column;
        gap: 0.5rem;
    }

    .home-support-card {
        width: 100%;
        flex-direction: row;
        gap: 0.75rem;
        min-width: auto;
    }

    .home-support-logo {
        max-width: 80px;
        max-height: 50px;
    }


    /* ================================
       Phase 5 - Forms (stacked layout)
       ================================ */

    /* All inputs and selects full width */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Password wrapper full width */
    .password-field-wrapper {
        max-width: 100%;
        display: block;
        width: 100%;
    }

    /* Login form inputs */
    .login-container form input[type="text"],
    .login-container form input[type="password"] {
        max-width: 100%;
    }

    /* Login container */
    .login-container {
        max-width: 100%;
        margin: 1rem auto;
        padding: 0.75rem;
    }

    .login-container form button {
        margin-bottom: 0.3rem;
    }

    .login-container form div[style*="margin-top"] {
        text-align: center;
    }

    /* Login banner */
    .login-banner img {
        border-radius: 8px;
    }

    /* Register container */
    #registerContainer {
        max-width: 100%;
        padding: 0.75rem;
    }

    /* Reset container */
    #resetContainer {
        max-width: 100%;
        padding: 0.75rem;
    }

    /* Verify container */
    #verifyContainer {
        max-width: 100%;
        padding: 0.75rem;
    }

    /* Settings admin rows - already handled in styles.css @media 600px */
    /* Reinforce for 768px breakpoint */
    .admin-settings-label {
        width: 100% !important;
        text-align: left !important;
        margin-right: 0 !important;
        display: block !important;
        margin-bottom: 0.2rem;
    }

    .admin-settings-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-settings-input {
        width: 100%;
    }

    /* Form button rows - wrap */
    form div[style*="text-align:right"] {
        text-align: left !important;
    }

    /* Combo box full width */
    .combo-box {
        display: block;
        width: 100%;
    }

    .combo-box-input {
        width: 100%;
    }

    /* Add/edit pet - inline labels */
    .page-scroll label[style*="width:120px"],
    .page-scroll label[style*="width:160px"],
    .page-scroll label[style*="width: 120px"],
    .page-scroll label[style*="width: 160px"] {
        width: 100% !important;
        text-align: left !important;
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 0.2rem;
    }

    /* Modal form inputs full width */
    #eventFormInner input[type="text"],
    #eventFormInner select,
    #eventFormInner textarea,
    #healthFormInner input[type="text"],
    #healthFormInner input[type="number"],
    #healthFormInner select,
    #healthFormInner textarea,
    #eventTypeModal input[type="text"],
    #eventTypeModal select,
    #healthTypeModal input[type="text"],
    #healthTypeModal select,
    #healthConvModal input[type="text"] {
        width: 100%;
    }

    /* Flag select full width */
    .flag-select {
        display: block;
        width: 100%;
    }

    .flag-select-btn {
        width: 100%;
    }


    /* ================================
       Phase 6 - Page headers, filters, modals
       ================================ */

    /* Page headers */
    h1 {
        font-size: 1.2rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Page main header */
    .page-main-header h1 {
        font-size: 1.15rem;
    }

    /* Filter bars - stack vertically */
    .page-main-filters {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .page-main-filters form {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .page-main-filters input[type="text"],
    .page-main-filters select {
        width: 100%;
    }

    /* Pet filter form */
    #petFilterForm {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    #petFilterForm > div,
    #petFilterForm > span {
        width: 100%;
    }

    /* Vet filter form */
    #vetFilterForm {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    #vetFilterForm > div,
    #vetFilterForm > span {
        width: 100%;
    }

    /* Modals - full width, more padding */
    #confirmModal,
    #recoverModal,
    #testEmailModal {
        width: 95%;
        max-width: 100%;
    }

    /* Event/health form modals */
    #eventFormInner,
    #healthFormInner {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Settings modals */
    #eventTypeModal,
    #healthTypeModal,
    #healthConvModal {
        width: 95%;
        max-width: 100%;
    }

    /* Photo editor modal */
    #photoEditorModal {
        width: 100%;
        max-width: 100%;
    }

    #photoEditorFrameWrapper {
        max-width: 100%;
    }

    #photoEditorControls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    #photoEditorLeftControls,
    #photoEditorRightControls {
        justify-content: center;
    }

    /* Toast notifications - full width on mobile */
    #toast-container {
        right: 0.5rem;
        left: 0.5rem;
        top: 0.5rem;
    }

    .toast {
        max-width: 100%;
        min-width: auto;
        width: 100%;
    }

    /* Flash messages */
    .flash-message {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Unsaved changes banner */
    .unsaved-banner {
        left: 0.5rem;
        right: 0.5rem;
        transform: translateY(-150%);
        width: auto;
    }

    .unsaved-banner.visible {
        transform: translateY(0);
    }

    /* App content - tighter padding on mobile */
    .app-content {
        padding: 0.25rem 0.5rem 0.5rem;
    }

    /* Details pages - info table labels */
    #tabDetails th {
        min-width: 80px;
        font-size: 0.85rem;
    }

    /* Vet details - address/hours in compact layout */
    #tabDetails td div[style*="display:flex"] {
        flex-direction: column;
        gap: 0.4rem;
    }


    /* ================================
       Phase 7 - Tap targets, fonts, spacing
       ================================ */

    /* Minimum tap target for icon buttons */
    .icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Inputs and selects - touch-friendly height and font size */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select {
        min-height: 44px;
        font-size: 16px;
    }

    textarea {
        font-size: 16px;
    }

    /* Buttons - touch-friendly */
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 40px;
        font-size: 15px !important;
    }

    /* Checkboxes - larger tap area */
    input[type="checkbox"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Body font size */
    body {
        font-size: 15px;
    }

    /* Table cells - adequate spacing */
    th, td {
        padding: 0.4rem 0.5rem;
    }

    /* Card action buttons - larger gap */
    .pet-card-actions,
    .species-card-actions,
    .vet-card-actions {
        gap: 0.4rem;
    }

    /* Nav pills in header (if shown via other breakpoints) */
    .nav-pill {
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Page tabs - touch-friendly */
    .page-tab {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.9rem !important;
    }

    /* Health range buttons - larger tap area */
    .range-btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.8rem !important;
        min-height: 36px !important;
    }

    /* User menu items in mobile panel - adequate tap height */
    .mobile-menu-pill {
        padding: 0.6rem 0.75rem;
        font-size: 0.95rem;
    }

    .mobile-menu-item {
        padding: 0.55rem 0.75rem;
        font-size: 0.95rem;
    }

    /* Footer pills - larger tap area */
    .footer-pill {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }

    /* Elapsed text and small annotations */
    .elapsed {
        font-size: 0.85rem;
    }

    /* Photo preview - fit mobile width */
    .photo-preview {
        max-width: 100%;
    }

    /* Details photo - fit mobile width */
    .page-scroll img[style*="max-width:300px"] {
        max-width: 100% !important;
    }

    /* Chart container - shorter on mobile */
    #healthChartContainer {
        height: 220px;
    }

    /* Clickable rows - larger touch padding */
    .clickable-row td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Date picker - full width on mobile */
    .date-picker-popup {
        min-width: 260px;
        max-width: calc(100vw - 2rem);
    }


    /* Time picker - full width on mobile */
    .time-picker-popup {
        min-width: 100px;
        max-width: calc(100vw - 2rem);
    }

    /* Combo box dropdown - full width */
    .combo-box-dropdown {
        max-height: 200px;
    }


    /* ================================
       Login/Register pages - mobile fix
       ================================ */


    body.login-page {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        padding: 1rem 0.5rem 1rem;
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    /* Footer on login pages - not fixed, flows with content */
    body.login-page .page-footer,
    body.login-page .site-footer {
        position: static;
        z-index: auto;
    }

    .login-banner {
        margin-bottom: 0.5rem;
    }

    .login-banner img {
        width: 100%;
        height: auto;
    }

    /* Register container - full width, no overflow */
    body.login-page #registerContainer {
        max-width: 100%;
        padding: 0.75rem;
        margin: 0 auto;
    }

    body.login-page .login-container {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Buttons row - wrap on mobile */
    body.login-page form div[style*="margin-top:1em"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    body.login-page form div[style*="margin-top:1em"] button {
        flex: 1 1 auto;
    }
    
}