/* ============================================================
   infiCRM — Global Mobile / Tablet Layout
   Loaded after crm-theme.css. Improves every CRM screen.
   ============================================================ */

/* ---- Base mobile safety ---- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.crm-theme {
    overscroll-behavior-y: contain;
}

/* ============================================================
   TABLET + PHONE (≤991.98px)
   ============================================================ */
@media (max-width: 991.98px) {
    body.crm-theme {
        overflow-x: hidden;
        max-width: 100vw;
    }

    body.crm-theme #layout-wrapper,
    body.crm-theme .main-content,
    body.crm-theme .page-content,
    body.crm-theme .container-fluid {
        max-width: 100%;
        overflow-x: clip;
    }

    /* Header shell */
    body.crm-theme #page-topbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 56px !important;
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    body.crm-theme .navbar-header {
        height: 56px !important;
        padding: 0 10px !important;
        gap: 6px;
    }

    body.crm-theme .crm-header-left {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    body.crm-theme #vertical-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    body.crm-theme .crm-header-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    body.crm-theme .crm-user-btn {
        padding: 4px !important;
        min-height: 40px;
    }

    body.crm-theme .crm-user-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    /* Content shell */
    body.crm-theme .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 56px !important;
        width: 100% !important;
        min-height: calc(100vh - 56px);
        min-height: calc(100dvh - 56px);
    }

    body.crm-theme .page-content {
        padding: 14px 12px 24px !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.crm-theme .footer {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        padding: 14px 12px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        text-align: center;
        font-size: 12px;
    }

    /* Off-canvas sidebar */
    body.crm-theme .vertical-menu {
        width: min(288px, 86vw) !important;
        max-width: 288px !important;
        height: 100% !important;
        height: 100dvh !important;
        transform: translateX(-105%);
        transition: transform 0.28s ease;
        z-index: 1005 !important;
        padding-top: env(safe-area-inset-top, 0);
        box-shadow: none !important;
    }

    body.crm-theme.sidebar-enable .vertical-menu {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(30, 27, 75, 0.22) !important;
    }

    body.crm-theme .crm-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(30, 27, 75, 0.48);
        z-index: 1004;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(1px);
    }

    body.crm-theme.sidebar-enable .crm-sidebar-overlay {
        display: block;
    }

    body.crm-theme.sidebar-enable {
        overflow: hidden;
        touch-action: none;
    }

    body.crm-theme .crm-sidebar-brand {
        min-height: 56px;
        padding: 8px 12px;
    }

    body.crm-theme .crm-sidebar-brand .crm-sidebar-logo {
        max-height: 36px;
        max-width: 160px;
    }

    body.crm-theme #sidebar-menu ul li a {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Collapsed desktop mode should not shrink on mobile */
    body.crm-theme.vertical-collpsed .vertical-menu {
        width: min(288px, 86vw) !important;
    }

    body.crm-theme.vertical-collpsed .main-content,
    body.crm-theme.vertical-collpsed #page-topbar {
        margin-left: 0 !important;
        left: 0 !important;
    }

    /* Mobile search panel */
    body.crm-theme .crm-header-search {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        max-width: none;
        margin: 0;
        padding: 10px 12px;
        padding-left: calc(12px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
        background: var(--crm-surface);
        border-bottom: 1px solid var(--crm-border);
        z-index: 1002;
        box-shadow: 0 8px 20px rgba(30, 27, 75, 0.08);
    }

    body.crm-theme .crm-header-search.is-mobile-open {
        display: block;
    }

    body.crm-theme .crm-search-wrap input {
        font-size: 16px !important;
        min-height: 44px;
    }

    body.crm-theme .crm-search-results {
        max-height: min(60vh, 420px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Page titles */
    body.crm-theme .page-title-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px;
        padding-bottom: 12px !important;
    }

    body.crm-theme .page-title-box h4 {
        font-size: 18px !important;
        line-height: 1.3;
        word-break: break-word;
    }

    body.crm-theme .page-title-right {
        width: 100%;
    }

    body.crm-theme .breadcrumb {
        flex-wrap: wrap;
        font-size: 12px;
        row-gap: 2px;
    }

    /* Cards */
    body.crm-theme .card {
        margin-bottom: 14px !important;
    }

    body.crm-theme .card-body {
        padding: 14px !important;
    }

    body.crm-theme .card-header {
        padding: 12px 14px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Forms — stack columns, touch-friendly inputs */
    body.crm-theme .form-label {
        font-size: 13px;
        margin-bottom: 4px;
        font-weight: 600;
    }

    body.crm-theme .form-control,
    body.crm-theme .form-select,
    body.crm-theme .select2-container .select2-selection--single,
    body.crm-theme .select2-container .select2-selection--multiple {
        min-height: 42px;
        font-size: 16px !important; /* prevent iOS zoom */
    }

    body.crm-theme textarea.form-control {
        min-height: 96px;
    }

    body.crm-theme .row > [class*="col-"] {
        margin-bottom: 10px;
    }

    body.crm-theme .row.g-3 > [class*="col-"],
    body.crm-theme #filterForm .row > [class*="col-"],
    body.crm-theme form.row > [class*="col-"],
    body.crm-theme form .row > [class*="col-md-"],
    body.crm-theme form .row > [class*="col-lg-"],
    body.crm-theme #filterForm > [class*="col-"] {
        margin-bottom: 12px;
    }

    /* Forms / filters: stack fields on tablet & phone */
    body.crm-theme form .col-md-1,
    body.crm-theme form .col-md-2,
    body.crm-theme form .col-md-3,
    body.crm-theme form .col-md-4,
    body.crm-theme form .col-md-5,
    body.crm-theme form .col-lg-1,
    body.crm-theme form .col-lg-2,
    body.crm-theme form .col-lg-3,
    body.crm-theme form .col-lg-4,
    body.crm-theme #filterForm > [class*="col-md-"],
    body.crm-theme #filterForm > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    @media (min-width: 576px) {
        body.crm-theme form .col-md-6,
        body.crm-theme form .col-lg-6 {
            flex: 0 0 50%;
            max-width: 50%;
            width: 50%;
        }
    }

    /* Filter / toolbar bars */
    body.crm-theme #filterForm,
    body.crm-theme .crm-filter-bar,
    body.crm-theme .crm-import-export-bar {
        background: var(--crm-surface);
        border: 1px solid var(--crm-border);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 14px;
    }

    body.crm-theme .crm-import-export-bar,
    body.crm-theme .d-flex.gap-2.flex-wrap,
    body.crm-theme .mb-3.d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body.crm-theme .crm-import-export-bar .btn,
    body.crm-theme .page-content > .container-fluid > .d-flex > .btn,
    body.crm-theme .page-content .mb-3 > .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
        justify-content: center;
    }

    /* Buttons */
    body.crm-theme .btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    body.crm-theme .btn-sm {
        min-height: 36px;
        padding: 6px 10px;
    }

    body.crm-theme .btn-group {
        flex-wrap: wrap;
        width: 100%;
    }

    body.crm-theme .btn-group > .btn {
        flex: 1 1 auto;
    }

    /* Tables — horizontal scroll, readable cells */
    body.crm-theme .page-content .table-responsive,
    body.crm-theme .table-responsive,
    body.crm-theme .crm-leads-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    body.crm-theme .page-content .table-responsive {
        padding: 8px !important;
    }

    body.crm-theme table.table,
    body.crm-theme table.dataTable {
        width: 100% !important;
        min-width: 640px;
        margin-bottom: 0 !important;
    }

    body.crm-theme table.table th,
    body.crm-theme table.table td,
    body.crm-theme table.dataTable th,
    body.crm-theme table.dataTable td {
        white-space: nowrap;
        vertical-align: middle !important;
        font-size: 13px;
        padding: 10px 8px !important;
    }

    /* Allow company / name cells to wrap a bit */
    body.crm-theme table.table td:nth-child(2),
    body.crm-theme table.dataTable td:nth-child(2) {
        white-space: normal;
        min-width: 120px;
        max-width: 180px;
        word-break: break-word;
    }

    body.crm-theme .crm-action-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 110px;
    }

    body.crm-theme #datatable td .btn,
    body.crm-theme .table-responsive .table td .btn,
    body.crm-theme .crm-btn-action {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 8px;
        min-height: 34px;
    }

    body.crm-theme #datatable td form,
    body.crm-theme .table-responsive .table td form {
        margin: 0;
        display: block;
        width: 100%;
    }

    /* DataTables chrome */
    body.crm-theme .dataTables_wrapper {
        padding: 8px !important;
        overflow: visible;
    }

    body.crm-theme .dataTables_wrapper .row {
        margin: 0 !important;
    }

    body.crm-theme .dataTables_wrapper .row:first-child,
    body.crm-theme .dataTables_wrapper .row:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }

    body.crm-theme .dataTables_wrapper [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.crm-theme .dataTables_length,
    body.crm-theme .dataTables_filter,
    body.crm-theme .dataTables_info,
    body.crm-theme .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.crm-theme .dataTables_filter label {
        display: block;
        width: 100%;
    }

    body.crm-theme .dataTables_filter input {
        width: 100% !important;
        margin: 6px 0 0 !important;
        display: block;
        min-height: 42px;
        font-size: 16px !important;
    }

    body.crm-theme .dataTables_length select {
        min-height: 38px;
        font-size: 16px !important;
    }

    body.crm-theme .dataTables_paginate {
        text-align: center !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    body.crm-theme .dataTables_paginate .pagination {
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0;
    }

    body.crm-theme .paginate_button,
    body.crm-theme .page-link {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Select2 */
    body.crm-theme .select2-container {
        width: 100% !important;
    }

    body.crm-theme .select2-container--default .select2-selection--single {
        min-height: 42px;
        padding: 6px 8px;
    }

    body.crm-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 16px;
        line-height: 28px;
    }

    body.crm-theme .select2-dropdown {
        font-size: 15px;
        z-index: 1100 !important;
    }

    /* Modals — near full screen on tablet/phone */
    body.crm-theme .modal-dialog {
        margin: 12px;
        max-width: calc(100% - 24px);
    }

    body.crm-theme .modal-content {
        max-height: calc(100dvh - 24px);
        display: flex;
        flex-direction: column;
    }

    body.crm-theme .modal-body {
        padding: 14px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.crm-theme .modal-header,
    body.crm-theme .modal-footer {
        padding: 12px 14px !important;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.crm-theme .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }

    /* Dashboard */
    .crm-dash-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
        gap: 12px;
        margin-bottom: 16px;
    }

    .crm-dash-hero h2 {
        font-size: 22px;
    }

    .crm-dash-hero p {
        font-size: 13px;
        margin-bottom: 0;
    }

    .crm-dash-hero-meta {
        width: 100%;
    }

    .crm-dash-hero-meta .btn {
        width: 100%;
    }

    .crm-dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .crm-stat-card,
    .crm-panel-card,
    .crm-chart-card,
    .crm-status-card {
        margin-bottom: 12px;
    }

    /* Product / item tables inside forms */
    body.crm-theme #productTable,
    body.crm-theme #itemsTable,
    body.crm-theme .table-bordered {
        min-width: 560px;
    }

    /* Flatpickr / date inputs full width */
    body.crm-theme input[type="date"],
    body.crm-theme input[type="datetime-local"],
    body.crm-theme input[type="time"] {
        min-height: 42px;
        font-size: 16px !important;
    }

    /* Alerts */
    body.crm-theme .alert {
        font-size: 13px;
        padding: 12px 14px;
        word-break: break-word;
    }

    /* Dropdown menus stay on screen */
    body.crm-theme .dropdown-menu {
        max-width: min(280px, calc(100vw - 24px));
    }

    body.crm-theme .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* ============================================================
   PHONE (≤575.98px)
   ============================================================ */
@media (max-width: 575.98px) {
    body.crm-theme .page-content {
        padding: 10px 10px 20px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.crm-theme .page-title-box h4 {
        font-size: 16px !important;
    }

    .crm-dash-hero {
        padding: 14px;
        border-radius: 12px;
    }

    .crm-dash-hero h2 {
        font-size: 18px;
    }

    .crm-dash-hero p {
        display: none;
    }

    .crm-stat-card {
        padding: 14px;
        min-height: 96px;
    }

    .crm-stat-card .stat-info .stat-value {
        font-size: 20px;
    }

    body.crm-theme .crm-import-export-bar .btn,
    body.crm-theme .page-content .mb-3 > .btn {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    body.crm-theme table.table,
    body.crm-theme table.dataTable {
        min-width: 580px;
    }

    body.crm-theme .card-body .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    body.crm-theme .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    body.crm-theme .modal-footer .btn {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Login */
    .crm-login-page {
        padding: 12px;
        padding-top: max(8vh, env(safe-area-inset-top, 0px));
        align-items: flex-start;
    }

    .crm-login-card {
        max-width: 100%;
        border-radius: 14px;
    }

    .crm-login-brand {
        padding: 24px 16px 16px;
    }

    .crm-login-brand img {
        max-width: min(240px, 80%);
        max-height: 88px;
    }

    .crm-login-body {
        padding: 18px 16px 22px;
    }

    .crm-login-body .btn {
        width: 100%;
        min-height: 46px;
    }

    /* Calendar */
    body.crm-theme #crmCalendar .fc-toolbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
    }

    body.crm-theme #crmCalendar .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.crm-theme #crmCalendar .fc-button {
        min-height: 36px;
        font-size: 12px !important;
    }

    body.crm-theme #crmCalendar .fc-daygrid-day-number {
        font-size: 12px;
        padding: 4px !important;
    }

    /* FAQ */
    .crm-faq-quick-link {
        flex: 1 1 100%;
    }
}

/* ============================================================
   LANDSCAPE PHONES
   ============================================================ */
@media (max-width: 991.98px) and (orientation: landscape) {
    body.crm-theme .vertical-menu {
        width: min(260px, 70vw) !important;
    }

    body.crm-theme .crm-header-search.is-mobile-open {
        max-height: 70vh;
        overflow-y: auto;
    }

    body.crm-theme .modal-content {
        max-height: calc(100dvh - 16px);
    }
}

/* ============================================================
   TOUCH HELPERS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    body.crm-theme a,
    body.crm-theme button,
    body.crm-theme .btn,
    body.crm-theme .nav-link {
        -webkit-tap-highlight-color: rgba(147, 51, 234, 0.12);
    }

    body.crm-theme .table tbody tr:active {
        background: var(--crm-primary-soft);
    }
}