/* it slides in from the LEFT, where its toggle sits */
    .mk-drawer .mk-drawer-box { left: 0; right: auto; transform: translateX(-100%);
        box-shadow: 4px 0 15px rgba(0,0,0,.12); }
    .mk-drawer .mk-drawer-box.show { transform: translateX(0); }
    .mk-drawer .drw-btn { cursor: pointer; }
    .mk-drawer .drw-btn-ico { width: 32px; height: 32px; object-fit: contain; }
    .mk-drawer .drw-btn-fa { font-size: 22px; color: var(--mk-white); width: 32px; text-align: center; }
    .mk-drawer .drw-label { display: none; color: var(--mk-white); font-weight: 600; margin-left: 6px;
        white-space: nowrap; font-size: 14px; }
    /* the header: the section's own mark and name, then × */
    .drw-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .drw-head-ico { display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; flex-shrink: 0; }
    .drw-head-ico img { width: 26px; height: 26px; object-fit: contain; }
    .drw-head-ico i { font-size: 20px; color: var(--mk-slate-600-2); }
    /* a count beside a row (ReportHub, Virtual Office, …) */
    .menu-sections-container [class$="menu-n"] { margin-left: auto; background: var(--mk-blue-100);
        color: var(--mk-slate-700); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
    /* On a section's own pages the bar shows only its toggle with the section's name —
       and the page name too where the section keeps it (drawer-keep-title). The filter
       and action buttons out-specify the .tb-right rule (filter_style.html), so they stay. */
    body.drawer-focus-top #main-taskbar .tb-center,
    body.drawer-focus-top #main-taskbar .tb-left > *:not(.mk-drawer),
    body.drawer-focus-top #main-taskbar .tb-right > * { display: none !important; }
    body.drawer-focus-top #main-taskbar .mk-drawer { display: inline-flex !important; }
    body.drawer-focus-top #main-taskbar .mk-drawer .drw-label { display: inline-flex !important; }
    body.drawer-focus-top:not(.drawer-keep-title) #main-taskbar .tb-left > .tb-title { display: none !important; }
    body.drawer-keep-title #main-taskbar .tb-left > .tb-title { display: inline-block !important; }
    @media (max-width: 767px) {
        body.drawer-focus-top #main-taskbar .mk-drawer.hidden-xs { display: inline-flex !important; }
        .mk-drawer .mk-drawer-box { width: 86vw; max-width: 360px; }
    }

    /* TAB MENUS (ul.mk-tabs: user details / create / edit, customer & supplier details,
       product detail; owner 2026-10-07: the old .app-vtabs system is gone). Bootstrap's
       tabs still switch the panes (ul > li > a[data-toggle=tab]); the look is the
       drawer's: rows, the section's coloured tile behind each icon (data-sec on the
       menu or a parent), the current tab in the theme colour. */
    ul.mk-tabs { list-style: none !important; margin: 0 !important; padding: 8px 0 !important;
        display: flex !important; flex-direction: column !important; gap: 0 !important;
        background: none !important; border: 0 !important; box-shadow: none !important; }
    ul.mk-tabs > li { float: none !important; margin: 0 !important; }
    ul.mk-tabs > li > a { display: flex !important; align-items: center !important; gap: 10px !important;
        margin: 2px 8px !important; padding: 9px 12px !important; border: 0 !important;
        border-radius: 12px !important; background: transparent !important;
        color: var(--mk-gray-800) !important; font-size: 14px !important; font-weight: 400 !important;
        line-height: 1.25 !important; text-decoration: none !important; }
    ul.mk-tabs > li > a:hover, ul.mk-tabs > li > a:focus {
        background: var(--mk-blue-100) !important; color: var(--mk-gray-950) !important; }
    ul.mk-tabs > li > a > i { flex: 0 0 28px; width: 28px !important; height: 28px !important;
        display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important;
        border-radius: 24%; font-size: 14px !important; color: #fff !important;
        background: var(--tile, var(--sec-default)); box-shadow: 0 1px 3px rgba(15,23,42,.25); }
    ul.mk-tabs > li > a[href="/desktop"] { font-weight: 600 !important; margin-bottom: 6px !important;
        padding-bottom: 12px !important; border-bottom: 1px solid var(--mk-slate-100-15) !important;
        border-radius: 12px 12px 0 0 !important; }
    ul.mk-tabs > li.active > a, ul.mk-tabs > li > a.active, ul.mk-tabs > li > a.is-current {
        background: linear-gradient(to right, #1e40af, #1e3a8a) !important;
        color: var(--mk-white) !important; font-weight: 600 !important; border-radius: 12px !important; }
    ul.mk-tabs > li.active > a > i, ul.mk-tabs > li > a.active > i, ul.mk-tabs > li > a.is-current > i {
        background: rgba(255,255,255,.22) !important; box-shadow: none !important; }
    ul.mk-tabs .mk-tab-badge { margin-left: auto; border: 1px solid #dc2626; color: #dc2626;
        border-radius: 999px; padding: 0 8px; font-size: 11px; line-height: 1.6; }
    /* a group inside a menu (customer details: Sales, Purchases) */
    ul.mk-tabs ul.mk-tabs { padding: 0 0 4px 14px !important; }
    ul.mk-tabs .nav-group-caret { margin-left: auto; }
    /* a menu beside its form (user create/edit, product detail): a white card that
       stays in view; inside a drawer it is just the list */
    ul.mk-tabs:not(.mk-tabs-drawer ul):not(ul.mk-tabs ul) { background: #fff !important; border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; position: sticky; top: 10px;
        max-height: calc(100vh - 24px); overflow-y: auto; }
    /* the white card holding the panes */
    .mk-tabs-panel { background: #fff !important; border: 0 !important; border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; margin-bottom: 0 !important; }
    .mk-tabs-panel .tab-content { background: #fff !important; border: 0 !important;
        border-radius: 14px !important; padding: 18px !important; }
    /* On a phone every drawer is a grid, three across: the whole set at once, a square to
       hit rather than a thin row (as Settings and the profile menu had). The module
       drawer (layouts/module_nav_items.html) follows the same rule. */
    @media (max-width: 640px) {
        .mk-drawer-box .menu-sections-container, #moduleDrawer .mtb-drawer-nav { padding: 8px; }
        .mk-drawer-box .menu-section, #moduleDrawer nav .menu-section {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
        .mk-drawer-box .menu-section > a, #moduleDrawer nav .menu-section > a { grid-column: span 2; }
        .mk-drawer-box .menu-section > a, #moduleDrawer nav .menu-section > a {
            flex-direction: column; text-align: center; gap: 6px; margin: 0 !important;
            padding: 12px 4px; border-radius: 12px; background: var(--mk-blue-50);
            font-size: 11.5px; line-height: 1.25; min-height: 84px; justify-content: center; }
        .mk-drawer-box .menu-section > a .recommended-icon,
        #moduleDrawer nav .menu-section > a .recommended-icon { width: 34px !important; height: 34px !important; }
        .mk-drawer-box .menu-section > a .recommended-icon i,
        #moduleDrawer nav .menu-section > a .recommended-icon i { font-size: 20px !important; }
        .mk-drawer-box .menu-section > :not(a), #moduleDrawer nav .menu-section > :not(a) { grid-column: 1 / -1; }

        /* (tab menus in a drawer: the same grid, Home + the next tab on the first line) */
        .mk-tabs-drawer ul.mk-tabs { display: grid !important; grid-template-columns: repeat(6, 1fr);
            gap: 8px !important; padding: 8px !important; }
        /* Bootstrap's .nav clearfix (::before/::after) would be two grid cells */
        .mk-tabs-drawer ul.mk-tabs::before, .mk-tabs-drawer ul.mk-tabs::after { display: none !important; }
        .mk-tabs-drawer ul.mk-tabs > li { grid-column: span 2; }
        .mk-tabs-drawer ul.mk-tabs > li > a { flex-direction: column !important; text-align: center;
            gap: 6px !important; margin: 0 !important; padding: 12px 4px !important; height: 100%;
            background: var(--mk-blue-50) !important; font-size: 11.5px !important;
            min-height: 84px; justify-content: center !important; border: 0 !important; border-radius: 12px !important; }
        .mk-tabs-drawer ul.mk-tabs > li.active > a, .mk-tabs-drawer ul.mk-tabs > li > a.active {
            background: linear-gradient(to right, #1e40af, #1e3a8a) !important;
            color: var(--mk-white) !important; }
        .mk-tabs-drawer ul.mk-tabs > li > a > i { width: 34px !important; height: 34px !important;
            flex-basis: 34px; font-size: 18px !important; }
        .mk-tabs-drawer ul.mk-tabs > li.nav-group-header, .mk-tabs-drawer ul.mk-tabs > li.nav-group-body,
        .mk-tabs-drawer ul.mk-tabs > li:not(:has(> a)) { grid-column: 1 / -1; }
        /* a group header (customer: Sales, Purchases) is a row across, not a tile */
        .mk-tabs-drawer ul.mk-tabs > li.nav-group-header > a { flex-direction: row !important;
            justify-content: flex-start !important; min-height: 0; text-align: left;
            font-size: 13px !important; padding: 10px !important; }
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]),
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) + li { grid-column: span 3; }
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) > a,
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) + li > a {
            flex-direction: row !important; justify-content: flex-start !important; min-height: 0;
            text-align: left; font-size: 13px !important; font-weight: 600 !important; padding: 10px !important;
            margin: 0 !important; }
        /* Home and the section's Dashboard (the row right after it) share the first line,
           half each, as rows rather than tiles (owner, 2026-10-07) */
        .mk-drawer-box .menu-section > a[href="/desktop"], #moduleDrawer nav .menu-section > a[href="/desktop"],
        .mk-drawer-box .menu-section > a[href="/desktop"] + a, #moduleDrawer nav .menu-section > a[href="/desktop"] + a {
            grid-column: span 3; flex-direction: row; justify-content: flex-start; min-height: 0;
            text-align: left; font-size: 13px; font-weight: 600; padding: 10px; border: 0 !important;
            border-radius: 12px !important; margin: 0 !important; }
    }