/* =========================================
   DIAMOND SOLUTION - MOBILE RESPONSIVE CSS
   Version: V.54.48
   Datum: 03.12.2025
   ========================================= */

/* ========== GLOBAL MOBILE SETTINGS - ULTRA FILIGRAN ========== */
@media (max-width: 991px) {
    
    /* Container Padding - Minimal */
    .dashboard-inner {
        padding: 10px !important;
    }
    
    .dashboard-container {
        padding: 10px !important;
    }
    
    /* Headers - Dezent aber lesbar */
    h3 {
        font-size: 17px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    
    h5 {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    /* Paragraphs kompakt */
    p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    /* Minimale Margins */
    .mb-4, .mb-sm-4 {
        margin-bottom: 12px !important;
    }
    
    .mt-4, .mt-sm-4 {
        margin-top: 12px !important;
    }
    
    .mb-3 {
        margin-bottom: 10px !important;
    }
    
    .mt-3 {
        margin-top: 10px !important;
    }
    
    .mb-2 {
        margin-bottom: 8px !important;
    }
    
    /* Alle divs mit inline padding/margin */
    div[style*="padding: 30px"] {
        padding: 16px !important;
    }
    
    div[style*="padding: 24px"] {
        padding: 14px !important;
    }
    
    div[style*="padding: 20px"] {
        padding: 14px !important;
    }
    
    div[style*="gap: 20px"] {
        gap: 12px !important;
    }
    
    div[style*="margin-bottom: 30px"] {
        margin-bottom: 16px !important;
    }
}

/* ========== SIDEBAR - MOBILE MENU - KOMPAKTER ========== */
@media (max-width: 991px) {
    .dashboard-sidebar {
        position: fixed !important;
        left: -260px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 260px !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
    
    .dashboard-sidebar.active {
        left: 0 !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Sidebar Logo kleiner */
    .dashboard-sidebar img[style*="max-width: 250px"] {
        max-width: 180px !important;
    }
    
    /* Sidebar Begrüßung kompakter */
    .dashboard-sidebar div[style*="padding: 0 20px 20px"] {
        padding: 0 12px 14px !important;
    }
    
    /* Sidebar Menu Items kompakter */
    .sidebar-menu > li > a {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    
    .sidebar-menu .submenu li a {
        padding: 9px 16px 9px 40px !important;
        font-size: 12px !important;
    }
    
    /* Mobile Menu Toggle Button */
    .mobile-menu-toggle,
    #dash-sidebar-toggler {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    /* Overlay when Sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9998;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    .dashboard-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ========== TOPBAR - MOBILE - KOMPAKTER ========== */
@media (max-width: 991px) {
    .dashboard-nav {
        padding: 10px 50px 10px 60px !important;
        min-height: 55px !important;
    }
    
    .dashboard-nav h4 {
        font-size: 16px !important;
    }
}

@media (max-width: 576px) {
    .dashboard-nav {
        padding: 8px 12px 8px 55px !important;
        min-height: 50px !important;
    }
    
    .dashboard-nav h4 {
        font-size: 15px !important;
    }
}

/* ========== VERIFICATION PAGES - MOBILE - KOMPAKTER ========== */
@media (max-width: 576px) {
    .verification-code-wrapper {
        max-width: 100% !important;
        padding: 15px 12px !important;
    }
    
    .verification-area {
        padding: 20px 16px !important;
    }
    
    .verification-area h5 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
}

/* ========== AUTH PAGES (LOGIN/REGISTER) - MOBILE - KOMPAKTER ========== */
@media (max-width: 576px) {
    .account-form {
        padding: 20px 16px !important;
    }
    
    .auth-page-logo img {
        max-width: 160px !important;
    }
    
    .form-group {
        margin-bottom: 16px !important;
    }
}

/* ========== GATEWAY CARDS (DEPOSIT/WITHDRAW) - MOBILE - KOMPAKTER ========== */
@media (max-width: 991px) {
    .gateway-card {
        padding: 16px !important;
    }
    
    .payment-system-list {
        margin-bottom: 16px !important;
        padding: 12px !important;
    }
    
    .payment-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    
    .payment-item__thumb {
        width: 45px !important;
        height: 22px !important;
    }
    
    .payment-item__name {
        font-size: 13px !important;
    }
}

@media (max-width: 576px) {
    .gateway-card {
        padding: 12px !important;
    }
    
    .payment-item {
        padding: 8px !important;
    }
    
    .deposit-info {
        padding: 8px 0 !important;
    }
    
    .deposit-info__title .text {
        font-size: 12px !important;
    }
    
    .deposit-info__input .text {
        font-size: 13px !important;
    }
}

/* ========== VIP PACKAGES - MOBILE - KOMPAKTER ========== */
@media (max-width: 991px) {
    .col-lg-4 {
        margin-bottom: 16px;
    }
    
    /* VIP Cards kompakter */
    div[style*="padding: 30px"] {
        padding: 20px !important;
    }
}

@media (max-width: 576px) {
    /* VIP Package Cards - Kompakter */
    .row.gy-4 > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    div[style*="padding: 30px"],
    div[style*="padding: 24px"] {
        padding: 16px !important;
    }
    
    /* VIP Package Icons kleiner */
    div[style*="width: 80px; height: 80px"] {
        width: 60px !important;
        height: 60px !important;
    }
    
    div[style*="font-size: 32px"] {
        font-size: 24px !important;
    }
}

/* ========== TABLES - MOBILE - NUR TABELLE SCROLLT, NICHT SEITE ========== */
@media (max-width: 768px) {
    /* Table-Responsive Container */
    div[style*="overflow-x: auto"] {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }
    
    /* Tabellen mit fester Breite */
    div[style*="overflow-x: auto"] table {
        width: 100% !important;
        min-width: 800px !important;
        table-layout: fixed !important;
        margin-bottom: 0 !important;
    }
    
    /* Spalten-Breiten festlegen (kein Umbruch) */
    div[style*="overflow-x: auto"] table th,
    div[style*="overflow-x: auto"] table td {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    
    /* Erste Spalte breiter */
    div[style*="overflow-x: auto"] table th:first-child,
    div[style*="overflow-x: auto"] table td:first-child {
        width: 40% !important;
        min-width: 200px !important;
    }
    
    /* Mittlere Spalten */
    div[style*="overflow-x: auto"] table th:nth-child(2),
    div[style*="overflow-x: auto"] table td:nth-child(2),
    div[style*="overflow-x: auto"] table th:nth-child(3),
    div[style*="overflow-x: auto"] table td:nth-child(3),
    div[style*="overflow-x: auto"] table th:nth-child(4),
    div[style*="overflow-x: auto"] table td:nth-child(4) {
        width: 15% !important;
        min-width: 100px !important;
    }
    
    /* Action-Spalte */
    div[style*="overflow-x: auto"] table th:last-child,
    div[style*="overflow-x: auto"] table td:last-child {
        width: 10% !important;
        min-width: 80px !important;
        text-align: center !important;
    }
    
    /* Custom Scrollbar für Tabellen */
    div[style*="overflow-x: auto"]::-webkit-scrollbar {
        height: 8px !important;
    }
    
    div[style*="overflow-x: auto"]::-webkit-scrollbar-track {
        background: rgba(30, 30, 46, 0.4) !important;
        border-radius: 4px !important;
    }
    
    div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #6EADD1, #5A9FC0) !important;
        border-radius: 4px !important;
    }
}
}

    /* Support Tickets bleiben normale Tabelle mit Scrolling */
    .support-tickets-card table tbody tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
}

/* ========== TRANSACTIONS - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    .transaction-item {
        margin-bottom: 10px !important;
    }
    
    .transaction-item .accordion-button {
        padding: 12px !important;
        font-size: 12px !important;
    }
    
    .transaction-item .tr-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        margin-right: 10px !important;
    }
    
    .transaction-item .trans-title {
        font-size: 13px !important;
    }
    
    .transaction-item .text-muted {
        font-size: 11px !important;
    }
    
    .transaction-item .accordion-body {
        padding: 12px !important;
    }
    
    .caption-list li {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }
    
    .caption-list .caption {
        font-size: 11px !important;
    }
}

/* ========== FILTER AREA - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    .filter-area {
        padding: 16px !important;
    }
    
    .filter-area .d-flex {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .filter-area .flex-grow-1 {
        width: 100% !important;
    }
    
    .custom-input-box {
        padding: 8px 12px !important;
    }
    
    .custom-input-box label {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
}

/* ========== REFERRALS TREE - MOBILE - SCROLLBAR ========== */
@media (max-width: 768px) {
    /* Tree Container scrollbar */
    div[style*="overflow-x: auto"]:has(.unilevel-tree) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .unilevel-tree {
        padding: 8px !important;
        min-width: max-content !important;
        width: auto !important;
    }
    
    .user-card {
        min-width: 120px !important;
        padding: 10px !important;
    }
    
    .user-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }
    
    .user-name {
        font-size: 12px !important;
    }
    
    .user-username {
        font-size: 10px !important;
    }
    
    .user-stats {
        gap: 8px !important;
    }
    
    .user-stat {
        font-size: 10px !important;
    }
    
    .tree-level {
        gap: 15px !important;
        margin: 20px 0 !important;
    }
    
    .level-badge {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
}

/* ========== STATS CARDS - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    /* Stats Grid - 2 Spalten mit weniger Gap */
    div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Stats Cards kompakter */
    div[style*="padding: 24px"] {
        padding: 14px !important;
    }
    
    div[style*="padding: 20px"] {
        padding: 12px !important;
    }
    
    /* Stats Zahlen kleiner */
    div[style*="font-size: 32px"] {
        font-size: 24px !important;
    }
    
    div[style*="font-size: 28px"] {
        font-size: 22px !important;
    }
    
    /* Stats Labels kleiner */
    div[style*="font-size: 13px"] {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    /* Stats Grid - 1 Spalte auf kleinen Phones */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ========== BUTTONS - SCHLANKER ABER HOCHWERTIG ========== */
@media (max-width: 768px) {
    .btn {
        min-height: 40px !important;
        padding: 9px 14px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    .btn--smd {
        min-height: 36px !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
    
    .btn i {
        font-size: 13px !important;
        margin: 0 2px !important;
    }
    
    .btn.w-100 {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }
}

/* ========== FORMS - MOBILE - SCHLANKER ========== */
@media (max-width: 576px) {
    .form-control,
    .form--control {
        font-size: 14px !important;
        min-height: 40px !important;
        padding: 9px 12px !important;
        border-radius: 8px !important;
    }
    
    .input-group-text {
        font-size: 13px !important;
        padding: 9px 12px !important;
    }
    
    .form-group {
        margin-bottom: 14px !important;
    }
    
    label,
    .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
}

/* ========== MODAL - MOBILE - KOMPAKTER ========== */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
    
    .modal-header {
        padding: 14px 16px !important;
    }
    
    .modal-title {
        font-size: 16px !important;
    }
    
    .modal-body {
        padding: 16px 14px !important;
    }
    
    .modal-footer {
        padding: 12px 16px !important;
    }
    
    .modal-body .form-group {
        margin-bottom: 14px !important;
    }
}

/* ========== BALANCE TRANSFER - MOBILE ========== */
@media (max-width: 768px) {
    .col-md-8 {
        max-width: 100% !important;
    }
}

/* ========== DEPOSIT/WITHDRAW INFO - MOBILE - SCROLLBAR ========== */
@media (max-width: 576px) {
    .deposit-info {
        font-size: 14px !important;
    }
    
    .deposit-info__title .text {
        font-size: 13px !important;
    }
    
    .deposit-info__input .text {
        font-size: 14px !important;
    }
    
    .total-amount .deposit-info__input .text {
        font-size: 16px !important;
    }
}

/* ========== BREITE INHALTE GENERELL - SCROLLBAR ========== */
@media (max-width: 768px) {
    /* Alle Listen die zu breit sein könnten */
    .list-group,
    ul.caption-list,
    .payment-system-list {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Breite Flex-Container */
    div[style*="display: flex"]:not(.d-flex) {
        flex-wrap: wrap !important;
    }
    
    /* Grid-Layouts die zu breit sind */
    div[style*="display: grid"][style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    div[style*="display: grid"][style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Breite Inhalte in Cards scrollbar */
    .card-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .card-body::-webkit-scrollbar {
        height: 6px !important;
    }
    
    .card-body::-webkit-scrollbar-track {
        background: rgba(30, 30, 46, 0.4) !important;
        border-radius: 3px !important;
    }
    
    .card-body::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #6EADD1, #5A9FC0) !important;
        border-radius: 3px !important;
    }
}

/* ========== DASHBOARD STATS - TOP 3 CARDS - KOMPAKTER ========== */
@media (max-width: 768px) {
    /* Dashboard Top Stats */
    div[style*="display: grid"][style*="grid-template-columns: repeat(3"] {
        gap: 10px !important;
    }
    
    div[style*="display: grid"][style*="grid-template-columns: repeat(3"] > div {
        padding: 12px !important;
    }
    
    div[style*="display: grid"][style*="grid-template-columns: repeat(3"] h4,
    div[style*="display: grid"][style*="grid-template-columns: repeat(3"] div[style*="font-size: 32px"] {
        font-size: 22px !important;
    }
}

@media (max-width: 576px) {
    /* 3 Spalten → 1 Spalte auf Mobile */
    div[style*="display: grid"][style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ========== DASHBOARD CHART - KOMPAKTER ========== */
@media (max-width: 768px) {
    /* Chart Section - Höhe reduziert */
    div[style*="height: 350px"],
    div[style*="height: 300px"] {
        height: 220px !important;
    }
    
    /* Chart Container */
    div[style*="padding: 20px"]:has(#multiLineChart) {
        padding: 14px !important;
    }
    
    #chartTypeSelect {
        padding: 6px 38px 6px 10px !important;
        font-size: 11px !important;
    }
    
    #chartTypeSelect + i {
        font-size: 10px !important;
    }
}

/* ========== PREVENT HORIZONTAL SCROLL - SEITE BLEIBT FIX ========== */
@media (max-width: 991px) {
    body {
        overflow-x: hidden !important;
    }
    
    .dashboard-inner {
        overflow-x: hidden !important;
    }
    
    .container,
    .row {
        overflow-x: hidden !important;
    }
    
    /* Cards bekommen scrollbaren Inhalt */
    .card,
    .custom--card,
    div[style*="background: linear-gradient"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    
    /* Scrollbar für Cards */
    .card::-webkit-scrollbar,
    .custom--card::-webkit-scrollbar,
    div[style*="background: linear-gradient"]::-webkit-scrollbar {
        height: 6px !important;
    }
    
    .card::-webkit-scrollbar-track,
    .custom--card::-webkit-scrollbar-track,
    div[style*="background: linear-gradient"]::-webkit-scrollbar-track {
        background: rgba(30, 30, 46, 0.4) !important;
        border-radius: 3px !important;
    }
    
    .card::-webkit-scrollbar-thumb,
    .custom--card::-webkit-scrollbar-thumb,
    div[style*="background: linear-gradient"]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #6EADD1, #5A9FC0) !important;
        border-radius: 3px !important;
    }
    
    /* Table-Responsive Container */
    .table-responsive,
    div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        display: block !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ========== TEXT READABILITY - MOBILE ========== */
@media (max-width: 576px) {
    p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    small {
        font-size: 12px !important;
    }
}

/* ========== TEMPLATE VERSION BADGE - MOBILE ========== */
@media (max-width: 576px) {
    .template-version {
        font-size: 10px !important;
        padding: 4px 8px !important;
        bottom: 10px !important;
        right: 10px !important;
    }
}

/* ========== CHARTS - MOBILE ========== */
@media (max-width: 768px) {
    .apexcharts-canvas {
        max-width: 100% !important;
    }
}

/* ========== ACCOUNT BALANCE - SIDEBAR - MOBILE - KOMPAKTER ========== */
@media (max-width: 991px) {
    .account-balance-box {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .account-balance-box h5 {
        font-size: 13px !important;
    }
    
    .account-balance-box .balance-amount {
        font-size: 20px !important;
    }
    
    .account-balance-box .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* ========== INFO TEXTE - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    .info-text,
    .info-text p,
    .info-text .text {
        font-size: 12px !important;
        line-height: 1.4 !important;
        padding-top: 10px !important;
    }
    
    small {
        font-size: 11px !important;
    }
}

/* ========== BORDERRADIUS - FILIGRANER ========== */
@media (max-width: 768px) {
    div[style*="border-radius: 16px"] {
        border-radius: 12px !important;
    }
    
    div[style*="border-radius: 12px"] {
        border-radius: 10px !important;
    }
}

/* ========== ICON SIZES - KOMPAKTER ========== */
@media (max-width: 768px) {
    .fas, .far, .fab, .las, .lar, .lab {
        font-size: inherit !important;
    }
    
    /* Große Icons reduzieren */
    i[style*="font-size: 24px"] {
        font-size: 20px !important;
    }
    
    i[style*="font-size: 20px"] {
        font-size: 18px !important;
    }
}

/* ========== REFERRAL LINK BOX - KOMPAKTER ========== */
@media (max-width: 576px) {
    #referralLink {
        padding: 10px !important;
        font-size: 11px !important;
    }
    
    button[onclick="copyReferralLink()"] {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
}

/* ========== TOUCH IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Größere Touch-Targets */
    a, button, .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Icon Buttons */
    .btn--icon {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Expand Buttons im Referral Tree */
    .expand-btn {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ========== AVOID TEXT CUTOFF ========== */
@media (max-width: 576px) {
    /* Word Break für lange Texte */
    .user-username,
    .trans-title,
    .payment-item__name {
        word-break: break-word !important;
    }
}

/* ========== SPACING IMPROVEMENTS - MOBILE - FILIGRANER ========== */
@media (max-width: 768px) {
    .mb-4, .mb-sm-4 {
        margin-bottom: 16px !important;
    }
    
    .mt-4, .mt-sm-4 {
        margin-top: 16px !important;
    }
    
    .mb-3 {
        margin-bottom: 12px !important;
    }
    
    .mt-3 {
        margin-top: 12px !important;
    }
    
    .gap-4 {
        gap: 12px !important;
    }
    
    .gap-3 {
        gap: 10px !important;
    }
    
    .gap-2 {
        gap: 8px !important;
    }
}

/* ========== CUSTOM SCROLLBAR - MOBILE VERSTECKEN ========== */
@media (max-width: 768px) {
    /* Native Scrollbars auf Mobile (Performance) */
    ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }
}

/* ========== IMAGES - RESPONSIVE ========== */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ========== REFERRAL LINK BOX - MOBILE ========== */
@media (max-width: 576px) {
    div[style*="referralLink"] {
        flex-direction: column !important;
    }
    
    #referralLink {
        width: 100% !important;
        margin-bottom: 10px !important;
        font-size: 12px !important;
    }
}

/* ========== ALERT BOXES - MOBILE - SCHLANKER ========== */
@media (max-width: 576px) {
    .alert {
        font-size: 12px !important;
        padding: 10px 12px !important;
        line-height: 1.4 !important;
        border-radius: 8px !important;
    }
    
    .alert i {
        font-size: 14px !important;
    }
}

/* ========== CARDS - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    .card,
    .custom--card {
        margin-bottom: 12px !important;
    }
    
    .card-header {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    
    .card-body {
        padding: 14px !important;
    }
    
    .card-footer {
        padding: 12px 14px !important;
    }
}

/* ========== LIST GROUPS - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    .list-group-item {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* ========== BADGES - MOBILE - KOMPAKTER ========== */
@media (max-width: 768px) {
    .badge {
        padding: 4px 10px !important;
        font-size: 10px !important;
        border-radius: 5px !important;
    }
}

/* ========== VERIFICATION CODE - MOBILE - KOMPAKTER ========== */
@media (max-width: 576px) {
    .verification-code input {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
        margin: 0 4px !important;
    }
}

/* ========== INVOICES - MOBILE ========== */
@media (max-width: 768px) {
    .invoice-table {
        display: block !important;
        overflow-x: auto !important;
    }
}

/* ========== LANDSCAPE ORIENTATION - TABLETS ========== */
@media (max-width: 991px) and (orientation: landscape) {
    .dashboard-sidebar {
        width: 250px !important;
    }
    
    .dashboard-nav {
        padding: 10px 15px 10px 60px !important;
    }
}

/* ========== SAFE AREA - NOTCH DEVICES (iPhone X+) ========== */
@supports (padding: max(0px)) {
    .dashboard-nav {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
    }
    
    .dashboard-sidebar {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
    }
}

/* ========== EXTRA SMALL PHONES (<375px) - ULTRA KOMPAKT ========== */
@media (max-width: 374px) {
    .dashboard-inner {
        padding: 8px !important;
    }
    
    h3 {
        font-size: 16px !important;
    }
    
    h5 {
        font-size: 13px !important;
    }
    
    .btn {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }
    
    .payment-item {
        padding: 8px !important;
    }
    
    div[style*="padding: 30px"],
    div[style*="padding: 24px"],
    div[style*="padding: 20px"] {
        padding: 12px !important;
    }
    
    div[style*="gap: 20px"] {
        gap: 8px !important;
    }
}