/*
 * Cache-safe mobile layout guard.
 *
 * This deliberately contains the small, structural rules required to keep
 * inline SVG icons, navigation and Counter POS usable even while an older
 * service worker/browser cache is being replaced. It is loaded after the
 * main stylesheets from a new URL on every release.
 */

.app-theme-command svg.ti-icon {
  box-sizing: border-box;
  display: inline-block !important;
  flex: 0 0 auto !important;
  height: 1.05em !important;
  max-height: 1.4em !important;
  max-width: 1.4em !important;
  stroke-width: 2;
  vertical-align: -.15em;
  width: 1.05em !important;
}

/* Side/off-canvas navigation: an SVG without a width has a browser-default
   intrinsic width, so these rules must not depend on the older base sheet. */
.app-theme-command .nav-entry {
  align-items: center;
  border-radius: .72rem;
  color: #b9bfdb;
  display: flex !important;
  font-size: .9rem;
  font-weight: 720;
  gap: .8rem;
  line-height: 1.2;
  margin: .22rem 0;
  min-height: 44px;
  padding: .72rem .8rem;
  text-decoration: none;
}
.app-theme-command .nav-entry > svg.ti-icon {
  color: #aeb6dd;
  font-size: 1.08rem;
  height: 1.08rem !important;
  width: 1.08rem !important;
}
.app-theme-command .nav-entry > span { min-width: 0; }
.app-theme-command .nav-entry.active > svg.ti-icon { color: #fff; }

@media (max-width: 991.98px) {
  .app-theme-command .nav-canvas {
    --bs-offcanvas-width: min(84vw, 280px);
    background: #101229;
    width: min(84vw, 280px);
  }
  .app-theme-command .nav-canvas .offcanvas-body,
  .app-theme-command .nav-canvas .side-nav {
    background: #101229;
    min-height: 100%;
  }
  .app-theme-command .nav-canvas .side-nav { padding: 1rem !important; }

  .app-theme-command .mobile-nav {
    align-items: center;
    background: rgba(16, 18, 41, .97);
    border-top: 1px solid rgba(217, 220, 255, .105);
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .22);
    display: flex !important;
    height: 67px;
    justify-content: space-around;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    right: 0;
    z-index: 1020;
  }
  .app-theme-command .mobile-nav a {
    align-items: center;
    color: #aab1d1;
    display: flex !important;
    flex-direction: column;
    font-size: 1.1rem;
    gap: 0;
    justify-content: center;
    min-width: 44px;
    text-decoration: none;
  }
  .app-theme-command .mobile-nav a > svg.ti-icon {
    font-size: 1.18rem;
    height: 1.18rem !important;
    margin-top: .1rem;
    width: 1.18rem !important;
  }
  .app-theme-command .mobile-nav small { font-size: .58rem; font-weight: 700; }
  .app-theme-command .mobile-nav .mobile-new {
    background: linear-gradient(135deg, #8b31e8, #d53fac);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(137, 48, 233, .34);
    color: #fff;
    height: 47px;
    justify-content: center;
    margin-top: -24px;
    width: 47px;
  }
  .app-theme-command .mobile-nav .mobile-new small { color: #fff; }
}

/* Counter POS structural rescue. It makes the selling screen a real grid even
   if an old cached app.css did not yet contain the newer POS layout classes. */
.app-theme-command .pos-terminal { color: #f6f7ff; margin: 0 auto; max-width: 1580px; }
.app-theme-command .pos-topbar {
  align-items: center;
  background: linear-gradient(110deg, #1b1e41, #20234a);
  border: 1px solid rgba(217, 220, 255, .105);
  border-radius: 1rem;
  box-shadow: 0 12px 25px rgba(0, 0, 0, .18);
  display: flex !important;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: .95rem 1.1rem;
}
.app-theme-command .pos-sale-title { align-items: center; display: flex; gap: .75rem; min-width: 0; }
.app-theme-command .pos-title-icon {
  align-items: center;
  background: linear-gradient(135deg, #9e3bea, #5d30d2);
  border-radius: .75rem;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  height: 43px;
  justify-content: center;
  width: 43px;
}
.app-theme-command .pos-title-icon > svg.ti-icon { font-size: 1.35rem; }
.app-theme-command .pos-sale-title h1 { color: #fafaff; font-weight: 830; letter-spacing: -.045em; }
.app-theme-command .pos-sale-title p { align-items: center; color: #aab2d3; display: flex; flex-wrap: wrap; font-size: .78rem; gap: .42rem; }
.app-theme-command .pos-menu-panel,
.app-theme-command .pos-cart-card,
.app-theme-command .pos-actions-card {
  background: linear-gradient(145deg, #1a1d3f, #151834);
  border: 1px solid rgba(217, 220, 255, .105);
  border-radius: 1rem;
  box-shadow: 0 13px 28px rgba(0, 0, 0, .17);
}
.app-theme-command .pos-menu-panel { padding: clamp(.85rem, 2vw, 1.25rem); }
.app-theme-command .pos-menu-toolbar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .9rem; }
.app-theme-command .pos-menu-toolbar h2 { color: #f4f5ff; font-weight: 800; }
.app-theme-command .pos-search {
  align-items: center;
  background: #10132b;
  border: 1px solid #353b65;
  border-radius: .65rem;
  color: #a9b0d0;
  display: flex;
  flex: 0 1 270px;
  gap: .35rem;
  padding: 0 .65rem;
}
.app-theme-command .pos-search input { background: transparent; border: 0; box-shadow: none !important; color: #f2f4ff; font-size: .84rem; min-width: 0; outline: 0; padding: .6rem 0; width: 100%; }
.app-theme-command .pos-category-row { display: flex; gap: .42rem; margin: 0 -.1rem 1rem; overflow-x: auto; padding: .05rem .1rem .4rem; }
.app-theme-command .pos-category { background: #24294f; border: 1px solid #363d68; border-radius: 99px; color: #c3c8e4; cursor: pointer; font-size: .75rem; font-weight: 760; padding: .46rem .75rem; white-space: nowrap; }
.app-theme-command .pos-category.active { background: linear-gradient(100deg, #7b2be5, #ca3aa8); border-color: #ba5ef5; color: #fff; }
.app-theme-command .pos-product-grid { display: grid !important; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)); }
.app-theme-command .pos-product-wrap,
.app-theme-command .pos-product-form { min-width: 0; }
.app-theme-command .pos-product-form { margin: 0; }
.app-theme-command .pos-product {
  align-items: center;
  background: linear-gradient(145deg, #20244b, #1a1d3d);
  border: 1px solid #333962;
  border-radius: .8rem;
  color: #eef0ff;
  cursor: pointer;
  display: grid !important;
  gap: .55rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 88px;
  padding: .7rem;
  position: relative;
  text-align: left;
  width: 100%;
}
.app-theme-command .pos-product-initial { align-items: center; background: rgba(178, 80, 239, .18); border-radius: .6rem; color: #e5a9ff; display: flex; flex: 0 0 auto; font-size: .8rem; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
.app-theme-command .pos-product-content { display: grid; gap: .18rem; min-width: 0; }
.app-theme-command .pos-product-content strong { color: #f4f5ff; font-size: .8rem; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-theme-command .pos-product-content small { color: #9ba4c7; font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-theme-command .pos-product-price { color: #f3bdff; font-size: .73rem; font-weight: 850; text-align: right; white-space: nowrap; }
.app-theme-command .pos-add-mark { align-items: center; background: #9b3de8; border-radius: 50%; color: #fff; display: flex; height: 19px; justify-content: center; position: absolute; right: .45rem; top: .45rem; width: 19px; }
.app-theme-command .pos-add-mark > svg.ti-icon { font-size: .72rem; }
.app-theme-command .pos-product-customize { color: #db9bff; display: block; font-size: .63rem; font-weight: 700; margin: .28rem .2rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1199.98px) { .app-theme-command .pos-cart-panel { position: static; } }
@media (max-width: 767.98px) {
  .app-theme-command .pos-topbar,
  .app-theme-command .pos-menu-toolbar { align-items: flex-start; flex-direction: column; }
  .app-theme-command .pos-topbar > .d-flex,
  .app-theme-command .pos-menu-toolbar .pos-search { width: 100%; }
  .app-theme-command .pos-topbar > .d-flex .btn { flex: 1; justify-content: center; }
  .app-theme-command .pos-product-grid { gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-theme-command .pos-product { display: flex !important; flex-direction: column; gap: .35rem; justify-content: center; min-height: 124px; padding: .65rem .45rem; text-align: center; }
  .app-theme-command .pos-product-content { text-align: center; width: 100%; }
  .app-theme-command .pos-product-content strong,
  .app-theme-command .pos-product-content small { white-space: normal; }
  .app-theme-command .pos-product-price { text-align: center; }
}