/*
 * mobile.css
 * Общие адаптивные стили BeMobile.
 *
 * Сюда вынесены чистые @media-блоки из HTML-шаблонов.
 * Страничные правила ограничены через html[data-page="..."],
 * чтобы адаптив одной страницы не ломал другие страницы с похожими классами.
 *
 * Важно: Jinja-зависимые @media-блоки оставлены в шаблонах,
 * потому что static/css/*.css не обрабатывается Jinja.
 */


/* ============================================================
   storage.html
   ============================================================ */

@media (max-width: 780px) {html[data-page="storage"] .request-filter-bar { grid-template-columns: 1fr; }html[data-page="storage"] .request-filter-actions { justify-content: stretch; }html[data-page="storage"] .request-filter-actions .tiny-btn { flex: 1; justify-content: center; }
}

@media (max-width: 1100px) {html[data-page="storage"] { --menu-w: 64px; }html[data-page="storage"] .brand-name, html[data-page="storage"] .brand-sub, html[data-page="storage"] .op-badge, html[data-page="storage"] .nav-section-label, html[data-page="storage"] .nav-link span, html[data-page="storage"] .nav-badge { display: none; }html[data-page="storage"] .nav-link { justify-content: center; padding: 12px; }html[data-page="storage"] .nav-link i { font-size: 18px; }html[data-page="storage"] .brand { padding: 14px 10px; }html[data-page="storage"] .brand-icon { margin: 0 auto; }
}

@media (max-width: 900px) {html[data-page="storage"] .body-grid { grid-template-columns: 1fr; }html[data-page="storage"] .col-nav { display: none; }html[data-page="storage"] .topbar { padding: 12px 16px; }html[data-page="storage"] .topbar-title { font-size: 15px; }html[data-page="storage"] .search-input { width: 160px; }html[data-page="storage"] .content-scroll { padding: 16px; gap: 14px; }html[data-page="storage"] .page-header { padding: 13px 16px; }html[data-page="storage"] .grid-2 { grid-template-columns: 1fr 1fr; }html[data-page="storage"] .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {html[data-page="storage"], html[data-page="storage"] body { overflow: hidden; }html[data-page="storage"] .pos-shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }html[data-page="storage"] .col-nav { display: none !important; }html[data-page="storage"] .main { grid-column: 1; height: 100vh; }html[data-page="storage"] .topbar { padding: 10px 14px; gap: 10px; }html[data-page="storage"] .topbar-title { font-size: 14px; }html[data-page="storage"] .topbar-sub { display: none; }html[data-page="storage"] .search-wrap { display: none; }html[data-page="storage"] .topbar-right { gap: 6px; }html[data-page="storage"] .btn-ghost { padding: 7px 10px; font-size: 12px; }html[data-page="storage"] .btn-ghost span { display: none; }html[data-page="storage"] .body-grid { grid-template-columns: 1fr; overflow-y: auto; overflow-x: hidden; }html[data-page="storage"] .col-content { overflow-y: auto; }html[data-page="storage"] .content-scroll { padding: 12px; gap: 12px; }html[data-page="storage"] .page-header { padding: 12px 14px; gap: 10px; position: sticky; top: 0; }html[data-page="storage"] .ph-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }html[data-page="storage"] .ph-title { font-size: 14px; }html[data-page="storage"] .ph-sub { font-size: 11px; }html[data-page="storage"] .ph-right { gap: 6px; }html[data-page="storage"] .grid-2, html[data-page="storage"] .grid-3 { grid-template-columns: 1fr; gap: 10px; }html[data-page="storage"] .card-head { padding: 12px 14px; gap: 10px; }html[data-page="storage"] .card-body { padding: 0; }html[data-page="storage"] .form-card-head { padding: 12px 14px; }html[data-page="storage"] .form-card-body { padding: 12px; gap: 12px; }html[data-page="storage"] .data-table, html[data-page="storage"] .pc-table { display: block; width: 100%; }html[data-page="storage"] .data-table thead, html[data-page="storage"] .pc-table thead { display: none; }html[data-page="storage"] .data-table tbody, html[data-page="storage"] .pc-table tbody { display: flex; flex-direction: column; gap: 8px; padding: 10px; }html[data-page="storage"] .data-table tr, html[data-page="storage"] .pc-table tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--r-sm); padding: 10px 12px;
      }html[data-page="storage"] .data-table td, html[data-page="storage"] .pc-table td { padding: 0; border: none; font-size: 12.5px; vertical-align: middle; }html[data-page="storage"] .data-table td:first-child, html[data-page="storage"] .pc-table td:first-child { flex-shrink: 0; }html[data-page="storage"] .data-table td:nth-child(2), html[data-page="storage"] .pc-table td:nth-child(2) { flex: 1; min-width: 120px; }html[data-page="storage"] .data-table td:nth-child(3), html[data-page="storage"] .data-table td:nth-child(5) { display: none; }html[data-page="storage"] .data-table td:last-child { width: 100%; margin-top: 4px; }html[data-page="storage"] .row-action { justify-content: flex-start; }html[data-page="storage"] .pc-product-name { font-size: 12px; }html[data-page="storage"] .pc-product-sub { font-size: 10px; }html[data-page="storage"] .pc-summary { gap: 5px; padding: 8px 12px; }html[data-page="storage"] .pcs-chip { font-size: 10.5px; padding: 3px 8px; }html[data-page="storage"] .pc-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }html[data-page="storage"] .pc-meta { flex: 1; min-width: 140px; }html[data-page="storage"] .pc-actions { width: 100%; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; gap: 6px; flex-wrap: wrap; }html[data-page="storage"] .pc-num-badge { font-size: 11px; padding: 3px 8px; }html[data-page="storage"] .btn-accent { padding: 8px 12px; font-size: 12px; gap: 5px; }html[data-page="storage"] .btn-save { padding: 11px; font-size: 13px; }html[data-page="storage"] .tiny-btn { padding: 6px 10px; font-size: 11.5px; }html[data-page="storage"] .rc-head { padding: 11px 13px; }html[data-page="storage"] .rc-body { padding: 11px 13px; }html[data-page="storage"] .rc-foot { padding: 10px 13px; gap: 6px; flex-wrap: wrap; }html[data-page="storage"] .rc-item { padding: 7px 10px; }html[data-page="storage"] .rc-item-name { font-size: 12px; }html[data-page="storage"] .mini-stats { display: none; }html[data-page="storage"] .hint-box { padding: 10px 12px; }html[data-page="storage"] .hint-box span { font-size: 11.5px; }html[data-page="storage"] .form-actions { flex-direction: column; gap: 8px; }html[data-page="storage"] .btn-cancel { justify-content: center; }html[data-page="storage"] .sec-div { gap: 8px; }html[data-page="storage"] .sd-text { font-size: 11px; white-space: nowrap; }
}

@media (max-width: 640px) {html[data-page="storage"] .mobile-tab-nav {
        display: flex; gap: 6px; padding: 8px 12px;
        background: var(--surface); border-bottom: 1px solid var(--border);
        overflow-x: auto; overflow-y: hidden; flex-shrink: 0;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
      }html[data-page="storage"] .mobile-tab-nav::-webkit-scrollbar { display: none; }html[data-page="storage"] .mtab {
        display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
        padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border);
        background: var(--panel); color: var(--muted);
        font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500;
        cursor: pointer; flex-shrink: 0;
        transition: background .15s, color .15s, border-color .15s;
        -webkit-tap-highlight-color: transparent;
      }html[data-page="storage"] .mtab i { font-size: 13px; }html[data-page="storage"] .mtab.active { background: var(--glow); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }html[data-page="storage"] .mtab:active { opacity: .75; }
}

@media (max-width: 960px) {html[data-page="storage"] .distribution-fill-panel, html[data-page="storage"] .distribution-main-grid {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {html[data-page="storage"] #sec-distribute .content-scroll {
      padding: 14px 12px;
      gap: 14px;
    }html[data-page="storage"] #sec-distribute .page-header {
      padding: 13px 14px;
    }html[data-page="storage"] #sec-distribute .ph-title {
      font-size: 14px;
    }html[data-page="storage"] #sec-distribute .ph-sub {
      font-size: 11px;
    }html[data-page="storage"] .distribution-card .form-card-head, html[data-page="storage"] .distribution-card .form-card-body {
      padding: 14px;
    }html[data-page="storage"] .distribution-fill-panel, html[data-page="storage"] .distribution-products-card {
      padding: 12px;
      border-radius: 13px;
    }html[data-page="storage"] .distribution-fill-info {
      padding: 10px;
    }html[data-page="storage"] .distribution-fill-info span {
      font-size: 12px;
    }html[data-page="storage"] .distribution-products-head {
      align-items: flex-start;
      flex-direction: column;
    }html[data-page="storage"] .distribution-products-head #add-item {
      width: 100%;
      justify-content: center;
      min-height: 38px;
    }html[data-page="storage"] #sec-distribute .item-row {
      grid-template-columns: 1fr 96px 34px;
      gap: 8px;
      padding: 10px;
    }html[data-page="storage"] #sec-distribute .item-row .field:first-child {
      grid-column: 1 / -1;
    }html[data-page="storage"] #sec-distribute .quantity-input {
      min-height: 39px;
      padding-left: 32px;
      font-size: 14px;
    }html[data-page="storage"] #sec-distribute .btn-remove-item {
      width: 34px;
      height: 39px;
    }html[data-page="storage"] .distribution-mode-bar {
      align-items: flex-start;
      flex-wrap: wrap;
      padding: 11px;
    }html[data-page="storage"] .distribution-mode-text {
      flex: 1 1 calc(100% - 48px);
    }html[data-page="storage"] #btn-clear-purchase-mode {
      width: 100%;
      justify-content: center;
    }html[data-page="storage"] .distribution-actions {
      grid-template-columns: 1fr;
    }html[data-page="storage"] .distribution-actions .btn-cancel, html[data-page="storage"] .distribution-actions .btn-save {
      width: 100%;
      justify-content: center;
    }html[data-page="storage"] .distribution-mobile-note {
      display: block;
    }
}

@media (max-width: 420px) {html[data-page="storage"] #sec-distribute .item-row {
      grid-template-columns: 1fr 82px 32px;
      padding: 9px;
    }html[data-page="storage"] #sec-distribute .field label {
      font-size: 9.8px;
    }html[data-page="storage"] #sec-distribute .select2-container--default .select2-selection--single .select2-selection__rendered {
      padding-left: 34px;
      font-size: 12.5px;
    }
}


/* ============================================================
   settings.html
   ============================================================ */

@media (max-width: 1100px) {html[data-page="settings"] { --menu-w: 64px; }html[data-page="settings"] .settings-shell { grid-template-columns: 220px 1fr; }html[data-page="settings"] .settings-grid { grid-template-columns: 1fr; }html[data-page="settings"] .branch-manager-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {html[data-page="settings"], html[data-page="settings"] body { overflow: auto; }html[data-page="settings"] .pos-shell { display: block; height: auto; min-height: 100vh; }html[data-page="settings"] .main { min-height: 100vh; overflow: visible; }html[data-page="settings"] .settings-shell { display: block; overflow: visible; }html[data-page="settings"] .settings-nav {
        display: flex;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        gap: 6px;
        padding: 10px 12px;
      }html[data-page="settings"] .settings-nav-label { display: none; }html[data-page="settings"] .settings-tab { min-width: max-content; }html[data-page="settings"] .settings-tab.active::before { display: none; }html[data-page="settings"] .settings-content { padding: 18px 14px 96px; }html[data-page="settings"] .topbar { padding: 14px 16px; }html[data-page="settings"] .setting-row { align-items: flex-start; flex-direction: column; gap: 10px; }html[data-page="settings"] .setting-control { width: 100%; min-width: 0; justify-content: stretch; }html[data-page="settings"] .select-like, html[data-page="settings"] .input-like { width: 100%; }html[data-page="settings"] .setting-control .select-like { width: 100%; }html[data-page="settings"] .sound-volume-control { width: 100%; min-width: 0; }html[data-page="settings"] .theme-grid { grid-template-columns: 1fr; width: 100%; }html[data-page="settings"] .accent-grid { justify-content: stretch; width: 100%; }html[data-page="settings"] .accent-choice { flex: 1 1 100%; justify-content: flex-start; }html[data-page="settings"] .form-grid { grid-template-columns: 1fr; }html[data-page="settings"] .field-full { grid-column: auto; }html[data-page="settings"] .form-actions { justify-content: stretch; }html[data-page="settings"] .form-actions .action-btn { width: 100%; justify-content: center; }
}


/* ============================================================
   returns.html
   ============================================================ */

@media (max-width: 1200px) {html[data-page="returns"] .content { grid-template-columns: 1fr 360px; }html[data-page="returns"] .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {html[data-page="returns"] { --menu-w: 64px; }
}

@media (max-width: 960px) {html[data-page="returns"], html[data-page="returns"] body { overflow: auto; }html[data-page="returns"] .pos-shell { grid-template-columns: 64px 1fr; height: auto; min-height: 100vh; }html[data-page="returns"] .main { overflow: visible; }html[data-page="returns"] .content { grid-template-columns: 1fr; overflow-y: visible; padding: 16px; }html[data-page="returns"] .right-col { position: static; height: auto; overflow: visible; }html[data-page="returns"] .right-card { min-height: 0; flex: none; }html[data-page="returns"] .right-card-scroll { overflow: visible; flex: none; max-height: none; }html[data-page="returns"] .stats-grid { grid-template-columns: repeat(2, 1fr); }html[data-page="returns"] .exchange-steps { flex-direction: column; border-radius: var(--r); }html[data-page="returns"] .step-item:not(:last-child)::after { display: none; }html[data-page="returns"] .date-search-grid { grid-template-columns: 1fr 1fr; }html[data-page="returns"] .payment-methods { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {html[data-page="returns"] { --menu-w: 0px; }html[data-page="returns"], html[data-page="returns"] body { overflow: auto; height: auto; }html[data-page="returns"] .sidebar { display: none !important; }html[data-page="returns"] .pos-shell { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }html[data-page="returns"] .main { overflow: visible; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }html[data-page="returns"] .topbar { padding: 12px 14px; }html[data-page="returns"] .content { grid-template-columns: 1fr; padding: 14px 12px 20px; gap: 16px; overflow-y: visible; }html[data-page="returns"] .right-col { position: static; height: auto; overflow: visible; }html[data-page="returns"] .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }html[data-page="returns"] .date-search-grid { grid-template-columns: 1fr; }html[data-page="returns"] .field-row { grid-template-columns: 1fr; }html[data-page="returns"] .tabs-bar { padding: 8px 14px 0; }html[data-page="returns"] .tab-btn { padding: 8px 12px 9px; font-size: 12px; gap: 6px; }html[data-page="returns"] .exchange-steps { display: none; }
}


/* ============================================================
   pos.html
   ============================================================ */

@media (max-width: 640px) {html[data-page="pos"] .right-panel {
        grid-column: 1;
      }
}


/* ============================================================
   menu include / global
   ============================================================ */

@media (min-width: 769px) {
    .sidebar:hover,
    .sidebar.is-pointer-open,
    .sidebar.is-pinned {
      width: 230px;
    }
    .sidebar:hover:not(.is-pinned),
    .sidebar.is-pointer-open:not(.is-pinned) {
      box-shadow: 18px 0 42px rgba(0,0,0,.28);
    }
  }

@media (min-width: 769px) {
    .brand-name,
    .brand-sub,
    .nav-section-label {
      display: block;
    }
    .op-badge {
      display: flex;
    }
    .nav-link span:not(.nav-badge) {
      display: inline-block;
    }
    .brand-text,
    .op-info,
    .nav-section-label,
    .nav-link span:not(.nav-badge) {
      opacity: 0;
      transform: translateX(-8px);
      pointer-events: none;
    }
    .sidebar:hover .brand-text,
    .sidebar.is-pointer-open .brand-text,
    .sidebar.is-pinned .brand-text,
    .sidebar:hover .op-info,
    .sidebar.is-pointer-open .op-info,
    .sidebar.is-pinned .op-info,
    .sidebar:hover .nav-section-label,
    .sidebar.is-pointer-open .nav-section-label,
    .sidebar.is-pinned .nav-section-label,
    .sidebar:hover .nav-link span:not(.nav-badge),
    .sidebar.is-pointer-open .nav-link span:not(.nav-badge),
    .sidebar.is-pinned .nav-link span:not(.nav-badge) {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
  }

@media (max-width: 768px) {
    .sidebar { display: none !important; }
    .mobile-nav { display: flex !important; }

    /* отступ снизу для контента под мобильной навигацией */
    .pos-shell {
      padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
  }

@media (min-width: 769px) {
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .brand {
      padding: 28px 0 22px;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .brand-logo {
      justify-content: center;
      gap: 0;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .brand-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      font-size: 20px;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .op-badge {
      width: 48px;
      height: 48px;
      margin: 16px auto 18px;
      padding: 0;
      justify-content: center;
      border-radius: 16px;
      background: rgba(255,255,255,.035);
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .op-avatar {
      width: 34px;
      height: 34px;
      font-size: 12px;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .brand-text,
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .op-info,
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-section-label,
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-link span:not(.nav-badge) {
      display: none !important;
      opacity: 0;
      transform: none;
      pointer-events: none;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-section-label {
      height: 0;
      padding: 0;
      margin: 0;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-list {
      padding: 0;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-item {
      margin: 6px 0;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-link {
      display: flex !important;
      width: 52px;
      height: 52px;
      margin: 0 auto;
      align-items: center !important;
      justify-content: center !important;
      gap: 0;
      padding: 0;
      border-radius: 16px;
      overflow: visible;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-link i {
      display: block !important;
      width: 20px !important;
      min-width: 20px !important;
      height: 20px !important;
      margin: 0 !important;
      color: currentColor;
      font-size: 19px !important;
      line-height: 1;
      text-align: center;
      transform: none !important;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-link:hover {
      background: rgba(255,255,255,.055);
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-link.active {
      background: rgba(108,99,255,.24);
      box-shadow: inset 0 0 0 1px rgba(108,99,255,.22);
      color: var(--accent) !important;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-link.active::before {
      left: -14px;
      top: 14px;
      bottom: 14px;
      width: 4px;
      border-radius: 0 4px 4px 0;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .sidebar-footer {
      padding: 14px 0 18px;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .sidebar-nav::-webkit-scrollbar {
      width: 0;
    }
    .sidebar:not(.is-pinned):not(:hover):not(.is-pointer-open) .nav-badge {
      position: absolute;
      top: -3px;
      right: -3px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      align-items: center;
      justify-content: center;
    }
    .mobile-nav { display: none !important; }
    .mobile-nav-more-drawer { display: none !important; }
    .drawer-overlay { display: none !important; }
  }


/* ============================================================
   login.html
   ============================================================ */

@media (max-width: 860px) {html[data-page="login"] .shell { grid-template-columns: 1fr; }html[data-page="login"] .left { display: none; }html[data-page="login"] .right { min-height: 100vh; padding: 44px 28px; }
}


/* ============================================================
   inventory.html
   ============================================================ */

@media (max-width: 1100px) {html[data-page="inventory"] .inv-topbar, html[data-page="inventory"] .inv-filterbar {
        flex-wrap: wrap;
      }html[data-page="inventory"] .inv-topbar-title {
        width: 100%;
      }html[data-page="inventory"] .inv-topbar .inv-search-wrap {
        flex: 1 1 320px;
        min-width: 220px;
      }html[data-page="inventory"] .btn-inv-compare, html[data-page="inventory"] .btn-inv-clear, html[data-page="inventory"] .btn-inv-download {
        min-height: 38px;
      }
}

@media (max-width: 768px) {html[data-page="inventory"] .inv-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 100dvh;
        height: 100dvh;
      }html[data-page="inventory"] .inv-panel {
        grid-column: 1;
        height: 100dvh;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
      }html[data-page="inventory"] .inv-topbar, html[data-page="inventory"] .inv-stats, html[data-page="inventory"] .inv-filterbar {
        padding-left: 14px;
        padding-right: 14px;
      }html[data-page="inventory"] .inv-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
      }html[data-page="inventory"] .inv-topbar-title {
        display: none;
      }html[data-page="inventory"] .inv-topbar .inv-search-wrap {
        grid-column: 1;
        min-width: 0;
      }html[data-page="inventory"] .btn-inv-compare, html[data-page="inventory"] .btn-inv-clear {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
      }html[data-page="inventory"] .btn-inv-compare span, html[data-page="inventory"] .btn-inv-clear span {
        display: none;
      }html[data-page="inventory"] .inv-stats {
        align-items: stretch;
        gap: 10px;
      }html[data-page="inventory"] .match-block {
        min-width: 0;
      }html[data-page="inventory"] .match-label {
        display: none;
      }html[data-page="inventory"] .match-pct {
        min-width: 46px;
        font-size: 16px;
      }html[data-page="inventory"] .btn-inv-download {
        width: 42px;
        height: 38px;
        padding: 0;
        justify-content: center;
        flex-shrink: 0;
      }html[data-page="inventory"] .btn-inv-download span {
        display: none;
      }html[data-page="inventory"] .inv-filterbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 8px;
      }html[data-page="inventory"] .inv-filterbar .inv-search-wrap {
        max-width: none !important;
        min-width: 0;
      }html[data-page="inventory"] .inv-filter-select {
        min-width: 120px;
        max-width: 42vw;
        padding: 9px 10px;
      }html[data-page="inventory"] .status-counts {
        grid-column: 1 / -1;
        overflow-x: auto;
        padding-bottom: 1px;
        scrollbar-width: none;
      }html[data-page="inventory"] .status-counts::-webkit-scrollbar {
        display: none;
      }html[data-page="inventory"] .sc-pill {
        flex: 1 0 auto;
        justify-content: center;
        min-height: 28px;
      }html[data-page="inventory"] .inv-list-wrap {
        padding: 12px 12px 16px;
      }html[data-page="inventory"] .inv-card {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
          "info remove"
          "qty qty"
          "manual manual";
        align-items: start;
        gap: 12px;
        padding: 13px 14px;
        border-radius: 12px;
      }html[data-page="inventory"] .inv-card:hover {
        transform: none;
      }html[data-page="inventory"] .inv-card-info {
        grid-area: info;
        min-width: 0;
      }html[data-page="inventory"] .inv-card > div:nth-child(2) {
        grid-area: qty;
        width: 100%;
        justify-content: space-between;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 9px 10px;
      }html[data-page="inventory"] .inv-qty-block, html[data-page="inventory"] .inv-scanned-block {
        min-width: 0;
        flex: 1;
      }html[data-page="inventory"] .inv-qty-val, html[data-page="inventory"] .inv-scanned-val {
        font-size: 18px;
      }html[data-page="inventory"] .inv-manual-add {
        grid-area: manual;
        width: 100%;
      }html[data-page="inventory"] .inv-manual-input {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 36px;
      }html[data-page="inventory"] .inv-manual-btn {
        width: 38px;
        height: 36px;
      }html[data-page="inventory"] .inv-remove-btn {
        grid-area: remove;
        width: 34px;
        height: 34px;
      }html[data-page="inventory"] .orb {
        display: none;
      }
}

@media (max-width: 420px) {html[data-page="inventory"] .inv-topbar, html[data-page="inventory"] .inv-stats, html[data-page="inventory"] .inv-filterbar {
        padding-left: 10px;
        padding-right: 10px;
      }html[data-page="inventory"] .inv-search-input {
        font-size: 12.5px;
        padding-right: 10px;
      }html[data-page="inventory"] .inv-filterbar {
        grid-template-columns: 1fr;
      }html[data-page="inventory"] .inv-filter-select {
        width: 100%;
        max-width: none;
      }html[data-page="inventory"] .inv-card {
        padding: 12px;
      }html[data-page="inventory"] .inv-card-code {
        font-size: 10.5px;
      }
}


/* ============================================================
   debug_db.html
   ============================================================ */

@media (max-width: 980px) {html[data-page="debug-db"] .metric-grid, html[data-page="debug-db"] .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }html[data-page="debug-db"] .topbar { align-items: stretch; flex-direction: column; }html[data-page="debug-db"] .limit-form { width: max-content; }
}

@media (max-width: 560px) {html[data-page="debug-db"] .page { width: calc(100vw - 20px); padding-top: 18px; }html[data-page="debug-db"] .metric-grid, html[data-page="debug-db"] .check-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   dashboard.html
   ============================================================ */

@media (max-width: 1024px) {html[data-page="dashboard"] .dashboard-shell {
        grid-template-columns: 64px 1fr !important;
      }html[data-page="dashboard"] .branch-switcher-wrap { flex-wrap: wrap; gap: 5px; }html[data-page="dashboard"] .branch-switcher { max-width: 340px; }
}

@media (max-width: 768px) {html[data-page="dashboard"] .dashboard-shell {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr;
      }html[data-page="dashboard"] .dashboard-shell > aside, html[data-page="dashboard"] .section-nav { display: none !important; }html[data-page="dashboard"] .dashboard-shell > .mobile-nav {
        display: flex !important;
        z-index: 1200 !important;
      }html[data-page="dashboard"] .page-topbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
      }html[data-page="dashboard"] .page-topbar-copy h1 { font-size: 18px !important; margin: 0; }html[data-page="dashboard"] .page-topbar-copy p { display: none; }html[data-page="dashboard"] .page-topbar-copy .eyebrow { font-size: 9px; }html[data-page="dashboard"] .page-topbar-actions {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
      }html[data-page="dashboard"] .topbar-row { gap: 6px; flex-wrap: wrap; }html[data-page="dashboard"] .branch-switcher-wrap { width: 100%; }html[data-page="dashboard"] .branch-switcher {
        max-width: 100%;
        width: 100%;
        flex-wrap: wrap !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
      }html[data-page="dashboard"] .branch-btn {
        flex-shrink: 0;
      }html[data-page="dashboard"] .shell-strip { padding: 10px 14px !important; gap: 10px !important; }html[data-page="dashboard"] .shell-metrics { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }html[data-page="dashboard"] .shell-card { padding: 10px !important; }html[data-page="dashboard"] .shell-value { font-size: 14px !important; }html[data-page="dashboard"] .shell-label { font-size: 9.5px !important; }html[data-page="dashboard"] .shell-meta { flex-wrap: wrap; gap: 5px; }html[data-page="dashboard"] .shell-meta-pill { font-size: 10px !important; padding: 4px 9px !important; }html[data-page="dashboard"] .workspace-grid { grid-template-columns: 1fr !important; gap: 0 !important; }html[data-page="dashboard"] /* ── CRITICAL SCROLL FIX ──
         External CSS likely sets overflow:hidden + fixed heights on shell/main.
         On mobile we override the entire layout to a simple scrollable column. */
      html, html[data-page="dashboard"] body {
        height: 100% !important;
        overflow: auto !important;
      }html[data-page="dashboard"] .dashboard-shell {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
      }html[data-page="dashboard"] .dashboard-main {
        flex: 1 !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
      }html[data-page="dashboard"] .workspace-grid {
        flex: 1 !important;
        height: auto !important;
        overflow: visible !important;
      }html[data-page="dashboard"] .section-stage {
        height: auto !important;
        overflow: visible !important;
        flex: 1 !important;
      }html[data-page="dashboard"] .dashboard-section {
        height: auto !important;
        overflow: visible !important;
      }html[data-page="dashboard"] .mobile-section-nav {
        display: flex;
        gap: 6px;
        padding: 8px 14px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        position: sticky;
        top: 0;
        z-index: 30;
      }html[data-page="dashboard"] .mobile-toggle-bar {
        position: sticky;
        top: 41px;
        z-index: 29;
      }html[data-page="dashboard"] .mobile-section-nav::-webkit-scrollbar { display: none; }html[data-page="dashboard"] .msec-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        padding: 7px 13px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s, color .15s, border-color .15s;
        -webkit-tap-highlight-color: transparent;
      }html[data-page="dashboard"] .msec-btn i { font-size: 12px; }html[data-page="dashboard"] .msec-btn.is-active {
        background: var(--glow);
        color: var(--accent2);
        border-color: rgba(31,209,165,.4);
      }html[data-page="dashboard"] .msec-btn:active { opacity: .75; }html[data-page="dashboard"] .section-stage { padding: 0 !important; }html[data-page="dashboard"] .dashboard-section { padding: 14px !important; }html[data-page="dashboard"] .section-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
      }html[data-page="dashboard"] .section-head h2 { font-size: 17px !important; margin: 0; }html[data-page="dashboard"] .section-head p { font-size: 12px; }html[data-page="dashboard"] .section-range { font-size: 11px !important; align-self: flex-start; }html[data-page="dashboard"] .metric-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }html[data-page="dashboard"] .metric-card { padding: 12px !important; }html[data-page="dashboard"] .metric-value { font-size: 18px !important; }html[data-page="dashboard"] .metric-label { font-size: 10px !important; }html[data-page="dashboard"] .metric-icon { font-size: 16px !important; }html[data-page="dashboard"] .metric-delta { font-size: 11px !important; }html[data-page="dashboard"] .panel-grid, html[data-page="dashboard"] .panel-grid-2, html[data-page="dashboard"] .panel-grid-3 { grid-template-columns: 1fr !important; gap: 10px !important; }html[data-page="dashboard"] .panel { border-radius: 12px !important; }html[data-page="dashboard"] .panel-head { padding: 12px 14px !important; }html[data-page="dashboard"] .panel-head h3 { font-size: 13px !important; }html[data-page="dashboard"] .panel-head p { font-size: 11px !important; }html[data-page="dashboard"] .chart-wrap { height: 200px !important; }html[data-page="dashboard"] .chart-wrap.tall { height: 220px !important; }html[data-page="dashboard"] .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }html[data-page="dashboard"] .data-table { min-width: 480px; }html[data-page="dashboard"] .data-table th, html[data-page="dashboard"] .data-table td { padding: 8px 10px !important; font-size: 11.5px !important; }html[data-page="dashboard"] .insight-list { padding: 10px 14px !important; }html[data-page="dashboard"] .insight-item { padding: 8px 0 !important; font-size: 12.5px !important; }html[data-page="dashboard"] .stat-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1px;
      }html[data-page="dashboard"] .progress-stack { padding: 10px 14px !important; gap: 10px !important; }html[data-page="dashboard"] .progress-item { gap: 5px !important; }html[data-page="dashboard"] .progress-meta { font-size: 12px !important; }html[data-page="dashboard"] .source-pill { font-size: 11px !important; padding: 6px 12px !important; margin-bottom: 10px !important; }html[data-page="dashboard"] .staff-grid { grid-template-columns: 1fr !important; gap: 10px !important; }html[data-page="dashboard"] .staff-card { padding: 14px !important; }html[data-page="dashboard"] .staff-name { font-size: 14px !important; }html[data-page="dashboard"] .staff-stat-row { font-size: 12px !important; padding: 5px 0 !important; }html[data-page="dashboard"] .branch-card-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 10px !important; }html[data-page="dashboard"] .branch-card { padding: 14px !important; }html[data-page="dashboard"] .branch-name { font-size: 14px !important; }html[data-page="dashboard"] .branch-stat-row { font-size: 12px !important; padding: 5px 0 !important; }html[data-page="dashboard"] .period-switcher { font-size: 12px !important; }html[data-page="dashboard"] .period-btn { padding: 5px 10px !important; font-size: 12px !important; }html[data-page="dashboard"] .ghost-btn { padding: 6px 10px !important; font-size: 12px !important; }
}

@media (max-width: 480px) {html[data-page="dashboard"] .shell-metrics { grid-template-columns: repeat(2, 1fr) !important; }html[data-page="dashboard"] .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }html[data-page="dashboard"] .page-topbar-actions { flex-direction: column !important; align-items: stretch !important; }html[data-page="dashboard"] .topbar-row { width: 100%; justify-content: space-between; }
}

@media (max-width: 768px) {html[data-page="dashboard"] .mobile-toggle-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 14px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }html[data-page="dashboard"] .mobile-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: background .15s, color .15s, border-color .15s;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
      }html[data-page="dashboard"] .mobile-toggle-btn:active { opacity: .75; }html[data-page="dashboard"] .mobile-toggle-btn[aria-expanded="true"] {
        background: var(--glow);
        color: var(--accent2);
        border-color: rgba(31,209,165,.4);
      }html[data-page="dashboard"] /* Show/hide label variants */
      .mobile-toggle-btn[aria-expanded="true"]  .toggle-label-closed { display: none; }html[data-page="dashboard"] .mobile-toggle-btn[aria-expanded="false"] .toggle-label-open { display: none; }html[data-page="dashboard"] .mobile-toggle-btn[aria-expanded="true"]  .toggle-label-open { display: inline-flex; align-items: center; gap: 5px; }html[data-page="dashboard"] .mobile-toggle-btn[aria-expanded="false"] .toggle-label-closed { display: inline-flex; align-items: center; gap: 5px; }html[data-page="dashboard"] .toggle-status-peek {
        display: flex;
        align-items: center;
        gap: 5px;
      }html[data-page="dashboard"] .peek-pill {
        font-size: 10.5px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 10px;
        background: var(--panel);
        border: 1px solid var(--border);
        color: var(--muted);
        white-space: nowrap;
      }html[data-page="dashboard"] .peek-pill.status { color: var(--accent2); border-color: rgba(31,209,165,.25); background: rgba(31,209,165,.07); }
}

@media (max-width: 768px) {
      html[data-page="dashboard"],
      html[data-page="dashboard"] body {
        max-width: 100%;
        overflow-x: hidden !important;
      }

      html[data-page="dashboard"] .dashboard-shell,
      html[data-page="dashboard"] .dashboard-main,
      html[data-page="dashboard"] .top-panel,
      html[data-page="dashboard"] .shell-strip,
      html[data-page="dashboard"] .workspace-grid,
      html[data-page="dashboard"] .section-stage,
      html[data-page="dashboard"] .dashboard-section,
      html[data-page="dashboard"] .mobile-toggle-bar {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }

      html[data-page="dashboard"] .shell-meta {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      html[data-page="dashboard"] .shell-meta-pill {
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      html[data-page="dashboard"] .shell-meta-pill:first-child {
        grid-column: 1 / -1;
      }

      html[data-page="dashboard"] .shell-meta-pill.status {
        max-width: 118px;
        justify-self: end;
      }

      html[data-page="dashboard"] .toggle-status-peek {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        overflow: hidden;
      }

      html[data-page="dashboard"] .peek-pill {
        min-width: 0;
        max-width: min(42vw, 132px);
        overflow: hidden;
        text-overflow: ellipsis;
      }

      html[data-page="dashboard"] #shell-status,
      html[data-page="dashboard"] #shell-status-mini {
        overflow: hidden;
        text-overflow: ellipsis;
      }
}


/* ============================================================
   branch_storage.html
   ============================================================ */

@media (max-width: 1100px) {html[data-page="branch-storage"] { --menu-w: 64px; }html[data-page="branch-storage"] .brand-name, html[data-page="branch-storage"] .brand-sub, html[data-page="branch-storage"] .op-badge, html[data-page="branch-storage"] .nav-section-label, html[data-page="branch-storage"] .nav-link span, html[data-page="branch-storage"] .nav-badge { display: none; }html[data-page="branch-storage"] .nav-link { justify-content: center; padding: 12px; }html[data-page="branch-storage"] .nav-link i { font-size: 18px; }html[data-page="branch-storage"] .brand { padding: 14px 10px; }html[data-page="branch-storage"] .brand-icon { margin: 0 auto; }
}

@media (max-width: 900px) {html[data-page="branch-storage"] .body-grid {
        grid-template-columns: 1fr;
      }html[data-page="branch-storage"] .col-nav {
        display: none;
      }html[data-page="branch-storage"] .topbar {
        padding: 12px 16px;
      }html[data-page="branch-storage"] .topbar-title { font-size: 15px; }html[data-page="branch-storage"] .search-input { width: 160px; }html[data-page="branch-storage"] .content-scroll { padding: 16px; gap: 14px; }html[data-page="branch-storage"] .page-header { padding: 13px 16px; }html[data-page="branch-storage"] .grid-2 { grid-template-columns: 1fr 1fr; }html[data-page="branch-storage"] .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {html[data-page="branch-storage"], html[data-page="branch-storage"] body { overflow: hidden; }html[data-page="branch-storage"] /* Shell: single column */
      .pos-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }html[data-page="branch-storage"] .col-nav { display: none !important; }html[data-page="branch-storage"] /* Main fills screen */
      .main {
        grid-column: 1;
        height: 100vh;
      }html[data-page="branch-storage"] /* Topbar compact */
      .topbar {
        padding: 10px 14px;
        gap: 10px;
      }html[data-page="branch-storage"] .topbar-title { font-size: 14px; }html[data-page="branch-storage"] .topbar-sub { display: none; }html[data-page="branch-storage"] .search-wrap { display: none; }html[data-page="branch-storage"] .topbar-right { gap: 6px; }html[data-page="branch-storage"] .btn-ghost { padding: 7px 10px; font-size: 12px; }html[data-page="branch-storage"] .btn-ghost span { display: none; }html[data-page="branch-storage"] /* Body grid single col */
      .body-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
        overflow-x: hidden;
      }html[data-page="branch-storage"] /* Content */
      .col-content { overflow-y: auto; }html[data-page="branch-storage"] .content-scroll {
        padding: 12px;
        gap: 12px;
      }html[data-page="branch-storage"] /* Page header */
      .page-header {
        padding: 12px 14px;
        gap: 10px;
        position: sticky; top: 0;
      }html[data-page="branch-storage"] .ph-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }html[data-page="branch-storage"] .ph-title { font-size: 14px; }html[data-page="branch-storage"] .ph-sub { font-size: 11px; }html[data-page="branch-storage"] .ph-right { gap: 6px; }html[data-page="branch-storage"] /* Grids → single column on mobile */
      .grid-2, html[data-page="branch-storage"] .grid-3 { grid-template-columns: 1fr; gap: 10px; }html[data-page="branch-storage"] /* Cards */
      .card-head { padding: 12px 14px; gap: 10px; }html[data-page="branch-storage"] .card-body { padding: 0; }html[data-page="branch-storage"] .form-card-head { padding: 12px 14px; }html[data-page="branch-storage"] .form-card-body { padding: 12px; gap: 12px; }html[data-page="branch-storage"] /* TABLES → card-list layout on mobile */
      .data-table { display: block; width: 100%; }html[data-page="branch-storage"] .data-table thead { display: none; }html[data-page="branch-storage"] .data-table tbody { display: flex; flex-direction: column; gap: 8px; padding: 10px; }html[data-page="branch-storage"] .data-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        padding: 10px 12px;
      }html[data-page="branch-storage"] .data-table td {
        padding: 0;
        border: none;
        font-size: 12.5px;
        vertical-align: middle;
      }html[data-page="branch-storage"] /* First cell (icon) — shrink */
      .data-table td:first-child { flex-shrink: 0; }html[data-page="branch-storage"] /* Product name cell — grow */
      .data-table td:nth-child(2) { flex: 1; min-width: 120px; }html[data-page="branch-storage"] /* Hide less important columns */
      .data-table td:nth-child(3), html[data-page="branch-storage"] .data-table td:nth-child(5) { display: none; }html[data-page="branch-storage"] /* Last cell (actions) full width */
      .data-table td:last-child { width: 100%; margin-top: 4px; }html[data-page="branch-storage"] .row-action { justify-content: flex-start; }html[data-page="branch-storage"] /* ch-actions in card-head wrapping */
      .ch-actions {
        flex-wrap: wrap !important;
        gap: 5px !important;
        width: 100%;
        margin-top: 6px;
      }html[data-page="branch-storage"] .card-head { flex-wrap: wrap; }html[data-page="branch-storage"] /* Summary chips wrap */
      .pcs-chip { font-size: 10.5px; padding: 3px 8px; }html[data-page="branch-storage"] /* Buttons */
      .btn-accent { padding: 8px 12px; font-size: 12px; gap: 5px; }html[data-page="branch-storage"] .btn-save { padding: 11px; font-size: 13px; }html[data-page="branch-storage"] .tiny-btn { padding: 6px 10px; font-size: 11.5px; }html[data-page="branch-storage"] /* Request cards */
      .rc-head { padding: 11px 13px; }html[data-page="branch-storage"] .rc-body { padding: 11px 13px; }html[data-page="branch-storage"] .rc-foot { padding: 10px 13px; gap: 6px; flex-wrap: wrap; }html[data-page="branch-storage"] .rc-item { padding: 7px 10px; }html[data-page="branch-storage"] .rc-item-name { font-size: 12px; }html[data-page="branch-storage"] /* Mini stats compact — hidden on mobile, html[data-page="branch-storage"] shown in topbar area */
      .mini-stats { display: none; }html[data-page="branch-storage"] /* Hint box */
      .hint-box { padding: 10px 12px; }html[data-page="branch-storage"] .hint-box span { font-size: 11.5px; }html[data-page="branch-storage"] /* Form actions */
      .form-actions { flex-direction: column; gap: 8px; }html[data-page="branch-storage"] .btn-cancel { justify-content: center; }html[data-page="branch-storage"] /* Section divider */
      .sec-div { gap: 8px; }html[data-page="branch-storage"] .sd-text { font-size: 11px; white-space: nowrap; }html[data-page="branch-storage"] /* Status bar */
      .status-bar { padding: 8px 14px; gap: 12px; overflow-x: auto; }html[data-page="branch-storage"] .sb-item { font-size: 11px; flex-shrink: 0; }
}

@media (max-width: 640px) {html[data-page="branch-storage"] .mobile-tab-nav {
        display: flex;
        gap: 6px;
        padding: 8px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }html[data-page="branch-storage"] .mobile-tab-nav::-webkit-scrollbar { display: none; }html[data-page="branch-storage"] .mtab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        padding: 7px 14px;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s, color .15s, border-color .15s;
        -webkit-tap-highlight-color: transparent;
      }html[data-page="branch-storage"] .mtab i { font-size: 13px; }html[data-page="branch-storage"] .mtab.active {
        background: var(--glow);
        color: var(--accent);
        border-color: rgba(108,99,255,.4);
      }html[data-page="branch-storage"] .mtab:active { opacity: .75; }
}


/* ============================================================
   audit_logs.html
   ============================================================ */

@media (max-width: 1180px) {html[data-page="audit-logs"] .audit-grid {
        grid-template-columns: 1fr;
      }html[data-page="audit-logs"] .audit-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
}

@media (max-width: 960px) {html[data-page="audit-logs"] { --menu-w: 64px; }html[data-page="audit-logs"] .brand-name, html[data-page="audit-logs"] .brand-sub, html[data-page="audit-logs"] .op-badge, html[data-page="audit-logs"] .nav-section-label, html[data-page="audit-logs"] .nav-link span, html[data-page="audit-logs"] .nav-badge {
        display: none;
      }html[data-page="audit-logs"] .nav-link { justify-content: center; padding: 12px; }html[data-page="audit-logs"] .nav-link i { font-size: 18px; }html[data-page="audit-logs"] .brand { padding: 14px 10px; }html[data-page="audit-logs"] .brand-icon { margin: 0 auto; }html[data-page="audit-logs"] .audit-topbar {
        padding: 14px 18px;
      }html[data-page="audit-logs"] .audit-content {
        padding: 18px;
      }html[data-page="audit-logs"] .audit-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }html[data-page="audit-logs"] .audit-filters, html[data-page="audit-logs"] .audit-extra-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
}

@media (max-width: 640px) {html[data-page="audit-logs"] body {
        overflow: auto;
      }html[data-page="audit-logs"] .audit-shell {
        display: block;
        height: auto;
        min-height: 100vh;
      }html[data-page="audit-logs"] .sidebar {
        display: none !important;
      }html[data-page="audit-logs"] .audit-main {
        min-height: 100vh;
        overflow: visible;
      }html[data-page="audit-logs"] .audit-topbar {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 12px;
      }html[data-page="audit-logs"] .audit-title {
        font-size: 16px;
      }html[data-page="audit-logs"] .audit-subtitle, html[data-page="audit-logs"] .audit-kicker {
        display: none;
      }html[data-page="audit-logs"] .audit-top-actions .audit-btn span {
        display: none;
      }html[data-page="audit-logs"] .audit-content {
        padding: 12px 12px 90px;
        overflow: visible;
      }html[data-page="audit-logs"] .audit-stats, html[data-page="audit-logs"] .audit-filters, html[data-page="audit-logs"] .audit-extra-filters, html[data-page="audit-logs"] .audit-right, html[data-page="audit-logs"] .audit-detail-grid {
        grid-template-columns: 1fr;
      }html[data-page="audit-logs"] .audit-table {
        min-width: 850px;
      }
}


/* ============================================================
   add_product.html
   ============================================================ */

@media (max-width: 640px) {
  /* отступ снизу чтобы контент не скрывался под таббаром */
  /* секции — скрываем неактивные */
}

@media (max-width: 640px) {html[data-page="add-product"] .catalog-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
  }html[data-page="add-product"] .catalog-tab {
    min-height: 40px;
    justify-content: center;
    padding: 0 8px;
    gap: 5px;
    font-size: 11px;
  }html[data-page="add-product"] .catalog-tab-panel { gap: 12px; }
}

@media (max-width: 1200px) {html[data-page="add-product"] .content { grid-template-columns: 1fr 300px; }
}

@media (max-width: 1100px) {html[data-page="add-product"] { --menu-w: 64px; }html[data-page="add-product"] .brand-name, html[data-page="add-product"] .brand-sub, html[data-page="add-product"] .op-badge, html[data-page="add-product"] .nav-section-label, html[data-page="add-product"] .nav-link span, html[data-page="add-product"] .nav-badge { display: none; }html[data-page="add-product"] .nav-link { justify-content: center; padding: 12px; }html[data-page="add-product"] .nav-link i { font-size: 18px; }html[data-page="add-product"] .brand { padding: 14px 10px; }html[data-page="add-product"] .brand-icon { margin: 0 auto; }
}

@media (max-width: 960px) {html[data-page="add-product"], html[data-page="add-product"] body { overflow: auto; }html[data-page="add-product"] .pos-shell {
    grid-template-columns: 64px 1fr;
    height: auto;
    min-height: 100vh;
  }html[data-page="add-product"] .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
  }html[data-page="add-product"] .main { overflow: visible; }html[data-page="add-product"] .topbar { padding: 12px 16px; }html[data-page="add-product"] .topbar-title { font-size: 14px; }html[data-page="add-product"] .content {
    grid-template-columns: 1fr;
    overflow-y: visible;
    padding: 16px;
    gap: 16px;
  }html[data-page="add-product"] .right-col {
    position: static;
    height: auto;
    overflow: visible;
  }html[data-page="add-product"] .recent-card {
    min-height: 0;
    flex: none;
  }html[data-page="add-product"] .recent-list {
    overflow: visible;
    flex: none;
    max-height: none;
  }html[data-page="add-product"] .status-bar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
}

@media (max-width: 640px) {html[data-page="add-product"], html[data-page="add-product"] body { overflow: auto; }html[data-page="add-product"] .pos-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }html[data-page="add-product"] /* скрываем сайдбар — используем только нижнюю навигацию или топбар */
  .sidebar { display: none !important; }html[data-page="add-product"] .main {
    grid-column: 1;
    height: auto;
    overflow: visible;
  }html[data-page="add-product"] /* ── топбар ── */
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 50;
  }html[data-page="add-product"] .topbar-title {
    font-size: 13px;
    letter-spacing: -.2px;
    /* обрезаем длинный заголовок */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }html[data-page="add-product"] .topbar-sub { display: none; }html[data-page="add-product"] .topbar-right { gap: 6px; }html[data-page="add-product"] .btn-ghost { padding: 7px 10px; font-size: 12px; }html[data-page="add-product"] .btn-ghost span { display: none; }html[data-page="add-product"] /* ── контент ── */
  .content {
    grid-template-columns: 1fr;
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom));
    gap: 12px;
    overflow-y: visible;
  }html[data-page="add-product"] /* левая и правая колонки — линейно */
  .left-col { gap: 12px; }html[data-page="add-product"] .right-col {
    position: static;
    height: auto;
    overflow: visible;
    gap: 12px;
  }html[data-page="add-product"] /* ── карточки ── */
  .card-header { padding: 13px 16px; gap: 10px; }html[data-page="add-product"] .card-header-icon { width: 30px; height: 30px; font-size: 14px; }html[data-page="add-product"] .card-header-title { font-size: 13px; }html[data-page="add-product"] .card-header-sub { font-size: 11px; }html[data-page="add-product"] .card-body { padding: 14px; }html[data-page="add-product"] /* ── поля ── */
  .field { margin-bottom: 14px; }html[data-page="add-product"] .field-label { font-size: 10px; margin-bottom: 6px; flex-wrap: wrap; }html[data-page="add-product"] .field-label .tip {
    flex: 0 0 100%;
    margin-left: 0;
    line-height: 1.35;
  }html[data-page="add-product"] .f-input, html[data-page="add-product"] .f-select, html[data-page="add-product"] .f-textarea { font-size: 13px; }html[data-page="add-product"] .f-input { padding: 10px 12px 10px 38px; }html[data-page="add-product"] .f-input.no-icon { padding-left: 12px; }html[data-page="add-product"] .f-select { padding: 10px 30px 10px 38px; }html[data-page="add-product"] .f-textarea { padding: 10px 12px; height: 80px; }html[data-page="add-product"] .input-wrap > .fi { font-size: 14px; left: 12px; }html[data-page="add-product"] /* price-row и barcode-wrap на маленьких — одна колонка */
  .price-row { grid-template-columns: 1fr; gap: 0; }html[data-page="add-product"] .barcode-wrap { gap: 6px; }html[data-page="add-product"] /* ── кнопки ── */
  .btn-primary, html[data-page="add-product"] .btn-ghost {
    padding: 11px 14px;
    font-size: 13px;
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }html[data-page="add-product"] /* кнопки сохранения/отмены — стек */
  .form-actions-row {
    flex-direction: column;
  }html[data-page="add-product"] /* ── разделитель ── */
  .sec-div { gap: 8px; }html[data-page="add-product"] .sd-text { font-size: 10px; white-space: nowrap; }html[data-page="add-product"] /* ── cat-chips ── */
  .cat-chips { gap: 5px; margin-top: 10px; }html[data-page="add-product"] .cat-chip { padding: 4px 10px; font-size: 11px; }html[data-page="add-product"] /* ── превью ── */
  .preview-card { order: -1; }html[data-page="add-product"] /* превью наверху правой колонки */
  .preview-header { padding: 12px 14px; font-size: 12px; }html[data-page="add-product"] .preview-body { padding: 14px; }html[data-page="add-product"] .preview-emoji { font-size: 26px; margin-bottom: 8px; }html[data-page="add-product"] .preview-name { font-size: 13px; }html[data-page="add-product"] .preview-price { font-size: 17px; }html[data-page="add-product"] #prevBarcode, html[data-page="add-product"] #prevCat2, html[data-page="add-product"] #prevPrice2 {
    max-width: 56%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }html[data-page="add-product"] /* ── последние товары ── */
  .recent-card { flex: none; min-height: 0; }html[data-page="add-product"] .recent-header { padding: 12px 14px; font-size: 12px; }html[data-page="add-product"] .recent-list { overflow: visible; flex: none; max-height: none; }html[data-page="add-product"] .recent-item {
    padding: 9px 14px;
    gap: 9px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }html[data-page="add-product"] .recent-icon { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }html[data-page="add-product"] .recent-name { font-size: 12px; }html[data-page="add-product"] .recent-meta, html[data-page="add-product"] .recent-note {
    font-size: 10px;
    overflow-wrap: anywhere;
  }html[data-page="add-product"] .recent-price { font-size: 12px; }html[data-page="add-product"] .recent-new-badge, html[data-page="add-product"] .recent-badge {
    display: none;
  }html[data-page="add-product"] /* ── статус-строка ── */
  .status-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }html[data-page="add-product"] .stat-item { font-size: 11px; }html[data-page="add-product"] /* ── таймер скидки ── */
  .discount-timer-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }html[data-page="add-product"] .discount-timer-wrap > div:last-child { width: 100%; text-align: left !important; }html[data-page="add-product"] #adminDiscountTimer { font-size: 15px !important; }html[data-page="add-product"] /* ── select2 ── */
  .select2-container .select2-selection--single { height: 40px !important; }html[data-page="add-product"] .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px !important; }
}

@media (max-width: 420px) {html[data-page="add-product"] .topbar { padding: 10px 12px; }html[data-page="add-product"] .topbar-title { max-width: none; }html[data-page="add-product"] .catalog-tab {
    min-height: 38px;
    padding: 0 6px;
  }html[data-page="add-product"] .catalog-tab i { font-size: 16px; }html[data-page="add-product"] .catalog-tab span { font-size: 10px; }html[data-page="add-product"] .card-header { align-items: flex-start; }html[data-page="add-product"] .sd-line { display: none; }html[data-page="add-product"] .sd-text {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }html[data-page="add-product"] .recent-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }html[data-page="add-product"] .recent-num { display: none; }html[data-page="add-product"] .recent-price { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
}


/* ============================================================
   404.html
   ============================================================ */

@media (max-width: 980px) {html[data-page="error-404"] .hero {
        grid-template-columns: 1fr;
      }html[data-page="error-404"] .main-card, html[data-page="error-404"] .side-card {
        min-height: auto;
      }html[data-page="error-404"] .hint-grid {
        grid-template-columns: 1fr;
      }html[data-page="error-404"] .topbar {
        flex-direction: column;
        align-items: flex-start;
      }html[data-page="error-404"] .topbar-note {
        text-align: left;
      }
}

@media (max-width: 640px) {html[data-page="error-404"] .wrapper {
        padding: 14px;
      }html[data-page="error-404"] .main-card, html[data-page="error-404"] .side-card {
        padding: 22px;
      }html[data-page="error-404"] .actions {
        flex-direction: column;
      }html[data-page="error-404"] .btn-main, html[data-page="error-404"] .btn-secondary {
        width: 100%;
        justify-content: center;
      }
}


/* ============================================================
   403.html
   ============================================================ */

@media (max-width: 980px) {html[data-page="error-403"] .hero {
        grid-template-columns: 1fr;
      }html[data-page="error-403"] .main-card, html[data-page="error-403"] .side-card {
        min-height: auto;
      }html[data-page="error-403"] .hint-grid {
        grid-template-columns: 1fr;
      }html[data-page="error-403"] .topbar {
        flex-direction: column;
        align-items: flex-start;
      }html[data-page="error-403"] .topbar-note {
        text-align: left;
      }
}

@media (max-width: 640px) {html[data-page="error-403"] .wrapper {
        padding: 14px;
      }html[data-page="error-403"] .main-card, html[data-page="error-403"] .side-card {
        padding: 22px;
      }html[data-page="error-403"] .actions {
        flex-direction: column;
      }html[data-page="error-403"] .btn-main, html[data-page="error-403"] .btn-secondary {
        width: 100%;
        justify-content: center;
      }
}


/* ============================================================
   suppliers.html
   ============================================================ */

@media (max-width: 640px) {html[data-page="suppliers"] .sem-grid { grid-template-columns: 1fr; }html[data-page="suppliers"] .sem-foot { flex-direction: column-reverse; }html[data-page="suppliers"] .sem-btn { width: 100%; }
}

@media (max-width: 1100px) {html[data-page="suppliers"] { --menu-w: 64px; }html[data-page="suppliers"] .brand-name, html[data-page="suppliers"] .brand-sub, html[data-page="suppliers"] .op-badge, html[data-page="suppliers"] .nav-section-label, html[data-page="suppliers"] .nav-link span, html[data-page="suppliers"] .nav-badge { display: none; }html[data-page="suppliers"] .nav-link { justify-content: center; padding: 12px; }html[data-page="suppliers"] .nav-link i { font-size: 18px; }html[data-page="suppliers"] .brand { padding: 14px 10px; }html[data-page="suppliers"] .brand-icon { margin: 0 auto; }
}

@media (max-width: 900px) {html[data-page="suppliers"] .body-grid { grid-template-columns: 1fr; }html[data-page="suppliers"] .col-list { display: none; }
}

@media (max-width: 768px) {html[data-page="suppliers"] .pos-shell {
        grid-template-columns: 1fr;
        height: 100dvh;
      }html[data-page="suppliers"] .main {
        grid-column: 1;
        height: 100dvh;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
      }
}

@media (max-width: 960px) {html[data-page="suppliers"] .product-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }html[data-page="suppliers"] .product-row .pr-field:first-child { grid-column: span 2; }html[data-page="suppliers"] .btn-row-del { grid-column: span 2; width: 100%; height: 34px; }
}

@media (max-width: 900px) {html[data-page="suppliers"], html[data-page="suppliers"] body {
    overflow: hidden;
  }html[data-page="suppliers"] .pos-shell {
    grid-template-columns: 1fr;
    height: 100dvh;
  }html[data-page="suppliers"] .main {
    grid-column: 1;
    height: 100dvh;
    min-height: 0;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }html[data-page="suppliers"] .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }html[data-page="suppliers"] .topbar > div:first-child {
    min-width: 0;
  }html[data-page="suppliers"] .topbar-title {
    font-size: 15px;
  }html[data-page="suppliers"] .topbar-sub {
    font-size: 11px;
    line-height: 1.35;
  }html[data-page="suppliers"] .topbar-right {
    width: 100%;
    margin-left: 0;
  }html[data-page="suppliers"] .excel-import-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }html[data-page="suppliers"] .btn-excel {
    width: 100%;
    min-height: 38px;
    padding-inline: 10px;
  }html[data-page="suppliers"] .spm-body {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .body-grid {
    grid-template-columns: 1fr;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }html[data-page="suppliers"] .col-list {
    display: flex;
    max-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }html[data-page="suppliers"] .col-list-header {
    padding: 11px 14px;
  }html[data-page="suppliers"] .supplier-list {
    max-height: 176px;
  }html[data-page="suppliers"] .supplier-item {
    padding: 12px 14px;
  }html[data-page="suppliers"] .col-detail {
    min-height: 0;
    overflow: visible;
  }html[data-page="suppliers"] .detail-tabs {
    top: 0;
    gap: 4px;
    overflow-x: auto;
    padding: 0 12px;
    scrollbar-width: none;
  }html[data-page="suppliers"] .detail-tabs::-webkit-scrollbar {
    display: none;
  }html[data-page="suppliers"] .dtab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 10px;
    white-space: nowrap;
  }html[data-page="suppliers"] .detail-scroll, html[data-page="suppliers"] .new-supplier-panel {
    gap: 14px;
    padding: 14px;
  }html[data-page="suppliers"] .hero-card, html[data-page="suppliers"] .form-card {
    border-radius: 12px;
  }html[data-page="suppliers"] .hero-card {
    padding: 16px;
  }html[data-page="suppliers"] .hero-top {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }html[data-page="suppliers"] .hero-info {
    min-width: 0;
  }html[data-page="suppliers"] .hero-name, html[data-page="suppliers"] .ct-val, html[data-page="suppliers"] .si-name, html[data-page="suppliers"] .pc-name {
    overflow-wrap: anywhere;
  }html[data-page="suppliers"] .hero-name {
    font-size: 19px;
  }html[data-page="suppliers"] .hero-actions {
    margin-left: auto;
  }html[data-page="suppliers"] .hero-contacts {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .contact-tile.full {
    grid-column: auto;
  }html[data-page="suppliers"] .stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }html[data-page="suppliers"] .pc-head {
    align-items: flex-start;
    padding: 13px 14px;
  }html[data-page="suppliers"] .pc-status {
    margin-left: 0;
  }html[data-page="suppliers"] .pc-foot {
    grid-template-columns: 1fr 1fr;
    padding: 12px 14px;
  }html[data-page="suppliers"] .field-grid-2, html[data-page="suppliers"] .sem-grid {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .form-card-head, html[data-page="suppliers"] .form-card-body, html[data-page="suppliers"] .sem-body {
    padding: 16px;
  }html[data-page="suppliers"] .purchases-list-header {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }html[data-page="suppliers"] .status-bar {
    gap: 10px;
    overflow-x: auto;
    padding: 9px 14px;
    scrollbar-width: none;
  }html[data-page="suppliers"] .status-bar::-webkit-scrollbar {
    display: none;
  }html[data-page="suppliers"] .sb-item {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {html[data-page="suppliers"] .topbar {
    padding-inline: 12px;
  }html[data-page="suppliers"] .excel-import-actions {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .col-list {
    max-height: 200px;
  }html[data-page="suppliers"] .supplier-list {
    max-height: 146px;
  }html[data-page="suppliers"] .si-top {
    align-items: flex-start;
  }html[data-page="suppliers"] .si-orders {
    margin-left: 0;
  }html[data-page="suppliers"] .si-meta {
    padding-left: 44px;
    overflow-wrap: anywhere;
  }html[data-page="suppliers"] .detail-scroll, html[data-page="suppliers"] .new-supplier-panel {
    padding: 12px;
  }html[data-page="suppliers"] .dtab {
    font-size: 12px;
    padding-inline: 9px;
  }html[data-page="suppliers"] .hero-ava {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 18px;
  }html[data-page="suppliers"] .hero-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }html[data-page="suppliers"] .contact-tile, html[data-page="suppliers"] .stat-tile, html[data-page="suppliers"] .purchase-sum {
    padding-inline: 12px;
  }html[data-page="suppliers"] .pc-head {
    flex-wrap: wrap;
  }html[data-page="suppliers"] .pc-foot {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .product-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }html[data-page="suppliers"] .product-row .pr-field:first-child, html[data-page="suppliers"] .btn-row-del {
    grid-column: auto;
  }html[data-page="suppliers"] .btn-row-del {
    width: 100%;
    height: 36px;
  }html[data-page="suppliers"] .form-actions, html[data-page="suppliers"] .sem-foot {
    flex-direction: column;
  }html[data-page="suppliers"] .btn-save, html[data-page="suppliers"] .btn-reset, html[data-page="suppliers"] .btn-teal, html[data-page="suppliers"] .btn-add-product, html[data-page="suppliers"] .sem-btn {
    width: 100%;
    justify-content: center;
  }html[data-page="suppliers"] .supplier-edit-backdrop {
    align-items: stretch;
    padding: 10px;
  }html[data-page="suppliers"] .supplier-edit-modal {
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 900px) {html[data-page="suppliers"] .main {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }html[data-page="suppliers"] .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }html[data-page="suppliers"] .topbar-right {
    width: auto;
    min-width: 0;
  }html[data-page="suppliers"] .excel-import-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
  }html[data-page="suppliers"] .btn-excel {
    width: auto;
    min-width: 42px;
    min-height: 36px;
    padding: 8px 10px;
    white-space: nowrap;
  }html[data-page="suppliers"] .body-grid {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }html[data-page="suppliers"] .col-list {
    max-height: none;
    min-height: 78px;
  }html[data-page="suppliers"] .col-list-header {
    display: none;
  }html[data-page="suppliers"] .supplier-list {
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 9px 12px;
    scrollbar-width: none;
  }html[data-page="suppliers"] .supplier-list::-webkit-scrollbar {
    display: none;
  }html[data-page="suppliers"] .supplier-item {
    flex: 0 0 178px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px;
    background: var(--panel);
  }html[data-page="suppliers"] .supplier-item:last-child {
    border-bottom: 1px solid var(--border);
  }html[data-page="suppliers"] .supplier-item.active {
    border-color: var(--accent);
  }html[data-page="suppliers"] .supplier-item.active::before {
    top: auto;
    right: 10px;
    bottom: 0;
    left: 10px;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }html[data-page="suppliers"] .si-top {
    gap: 8px;
    margin-bottom: 4px;
  }html[data-page="suppliers"] .si-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }html[data-page="suppliers"] .si-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }html[data-page="suppliers"] .si-orders {
    display: none;
  }html[data-page="suppliers"] .si-meta {
    padding-left: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }html[data-page="suppliers"] .col-detail {
    min-height: 0;
    overflow-y: auto;
  }html[data-page="suppliers"] .detail-tabs {
    min-height: 42px;
  }html[data-page="suppliers"] .dtab {
    min-height: 42px;
    padding: 10px 9px;
  }html[data-page="suppliers"] .detail-scroll, html[data-page="suppliers"] .new-supplier-panel {
    gap: 12px;
    padding: 12px;
  }html[data-page="suppliers"] .hero-card {
    padding: 14px;
  }html[data-page="suppliers"] .hero-top {
    align-items: center;
    margin-bottom: 12px;
  }html[data-page="suppliers"] .hero-ava {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 18px;
  }html[data-page="suppliers"] .hero-name {
    font-size: 18px;
    line-height: 1.1;
    margin-bottom: 4px;
  }html[data-page="suppliers"] .hero-status {
    padding: 2px 8px;
  }html[data-page="suppliers"] .hero-actions {
    gap: 6px;
  }html[data-page="suppliers"] .icon-btn {
    width: 32px;
    height: 32px;
  }html[data-page="suppliers"] .hero-contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }html[data-page="suppliers"] .contact-tile {
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
  }html[data-page="suppliers"] .ct-label {
    font-size: 9px;
  }html[data-page="suppliers"] .ct-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }html[data-page="suppliers"] .contact-tile.full {
    grid-column: 1 / -1;
  }html[data-page="suppliers"] .stats-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }html[data-page="suppliers"] .stats-grid::-webkit-scrollbar {
    display: none;
  }html[data-page="suppliers"] .stat-tile {
    flex: 0 0 138px;
    padding: 12px;
  }html[data-page="suppliers"] .purchase-card {
    border-radius: 12px;
  }html[data-page="suppliers"] .pc-head {
    gap: 9px;
    padding: 11px 12px;
  }html[data-page="suppliers"] .pc-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }html[data-page="suppliers"] .pc-foot {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    scrollbar-width: none;
  }html[data-page="suppliers"] .pc-foot::-webkit-scrollbar {
    display: none;
  }html[data-page="suppliers"] .pc-foot > div {
    flex: 0 0 116px;
  }html[data-page="suppliers"] .form-card-head {
    gap: 9px;
    padding: 13px 14px;
  }html[data-page="suppliers"] .form-card-body, html[data-page="suppliers"] .sem-body {
    gap: 12px;
    padding: 14px;
  }html[data-page="suppliers"] .stock-hint, html[data-page="suppliers"] .purchase-sum {
    padding: 12px;
  }
}

@media (max-width: 560px) {html[data-page="suppliers"] .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 10px;
  }html[data-page="suppliers"] .topbar-sub {
    display: none;
  }html[data-page="suppliers"] .topbar-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }html[data-page="suppliers"] .btn-excel {
    padding-inline: 9px;
  }html[data-page="suppliers"] .btn-excel span {
    display: none;
  }html[data-page="suppliers"] .supplier-item {
    flex-basis: 156px;
  }html[data-page="suppliers"] .detail-scroll, html[data-page="suppliers"] .new-supplier-panel {
    padding: 10px;
  }html[data-page="suppliers"] .hero-actions {
    width: auto;
    margin-left: auto;
  }html[data-page="suppliers"] .hero-contacts {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .contact-tile.full {
    grid-column: auto;
  }html[data-page="suppliers"] .stat-tile {
    flex-basis: 128px;
  }html[data-page="suppliers"] .pc-foot {
    grid-template-columns: none;
  }html[data-page="suppliers"] .pc-foot > div {
    flex-basis: 108px;
  }html[data-page="suppliers"] .form-actions {
    gap: 8px;
  }
}

@media (max-width: 900px) {html[data-page="suppliers"] .purchases-list {
    gap: 10px;
  }html[data-page="suppliers"] .purchase-card {
    min-width: 0;
  }html[data-page="suppliers"] .pc-head > div:nth-child(2) {
    min-width: 0;
    flex: 1;
  }html[data-page="suppliers"] .pc-name, html[data-page="suppliers"] .pc-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }html[data-page="suppliers"] .pc-status {
    flex: 0 0 auto;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }html[data-page="suppliers"] .pc-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding: 0;
    border-top: 1px solid var(--border);
  }html[data-page="suppliers"] .pc-foot > div {
    min-width: 0;
    flex: none;
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }html[data-page="suppliers"] .pc-foot > div:nth-child(2n) {
    border-right: 0;
  }html[data-page="suppliers"] .pc-foot > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }html[data-page="suppliers"] .pcf-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }html[data-page="suppliers"] .pcf-val {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
}

@media (max-width: 360px) {html[data-page="suppliers"] .pc-foot {
    grid-template-columns: 1fr;
  }html[data-page="suppliers"] .pc-foot > div, html[data-page="suppliers"] .pc-foot > div:nth-child(2n), html[data-page="suppliers"] .pc-foot > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }html[data-page="suppliers"] .pc-foot > div:last-child {
    border-bottom: 0;
  }
}


/* ============================================================
   returns.html mobile overflow fix
   Keeps return form controls inside the card on narrow screens.
   ============================================================ */
@media (max-width: 640px) {
  html[data-page="returns"] .card,
  html[data-page="returns"] .card-body,
  html[data-page="returns"] .form-grid,
  html[data-page="returns"] .field,
  html[data-page="returns"] .field-row,
  html[data-page="returns"] .hint-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html[data-page="returns"] .card {
    overflow: hidden;
  }

  html[data-page="returns"] .card-body {
    padding: 14px;
  }

  html[data-page="returns"] .field input,
  html[data-page="returns"] .field select,
  html[data-page="returns"] .field textarea,
  html[data-page="returns"] .select2-container,
  html[data-page="returns"] .select2-container .select2-selection--single {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-page="returns"] .select2-container .select2-selection--single .select2-selection__rendered {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-page="returns"] .btn-save {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   POS mobile safety override
   ------------------------------------------------------------
   common.css is loaded after index_style.css on POS, so these
   scoped rules are repeated here to keep the cashier page stable
   on phones.
   ============================================================ */

@media (max-width: 1100px) {
  html[data-page="pos"] {
    --menu-w: 64px;
  }

  html[data-page="pos"] .brand-name,
  html[data-page="pos"] .brand-sub,
  html[data-page="pos"] .op-badge,
  html[data-page="pos"] .nav-section-label,
  html[data-page="pos"] .nav-link span,
  html[data-page="pos"] .nav-badge {
    display: none;
  }

  html[data-page="pos"] .nav-link {
    justify-content: center;
    padding: 12px;
  }

  html[data-page="pos"] .nav-link i {
    font-size: 18px;
  }

  html[data-page="pos"] .brand {
    padding: 14px 10px;
  }

  html[data-page="pos"] .brand-icon {
    margin: 0 auto;
  }
}

@media (max-width: 800px) {
  html[data-page="pos"] .cart-body {
    grid-template-columns: 1fr;
  }

  html[data-page="pos"] .cart-summary {
    border-top: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  html[data-page="pos"] {
    --menu-w: 0px;
  }

  html[data-page="pos"],
  html[data-page="pos"] body {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  html[data-page="pos"] .sidebar {
    display: none !important;
  }

  html[data-page="pos"] .pos-shell {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 100dvh;
    height: 100dvh;
    overflow: hidden;
  }

  html[data-page="pos"] .right-panel {
    grid-column: 1 !important;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 56px;
    background: var(--bg);
  }

  html[data-page="pos"] .top-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  html[data-page="pos"] .topbar {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  html[data-page="pos"] .topbar-title {
    display: none;
  }

  html[data-page="pos"] .search-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  html[data-page="pos"] .search-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 14px;
    padding: 10px 14px 10px 36px;
  }

  html[data-page="pos"] .btn-add-product span,
  html[data-page="pos"] .btn-shift-check span {
    display: none;
  }

  html[data-page="pos"] .btn-add-product {
    padding: 10px 12px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  html[data-page="pos"] .btn-shift-check {
    padding: 9px 11px;
    flex-shrink: 0;
  }

  html[data-page="pos"] .category-bar {
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html[data-page="pos"] .category-bar::-webkit-scrollbar {
    display: none;
  }

  html[data-page="pos"] .cat-btn {
    padding: 5px 12px;
    font-size: 11.5px;
    border-radius: 20px;
    flex-shrink: 0;
  }

  html[data-page="pos"] .product-grid-wrap {
    padding: 10px 12px;
  }

  html[data-page="pos"] .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  html[data-page="pos"] .product-card {
    padding: 12px 10px;
    border-radius: 12px;
  }

  html[data-page="pos"] .prod-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    margin-bottom: 8px;
  }

  html[data-page="pos"] .prod-name {
    font-size: 12px;
  }

  html[data-page="pos"] .prod-price {
    font-size: 13px;
  }

  html[data-page="pos"] .prod-add-btn {
    opacity: 1;
    width: 28px;
    height: 28px;
    font-size: 16px;
    top: 8px;
    right: 8px;
  }

  html[data-page="pos"] .bottom-section {
    max-height: none;
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    height: clamp(220px, 44dvh, 360px);
    display: flex;
    flex-direction: column;
  }

  html[data-page="pos"] .cart-header {
    padding: 10px 14px;
  }

  html[data-page="pos"] .cart-title {
    font-size: 12px;
  }

  html[data-page="pos"] .cart-body {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  html[data-page="pos"] .cart-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
  }

  html[data-page="pos"] .cart-row {
    padding: 9px 0;
    gap: 10px;
  }

  html[data-page="pos"] .cart-item-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  html[data-page="pos"] .cart-item-name {
    font-size: 12.5px;
  }

  html[data-page="pos"] .cart-item-price {
    font-size: 11px;
  }

  html[data-page="pos"] .qty-btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
    border-radius: 8px;
  }

  html[data-page="pos"] .qty-val {
    font-size: 14px;
    min-width: 22px;
  }

  html[data-page="pos"] .cart-item-total {
    font-size: 13px;
    min-width: 56px;
  }

  html[data-page="pos"] .cart-item-del {
    font-size: 16px;
    padding: 4px;
  }

  html[data-page="pos"] .cart-summary {
    padding: 10px 16px 12px;
    gap: 6px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  html[data-page="pos"] .summary-row,
  html[data-page="pos"] .summary-total-row,
  html[data-page="pos"] .summary-divider {
    width: 100%;
    max-width: 360px;
  }

  html[data-page="pos"] .summary-row {
    font-size: 12px;
  }

  html[data-page="pos"] .summary-total-val {
    font-size: 18px;
  }

  html[data-page="pos"] .pay-btns {
    gap: 6px;
    margin-top: 4px;
    width: 100%;
    max-width: 360px;
  }

  html[data-page="pos"] .btn-pay-cash,
  html[data-page="pos"] .btn-pay-card,
  html[data-page="pos"] .btn-pay-mixed {
    padding: 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  html[data-page="pos"] .btn-pay-mixed {
    width: 100%;
  }

  html[data-page="pos"] .mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 200;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    gap: 4px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html[data-page="pos"] .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    transition: color .18s, background .18s;
    flex: 1;
    max-width: 72px;
    white-space: nowrap;
  }

  html[data-page="pos"] .mobile-nav-item i {
    font-size: 20px;
  }

  html[data-page="pos"] .mobile-nav-item.active {
    color: var(--accent);
  }

  html[data-page="pos"] .mobile-nav-item:hover {
    background: var(--panel);
    color: var(--text);
  }

  html[data-page="pos"] .orb {
    display: none;
  }
}

@media (max-width: 380px) {
  html[data-page="pos"] .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  html[data-page="pos"] .product-card {
    padding: 10px 8px;
  }

  html[data-page="pos"] .prod-name {
    font-size: 11px;
  }

  html[data-page="pos"] .cart-item-icon {
    display: none;
  }

  html[data-page="pos"] .bottom-section {
    height: clamp(190px, 46dvh, 340px);
  }
}