/* Global Reset for Overflow */
html, body {
    max-width: 100%;
    overflow-x: clip !important;
}

.app-container {
    max-width: 100vw;
    overflow-x: clip !important;
}

/* Tablet & Mobile Breakpoint <= 992px */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .novex-search-container {
        max-width: 220px;
    }
}

/* Mobile Breakpoint <= 768px */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -260px;
        height: 100vh;
        z-index: 10000;
    }

    .sidebar.open {
        transform: translateX(260px);
    }

    .main-content {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .content-area {
        padding: 15px 10px !important;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Topbar Responsiveness */
    .topbar {
        padding: 0 10px !important;
        height: 60px;
        gap: 5px;
    }
    .topbar-left {
        gap: 6px !important;
        overflow: visible !important;
        flex: 1;
        min-width: 0;
    }
    .app-brand {
        margin-right: 6px !important;
        padding-right: 6px !important;
        font-size: 0.95rem !important;
        gap: 6px !important;
    }
    .app-brand-name {
        display: inline-block;
        max-width: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mobile Topbar Navigation: Show 2-3 links inline without scrolling + '+' button */
    .app-nav-tabs {
        gap: 4px !important;
        display: flex !important;
        align-items: center !important;
    }
    .app-nav-inline {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }
    .app-nav-inline > *:nth-child(n+3) {
        display: none !important; /* Hide 3rd/4th+ items inline, accessible via + button */
    }
    .nav-tab-link, .nav-btn {
        padding: 4px 6px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }
    .nav-active-mobile-tag {
        display: none !important;
    }
    .nav-plus-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
    }
    /* Fixed Viewport Bounded Dropdown - Never cut off outside page */
    .nav-plus-dropdown {
        position: fixed !important;
        top: 62px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 10000 !important;
        margin-top: 0 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.85) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
    }

    .topbar-right {
        gap: 8px !important;
        flex-shrink: 0;
    }
    .user-profile span {
        display: none !important;
    }
    .user-profile img {
        width: 32px !important;
        height: 32px !important;
    }

    /* Novex Control Panel Mobile Stacking */
    .novex-control-panel {
        padding: 12px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .novex-cp-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .novex-cp-left {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .cp-title-buttons {
        width: 100% !important;
        margin-top: 4px !important;
        gap: 6px !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .cp-title-buttons .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
    .novex-cp-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .novex-search-container {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: calc(100% - 50px) !important;
        box-sizing: border-box !important;
    }
    .novex-search-input {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.85rem !important;
        padding-right: 10px !important;
        text-overflow: ellipsis !important;
    }
    .novex-view-switchers {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    .novex-breadcrumb {
        font-size: 1.2rem !important;
    }

    /* Kanban Grids and Cards */
    .kanban-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Car Wash Pipeline Mobile Scroll */
    .carwash-kanban-pipeline {
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px !important;
        width: 100% !important;
    }
    .kanban-stage-column {
        flex: 0 0 82vw !important;
        min-width: 250px !important;
        max-width: 82vw !important;
    }

    /* Action Toolbars, Counter Widgets & Add Buttons (All System-wide in 1 Line) */
    .carwash-action-bar,
    .action-toolbar-responsive {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Status Counters: All 4 In 1 Line Without Scrolling */
    .status-counters-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }
    .status-counters-row::-webkit-scrollbar {
        display: none;
    }
    .status-counter-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        font-size: 0.7rem !important;
        padding: 5px 2px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    .status-counter-badge strong {
        font-size: 0.75rem !important;
    }

    /* Action Buttons Row: Single Primary Button Width */
    .action-toolbar-buttons {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .action-toolbar-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        padding: 8px 12px !important;
    }

    /* Tables & Wrappers */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 15px;
    }
    .table {
        min-width: 500px;
    }

    /* Modals */
    .custom-modal-content {
        width: 95% !important;
        padding: 15px !important;
    }
}

/* Extra Small Screens <= 480px */
@media (max-width: 480px) {
    .content-area {
        padding: 10px 8px !important;
    }
    .app-brand-name {
        display: none !important;
    }
    .btn {
        padding: 0 10px !important;
        font-size: 0.8rem !important;
    }
}