/* ============================================================================
   MINIMAL MOBILE CSS - COMPACT & CLEAN
   ============================================================================ */

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

/* Desktop overrides - ensure correct styling on larger screens */
@media (min-width: 769px) {
    .card-title {
        font-size: 1.75rem !important;
    }
    .card-header {
        margin-bottom: 1.5rem !important;
    }
}

@media (max-width: 768px) {

    /* Reset overflow issues */
    * {
        box-sizing: border-box;
    }

    body {
        padding-top: 0;
        background: #f5f7fa;
        overflow-x: hidden;
    }

    /* Main content - COMPACT with consistent padding, no top gap */
    .main-content {
        margin-left: 0 !important;
        padding: 8px 8px 20px 8px !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Hamburger button - FLOATING on RIGHT */
    .mobile-menu-toggle {
        display: flex !important;
        position: fixed;
        top: 12px;
        right: 12px;
        left: auto;
        z-index: 1001;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none !important;
        outline: none !important;
        border-radius: 10px;
        width: 44px;
        height: 44px;
        padding: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        align-items: center;
        justify-content: center;
    }

    .mobile-menu-toggle svg {
        width: 20px;
        height: 20px;
        color: white;
    }

    /* Overlay */
    .mobile-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .mobile-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Sidebar - COMPACT */
    .sidebar {
        position: fixed;
        left: 0 !important;
        top: 0 !important;
        width: 260px !important;
        max-width: 75vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1000;
        overflow-y: auto;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        border-radius: 0 16px 16px 0 !important;
    }

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

    /* Sidebar sections - COMPACT */
    .sidebar-logo {
        padding: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .sidebar-logo img {
        max-width: 100%;
        max-height: 40px;
    }

    .sidebar-user {
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .user-info-compact {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .user-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-role {
        font-size: 10px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 600;
    }

    .user-name {
        font-size: 13px;
        font-weight: 600;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropdown-arrow {
        color: rgba(255, 255, 255, 0.7);
        font-size: 10px;
    }

    /* Nav items - COMPACT */
    .nav-menu {
        padding: 6px 0;
    }

    /* Nav item group wrapper */
    .nav-item-group {
        margin: 0.15rem 0 !important;
    }

    /* Main nav items */
    .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        margin: 0.15rem 0 !important;
        color: rgba(255, 255, 255, 0.85);
        font-size: 13px;
        font-weight: 500;
        border-left: 3px solid transparent;
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .nav-item:active,
    .nav-item.active {
        background: rgba(255, 255, 255, 0.15);
        color: white;
        border-left-color: white;
    }

    /* Parent items (with submenus) */
    .nav-item-parent {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
    }

    .nav-item-parent .nav-arrow {
        margin-left: auto;
        font-size: 9px;
        transition: transform 0.2s ease;
    }

    .nav-item-parent.expanded .nav-arrow {
        transform: rotate(180deg);
    }

    .nav-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Submenu */
    .nav-submenu {
        max-height: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.1);
        transition: max-height 0.25s ease;
    }

    .nav-submenu.expanded {
        max-height: 800px;
    }

    /* Submenu items */
    .nav-subitem {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px 7px 36px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: all 0.15s ease;
    }

    .nav-subitem:active,
    .nav-subitem.active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-left-color: rgba(255, 255, 255, 0.5);
    }

    .nav-subitem .nav-icon {
        width: 14px;
        height: 14px;
    }

    /* Nested submenu parent */
    .nav-subitem-parent {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px 7px 36px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .nav-subitem-parent > div {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
    }

    .nav-subitem-parent .nav-arrow {
        margin-left: auto;
        font-size: 8px;
    }

    .nav-subitem-parent.expanded .nav-arrow {
        transform: rotate(180deg);
    }

    /* Nested submenu */
    .nav-nested-submenu {
        max-height: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.08);
        transition: max-height 0.25s ease;
    }

    .nav-nested-submenu.expanded {
        max-height: 500px;
    }

    /* Nested submenu items */
    .nav-nested-subitem {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px 6px 48px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .nav-nested-subitem:active,
    .nav-nested-subitem.active {
        background: rgba(255, 255, 255, 0.08);
        color: white;
    }

    .nav-nested-subitem .nav-icon {
        width: 12px;
        height: 12px;
    }

    .sidebar-bottom {
        margin-top: auto;
        padding: 0;
    }

    .sidebar-section-title {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 600;
        margin-bottom: 6px;
    }

    .sidebar-info-item {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.6);
        padding: 2px 0;
    }

    /* Page titles - COMPACT & CONSISTENT */
    .page-title,
    .modern-page-title,
    .card-title,
    h1,
    h2 {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #1a202c !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Override inline styles on page headers */
    h2[style*="font-size"],
    h1[style*="font-size"] {
        font-size: 24px !important;
    }

    .page-subtitle,
    .page-description {
        font-size: 13px !important;
        color: #64748b !important;
        margin: 0 0 12px 0 !important;
        line-height: 1.4 !important;
        word-wrap: break-word;
    }

    /* Card headers - reduce margin to equalize spacing with card padding */
    .card-header {
        margin-bottom: 16px !important;
    }

    .modern-section-header {
        margin-bottom: 16px !important;
    }

    .card-header .card-title,
    .modern-content-card .card-title,
    .modern-section-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        margin: 0 0 6px 0 !important;
    }

    .card-header .card-subtitle,
    .modern-content-card .card-subtitle {
        font-size: 13px !important;
        color: #64748b !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    /* Content sections - COMPACT */
    .content-section,
    .section-card,
    .card {
        background: white;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5e7eb;
    }

    /* Modern content cards - simplified for mobile with subtle rounded corners */
    .modern-content-card {
        border-radius: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Remove top margin from first content card to eliminate gap */
    .modern-content-card:first-child {
        margin-top: 0 !important;
    }

    .section-title {
        font-size: 16px;
        font-weight: 700;
        color: #1a202c;
        margin: 0 0 10px 0;
    }

    /* Forms - COMPACT */
    .form-group {
        margin-bottom: 12px;
    }

    .form-label,
    label {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 4px;
        display: block;
    }

    /* Inputs - COMPACT, NO OVERFLOW */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        color: #1a202c !important;
        background: white !important;
        border: 1px solid #d1d5db !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: none !important;
        border-color: #667eea !important;
    }

    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 16px !important;
        padding-right: 32px !important;
    }

    /* Buttons - COMPACT */
    .btn,
    button:not(.mobile-menu-toggle) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        min-height: 36px !important;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .button-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .button-group .btn {
        flex: 1;
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
    }

    .btn-secondary {
        background: white !important;
        color: #667eea !important;
        border: 1px solid #667eea !important;
    }

    .btn-success {
        background: #10b981 !important;
        color: white !important;
    }

    .btn-danger {
        background: #ef4444 !important;
        color: white !important;
    }

    .btn svg {
        width: 14px;
        height: 14px;
    }

    .button-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Tables - SIMPLE SCROLL */
    .table-container,
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 10px 0;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
    }

    .data-table {
        width: 100%;
        min-width: 500px;
        font-size: 12px;
        border-collapse: collapse;
        background: white;
    }

    .data-table th {
        padding: 8px;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        color: #374151;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .data-table td {
        padding: 8px;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    /* Service cards - COMPACT */
    .service-card,
    .tour-card {
        background: white;
        border-radius: 8px;
        padding: 0;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        overflow: hidden;
    }

    /* Tour card header - mobile layout */
    .tour-card-header {
        padding: 24px 24px 16px 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .tour-card-title-section {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 4px;
    }

    .tour-card-title-section h3 {
        line-height: 1.3;
        margin: 0;
        flex-shrink: 1;
    }

    .tour-id-badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .tour-card-badges {
        order: 3;
        align-self: flex-end;
    }

    .tour-card-badges > div {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: flex-end !important;
    }

    .tour-card-category {
        order: 4;
        font-size: 13px;
        color: #64748b;
        margin: 0;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
        text-align: left;
    }

    .service-card-header {
        padding: 12px;
        border-bottom: 1px solid #f3f4f6;
    }

    .service-card-title {
        font-size: 16px;
        font-weight: 700;
        color: #1a202c;
        margin: 0 0 4px 0;
        word-wrap: break-word;
    }

    .service-card-category {
        font-size: 12px;
        color: #64748b;
    }

    .service-card-body {
        padding: 12px;
    }

    .service-card-description {
        font-size: 13px;
        color: #4b5563;
        line-height: 1.5;
        margin-bottom: 10px;
        word-wrap: break-word;
    }

    .service-card-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 10px;
    }

    .service-detail-item {
        background: #f9fafb;
        padding: 8px;
        border-radius: 6px;
    }

    .service-detail-label {
        font-size: 10px;
        text-transform: uppercase;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .service-detail-value {
        font-size: 14px;
        font-weight: 700;
        color: #1a202c;
        word-wrap: break-word;
    }

    .service-card-actions {
        display: flex;
        gap: 6px;
        padding: 10px;
        background: #f9fafb;
        border-top: 1px solid #f3f4f6;
    }

    .service-card-actions .btn {
        flex: 1;
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    /* Filters - COMPACT */
    .filters-section {
        background: white;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
    }

    .filters-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .filters-row.compact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .filter-buttons {
        display: flex;
        gap: 6px;
        margin-top: 8px;
    }

    .filter-buttons .btn {
        flex: 1;
    }

    /* Calendar Page - OPTIMIZED */

    /* Calendar header card - consistent padding */
    #calendar .modern-content-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Remove extra spacing from calendar header wrapper */
    #calendar .modern-content-card > div:first-child {
        gap: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Calendar filters side by side */
    .calendar-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        width: 100%;
        margin-bottom: 0 !important;
    }

    .calendar-controls .filter-group {
        flex: 1;
        min-width: 0;
        margin-bottom: 0 !important;
    }

    .calendar-controls .filter-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px;
        color: #374151;
    }

    .calendar-controls .filter-group select {
        width: 100%;
        margin-bottom: 0 !important;
    }

    /* Expand calendar to full width with rounded corners and consistent padding */
    #calendar .content-section,
    #calendar .section-card {
        padding: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 8px !important;
    }

    .calendar-container,
    .calendar-wrapper,
    #calendar-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* Calendar navigation - COMPACT */
    .calendar-nav {
        padding: 8px !important;
        margin-bottom: 8px;
    }

    .nav-controls-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .nav-controls {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .nav-btn,
    .today-btn {
        padding: 6px 10px !important;
        min-height: 32px !important;
        font-size: 13px !important;
        border-radius: 6px;
    }

    .nav-btn {
        width: 32px;
        padding: 6px !important;
    }

    .month-year {
        font-size: 18px;
        font-weight: 700;
        color: #1a202c;
        text-align: center;
        flex: 1;
    }

    .view-toggles {
        display: flex;
        gap: 4px;
        background: #f3f4f6;
        padding: 3px;
        border-radius: 6px;
        width: 100%;
    }

    .view-btn {
        flex: 1;
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-height: 30px !important;
        background: transparent;
        border: none;
        border-radius: 4px;
        color: #6b7280;
        font-weight: 500;
    }

    .view-btn.active {
        background: white;
        color: #667eea;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    /* Calendar grid - FULL WIDTH */
    .calendar-grid,
    .calendar-body,
    table.calendar {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse;
    }

    .calendar-grid th,
    .calendar-grid td,
    table.calendar th,
    table.calendar td {
        font-size: 11px;
        padding: 4px 2px;
        text-align: center;
    }

    .calendar-grid th {
        font-size: 10px;
        font-weight: 700;
        color: #6b7280;
        padding: 6px 2px;
    }

    /* Calendar day cells */
    .calendar-day,
    .calendar-cell {
        min-height: 60px;
        font-size: 12px;
    }

    /* Stats cards - ENHANCED (Dashboard & Reports) */
    .stats-grid,
    #dashboard .stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    .stat-card,
    #dashboard .stat-card,
    .dashboard-stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px 16px;
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .stat-card-icon,
    #dashboard .stat-card-icon,
    .stat-icon {
        width: 64px;
        height: 64px;
        font-size: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .stat-card-value,
    #dashboard .stat-card-value,
    .stat-value {
        font-size: 32px;
        font-weight: 700;
    }

    /* ========================================
       CALENDAR LIST VIEW - MOBILE OPTIMIZED
       ======================================== */

    /* Calendar list view container */
    .calendar-grid.list-view {
        padding: 12px !important;
        max-height: calc(100vh - 240px) !important;
    }

    /* Date group sections */
    .list-date-group {
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
    }

    /* Date header with booking count */
    .list-date-header {
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
        border-bottom: 2px solid #e5e7eb !important;
    }

    .list-date-header h3 {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin: 0 !important;
    }

    .booking-count {
        padding: 3px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
    }

    /* Container for booking items */
    .list-bookings {
        gap: 10px !important;
    }

    /* Individual booking card - SINGLE COLUMN LAYOUT */
    .list-booking {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 8px !important;
        border-left: 3px solid #667eea !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    .list-booking:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* Time section - horizontal layout */
    .booking-time {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: unset !important;
        gap: 6px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .booking-time .time {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
    }

    .booking-time .duration {
        font-size: 0.85rem !important;
        color: #6b7280 !important;
    }

    /* Details section */
    .booking-details {
        flex: 1 !important;
    }

    .booking-title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #111827 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
    }

    .booking-customer,
    .booking-participants {
        font-size: 0.85rem !important;
        color: #6b7280 !important;
        margin: 3px 0 !important;
        line-height: 1.4 !important;
    }

    /* Status section - horizontal layout at bottom */
    .booking-status {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .status-badge {
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
    }

    .booking-ref {
        font-size: 0.75rem !important;
        color: #9ca3af !important;
        font-family: monospace !important;
    }

    /* ========================================
       CALENDAR DAY VIEW - TIME DISPLAY
       ======================================== */

    /* Day view time labels - stack time and AM/PM */
    .time-slot-label .time-display {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }

    .time-slot-label .time-value {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        line-height: 1 !important;
    }

    .time-slot-label .time-period {
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #6b7280 !important;
        line-height: 1 !important;
    }

    /* ========================================
       TOUR MAP CONTROLS - MOBILE
       ======================================== */

    /* Map control buttons - make them more compact on mobile */
    #mapControls {
        padding: 0.4rem !important;
        max-width: 140px !important;
    }

    #mapControls button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        min-height: 36px !important;
        height: auto !important;
        width: 100% !important;
    }

    #mapControls button svg {
        width: 12px !important;
        height: 12px !important;
        margin-right: 0.35rem !important;
    }

    /* Target the tour map container buttons specifically */
    #tourMapContainer #mapControls button.btn-primary,
    #tourMapContainer #mapControls button.btn-secondary {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.75rem !important;
        min-height: 34px !important;
    }

    /* ========================================
       WEEKLY SCHEDULE MODAL - MOBILE
       ======================================== */

    /* Weekly schedule modal body spacing */
    #weeklyScheduleModal .modal-body {
        padding: 16px !important;
    }

    /* Day schedule cards */
    #weeklyScheduleModal .weekly-schedule-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #weeklyScheduleModal .day-schedule-card {
        padding: 12px !important;
        border-radius: 8px !important;
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
    }

    #weeklyScheduleModal .day-header {
        margin-bottom: 10px !important;
    }

    #weeklyScheduleModal .day-name {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Time inputs - side by side on mobile */
    #weeklyScheduleModal .time-inputs {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
    }

    #weeklyScheduleModal .time-inputs .form-group {
        flex: 1 !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    #weeklyScheduleModal .time-inputs input {
        width: 100% !important;
    }

    #weeklyScheduleModal .time-inputs .form-group {
        margin-bottom: 0 !important;
    }

    #weeklyScheduleModal .time-inputs input,
    #weeklyScheduleModal .max-participants {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    /* Quick Actions section */
    #weeklyScheduleModal h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    /* Quick Actions buttons - 2 per row on mobile */
    #weeklyScheduleModal .modal-body > div:has(h4) + div {
        margin-top: 12px !important;
    }

    #weeklyScheduleModal .modal-body > div > div[style*="display: flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    #weeklyScheduleModal .modal-body > div > div[style*="display: flex"] .btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 38px !important;
        white-space: nowrap !important;
    }

    /* Modal footer buttons - stack vertically */
    #weeklyScheduleModal .modal-footer {
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #weeklyScheduleModal .modal-footer .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
        margin: 0 !important;
    }

    #weeklyScheduleModal .modal-footer .btn-secondary {
        order: 3 !important;
    }

    #weeklyScheduleModal .modal-footer .btn-primary {
        order: 2 !important;
    }

    #weeklyScheduleModal .modal-footer .btn-success {
        order: 1 !important;
    }

    /* ========================================
       VIEW SCHEDULES MODAL - MOBILE
       ======================================== */

    /* Modal uses customerModal ID */
    #customerModal .modal-body {
        padding: 16px !important;
    }

    /* Filters section - stack buttons vertically */
    #customerModal .filters {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    /* Top action buttons container */
    #customerModal .filters > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Add New Schedule and Generate buttons */
    #customerModal .filters .btn-success,
    #customerModal .filters .btn-primary {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }

    #customerModal .filters .btn-success svg,
    #customerModal .filters .btn-primary svg {
        margin-right: 0.5rem !important;
    }

    /* View toggle buttons - Calendar and List */
    #customerModal .filters > div:last-child {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #customerModal .filters #calendarViewBtn,
    #customerModal .filters #listViewBtn {
        flex: 1 !important;
        padding: 10px !important;
        font-size: 14px !important;
        min-height: 40px !important;
    }

    /* Schedule calendar navigation */
    #customerModal .calendar-nav,
    #customerModal .schedule-calendar .calendar-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 10px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    #customerModal .calendar-nav h3 {
        font-size: 18px !important;
        text-align: center !important;
        margin: 0 !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    #customerModal .calendar-nav button {
        padding: 10px !important;
        font-size: 14px !important;
        grid-row: 2 !important;
    }

    #customerModal .calendar-nav button:first-of-type {
        grid-column: 1 !important;
    }

    #customerModal .calendar-nav button:last-of-type {
        grid-column: 2 !important;
    }

    /* Calendar grid - optimize cell sizing */
    #customerModal .calendar-grid {
        gap: 4px !important;
        font-size: 12px !important;
    }

    #customerModal .calendar-header-cell {
        padding: 6px 2px !important;
        font-size: 11px !important;
    }

    #customerModal .calendar-cell {
        padding: 4px !important;
        min-height: 50px !important;
        font-size: 12px !important;
    }

    #customerModal .calendar-cell .day-number {
        font-size: 14px !important;
    }

    /* Schedule list view on mobile */
    #customerModal .schedule-list-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }

    #customerModal .schedule-list-item button {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    /* ========================================
       GENERATE FROM TEMPLATE MODAL - MOBILE
       ======================================== */

    /* Modal body spacing */
    #generateScheduleModal .modal-body {
        padding: 16px !important;
    }

    /* Info box styling */
    #generateScheduleModal .modal-body > div[style*="background: #e8f4fd"] {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }

    #generateScheduleModal .modal-body > div[style*="background: #e8f4fd"] p {
        font-size: 14px !important;
    }

    /* Form container - override desktop flexbox completely */
    #generateScheduleForm {
        display: block !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        row-gap: 0 !important;
        column-gap: 0 !important;
    }

    /* Date fields side by side on mobile */
    #generateScheduleForm .form-group:nth-child(1),
    #generateScheduleForm .form-group:nth-child(2) {
        display: inline-block !important;
        width: calc(50% - 8px) !important;
        margin-bottom: 12px !important;
        padding-right: 0 !important;
        vertical-align: top !important;
        float: left !important;
        flex: none !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    #generateScheduleForm .form-group:nth-child(1) {
        margin-right: 16px !important;
        margin-left: 0 !important;
    }

    #generateScheduleForm .form-group:nth-child(2) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Clear float after date fields */
    #generateScheduleForm .form-group:nth-child(3) {
        clear: both !important;
    }

    /* Labels and inputs */
    #generateScheduleForm .form-group label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    #generateScheduleForm .form-group input[type="date"] {
        padding: 10px !important;
        font-size: 14px !important;
        width: 100% !important;
    }

    /* Checkbox section */
    #generateScheduleForm .form-group:nth-child(3) {
        margin-top: 12px !important;
    }

    #generateScheduleForm .form-group:nth-child(3) label {
        font-size: 14px !important;
    }

    #generateScheduleForm .form-group:nth-child(3) small {
        font-size: 12px !important;
    }

    /* Warning box */
    #generateScheduleModal .modal-body form > div[style*="background: #fff3cd"] {
        padding: 12px !important;
        margin-top: 20px !important;
    }

    #generateScheduleModal .modal-body form > div[style*="background: #fff3cd"] p {
        font-size: 13px !important;
    }

    /* Modal footer buttons - stack vertically */
    #generateScheduleModal .modal-footer {
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #generateScheduleModal .modal-footer .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
        margin: 0 !important;
    }

    #generateScheduleModal .modal-footer .btn-secondary {
        order: 3 !important;
    }

    #generateScheduleModal .modal-footer .btn-primary {
        order: 2 !important;
    }

    #generateScheduleModal .modal-footer .btn-success {
        order: 1 !important;
    }

    .stat-card-label,
    #dashboard .stat-card-label,
    .stat-label {
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        margin: 0;
    }

    /* Dashboard specific stat cards */
    #dashboard .modern-content-card {
        padding: 16px !important;
    }

    /* Dashboard header - reduce bottom margin to match card spacing */
    .modern-dashboard-header {
        margin-bottom: 12px !important;
        padding: 16px !important;
    }

    /* Dashboard stats grid - consistent spacing */
    .modern-stats-grid {
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    /* ========================================
       ADVANCED SETTINGS PAGE - MOBILE
       ======================================== */

    /* Page header spacing */
    #advanced-settings .page-header {
        margin-bottom: 16px !important;
    }

    /* Section title spacing */
    #advanced-settings .section-title {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    #advanced-settings .modern-content-card > div[style*="margin-bottom: 1.5rem"] {
        margin-bottom: 12px !important;
    }

    /* API Key purple box - reduce padding */
    #advanced-settings div[style*="background: linear-gradient(135deg, #667eea"] {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }

    #advanced-settings div[style*="background: linear-gradient(135deg, #667eea"] h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    /* API Key display box */
    #advanced-settings div[style*="background: rgba(255,255,255,0.2)"] {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    #advanced-settings #apiKeyDisplay {
        font-size: 11px !important;
        word-break: break-all !important;
        line-height: 1.4 !important;
    }

    /* Copy button in API key box */
    #advanced-settings div[style*="background: rgba(255,255,255,0.2)"] button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Security message */
    #advanced-settings div[style*="background: linear-gradient(135deg, #667eea"] p {
        font-size: 12px !important;
        margin-top: 12px !important;
    }

    /* Quick Start and API Endpoint grid - single column */
    #advanced-settings div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    /* Quick Start and API Endpoint cards */
    #advanced-settings div[style*="background: #f8f9fa"] {
        padding: 16px !important;
        border-radius: 8px !important;
    }

    #advanced-settings div[style*="background: #f8f9fa"] h4 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    #advanced-settings div[style*="background: #f8f9fa"] p {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    #advanced-settings div[style*="background: #f8f9fa"] code {
        padding: 10px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* Bottom buttons - stack vertically */
    #advanced-settings div[style*="display: flex"][style*="gap: 1rem"] {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #advanced-settings div[style*="display: flex"][style*="gap: 1rem"] button {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
    }

    /* ========================================
       EMAIL LOGS PAGE - MOBILE
       ======================================== */

    /* Email logs content section - maintain normal padding */
    #email-logs .content-section {
        padding: 16px !important;
    }

    /* Section header - compact padding on mobile */
    #email-logs .section-header {
        margin-bottom: 16px !important;
        padding: 12px 0 !important;
    }

    /* Filter wrapper div - remove padding */
    #email-logs .content-section > div[style*="padding: 0 var(--spacing-lg)"] {
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Filters section - no padding on container */
    #email-logs .email-logs-filters {
        padding: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Filter row - wrapping flex layout with no left/right padding to align with header */
    #email-logs .filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Override inline grid style */
    #email-logs .filter-row[style*="display: grid"] {
        display: flex !important;
        grid-template-columns: unset !important;
    }

    /* Status and Template filters - side by side, 50% width each */
    #email-logs .filter-row .form-group:nth-child(1),
    #email-logs .filter-row .form-group:nth-child(2) {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Search Email - full width */
    #email-logs .filter-row .form-group:nth-child(3) {
        flex: 1 1 100% !important;
        margin: 0 !important;
    }

    /* Date Range - full width */
    #email-logs .filter-row .form-group:nth-child(4) {
        flex: 1 1 100% !important;
        margin: 0 !important;
    }

    #email-logs .filter-row .form-group {
        min-width: 0 !important;
    }

    #email-logs .filter-row .form-group label {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    #email-logs .filter-row .form-group .form-control {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    /* Date range inputs - side by side */
    #email-logs .date-range-inputs {
        display: flex !important;
        gap: 8px !important;
    }

    #email-logs .date-range-inputs input {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    /* Table container - add border and background like other tables */
    #email-logs .table-container {
        padding: 0 !important;
        overflow-x: auto !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* Email logs table - horizontal scroll with proper styling */
    #email-logs .data-table {
        min-width: 600px !important;
        font-size: 13px !important;
        border: none !important;
        margin: 0 !important;
    }

    #email-logs .data-table th,
    #email-logs .data-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    #email-logs .data-table thead th {
        background: #f9fafb !important;
        font-weight: 600 !important;
        color: #374151 !important;
        border-bottom: 2px solid #e5e7eb !important;
    }

    #email-logs .data-table tbody tr:last-child td {
        border-bottom: none !important;
    }

    #email-logs .data-table tbody tr:hover {
        background: #f9fafb !important;
    }

    /* General Settings page - consistent padding */
    #general-settings .content-section,
    #general-settings .section-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    #general-settings .section-header {
        margin-bottom: 16px !important;
    }

    #general-settings .page-header {
        margin-bottom: 16px !important;
    }

    /* Remove extra padding from inline styled divs in General Settings */
    #general-settings .content-section > div[style*="padding"] {
        padding: 0 !important;
    }

    #general-settings .table-container {
        padding: 12px !important;
    }

    /* Dashboard Quick Actions - 2 per row */
    .quick-actions-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .modern-action-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 16px 12px !important;
        min-height: 100px !important;
    }

    .action-icon {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .modern-action-btn span {
        font-size: 13px !important;
        text-align: center !important;
    }

    /* Modals - FULL SCREEN */
    .modal-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modal-header {
        padding: 14px 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modal-title {
        font-size: 18px;
        font-weight: 700;
        flex: 1;
    }

    /* Lighter close button */
    .modal-header .close,
    .modal-header button[onclick*="close"],
    .modal-close-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        opacity: 0.9 !important;
        border: none !important;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        min-height: 32px !important;
    }

    .modal-header .close:hover,
    .modal-header button[onclick*="close"]:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        opacity: 1 !important;
    }

    .modal-body {
        padding: 12px 16px;
    }

    /* Booking details modal - expand to match footer buttons */
    .modal-body > div[style*="background"] {
        padding: 12px !important;
        margin: 0 0 8px 0 !important;
        border-radius: 8px !important;
    }

    /* Add Customer Modal - improved spacing and buttons */
    #addCustomerModal .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    #addCustomerModal .form-grid {
        gap: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
    }

    #addCustomerModal .form-group {
        margin-bottom: 0 !important;
    }

    /* Button container in Add Customer modal */
    #addCustomerModal form > div[style*="display: flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding: 0 !important;
        justify-content: stretch !important;
    }

    #addCustomerModal form > div[style*="display: flex"] .btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
    }

    /* Edit Customer Modal - improved spacing and buttons */
    #editCustomerModal .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    #editCustomerModal .form-grid {
        gap: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
    }

    #editCustomerModal .form-group {
        margin-bottom: 0 !important;
    }

    /* Button container in Edit Customer modal */
    #editCustomerModal form > div[style*="display: flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding: 0 !important;
        justify-content: stretch !important;
    }

    #editCustomerModal form > div[style*="display: flex"] .btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
    }

    /* User Modal - mobile styling */
    #userModal .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    #userModal .form-grid {
        gap: 12px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
    }

    #userModal .form-group {
        margin-bottom: 0 !important;
    }

    #userModal #passwordSection {
        margin-top: 12px !important;
    }

    #userModal #passwordSection .form-group {
        margin-bottom: 12px !important;
    }

    /* Schedule New Report Modal - mobile styling */
    #newReportModal .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    #newReportModal .form-grid {
        gap: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
    }

    #newReportModal .form-group {
        margin-bottom: 0 !important;
    }

    /* Email Log Details Modal - mobile styling */
    #emailLogModal .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    #emailLogModal .detail-grid {
        display: block !important;
        padding: 0 !important;
    }

    #emailLogModal .detail-item {
        margin-bottom: 12px !important;
        padding: 12px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }

    #emailLogModal .detail-item:last-child {
        margin-bottom: 0 !important;
    }

    /* Customer Details Modal - mobile styling */
    #customerModal .modal-body {
        padding: 16px !important;
    }

    #customerModalBody .form-grid {
        display: block !important;
    }

    #customerModalBody .info-item {
        padding: 12px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Booking modal - match footer button alignment */
    #bookingModal .modal-body {
        padding: 16px !important;
    }

    /* Booking modal form grid - single column on mobile */
    #bookingModalBody .form-grid {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* First info-grid (Booking Reference + Status) - 2 columns */
    #bookingModalBody .form-grid > .info-grid:first-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Regular info items - edge to edge with minimal spacing */
    #bookingModalBody .info-item {
        padding: 12px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin: 0 0 8px 0 !important;
    }

    /* Provider assignment section - reduce internal padding */
    #bookingModalBody #providerAssignmentSection {
        padding: 10px !important;
    }

    /* Payment info row - stack vertically on mobile */
    #bookingModalBody .payment-info-row {
        display: block !important;
    }

    #bookingModalBody .payment-info-row .info-item {
        margin-bottom: 12px !important;
    }

    /* Full width items */
    #bookingModalBody .form-grid > .info-item[style*="grid-column"] {
        margin-bottom: 12px !important;
    }

    .modal-footer {
        padding: 12px;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
    }

    /* Booking modal actions - flex layout with buttons grouped right */
    .booking-modal-actions {
        display: flex !important;
        gap: 10px !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin: 12px !important;
        padding: 0 !important;
    }

    /* Resend button - auto width */
    .booking-modal-actions > .resend-btn,
    .booking-modal-actions > .btn-secondary {
        width: auto !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* Action buttons group - aligned right */
    .booking-modal-actions > .action-buttons-group {
        display: flex !important;
        gap: 10px !important;
    }

    /* Edit button - show text with icon */
    .action-buttons-group > .btn-warning {
        width: auto !important;
        height: 44px !important;
        min-width: 80px !important;
        max-width: none !important;
        padding: 10px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 15px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .action-buttons-group > .btn-warning svg {
        width: 18px !important;
        height: 18px !important;
        margin-right: 0 !important;
    }

    /* Delete button - icon only */
    .action-buttons-group > .btn-danger {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        flex: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important; /* Hide text */
    }

    .action-buttons-group > .btn-danger svg {
        margin-right: 0 !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* Fallback for old HTML structure if JS not loaded */
    #bookingModalBody > div[style*="margin-top"][style*="display: flex"] {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 10px !important;
        margin: 12px !important;
    }

    #bookingModalBody > div[style*="margin-top"] > .btn-secondary {
        grid-column: 1 !important;
        width: auto !important;
        padding: 10px 14px !important;
    }

    #bookingModalBody > div[style*="margin-top"] > div {
        grid-column: 3 !important;
        display: flex !important;
        gap: 10px !important;
    }

    #bookingModalBody .btn-warning,
    #bookingModalBody .btn-danger {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }

    /* Bookings page - consistent padding */
    #bookings .modern-content-card {
        padding: 16px !important;
    }

    /* Bulk actions - better mobile positioning */
    #bookings .modern-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    #bookings .bulk-actions-compact {
        flex-shrink: 0 !important;
    }

    /* Ensure hidden class works */
    #bookings .bulk-actions-compact.u-hidden {
        display: none !important;
    }

    /* Invoices page - bulk actions */
    #invoices .modern-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    #invoices .bulk-actions-compact {
        flex-shrink: 0 !important;
    }

    /* Ensure hidden class works */
    #invoices .bulk-actions-compact.u-hidden {
        display: none !important;
    }

    /* Customers page - bulk actions */
    #customers .modern-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    #customers .bulk-actions-compact {
        flex-shrink: 0 !important;
    }

    /* Ensure hidden class works */
    #customers .bulk-actions-compact.u-hidden {
        display: none !important;
    }

    #bookings .modern-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
    }

    #bookings .modern-filter-grid .form-group {
        margin-bottom: 0 !important;
    }

    /* Search and Status - HIDDEN on mobile */
    #bookings .modern-filter-grid > .form-group:nth-child(1) {
        display: none !important;
    }

    #bookings .modern-filter-grid > .form-group:nth-child(2) {
        display: none !important;
    }

    /* Search bar - hidden */
    #bookings .search-bar {
        display: none !important;
    }

    #bookings .search-input {
        display: none !important;
    }

    /* Date From and Date To - side by side in second row */
    #bookings .modern-filter-grid > .form-group:nth-child(3) {
        grid-column: 1 / 2 !important;
    }

    #bookings .modern-filter-grid > .form-group:nth-child(4) {
        grid-column: 2 / 3 !important;
    }

    /* Buttons container - use flex wrap */
    #bookings .modern-filter-grid > .form-group.u-flex {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* All three buttons side by side in one row */
    #bookings .modern-filter-grid > .form-group.u-flex .btn-primary,
    #bookings .modern-filter-grid > .form-group.u-flex .btn-secondary,
    #bookings .modern-filter-grid > .form-group.u-flex .btn-success {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        padding: 12px 6px !important;
        text-align: center !important;
    }

    /* Make sure date inputs fit */
    #bookings .modern-filter-grid input[type="date"] {
        width: 100% !important;
        font-size: 14px !important;
    }

    /* Services/Tours page - consistent padding */
    #tours .modern-content-card {
        padding: 16px !important;
    }

    #tours .modern-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
    }

    #tours .modern-filter-grid .form-group {
        margin-bottom: 0 !important;
    }

    /* Search - HIDDEN on mobile */
    #tours .modern-filter-grid > .form-group:nth-child(1) {
        display: none !important;
    }

    #tours .search-bar {
        display: none !important;
    }

    #tours .search-input {
        display: none !important;
    }

    /* Category and Status - side by side, second row */
    #tours .modern-filter-grid > .form-group:nth-child(2) {
        grid-column: 1 / 2 !important;
    }

    #tours .modern-filter-grid > .form-group:nth-child(3) {
        grid-column: 2 / 3 !important;
    }

    #tours .modern-filter-grid > .form-group:nth-child(2) select,
    #tours .modern-filter-grid > .form-group:nth-child(3) select {
        width: 100% !important;
        font-size: 13px !important;
    }

    /* Buttons - all three side by side in one row */
    #tours .modern-filter-grid > .form-group.u-flex {
        grid-column: 1 / -1 !important;
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* All three buttons equal width, taking full row */
    #tours .modern-filter-grid > .form-group.u-flex .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        padding: 10px 6px !important;
        white-space: nowrap !important;
    }

    /* Service detail cards - reduce side padding */
    #tours .service-card,
    #toursContainer .service-card {
        margin: 0 0 12px 0 !important;
        padding: 8px 6px !important;
    }

    /* Service info grid - 2 columns layout, full width */
    #tours .service-info,
    #tours .tour-info,
    #toursContainer .service-info,
    #toursContainer .tour-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Info items - aligned boxes, full width */
    #tours .info-item,
    #toursContainer .info-item {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #tours .info-label,
    #toursContainer .info-label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    #tours .info-value,
    #toursContainer .info-value {
        font-size: 18px !important;
    }

    /* Location takes full width (5th item) */
    #tours .info-item:nth-child(5),
    #toursContainer .info-item:nth-child(5) {
        grid-column: 1 / -1 !important;
    }

    /* Service action buttons container - override inline styles */
    #tours .service-info + div,
    #tours .tour-info + div,
    #toursContainer .service-info + div,
    #toursContainer .tour-info + div,
    #tours div[style*="margin-top: 1.5rem"],
    #toursContainer div[style*="margin-top: 1.5rem"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 12px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: initial !important;
    }

    /* All buttons in service cards */
    #tours .service-info + div button,
    #tours .tour-info + div button,
    #toursContainer .service-info + div button,
    #toursContainer .tour-info + div button,
    #tours div[style*="margin-top: 1.5rem"] button,
    #toursContainer div[style*="margin-top: 1.5rem"] button {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: 13px !important;
        padding: 12px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: none !important;
    }

    /* Weekly Schedule - left side row 1 */
    #tours .service-info + div button:nth-child(1),
    #tours .tour-info + div button:nth-child(1),
    #toursContainer .service-info + div button:nth-child(1),
    #toursContainer .tour-info + div button:nth-child(1),
    #tours div[style*="margin-top: 1.5rem"] button:nth-child(1),
    #toursContainer div[style*="margin-top: 1.5rem"] button:nth-child(1) {
        grid-column: 1 / 2 !important;
    }

    /* View Bookings - left side row 2 */
    #tours .service-info + div button:nth-child(2),
    #tours .tour-info + div button:nth-child(2),
    #toursContainer .service-info + div button:nth-child(2),
    #toursContainer .tour-info + div button:nth-child(2),
    #tours div[style*="margin-top: 1.5rem"] button:nth-child(2),
    #toursContainer div[style*="margin-top: 1.5rem"] button:nth-child(2) {
        grid-column: 1 / 2 !important;
    }

    /* Edit Service - right side row 1 */
    #tours .service-info + div button:nth-child(3),
    #tours .tour-info + div button:nth-child(3),
    #toursContainer .service-info + div button:nth-child(3),
    #toursContainer .tour-info + div button:nth-child(3),
    #tours div[style*="margin-top: 1.5rem"] button:nth-child(3),
    #toursContainer div[style*="margin-top: 1.5rem"] button:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }

    /* Delete Service - right side row 2 */
    #tours .service-info + div button:nth-child(4),
    #tours .tour-info + div button:nth-child(4),
    #toursContainer .service-info + div button:nth-child(4),
    #toursContainer .tour-info + div button:nth-child(4),
    #tours div[style*="margin-top: 1.5rem"] button:nth-child(4),
    #toursContainer div[style*="margin-top: 1.5rem"] button:nth-child(4) {
        grid-column: 2 / 3 !important;
    }

    /* Customers page - consistent padding */
    #customers .modern-content-card {
        padding: 16px !important;
    }

    #customers .card-header {
        margin-bottom: 16px !important;
    }

    #customers .u-flex.u-flex-gap-md {
        margin-bottom: 0 !important;
        gap: 16px !important;
    }

    #customers .form-group {
        margin-bottom: 0 !important;
    }

    /* Reports page - consistent padding */
    #reports .modern-content-card {
        padding: 16px !important;
    }

    #reports .modern-content-card > div:first-child {
        margin-bottom: 16px !important;
    }

    /* Invoices page - consistent padding */
    #invoices .modern-content-card {
        padding: 16px !important;
    }

    #reports .modern-filter-grid,
    #reports .modern-filter-grid[style] {
        margin-bottom: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #reports .modern-filter-grid .form-group {
        margin-bottom: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #reports .modern-filter-grid select,
    #reports .modern-filter-grid input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Report Period - left side first row */
    #reports .modern-filter-grid > .form-group:nth-child(1) {
        grid-column: 1 / 2 !important;
    }

    /* Date Based On - right side first row */
    #reports .modern-filter-grid > .form-group:nth-child(2) {
        grid-column: 2 / 3 !important;
    }

    /* Date From - left side second row */
    #reports .modern-filter-grid > .form-group:nth-child(3) {
        grid-column: 1 / 2 !important;
    }

    /* Date To - right side second row */
    #reports .modern-filter-grid > .form-group:nth-child(4) {
        grid-column: 2 / 3 !important;
    }

    /* Button container - full width third row */
    #reports .modern-filter-grid > .form-group:nth-child(5) {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #reports .modern-filter-grid > .form-group:nth-child(5) button {
        width: 100% !important;
        font-size: 13px !important;
        padding: 12px 8px !important;
        margin: 0 !important;
        flex: none !important;
    }

    /* Override inline styles on button container */
    #reports .modern-filter-grid > div[style*="display: flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Status badges - COMPACT */
    .status-badge,
    .badge {
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 10px;
        display: inline-block;
    }

    /* Prevent text overflow everywhere */
    h1, h2, h3, h4, h5, h6, p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Prevent horizontal scroll */
    body, html {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ========================================
       QR SCANNER PAGE - ACTION BUTTONS
       ======================================== */

    /* Override action buttons to stay inline and compact */
    .todays-bookings-section .action-buttons {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    /* Override .btn styles for QR scanner action buttons */
    .todays-bookings-section .action-buttons .btn {
        width: auto !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        flex: none !important;
        border: none !important;
    }

    /* Keep icon buttons compact and square */
    .todays-bookings-section .action-buttons .btn-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Reset btn-secondary colors for QR scanner - gray default */
    .todays-bookings-section .action-buttons .btn-secondary {
        background: #e5e7eb !important;
        color: #374151 !important;
        border: none !important;
    }

    /* Primary check-in button (pending status) */
    .todays-bookings-section .action-buttons .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: white !important;
    }

    /* Green tint for checked-in status buttons (matches inline styles from JS) */
    .todays-bookings-section .action-buttons .btn-secondary[style*="background: rgba(16, 185, 129"] {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #10b981 !important;
    }

    /* Red tint for no-show status buttons */
    .todays-bookings-section .action-buttons .btn-secondary[style*="background: rgba(239, 68, 68"] {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #ef4444 !important;
    }

    /* Payment button with green tint */
    .todays-bookings-section .action-buttons .btn-secondary[style*="background: rgba(16, 185, 129, 0.1)"] {
        background: rgba(16, 185, 129, 0.1) !important;
        color: #10b981 !important;
    }

    /* ========================================
       QUICK CHECK-IN MODAL - BUTTON LAYOUT
       ======================================== */

    #quickCheckInModalFooter {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    /* All buttons in the modal footer - base styles */
    #quickCheckInModalFooter .btn {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    /* Mark No Show (orange) - shares row with Cancel */
    #quickCheckInModalFooter .btn-warning {
        order: 2 !important;
        grid-column: auto !important;
    }

    /* Gray button (Revert to Pending) - full width top row */
    #quickCheckInModalFooter .btn[style*="background: #6b7280"] {
        grid-column: 1 / -1 !important;
        order: 1 !important;
    }

    /* Cancel button - shares row with Mark No Show */
    #quickCheckInModalFooter .btn-secondary {
        order: 3 !important;
        grid-column: auto !important;
    }

    /* Green Check In button - full width when present */
    #quickCheckInModalFooter .btn-primary[style*="background: #10b981"] {
        grid-column: 1 / -1 !important;
        order: 1 !important;
    }

    /* ========================================
       BOOKING MODAL - PROVIDER ASSIGNMENT
       ======================================== */

    /* Provider assignment form - dropdown and button side by side */
    #providerAssignmentForm > div[style*="display: flex"] {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* Provider dropdown - takes remaining space */
    #providerAssignmentForm select {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Assign button - auto width, just fits content */
    #providerAssignmentForm .btn-primary {
        width: auto !important;
        flex: none !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* Auto-Assign button - full width below */
    #providerAssignmentForm .btn[style*="background: #667eea"] {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .main-content {
        padding: 8px 8px 20px 8px !important;
    }

    .sidebar {
        width: 240px !important;
        max-width: 80vw !important;
    }

    .service-card-details {
        grid-template-columns: 1fr;
    }

    .filters-row.compact {
        grid-template-columns: 1fr;
    }

    /* ========================================
       MASS MAILING PAGE - MOBILE
       ======================================== */

    /* Mass Mailing - reduce top spacing of stats grid */
    #mass-mailing .stats-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Page header - reduce bottom margin */
    #mass-mailing .page-header {
        margin-bottom: 1rem !important;
    }

    /* Email Campaigns header - keep title and button inline */
    #mass-mailing .card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    #mass-mailing .card-header .section-title {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 20px !important;
        white-space: nowrap !important;
    }

    #mass-mailing .card-header button {
        flex: 0 0 auto !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    #mass-mailing .card-header button svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 6px !important;
    }

    /* ========================================
       USER MANAGEMENT PAGE - MOBILE
       ======================================== */

    /* Filter section container */
    #user-management .content-section > div:first-of-type {
        background: white !important;
        padding: 16px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }

    /* Filter row - flexible layout */
    #user-management .filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        grid-template-columns: unset !important;
        align-items: stretch !important;
    }

    /* Form groups - remove bottom margin, hide labels on mobile */
    #user-management .filter-row .form-group {
        margin-bottom: 0 !important;
    }

    #user-management .filter-row .form-group label {
        display: none !important;
    }

    /* Search input - full width */
    #user-management .filter-row .form-group:nth-child(1) {
        flex: 1 1 100% !important;
    }

    #user-management .filter-row input[type="text"] {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* Role and Status filters - side by side, 50% each */
    #user-management .filter-row .form-group:nth-child(2),
    #user-management .filter-row .form-group:nth-child(3) {
        flex: 1 1 calc(50% - 6px) !important;
    }

    /* Filter selects */
    #user-management .filter-row select {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* Clear Filters button - full width */
    #user-management .filter-row .form-group:nth-child(4) {
        flex: 1 1 100% !important;
    }

    #user-management .filter-row button[onclick*="clearFilters"] {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* Users table - add borders like Email Logs */
    #user-management .table-container {
        background: white !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        overflow-x: auto !important;
        margin-top: 16px !important;
    }

    #user-management .data-table {
        min-width: 600px !important;
        border: none !important;
        margin: 0 !important;
    }

    #user-management .data-table th,
    #user-management .data-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    #user-management .data-table thead th {
        background: #f9fafb !important;
        font-weight: 600 !important;
        color: #374151 !important;
        border-bottom: 2px solid #e5e7eb !important;
    }

    #user-management .data-table tbody tr:last-child td {
        border-bottom: none !important;
    }

    #user-management .data-table tbody tr:hover {
        background: #f9fafb !important;
    }

    /* ========================================
       EMAIL NOTIFICATIONS PAGE - MOBILE
       ======================================== */

    /* Email config grid - expand to full width */
    #email-notifications .email-config-grid {
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 20px !important;
    }

    #email-notifications .config-group {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Button row - stack vertically */
    #email-notifications .button-row,
    #email-notifications .content-section > div[style*="display: flex"][style*="gap"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    /* Buttons - full width */
    #email-notifications .button-row button,
    #email-notifications .content-section > div[style*="display: flex"] > button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
    }

    /* Form sections - tighter spacing */
    #email-notifications .form-section {
        margin-bottom: 20px !important;
    }

    #email-notifications .form-section h3 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Form groups - compact */
    #email-notifications .form-group {
        margin-bottom: 14px !important;
    }

    #email-notifications .form-group label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    #email-notifications .form-group input,
    #email-notifications .form-group select {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    /* SMTP Configuration - form-row keeps Port and Security side by side */
    #email-notifications .config-group .form-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    #email-notifications .config-group .form-row .form-group {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    #email-notifications .config-group .form-row input,
    #email-notifications .config-group .form-row select {
        width: 100% !important;
    }

    /* Override the general form-group rule for these specific fields */
    #email-notifications .form-row > .form-group:nth-child(1),
    #email-notifications .form-row > .form-group:nth-child(2) {
        margin-bottom: 0 !important;
    }

    /* Automatic Notifications - expand to full width */
    #email-notifications .notification-settings {
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #email-notifications .notification-item {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* ========================================
       COMPANY SETTINGS (GENERAL) - MOBILE
       ======================================== */

    /* Form grid - expand to full width */
    #general-settings .form-grid {
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 16px !important;
    }

    /* Save button - full width and sticky at bottom would be ideal but keeping simple */
    #general-settings .save-button,
    #general-settings button[onclick*="saveSettings"] {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
        margin-bottom: 16px !important;
    }

    /* Form field labels with icons - more compact */
    #general-settings .form-group label {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
    }

    #general-settings .form-group label svg {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }

    /* Form inputs - compact */
    #general-settings .form-group input,
    #general-settings .form-group select {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    /* Logo upload section - tighter border */
    #general-settings .upload-area,
    #general-settings div[style*="border: 2px dashed"] {
        padding: 24px 16px !important;
        margin: 12px 0 !important;
    }

    #general-settings .upload-area p {
        font-size: 14px !important;
    }

    /* Business hours section spacing */
    #general-settings .business-hours-section {
        margin-top: 16px !important;
    }

    /* ===== Assigned Providers Tab Mobile Styles ===== */
    #tourTabProviders .form-group > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    #tourTabProviders button[onclick*="assignProviderToTourFromModal"] {
        width: 100%;
        padding: 0.75rem 1rem !important;
    }

    #tourTabProviders label[style*="display: flex"][style*="cursor: pointer"] {
        justify-content: center !important;
        padding: 0.75rem !important;
    }

    #tourTabProviders select[id="tourModalProviderSelect"] {
        width: 100% !important;
    }

    /* Provider cards spacing on mobile */
    #tourAssignedProvidersList > div {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    #tourAssignedProvidersList > div > div[style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    #tourAssignedProvidersList button {
        width: 100% !important;
        padding: 0.625rem !important;
    }

    /* ============================================================================
       WEBSITE SETTINGS PAGE
       ============================================================================ */

    #website-settings .page-header,
    #website-settings .page-header[style] {
        display: block !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    #website-settings .page-header > div:first-child {
        margin-bottom: 12px !important;
    }

    #website-settings .page-header > div:last-child {
        display: flex !important;
        gap: 8px !important;
    }

    #website-settings .page-header > div:last-child button {
        flex: 1 !important;
    }

    #website-settings div[style*="grid-template-columns"] {
        display: block !important;
    }

    #website-settings div[style*="grid-template-columns"] > * {
        margin-bottom: 12px !important;
    }

    #website-settings .form-grid {
        display: block !important;
    }

    #website-settings .form-grid > * {
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       GALLERY MANAGEMENT PAGE
       ============================================================================ */

    #gallery-management .page-header,
    #gallery-management .page-header[style] {
        display: block !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    #gallery-management .page-header > div:first-child {
        margin-bottom: 12px !important;
    }

    #gallery-management .page-header > button {
        width: 100% !important;
    }

    #gallery-management .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    #gallery-management .stat-card {
        padding: 12px 8px !important;
    }

    #gallery-management .stat-label {
        font-size: 0.7rem !important;
    }

    #gallery-management .stat-value {
        font-size: 1.25rem !important;
    }

    /* ============================================================================
       REVIEWS MANAGEMENT PAGE
       ============================================================================ */

    /* Header card */
    #reviews-management .modern-content-card:first-of-type {
        padding: 16px !important;
    }

    #reviews-management .card-header {
        margin-bottom: 16px !important;
    }

    /* Filters grid - 2 columns */
    #reviews-management .modern-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #reviews-management .modern-filter-grid > .form-group {
        margin-bottom: 0 !important;
    }

    /* Tour/Service filter spans full width */
    #reviews-management .modern-filter-grid > .form-group:nth-child(3) {
        grid-column: span 2 !important;
    }

    /* Buttons row spans full width */
    #reviews-management .modern-filter-grid > .form-group[style*="display: flex"] {
        grid-column: span 2 !important;
        margin-top: 4px !important;
    }

    /* Stats grid - 2x2 layout */
    #reviews-management .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #reviews-management .stat-card {
        padding: 16px !important;
    }

    /* ============================================================================
       CONTACT SUBMISSIONS PAGE
       ============================================================================ */

    /* Header card with filters */
    #contact-submissions .modern-content-card:first-of-type {
        padding: 16px !important;
    }

    #contact-submissions .card-header {
        margin-bottom: 16px !important;
    }

    /* Filters row - stack vertically */
    #contact-submissions .modern-content-card > div[style*="display: flex"][style*="align-items: end"] {
        display: block !important;
    }

    /* Filters grid - 2 columns side by side */
    #contact-submissions div[style*="grid-template-columns: repeat(2"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #contact-submissions div[style*="grid-template-columns: repeat(2"] > .form-group {
        margin-bottom: 0 !important;
    }

    /* Action buttons */
    #contact-submissions .form-group[style*="display: flex"][style*="gap: 0.75rem"] {
        display: flex !important;
        gap: 8px !important;
        margin-top: 12px !important;
        margin-bottom: 0 !important;
    }

    #contact-submissions .form-group[style*="display: flex"][style*="gap: 0.75rem"] button {
        flex: 1 !important;
    }

    /* Stats grid - 2x2 layout */
    #contact-submissions .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #contact-submissions .stat-card {
        padding: 16px !important;
    }

    /* ============================================================================
       TRANSLATIONS MANAGEMENT PAGE
       ============================================================================ */

    #translations-management .page-header,
    #translations-management .page-header[style] {
        display: block !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    #translations-management .page-header > div:first-child {
        margin-bottom: 12px !important;
    }

    #translations-management .page-header > div:last-child {
        display: flex !important;
        gap: 8px !important;
    }

    #translations-management .page-header > div:last-child button {
        flex: 1 !important;
    }

    /* Tour Translations Cards */
    #translations-management .translation-item {
        display: block !important;
    }

    #translations-management .translation-item-info {
        margin-bottom: 12px !important;
    }

    #translations-management .translation-item-actions {
        display: flex !important;
        gap: 8px !important;
    }

    #translations-management .translation-item-actions button {
        flex: 1 !important;
    }

    /* ============================================================================
       ADVANCED SETTINGS PAGE
       ============================================================================ */

    /* Title section */
    #advanced-settings .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Sub-navigation tabs - horizontal scroll */
    #advanced-settings .sub-nav-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    #advanced-settings .sub-nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    #advanced-settings .sub-nav-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    #advanced-settings .sub-nav-tab svg {
        display: none !important;
    }

    /* ============================================================================
       SUPPORT TICKETS PAGE
       ============================================================================ */

    /* Header card */
    #support-tickets .modern-content-card:first-of-type {
        padding: 16px !important;
    }

    /* Title section */
    #support-tickets .modern-content-card > div:first-child {
        margin-bottom: 16px !important;
    }

    /* Filters row - stack vertically */
    #support-tickets div[style*="display: flex"][style*="align-items: end"] {
        display: block !important;
    }

    /* Filters grid - 2 columns */
    #support-tickets div[style*="grid-template-columns: repeat(4"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #support-tickets div[style*="grid-template-columns: repeat(4"] > .form-group {
        margin-bottom: 0 !important;
    }

    /* Action buttons */
    #support-tickets .form-group[style*="display: flex"][style*="gap: 0.75rem"] {
        display: flex !important;
        gap: 8px !important;
        margin-top: 12px !important;
        margin-bottom: 0 !important;
    }

    #support-tickets .form-group[style*="display: flex"][style*="gap: 0.75rem"] button {
        flex: 1 !important;
    }

    /* ============================================================================
       EMAIL LOGS PAGE
       ============================================================================ */

    /* Header card */
    #email-logs .modern-content-card:first-of-type {
        padding: 16px !important;
    }

    #email-logs .card-header {
        margin-bottom: 16px !important;
    }

    /* Filters grid - 2 columns */
    #email-logs .modern-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #email-logs .modern-filter-grid > .form-group {
        margin-bottom: 0 !important;
    }

    /* Search Email spans full width */
    #email-logs .modern-filter-grid > .form-group:nth-child(3) {
        grid-column: span 2 !important;
    }

    /* Date Range spans full width */
    #email-logs .modern-filter-grid > .form-group:nth-child(4) {
        grid-column: span 2 !important;
    }

    /* Buttons span full width */
    #email-logs .modern-filter-grid > .form-group:last-child {
        grid-column: span 2 !important;
        margin-top: 4px !important;
    }

    /* ============================================================================
       SCHEDULED REPORTS PAGE
       ============================================================================ */

    /* Title section */
    #scheduled-reports .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Test Reports section grid - stack vertically */
    #scheduled-reports .content-section div[style*="grid-template-columns: 2fr 1fr auto"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #scheduled-reports .content-section div[style*="grid-template-columns: 2fr 1fr auto"] > .form-group {
        margin-bottom: 0 !important;
    }

    /* Email field spans full width */
    #scheduled-reports .content-section div[style*="grid-template-columns: 2fr 1fr auto"] > .form-group:first-child {
        grid-column: span 2 !important;
    }

    /* Hide empty label on button */
    #scheduled-reports .content-section div[style*="grid-template-columns: 2fr 1fr auto"] > .form-group:last-child label {
        display: none !important;
    }

    /* ============================================================================
       SERVICE CATEGORIES PAGE
       ============================================================================ */

    /* Title section */
    #service-categories .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       SERVICE EXTRAS PAGE
       ============================================================================ */

    /* Title section */
    #service-extras .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       PICKUP LOCATIONS PAGE
       ============================================================================ */

    /* Title section */
    #pickup-locations .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       PRICING RULES PAGE
       ============================================================================ */

    /* Title section */
    #pricing-rules .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Pricing card header - stack title and button */
    #pricing-rules .pricing-card-header {
        display: block !important;
        padding: 16px !important;
    }

    #pricing-rules .pricing-card-header h3 {
        margin-bottom: 12px !important;
    }

    #pricing-rules .pricing-card-header .btn {
        width: 100% !important;
    }

    /* Description text */
    #pricing-rules .pricing-card > p[style*="padding: 0 2rem"] {
        padding: 0 16px !important;
    }

    /* Rule items - stack vertically */
    #pricing-rules .rule-item {
        display: block !important;
        padding: 12px 16px !important;
    }

    #pricing-rules .rule-item-info {
        margin-bottom: 12px !important;
    }

    #pricing-rules .rule-item-details {
        line-height: 1.6 !important;
    }

    #pricing-rules .rule-item-details .adjustment-badge {
        display: inline-block !important;
        margin: 4px 0 !important;
    }

    #pricing-rules .rule-item-actions {
        display: flex !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* Rules list padding */
    #pricing-rules .rules-list {
        padding: 0 16px 16px 16px !important;
    }

    /* ============================================================================
       EMAIL NOTIFICATIONS PAGE
       ============================================================================ */

    /* Title section */
    #email-notifications .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       MASS MAILING PAGE
       ============================================================================ */

    /* Title section */
    #mass-mailing .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Stats grid - 2x2 layout */
    #mass-mailing .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #mass-mailing .stat-card {
        padding: 16px !important;
    }

    /* ============================================================================
       SUBSCRIPTION SETTINGS PAGE
       ============================================================================ */

    /* Title section */
    #subscription-settings .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       GENERAL SETTINGS PAGE
       ============================================================================ */

    /* Title section */
    #general-settings .page-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ============================================================================
       USER MANAGEMENT PAGE
       ============================================================================ */

    /* Header card - override inline padding */
    #user-management .modern-content-card:first-of-type,
    #user-management .modern-content-card:first-of-type[style] {
        padding: 16px !important;
    }

    /* Card header - minimal spacing between title and filters */
    #user-management .card-header,
    #user-management .card-header[style],
    #user-management .card-header[style*="margin"] {
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    #user-management .card-subtitle {
        margin-bottom: 0 !important;
    }

    /* Filters grid - 2 columns */
    #user-management .filter-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #user-management .filter-row > .form-group {
        margin-bottom: 0 !important;
    }

    /* Hide all labels in filter row */
    #user-management .filter-row > .form-group label {
        display: none !important;
    }

    /* Search field spans full width */
    #user-management .filter-row > .form-group:first-child {
        grid-column: span 2 !important;
    }

    /* Clear filters button spans full width */
    #user-management .filter-row > .form-group:last-child {
        grid-column: span 2 !important;
    }

    #user-management .filter-row > .form-group:last-child button {
        width: 100% !important;
    }

    /* Users section header */
    #user-management .content-section .section-header {
        display: block !important;
        padding: 16px !important;
    }

    #user-management .content-section .section-header .section-title {
        margin-bottom: 12px !important;
    }

    #user-management .content-section .section-header .btn {
        width: 100% !important;
    }
}