/* ================================================================
   detect.ac — mobile / responsive overrides
   ----------------------------------------------------------------
   This stylesheet ONLY contains @media (max-width: ...) blocks.
   At widths greater than the largest breakpoint (1024px) nothing
   in this file applies, so the existing desktop layout is left
   completely untouched.

   It is intentionally loaded LAST in every template's <head> so
   that it wins the cascade over inline <style> blocks and other
   page stylesheets. Many rules use !important for the same
   reason — to defeat very high-specificity desktop rules that
   already exist (e.g. `position: fixed !important` on .sidebar).
   ================================================================ */


/* ================================================================
   1. TABLETS / SMALL LAPTOPS  (≤ 1024px)
   ================================================================ */
@media (max-width: 1024px) {

    /* Sidebars collapse off-canvas */
    .sidebar {
        transform: translateX(-100%) !important;
    }

    /* Main content takes the full width once the sidebar is gone */
    .main-content,
    .content,
    #dashboard {
        margin-left: 0 !important;
        padding: 1rem !important;
    }

    /* Show the floating sidebar opener that the existing JS appends.
       Only target body-level FAB buttons — pages like logs.html that
       embed their own .mobile-menu-toggle inside a header keep their
       in-page placement. */
    body > .mobile-menu-toggle {
        display: flex !important;
    }

    /* Generic dashboard / card grids drop to a single column */
    .dashboard-grid,
    .action-grid,
    .stats-grid,
    .quick-actions-grid,
    .cards-grid,
    .game-sections,
    .game-boxes {
        grid-template-columns: 1fr !important;
    }
}


/* ================================================================
   2. MOBILE PHONES  (≤ 768px)
   ----------------------------------------------------------------
   This is the main mobile breakpoint — most layout changes happen
   here. It covers iPhones, most Android phones and small tablets
   in portrait.
   ================================================================ */
@media (max-width: 768px) {

    /* ----------------------------------------------------------------
       2.0  Global hygiene
       ---------------------------------------------------------------- */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    body {
        font-size: 15px;
        -webkit-text-size-adjust: 100%;
    }

    /* Inputs at 16px+ avoid iOS auto-zoom on focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100% !important;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100% !important;
        height: auto;
    }

    /* Make every long unbroken token (UUIDs, hashes, base64) wrap.
       Note: <pre> intentionally not in this list because pre blocks
       should scroll horizontally instead of wrapping (see rule for
       .code-block-wrapper / pre below). */
    code,
    .auth-box-value,
    .token-value,
    .copy-target,
    .copy-url,
    .uuid,
    .hash {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }


    /* ----------------------------------------------------------------
       2.1  Top navigation bars
       ----------------------------------------------------------------
       Covers: <nav class="navbar">, <nav class="main-nav">,
       <nav> on auth pages, <header class="topbar"> on api docs.
       ---------------------------------------------------------------- */
    .navbar,
    .main-nav,
    body > nav {
        padding: 0 1rem !important;
        height: 60px !important;
        flex-wrap: nowrap !important;
    }

    .navbar .nav-brand,
    .main-nav .logo,
    body > nav .logo {
        font-size: 20px !important;
    }

    /* Hamburger becomes visible */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        gap: 4px;
        z-index: 1002;
        position: relative;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background: #ffffff;
        transition: transform 0.3s ease, opacity 0.3s ease;
        border-radius: 2px;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Hide the desktop horizontal nav links and turn .active into a
       full-screen drop-down. Covers both `.nav-links` (auth pages,
       manage-enterprise, etc.) and any inline definition. */
    .navbar .nav-links,
    .main-nav .nav-links,
    body > nav .nav-links {
        display: none !important;
    }

    .navbar .nav-links.active,
    .main-nav .nav-links.active,
    body > nav .nav-links.active {
        display: flex !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        flex-direction: column !important;
        background: rgba(5, 5, 5, 0.97) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        padding: 1.5rem !important;
        gap: 0.25rem !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
        animation: detect-mobile-fade-in 0.25s ease both;
    }

    .navbar .nav-links.active a,
    .main-nav .nav-links.active a,
    body > nav .nav-links.active a {
        font-size: 1.05rem !important;
        margin: 0 !important;
        padding: 0.85rem 0.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .navbar .nav-links.active .nav-buttons,
    .main-nav .nav-links.active .nav-buttons,
    body > nav .nav-links.active .nav-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        width: 100% !important;
    }

    .navbar .nav-links.active .nav-buttons a,
    .navbar .nav-links.active .nav-buttons button,
    .main-nav .nav-links.active .nav-buttons a,
    .main-nav .nav-links.active .nav-buttons button,
    body > nav .nav-links.active .nav-buttons a,
    body > nav .nav-links.active .nav-buttons button {
        width: 100% !important;
        text-align: center !important;
        padding: 0.85rem 1rem !important;
        border-bottom: none !important;
    }

    /* Legacy `.mobile-menu` overlay used on home/profile/etc. */
    .mobile-menu {
        display: none !important;
    }

    .mobile-menu.active {
        display: flex !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        flex-direction: column !important;
        background: rgba(5, 5, 5, 0.97) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        padding: 1.5rem !important;
        gap: 0 !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
        animation: detect-mobile-fade-in 0.25s ease both;
    }

    .mobile-menu.active a {
        color: #ffffff !important;
        font-size: 1.05rem !important;
        padding: 0.85rem 0.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        text-decoration: none !important;
        display: block !important;
    }


    /* ----------------------------------------------------------------
       2.2  API docs topbar / tabs  (api_docs.html)
       ---------------------------------------------------------------- */
    header.topbar {
        flex-wrap: wrap !important;
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
        height: auto !important;
    }

    header.topbar .topbar-logo {
        font-size: 1.1rem !important;
    }

    header.topbar .topbar-badge {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    header.topbar .topbar-links {
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        font-size: 0.85rem !important;
    }

    nav.tab-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.5rem !important;
        gap: 0.25rem !important;
        white-space: nowrap !important;
    }

    nav.tab-bar .tab-btn {
        flex: 0 0 auto !important;
        font-size: 0.85rem !important;
        padding: 0.65rem 0.9rem !important;
    }

    .tab-panel,
    .doc-section,
    .endpoint-panel,
    .ref-panel,
    .example-panel {
        padding: 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .auth-box {
        font-size: 0.85rem !important;
        padding: 0.75rem !important;
    }

    .auth-box-value {
        font-size: 0.78rem !important;
        word-break: break-all !important;
        white-space: pre-wrap !important;
    }

    .code-block-wrapper,
    .code-block,
    pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 12px !important;
    }

    .code-block-wrapper code,
    .code-block code,
    pre code {
        font-size: 12px !important;
        white-space: pre !important;
    }


    /* ----------------------------------------------------------------
       2.3  Side navigation (user + admin)
       ----------------------------------------------------------------
       Both layouts use a left-fixed `.sidebar`. On mobile we hide it
       off-canvas and toggle it via either `.mobile-active` (user JS)
       or `.active` (admin JS). The CSS handles both.
       ---------------------------------------------------------------- */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 260px !important;
        max-width: 82vw !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        animation: none !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

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

    /* Never let the "collapsed" admin variant lock width on mobile */
    .sidebar.collapsed {
        width: 260px !important;
    }

    .sidebar.collapsed .tab-button span,
    .sidebar.collapsed .nav-item span,
    .sidebar.collapsed .tab-item span {
        display: inline !important;
    }

    .sidebar.collapsed .product-subtitle,
    .sidebar.collapsed .admin-details,
    .sidebar.collapsed .sidebar-header {
        display: block !important;
    }

    /* Hide the in-sidebar "retract" toggle on mobile — the user opens
       the sidebar with the FAB and closes it by tapping the backdrop. */
    .sidebar .sidebar-toggle,
    .sidebar > .sidebar-toggle {
        display: none !important;
    }

    /* Admin's sidebar-toggle lives OUTSIDE the sidebar (sibling of
       .sidebar inside .container). Keep it visible as a FAB. */
    .container > .sidebar-toggle {
        display: flex !important;
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        background: #39de7f !important;
        color: #000 !important;
        align-items: center;
        justify-content: center;
        z-index: 9997 !important;
        border: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transform: none !important;
        right: auto !important;
        bottom: auto !important;
    }

    /* The floating sidebar opener added by user-page JS or hard-coded
       at body level. Scoped to `body > .mobile-menu-toggle` so pages
       that put a similarly named button inside a header (e.g. logs)
       keep their own styling. */
    body > .mobile-menu-toggle {
        display: flex !important;
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        background: #39de7f !important;
        color: #000 !important;
        border: none !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9997 !important;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        font-size: 1.1rem !important;
        padding: 0 !important;
    }

    /* Backdrop overlay (added by mobile-menu.js when sidebar is open) */
    .detect-mobile-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        z-index: 9990 !important;
        animation: detect-mobile-fade-in 0.2s ease both;
    }


    /* ----------------------------------------------------------------
       2.4  Main content / page containers
       ---------------------------------------------------------------- */
    .main-content,
    .content,
    #content,
    #dashboard,
    .dashboard-content {
        margin-left: 0 !important;
        padding: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Generic container element used on lots of pages */
    .container,
    .login-container,
    .register-container,
    .reset-container,
    .redeem-container,
    .scanning-container,
    .yara-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Push content below the fixed navbar */
    body > #content,
    body > .main-content,
    body > main {
        padding-top: 70px !important;
    }


    /* ----------------------------------------------------------------
       2.5  Welcome header / page header rows
       ---------------------------------------------------------------- */
    .welcome-header,
    .page-header,
    .section-header,
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        text-align: left !important;
    }

    .welcome-header h1 {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
    }

    .welcome-header .button-group,
    .page-header .button-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .welcome-header .button-group .btn,
    .page-header .button-group .btn,
    .welcome-header .button-group button,
    .page-header .button-group button {
        width: 100% !important;
        justify-content: center !important;
    }


    /* ----------------------------------------------------------------
       2.6  Grids & cards (generic)
       ---------------------------------------------------------------- */
    .dashboard-grid,
    .action-grid,
    .stats-grid,
    .cards-grid,
    .quick-actions-grid,
    .session-grid,
    .sessions-grid,
    .game-sections,
    .game-boxes,
    .strings-grid,
    .yara-grid,
    .button-pair,
    .pin-section,
    .auth-row,
    .form-row,
    .two-column,
    .three-column {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .dashboard-card,
    .stat-card,
    .info-card,
    .session-card,
    .modern-card {
        padding: 1.1rem !important;
        border-radius: 12px !important;
    }

    .stat-number {
        font-size: 1.75rem !important;
    }


    /* ----------------------------------------------------------------
       2.7  Tables
       ----------------------------------------------------------------
       Wrap every table in a horizontal scroller and shrink font.
       This works for both Bootstrap-ish .table and the custom
       .modern-table / .strings-table / etc.
       ---------------------------------------------------------------- */
    .table-responsive,
    .table-wrapper,
    .table-container,
    .modern-table-wrap,
    .strings-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    table,
    .table,
    .modern-table,
    .strings-table,
    .data-table,
    .logs-table {
        font-size: 12.5px !important;
        min-width: 540px !important;
    }

    table th,
    table td,
    .table th,
    .table td,
    .modern-table th,
    .modern-table td,
    .strings-table th,
    .strings-table td {
        padding: 0.55rem 0.65rem !important;
        white-space: nowrap;
    }

    /* Table action cells often hold rows of buttons — wrap them */
    table td .actions,
    table td .table-actions,
    table td .btn-group {
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }


    /* ----------------------------------------------------------------
       2.8  Forms / inputs / buttons
       ---------------------------------------------------------------- */
    .form-row,
    .form-grid,
    .form-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .form-row > *,
    .form-grid > *,
    .form-columns > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .input-group,
    .form-group,
    .field-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    .input-group input,
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .button-row,
    .form-actions,
    .modal-actions,
    .actions-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .button-row > *,
    .form-actions > *,
    .modal-actions > *,
    .actions-row > * {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Don't let any single button overflow the viewport */
    button,
    .btn,
    .action-btn,
    .cta-button,
    .login-button,
    .register-button,
    .dashboard-btn,
    .login-btn {
        max-width: 100% !important;
    }

    /* Specific search/filter controls */
    .search-filter-container,
    .filters,
    .filter-bar,
    .toolbar {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    .search-filter-container > *,
    .filters > *,
    .filter-bar > *,
    .toolbar > * {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.9  Modals / popups
       ---------------------------------------------------------------- */
    .modal,
    .modal-dialog,
    .popup,
    .popup-content,
    .modal-content,
    .discord-popup-content,
    .custom-modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
        max-height: calc(100vh - 20px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .modal-body,
    .popup-body {
        padding: 1rem !important;
    }

    .modal-header,
    .popup-header {
        padding: 0.85rem 1rem !important;
        flex-wrap: wrap;
    }

    .modal-footer,
    .popup-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .modal-footer > *,
    .popup-footer > * {
        width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.10  Notifications / toasts
       ---------------------------------------------------------------- */
    .notification,
    .toast,
    .alert-banner {
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        font-size: 0.9rem !important;
    }

    #notification-container,
    .notification-wrapper,
    .toast-container {
        right: 12px !important;
        left: 12px !important;
        top: 70px !important;
    }


    /* ----------------------------------------------------------------
       2.11  Auth pages — login / register / reset / redeem / link
       ----------------------------------------------------------------
       These pages share a similar centred-card layout. They all break
       around 768px in different ways, so we re-stack them uniformly.
       ---------------------------------------------------------------- */
    .login-container,
    .register-container,
    .registration-container,
    .reset-container,
    .reset-form-container,
    .reset-password-container,
    .redeem-container,
    .link-container,
    .auth-container,
    .content-container {
        flex-direction: column !important;
        padding: 80px 16px 24px !important;
        min-height: 100vh !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .login-box,
    .register-box,
    .registration-box,
    .reset-box,
    .reset-form-box,
    .reset-password-box,
    .redeem-box,
    .link-box,
    .auth-box-panel,
    .content-box,
    .discord-card {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }

    /* Many auth pages use a left "info" panel + right "form" panel.
       Force them to stack with the form first. */
    .login-info,
    .register-info,
    .reset-info,
    .auth-info,
    .info-panel,
    .promo-panel,
    .left-panel,
    .right-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.25rem !important;
        text-align: center !important;
    }

    .remember-forgot {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: flex-start !important;
    }

    /* Cloudflare Turnstile / reCAPTCHA scaling */
    .cf-turnstile,
    .g-recaptcha {
        transform: scale(0.95);
        transform-origin: left center;
        margin: 1rem 0 !important;
    }


    /* ----------------------------------------------------------------
       2.12  Banned / enterprise-banned pages
       ---------------------------------------------------------------- */
    .ban-container,
    .banned-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 12px !important;
        margin: 0 !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .ban-box,
    .ban-card,
    .banned-card {
        width: 100% !important;
        max-width: 480px !important;
        padding: 1.5rem !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .ban-title,
    .ban-box h1,
    .ban-card h1,
    .banned-card h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    .ban-subtitle,
    .ban-box h2 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    .ban-info-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
        text-align: left !important;
    }

    .ban-info-content {
        word-break: break-word !important;
    }

    .ban-actions,
    .ban-card .actions,
    .banned-card .actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .ban-actions > *,
    .ban-card .actions > *,
    .banned-card .actions > * {
        width: 100% !important;
        justify-content: center !important;
    }


    /* ----------------------------------------------------------------
       2.13  Error page  (error.html)
       ---------------------------------------------------------------- */
    .error-page,
    .error-container,
    .error-content,
    .error-card {
        padding: 24px 16px !important;
        text-align: center !important;
    }

    .error-page h1,
    .error-content h1,
    .error-card h1,
    .error-title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .error-code,
    .error-status {
        font-size: 4rem !important;
    }

    .error-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .error-actions > * {
        width: 100% !important;
        justify-content: center !important;
    }


    /* ----------------------------------------------------------------
       2.14  Scanning page  (scanning.html)
       ---------------------------------------------------------------- */
    .scanning-container,
    body[data-scan-state] .container {
        padding: 80px 16px 24px !important;
    }

    .hero-section .hero-title,
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    .hero-section .hero-description,
    .hero-description {
        font-size: 0.95rem !important;
        padding: 0 !important;
    }

    .hero-stats {
        flex-wrap: wrap !important;
        gap: 1rem !important;
        justify-content: center !important;
    }

    .hero-stats .stat {
        min-width: 0 !important;
        flex: 1 1 30% !important;
    }

    .session-state,
    .session-controls,
    .session-info,
    .scan-progress {
        padding: 1rem !important;
    }

    .url-row,
    .session-actions,
    .download-actions,
    .scan-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .url-row > *,
    .session-actions > *,
    .download-actions > *,
    .scan-actions > * {
        width: 100% !important;
    }

    .nav-status {
        font-size: 0.8rem !important;
    }

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


    /* ----------------------------------------------------------------
       2.15  Logs page  (logs.html)
       ---------------------------------------------------------------- */
    .logs-page,
    .logs-container {
        padding: 0 !important;
    }

    .logs-header,
    .logs-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .metrics-grid,
    .metrics-row,
    .stats-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .metric-card,
    .stat-block {
        padding: 0.75rem !important;
    }

    .metric-card .label,
    .stat-block .label {
        font-size: 0.7rem !important;
    }

    .metric-card .value,
    .stat-block .value {
        font-size: 1.25rem !important;
    }

    .chart-wrapper,
    .chart-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important;
        overflow: hidden;
    }

    .chart-wrapper canvas,
    .chart-container canvas {
        max-width: 100% !important;
        height: 100% !important;
    }

    .filters-bar,
    .logs-filters {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .filters-bar > *,
    .logs-filters > * {
        width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.16  YARA editor  (yara.html)
       ---------------------------------------------------------------- */
    .yara-workspace,
    .yara-layout,
    .yara-split {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        height: auto !important;
    }

    .yara-sidebar,
    .yara-rules-list,
    .rules-panel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 280px !important;
        overflow-y: auto !important;
    }

    .yara-editor,
    .editor-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 420px !important;
    }

    .editor-toolbar,
    .yara-toolbar {
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }

    .editor-toolbar button,
    .yara-toolbar button {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.65rem !important;
    }


    /* ----------------------------------------------------------------
       2.17  Custom strings page  (customstrings.html)
       ---------------------------------------------------------------- */
    .strings-table-wrap,
    .strings-table-container {
        overflow-x: auto !important;
    }

    .strings-toolbar,
    .strings-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .strings-toolbar > *,
    .strings-header > * {
        width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.18  Sessions page  (sessions.html)
       ---------------------------------------------------------------- */
    .sessions-grid,
    .sessions-list {
        grid-template-columns: 1fr !important;
    }

    .session-card,
    .session-row {
        padding: 1rem !important;
    }

    .session-card .session-meta,
    .session-row .session-meta {
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        font-size: 0.8rem !important;
    }

    .session-card .session-actions,
    .session-row .session-actions {
        flex-direction: column !important;
        gap: 0.4rem !important;
    }

    .session-card .session-actions > *,
    .session-row .session-actions > * {
        width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.19  Profile page  (profile.html)
       ---------------------------------------------------------------- */
    .profile-grid,
    .profile-layout,
    .profile-columns {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .profile-header,
    .profile-banner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .profile-avatar,
    .avatar-wrap {
        width: 100px !important;
        height: 100px !important;
    }

    .profile-tabs,
    .profile-nav {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .profile-tabs .tab,
    .profile-nav .tab,
    .profile-tabs button,
    .profile-nav button {
        flex: 0 0 auto !important;
    }


    /* ----------------------------------------------------------------
       2.20  Affiliate page  (affiliate.html)
       ---------------------------------------------------------------- */
    .affiliate-grid,
    .affiliate-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .affiliate-link-box,
    .referral-link-box {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .affiliate-link-box input,
    .referral-link-box input {
        width: 100% !important;
    }

    .affiliate-link-box button,
    .referral-link-box button {
        width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.21  Style / spinner-selector page  (style.html)
       ---------------------------------------------------------------- */
    .spinner-grid,
    .style-grid,
    .styles-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .spinner-card,
    .style-card {
        padding: 0.75rem !important;
    }

    .style-preview {
        max-width: 100% !important;
    }


    /* ----------------------------------------------------------------
       2.22  Create-enterprise / manage-enterprise / enterprise-member
       ---------------------------------------------------------------- */
    .enterprise-form,
    .enterprise-card,
    .enterprise-panel {
        padding: 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .enterprise-grid,
    .members-grid,
    .tokens-grid {
        grid-template-columns: 1fr !important;
    }

    .token-row,
    .member-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .token-row > *,
    .member-row > * {
        width: 100% !important;
    }

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

    /* Pagination */
    .pagination,
    .page-controls {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }

    .pagination > *,
    .page-controls > * {
        flex: 0 0 auto !important;
    }


    /* ----------------------------------------------------------------
       2.23  PIN displays / inputs  (home.html dashboard)
       ---------------------------------------------------------------- */
    .pin-display,
    .pin-input-group {
        flex-direction: column !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 1rem !important;
        gap: 0.5rem !important;
    }

    .pin-input-group .blurred-pin,
    .pin-display .blurred-pin {
        font-size: 1.1rem !important;
        word-break: break-all !important;
        text-align: center !important;
    }

    .pin-input-group input {
        width: 100% !important;
        font-size: 1rem !important;
    }


    /* ----------------------------------------------------------------
       2.24  Admin-specific: theme toggle / admin-info block
       ---------------------------------------------------------------- */
    .admin-info {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 0.85rem !important;
        gap: 0.5rem !important;
    }

    .admin-info .admin-details {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .admin-info .admin-name,
    .admin-info .admin-role {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Admin alerts */
    .alert {
        font-size: 0.9rem !important;
        padding: 0.75rem !important;
    }
}


/* ================================================================
   3. SMALL PHONES  (≤ 480px)
   ----------------------------------------------------------------
   Extra tightening for narrow screens.
   ================================================================ */
@media (max-width: 480px) {

    body {
        font-size: 14px;
    }

    .navbar,
    .main-nav,
    body > nav {
        height: 56px !important;
        padding: 0 0.75rem !important;
    }

    .navbar .nav-brand,
    .main-nav .logo,
    body > nav .logo {
        font-size: 18px !important;
    }

    /* Sidebar narrower on very small screens */
    .sidebar {
        width: 240px !important;
        max-width: 85vw !important;
    }

    .main-content,
    .content,
    #dashboard,
    .dashboard-content {
        padding: 12px !important;
    }

    body > #content,
    body > .main-content,
    body > main {
        padding-top: 64px !important;
    }

    .welcome-header h1 {
        font-size: 1.2rem !important;
    }

    /* Typography */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }

    .dashboard-card,
    .stat-card,
    .modern-card,
    .session-card {
        padding: 0.9rem !important;
        border-radius: 10px !important;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    /* Tables get a tiny bit smaller */
    table,
    .table,
    .modern-table,
    .strings-table {
        font-size: 11.5px !important;
        min-width: 480px !important;
    }

    /* Modals fully edge-to-edge */
    .modal,
    .modal-dialog,
    .modal-content,
    .popup-content,
    .discord-popup-content,
    .custom-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Hero text */
    .hero-section .hero-title,
    .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-section .hero-description,
    .hero-description {
        font-size: 0.9rem !important;
    }

    .hero-stats {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-stats .stat {
        flex: 1 1 auto !important;
        text-align: center !important;
    }

    /* Auth boxes */
    .login-box,
    .register-box,
    .reset-box,
    .reset-form-box,
    .redeem-box,
    .link-box,
    .auth-box-panel {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    /* Error pages */
    .error-code,
    .error-status {
        font-size: 3rem !important;
    }

    .error-page h1,
    .error-content h1,
    .error-card h1,
    .error-title {
        font-size: 1.5rem !important;
    }

    /* Admin: hide rarely-used elements in admin-info on tiny screens */
    .admin-info .admin-details {
        font-size: 0.8rem !important;
    }

    /* Affiliate stat tiles */
    .affiliate-grid,
    .affiliate-stats {
        grid-template-columns: 1fr !important;
    }

    /* Logs metrics: 1 column on tiny screens */
    .metrics-grid,
    .metrics-row,
    .stats-cards {
        grid-template-columns: 1fr !important;
    }

    /* Quick actions: 1 column at the smallest */
    .quick-actions-grid {
        grid-template-columns: 1fr !important;
    }

    /* Buttons more compact */
    .btn,
    button,
    .action-btn {
        font-size: 0.92rem !important;
    }

    /* Notifications hugged to the edges */
    #notification-container,
    .notification-wrapper,
    .toast-container {
        right: 8px !important;
        left: 8px !important;
        top: 64px !important;
    }

    /* API docs: hide topbar links text on very small screens (icons remain in tabs) */
    header.topbar .topbar-links a {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.4rem !important;
    }
}


/* ================================================================
   4. UTILITY ANIMATIONS used above
   ================================================================ */
@keyframes detect-mobile-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   5. LANDSCAPE PHONE HEIGHT FIX
   ----------------------------------------------------------------
   When a phone is held in landscape, viewport heights are very
   small and some fixed full-height overlays cut off content.
   ================================================================ */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .navbar .nav-links.active,
    .main-nav .nav-links.active,
    body > nav .nav-links.active,
    .mobile-menu.active {
        height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
    }

    .modal,
    .modal-dialog,
    .modal-content,
    .popup-content {
        max-height: calc(100vh - 16px) !important;
    }
}
