/* Responsive Styles for Mobile (max-width: 768px) */
.admin-search-wrapper {
    max-width: 300px;
}

@media (max-width: 768px) {
    .top-header {
        height: 40px !important;
        padding: 0 8px !important;
    }
    #mainContent {
        padding-top: 40px !important;
    }
    .brand-wrapper {
        font-size: 11px !important;
        gap: 4px !important;
    }
    .brand-icon {
        height: 16px !important;
    }
    .module-title {
        font-size: 0.8rem !important;
        padding-left: 6px !important;
        margin-left: 2px !important;
    }
    #btnMobileNav {
        width: 30px !important;
        height: 30px !important;
    }
    #btnMobileNav svg {
        width: 16px !important;
        height: 16px !important;
    }
    .user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        touch-action: manipulation;
    }

    #mainContent > .container-fluid {
        overflow-x: hidden !important;
    }

    #reportTableSection {
        touch-action: auto !important;
    }

    .admin-search-wrapper {
        max-width: 100% !important;
    }
    .custom-report-table {
        font-size: 0.65rem !important; /* ~10.5px */
    }
    .custom-report-table th, 
    .custom-report-table td {
        padding: 0.2rem 0.3rem !important; /* ~3px top/bottom, 5px left/right */
        white-space: normal !important;
        word-break: break-word !important;
        vertical-align: middle !important;
    }
    /* Force the Group column to shrink tightly to its actual content */
    .custom-report-table th.is-tree-col,
    .custom-report-table td:first-child {
        width: 1% !important;
        white-space: nowrap !important;
    }
    .custom-report-table .group-header-row th,
    .custom-report-table .group-header-row td {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        font-size: 0.7rem !important;
        white-space: normal !important;
        width: auto !important;
    }
    .custom-report-table .group-summary-row td {
        padding: 0.25rem 0.3rem !important;
        font-size: 0.65rem !important;
        white-space: normal !important;
        width: auto !important;
    }
    .custom-report-table .group-summary-row td:first-child {
        white-space: nowrap !important;
    }

    /* Main containers padding reduction on mobile for more space */
    .setting-main {
        padding: 0.5rem !important;
    }
    #settingContentArea {
        padding: 0.75rem !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    #reportViewContent {
        padding: 0.5rem 0.25rem !important; /* Minimized horizontal padding */
    }
    #reportResultContainer, .table-responsive {
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Thin footer info strip at the very bottom, below bottom nav */
    .app-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: 24px !important;
        background: #1e293b !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #ffffff !important;
        padding: 0 12px !important;
        justify-content: center !important;
        z-index: 1600 !important;
    }

    .footer-left {
        width: 100% !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .footer-item {
        gap: 3px !important;
    }

    .footer-label {
        color: rgba(255, 255, 255, 0.45) !important;
        font-size: 9px !important;
        text-transform: capitalize !important;
    }

    .footer-value {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 9px !important;
        font-weight: 500 !important;
    }

    .footer-divider {
        height: 10px !important;
        opacity: 0.2 !important;
    }

    .footer-right {
        display: none !important;
    }

    #mainContent {
        padding-bottom: 84px !important; /* height of bottom nav (60px) + footer (24px) */
    }

    #mainContent .spa-container {
        padding-bottom: 0 !important;
    }

    /* Responsive User Column Configuration */
    .user-config-card-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0.75rem !important;
    }
    .ucfg-colkey {
        min-width: 100px !important;
        flex-grow: 1 !important;
        font-size: 0.85rem !important;
    }
    .ucfg-input {
        width: 100% !important;
        order: 10 !important; /* Move label input to own line */
    }
    .ucfg-badge {
        font-size: 0.65rem !important;
        padding: 1px 8px !important;
    }
    .user-config-card-body {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0.75rem !important;
    }
    .ucfg-section {
        min-width: 100% !important;
        width: 100% !important;
    }
    .ucfg-agg-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columns for aggregations */
        gap: 8px 12px !important;
    }
    .modal-dialog.modal-lg {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    /* Better spacing for report labels on mobile */
    .report-header-section {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        padding-right: 0 !important;
    }
    .report-header-section > div:first-child {
        flex: 1 1 auto !important;
        min-width: 150px !important;
    }
    .report-header-section > div:last-child {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
        max-width: fit-content !important;
        width: auto !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    #settingActiveState .report-header-section > div:last-child > div:first-child,
    #settingActiveState .d-flex.flex-wrap.gap-2.justify-content-end.w-100 {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0.25rem !important;
        justify-content: flex-end !important;
        width: auto !important;
    }
    #lblReportName {
        margin-bottom: 0 !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }
    #lblReportDesc {
        margin-top: 0.15rem !important;
        margin-bottom: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }
    #reportPrintMeta {
        margin-top: 0.15rem !important;
        margin-bottom: 0 !important;
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        gap: 0.25rem !important;
        flex-wrap: wrap !important;
    }
    .action-pill {
        margin-top: 0 !important;
        padding: 3px 6px !important;
        height: 28px !important;
    }
    .action-pill button {
        padding: 2px !important;
        margin: 0 1px !important;
    }
    .action-pill svg {
        width: 13px !important;
        height: 13px !important;
    }
    .action-pill .vr {
        height: 12px !important;
        margin: 0 2px !important;
    }
    .clear-all-wrapper {
        margin-top: 0 !important;
        padding-right: 0 !important;
        line-height: 1 !important;
        width: auto !important;
    }
    #btnResetFiltersInline {
        font-size: 0.7rem !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    #activeFiltersRow {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.15rem !important;
        padding: 4px 8px !important;
        margin-top: 2px !important;
        margin-bottom: 0.35rem !important;
        min-height: auto !important;
        border-radius: 6px !important;
    }
    #activeFiltersRow button[data-bs-toggle="collapse"] {
        font-size: 0.7rem !important;
        padding: 0 !important;
        background: transparent !important;
        color: #64748b !important;
    }
    #activeFiltersRow button[data-bs-toggle="collapse"] svg {
        width: 11px !important;
        height: 11px !important;
    }
    #lblAppliedFiltersCollapse {
        width: 100% !important;
    }
    #lblAppliedFilters {
        gap: 0.15rem !important;
        margin: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 2px !important;
    }
    .filter-chip {
        padding: 2px 6px !important;
        font-size: 0.68rem !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }

    /* Responsive Filter Popup - Centered Modal Style */
    #reportFilterPopup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 420px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 25px 80px rgba(0,0,0,0.3) !important;
        z-index: 2000 !important;
        padding: 1.5rem !important;
        animation: popupShow 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
    }
    .report-filter-area {
        min-width: 100% !important;
        max-height: 65vh !important;
        padding-right: 5px;
    }
    #reportFilterPopup .btn-close {
        padding: 1rem;
        margin: -1rem;
    }
}

/* Enable page scrolling on mobile for Admin Setting view */
@media (max-width: 768px) {
    #viewSetting, 
    #viewSetting .container-fluid,
    #viewSetting .flex-grow-1,
    #viewSetting .tab-content,
    #viewSetting .tab-pane,
    #viewSetting .row,
    #viewSetting .col-md-8,
    #viewSetting .card,
    #viewSetting .card-body {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    #viewSetting .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    /* Make query source input full-width and push buttons to next row on mobile */
    .query-input-group {
        flex-wrap: wrap !important;
    }
    .query-input-group #reportSourceField {
        width: 100% !important;
        flex: 0 0 100% !important;
        border-radius: 0.375rem !important;
        margin-bottom: 8px;
    }
    .query-input-group .btn {
        flex: 1 1 0% !important;
        width: auto !important;
        border-radius: 0.375rem !important;
        margin-left: 0 !important;
    }
    .query-input-group .btn + .btn {
        margin-left: 8px !important;
    }

    /* Modal config tables - prevent inputs & selects from squishing on mobile */
    #modalColumnTable .form-control,
    #modalColumnTable .form-select,
    #modalColumnTable .select2-container,
    #modalFilterTable .form-control,
    #modalFilterTable .form-select,
    #modalChartTable .form-control,
    #modalChartTable .form-select,
    #modalChartTable .select2-container {
        min-width: 100px;
    }

    /* Column Table specific sizes */
    #modalColumnTable .m-col-key {
        min-width: 140px !important;
    }
    #modalColumnTable .m-col-label {
        min-width: 150px !important;
    }
    #modalColumnTable .m-col-type {
        min-width: 110px !important;
    }
    #modalColumnTable .m-col-format {
        min-width: 120px !important;
    }
    #modalColumnTable .m-col-group {
        min-width: 90px !important;
    }
    #modalColumnTable .m-col-follow + .select2-container,
    #modalColumnTable .select2-container {
        min-width: 220px !important;
    }

    /* Filter Table specific sizes */
    #modalFilterTable .f-key {
        min-width: 140px !important;
    }
    #modalFilterTable .f-name {
        min-width: 150px !important;
    }
    #modalFilterTable .f-type {
        min-width: 110px !important;
    }
    #modalFilterTable .f-config-block .f-ds-type {
        min-width: 110px !important;
    }
    #modalFilterTable .f-config-block .f-ds-content {
        min-width: 250px !important;
    }
    #modalFilterTable .f-config-block .f-lbl-col,
    #modalFilterTable .f-config-block .f-val-col {
        min-width: 120px !important;
    }

    /* Chart Table specific sizes */
    #modalChartTable .m-chart-type {
        min-width: 110px !important;
    }
    #modalChartTable .m-chart-title {
        min-width: 160px !important;
    }
    #modalChartTable .m-chart-label {
        min-width: 140px !important;
    }
    #modalChartTable .m-chart-values + .select2-container,
    #modalChartTable .select2-container {
        min-width: 240px !important;
    }
    #modalChartTable .m-chart-width {
        min-width: 90px !important;
    }
    
    /* Preserve default checkbox sizing inside tables */
    #modalColumnTable .form-check-input,
    #modalFilterTable .form-check-input {
        min-width: auto !important;
    }
}



/* =====================================================
   DASHBOARD FILTER ROW (Date Picker & Cruise Row)
   ===================================================== */
.dashboard-filter-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.dashboard-date-picker-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-date-picker-wrapper .date-picker-container {
    width: 100%;
}

.dashboard-cruise-picker-wrapper {
    flex: 0 0 auto;
}

/* =====================================================
   MOBILE RESPONSIVE FIXES (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
    /* ── Bottom Nav: 5 items, tighter layout ── */
    .mobile-bottom-nav {
        padding: 0 2px;
    }

    .bottom-nav-item {
        font-size: 8px !important;
        padding: 4px 1px !important;
        gap: 2px !important;
        letter-spacing: 0 !important;
    }

    .bottom-nav-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ── Date Picker & Cruise Row: stack dọc trên mobile ── */
    .dashboard-filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .dashboard-cruise-picker-wrapper {
        width: 100% !important;
    }

    .dashboard-cruise-container {
        min-width: unset !important;
        width: 100% !important;
    }

    .dashboard-date-picker-wrapper {
        width: 100% !important;
        max-width: none !important;
    }

    .dashboard-date-picker-wrapper .date-picker-container {
        width: 100% !important;
        min-width: unset !important;
    }

    #dash-date-range-display {
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Dashboard container ── */
    .dashboard-container {
        padding: 10px 10px 0 !important;
        height: auto !important;
    }

    /* ── Summary column: dùng CSS Grid để header full-width, cards 2 cột ── */
    .summary-column {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 10px !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
    }

    /* Header span toàn bộ 2 cột */
    .summary-card-header {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 0 !important;
        padding: 4px 2px !important;
    }

    .summary-card-header .chart-cruise-select {
        max-width: 110px !important;
        font-size: 11px !important;
    }

    /* Cards chiếm 1 ô mỗi cái */
    .summary-card {
        flex: unset !important;
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
        padding: 14px !important;
        min-height: 90px !important;
    }

    .summary-card .value {
        font-size: 22px !important;
    }

    .summary-card .label {
        font-size: 11px !important;
    }

    /* ── Revenue section ── */
    .revenue-total {
        font-size: 26px !important;
    }

    /* ── Chart selects ── */
    .chart-cruise-select {
        max-width: 120px !important;
        font-size: 10px !important;
    }

    .dash-cruise-select {
        font-size: 13px !important;
        max-width: none !important;
    }
}

/* Very small screens (< 400px) */
@media (max-width: 400px) {
    /* 1 cột trên màn hình rất nhỏ */
    .summary-column {
        grid-template-columns: 1fr !important;
    }

    .bottom-nav-item {
        font-size: 7px !important;
        padding: 3px 0 !important;
    }

    .bottom-nav-item svg {
        width: 16px !important;
        height: 16px !important;
    }

    .dashboard-container {
        padding: 8px 8px 0 !important;
    }
}

/* =====================================================
   FIX: viewDashboard overflow-x trên mobile
   Ngăn kéo ngang (scroll ngang) trong dashboard view
   ===================================================== */
@media (max-width: 768px) {
    #viewDashboard {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    #viewDashboard .dashboard-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Các grid và card bên trong không được vượt quá parent */
    #viewDashboard .dashboard-grid,
    #viewDashboard .dashboard-grid-analytics {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #viewDashboard .large-card,
    #viewDashboard .summary-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Custom chart container */
    #customDashboardChartsContainer {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #customDashboardChartsContainer .chart-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ApexCharts thường gây ra overflow - ép về 100% */
    #viewDashboard .apexcharts-canvas,
    #viewDashboard .apexcharts-canvas svg {
        max-width: 100% !important;
    }

    /* Occupancy chart bars không tràn ra ngoài */
    #viewDashboard .occupancy-chart-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   FIX ROOT: spa-container và viewDashboard overflow-x
   ===================================================== */
@media (max-width: 768px) {
    /* Ngăn toàn bộ SPA container kéo ngang */
    .spa-container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* dashboard-container: bỏ overflow-y: auto, dùng scroll tự nhiên */
    #viewDashboard .dashboard-container {
        overflow: visible !important;
    }

    /* Chỉ cho viewDashboard scroll dọc, không scroll ngang */
    #viewDashboard {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* =====================================================
   FIX: Custom Dashboard Chart Cards - Outlet Revenue
   Bootstrap .row.g-4 margin âm bị clip bởi overflow-x: hidden
   ===================================================== */
@media (max-width: 768px) {
    /* Row gutter gây ra margin âm tràn ra ngoài khi overflow-x: hidden */
    #customDashboardChartsContainer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0 !important;
        padding: 0 !important;
    }

    #customDashboardChartsContainer > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Card bên trong chiếm full width */
    #customDashboardChartsContainer .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    /* Spacing giữa các chart cards */
    #customDashboardChartsContainer > [class*="col-"] + [class*="col-"] {
        margin-top: 12px !important;
    }
}

/* =====================================================
   FIX: dashboard-container padding trên mobile
   Bootstrap row có margin âm sẽ tràn qua padding 20px
   ===================================================== */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 12px !important;
        /* overflow-x đã được set hidden trong dashboard-v2.css */
    }
}