/* ========================================
   GLOBAL MOBILE VIEW FOR ALL DASHBOARDS
   ======================================== */

/* Mobile Breakpoints */
:root {
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 992px;
    --lg-breakpoint: 1200px;
    --xl-breakpoint: 1400px;
}

/* =============== MOBILE UTILITIES =============== */
.mobile-only { display: none; }
.desktop-only { display: block; }

@media (max-width: 900px) {
    .mobile-only { display: block; }
    .desktop-only { display: none; }
    .hide-mobile { display: none !important; }
}

/* =============== GLOBAL MOBILE LAYOUT =============== */
@media (max-width: 900px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-size: 14px !important;
        overflow-x: hidden;
    }

    /* ========== SIDEBAR MOBILE ========== */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 2000 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3) !important;
    }

    .sidebar.active,
    .sidebar.open,
    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .sidebar.collapsed {
        width: 260px !important;
    }

    .sidebar-brand {
        padding: 16px 12px !important;
    }

    .sidebar-brand img {
        width: 32px !important;
        height: 32px !important;
    }

    .sidebar-brand-text {
        display: flex !important;
        opacity: 1 !important;
        width: auto !important;
    }

    .sidebar-brand-name {
        font-size: 14px !important;
    }

    .sidebar-brand-sub {
        font-size: 8px !important;
    }

    .user-info {
        opacity: 1 !important;
        width: auto !important;
    }

    .user-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .nav-item {
        padding: 10px 14px !important;
        font-size: 13px !important;
        gap: 10px !important;
    }

    .nav-item i {
        font-size: 16px !important;
    }

    /* ========== TOPBAR MOBILE ========== */
    .topbar,
    .navbar,
    .header {
        padding: 10px 12px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1500 !important;
        height: auto !important;
        min-height: 56px !important;
    }

    .topbar-content,
    .navbar-content,
    .header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Sidebar toggle button */
    .sidebar-toggle,
    .menu-toggle,
    .hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        font-size: 20px !important;
        color: inherit !important;
        padding: 6px !important;
        margin: 0 !important;
        z-index: 2001 !important;
    }

    /* ========== MAIN CONTENT MOBILE ========== */
    .main-content,
    .content,
    .container-main,
    .page-content {
        margin-left: 0 !important;
        margin-top: 56px !important;
        padding: 12px !important;
        width: 100% !important;
    }

    /* ========== CARDS & SECTIONS MOBILE ========== */
    .card,
    .section,
    .dashboard-card,
    .panel {
        margin-bottom: 12px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        font-size: 13px !important;
    }

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

    .card-header,
    .section-header {
        padding: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* ========== GRID MOBILE =============== */
    .grid,
    .dashboard-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .grid-2,
    .col-md-6 {
        grid-column: 1 / -1 !important;
    }

    .grid-3,
    .col-md-4 {
        grid-column: 1 / -1 !important;
    }

    .grid-4,
    .col-md-3 {
        grid-column: 1 / -1 !important;
    }

    /* ========== TABLES MOBILE =============== */
    table {
        font-size: 12px !important;
    }

    table th,
    table td {
        padding: 8px !important;
    }

    .table-responsive,
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ========== FORMS MOBILE =============== */
    input,
    select,
    textarea,
    .form-control,
    .input-field {
        font-size: 16px !important;
        padding: 10px !important;
        border-radius: 6px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        border: 1px solid var(--input-border, #ddd) !important;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
        border-color: #dc2626 !important;
    }

    .form-group,
    .input-group {
        margin-bottom: 14px !important;
        width: 100% !important;
    }

    label {
        display: block !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        margin-bottom: 6px !important;
        color: var(--text-secondary, #666) !important;
    }

    /* ========== BUTTONS MOBILE =============== */
    button,
    .btn,
    .button,
    input[type="button"],
    input[type="submit"] {
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        width: auto !important;
        min-height: 40px !important;
    }

    .btn-primary,
    .button-primary {
        background: #dc2626 !important;
        color: white !important;
    }

    .btn-primary:active,
    .btn-primary:hover {
        background: #991b1b !important;
    }

    .btn-secondary,
    .button-secondary {
        background: #f5f5f5 !important;
        color: #1a1a1a !important;
        border: 1px solid #e5e5e5 !important;
    }

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

    /* ========== MODALS MOBILE =============== */
    .modal,
    .dialog,
    .popup {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        z-index: 2500 !important;
    }

    .modal-backdrop,
    .dialog-backdrop {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    .modal-content,
    .dialog-content,
    .popup-content {
        width: 100% !important;
        background: white !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        animation: slideUp 0.3s ease-out !important;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .modal-header,
    .dialog-header {
        padding: 14px 14px 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

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

    .modal-close,
    .dialog-close {
        background: none !important;
        border: none !important;
        font-size: 24px !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ========== TYPOGRAPHY MOBILE =============== */
    h1,
    .h1 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    h2,
    .h2 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    h3,
    .h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    h4,
    .h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    p {
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }

    /* ========== SPACING MOBILE =============== */
    .mb-0 { margin-bottom: 0 !important; }
    .mb-1 { margin-bottom: 4px !important; }
    .mb-2 { margin-bottom: 8px !important; }
    .mb-3 { margin-bottom: 12px !important; }
    .mb-4 { margin-bottom: 16px !important; }
    .mb-5 { margin-bottom: 20px !important; }

    .mt-0 { margin-top: 0 !important; }
    .mt-1 { margin-top: 4px !important; }
    .mt-2 { margin-top: 8px !important; }
    .mt-3 { margin-top: 12px !important; }
    .mt-4 { margin-top: 16px !important; }
    .mt-5 { margin-top: 20px !important; }

    .p-0 { padding: 0 !important; }
    .p-1 { padding: 4px !important; }
    .p-2 { padding: 8px !important; }
    .p-3 { padding: 12px !important; }
    .p-4 { padding: 16px !important; }

    /* ========== DASHBOARD STATS MOBILE =============== */
    .stat-card,
    .dashboard-card,
    .stats-item {
        background: white !important;
        padding: 12px !important;
        border-radius: 8px !important;
        border: 1px solid #f0f0f0 !important;
        margin-bottom: 10px !important;
    }

    .stat-value,
    .card-value {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin: 6px 0 !important;
    }

    .stat-label,
    .card-label {
        font-size: 11px !important;
        color: #888 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* ========== FOOTER MOBILE =============== */
    .footer,
    .dashboard-footer {
        padding: 14px !important;
        font-size: 12px !important;
        margin-top: 20px !important;
    }

    /* ========== ALERTS/NOTIFICATIONS MOBILE =============== */
    .alert,
    .notification,
    .message {
        padding: 12px !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        font-size: 13px !important;
        border-left: 4px solid #dc2626 !important;
    }

    .alert-success {
        border-left-color: #16a34a !important;
        background: #f0fdf4 !important;
        color: #15803d !important;
    }

    .alert-warning {
        border-left-color: #ea580c !important;
        background: #fff7ed !important;
        color: #c2410c !important;
    }

    .alert-danger {
        border-left-color: #dc2626 !important;
        background: #fef2f2 !important;
        color: #991b1b !important;
    }

    /* ========== DROPDOWNS/MENUS MOBILE =============== */
    .dropdown,
    .menu {
        position: relative !important;
    }

    .dropdown-menu,
    .menu-content {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: white !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 6px !important;
        min-width: 160px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
    }

    .dropdown-item,
    .menu-item {
        display: block !important;
        padding: 8px 12px !important;
        color: #1a1a1a !important;
        text-decoration: none !important;
        cursor: pointer !important;
        font-size: 13px !important;
        transition: background 0.2s !important;
    }

    .dropdown-item:hover,
    .menu-item:hover {
        background: #f5f5f5 !important;
    }

    /* ========== BADGES/TAGS MOBILE =============== */
    .badge,
    .tag,
    .label {
        display: inline-block !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        background: #f0f0f0 !important;
        color: #1a1a1a !important;
    }

    .badge-primary,
    .tag-primary {
        background: rgba(220, 38, 38, 0.15) !important;
        color: #dc2626 !important;
    }

    .badge-success {
        background: rgba(22, 163, 74, 0.15) !important;
        color: #16a34a !important;
    }

    /* ========== LIST ITEMS MOBILE =============== */
    .list-item,
    .item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
    }

    .list-item:last-child {
        border-bottom: none !important;
    }

    .list-item:active,
    .list-item:hover {
        background: #fafafa !important;
    }

    .list-item-icon {
        min-width: 32px !important;
        text-align: center !important;
        font-size: 16px !important;
    }

    .list-item-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .list-item-title {
        font-size: 13px !important;
        font-weight: 500 !important;
        margin-bottom: 2px !important;
    }

    .list-item-subtitle {
        font-size: 11px !important;
        color: #888 !important;
    }

    /* ========== SIDE OVERLAY/DRAWER MOBILE =============== */
    .sidebar-overlay,
    .drawer-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0) !important;
        z-index: 1999 !important;
        transition: background 0.3s !important;
    }

    .sidebar-overlay.active,
    .drawer-overlay.active {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    /* ========== CUSTOM SCROLLBAR MOBILE =============== */
    ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 3px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    /* ========== FLEX UTILITIES MOBILE =============== */
    .flex {
        display: flex !important;
    }

    .flex-col {
        flex-direction: column !important;
    }

    .flex-wrap {
        flex-wrap: wrap !important;
    }

    .items-center {
        align-items: center !important;
    }

    .justify-between {
        justify-content: space-between !important;
    }

    .gap-2 {
        gap: 8px !important;
    }

    .gap-3 {
        gap: 12px !important;
    }

    /* ========== TEXT UTILITIES MOBILE =============== */
    .text-center {
        text-align: center !important;
    }

    .text-right {
        text-align: right !important;
    }

    .text-muted {
        color: #888 !important;
    }

    .text-bold,
    .font-bold {
        font-weight: 600 !important;
    }

    .text-sm,
    .text-small {
        font-size: 12px !important;
    }

    .text-lg,
    .text-large {
        font-size: 16px !important;
    }

    /* ========== VISIBILITY UTILITIES MOBILE =============== */
    .d-none {
        display: none !important;
    }

    .d-block {
        display: block !important;
    }

    .d-flex {
        display: flex !important;
    }

    .d-grid {
        display: grid !important;
    }

    /* ========== ANIMATIONS MOBILE =============== */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideIn {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .fade-in {
        animation: fadeIn 0.3s ease-out !important;
    }

    .slide-in {
        animation: slideIn 0.3s ease-out !important;
    }
}

/* =============== TABLET OPTIMIZATION (768px - 991px) =============== */
@media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        width: 70px !important;
    }

    .sidebar.expanded {
        width: 260px !important;
    }

    .sidebar-brand-text {
        opacity: 0 !important;
        width: 0 !important;
    }

    .sidebar.expanded .sidebar-brand-text {
        opacity: 1 !important;
        width: auto !important;
    }

    .main-content,
    .content {
        margin-left: 70px !important;
    }

    .sidebar.expanded ~ .main-content,
    .sidebar.expanded ~ .content {
        margin-left: 260px !important;
    }

    .card { font-size: 13px !important; }
    h1, .h1 { font-size: 22px !important; }
    h2, .h2 { font-size: 19px !important; }
}

/* =============== DARK MODE MOBILE =============== */
@media (max-width: 900px) {
    body.dark-mode {
        background: #0a0a0a !important;
        color: #e8e8e8 !important;
    }

    body.dark-mode .card,
    body.dark-mode .section,
    body.dark-mode .modal-content,
    body.dark-mode .dialog-content {
        background: #1a1a1a !important;
        border-color: #2a2a2a !important;
        color: #e8e8e8 !important;
    }

    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea,
    body.dark-mode .form-control {
        background: #2a2a2a !important;
        color: #e8e8e8 !important;
        border-color: #3a3a3a !important;
    }

    body.dark-mode .btn-secondary,
    body.dark-mode .button-secondary {
        background: #2a2a2a !important;
        color: #e8e8e8 !important;
        border-color: #3a3a3a !important;
    }

    body.dark-mode .list-item {
        border-color: #2a2a2a !important;
    }

    body.dark-mode .list-item:hover {
        background: #252525 !important;
    }

    body.dark-mode .dropdown-menu,
    body.dark-mode .menu-content {
        background: #1a1a1a !important;
        border-color: #2a2a2a !important;
    }

    body.dark-mode .dropdown-item:hover,
    body.dark-mode .menu-item:hover {
        background: #252525 !important;
    }
}

/* =============== LANDSCAPE ORIENTATION =============== */
@media (max-height: 600px) and (orientation: landscape) {
    .topbar,
    .navbar,
    .header {
        min-height: 50px !important;
    }

    .main-content,
    .content {
        margin-top: 50px !important;
        padding: 8px !important;
    }

    .card,
    .section {
        margin-bottom: 8px !important;
    }

    h1, .h1 { font-size: 18px !important; }
    h2, .h2 { font-size: 16px !important; }
    p { font-size: 12px !important; }
}

/* =============== PRINT STYLES =============== */
@media print {
    .sidebar,
    .topbar,
    .navbar,
    .header,
    .footer,
    .btn,
    .button,
    .modal,
    .dialog {
        display: none !important;
    }

    body,
    .main-content,
    .content {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}