/**
 * KBilling Client Portal — Mobile Responsive Layer
 * Extends templates/default/css/kb-client.css
 * Covers: ≤992px tablet, ≤768px phablet, ≤576px phone, ≤400px small phone
 */

/* ==========================================================================
   Tablet (≤ 992px)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ── Layout: stack main and sidebar vertically ── */
    .kb-layout {
        flex-direction: column !important;
    }
    .kb-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important; /* Sidebar goes below content on mobile */
        margin-top: 16px !important;
    }
    .kb-content-area,
    .kb-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ── Header topbar: compact, hide non-essential text ── */
    .kb-topbar > .container {
        min-height: 52px !important;
        padding: 0 12px !important;
    }

    .kb-toplinks { display: none !important; } /* Hide secondary top links on tablet */

    /* ── Navbar: Bootstrap handles collapse, but tune styles ── */
    .kb-navbar { border-bottom: none !important; }
    .kb-navbar .navbar-collapse {
        background: #0f172a !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding: 6px 12px 10px !important;
    }
    .kb-navbar .navbar-nav .nav-link {
        padding: 10px 14px !important;
        border-radius: 6px !important;
        margin: 2px 0 !important;
    }
    .kb-navbar .navbar-nav .nav-link.active,
    .kb-navbar .navbar-nav .show > .nav-link {
        border-bottom-color: transparent !important;
    }
    .kb-navbar .dropdown-menu {
        background: rgba(30,41,59,0.95) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        margin: 4px 0 8px 24px !important;
        box-shadow: none !important;
        padding: 6px !important;
    }
    .kb-navbar .dropdown-menu .dropdown-item {
        color: #e2e8f0 !important;
        border-radius: 4px !important;
        padding: 8px 12px !important;
        min-height: 40px !important;
    }
    .kb-navbar .dropdown-menu .dropdown-item:hover {
        background: rgba(2,132,199,0.2) !important;
        color: #fff !important;
    }
    .kb-navbar .navbar-toggler {
        border-color: rgba(255,255,255,0.3) !important;
        padding: 6px 10px !important;
    }
    .kb-navbar .navbar-toggler-icon { filter: invert(1) !important; }

    /* ── Cart & account links ── */
    .kb-cart-link .kb-cart-label,
    .kb-account-toggle .kb-account-name {
        display: none !important;
    }

    /* ── Footer grid: 2 columns ── */
    .kb-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    /* ── Tables responsive ── */
    .kb-panel .table-responsive,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 !important;
    }

    /* ── Page header wraps ── */
    .kb-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .kb-page-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    /* ── Nav tabs scroll ── */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 1px !important;
    }
    .nav-tabs::-webkit-scrollbar { display: none !important; }
    .nav-tabs .nav-link { white-space: nowrap !important; }

    /* ── Breadcrumb wraps ── */
    .kb-breadcrumb .breadcrumb { flex-wrap: wrap !important; gap: 2px 0 !important; }
}

/* ==========================================================================
   Phablet (≤ 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* ── Narrower padding ── */
    .kb-main { padding: 16px 0 32px !important; }

    /* ── Page title smaller ── */
    .kb-page-title, .kb-page-header h1 { font-size: 18px !important; }
    .kb-page-subtitle { font-size: 12.5px !important; }

    /* ── Panel headings ── */
    .kb-panel-heading { padding: 9px 14px !important; }
    .kb-panel-title { font-size: 13.5px !important; }
    .kb-panel-body { padding: 12px 14px !important; }

    /* ── Dashboard service tiles: 2-column grid ── */
    .kb-service-grid,
    .row.row-cols-md-2,
    .row.row-cols-lg-3 {
        --bs-gutter-x: 0.65rem !important;
        --bs-gutter-y: 0.65rem !important;
    }

    /* ── Footer single column on phone ── */
    .kb-footer-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .kb-footer-inner { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .kb-footer-powered { margin-left: 0 !important; padding-left: 0 !important; border-left: none !important; }

    /* ── Invoice: more compact ── */
    .kb-invoice { padding: 16px 12px !important; font-size: 13.5px !important; }
    .kb-invoice-header { flex-direction: column !important; gap: 10px !important; }
    .kb-invoice-to, .kb-invoice-from { font-size: 12.5px !important; }
    .kb-invoice-table th, .kb-invoice-table td { padding: 6px 8px !important; font-size: 12.5px !important; }

    /* ── Support ticket thread ── */
    .kb-ticket-msg { padding: 10px 12px !important; margin-bottom: 12px !important; }
    .kb-ticket-msg-meta { flex-wrap: wrap !important; gap: 4px !important; font-size: 11.5px !important; }

    /* ── Service details card row ── */
    .kb-service-row,
    .kb-detail-row {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .kb-detail-label { min-width: unset !important; font-size: 12px !important; }

    /* ── Sidebar: shown below content, no sticky on mobile ── */
    .kb-sidebar {
        position: static !important;
    }

    /* ── Brand text ── */
    .kb-brand-name { font-size: 16px !important; }
    .kb-brand-sub { font-size: 9.5px !important; }

    /* ── Topbar right: tighter ── */
    .kb-topbar-right { gap: 4px !important; }
    .kb-cart-link, .kb-account-toggle {
        padding: 5px 8px !important;
        font-size: 12.5px !important;
        gap: 5px !important;
    }
}

/* ==========================================================================
   Mobile phone (≤ 576px)
   ========================================================================== */
@media (max-width: 575.98px) {

    /* ── Even tighter padding ── */
    .kb-main { padding: 12px 0 24px !important; }

    /* ── Brand: smaller ── */
    .kb-brand-name { font-size: 15px !important; }
    .kb-brand-sub { display: none !important; }
    .kb-brand-mark { width: 30px !important; height: 30px !important; font-size: 14px !important; }

    /* ── Topbar height ── */
    .kb-topbar > .container { min-height: 48px !important; padding: 0 10px !important; gap: 8px !important; }

    /* ── Cart & account: icon only ── */
    .kb-cart-link { padding: 5px 8px !important; font-size: 0 !important; gap: 0 !important; }
    .kb-cart-link i { font-size: 18px !important; color: #38bdf8 !important; }
    .kb-cart-count { font-size: 10px !important; }
    .kb-account-toggle { padding: 5px 8px !important; font-size: 0 !important; gap: 0 !important; }
    .kb-account-toggle i { font-size: 18px !important; }
    .kb-account-toggle .dropdown-toggle::after { display: none !important; }

    /* ── Status dot: hide on phone ── */
    .kb-status-dot { display: none !important; }

    /* ── Modal: sheet style from bottom ── */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        align-items: flex-end !important;
    }
    .modal-dialog.modal-dialog-centered {
        min-height: unset !important;
        align-items: flex-end !important;
        margin: 0 !important;
    }
    .modal-content {
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .modal-lg .modal-content,
    .modal-xl .modal-content {
        max-height: 92vh !important;
    }

    /* ── Panels tighter ── */
    .kb-panel { margin-bottom: 12px !important; }
    .kb-panel-heading { padding: 8px 12px !important; }
    .kb-panel-body { padding: 10px 12px !important; }
    .kb-panel-title { font-size: 13px !important; }

    /* ── Tables ultra-compact ── */
    .table th { font-size: 11px !important; padding: 5px 6px !important; white-space: nowrap !important; }
    .table td { font-size: 12.5px !important; padding: 5px 6px !important; }

    /* ── Buttons ── */
    .btn { font-size: 0.8rem !important; padding: 0.35rem 0.7rem !important; }
    .btn-sm { font-size: 0.72rem !important; padding: 0.22rem 0.5rem !important; }

    /* ── Breadcrumb strip: compact ── */
    .kb-breadcrumb .breadcrumb { font-size: 11.5px !important; padding: 8px 0 !important; }

    /* ── Labels ── */
    .kb-label { font-size: 10.5px !important; padding: 2px 6px !important; }

    /* ── Flash alerts ── */
    .kb-flash .alert { padding: 10px 12px !important; font-size: 13px !important; }

    /* ── Domain status ribbon ── */
    .kb-domain-row { flex-wrap: wrap !important; gap: 4px !important; }

    /* ── Action buttons below service cards: full width ── */
    .kb-service-actions { flex-direction: column !important; }
    .kb-service-actions .btn { width: 100% !important; }
}

/* ==========================================================================
   Extra-small (≤ 400px)
   ========================================================================== */
@media (max-width: 400px) {

    .kb-topbar > .container { padding: 0 8px !important; gap: 6px !important; }
    .kb-main { padding: 8px 0 20px !important; }
    .kb-panel-body { padding: 8px 10px !important; }

    /* Freeze first column in data tables for reference */
    .table-responsive table th:first-child,
    .table-responsive table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: #ffffff !important;
        z-index: 1 !important;
        box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
    }

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

/* ==========================================================================
   Touch target improvements (touch devices)
   ========================================================================== */
@media (pointer: coarse) {
    .btn, .dropdown-item, .nav-link, .list-group-item {
        min-height: 40px !important;
    }
    .btn-sm { min-height: 34px !important; }
    .kb-panel-list-item { min-height: 42px !important; }
    .form-control, .form-select {
        height: 42px !important;
        font-size: 14px !important;
    }
    .form-control-sm, .form-select-sm {
        height: 36px !important;
        font-size: 13px !important;
    }
    .form-check-input { width: 1.2em !important; height: 1.2em !important; }
    input[type="checkbox"], input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
    }
}

/* ==========================================================================
   Navigation: Make dropdown items easier to tap on mobile
   ========================================================================== */
@media (max-width: 991.98px) {
    .kb-navbar .navbar-nav .dropdown-menu .dropdown-item {
        min-height: 42px !important;
        padding: 9px 14px !important;
        font-size: 13.5px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Full-width navbar collapse */
    .kb-navbar .navbar-collapse {
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Account dropdown: bottom sheet style */
    .kb-account-dropdown.dropdown-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 1055 !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15) !important;
    }
}

/* ==========================================================================
   Print: suppress mobile-only elements
   ========================================================================== */
@media print {
    .kb-sidebar { display: none !important; }
}