/* ==========================================================================
   KANRO RESORT ERP - MASTER RESPONSIVE & DEVICE COMPATIBILITY SYSTEM
   Covers: Dashboard, Room & Event Booking, Expenses, Salary & Payroll, 
   Revenue Insights, Cashbook, Attendance, Inventory, Restaurant POS & Invoices.
   ========================================================================== */

/* Universal Fluid Utilities */
.cus_gk_w_100 { width: 100% !important; }
.cus_gk_no_wrap { white-space: nowrap !important; }
.cus_gk_break_word { word-break: break-word !important; }

/* Global Smooth Touch Scrolling */
.table-responsive,
.scrollable-x,
.cus_gk_mob_table_scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   1. LAPTOP & DESKTOP SCREENS (min-width: 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .cus_gk_lap_hide { display: none !important; }
    .cus_gk_lap_flex { display: flex !important; }
    .cus_gk_lap_table { display: table !important; }
    .cus_gk_lap_grid_4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .cus_gk_lap_grid_3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .cus_gk_lap_grid_2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .cus_gk_lap_text_end { text-align: right !important; }
    .cus_gk_lap_sticky_header th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #0f172a !important;
    }
}

/* --------------------------------------------------------------------------
   2. TABLET SCREENS (768px to 991.98px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-fluid, .content-page, .page-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .card {
        margin-bottom: 1rem !important;
    }
    .fs-4 { font-size: 1.25rem !important; }
    .fs-3 { font-size: 1.45rem !important; }
}

/* --------------------------------------------------------------------------
   3. MOBILE PHONES & SMALL TOUCH SCREENS (max-width: 991.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* ─── 3.0 TOP NAVBAR MOBILE PERFECTION ─────────────────────────────────── */
    .navbar.default-layout {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 8px !important;
        background: #0f172a !important;
        background-color: #0f172a !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    [data-theme="light"] .navbar.default-layout {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    .navbar.default-layout .navbar-brand-wrapper {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    }

    .navbar.default-layout .navbar-brand-wrapper .brand-logo {
        display: none !important;
    }

    .navbar.default-layout .navbar-brand-wrapper .brand-logo-mini {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .erp-brand-mini-badge {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
    }

    .navbar.default-layout .navbar-menu-wrapper {
        width: calc(100% - 42px) !important;
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 0 0 6px !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .navbar-welcome-box {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-right: 6px !important;
    }

    .erp-mob-welcome-title {
        color: var(--erp-text-primary, #ffffff) !important;
        letter-spacing: -0.2px;
    }

    [data-theme="light"] .erp-mob-welcome-title {
        color: #0f172a !important;
    }

    .navbar-menu-wrapper .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .theme-switch-btn {
        padding: 0 !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .theme-switch-btn .theme-label {
        display: none !important;
    }

    .navbar-menu-wrapper .nav-item .nav-link {
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar-menu-wrapper .count-indicator {
        position: relative !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: var(--erp-text-primary) !important;
        font-size: 16px !important;
    }

    .user-dropdown .img-xs {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1.5px solid #38bdf8 !important;
    }

    .navbar-toggler-right {
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-left: 2px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        color: var(--erp-text-primary) !important;
        flex-shrink: 0 !important;
    }

    .navbar-toggler-right span {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* Proper Main Content Offset so Navbar NEVER overlaps page contents */
    .container-scroller {
        overflow-x: hidden !important;
    }
    .page-body-wrapper,
    div.container-fluid.page-body-wrapper {
        padding-top: 76px !important;
    }
    .main-panel {
        padding-top: 0 !important;
        width: 100% !important;
    }
    .content-wrapper {
        padding: 14px 10px 35px 10px !important;
    }
}

@media (max-width: 767.98px) {
    /* Prevent unwanted horizontal viewport overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    .page-body-wrapper,
    div.container-fluid.page-body-wrapper {
        padding-top: 76px !important;
    }

    .container-fluid:not(.page-body-wrapper), 
    .content-page, 
    .main-content, 
    .page-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Core display utilities */
    .cus_gk_mob_hide { display: none !important; }
    .cus_gk_mob_block { display: block !important; }
    .cus_gk_mob_flex_col { flex-direction: column !important; }
    .cus_gk_mob_w_100 { width: 100% !important; }
    .cus_gk_mob_text_start { text-align: left !important; }
    .cus_gk_mob_text_center { text-align: center !important; }
    .cus_gk_mob_gap_1 { gap: 0.35rem !important; }

    /* Topbars, Page Titles & Header Actions */
    .page-title-box,
    .d-flex.justify-content-between.align-items-center:not(.nav-item):not(.card-header) {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .page-title-box .btn,
    .page-title-box .dropdown,
    .header-actions-group .btn {
        width: 100% !important;
        margin-bottom: 0.35rem !important;
    }

    /* Card & Container Polish */
    .card {
        margin-bottom: 0.85rem !important;
        border-radius: 0.85rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    }
    .card-body, .card.p-4, .card.p-3 {
        padding: 0.85rem !important;
    }

    /* Typography Scaling */
    h1, .fs-1 { font-size: 1.45rem !important; }
    h2, .fs-2 { font-size: 1.25rem !important; }
    h3, .fs-3 { font-size: 1.15rem !important; }
    h4, .fs-4 { font-size: 1.05rem !important; }
    h5, .fs-5 { font-size: 0.95rem !important; }

    /* Button Enhancements for Touch Targets */
    .btn {
        font-size: 13px !important;
        padding: 0.45rem 0.85rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .btn-group .btn {
        flex: 1 1 auto !important;
    }

    /* Form Controls & Date Inputs */
    .form-control, .form-select {
        font-size: 14px !important;
        min-height: 40px !important;
    }
    .input-group {
        flex-wrap: nowrap !important;
    }

    /* Nav Tabs & Sub-navigation */
    .nav-tabs, .nav-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link, .nav-pills .nav-link {
        white-space: nowrap !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 12.5px !important;
    }

    /* ─── 3.1 DASHBOARD ────────────────────────────────────────────────────── */
    #executiveDashboardApp .card h2,
    #executiveDashboardApp .card h3 {
        font-size: 1.35rem !important;
    }
    #executiveDashboardApp .d-flex.align-items-baseline {
        flex-wrap: wrap;
    }
    .executive-quick-action-btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

    /* ─── 3.2 EVENT & ROOM BOOKING MODULE ─────────────────────────────────── */
    .room-booking-show-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .room-booking-action-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.4rem !important;
    }
    .room-booking-action-bar .btn,
    .room-booking-action-bar .dropdown,
    .room-booking-action-bar .dropdown-toggle {
        flex: 1 1 calc(50% - 0.4rem) !important;
        min-width: 130px;
    }
    .room-folio-summary-card {
        padding: 1rem !important;
    }
    .dish-card-tile {
        padding: 0.65rem 0.85rem !important;
        margin-bottom: 0.4rem !important;
    }
    .dish-card-tile .dish-title {
        font-size: 12.5px !important;
    }

    /* ─── 3.3 EXPENSES & ACCOUNTS PAYABLE HUB ───────────────────────────────── */
    .expense-stat-card {
        margin-bottom: 0.65rem !important;
    }
    .expense-filter-bar {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .expense-filter-bar > div,
    .expense-filter-bar .form-control,
    .expense-filter-bar .form-select,
    .expense-filter-bar .btn {
        width: 100% !important;
    }
    .income-stream-deduction-box {
        margin-bottom: 0.75rem !important;
    }

    /* ─── 3.4 SALARY & PAYROLL MANAGEMENT ─────────────────────────────────── */
    .payroll-filter-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .payroll-summary-banner {
        flex-direction: column !important;
        text-align: center;
        gap: 0.5rem;
    }
    .salary-slip-modal-body {
        padding: 0.75rem !important;
        font-size: 12px !important;
    }

    /* ─── 3.5 REVENUE INSIGHTS & BALANCE SHEET ────────────────────────────── */
    .revenue-stream-card {
        margin-bottom: 0.75rem !important;
    }
    .balance-sheet-side-container {
        flex-direction: column !important;
    }
    .balance-sheet-card {
        width: 100% !important;
        margin-bottom: 0.85rem !important;
    }

    /* ─── 3.6 ATTENDANCE MANAGEMENT ────────────────────────────────────────── */
    .attendance-punch-widget {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem;
    }
    .attendance-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* ─── 3.7 CASHBOOK MODULE ──────────────────────────────────────────────── */
    .cashbook-calendar-strip {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px;
    }
    .cashbook-day-chip {
        min-width: 90px !important;
        flex-shrink: 0 !important;
    }
    .cashier-custody-card {
        margin-bottom: 0.75rem !important;
    }

    /* ─── 3.8 INVENTORY & RESTAURANT POS ───────────────────────────────────── */
    .pos-categories-pills {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
        padding-bottom: 4px;
    }
    .pos-item-tile {
        padding: 0.65rem !important;
    }
    .pos-cart-panel {
        position: static !important;
        width: 100% !important;
        margin-top: 1rem;
    }

    /* ─── 3.9 UNIVERSAL MODAL RESPONSIVENESS ───────────────────────────────── */
    .modal-dialog {
        margin: 0.4rem !important;
        max-width: calc(100vw - 0.8rem) !important;
    }
    .modal-content {
        border-radius: 1rem !important;
        max-height: calc(100vh - 1.5rem) !important;
        display: flex;
        flex-direction: column;
    }
    .modal-header {
        padding: 0.75rem 1rem !important;
    }
    .modal-body {
        padding: 0.85rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .modal-footer {
        padding: 0.65rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }
    .modal-footer .btn {
        flex: 1 1 calc(50% - 0.35rem) !important;
    }

    /* ─── 3.10 E-BILLS, INVOICES & QUOTATIONS ON MOBILE ────────────────────── */
    .cus_gk_mob_invoice_container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .invoice-header-table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }
    .invoice-header-table td.text-end {
        text-align: left !important;
        margin-top: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   4. THERMAL RECEIPT & PRINT MEDIA STYLES (80mm / 58mm / A4)
   -------------------------------------------------------------------------- */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .no-print, .btn, .navbar, .sidebar, .footer {
        display: none !important;
    }
    .cus_gk_thermal_80mm {
        width: 78mm !important;
        max-width: 78mm !important;
        margin: 0 auto !important;
        padding: 4mm !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        color: #000 !important;
        background: #fff !important;
    }
    .cus_gk_thermal_80mm table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .cus_gk_thermal_80mm th,
    .cus_gk_thermal_80mm td {
        padding: 2px 0 !important;
        border: none !important;
    }
    .cus_gk_a4_invoice {
        width: 100% !important;
        padding: 10mm !important;
        background: #fff !important;
        color: #000 !important;
    }
}