/* merchantnew — thin Koovira overrides on top of Metrica. Keep minimal; template does the heavy lifting. */

/* Metrica ships `.d-flex > .btn { flex:1 1 0% }`, which silently stretches ANY button dropped into
   a flex row to fill the full width (looks unprofessional — e.g. dashboard "Open"/"View report").
   Reset to natural width across the merchant panel; opt into full-width explicitly via .w-100/.btn-block.
   Higher specificity than the theme rule, so it wins without !important. Btn-groups use a separate
   selector (`.btn-group > .btn`) and are untouched. */
.d-flex > .btn:not(.w-100):not(.btn-block) { flex: 0 0 auto; }

/* Bootstrap 5.3 ships NO .min-w-0 utility, but six merchantnew pages already use it as though it
   were one (it reads like a real utility). Without it a flex child keeps its default min-width:auto,
   so a sibling .text-truncate never truncates and long names push the row sideways on narrow
   screens. Defining it once here fixes every user at the source. */
.min-w-0 { min-width: 0; }

/* Desk tab bar: horizontal scroll on mobile without wrapping */
.nav-justified-mobile { -ms-overflow-style: none; scrollbar-width: none; }
.nav-justified-mobile::-webkit-scrollbar { display: none; }

/* KPI cards a touch tighter, consistent min-height */
.mn-kpi { min-height: 118px; }
.mn-kpi .mn-kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.mn-kpi .mn-kpi-label { color: #98a6ad; font-size: .82rem; }

/* Auth screens (login / lock) — centered card on soft gradient */
.mn-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center;
           background: linear-gradient(135deg, #f5f7ff 0%, #eef1ff 100%); padding: 24px; }
.mn-auth .card { width: 100%; max-width: 460px; border: 0; box-shadow: 0 10px 40px rgba(31,45,110,.12); }

/* Empty-state block */
.mn-empty { text-align: center; padding: 40px 16px; color: #98a6ad; }
.mn-empty i { font-size: 2.4rem; opacity: .5; }

/* ── Mobile / in-app WebView navigation ─────────────────────────────────────────────────
   The icon-rail group labels live only in hover tooltips, which never fire on touch, so on
   phones the merchant sees unlabelled icons. Below, the labels become always-visible captions
   and every primary tap target is bumped to the 44px accessibility minimum. Desktop keeps the
   compact rail + tooltip behaviour unchanged. */
.mn-rail-label { display: none; }
/* Topbar icon captions: kept for assistive tech; the anchors also carry aria-label. */
.mn-icon-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1023.98px) {
    /* Stack a readable label under each group icon in the rail. */
    .leftbar-tab-menu .main-icon-menu .main-icon-menu-body .nav.nav-tabs .nav-link {
        flex-direction: column;
        height: auto !important;
        min-height: 44px;
        padding: 6px 2px;
        line-height: 1.1;
    }
    .mn-rail-label {
        display: block;
        margin-top: 3px;
        max-width: 58px;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .2px;
        text-align: center;
        color: inherit;
        word-break: break-word;
    }
    /* Touch-friendly tap targets across the shell (topbar controls, small buttons, menu items). */
    .topbar .nav-icon,
    .topbar .button-menu-mobile {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .dropdown-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; }

    /* ── Off-canvas nav drawer (paired with assets/js/mn_nav.js) ─────────────────────────────
       Sidebar is always rendered but slid off-screen; body.mn-drawer-open slides it in over a
       dimmed backdrop. Visibility is governed here by transform (not the theme's display flag),
       so the drawer can never get stuck half-open regardless of the theme's enlarge-menu state. */
    .leftbar-tab-menu {
        display: flex !important;
        transform: translateX(-105%);
        transition: transform .25s ease;
        top: 60px; bottom: 0; left: 0;
        z-index: 1050;
        box-shadow: 2px 0 18px rgba(15, 23, 42, .18);
    }
    body.mn-drawer-open .leftbar-tab-menu { transform: translateX(0); }
    .leftbar-tab-menu .main-menu-inner { display: block !important; z-index: 1051; }
    .mn-nav-backdrop {
        position: fixed; inset: 60px 0 0 0;
        background: rgba(15, 23, 42, .45);
        z-index: 1045; opacity: 0; visibility: hidden;
        transition: opacity .2s ease;
    }
    body.mn-drawer-open .mn-nav-backdrop { opacity: 1; visibility: visible; }
    body.mn-drawer-open { overflow: hidden; }

    /* Nav badges stay legible in the collapsed pane */
    .mn-nav-badge { font-size: 10px; line-height: 1; }
}