/* ============================================================
   RSK ERP – Complete Mobile Responsive System v2.0
   Only affects screens below 992px. Desktop completely unchanged.
   ============================================================ */

/* ============================================================
   MOBILE SIDEBAR – OFF-CANVAS DRAWER
   ============================================================ */
@media (max-width: 991.98px) {
    /* Hide sidebar by default, prepare for off-canvas */
    .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.sidebar-open .main-sidebar {
        left: 0 !important;
    }

    /* Mobile sidebar overlay backdrop */
    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.45);
        z-index: 1049;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.sidebar-open .mobile-sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* Sidebar menu items touch friendly */
    .main-sidebar .sidebar-nav li a {
        padding: 14px 18px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .main-sidebar .sidebar-nav li a .fas,
    .main-sidebar .sidebar-nav li a .fa,
    .main-sidebar .sidebar-nav li a .far {
        font-size: 18px !important;
        width: 24px !important;
        text-align: center !important;
    }

    .main-sidebar .sidebar-nav .treeview-menu li a {
        padding: 12px 18px 12px 44px !important;
        font-size: 14px !important;
    }

    /* Sidebar brand on mobile */
    .main-sidebar .sidebar-brand {
        padding: 18px 16px !important;
        min-height: 64px !important;
    }

    .main-sidebar .sidebar-panel {
        padding: 14px 16px !important;
        margin: 8px 12px !important;
    }

    /* Remove sidebar collapse on mobile */
    body.sidebar-collapse .main-sidebar,
    body.sidebar-collapse .left-side {
        transform: none !important;
    }

    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-footer {
        margin-left: 0 !important;
    }
}

/* ============================================================
   MOBILE HEADER – ULTRA COMPACT & SLIM
   ============================================================ */
@media (max-width: 991.98px) {
    /* Main header wrapper - minimal padding, no large gaps */
    .main-header {
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        min-height: 35px !important;
        height: auto !important;
        padding: 3px 6px 0 !important;
        margin-left: 0 !important;
        background: transparent !important;
    }

    /* Override erp-saas.css large rounded navbar */
    .main-header .navbar,
    .navbar.navbar-static-top {
        min-height: 35px !important;
        height: auto !important;
        margin-left: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .topbar-shell {
        padding: 4px 8px !important;
        min-height: 35px !important;
        height: auto !important;
        gap: 6px !important;
    }

    .topbar-left {
        gap: 5px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .topbar-right {
        gap: 3px !important;
        flex-shrink: 0 !important;
    }

    /* Ultra-compact hamburger button */
    .sidebar-toggle.saas-toggle {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 7px !important;
        font-size: 14px !important;
        background: rgba(79,70,229,0.08) !important;
        border: none !important;
        color: var(--primary, #4f46e5) !important;
    }

    .topbar-context {
        min-width: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Hide "Workspace" kicker on mobile for extra slimness */
    .topbar-kicker {
        display: none !important;
    }

    .topbar-title {
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    /* Hide desktop search on mobile */
    .topbar-search {
        display: none !important;
    }

    /* Hide ALL non-essential buttons in topbar-right on mobile */
    .topbar-right > *:not(ul.nav):not(a.btn.saas-primary-btn) {
        display: none !important;
    }

    /* Hide notifications inside the nav */
    .topbar-right .notifications-menu {
        display: none !important;
    }

    /* Keep marketing check-in button compact */
    .topbar-right > a.btn.saas-primary-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 30px !important;
        min-height: 30px !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        font-size: 12px !important;
        border-radius: 7px !important;
    }

    /* Keep user menu visible */
    .topbar-right .user-menu {
        display: block !important;
    }

    /* Compact user menu */
    .topbar-right .user-menu > a {
        padding: 1px 3px !important;
        min-height: 30px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Show user name on mobile */
    .topbar-right .user-menu span:not(.sr-only) {
        display: inline !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100px !important;
    }

    /* User avatar */
    .topbar-right .user-image,
    .topbar-right .sidebar-brand-mark {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   CONTENT WRAPPER & LAYOUT
   ============================================================ */
@media (max-width: 991.98px) {
    .content-wrapper {
        margin-left: 0 !important;
        padding-top: 42px !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .content-wrapper .content {
        padding: 10px 10px !important;
    }

    .content-header {
        padding: 10px 10px !important;
        margin-bottom: 6px !important;
    }

    .content-header .saas-breadcrumbs {
        font-size: 11px !important;
        flex-wrap: wrap !important;
        gap: 3px !important;
    }

    .content-header .saas-breadcrumbs li {
        white-space: nowrap !important;
    }

    .content-header .saas-breadcrumbs li i {
        font-size: 10px !important;
    }

    /* Page title */
    .content-header h1,
    .saas-page-title h1 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    .content-header h1 small,
    .saas-page-title p {
        font-size: 12px !important;
        margin-top: 4px !important;
    }
}

/* ============================================================
   TABLE RESPONSIVENESS
   ============================================================ */
@media (max-width: 991.98px) {
    .table-responsive {
        border: 0 !important;
        border-radius: var(--radius-sm, 8px) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 14px !important;
    }

    .table-responsive table {
        min-width: 600px !important;
        margin-bottom: 0 !important;
    }

    .table-responsive table th,
    .table-responsive table td {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .table-responsive table th {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        background: var(--primary, #4f46e5) !important;
        color: #fff !important;
    }

    /* Alternative: Mobile cards for large tables */
    .mobile-cards .table-responsive table,
    .mobile-cards .table-responsive table thead,
    .mobile-cards .table-responsive table tbody,
    .mobile-cards .table-responsive table th,
    .mobile-cards .table-responsive table td,
    .mobile-cards .table-responsive table tr {
        display: block !important;
    }

    .mobile-cards .table-responsive table thead {
        display: none !important;
    }

    .mobile-cards .table-responsive table tr {
        margin-bottom: 10px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: var(--radius-md, 12px) !important;
        padding: 12px !important;
        background: #fff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    }

    .mobile-cards .table-responsive table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        white-space: normal !important;
        text-align: right !important;
        font-size: 13px !important;
    }

    .mobile-cards .table-responsive table td:last-child {
        border-bottom: none !important;
    }

    .mobile-cards .table-responsive table td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: #475569 !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
    }

    /* DataTables mobile optimization */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        min-height: 44px !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    .dataTables_wrapper .row:first-child > [class*="col-"] {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* ============================================================
   FORM OPTIMIZATION
   ============================================================ */
@media (max-width: 991.98px) {
    .form-group {
        margin-bottom: 14px !important;
    }

    .form-control,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple,
    .input-group .form-control,
    .daterangepicker .input-mini,
    .bootstrap-datetimepicker-widget .form-control {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
    }

    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 28px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
    }

    .input-group-btn .btn {
        min-height: 48px !important;
        padding: 10px 14px !important;
    }

    .form-group label {
        font-size: 13px !important;
        margin-bottom: 5px !important;
        font-weight: 600 !important;
    }

    /* Checkboxes and radios */
    .checkbox-inline,
    .radio-inline {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .icheckbox_square-blue,
    .iradio_square-blue {
        transform: scale(1.3) !important;
    }

    /* Date picker mobile */
    .daterangepicker {
        max-width: 100vw !important;
        left: 10px !important;
        right: 10px !important;
    }

    .daterangepicker .ranges,
    .daterangepicker .drp-calendar {
        width: 100% !important;
    }

    .daterangepicker .drp-calendar {
        max-width: 100% !important;
    }

    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right {
        float: none !important;
    }

    /* Bootstrap datetimepicker */
    .bootstrap-datetimepicker-widget.dropdown-menu {
        width: 100% !important;
        max-width: 340px !important;
        left: 10px !important;
        right: 10px !important;
    }

    /* textarea */
    textarea.form-control {
        min-height: 80px !important;
    }
}

/* ============================================================
   BUTTON IMPROVEMENTS
   ============================================================ */
@media (max-width: 991.98px) {
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    .btn-xs {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .btn-sm {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .btn-lg {
        min-height: 52px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
    }

    /* Full-width action buttons on mobile */
    .box-footer .btn,
    .modal-footer .btn,
    .form-group .btn[type="submit"] {
        min-height: 48px !important;
    }

    .box-footer .btn + .btn,
    .modal-footer .btn + .btn {
        margin-left: 8px !important;
    }

    /* Action button groups */
    .btn-group .btn {
        min-height: 44px !important;
    }

    /* DataTables buttons */
    .dt-buttons .btn {
        min-height: 40px !important;
        padding: 8px 12px !important;
    }

    /* Full width buttons in forms */
    .box-footer .btn-primary,
    .box-footer .btn-success,
    .modal-footer .btn-primary,
    .modal-footer .btn-success {
        width: 100% !important;
    }
}

/* ============================================================
   DASHBOARD RESPONSIVENESS
   ============================================================ */
@media (max-width: 991.98px) {
    .info-box,
    .small-box {
        margin-bottom: 10px !important;
    }

    .info-box-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }

    .info-box-content {
        padding: 10px 12px !important;
    }

    .info-box-text,
    .info-box-number {
        font-size: 13px !important;
    }

    .info-box-number {
        font-size: 18px !important;
    }

    .small-box .inner {
        padding: 12px !important;
    }

    .small-box .inner h3 {
        font-size: 22px !important;
    }

    .small-box .inner p {
        font-size: 12px !important;
    }

    .small-box .icon {
        font-size: 50px !important;
    }

    /* Dashboard cards stack */
    .content .row > [class*="col-"] {
        width: 100% !important;
    }

    /* 2 columns on medium mobile for stats */
    @media (min-width: 480px) {
        .content .row > .col-xs-6,
        .content .row > .col-sm-6 {
            width: 50% !important;
        }
    }
}

/* ============================================================
   BOX / CARD OPTIMIZATION
   ============================================================ */
@media (max-width: 991.98px) {
    .box {
        border-radius: var(--radius-sm, 10px) !important;
        margin-bottom: 12px !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    }

    .box-header {
        padding: 12px 14px !important;
    }

    .box-header .box-title {
        font-size: 14px !important;
    }

    .box-body {
        padding: 12px 14px !important;
    }

    .box-footer {
        padding: 10px 14px !important;
    }

    .box .overlay {
        border-radius: var(--radius-sm, 10px) !important;
    }

    /* Modal on mobile */
    .modal-dialog {
        margin: 8px !important;
    }

    .modal-content {
        border-radius: var(--radius-md, 12px) !important;
    }

    .modal-header {
        padding: 12px 14px !important;
    }

    .modal-body {
        padding: 12px 14px !important;
    }

    .modal-footer {
        padding: 10px 14px !important;
    }

    .modal-footer .btn {
        min-height: 48px !important;
    }
}

/* ============================================================
   GRID & LAYOUT
   ============================================================ */
@media (max-width: 991.98px) {
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
    .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Full width on very small screens */
    .col-xs-6,
    .col-sm-4,
    .col-sm-3 {
        width: 100% !important;
    }

    /* 2 columns on medium mobile */
    .col-xs-6 {
        width: 50% !important;
    }

    .col-xs-12 {
        width: 100% !important;
    }
}

/* ============================================================
   SPECIFIC BREAKPOINTS
   ============================================================ */

/* 320px - Extra small */
@media (max-width: 320px) {
    .topbar-title {
        max-width: 80px !important;
        font-size: 12px !important;
    }

    .main-sidebar {
        width: 260px !important;
        left: -260px !important;
    }

    .content-wrapper .content {
        padding: 8px 6px !important;
    }

    .box-body {
        padding: 10px 10px !important;
    }

    .main-header .navbar,
    .navbar.navbar-static-top {
        border-radius: 10px !important;
    }

    .topbar-shell {
        padding: 4px 8px !important;
    }
}

/* 360px - Small mobile */
@media (min-width: 321px) and (max-width: 360px) {
    .topbar-title {
        max-width: 100px !important;
    }

    .main-header .navbar,
    .navbar.navbar-static-top {
        border-radius: 10px !important;
    }
}

/* 375px - iPhone standard */
@media (min-width: 361px) and (max-width: 390px) {
    .topbar-title {
        max-width: 120px !important;
    }

    .main-header .navbar,
    .navbar.navbar-static-top {
        border-radius: 10px !important;
    }
}

/* 414px - iPhone Plus / Pro Max */
@media (min-width: 391px) and (max-width: 480px) {
    .topbar-title {
        max-width: 150px !important;
    }

    .col-xs-6 {
        width: 50% !important;
    }

    .main-header .navbar,
    .navbar.navbar-static-top {
        border-radius: 12px !important;
    }
}

/* 480px - Large mobile */
@media (min-width: 481px) and (max-width: 576px) {
    .topbar-title {
        max-width: 200px !important;
    }

    .col-xs-6,
    .col-sm-6 {
        width: 50% !important;
    }
}

/* 576px - Small tablets */
@media (min-width: 577px) and (max-width: 767px) {
    .col-xs-6,
    .col-sm-6 {
        width: 50% !important;
    }

    .col-sm-4 {
        width: 50% !important;
    }
}

/* 768px - Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .main-sidebar {
        left: -260px !important;
    }

    body.sidebar-open .main-sidebar {
        left: 0 !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
    }

    .col-sm-6 {
        width: 50% !important;
    }

    .col-sm-4 {
        width: 33.333333% !important;
    }

    .main-header .navbar,
    .navbar.navbar-static-top {
        border-radius: 14px !important;
    }
}

/* ============================================================
   TOUCH EXPERIENCE & SMOOTH SCROLLING
   ============================================================ */
@media (max-width: 991.98px) {
    html {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    body {
        overscroll-behavior-y: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }

    * {
        -webkit-tap-highlight-color: transparent;
    }

    a, button, .btn, .sidebar-toggle, .nav>li>a, .dropdown-toggle {
        touch-action: manipulation;
        -webkit-touch-callout: none;
    }

    /* Smooth scrolling for table containers */
    .table-responsive {
        scroll-behavior: smooth;
    }

    /* Better scroll indicators */
    .table-responsive::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.03));
        pointer-events: none;
    }

    .table-responsive {
        position: relative;
    }

    /* Active press states for buttons */
    .btn:active,
    .sidebar-toggle.saas-toggle:active {
        transform: scale(0.97) !important;
    }
}

/* ============================================================
   PRINT – Ensure desktop print unchanged, mobile print works
   ============================================================ */
@media print {
    .mobile-sidebar-overlay {
        display: none !important;
    }

    .main-sidebar {
        position: absolute !important;
        left: 0 !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    .table-responsive {
        overflow: visible !important;
    }

    .table-responsive table {
        min-width: auto !important;
    }
}

/* ============================================================
   SELECT2 MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .select2-container--open .select2-dropdown {
        border-radius: 0 0 10px 10px !important;
    }

    .select2-container--default .select2-results > .select2-results__options {
        max-height: 280px !important;
    }

    .select2-results__option {
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ============================================================
   DROPZONE / FILE UPLOAD MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .dropzone {
        min-height: 100px !important;
        padding: 16px !important;
    }

    .dropzone .dz-message {
        font-size: 14px !important;
    }
}

/* ============================================================
   NOTIFICATIONS & TOAST MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .toast {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        min-width: auto !important;
    }

    .dropdown-menu {
        max-width: 100vw !important;
        border-radius: 12px !important;
    }

    .dropdown-menu-right {
        right: 4px !important;
    }

    .navbar-nav > .notifications-menu > .dropdown-menu {
        width: 100vw !important;
        left: 10px !important;
        right: 10px !important;
    }
}

/* ============================================================
   POS FORM ACTIONS MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .pos-form-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        padding: 10px !important;
        background: #fff !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06) !important;
    }

    .pos-form-actions .btn {
        min-height: 48px !important;
    }
}

/* ============================================================
   WIZARD MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .wizard > .steps > ul > li {
        width: 100% !important;
        float: none !important;
    }

    .wizard > .steps > ul > li > a {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   NAV TABS MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
    }

    .nav-tabs > li {
        flex-shrink: 0 !important;
    }

    .nav-tabs > li > a {
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .nav-tabs-custom > .nav-tabs {
        padding: 8px 8px 0 !important;
    }
}

/* ============================================================
   SCROLL TO TOP MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .scrolltop {
        bottom: 16px !important;
        right: 16px !important;
    }

    .scrolltop .scroll.icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}