/**
 * Global Responsive Stylesheet for GoldApp
 * ----------------------------------------------------------------
 * Makes every Blade view display properly across all screen sizes:
 *   - Tiny mobile      <  360px
 *   - Mobile           360 - 575px
 *   - Tablet (small)   576 - 767px
 *   - Tablet           768 - 991px
 *   - Desktop (small)  992 - 1199px
 *   - Desktop          1200 - 1599px
 *   - Large desktop    >= 1600px
 *
 * Targets the common patterns used throughout the project:
 *   - vw-based input/label widths (.w-4vw .. .w-40vw, .input-*vw, .label-*vw)
 *   - Inline `style="width: Xvw"` rules
 *   - Bootstrap tables in .container / .row .col-md-*
 *   - The sticky gold-prices bar (#todayprices, .pricescontainer, .pricebox, .datebox, .allbox)
 *   - The middle/search menu bar (.middlemenu, .searchdiv)
 *   - Forms that use d-inline-flex rows with labels + inputs
 *   - Long horizontal data tables in .show* views
 *
 * Loaded after layout.css / utilities.css so its rules win where needed.
 * Print rules are NOT touched: existing @media print blocks remain intact.
 */

/* ==========================================================================
   0. Base safety net - prevent horizontal page overflow on any screen
   ==========================================================================
   The overflow restriction must NOT be on body/html: that crops the
   navbar dropdown menus (they extend below the navbar and get clipped to
   the body's visible box). Apply it to <main> instead, which only
   contains the per-page content. */
html,
body {
    max-width: 100%;
}

main,
#app {
    max-width: 100%;
}

main {
    overflow-x: hidden;
}

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

/* Allow tables to scroll horizontally instead of overflowing the page.
   We wrap every standalone table in a scrollable region via CSS only. */
.container,
.container-fluid {
    max-width: 100%;
}

/* Make standalone .table elements scrollable when overflowing the viewport. */
.table {
    max-width: 100%;
}

/* Generic horizontal scroll wrapper. Apply by wrapping a table or by adding
   the class to any element that holds an overflowing layout. */
.responsive-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   0b. Sticky bottom footer (gold-prices bar) - global rules
   ----------------------------------------------------------------
   #todayprices is rendered after <main> in layouts/app.blade.php and carries
   the .sticky class. .sticky is defined in app.css as
   `position: fixed; bottom: 0; width: 100%;` but lacks left/right anchors
   and z-index, so on desktop the bar can drift horizontally inside parent
   transforms and page content can slide under it (no bottom padding on
   <main> outside the mobile media query). The rules below pin it reliably
   to the viewport bottom on every screen size and reserve enough space at
   the end of <main> so the bar never overlaps content - whether the page
   content is short (bar still anchored to viewport bottom) or long (last
   rows scroll above the bar instead of under it).
   The mobile-only rules in section 14 (≤ 991.98px) still apply on top and
   override the padding to 64px / 56px / etc. as needed.
   ========================================================================== */
#todayprices.sticky,
body #todayprices.sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1030; /* above Bootstrap navbar (1020), below modals (1050) */
}

body main,
body #app > main {
    padding-bottom: 64px;
}

/* ==========================================================================
   1. Large desktop (>= 1600px) - tighten max widths so things don't sprawl
   ========================================================================== */
@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
}

/* ==========================================================================
   2. Desktop small (992 - 1199px) - light tweaks
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* Middle menu should wrap nicely when navbar collapses */
    .middlemenu {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start !important;
    }

    .middlemenu > div {
        flex-wrap: wrap;
    }

    /* The sumamount badge should size to content, not 9vw which becomes tiny */
    .middlemenu > span[style*="9vw"] {
        width: auto !important;
        min-width: 96px;
        padding: 6px 10px !important;
    }

    /* searchdiv: make it wrap onto its own line cleanly */
    .searchdiv {
        margin: 8px;
    }

    /* Wider vw inputs that become too narrow when sidebar disappears */
    .input-40vw,
    .w-40vw {
        width: 70vw !important;
    }
}

/* ==========================================================================
   3. Tablet (768 - 991px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Bootstrap col-md-* fills full width below md - keep some breathing room */
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Form rows that are inline-flex should wrap their label + input pair */
    .form-row.d-inline-flex,
    .form-group-inline,
    .form-row-inline {
        flex-wrap: wrap;
    }

    /* vw widths: scale labels up so text doesn't clip */
    .label-6vw,
    .w-6vw {
        width: 16vw !important;
    }

    .label-8vw,
    .w-8vw {
        width: 18vw !important;
    }

    .w-7vw {
        width: 18vw !important;
    }

    .w-5vw {
        width: 14vw !important;
    }

    .w-4vw {
        width: 12vw !important;
    }

    .w-13vw,
    .input-13vw {
        width: 28vw !important;
    }

    .w-14vw,
    .input-14vw {
        width: 28vw !important;
    }

    .w-40vw,
    .input-40vw {
        width: 80vw !important;
    }

    .input-4vw {
        width: 14vw !important;
    }

    .input-5vw {
        width: 16vw !important;
    }

    .input-6vw {
        width: 18vw !important;
    }

    .input-7vw {
        width: 20vw !important;
    }

    .input-8vw {
        width: 22vw !important;
    }

    /* Inline style="width: Xvw" patterns - use [style*=] attribute selectors */
    [style*="width:5vw"],
    [style*="width: 5vw"] { width: 14vw !important; }
    [style*="width:6vw"],
    [style*="width: 6vw"] { width: 16vw !important; }
    [style*="width:7vw"],
    [style*="width: 7vw"] { width: 18vw !important; }
    [style*="width:8vw"],
    [style*="width: 8vw"] { width: 20vw !important; }
    [style*="width:9vw"],
    [style*="width: 9vw"] { width: 22vw !important; }
    [style*="width:10vw"],
    [style*="width: 10vw"] { width: 24vw !important; }
    [style*="width:11vw"],
    [style*="width: 11vw"] { width: 26vw !important; }
    [style*="width:12vw"],
    [style*="width: 12vw"] { width: 28vw !important; }
    [style*="width:13vw"],
    [style*="width: 13vw"] { width: 30vw !important; }
    [style*="width:14vw"],
    [style*="width: 14vw"] { width: 32vw !important; }
    [style*="width:15vw"],
    [style*="width: 15vw"] { width: 34vw !important; }
    [style*="width:16vw"],
    [style*="width: 16vw"] { width: 36vw !important; }

    /* Tables: enable horizontal scroll when their parent column shrinks */
    .col-md-12,
    .col-md-11,
    .col-md-10,
    .col-md-9,
    .col-md-8 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Don't let .container clip dropdowns / tooltips that escape it */
    .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* d-inline-flex rows: stack centred to avoid awkward gaps */
    .d-inline-flex {
        flex-wrap: wrap;
    }

    /* Price boxes already hide via existing layout.css under 991px - reinforce */
    .pricebox,
    .pricescontainer .pricebox {
        display: none !important;
    }

    .pricescontainer {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .datebox {
        width: auto;
        min-width: 240px;
    }
}

/* ==========================================================================
   4. Small tablet / large phone (576 - 767px)
   ========================================================================== */
@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.05rem; }

    /* Navbar brand smaller so collapse button fits */
    .navbar-brand {
        font-size: 1.05rem;
    }

    /* All vw labels and inputs grow further so they stay usable */
    .label-6vw,
    .w-6vw { width: 22vw !important; }
    .label-8vw,
    .w-8vw { width: 26vw !important; }
    .w-7vw { width: 24vw !important; }
    .w-5vw { width: 22vw !important; }
    .w-4vw { width: 20vw !important; }

    .input-4vw { width: 22vw !important; }
    .input-5vw { width: 24vw !important; }
    .input-6vw { width: 26vw !important; }
    .input-7vw { width: 28vw !important; }
    .input-8vw { width: 30vw !important; }
    .input-13vw,
    .w-13vw { width: 60vw !important; }
    .input-14vw,
    .w-14vw { width: 60vw !important; }
    .input-40vw,
    .w-40vw { width: 90vw !important; }

    /* Inline style="width: Xvw" - small phones */
    [style*="width:4vw"],
    [style*="width: 4vw"] { width: 22vw !important; }
    [style*="width:5vw"],
    [style*="width: 5vw"] { width: 24vw !important; }
    [style*="width:6vw"],
    [style*="width: 6vw"] { width: 26vw !important; }
    [style*="width:7vw"],
    [style*="width: 7vw"] { width: 28vw !important; }
    [style*="width:8vw"],
    [style*="width: 8vw"] { width: 30vw !important; }
    [style*="width:9vw"],
    [style*="width: 9vw"] { width: 32vw !important; }
    [style*="width:10vw"],
    [style*="width: 10vw"] { width: 34vw !important; }
    [style*="width:11vw"],
    [style*="width: 11vw"] { width: 40vw !important; }
    [style*="width:12vw"],
    [style*="width: 12vw"] { width: 44vw !important; }
    [style*="width:13vw"],
    [style*="width: 13vw"] { width: 60vw !important; }
    [style*="width:14vw"],
    [style*="width: 14vw"] { width: 60vw !important; }
    [style*="width:15vw"],
    [style*="width: 15vw"] { width: 64vw !important; }
    [style*="width:16vw"],
    [style*="width: 16vw"] { width: 70vw !important; }
    [style*="width:20vw"],
    [style*="width: 20vw"] { width: 80vw !important; }
    [style*="width:23.5vw"],
    [style*="width: 23.5vw"] { width: 90vw !important; }
    [style*="width:24vw"],
    [style*="width: 24vw"] { width: 90vw !important; }

    /* Fixed-pixel widths in utilities.css can break - cap to viewport */
    .w-311px,
    .w-327px,
    .w-335px,
    .w-343px,
    .w-375px {
        width: 100% !important;
        max-width: 100%;
    }

    /* Hide decorative datebox text and let inputs flow */
    .datebox {
        min-width: 0;
        width: 100%;
        text-align: center;
    }

    /* Tables in .show* views: shrink padding and font */
    .table {
        font-size: 12.5px;
    }
    .table th,
    .table td {
        padding: 4px 6px !important;
        word-break: break-word;
    }

    /* All standalone tables get an overflow wrapper visually
       (works because col-md-* gets overflow-x: auto above) */

    /* Buttons in dynamic-button class - keep narrower */
    .dynamic-button {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8125rem !important;
        white-space: normal;
    }

    /* The black sumamount badge - never overflow */
    .middlemenu > span {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   5. Mobile (360 - 575px)
   ========================================================================== */
@media (max-width: 575.98px) {
    /* Container padding tighter */
    .container,
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Stack the inline form rows entirely */
    .form-row.d-inline-flex,
    .form-group-inline,
    .form-row-inline,
    .d-inline-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Labels become full-width above the input */
    .label-6vw,
    .label-8vw,
    .w-6vw,
    .w-7vw,
    .w-8vw,
    .w-4vw,
    .w-5vw {
        width: 100% !important;
        text-align: right;
        margin-right: 0 !important;
        margin-bottom: 4px;
    }

    /* Inputs become full-width */
    .input-4vw,
    .input-5vw,
    .input-6vw,
    .input-7vw,
    .input-8vw,
    .input-13vw,
    .input-14vw,
    .input-40vw,
    .w-13vw,
    .w-14vw,
    .w-40vw {
        width: 100% !important;
    }

    /* Inline style="width: Xvw" all become full width on phones */
    [style*="vw"] {
        max-width: 100%;
    }

    [style*="width:4vw"],
    [style*="width: 4vw"],
    [style*="width:5vw"],
    [style*="width: 5vw"],
    [style*="width:6vw"],
    [style*="width: 6vw"],
    [style*="width:7vw"],
    [style*="width: 7vw"],
    [style*="width:8vw"],
    [style*="width: 8vw"],
    [style*="width:9vw"],
    [style*="width: 9vw"],
    [style*="width:10vw"],
    [style*="width: 10vw"],
    [style*="width:11vw"],
    [style*="width: 11vw"],
    [style*="width:12vw"],
    [style*="width: 12vw"],
    [style*="width:13vw"],
    [style*="width: 13vw"],
    [style*="width:14vw"],
    [style*="width: 14vw"],
    [style*="width:15vw"],
    [style*="width: 15vw"],
    [style*="width:16vw"],
    [style*="width: 16vw"],
    [style*="width:20vw"],
    [style*="width: 20vw"],
    [style*="width:23.5vw"],
    [style*="width: 23.5vw"],
    [style*="width:24vw"],
    [style*="width: 24vw"] {
        width: 100% !important;
    }

    /* Tables get smaller text and tight cells */
    .table {
        font-size: 11.5px;
    }
    .table th,
    .table td {
        padding: 3px 4px !important;
    }

    /* The middle menu items should stack */
    .middlemenu {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px;
    }

    .middlemenu > div,
    .middlemenu > span {
        width: 100% !important;
        justify-content: center !important;
    }

    .middlemenu > span[style*="9vw"] {
        text-align: center !important;
    }

    /* searchdiv: input grows to row width */
    .searchdiv form > div {
        width: 100% !important;
    }
    .searchdiv input[type="text"] {
        flex: 1;
        width: auto !important;
        min-width: 0;
    }

    /* The sticky gold-prices bar - hide datebox so the All dropdown is visible */
    #todayprices {
        padding: 4px 6px !important;
    }

    .pricescontainer {
        justify-content: center;
        gap: 4px;
    }

    .datebox {
        font-size: 11px;
    }
    .datebox label {
        display: none;
    }

    .allbox {
        margin-left: auto;
    }

    /* Bootstrap col paddings */
    [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* h3 in views is everywhere - keep tidy */
    h3 {
        font-size: 1.05rem;
        margin: 8px 0;
    }

    /* Selects too narrow inline - go full-width on phones */
    select[style*="width:8vw"],
    select[style*="width: 8vw"],
    select.w-8vw {
        width: 100% !important;
    }

    /* Print buttons / action buttons rows */
    .btn {
        white-space: normal;
        word-break: break-word;
    }

    /* Dropdown menus get bigger touch targets */
    .dropdown-item {
        padding: 8px 12px;
        font-size: 0.95rem;
    }

    /* The black sumamount badge - smaller font */
    .middlemenu > span[style*="background-color: #000000"] {
        font-size: 0.85rem;
        padding: 6px 10px !important;
    }
}

/* ==========================================================================
   6. Tiny mobile (<= 359px)
   ========================================================================== */
@media (max-width: 359.98px) {
    body {
        font-size: 13px;
    }

    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1rem; }

    .navbar-brand {
        font-size: 0.95rem;
    }

    .table {
        font-size: 10.5px;
    }
    .table th,
    .table td {
        padding: 2px 3px !important;
    }

    .btn {
        font-size: 0.8125rem;
        padding: 4px 8px;
    }

    .dropdown-item {
        font-size: 0.875rem;
        padding: 6px 10px;
    }

    /* Hide non-critical labels around price inputs */
    .pricebox label,
    .datebox label {
        display: none;
    }

    .container,
    .container-fluid {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Pagination on showXxx views - shrink */
    .pagination {
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   7. Print - never let responsive rules collapse print layout
   ========================================================================== */
@media print {
    html,
    body {
        overflow: visible !important;
        max-width: none !important;
    }

    .table,
    .container,
    .container-fluid {
        max-width: none !important;
    }

    /* Restore widths that responsive rules collapsed */
    .label-6vw { width: 6vw !important; }
    .label-8vw { width: 8vw !important; }
    .w-4vw  { width: 4vw  !important; }
    .w-5vw  { width: 5vw  !important; }
    .w-6vw  { width: 6vw  !important; }
    .w-7vw  { width: 7vw  !important; }
    .w-8vw  { width: 8vw  !important; }
    .w-13vw { width: 13vw !important; }
    .w-14vw { width: 14vw !important; }
    .w-40vw { width: 40vw !important; }

    .input-4vw  { width: 4vw  !important; }
    .input-5vw  { width: 5vw  !important; }
    .input-6vw  { width: 6vw  !important; }
    .input-7vw  { width: 7vw  !important; }
    .input-8vw  { width: 8vw  !important; }
    .input-13vw { width: 13vw !important; }
    .input-14vw { width: 14vw !important; }
    .input-40vw { width: 40vw !important; }

    .pricebox { display: inline-block !important; }
    .middlemenu { flex-direction: row !important; }
    .d-inline-flex { display: inline-flex !important; flex-direction: row !important; }
    .form-row.d-inline-flex,
    .form-group-inline,
    .form-row-inline { flex-direction: row !important; }
}

/* ==========================================================================
   8. RTL specific touch-ups (the app is mostly RTL Arabic)
   ========================================================================== */
[dir="rtl"] .label-6vw,
[dir="rtl"] .label-8vw,
body[style*="rtl"] .label-6vw,
body[style*="rtl"] .label-8vw {
    margin-left: 8px;
    margin-right: 0;
}

/* ==========================================================================
   9. Touch device niceties
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Make all form inputs have a comfortable tap target */
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    select,
    textarea,
    .form-control {
        min-height: 38px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    .btn {
        min-height: 38px;
    }
}

/* ==========================================================================
   10. Fixed-pixel inline width caps - never wider than the viewport on phones
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Inline styles with big pixel widths (200, 240, 280, 300, 320, 360, 400, 420, 480, 500) */
    [style*="width:200px"],
    [style*="width: 200px"],
    [style*="width:220px"],
    [style*="width: 220px"],
    [style*="width:240px"],
    [style*="width: 240px"],
    [style*="width:260px"],
    [style*="width: 260px"],
    [style*="width:280px"],
    [style*="width: 280px"],
    [style*="width:300px"],
    [style*="width: 300px"],
    [style*="width:320px"],
    [style*="width: 320px"],
    [style*="width:360px"],
    [style*="width: 360px"],
    [style*="width:400px"],
    [style*="width: 400px"],
    [style*="width:420px"],
    [style*="width: 420px"],
    [style*="width:480px"],
    [style*="width: 480px"],
    [style*="width:500px"],
    [style*="width: 500px"],
    [style*="width:600px"],
    [style*="width: 600px"] {
        max-width: 100% !important;
    }

    /* Sticky gold-prices "All" dropdown - width: 320px in inline ul style */
    #todayprices .dropdown-menu[style*="320px"],
    #todayprices .dropdown-menu {
        width: 92vw !important;
        min-width: 0 !important;
        padding-right: 12px !important;
    }

    /* sellprice / buyprice fixed 77px inputs inside that dropdown */
    #todayprices .dropdown-menu .sellprice,
    #todayprices .dropdown-menu .buyprice {
        width: 28vw !important;
    }
}

/* ==========================================================================
   11. Report tables - long horizontal reports should scroll
   ========================================================================== */
@media (max-width: 991.98px) {
    .report-wrapper,
    .report-container,
    #report-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .report-table,
    .totals-table,
    .printtable {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Header rows that use flex with big gaps - allow wrapping */
    .report-header-row,
    .date-nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 16px !important;
        padding: 8px !important;
    }

    /* Date display inputs - smaller */
    .date-display {
        min-width: 110px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 575.98px) {
    .report-title {
        font-size: 16px !important;
        transform: none !important;
        padding: 6px 12px !important;
    }

    .report-header-row {
        font-size: 14px !important;
    }

    .date-display {
        min-width: 90px !important;
        font-size: 12px !important;
        padding: 4px !important;
    }
}

/* ==========================================================================
   12. Modal dialogs - ensure they fit on tiny screens
   ========================================================================== */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .modal-content {
        max-width: 100%;
    }

    .gold-dialog,
    .gold-dialog-modal {
        max-width: calc(100vw - 16px) !important;
        width: auto !important;
    }
}

/* ==========================================================================
   13. Auth / login layouts - they often use centred narrow boxes
   ========================================================================== */
@media (max-width: 575.98px) {
    .auth-card,
    .login-card,
    .login-box,
    .card.shadow-md,
    .card {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
}

/* ==========================================================================
   14. Sticky gold-prices bar - MUST never overflow on mobile
   These rules use #id selectors and `body` prefix for maximum specificity so
   they defeat the inline width:320px on the "All" dropdown <ul>.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* The fixed-positioned outer bar */
    body #todayprices.sticky,
    body div#todayprices {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        /* `overflow: visible` lets the dropup menu render above the bar. We DON'T
           use overflow-x:hidden here because that would clip the popup vertically.
           Stray children are kept inside via the inner .pricescontainer rules. */
        overflow: visible;
    }

    body #todayprices .pricescontainer {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 6px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Hide every pricebox (عـ21 .. عـ14) - they collapse into the All dropdown */
    body #todayprices .pricebox,
    body .pricescontainer .pricebox,
    div#todayprices .pricebox {
        display: none !important;
        visibility: hidden;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden;
    }

    /* Datebox: shrink to fit so the All button stays visible */
    body #todayprices .datebox {
        width: auto !important;
        min-width: 0 !important;
        max-width: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    body #todayprices .datebox input[type="day"],
    body #todayprices .datebox input#day {
        width: 50px !important;
        font-size: 12px;
    }
    body #todayprices .datebox input#today {
        width: 80px !important;
        font-size: 12px;
    }

    /* All button: keep visible */
    body #todayprices .allbox {
        width: 70px !important;
        min-width: 70px;
        max-width: 70px;
    }

    /* The All dropdown <ul style="width: 320px"> - the actual bug from the screenshot.
       Force it to fit inside the viewport and override Bootstrap/Popper's
       transform-based positioning. */
    body #todayprices .allbox .dropdown-menu,
    body #todayprices ul.dropdown-menu,
    #todayprices .dropdown-menu[style*="320px"],
    #todayprices .dropdown-menu[style*="width: 320px"],
    #todayprices .dropdown-menu[style*="width:320px"] {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        padding: 8px 12px !important;
        text-align: right;
        box-sizing: border-box;
    }

    /* When the dropdown is actually shown by Bootstrap, Popper sets a transform
       to position it. Override so it always sits anchored to the right edge of
       the viewport, just above the sticky bar — never overflowing sideways. */
    body #todayprices .allbox .dropdown-menu.show,
    body #todayprices .btn-group.allbox.show > .dropdown-menu,
    body #todayprices .allbox.show .dropdown-menu {
        position: fixed !important;
        inset: auto 8px 50px 8px !important;
        top: auto !important;
        bottom: 50px !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        margin: 0 !important;
    }

    body #todayprices .dropdown-menu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 2px 0;
    }

    body #todayprices .dropdown-menu .sellprice,
    body #todayprices .dropdown-menu .buyprice {
        width: 32% !important;
        flex: 0 0 32%;
        min-width: 0;
        font-size: 12px;
    }

    body #todayprices .dropdown-menu label {
        font-size: 12px;
    }

    /* Push main content above the fixed sticky bar */
    body main,
    body #app > main {
        padding-bottom: 64px;
    }
}

/* Tighter still for tiny phones */
@media (max-width: 575.98px) {
    body #todayprices.sticky,
    body div#todayprices {
        padding: 4px 6px !important;
    }

    body #todayprices .datebox {
        max-width: 65%;
        font-size: 11px;
    }
    body #todayprices .datebox label {
        display: none; /* drop the "أسعار الذهب ليوم" label to free space */
    }
    body #todayprices .datebox input[type="day"],
    body #todayprices .datebox input#day {
        width: 42px !important;
        font-size: 11px !important;
    }
    body #todayprices .datebox input#today {
        width: 70px !important;
        font-size: 11px !important;
    }

    body #todayprices .allbox {
        width: 60px !important;
        min-width: 60px;
        max-width: 60px;
    }
    body #todayprices .allbox .btn {
        font-size: 12px !important;
        padding: 2px !important;
        height: 30px !important;
    }

    body #todayprices .allbox .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
    }

    body main,
    body #app > main {
        padding-bottom: 56px;
    }
}

@media (max-width: 359.98px) {
    body #todayprices .datebox {
        max-width: 70%;
    }
    body #todayprices .datebox input[type="day"],
    body #todayprices .datebox input#day {
        width: 36px !important;
        font-size: 10px !important;
    }
    body #todayprices .datebox input#today {
        width: 60px !important;
        font-size: 10px !important;
    }
    body #todayprices .allbox {
        width: 52px !important;
        min-width: 52px;
        max-width: 52px;
    }
}