/* ==========================================================================
   MOBILE RESPONSIVE CSS - Complete Admin Panel Optimization
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL RESET & BASE STYLES
   ========================================================================== */
@media (max-width: 991px) {
    * {
        box-sizing: border-box;
    }

    html {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: #fff !important;
        font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #3e3e3e !important;
    }

    /* Main wrapper */
    #main-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        padding-top: 60px !important;
        background: #f5f6fa !important;
    }

    /* Container */
    .container-fluid {
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .page-wrapper {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Grid */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

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

/* ==========================================================================
   2. TOP HEADER - FIXED POSITION
   ========================================================================== */
@media (max-width: 991px) {
    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: var(--admin-panel-color, #1a1a2e) !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.15) !important;
        height: 60px !important;
    }

    .topbar .navbar {
        display: flex !important;
        align-items: center !important;
        height: 60px !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    /* Logo area */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .navbar-brand {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 60px !important;
    }

    .navbar-brand b {
        display: flex !important;
        align-items: center !important;
    }

    .navbar-brand img,
    #logo_web {
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
    }

    .navbar-brand .light-logo {
        max-height: 35px !important;
    }

    /* Mobile toggle button */
    .mobile-toggle-wrap {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .mobile-toggle-wrap .navbar-nav {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 20px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
    }

    .mobile-menu-btn:hover,
    .mobile-menu-btn:focus {
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
    }

    .mobile-menu-btn i {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    /* Header nav */
    .header-nav {
        display: none !important;
    }
}

/* ==========================================================================
   3. MOBILE MENU PANEL
   ========================================================================== */
@media (max-width: 991px) {
    /* Mobile overlay */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 1001 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }

    /* Mobile menu panel */
    .mobile-menu-panel {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 300px !important;
        height: 100vh !important;
        background: var(--admin-panel-color, #1a1a2e) !important;
        z-index: 1002 !important;
        transition: left 0.3s ease-in-out !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
    }

    .mobile-menu-panel.active {
        left: 0 !important;
    }

    /* Mobile menu header */
    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        flex-shrink: 0 !important;
    }

    .mobile-logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    .mobile-menu-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255,255,255,0.1) !important;
        border: none !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-size: 18px !important;
        cursor: pointer !important;
    }

    .mobile-menu-close:hover {
        background: rgba(255,255,255,0.2) !important;
    }

    /* Mobile menu content */
    .mobile-menu-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px 0 !important;
    }

    /* Sidebar search */
    .sidebar-search {
        padding: 12px 15px !important;
        margin-bottom: 5px !important;
    }

    .sidebar-search input {
        width: 100% !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
        font-size: 14px !important;
    }

    .sidebar-search input::placeholder {
        color: rgba(255,255,255,0.5) !important;
    }

    /* Sidebar nav */
    .sidebar-nav {
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .sidebar-nav ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sidebar-nav > ul {
        display: flex !important;
        flex-direction: column !important;
    }

    .sidebar-nav ul li {
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .sidebar-nav ul li a {
        display: flex !important;
        align-items: center !important;
        padding: 14px 15px !important;
        color: rgba(255,255,255,0.9) !important;
        font-size: 14px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: background 0.2s !important;
    }

    .sidebar-nav ul li a:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }

    .sidebar-nav ul li a i {
        color: rgba(255,255,255,0.8) !important;
        margin-right: 12px !important;
        font-size: 18px !important;
        min-width: 24px !important;
        text-align: center !important;
    }

    .sidebar-nav ul li a .hide-menu {
        color: rgba(255,255,255,0.9) !important;
        font-size: 14px !important;
        flex: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Active state */
    .sidebar-nav ul li.active > a {
        background: rgba(255,255,255,0.12) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    .sidebar-nav ul li.active > a i {
        color: #fff !important;
    }

    /* Submenu */
    .sidebar-nav ul li ul {
        background: rgba(0,0,0,0.15) !important;
    }

    .sidebar-nav ul li ul li a {
        padding-left: 50px !important;
        font-size: 13px !important;
    }

    .sidebar-nav ul li ul li ul li a {
        padding-left: 65px !important;
    }

    /* Section title */
    .nav-subtitle {
        padding: 15px 15px 8px !important;
    }

    .nav-subtitle-span {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: rgba(255,255,255,0.4) !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
    }

    /* Arrow indicator */
    .sidebar-nav ul li a.has-arrow::after {
        color: rgba(255,255,255,0.4) !important;
        right: 15px !important;
    }
}

/* ==========================================================================
   4. LEFT SIDEBAR (Desktop - Hidden on Mobile)
   ========================================================================== */
@media (max-width: 991px) {
    .left-sidebar {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .left-sidebar {
        display: block !important;
    }

    .mobile-menu-panel {
        display: none !important;
    }

    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   5. PAGE TITLES & BREADCRUMB
   ========================================================================== */
@media (max-width: 991px) {
    .page-titles {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    }

    .page-titles .col-md-5,
    .page-titles .col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .page-titles h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
    }

    .breadcrumb {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 5px 0 0 0 !important;
        background: transparent !important;
        font-size: 12px !important;
    }

    .breadcrumb-item {
        color: #6c757d !important;
    }

    .breadcrumb-item a {
        color: var(--admin-panel-color, #1a1a2e) !important;
        text-decoration: none !important;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: #adb5bd !important;
    }

    .page-titles .col-md-7 .btn {
        display: inline-block !important;
        margin-top: 10px !important;
    }
}

/* ==========================================================================
   6. CARDS & WIDGETS
   ========================================================================== */
@media (max-width: 991px) {
    .card {
        margin-bottom: 15px !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
        background: #fff !important;
    }

    .card-body {
        padding: 15px !important;
    }

    .card-header {
        padding: 12px 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: transparent !important;
    }

    .card-footer {
        padding: 12px 15px !important;
        border-top: 1px solid #f0f0f0 !important;
        background: transparent !important;
    }

    /* Dashboard stat cards */
    .card-box-with-icon {
        margin-bottom: 15px !important;
    }

    .card-box-with-icon .card-body {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        gap: 15px !important;
    }

    .card-box-with-icon .box-icon {
        flex-shrink: 0 !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(26,26,46,0.08) !important;
        border-radius: 12px !important;
    }

    .card-box-with-icon .box-icon img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
    }

    .card-box-with-icon .card-box-with-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .card-box-with-icon .card-left-title {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #6c757d !important;
        margin-bottom: 4px !important;
    }

    .card-box-with-icon h2 {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
    }

    .up-down-list {
        font-size: 11px !important;
        color: #6c757d !important;
    }

    /* Grid columns */
    .row > [class*="col-"] {
        margin-bottom: 0 !important;
    }

    /* Full width on mobile */
    .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-12, .col-sm-6, .col-sm-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Charts side by side on tablet */
    @media (min-width: 768px) and (max-width: 991px) {
        .col-md-4, .col-md-6 {
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }

        .col-md-7, .col-md-5 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }
}

/* ==========================================================================
   7. TABLES
   ========================================================================== */
@media (max-width: 991px) {
    .table-list {
        background: #fff !important;
        border-radius: 12px !important;
        padding: 0 !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
    }

    .table-responsive,
    .table-responsive-md,
    .table-responsive-lg {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 600px !important;
        font-size: 13px !important;
    }

    table.dataTable {
        font-size: 13px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        padding: 12px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #495057 !important;
        background: #f8f9fa !important;
        border-bottom: 2px solid #dee2e6 !important;
        white-space: nowrap !important;
    }

    table.dataTable tbody td {
        padding: 12px 10px !important;
        font-size: 13px !important;
        color: #495057 !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    table.dataTable tbody tr:last-child td {
        border-bottom: none !important;
    }

    table.dataTable tbody tr:hover {
        background: #f8f9fa !important;
    }

    /* Action buttons in tables */
    .table td .btn-group,
    .table td .d-flex,
    .table td .action-btn-group,
    .table td [class*="btn-"] {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    .table td .btn-group .btn,
    .table td .d-flex .btn,
    .table td .action-btn-group .btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        border-radius: 6px !important;
    }

    .table td .btn-group .btn i,
    .table td .d-flex .btn i,
    .table td .action-btn-group .btn i {
        font-size: 14px !important;
    }

    /* Table card header */
    .card-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .card-header-right {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .card-header-btn {
        flex: 0 0 auto !important;
    }

    .card-header-btn .btn {
        width: 100% !important;
    }

    /* DataTables buttons */
    .dt-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 15px !important;
    }

    .dt-buttons .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* DataTables search */
    .dataTables_filter {
        margin-bottom: 10px !important;
    }

    .dataTables_filter input {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
    }

    /* DataTables length */
    .dataTables_length {
        margin-bottom: 10px !important;
    }

    .dataTables_length select {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Pagination */
    .dataTables_paginate {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
        margin-top: 15px !important;
    }

    .paginate_button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
        font-size: 13px !important;
        color: #495057 !important;
        background: #fff !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }

    .paginate_button:hover {
        background: #f8f9fa !important;
        border-color: #adb5bd !important;
    }

    .paginate_button.current {
        background: var(--admin-panel-color, #1a1a2e) !important;
        color: #fff !important;
        border-color: var(--admin-panel-color, #1a1a2e) !important;
    }

    /* Info text */
    .dataTables_info {
        font-size: 12px !important;
        color: #6c757d !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */
@media (max-width: 991px) {
    .card-body {
        padding: 20px !important;
    }

    .vendor_payout_create-inner {
        padding: 20px !important;
    }

    .vendor_payout_create-inner fieldset {
        border: 1px solid #e8e8e8 !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 25px !important;
        background: #fafafa !important;
    }

    .vendor_payout_create-inner fieldset legend {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1a1a2e !important;
        padding: 0 15px !important;
    }

    /* Form group row */
    .form-group.row {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 20px !important;
    }

    .form-group.row label {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #495057 !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .form-group.row > [class*="col-"]:not(label) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .form-group.row .col-7,
    .form-group.row .col-8,
    .form-group.row .col-9,
    .form-group.row .col-12,
    .form-group.row .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Inputs */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="url"],
    textarea.form-control,
    select.form-control {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #495057 !important;
        height: auto !important;
        min-height: 44px !important;
    }

    .form-control:focus,
    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--admin-panel-color, #1a1a2e) !important;
        box-shadow: 0 0 0 3px rgba(26,26,46,0.1) !important;
        outline: none !important;
    }

    /* File inputs */
    input[type="file"] {
        width: 100% !important;
        padding: 10px !important;
        font-size: 13px !important;
        border: 1px dashed #ccc !important;
        border-radius: 8px !important;
        background: #fafafa !important;
    }

    /* Color input */
    input[type="color"] {
        width: 50px !important;
        height: 44px !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }

    /* Date/time inputs */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"] {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        height: auto !important;
        min-height: 44px !important;
    }

    /* Checkbox & Radio */
    .form-check {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 10px 0 !important;
    }

    .form-check-inline {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    .form-check-label {
        font-size: 13px !important;
        color: #495057 !important;
        cursor: pointer !important;
    }

    /* Help text */
    .form-text {
        font-size: 12px !important;
        color: #6c757d !important;
        margin-top: 6px !important;
    }

    /* Width classes */
    .width-50,
    .width-100 {
        width: 100% !important;
    }

    /* Control inner */
    .control-inner {
        width: 100% !important;
    }

    .control-inner input {
        width: 100% !important;
    }

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

    .select2-container--default .select2-selection--single {
        height: auto !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Chosen.js */
    .chosen-container {
        width: 100% !important;
    }

    /* Tags input */
    .bootstrap-tagsinput {
        width: 100% !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* Image preview */
    .placeholder_img_thumb,
    .cat_image,
    .upload-preview,
    .image-preview {
        width: 100% !important;
        margin: 15px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .placeholder_img_thumb img,
    .cat_image img,
    .upload-preview img,
    .image-preview img {
        max-width: 100% !important;
        max-height: 180px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
    }

    /* Map markers */
    .map-markers {
        width: 100% !important;
        overflow-x: auto !important;
        padding: 10px 0 !important;
    }

    .map-markers ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .map-markers ul li {
        width: 50px !important;
        height: 50px !important;
        border: 2px solid transparent !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }

    .map-markers ul li input[type="radio"] {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

    .map-markers ul li img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */
@media (max-width: 991px) {
    .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        min-height: 44px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

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

    .btn-lg {
        padding: 14px 22px !important;
        font-size: 15px !important;
        min-height: 50px !important;
    }

    .btn-block {
        width: 100% !important;
    }

    .btn-primary {
        background: var(--admin-panel-color, #1a1a2e) !important;
        border-color: var(--admin-panel-color, #1a1a2e) !important;
        color: #fff !important;
    }

    .btn-primary:hover {
        background: #2d2d4a !important;
        border-color: #2d2d4a !important;
    }

    .btn-secondary {
        background: #6c757d !important;
        border-color: #6c757d !important;
        color: #fff !important;
    }

    .btn-success {
        background: #28a745 !important;
        border-color: #28a745 !important;
        color: #fff !important;
    }

    .btn-danger {
        background: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }

    .btn-warning {
        background: #ffc107 !important;
        border-color: #ffc107 !important;
        color: #1a1a2e !important;
    }

    .btn-outline-primary {
        background: transparent !important;
        border: 2px solid var(--admin-panel-color, #1a1a2e) !important;
        color: var(--admin-panel-color, #1a1a2e) !important;
    }

    /* Button groups */
    .btn-group,
    .btn-group-vertical {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .btn-group .btn,
    .btn-group-vertical .btn {
        flex: 0 0 auto !important;
    }

    /* Action buttons in tables */
    .table td .btn-group .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   10. MODALS
   ========================================================================== */
@media (max-width: 991px) {
    .modal {
        padding: 0 !important;
    }

    .modal-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
        padding: 0 !important;
    }

    .modal-content {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        max-height: calc(100vh - 20px) !important;
        overflow: hidden !important;
    }

    .modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #e8e8e8 !important;
        background: #fff !important;
    }

    .modal-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
    }

    .modal-header .close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 0 0 auto !important;
        font-size: 20px !important;
        color: #6c757d !important;
        background: #f0f0f0 !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }

    .modal-header .close:hover {
        background: #e8e8e8 !important;
    }

    .modal-body {
        padding: 20px !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 160px) !important;
    }

    .modal-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 15px 20px !important;
        border-top: 1px solid #e8e8e8 !important;
        background: #fafafa !important;
    }

    .modal-footer .btn {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }

    .modal-backdrop.show {
        opacity: 0.5 !important;
    }

    .modal-lg,
    .modal-xl {
        max-width: calc(100vw - 20px) !important;
    }
}

/* ==========================================================================
   11. SWEETALERT / TOAST
   ========================================================================== */
@media (max-width: 991px) {
    .swal2-popup {
        width: calc(100vw - 40px) !important;
        max-width: 380px !important;
        padding: 20px !important;
        border-radius: 16px !important;
        background: #fff !important;
    }

    .swal2-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #1a1a2e !important;
        margin-bottom: 10px !important;
    }

    .swal2-content {
        font-size: 14px !important;
        color: #495057 !important;
    }

    .swal2-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .swal2-actions .swal2-styled {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }

    .swal2-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 10px auto !important;
    }

    /* Toast notifications */
    .jq-toast-wrap {
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        max-width: calc(100vw - 30px) !important;
    }

    .jq-toast-single {
        width: 100% !important;
        padding: 15px !important;
        border-radius: 10px !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
    }
}

/* ==========================================================================
   12. LOGIN PAGE
   ========================================================================== */
@media (max-width: 991px) {
    .login-register {
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        background: linear-gradient(135deg, var(--admin-panel-color, #1a1a2e) 0%, #2d2d4a 100%) !important;
    }

    .login-box {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .login-box .card {
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        border: none !important;
    }

    .login-box .card-body {
        padding: 30px !important;
    }

    .login-logo {
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .login-logo img {
        max-height: 50px !important;
        width: auto !important;
    }

    .login-box h3 {
        font-size: 20px !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    .login-box p {
        font-size: 14px !important;
        color: #6c757d !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .login-box .form-control {
        height: 50px !important;
        padding: 12px 15px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .login-box .btn {
        height: 50px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
    }

    .login-box .form-check {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
}

/* ==========================================================================
   13. DASHBOARD SPECIFIC
   ========================================================================== */
@media (max-width: 991px) {
    /* Filter bar */
    .top-filter {
        margin-bottom: 20px !important;
    }

    .sis-card-head-select-box {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .sis-card-head-select-box .head-select-box {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    .sis-card-head-select-box .head-select-box label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    .sis-card-head-select-box select,
    .sis-card-head-select-box input {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    .sis-card-head-select-box .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* Top section */
    .admin-top-section {
        margin-bottom: 20px !important;
    }

    .top-title-section {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .top-title-left,
    .top-title-right {
        width: 100% !important;
    }

    .top-title-left {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .top-title-left .icon img {
        width: 40px !important;
        height: 40px !important;
    }

    .top-title-left h3 {
        font-size: 18px !important;
    }

    .top-title-left .counter {
        font-size: 14px !important;
        padding: 4px 10px !important;
    }

    .top-title-right {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .top-title-right .select-box {
        width: 100% !important;
    }

    .top-title-right select,
    .top-title-right .form-control {
        width: 100% !important;
        padding: 10px !important;
    }

    .top-title-right #daterange {
        padding: 10px 12px !important;
        font-size: 13px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }

    /* Charts */
    .card canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .chart-container {
        width: 100% !important;
        overflow: hidden !important;
    }

    #order_status,
    #sales-chart,
    #earnings-chart,
    .card canvas#order_status {
        height: 250px !important;
        max-height: 250px !important;
    }

    /* Dashboard rows */
    .daes-sec-sec {
        flex-direction: column !important;
    }

    .daes-sec-sec .col-lg-5,
    .daes-sec-sec .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   14. SETTINGS PAGES
   ========================================================================== */
@media (max-width: 991px) {
    .settings-tabs .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid #e8e8e8 !important;
        padding-bottom: 2px !important;
    }

    .settings-tabs .nav-tabs::-webkit-scrollbar {
        height: 3px !important;
    }

    .settings-tabs .nav-tabs::-webkit-scrollbar-thumb {
        background: #ccc !important;
        border-radius: 2px !important;
    }

    .settings-tabs .nav-tabs .nav-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .settings-tabs .nav-tabs .nav-link {
        padding: 12px 16px !important;
        font-size: 13px !important;
        color: #6c757d !important;
        border: none !important;
        border-radius: 8px 8px 0 0 !important;
        background: transparent !important;
    }

    .settings-tabs .nav-tabs .nav-link.active {
        color: var(--admin-panel-color, #1a1a2e) !important;
        border-bottom: 3px solid var(--admin-panel-color, #1a1a2e) !important;
        font-weight: 600 !important;
    }

    .settings-card {
        padding: 20px !important;
    }
}

/* ==========================================================================
   15. TABS & NAVIGATION
   ========================================================================== */
@media (max-width: 991px) {
    .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid #e8e8e8 !important;
    }

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

    .nav-tabs .nav-link {
        padding: 10px 14px !important;
        font-size: 13px !important;
        color: #6c757d !important;
        white-space: nowrap !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
    }

    .nav-tabs .nav-link.active {
        color: var(--admin-panel-color, #1a1a2e) !important;
        border-bottom-color: var(--admin-panel-color, #1a1a2e) !important;
        font-weight: 600 !important;
    }

    .nav-pills {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .nav-pills .nav-item {
        flex: 0 0 auto !important;
    }

    .nav-pills .nav-link {
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }
}

/* ==========================================================================
   16. PAGINATION
   ========================================================================== */
@media (max-width: 991px) {
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .pagination .page-item {
        flex-shrink: 0 !important;
    }

    .pagination .page-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
        font-size: 13px !important;
        color: #495057 !important;
        background: #fff !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
    }

    .pagination .page-link:hover {
        background: #f8f9fa !important;
    }

    .pagination .page-item.active .page-link {
        background: var(--admin-panel-color, #1a1a2e) !important;
        border-color: var(--admin-panel-color, #1a1a2e) !important;
        color: #fff !important;
    }
}

/* ==========================================================================
   17. ALERTS & NOTIFICATIONS
   ========================================================================== */
@media (max-width: 991px) {
    .alert {
        padding: 15px 18px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }

    .alert-dismissible .close {
        padding: 0 !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
    }

    .toast-container {
        left: 15px !important;
        right: 15px !important;
    }
}

/* ==========================================================================
   18. DATEPICKER & RANGEPICKER
   ========================================================================== */
@media (max-width: 991px) {
    .daterangepicker {
        width: calc(100vw - 30px) !important;
        max-width: 340px !important;
        left: 15px !important;
        right: 15px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    }

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

    .daterangepicker .calendar-table {
        padding: 10px !important;
    }

    .datepicker,
    .bootstrap-datepicker {
        width: 100% !important;
    }

    #customDateFilters {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #customDateFilters input {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   19. SCROLLBAR STYLING
   ========================================================================== */
@media (max-width: 991px) {
    ::-webkit-scrollbar {
        width: 5px !important;
        height: 5px !important;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }

    ::-webkit-scrollbar-thumb {
        background: #c1c1c1 !important;
        border-radius: 3px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1 !important;
    }
}

/* ==========================================================================
   20. EXTRA SMALL SCREENS (575px and below)
   ========================================================================== */
@media (max-width: 575px) {
    html {
        font-size: 13px !important;
    }

    .container-fluid {
        padding: 10px !important;
    }

    .page-titles {
        padding: 12px !important;
    }

    .page-titles h3 {
        font-size: 16px !important;
    }

    .page-titles .breadcrumb {
        display: none !important;
    }

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

    .card-box-with-icon .card-body {
        padding: 12px !important;
    }

    .card-box-with-icon .box-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .card-box-with-icon .box-icon img {
        width: 22px !important;
        height: 22px !important;
    }

    .card-box-with-icon h2 {
        font-size: 18px !important;
    }

    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    h4 { font-size: 14px !important; }
    h5 { font-size: 13px !important; }
    h6 { font-size: 12px !important; }

    /* Stats - 2 columns on very small screens */
    @media (min-width: 400px) {
        .col-6 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }

    /* Action buttons - hide text, show icon only */
    .table td .btn span:not(i) {
        display: none !important;
    }

    .table td .btn-group .btn {
        padding: 8px !important;
        min-width: 36px !important;
    }

    /* DT buttons - icon only */
    .dt-buttons .btn span:not(.dt-down-arrow) {
        display: none !important;
    }

    .dt-buttons .btn {
        min-width: 36px !important;
        padding: 8px !important;
    }

    /* Map containers */
    #map,
    #sectionMap,
    .map-container {
        height: 200px !important;
        width: 100% !important;
        border-radius: 10px !important;
        margin: 10px 0 !important;
    }

    /* Modal - full screen on very small devices */
    .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .modal-content {
        border-radius: 0 !important;
        height: 100% !important;
        max-height: 100vh !important;
    }
}

/* ==========================================================================
   21. FIX OVERFLOW
   ========================================================================== */
@media (max-width: 991px) {
    body {
        overflow-x: hidden !important;
    }

    #main-wrapper,
    .page-wrapper,
    .container-fluid,
    main,
    .fix-sidebar {
        overflow-x: hidden !important;
    }

    .page-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .search-filter-row,
    .filter-row,
    .top-filters {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .search-filter-row input,
    .search-filter-row select,
    .filter-row input,
    .filter-row select {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    /* Image preview section */
    .image-preview-section {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .image-preview-section img {
        max-width: 100% !important;
        max-height: 150px !important;
    }

    /* Input groups */
    .input-group {
        flex-wrap: nowrap !important;
    }

    .input-group > .form-control {
        flex: 1 1 auto !important;
    }

    .input-group > .input-group-append > .btn {
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   22. PRINT STYLES
   ========================================================================== */
@media print {
    .topbar,
    .left-sidebar,
    .mobile-menu-panel,
    .mobile-menu-overlay,
    .btn,
    .dt-buttons,
    .dataTables_filter,
    .dataTables_length {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}