/* ==========================================================================
   BitYeo — shared mobile optimizations
   Linked last in <head> on every page so these rules win ties over the
   page's own inline <style>. Everything here is scoped to small viewports.
   ========================================================================== */

/* --- Kill horizontal overflow so nothing clips off the right edge --- */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    img, video, canvas {
        max-width: 100%;
        height: auto;
    }
}

/* --- Header: collapse controls so login/signup never get pushed off-screen.
       Applies to pages whose own stylesheet lacks a mobile header rule
       (wallet / card / account) and reinforces the ones that have it. --- */
@media (max-width: 768px) {
    .main-header {
        padding: 0 0.6rem !important;
    }
    .header-left {
        gap: 0.4rem !important;
        min-width: 0;
    }
    .header-right {
        gap: 0.4rem !important;
    }
    .main-header .theme-toggle-btn {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.4rem !important;
        min-width: auto !important;
    }
    /* Collapse the label only in the top bar; the drawer's theme button keeps its text. */
    .main-header .theme-toggle-btn .theme-toggle-text {
        display: none !important;
    }
    /* Some pages hide every .theme-toggle-text with !important; force the drawer's
       label (which has room) back on via a higher-specificity id selector. */
    #mobile-drawer-theme-toggle .theme-toggle-text {
        display: inline !important;
    }
    .btn-login,
    .btn-register-header {
        padding: 0.35rem 0.55rem !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }
    .brand-name-text {
        font-size: 1.2rem !important;
    }
    /* Dropdown panels should never exceed the screen width */
    .header-profile-dropdown > div,
    .header-assets-dropdown > div,
    #header-profile-menu,
    #header-assets-menu {
        width: min(280px, calc(100vw - 1.5rem)) !important;
        right: 0 !important;
    }
}

/* --- Content / legal pages: give wide tables their own scroll instead of
       forcing the whole page wider than the viewport. --- */
@media (max-width: 640px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    h1 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* --- Touch targets: keep interactive controls comfortably tappable --- */
@media (max-width: 768px) {
    .nav-link,
    .btn-login,
    .btn-register-header,
    .theme-toggle-btn,
    #header-profile-btn,
    #header-assets-btn {
        min-height: 40px;
    }
}

/* --- Very small screens: tighten oversized hero/landing headings --- */
@media (max-width: 430px) {
    .hero-banner-title {
        font-size: 1.7rem !important;
        line-height: 1.15 !important;
    }
    .hero-banner-subtitle {
        font-size: 0.88rem !important;
    }
    .features-section-title {
        font-size: 1.35rem !important;
    }
}
