/* ====================================================================
   AZADRAH — Responsive Pro Layer v5
   Shared fixes for public pages, user panel and admin panel.
   Focused on: Header, Mobile Menu, Auth Buttons, RTL support
   ==================================================================== */

html { overflow-x: clip; }
body { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

/* ====================================================================
   1. MODERN SHARED SURFACES
   ==================================================================== */
.card-panel,
.table-card,
.panel-card,
.info-card,
.stat-box,
.plan,
.feature,
.summary,
.auth-card {
    border-color: rgba(148,163,184,.22) !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.055) !important;
}

.card-panel:hover,
.panel-card:hover,
.plan:hover,
.feature:hover {
    box-shadow: 0 18px 48px rgba(15,23,42,.085) !important;
}

/* Prevent layout breaking */
.panel-page,
.card-panel,
.table-card,
.config-card,
.cart-item,
.order-card,
.ticket,
.modal-box { min-width: 0 !important; }

code, pre, .mono, .config-link, .link-box, td, th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ====================================================================
   2. TABLES — touch-friendly
   ==================================================================== */
.table-card { overflow: hidden; }
.table-card > div[style*="overflow-x:auto"],
.table-responsive,
.table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cfg-table,
.table-card table {
    min-width: 760px;
}

/* ====================================================================
   3. FORM ERGONOMICS
   ==================================================================== */
.input, .select, .textarea,
.set-input, .set-textarea {
    min-height: 44px;
    font-size: 14px !important;
}
.textarea, .set-textarea { min-height: 112px; }

.btn, .btn-mini, .hdr-btn, .cc-btn, .mini-btn {
    min-height: 40px;
    touch-action: manipulation;
}

/* ====================================================================
   4. PUBLIC HEADER — CRITICAL FIXES
   ==================================================================== */
.site-header {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar {
    gap: 12px;
    min-width: 0;
}

.header-actions {
    min-width: 0;
    flex-shrink: 0;
}

/* --- Brand --- */
.brand {
    min-width: 0;
    flex-shrink: 1;
}

/* --- Desktop auth buttons --- */
.auth-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- Mobile menu button --- */
.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all .22s cubic-bezier(.2,.9,.3,1.05);
    flex-shrink: 0;
    padding: 0;
}

.mobile-menu-btn:hover,
.mobile-menu-btn.active {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-dark);
}

/* ====================================================================
   5. MOBILE MENU DRAWER
   ==================================================================== */
.mobile-menu-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
}

.mobile-menu-drawer.open {
    display: block;
    pointer-events: auto;
}

.mobile-menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s;
}

.mobile-menu-drawer.open .mobile-menu-overlay {
    opacity: 1;
}

.mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100%;
    background: var(--surface);
    box-shadow: -20px 0 60px -20px rgba(15,23,42,.4);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2,.9,.3,1.05);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-drawer.open .mobile-menu-panel {
    transform: translateX(0);
}

.mobile-menu-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.mobile-menu-close {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    display: grid;
    place-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
}

.mobile-menu-close:hover {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #fecaca;
}

.mobile-menu-body {
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-menu-body a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 13px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-menu-body a:hover,
.mobile-menu-body a:active {
    background: var(--surface-2);
    color: var(--text);
}

.mobile-menu-body a i {
    width: 22px;
    text-align: center;
    font-size: 15px;
    color: var(--primary);
    flex-shrink: 0;
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 4px;
    border-radius: 1px;
}

.mobile-menu-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 15px 4px;
}

.mobile-auth-buttons {
    display: grid;
    gap: 10px;
    margin-top: 6px;
    padding: 0 2px;
}

.mobile-auth-buttons .btn-login,
.mobile-auth-buttons .btn-register {
    justify-content: center;
    padding: 13px 18px;
    font-size: 13.5px;
    width: 100%;
    min-height: 48px;
}

.mobile-menu-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}

.mobile-menu-footer .muted {
    font-size: 11px;
    text-align: center;
    line-height: 1.8;
}

/* ====================================================================
   6. PANEL LAYOUT REFINEMENTS
   ==================================================================== */
.panel-shell {
    background: radial-gradient(circle at 15% 0%, #f8fafc 0, #f1f5f9 38%, #eef2f7 100%) !important;
}

.panel-top {
    box-shadow: 0 8px 28px rgba(15,23,42,.035) !important;
}

.panel-page {
    max-width: 1600px;
    margin-inline: auto !important;
}

/* ====================================================================
   7. COMMON DASHBOARD GRIDS
   ==================================================================== */
.stats-5, .stats-4, .stats-3,
.kpi-grid, .quick-grid, .mini-grid,
.plan-grid, .features, .apps-mini-grid,
.config-grid, .ud-config-grid {
    min-width: 0;
}

@media (max-width: 1180px) {
    .stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .stats-4, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .cfg-grid, .two-col, .admin-grid, .dashboard-grid, .profile-grid {
        grid-template-columns: 1fr !important;
    }
    .panel-page { padding-inline: 18px !important; }
}

/* ====================================================================
   8. TABLET RESPONSIVE
   ==================================================================== */
@media (max-width: 900px) {
    .container { width: min(100% - 28px, 1180px) !important; }

    /* Header */
    .site-header .navbar {
        min-height: 64px !important;
        height: auto !important;
        padding-block: 9px !important;
    }

    .nav-links { display: none !important; }
    .auth-buttons { display: none !important; }
    .mobile-menu-btn { display: inline-flex !important; }

    .brand { min-width: 0; flex-shrink: 1; }
    .brand > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
    }

    /* Layouts */
    .hero-grid,
    .shop-layout,
    .checkout-grid,
    .co-layout,
    .cart-layout,
    .set-layout,
    .cfg-grid,
    .grid-2,
    .form-grid,
    .form-grid-3 {
        grid-template-columns: 1fr !important;
    }

    .plan-grid,
    .features,
    .apps-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Panel */
    .panel-main { min-width: 0 !important; }
    .panel-top { align-items: flex-start !important; }
    .panel-top-actions { width: auto !important; }
    .panel-page { padding: 18px 16px !important; gap: 14px !important; }

    .filter-bar form,
    .toolbar,
    .page-heading,
    .section-head,
    .tc-head,
    .cp-head {
        min-width: 0;
    }

    .filter-bar form {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .filter-bar form .input {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ====================================================================
   9. MOBILE RESPONSIVE
   ==================================================================== */
@media (max-width: 640px) {
    :root { --mobile-gutter: 12px; }

    body { font-size: 14px; }
    .container { width: calc(100% - (var(--mobile-gutter) * 2)) !important; }

    /* Header */
    .site-header .brand { font-size: 15px !important; gap: 9px !important; }
    .site-header .brand-mark {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    .site-header .brand > span:last-child {
        max-width: 120px;
    }

    .header-actions { gap: 6px !important; }

    .cart-pill {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .cart-pill > span:not(.cart-count) { display: none !important; }
    .cart-pill .cart-count {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .mobile-menu-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
    }

    /* Hero */
    .hero { padding-top: 34px !important; padding-bottom: 48px !important; }
    .hero h1 { font-size: clamp(28px, 9vw, 38px) !important; line-height: 1.25 !important; }
    .hero p { font-size: 14px !important; line-height: 1.9 !important; }
    .hero-actions { display: grid !important; grid-template-columns: 1fr !important; }
    .hero-actions .btn { width: 100% !important; justify-content: center !important; }

    /* Sections */
    .section { padding-block: 42px !important; }
    .section-head { align-items: flex-start !important; gap: 12px !important; }
    .section-head h2 { font-size: 23px !important; line-height: 1.45 !important; }

    /* Grids */
    .plan-grid, .features, .apps-mini-grid,
    .stats-5, .stats-4, .stats-3, .kpi-grid,
    .config-grid, .ud-config-grid,
    .mini-grid {
        grid-template-columns: 1fr !important;
    }

    .grid-2, .form-grid, .form-grid-3 { grid-template-columns: 1fr !important; }
    .grid-full { grid-column: auto !important; }

    /* Panel */
    .panel-top { padding: 10px 12px !important; gap: 8px !important; }
    .panel-title h1 { font-size: 15px !important; }
    .panel-page { padding: 12px !important; }
    .panel-footer { padding-inline: 12px !important; }

    .card-panel, .table-card, .panel-card, .info-card, .stat-box {
        border-radius: 16px !important;
    }

    /* Filters */
    .filter-bar { gap: 10px !important; }
    .filter-bar form { grid-template-columns: 1fr !important; }
    .filter-bar form > * { width: 100% !important; min-width: 0 !important; }
    .chip-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .chip-tabs::-webkit-scrollbar { display: none; }
    .chip-tab { flex: 0 0 auto; white-space: nowrap; }

    /* Cards */
    .cc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .cc-actions, .row-actions { flex-wrap: wrap !important; }

    /* Modal */
    .modal-bg { padding: 10px !important; align-items: flex-end !important; }
    .modal-box {
        width: 100% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 20px 20px 12px 12px !important;
    }

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

    /* Tables */
    .table-card { margin-inline: 0 !important; }
    .cfg-table, .table-card table { min-width: 700px; }
}

/* ====================================================================
   10. VERY SMALL MOBILE
   ==================================================================== */
@media (max-width: 420px) {
    .hide-mobile-sm { display: none !important; }

    .header-actions .hdr-btn {
        width: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .header-actions .hdr-btn i { margin: 0 !important; }
    .panel-top-actions .btn span { display: none !important; }
    .cc-meta { grid-template-columns: 1fr 1fr !important; }

    .site-header .brand > span:last-child {
        max-width: 90px;
        font-size: 14px;
    }
}

/* ====================================================================
   11. REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ====================================================================
   12. PANEL LAYOUTS — RESPONSIVE FIXES
   ==================================================================== */
@media (max-width: 1100px) {
    .ut-layout,
    .uo-layout,
    .un-layout,
    .tk-layout,
    .set-layout,
    .up-layout,
    .cfg-grid,
    .cpn-grid,
    .pl-grid,
    .co-layout,
    .cart-layout {
        grid-template-columns: 1fr !important;
    }

    .set-sidebar,
    .co-sidebar {
        position: static !important;
        top: auto !important;
    }

    .stats-5 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
    .stats-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

    .mini-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .how-grid    { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .kpi-row     { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .mini-row    { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

    .rh-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
    /* Panel Header */
    .panel-top {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .panel-top::-webkit-scrollbar { display: none; }
    .panel-top-actions { flex-shrink: 0 !important; }

    /* Panel Cards */
    .panel-card { max-height: none !important; }

    /* Thread & Notifications */
    .thread-body { padding: 14px !important; }
    .notif-item { grid-template-columns: 38px 1fr !important; }
    .notif-item .notif-actions { grid-column: 2 !important; margin-top: 8px !important; }
}

@media (max-width: 640px) {
    /* Grids in panels */
    .stats-5, .stats-4, .stats-3,
    .mini-grid-4, .mini-grid,
    .how-grid, .kpi-row, .mini-row {
        grid-template-columns: 1fr !important;
    }
    .stats-5, .stats-4 { grid-template-columns: repeat(2, 1fr) !important; }

    /* Welcome & Hero Cards */
    .welcome,
    .welcome-user,
    .referral-hero {
        padding: 18px !important;
        border-radius: 18px !important;
    }
    .welcome .wc-actions,
    .welcome-user .wu-actions { width: 100% !important; }
    .wu-btn,
    .wc-btn { flex: 1 1 auto !important; justify-content: center !important; }

    /* Referral */
    .rh-title { font-size: 22px !important; }
    .rh-qr-box { max-width: 180px !important; }
    .rh-share-row { grid-template-columns: 1fr !important; }

    /* Filter bar - single column */
    .filter-bar form {
        grid-template-columns: 1fr !important;
    }
    .filter-bar form > * {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Modal */
    .modal-box {
        max-height: 92vh !important;
        border-radius: 18px !important;
    }

    /* Profile / Notif layouts */
    .notif-item { padding: 14px !important; }
    .notif-icon { width: 38px !important; height: 38px !important; font-size: 15px !important; }

    /* Chart */
    .chart { height: 160px !important; }
    .chart .bar-label { font-size: 9.5px !important; }

    /* Cards in cc-meta */
    .cc-meta { grid-template-columns: repeat(2, 1fr) !important; }

    /* Item cards */
    .item-card { grid-template-columns: 40px 1fr !important; }
    .item-card .it-price { grid-column: 2 !important; text-align: right !important; }

    /* Thread */
    .thread-head { padding: 14px 16px !important; }
    .thread-actions { padding: 12px 14px !important; }
    .reply-form { padding: 14px !important; }
}

@media (max-width: 420px) {
    .stats-5, .stats-4 { grid-template-columns: 1fr !important; }
    .rh-title { font-size: 20px !important; }
    .profile-avatar { width: 72px !important; height: 72px !important; font-size: 28px !important; }
    .welcome-avatar { width: 56px !important; height: 56px !important; font-size: 22px !important; }
    .kind-tabs { width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; }
    .kind-tab { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ====================================================================
   13. MOBILE MENU DRAWER — HARD FIX
   ==================================================================== */
@media (max-width: 900px) {
    .mobile-menu-drawer {
        display: none !important;
    }
    .mobile-menu-drawer.open {
        display: block !important;
    }
}

/* ====================================================================
   14. TABLE SCROLL WRAPPER
   ==================================================================== */
@media (max-width: 900px) {
    .table-card,
    .panel-card,
    .card-panel {
        overflow: visible !important;
    }
    .table-card > div[style*="overflow-x"],
    .panel-card > div[style*="overflow-x"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ====================================================================
   AZADRAH — Responsive Pro Layer v6 Final Hardening
   Public site + user panel + admin panel
   ==================================================================== */

/* --- Global overflow and sizing safety --- */
html,
body {
    width: 100%;
    max-width: 100%;
}

html.nav-open,
body.nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

main,
section,
.panel-main,
.panel-page,
.panel-page > *,
.panel-card,
.card-panel,
.table-card,
.filter-bar,
.toolbar,
.page-heading,
.section-head,
.modal-box,
.form-grid,
.grid-2,
.grid-3,
.grid-4,
.grid-5 {
    min-width: 0;
    max-width: 100%;
}

pre,
code,
.mono,
.config-link,
.link-box {
    max-width: 100%;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

button,
a,
[role="button"] {
    touch-action: manipulation;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* --- All panel table families stay inside their own scroll wrapper --- */
.ud-table,
.uo-table,
.ur-table,
.user-table,
.ord-table,
.cfg-table,
.app-table,
.data-table,
.log-table {
    width: 100%;
}

.panel-page div[style*="overflow-x:auto"],
.panel-page div[style*="overflow-x: auto"],
.table-responsive,
.table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* --- Tablet / small laptop --- */
@media (max-width: 1100px) {
    .main-grid,
    .apps-grid,
    .ut-layout,
    .tk-layout,
    .up-layout,
    .uo-layout,
    .un-layout,
    .set-layout,
    .cfg-grid,
    .cpn-grid,
    .pl-grid,
    .co-layout,
    .cart-layout,
    .ud-grid,
    .rh-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .set-sidebar,
    .co-sidebar,
    .cart-sidebar {
        position: static !important;
        top: auto !important;
    }
}

/* --- Phones and tablets: navigation, panel header, tables --- */
@media (max-width: 900px) {
    .site-header {
        z-index: 900 !important;
    }

    .site-header .container {
        width: calc(100% - 24px) !important;
    }

    .site-header .navbar {
        width: 100%;
        min-width: 0;
        gap: 8px !important;
    }

    .site-header .header-actions {
        gap: 6px !important;
    }

    .mobile-menu-btn,
    .mobile-menu-close,
    .mobile-menu {
        -webkit-tap-highlight-color: transparent;
    }

    /* Keep drawer mounted so opening/closing animates reliably on mobile. */
    .mobile-menu-drawer,
    .mobile-menu-drawer.open {
        display: block !important;
    }

    .mobile-menu-drawer {
        visibility: hidden;
        opacity: 0;
        pointer-events: none !important;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }

    .mobile-menu-drawer.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto !important;
        transition-delay: 0s;
    }

    .mobile-menu-panel {
        width: min(340px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        height: 100vh;
        height: 100dvh;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-menu-head {
        padding-top: calc(14px + env(safe-area-inset-top));
    }

    .mobile-menu-body {
        overflow-y: auto;
        min-height: 0;
    }

    .mobile-menu-body a {
        white-space: normal;
        min-height: 46px;
    }

    /* Panel sidebar */
    .sidebar {
        width: min(300px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1001 !important;
        overscroll-behavior: contain;
    }

    .sidebar-overlay {
        z-index: 1000 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .sidebar-overlay.show {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* No horizontal-scrolling topbar: title shrinks, actions remain tappable. */
    .panel-top {
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    .panel-title {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .panel-title h1,
    .panel-title p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .panel-top-actions {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
    }

    .panel-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible;
    }

    .filter-bar,
    .toolbar,
    .page-heading,
    .section-head,
    .tc-head,
    .cp-head {
        flex-wrap: wrap !important;
    }

    .ud-table,
    .uo-table,
    .ur-table,
    .user-table,
    .ord-table,
    .cfg-table,
    .app-table,
    .data-table,
    .log-table,
    .table-card table {
        min-width: 680px !important;
    }

    .pf-inner {
        flex-wrap: wrap;
        gap: 12px;
    }

    .pf-copy,
    .pf-actions {
        min-width: 0;
    }
}

/* --- Mobile --- */
@media (max-width: 640px) {
    :root {
        --mobile-gutter: 12px;
    }

    .site-header .container {
        width: calc(100% - 20px) !important;
    }

    .site-header .navbar {
        min-height: 60px !important;
        padding-block: 7px !important;
    }

    .site-header .brand {
        gap: 8px !important;
        min-width: 0;
    }

    .site-header .brand > span:last-child {
        max-width: clamp(76px, 28vw, 130px) !important;
    }

    .cart-pill,
    .mobile-menu-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }

    .panel-page {
        padding: 12px 10px 16px !important;
        gap: 12px !important;
    }

    .panel-top {
        padding: 10px !important;
        gap: 7px !important;
    }

    .mobile-menu,
    .notif-btn,
    .panel-top .btn {
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .panel-top .btn {
        padding-inline: 10px !important;
    }

    .panel-title h1 {
        font-size: 14px !important;
    }

    .panel-title p {
        display: none !important;
    }

    .panel-footer {
        padding: 12px 10px !important;
    }

    .pf-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-copy,
    .pf-actions {
        justify-content: center;
        text-align: center;
    }

    .pf-actions {
        flex-wrap: wrap;
    }

    /* Two columns are usable on larger phones; switch to one on narrow phones below. */
    .stats-5,
    .stats-4,
    .stats-3,
    .kpi-row,
    .mini-row,
    .mini-grid-4,
    .mini-grid,
    .how-grid,
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .config-grid,
    .ud-config-grid,
    .plan-grid,
    .features,
    .apps-mini-grid,
    .grid-2,
    .grid-3,
    .form-grid,
    .form-grid-3 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .item-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .item-card .it-price,
    .item-card .item-price {
        grid-column: 2 !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .cfg-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .tl-item {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .tl-item > :last-child {
        grid-column: 2 !important;
    }

    .order-mini {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .order-mini > :last-child {
        grid-column: 1 / -1;
    }

    .modal-bg {
        padding: 8px !important;
    }

    .modal-box {
        width: min(100%, 680px) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .modal-head,
    .modal-body,
    .modal-footer {
        padding-inline: 14px !important;
    }

    .cc-actions,
    .row-actions,
    .thread-actions {
        gap: 7px !important;
    }
}

/* --- Narrow phones --- */
@media (max-width: 480px) {
    body {
        font-size: 13.5px;
    }

    .site-header .brand > span:last-child {
        max-width: 82px !important;
    }

    .panel-page {
        padding-inline: 8px !important;
    }

    .panel-top-actions .btn span,
    .panel-top-actions .hide-mobile {
        display: none !important;
    }

    .panel-top .btn {
        width: 38px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .stats-5,
    .stats-4,
    .stats-3,
    .kpi-row,
    .mini-row,
    .mini-grid-4,
    .mini-grid,
    .how-grid,
    .kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cc-meta,
    .mini-grid,
    .rh-share-row,
    .modal-actions,
    .result-actions,
    .result-meta-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cfg-card,
    .order-mini,
    .coupon-row,
    .ticket {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ticket-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    .cfg-card > *,
    .order-mini > *,
    .coupon-row > * {
        min-width: 0;
        max-width: 100%;
    }

    .msg {
        max-width: 100% !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .msg.admin {
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 34px !important;
    }

    .msg.admin .msg-avatar {
        order: 2 !important;
    }

    .modal-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mobile-menu-panel {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
    }

    .mobile-menu-head,
    .mobile-menu-body,
    .mobile-menu-footer {
        padding-inline: 14px;
    }

    .ud-table,
    .uo-table,
    .ur-table,
    .user-table,
    .ord-table,
    .cfg-table,
    .app-table,
    .data-table,
    .log-table,
    .table-card table {
        min-width: 620px !important;
    }
}

/* --- Extremely narrow / split-screen --- */
@media (max-width: 360px) {
    .site-header .container {
        width: calc(100% - 12px) !important;
    }

    .site-header .brand-mark {
        width: 36px !important;
        height: 36px !important;
    }

    .site-header .brand > span:last-child {
        max-width: 64px !important;
        font-size: 13px !important;
    }

    .header-actions {
        gap: 4px !important;
    }

    .cart-pill,
    .mobile-menu-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .panel-title h1 {
        font-size: 13px !important;
    }

    .pf-sep,
    .pf-role {
        display: none;
    }
}

/* --- Landscape phones: keep drawers within the visible viewport --- */
@media (max-height: 520px) and (orientation: landscape) {
    .mobile-menu-panel,
    .sidebar {
        height: 100dvh !important;
    }

    .mobile-menu-head {
        padding-block: 10px;
    }

    .mobile-menu-body {
        padding-block: 10px;
    }
}