/* ===============================================
   RESPONSIVE CSS — PREMIUM ENTERPRISE SAAS UI
   =============================================== */

/* -----------------------------------------------
   1. GLOBAL OVERFLOW PROTECTION & BASE SAFETY
   ----------------------------------------------- */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.flex-item, .grid-item, .card, .form-group, .form-input, .btn, .table-responsive, pre {
    min-width: 0;
    max-width: 100%;
}

p, span, td, th, div, code {
    overflow-wrap: anywhere;
}

/* -----------------------------------------------
   2. CORE DESIGN SYSTEM (SAAS / ENTERPRISE)
   ----------------------------------------------- */

/* Base Card System: Sharp, structured, border-reliant */
.card, 
.stat-card, 
.balance-card, 
.form-card, 
.service-card, 
.table-card, 
.recent-orders-card, 
.recent-activity-card,
.announcements-scroller-card,
.platform-icons-card,
.filter-card,
.info-card,
.api-key-card,
.api-code-card,
.api-doc-card,
.affiliate-card,
.affiliate-link-card,
.invoice-card,
.transactions-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 2px !important; /* Sharp, professional edges */
    box-shadow: none !important; /* Rely on borders, not floating shadows */
    transition: border-color 0.2s ease;
}

/* Buttons & Inputs: Structured, non-pill */
.btn,
.form-input,
.form-select,
textarea {
    border-radius: 2px !important;
    font-size: 14px !important; 
    font-weight: 500 !important;
}

/* Focus States: Sharp, professional */
.form-input:focus, 
.form-select:focus, 
textarea:focus {
    outline: none !important;
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 1px var(--color-gold) !important; /* Thin, solid focus ring */
}

/* Badges & Pills: Convert to sharp rectangles */
.badge {
    border-radius: 2px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* -----------------------------------------------
   3. PREMIUM DESKTOP UI (min-width: 1025px)
   ----------------------------------------------- */
@media (min-width: 1025px) {
    .main-wrapper {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Professional hover states */
    @media (hover: hover) {
        .stat-card:hover, 
        .service-card:hover, 
        .affiliate-card:hover {
            border-color: var(--color-gold) !important;
            transform: none !important; /* No floating app-like effect */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
        }
    }
}

/* Hide mobile bottom nav on desktop */
.mobile-nav {
    display: none;
}

/* -----------------------------------------------
   4. TABLET RESPONSIVE UI (max-width: 1024px)
   ----------------------------------------------- */
@media (max-width: 1024px) {
    .dashboard-row,
    .wallet-grid,
    .inbox-layout {
        grid-template-columns: 1fr;
    }

    .inbox-list { display: block; }
    .inbox-chat { display: none; }
    .inbox-layout.show-detail .inbox-list { display: none; }
    .inbox-layout.show-detail .inbox-chat {
        display: flex;
        flex-direction: column;
        min-height: 70vh;
    }
    .back-to-tickets-btn { display: flex !important; }
}

/* -----------------------------------------------
   5. MOBILE OPTIMIZATION (max-width: 768px)
   ----------------------------------------------- */
@media (max-width: 768px) {
    /* Layout & Navbar Fixes */
    .main-wrapper {
        margin-left: 0 !important;
        padding-top: 60px !important; 
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; 
        overflow-x: hidden;
    }

    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
        background-color: var(--bg-card) !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-shadow: none !important;
        height: 55px !important;
    }

    /* Sidebar / Drawer */
    .sidebar {
        transform: translateX(-100%);
        border-right: 1px solid var(--border-color) !important;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05) !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 1200;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar__header { position: sticky; top: 0; z-index: 2; background: var(--bg-sidebar); border-bottom: 1px solid var(--border-color); }
    .sidebar__nav { flex: 0 0 auto; min-height: auto; overflow: visible; }
    .sidebar__widgets { flex: 0 0 auto; margin-top: 0; padding: 16px !important; }
    .sidebar__footer { flex: 0 0 auto; border-top: 1px solid var(--border-color); }
    .app-container.sidebar-open .sidebar { transform: translateX(0); }
    .app-container.sidebar-collapsed .main-wrapper { margin-left: 0; }

    /* Navbar Adjustments */
    .navbar__toggle { display: block; }
    .navbar__search { display: none; }
    .profile__info { display: none; }
    .navbar__balance { 
        font-size: 13px !important; 
        padding: 4px 8px !important; 
        border: 1px solid var(--border-color) !important;
        border-radius: 2px !important;
        background: var(--bg-body) !important;
    }
    .navbar__right { gap: 8px !important; } 
    .navbar__icon-btn svg { width: 20px !important; height: 20px !important; }

    /* Content Spacing */
    .content-area { padding: 16px !important; }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 12px;
    }
    .page-title { font-size: 20px !important; font-weight: 700 !important; }

    /* Grid Stacking */
    .form-grid, .wallet-grid, .services-grid, .filter-grid, 
    .quick-actions-grid, .invoice-grid, .affiliate-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .form-group--full { grid-column: 1 / -1; }

    .settings-card { flex-direction: column; border: 1px solid var(--border-color) !important; }
    .tabs--vertical {
        flex-direction: row;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
    }
    .tabs--vertical .tab {
        border-right: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        border-radius: 0 !important;
    }
    .tabs--vertical .tab.active {
        border-right: none;
        border-bottom-color: var(--color-gold);
        background: transparent !important;
    }

    /* ===============================================
       STAT CARDS (Enterprise Data Blocks)
       =============================================== */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1px !important; /* 1px gap creates grid lines */
        margin-bottom: 20px !important;
        background: var(--border-color) !important; /* Grid line color */
        border: 1px solid var(--border-color) !important;
        border-radius: 2px !important;
        overflow: hidden;
    }
    .stat-card {
        padding: 16px !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: var(--bg-card) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .stat-card__top { margin-bottom: 8px !important; }
    .stat-card__label {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .stat-card__icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        border-radius: 2px !important;
        background: transparent !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-secondary) !important;
    }
    .stat-card__value, .balance-card__amount {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -0.5px !important;
    }

    /* ===============================================
       MOBILE SERVICE CARDS (Professional Listing)
       =============================================== */
    .service-card {
        padding: 16px !important;
        gap: 12px !important;
        min-height: auto !important; 
        display: flex !important;
        flex-direction: column !important;
    }
    .service-card__header {
        margin-bottom: 0 !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--border-color) !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .service-card__category {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-gold) !important;
    }
    .service-card__id-box {
        display: flex; align-items: center; gap: 4px;
        background: var(--bg-body, #f8f9fa);
        padding: 4px 8px; 
        border-radius: 2px;
        height: 28px; 
        border: 1px solid var(--border-color);
    }
    .service-card__id-box label { font-size: 10px !important; margin: 0 !important; color: var(--text-secondary); }
    .service-id-input { width: 45px !important; padding: 0 !important; font-size: 11px !important; border: none !important; background: transparent !important; text-align: right !important; }
    
    .service-card__title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .service-card__desc {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        color: var(--text-secondary) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Pricing & Limits: Clean Grid */
    .service-card__details {
        display: grid !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(45px, 0.5fr) minmax(70px, 0.8fr) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        align-items: center !important;
    }
    .service-card__rate { display: flex; flex-direction: column; gap: 2px; }
    .rate-label { font-size: 10px !important; text-transform: uppercase; font-weight: 600; }
    .rate-value { font-size: 16px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
    .rate-value-ugx { font-size: 11px !important; }
    .service-card__limits { display: contents !important; }
    .limit-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        border-left: 1px solid var(--border-color); padding-left: 8px;
    }
    .limit-label { font-size: 10px !important; text-transform: uppercase; font-weight: 600; }
    .limit-value { font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; color: var(--text-primary) !important; }
    
    /* Action Row */
    .service-card__footer {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        gap: 8px !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    .service-card__footer .badge {
        flex: 0 0 auto !important; 
        padding: 4px 8px !important;
        font-size: 10px !important;
        border-radius: 2px !important;
        white-space: nowrap !important;
    }
    .service-card__footer .btn {
        flex: 1 1 auto !important; 
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 2px !important;
    }

    /* ===============================================
       TABLES & FOOTER
       =============================================== */
    .footer { display: none !important; }
    .table-card, .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 2px !important;
        border: 1px solid var(--border-color) !important;
        padding: 0 !important;
    }
    .table {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        min-width: 600px; 
    }
    .table th, .table td {
        padding: 12px 16px !important;
        white-space: normal !important; 
        word-break: break-word !important; 
        vertical-align: middle !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .table thead th {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        background-color: var(--bg-body) !important;
        border-bottom: 2px solid var(--border-color) !important;
    }
    .table tbody tr:last-child td {
        border-bottom: none !important;
    }
    .table .btn--sm {
        padding: 4px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        border-radius: 2px !important;
    }

    /* ===============================================
       MOBILE BOTTOM NAVIGATION (Clean Bar)
       =============================================== */
    .mobile-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        box-shadow: none !important;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: 60px;
    }
    .mobile-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        flex: 1;
        height: 100%;
        gap: 4px;
        transition: color 0.2s ease;
        position: relative;
    }
    .mobile-nav__link:active, .mobile-nav__link:hover { 
        color: var(--color-gold); 
    }
    .mobile-nav__link.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        height: 2px;
        background: var(--color-gold);
    }
    .mobile-nav__link svg { width: 20px !important; height: 20px !important; }

    /* ===============================================
       INLINE RECEIPT & ALERT STYLES
       =============================================== */
    #receiptContainer {
        padding-top: 20px !important;
        margin-top: 20px !important;
    }
    #receiptContent {
        padding: 16px !important;
        font-size: 13px !important;
        border-radius: 2px !important;
        border: 1px solid var(--border-color) !important;
    }
    #receiptContent > div {
        flex-wrap: wrap !important;
        gap: 5px 10px !important;
        word-break: break-word !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid var(--border-color);
    }
    #receiptContent span {
        max-width: 65% !important;
        text-align: right !important;
        font-weight: 600 !important;
    }
    #copyReceiptBtn {
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 2px !important;
    }

    #advertCardContainer img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 2px !important;
    }
    #emergencyCardContainer .card,
    #advertCardContainer .card,
    #giveawayCardContainer .card {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 2px !important;
    }
    #emergencyCardContainer .card__title,
    #advertCardContainer .card__title,
    #giveawayCardContainer .card__title { font-size: 16px !important; }
    #emergencyCardContainer p,
    #advertCardContainer p,
    #giveawayCardContainer p { font-size: 13px !important; }
}

/* -----------------------------------------------
   6. SMALL PHONE ADJUSTMENTS (max-width: 480px)
   ----------------------------------------------- */
@media (max-width: 480px) {
    /* Modals act like full-width panels, but remain sharp */
    .modal-overlay {
        align-items: stretch !important; /* Full height stretch */
        padding: 20px !important; /* Margins around modal */
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: auto 0 0 0 !important; /* Align bottom */
        border-radius: 2px !important; /* Sharp corners */
        max-height: 85vh !important;
        overflow-y: auto !important;
        border: 1px solid var(--border-color) !important;
        border-top: 4px solid var(--color-gold) !important; /* Professional top border */
        box-shadow: 0 -4px 20px rgba(0,0,0,0.05) !important;
    }
}

/* -----------------------------------------------
   7. ULTRA-SMALL SCREEN ADJUSTMENTS (max-width: 360px)
   ----------------------------------------------- */
@media (max-width: 360px) {
    .content-area { padding: 12px !important; }
    .stats-grid { 
        grid-template-columns: 1fr !important; /* Stack on very small screens */
        gap: 1px !important; 
    }
    .stat-card { padding: 12px !important; }
    .stat-card__label { font-size: 10px !important; }
    .stat-card__value, .balance-card__amount { font-size: 18px !important; }
    
    .service-card { padding: 12px !important; }
    .service-card__title { font-size: 14px !important; }
    .rate-value { font-size: 15px !important; }
    .service-card__details { padding: 10px 0 !important; gap: 8px !important; }
    .limit-value { font-size: 12px !important; }
}

/* -----------------------------------------------
   8. PLATFORM SELECTOR GRID (Professional Nav)
   ----------------------------------------------- */
/* Default desktop: neat horizontal wrap */
.platform-icons-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 12px !important;
    padding: 16px !important;
}

.platform-icon-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 2px !important; /* Sharp edges */
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.platform-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
    transition: none !important;
}

.platform-icon-btn span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

/* Hover State: Border change, no floating */
@media (hover: hover) {
    .platform-icon-btn:hover {
        border-color: var(--color-gold) !important;
        background: var(--bg-body) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .platform-icon-btn:hover span,
    .platform-icon-btn:hover svg {
        color: var(--color-gold) !important;
    }
}

/* Active State: Strong visual cue */
.platform-icon-btn.active {
    border-color: var(--color-gold) !important;
    background: var(--color-gold) !important; /* Solid gold background */
}

.platform-icon-btn.active svg,
.platform-icon-btn.active span {
    color: var(--bg-card) !important; /* Contrast text */
    font-weight: 600 !important;
}

/* Mobile Adjustments for Platform Grid */
@media (max-width: 768px) {
    .platform-icons-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .platform-icon-btn {
        padding: 8px 4px !important;
        gap: 4px !important;
    }

    .platform-icon-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .platform-icon-btn span {
        font-size: 10px !important;
    }
}

@media (max-width: 360px) {
    .platform-icons-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)) !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    .platform-icon-btn {
        padding: 6px 2px !important;
    }
}

/* -----------------------------------------------
   9. ACCESSIBILITY & REDUCED MOTION
   ----------------------------------------------- */
.stat-card, .service-card, .quick-action-btn, .announcement-pill, .platform-icon-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn:focus-visible,
.stat-card:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.platform-icon-btn:focus-visible {
    outline: 2px solid var(--color-gold) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Touch Feedback: Subtle opacity change instead of scaling */
@media (hover: none) {
    .stat-card:active,
    .service-card:active,
    .quick-action-btn:active,
    .btn:active,
    .platform-icon-btn:active {
        transform: none !important;
        opacity: 0.8 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}