/* Paniware product styles on top of the foundation theme (paniware-docs 08).
   Colours come from theme_tokens.css; write logical properties so Urdu (RTL) mirrors. */

/* ---- Brand (08 section 3, D-33) ---------------------------------------- */

[data-theme="dark"] .app-dashboard {
  --app-btn-primary-hover: var(--app-primary-dark);
}

.app-brand-mark {
  display: inline-flex;
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

.app-brand-mark svg {
  inline-size: 100%;
  block-size: 100%;
}

.app-sidebar__brand-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The collapsed rail shows the droplet alone. */
html[data-sidebar-collapsed] .app-dashboard .app-sidebar__brand .app-brand-mark {
  font-size: 1.5rem;
}

html[data-sidebar-collapsed] .app-dashboard .app-sidebar__brand-text {
  display: none;
}

/* ---- Top bar (fixes round F-1) ------------------------------------------ */

.app-dashboard .app-topbar {
  gap: 0.75rem;
}

.app-dashboard .app-topbar__menu-toggle {
  margin-inline-end: 0;
  flex: none;
}

.app-dashboard .app-topbar__title {
  flex: 1;
  min-inline-size: 0;
  gap: 0.75rem;
  align-items: baseline;
  border-inline-start: none;
  padding-inline-start: 0;
}

.app-dashboard .app-topbar__shop {
  min-inline-size: 0;
}

.app-dashboard .app-topbar__date {
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
}

.app-dashboard .app-topbar__actions {
  gap: 0.5rem;
}

.app-dashboard .app-lang-switch {
  margin: 0;
}

.app-dashboard .app-lang-button {
  min-inline-size: 4.5rem;
  font-weight: 600;
}

/* Inside Inter, Urdu letters fall back to a Nastaliq face that looks tiny on a small
   button; a Naskh face reads clearly at button size. */
.app-dashboard .app-lang-button[lang="ur"] {
  font-family: Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", sans-serif;
  font-size: 1rem;
}

.app-dashboard .app-user-menu-head {
  max-inline-size: 18rem;
  overflow-wrap: anywhere;
  color: var(--app-text-secondary);
}

.app-dashboard .app-user-trigger {
  gap: 0.5rem;
}

.app-dashboard .app-user-trigger .app-user-meta-name {
  max-inline-size: 12rem;
}

/* As the mockup (UI refresh G-1): the shop name is a link to the role's home, the search
   box sits before 40 px bordered buttons, and the user menu is the avatar alone. */
.app-dashboard a.app-topbar__title { color: var(--app-text-primary); text-decoration: none; }
.app-dashboard a.app-topbar__title:hover .app-topbar__shop { color: var(--app-primary); }
.app-dashboard .app-topbar__shop { font-weight: 700; }
.app-dashboard .app-topbar__icon,
.app-dashboard .app-topbar .app-theme-toggle { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1px solid var(--app-input-border); border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 20px; }
.app-dashboard .app-topbar .app-lang-button { block-size: 40px; min-inline-size: 0; padding: 6px 12px; border: 1px solid var(--app-input-border); border-radius: 10px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 13px; }
.app-dashboard .app-topbar .app-lang-button[lang="ur"] { font-size: 15px; }
.app-dashboard .app-topbar .app-user-avatar { inline-size: 40px; block-size: 40px; min-inline-size: 40px; background: var(--app-avatar-me); color: var(--app-on-hero); font-weight: 700; }

.app-gsearch { position: relative; }
.app-gsearch__form { margin: 0; }
.app-gsearch__box { display: flex; align-items: center; gap: 8px; inline-size: 340px; block-size: 40px; margin: 0; padding-inline: 14px 10px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-2); color: var(--app-text-secondary); cursor: text; }
.app-gsearch__box:focus-within { border-color: var(--app-primary); background: var(--app-card-bg); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .15); }
.app-gsearch__box .ti { flex: none; font-size: 18px; }
.app-dashboard .app-gsearch__box input { flex: 1; min-inline-size: 0; padding: 0 !important; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--app-text-primary) !important; font-size: 13.5px !important; }
.app-gsearch__box input::placeholder { color: var(--app-text-secondary); }
.app-gsearch__box input::-webkit-search-cancel-button { display: none; }
.app-gsearch__box kbd { padding: 1px 6px; border: 1px solid var(--app-border); border-radius: 5px; background: transparent; color: var(--app-text-secondary); font: 11px system-ui, sans-serif; box-shadow: none; }
.app-gsearch__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 1050; inline-size: 420px; max-block-size: min(70vh, 560px); overflow-y: auto; padding: 6px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-card-bg); box-shadow: var(--app-shadow-toast); }
.app-gsearch__note { margin: 0; padding: 14px 12px; color: var(--app-text-secondary); font-size: 13px; }
.app-gsearch__group + .app-gsearch__group { margin-block-start: 4px; padding-block-start: 4px; border-block-start: 1px solid var(--app-list-line); }
.app-gsearch__head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px 4px; }
.app-gsearch__head h3 { margin: 0; color: var(--app-text-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[lang="ur"] .app-gsearch__head h3 { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.app-gsearch__head a { font-size: 12.5px; font-weight: 600; }
.app-gsearch__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.app-gsearch__row:hover, .app-gsearch__row:focus-visible { background: var(--app-list-hover); }
.app-gsearch__main { flex: 1; min-inline-size: 0; }
.app-gsearch__title { display: block; overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app-gsearch__sub { display: block; color: var(--app-text-secondary); font-size: 12px; }
.app-gsearch__end { flex: none; font-size: 13px; font-weight: 700; }
.app-gsearch__page { padding: 6px; }

/* Phone: an icon in the bar; tapped, the box covers the bar and the results drop below. */
@media (max-width: 991.98px) {
  .app-gsearch { position: static; }
  .app-gsearch__form { display: none; }
  .app-gsearch.is-open .app-gsearch__form { position: absolute; inset: 0; z-index: 1050; display: flex; align-items: center; padding: 0 12px; background: var(--app-header-bg); }
  .app-gsearch__box { inline-size: 100%; block-size: 44px; }
  .app-dashboard .app-gsearch__box input { font-size: 16px !important; }
  .app-gsearch__panel { inset-inline: 12px; inset-block-start: calc(100% + 6px); inline-size: auto; }
}

/* The sign-in pages' coloured strip: light controls on the brand colour. */
.app-dashboard .app-auth-topbar .app-theme-toggle {
  inline-size: 32px;
  block-size: 32px;
  color: var(--app-sidebar-header-toggle-fg);
}

.app-dashboard .app-auth-topbar .app-theme-toggle:hover {
  background: var(--app-sidebar-header-toggle-hover-bg);
  color: var(--app-sidebar-header-toggle-hover-fg);
}

.app-dashboard .app-auth-topbar .app-lang-button {
  color: var(--app-sidebar-header-toggle-hover-fg);
  border-color: var(--app-sidebar-header-toggle-fg);
  background: transparent;
}

.app-dashboard .app-auth-topbar .app-lang-button:hover {
  background: var(--app-sidebar-header-toggle-hover-bg);
}

/* Rails gives a text field with `maxlength` a matching `size`, and Tabler then sets
   `.form-control[size] { width: auto }`, so a 300-character box ran far past its card.
   Form controls always fill their column (fixes round F-2). */
.app-dashboard .form-control[size] {
  width: 100%;
}

/* ---- Sidebar (fixes round F-3) ------------------------------------------- */

.app-dashboard .app-nav-link {
  font-size: 15px;
}

/* New sale: the counter's main action, drawn as a button. */
.app-dashboard .app-nav-link.app-nav-link--button,
.app-dashboard .app-nav-link.app-nav-link--button.active {
  margin-block: 6px;
  background: var(--app-primary);
  color: var(--app-on-primary);
  font-weight: 600;
}

.app-dashboard .app-nav-link.app-nav-link--button .app-nav-link__icon .ti,
.app-dashboard .app-nav-link.app-nav-link--button .app-nav-link__title,
.app-dashboard .app-nav-link.app-nav-link--button:hover .app-nav-link__icon .ti,
.app-dashboard .app-nav-link.app-nav-link--button:hover .app-nav-link__title {
  color: var(--app-on-primary);
}

.app-dashboard .app-nav-link.app-nav-link--button:hover {
  background: var(--app-primary-dark, var(--app-primary));
}

.app-dashboard .app-sidebar__list--groups {
  margin-block-start: 4px;
}

/* A group heading is a plain button styled as a row. */
.app-dashboard .app-sidebar__group-toggle {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--app-text-primary);
}

/* A group's entries: indented under its heading, full-size rows. */
.app-dashboard .app-sidebar__group-list {
  margin-inline: 22px 0;
  padding-inline: 6px 0;
  gap: 0;
}

.app-dashboard .app-sidebar__group-list .app-sidebar__item {
  margin: 1px 4px;
}

.app-dashboard .app-sidebar__group-list .app-nav-link {
  min-height: 44px;
  padding-inline: 12px;
  gap: 12px;
}

/* Closed groups point their chevron along the reading direction. */
[dir="rtl"] .app-dashboard .app-sidebar__item--expandable:not(.app-sidebar__item--expanded) .app-nav-link__chevron {
  transform: rotate(90deg);
}

/* Phones: larger text and comfortable tap targets. */
@media (max-width: 991.98px) {
  .app-dashboard .app-nav-link,
  .app-dashboard .app-sidebar__group-toggle {
    font-size: 16px;
  }

  .app-dashboard .app-sidebar__group-list .app-nav-link {
    min-height: 48px;
  }
}

/* Shop details: the top of a receipt, as it will print (fixes round F-5). */
.app-dashboard .app-receipt-preview {
  max-inline-size: 22rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--app-border);
  border-radius: 8px;
  background: var(--app-content-bg);
  overflow-wrap: anywhere;
}

/* Search as you type (fixes round F-6): the results frame adds no box of its own, so
   the page lays out exactly as without it. */
turbo-frame#search-results {
  display: contents;
}

/* ---- Phone tab bar (08 section 2, D-32) -------------------------------- */

.app-tabbar {
  display: none;
}

@media (max-width: 991.98px) {
  .app-dashboard .app-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1030;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    background: var(--app-card-bg);
    border-block-start: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-tabbar);
  }

  .app-dashboard .app-tabbar .app-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-block-size: 56px; /* tap target >= 44px (08 section 3) */
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--app-text-muted) !important; /* beat the theme's link colour */
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
  }

  .app-dashboard .app-tabbar .app-tabbar__item i {
    font-size: 22px;
    line-height: 1;
  }

  .app-dashboard .app-tabbar .app-tabbar__item.active {
    color: var(--app-primary) !important;
  }

  /* Touch screens keep :hover after a tap; colour on hover only with a real pointer. */
  @media (hover: hover) {
    .app-dashboard .app-tabbar .app-tabbar__item:hover {
      color: var(--app-primary) !important;
    }
  }

  .app-dashboard .app-tabbar .app-tabbar__item:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -4px;
  }

  /* The tab bar replaces the hamburger; keep page content clear of the bar. */
  .app-dashboard.app-has-tabbar .app-topbar__menu-toggle {
    display: none;
  }

  .app-dashboard.app-has-tabbar .app-page-body {
    padding-block-end: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Notices ------------------------------------------------------------ */

.app-plan-notice {
  border-radius: 0;
  border: 0;
  margin-block-end: 0;
}

/* Customer price rows on a product page: a compact amount field. */
.customer-price-input { max-width: 12rem; }

/* Sidebar group headings (paniware-docs 08 section 2: Sales, Purchasing, ... Settings). */
.app-dashboard .app-sidebar__group-label {
  display: block;
  padding: 16px 20px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

/* Breadcrumbs (fixes round F-7): a quiet line above the page title; on a phone only
   "‹ parent", sized for a thumb. The divider points the reading direction. */
.app-breadcrumbs .breadcrumb {
  --tblr-breadcrumb-divider: "›";
  margin: 0;
  font-size: .8125rem;
  flex-wrap: wrap;
}
[dir="rtl"] .app-breadcrumbs .breadcrumb { --tblr-breadcrumb-divider: "‹"; }
.app-breadcrumbs { margin-top: -.75rem; }
.app-breadcrumbs .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: 0; padding-inline-start: .5rem; }
.app-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { float: none; padding-left: 0; padding-right: 0; padding-inline-end: .5rem; font-family: system-ui, sans-serif; }
.app-breadcrumbs .breadcrumb-item a { color: var(--tblr-secondary); text-decoration: none; }
.app-breadcrumbs .breadcrumb-item a:hover { color: var(--tblr-primary); text-decoration: underline; }
.app-breadcrumbs .breadcrumb-item.active { color: var(--tblr-body-color); font-weight: 500; }
.app-breadcrumbs__up {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 2rem;
  font-size: .875rem;
  color: var(--tblr-secondary);
  text-decoration: none;
}
.app-breadcrumbs__up:hover { color: var(--tblr-primary); }

/* My day's figure (D-205) keeps the D-179 drawer card. Colours come from Tabler's variables. */
.app-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tblr-green); box-shadow: 0 0 0 3px var(--tblr-green-lt); display: inline-block; margin-inline-end: .25rem; }
.app-day-hero { border-color: var(--tblr-green-lt); overflow: hidden; }
.app-day-hero__top { display: grid; grid-template-columns: auto auto 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; background: var(--tblr-green-lt); }
.app-day-hero__icon { width: 3.25rem; height: 3.25rem; border-radius: .85rem; display: grid; place-items: center; font-size: 1.75rem; background: var(--tblr-bg-surface); color: var(--tblr-green); }
.app-day-hero__label { white-space: nowrap; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--tblr-green); }
.app-day-hero__amount { font-size: 2.1rem; font-weight: 800; line-height: 1.15; color: var(--tblr-green); }
/* A count inside a filter chip (Due for a refill, D-204). */
.app-chip__count { display: inline-block; min-inline-size: 1.4em; margin-inline-start: 4px; padding: 0 5px; border-radius: 999px; background: var(--app-surface-2); font-size: 11px; text-align: center; }

/* Close the day from Today's drawer figure (D-220). */
.app-today-close { display: block; font-weight: 600; color: var(--app-primary); text-decoration: none; }

/* Close the day (D-202, D-212): the figure to match, the note counter and the difference. */
.app-close-expected { font-size: 30px; font-weight: 800; line-height: 1.1; }
.app-close-notes summary { cursor: pointer; font-weight: 600; color: var(--app-primary); }
.app-close-notes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-block: 10px 6px; }
.app-close-note { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; font-weight: 600; color: var(--app-text-secondary); }
.app-close-diff { margin-block-start: 8px; padding: 8px 12px; border-radius: 12px; font-weight: 700; }
.app-close-diff[data-tone="ok"] { background: var(--app-green-lt); color: var(--app-green); }
.app-close-diff[data-tone="short"] { background: var(--app-red-lt); color: var(--app-red); }
.app-close-diff[data-tone="over"] { background: var(--app-amber-lt); color: var(--app-amber); }

/* Riders in the Day summary (D-207, D-208): a motorbike badge on the avatar and group rows. */
.app-rider { position: relative; display: inline-flex; margin-inline-end: .4rem; vertical-align: middle; }
.app-rider__badge { position: absolute; inset-block-end: -4px; inset-inline-end: -6px; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--app-amber); color: var(--app-on-color); font-size: 11px; box-shadow: 0 0 0 2px var(--app-card-bg); }
.btn-whatsapp { --tblr-btn-color: var(--app-on-primary); --tblr-btn-bg: var(--app-whatsapp); --tblr-btn-border-color: var(--app-whatsapp); --tblr-btn-hover-color: var(--app-on-primary); --tblr-btn-hover-bg: var(--app-whatsapp-hover); --tblr-btn-hover-border-color: var(--app-whatsapp-hover); font-weight: 600; }
.btn-whatsapp svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 767.98px) {
  .app-day-hero__top { grid-template-columns: auto 1fr; padding: .9rem; }
  .app-day-hero__label { white-space: normal; }
  .app-day-hero__icon { width: 2.75rem; height: 2.75rem; font-size: 1.5rem; }
  .app-day-hero__amount { font-size: 1.85rem; }
}

/* ---- The shell as the mockup (UI refresh G-1) --------------------------------------
   A white top bar with a line under it (≡ only on a phone); a white sidebar with the
   droplet on a gradient tile, quiet rows, the gradient New sale button, a red count on
   Orders, Business and Shop headings, chevrons pointing down, and the plan box at its foot. */
.app-dashboard .app-topbar { block-size: 62px; padding-inline: 24px; background: var(--app-header-bg); border-block-end: 1px solid var(--app-border); }
.app-dashboard .app-topbar__date { margin-inline-start: 6px; color: var(--app-text-secondary); font-size: 13px; }
/* The top bar stays in view while the page scrolls; ≡ folds the sidebar on a wide screen
   and opens it as a drawer on a phone, in the same bordered look as the other buttons. */
.app-dashboard .app-topbar { position: sticky; inset-block-start: 0; z-index: 1020; }
.app-dashboard .app-topbar .app-topbar__menu-toggle { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border: 1px solid var(--app-input-border); border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 20px; }
@media (max-width: 991.98px) { .app-dashboard .app-topbar { padding-inline: 12px; } }

.app-dashboard .app-sidebar { background: var(--app-card-bg); border-inline-end: 1px solid var(--app-border); box-shadow: none; }
.app-dashboard .app-sidebar > .app-sidebar__header { block-size: 62px; padding-inline: 20px; background: var(--app-card-bg); }
.app-dashboard .app-sidebar .app-sidebar__brand, .app-dashboard .app-sidebar .app-sidebar__brand:hover { color: var(--app-text-primary); font-size: 17px; font-weight: 800; letter-spacing: 0; opacity: 1; }
.app-dashboard .app-sidebar .app-sidebar__brand-name { display: inline-flex; align-items: center; gap: 10px; }
.app-sidebar__brand-tile { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 11px; background: var(--app-hero); color: var(--app-on-hero); }
.app-sidebar__brand-tile .app-brand-mark, .app-sidebar__brand-tile svg { inline-size: 20px; block-size: 20px; margin: 0; }
.app-dashboard .app-sidebar .app-nav-link { min-block-size: 40px; gap: 11px; padding-inline: 12px; border-radius: 11px; color: var(--app-text-secondary); font-size: 14px; font-weight: 600; }
.app-dashboard .app-sidebar .app-nav-link__icon .ti { color: inherit; font-size: 19px; }
.app-dashboard .app-sidebar .app-nav-link.active, .app-dashboard .app-sidebar .app-nav-link--section-active { color: var(--app-nav-link-active-fg); }
.app-dashboard .app-sidebar .app-sidebar__group-toggle { color: var(--app-text-secondary); font-size: 14px; font-weight: 600; }
.app-dashboard .app-sidebar .app-sidebar__group-toggle.app-nav-link--section-active { color: var(--app-nav-link-active-fg); }
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button, .app-dashboard .app-sidebar .app-nav-link.app-nav-link--button.active { justify-content: flex-start; min-block-size: 42px; margin-block: 4px 6px; background: var(--app-hero); box-shadow: var(--app-shadow-raised); color: var(--app-on-hero); }
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button .app-nav-link__title { flex: none; }
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button .app-nav-link__title,
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button .app-nav-link__icon .ti,
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button:hover .app-nav-link__title,
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button:hover .app-nav-link__icon .ti { color: var(--app-on-hero); }
.app-dashboard .app-sidebar .app-sidebar__list { padding-inline: 4px; }
.app-dashboard .app-sidebar .app-sidebar-plan__text b { color: var(--app-text-primary); }
.app-dashboard .app-sidebar .app-nav-link.app-nav-link--button:hover { background: var(--app-hero); filter: brightness(1.05); }
.app-dashboard .app-sidebar .app-nav-link .app-nav-badge,
.app-dashboard .app-sidebar .app-nav-link.active .app-nav-badge,
.app-dashboard .app-sidebar .app-nav-link:hover .app-nav-badge { min-inline-size: 0; block-size: 18px; padding: 0 7px; background: var(--app-red-lt); color: var(--app-red) !important; font-size: 11px; font-weight: 600; }
.app-dashboard .app-sidebar .app-sidebar__item--expandable:not(.app-sidebar__item--expanded) .app-nav-link__chevron,
[dir="rtl"] .app-dashboard .app-sidebar .app-sidebar__item--expandable:not(.app-sidebar__item--expanded) .app-nav-link__chevron { transform: none; }
.app-dashboard .app-sidebar .app-sidebar__item--expanded > .app-nav-link .app-nav-link__chevron { transform: rotate(180deg); }
.app-dashboard .app-sidebar .app-nav-link__chevron { opacity: .6; }
.app-dashboard .app-sidebar .app-nav-link__chevron .ti { font-size: 15px; }
.app-dashboard .app-sidebar .app-sidebar__group-label { padding: 16px 12px 6px; color: var(--app-text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .06em; opacity: .8; }
[lang="ur"] .app-dashboard .app-sidebar .app-sidebar__group-label { font-size: 12.5px; letter-spacing: 0; text-transform: none; }

.app-bell-menu { inline-size: 300px; padding: 0; }
.app-bell-menu__head { padding: 12px 16px; border-block-end: 1px solid var(--app-border); font-weight: 700; }
.app-bell-menu__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; color: var(--app-text-secondary); font-size: 13px; text-align: center; }
.app-bell-menu__empty .ti { font-size: 28px; }

/* ---- Plan at the foot of the sidebar (D-184) ------------------------------------ */

.app-dashboard .app-sidebar-plan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 14px;
  padding: 12px;
  border-radius: 14px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  color: var(--app-text-primary);
  text-decoration: none;
}
.app-dashboard .app-sidebar-plan:hover { border-color: var(--app-primary); color: var(--app-text-primary); }
.app-sidebar-plan__text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.3; }
.app-sidebar-plan__text b { font-size: 13px; }
.app-sidebar-plan__text small { font-size: 12px; color: var(--app-text-secondary); }
.app-sidebar-plan__text .app-sidebar-plan__ended { color: var(--app-owed); }
html[data-sidebar-collapsed] .app-dashboard .app-sidebar-plan { display: none; }
html[data-sidebar-collapsed] .app-dashboard .app-sidebar .app-nav-link.app-nav-link--button { justify-content: center; }

/* ---- Phone tab bar: New sale as the raised middle button (D-184) ------------------ */

@media (max-width: 991.98px) {
  .app-dashboard .app-tabbar .app-tabbar__sale {
    color: var(--app-primary) !important;
    justify-content: flex-end;
  }

  .app-dashboard .app-tabbar .app-tabbar__sale-button {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    margin-block-start: -30px;
    border-radius: 20px;
    background: var(--app-hero);
    color: var(--app-on-hero);
    border: 4px solid var(--app-content-bg);
    box-shadow: var(--app-shadow-raised);
  }

  .app-dashboard .app-tabbar .app-tabbar__sale-button i {
    font-size: 26px;
  }

  .app-dashboard .app-tabbar .app-tabbar__sale:focus-visible .app-tabbar__sale-button {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
  }
}

/* ---- Today (UI refresh, D-185) --------------------------------------------------- */

.app-today-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.app-today-head .page-title { font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.app-today-head__actions { gap: 8px; flex: none; }

.app-today-sales { display: flex; flex-direction: column; overflow: hidden; }
.app-today-sales__body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 0; }
.app-today-sales__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.app-today-sales__label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--app-text-secondary); text-decoration: none; }
.app-today-sales__label:hover { color: var(--app-primary); }
.app-today-sales__amount { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-block: 6px 4px; }
.app-today-sales__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--app-text-secondary); }
.app-today-sales__chart { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin-block-start: 6px; }
.app-today-sales__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px solid var(--app-border); margin-block-start: 10px; }
.app-today-sales__stats > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-inline-size: 0; }
.app-today-sales__stats > div + div { border-inline-start: 1px solid var(--app-border); }
.app-today-sales__stats b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; }
@media (min-width: 992px) {
  .app-today-sales__stats { grid-template-columns: repeat(4, 1fr); }
  .app-today-sales__stats b { font-size: 18px; }
  .app-today-sales__amount { font-size: 2.4rem; }
}
@media (max-width: 575.98px) {
  .app-today-sales__body { padding: 16px 16px 0; }
  .app-today-sales__stats > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  .app-today-sales__stats .app-icon { display: none; }
  .app-today-sales__stats b { font-size: 15px; }
}

.app-today-change { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.app-today-change--up { background: var(--app-money-in-lt); color: var(--app-money-in); }
.app-today-change--down { background: var(--app-owed-lt); color: var(--app-owed); }

.app-today-range { background: var(--app-gray-lt); border-radius: 10px; padding: 3px; font-size: 12px; font-weight: 600; flex: none; }
.app-today-range a { padding: 5px 11px; border-radius: 8px; color: var(--app-text-secondary); text-decoration: none; }
.app-today-range a.is-on { background: var(--app-card-bg); color: var(--app-text-primary); box-shadow: var(--app-shadow-panel); }

.app-today-quick { padding: 16px; }
.app-today-quick__title,
.app-today-attention__title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.app-today-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app-today-quick__item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--app-text-primary); text-decoration: none; }
.app-today-quick__item:hover { color: var(--app-primary); }
@media (max-width: 991.98px) {
  .app-today-quick { background: transparent; box-shadow: none; border: 0; padding: 4px 0; }
}
@media (min-width: 992px) {
  .app-today-quick__grid { grid-template-columns: 1fr 1fr; }
  .app-today-quick__item { flex-direction: row; text-align: start; gap: 10px; padding: 10px; border-radius: 14px; background: var(--app-surface-2); border: 1px solid var(--app-border); }
  .app-today-quick__item .app-icon { inline-size: 36px; block-size: 36px; border-radius: 11px; font-size: 19px; box-shadow: none; }
  .app-today-quick__item--new_sale { background: var(--app-primary); color: var(--app-on-primary); border-color: transparent; }
  .app-today-quick__item--new_sale:hover { color: var(--app-on-primary); background: var(--app-primary-dark); }
}

.app-today-attention { padding: 16px; flex: 1; }
.app-today-attention__item { display: flex; align-items: center; gap: 10px; color: var(--app-text-primary); text-decoration: none; }
.app-today-attention__item:hover { color: var(--app-text-primary); }
.app-today-attention__item b { font-size: 14px; }
.app-today-attention__chevron { color: var(--app-text-muted); }
[dir="rtl"] .app-today-attention__chevron { transform: scaleX(-1); }
.app-today-attention__clear { display: flex; align-items: center; gap: 10px; color: var(--app-text-secondary); }
@media (max-width: 991.98px) {
  .app-today-attention { background: transparent; box-shadow: none; border: 0; padding: 4px 0 0; }
  .app-today-attention__list { display: flex; gap: 10px; overflow-x: auto; margin-inline: -1rem; padding: 2px 1rem 8px; scrollbar-width: none; }
  .app-today-attention__list::-webkit-scrollbar { display: none; }
  .app-today-attention__item { flex: none; min-inline-size: 190px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--app-card-bg); box-shadow: var(--app-shadow-card); }
}
@media (min-width: 992px) {
  .app-today-attention__item { padding: 10px 2px; }
  .app-today-attention__item + .app-today-attention__item { border-block-start: 1px solid var(--app-border); }
}

.app-today-mini { padding: 14px; }
.app-today-mini__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--app-text-secondary); }
.app-today-mini__value { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.app-today-mini__foot { font-size: 11.5px; color: var(--app-text-muted); }
.app-today-ring { display: flex; align-items: center; gap: 12px; margin-block-start: 10px; }
.app-today-ring__svg { inline-size: 56px; block-size: 56px; flex: none; }
.app-today-ring__track { fill: none; stroke: var(--app-gray-lt); stroke-width: 5; }
.app-today-ring__fill { fill: none; stroke: var(--app-cyan); stroke-width: 5; stroke-linecap: round; }
.app-today-mix { display: flex; gap: 2px; block-size: 10px; border-radius: 999px; overflow: hidden; margin: 12px 0 8px; }
.app-today-mix i, .app-today-legend i { display: block; }
.app-today-legend { display: grid; gap: 3px; font-size: 12px; }
.app-today-legend div { display: flex; align-items: center; gap: 6px; }
.app-today-legend i { inline-size: 8px; block-size: 8px; border-radius: 3px; }
.app-today-legend span { margin-inline-start: auto; font-weight: 600; }
.app-today-mix--cash { background: var(--app-green); }
.app-today-mix--wallet { background: var(--app-red); }
.app-today-mix--bank_transfer { background: var(--app-primary); }
.app-today-mix--card { background: var(--app-violet); }
.app-today-mix--other { background: var(--app-gray); }

/* ---- Lists in the Orders look (UI refresh, D-186; Customers D-188) ---------------- */

.app-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.app-list-head__actions { display: flex; gap: 10px; flex: none; }
.app-list-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-block-end: 18px; }
.app-list-tiles .app-stat { margin: 0; }

/* Phone: search, chips, strip, cards. Wide: the chips and the search share a row. */
.app-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.app-list > turbo-frame { display: contents; }
.app-list__search { order: 1; margin-block-end: 12px; }
.app-list__chips { order: 2; margin-block-end: 0; }
.app-list-strip { order: 3; }
.app-list__body { order: 4; margin-block-start: 16px; }
@media (min-width: 992px) {
  .app-list { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; column-gap: 12px; }
  .app-list__chips { order: 1; grid-column: 1; grid-row: 1; }
  .app-list__search { order: 2; grid-column: 2; grid-row: 1; margin-block-end: 0; }
  .app-list__body { grid-column: 1 / -1; }
}

.app-list-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block-start: 14px; }
.app-list-strip > * { padding: 10px 12px; border-radius: 14px; background: var(--app-card-bg); box-shadow: var(--app-shadow-card); min-inline-size: 0; }
.app-list-strip > * > span { display: block; font-size: 11.5px; color: var(--app-text-secondary); }
.app-list-strip b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list__body .app-date-head:first-child { margin-block-start: 2px; }
.app-list-rows .app-icon { inline-size: 44px; block-size: 44px; border-radius: 14px; font-size: 20px; }

.app-list-table { overflow: hidden; }
.app-list-table__date td { background: var(--app-list-date-bg); font-size: 12px; font-weight: 700; color: var(--app-text-secondary); padding-block: 8px; }
.app-list-table__row:hover td { background: var(--app-list-hover); }
.app-list-table__customer { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.app-list-table__customer small { display: block; font-size: 12px; color: var(--app-text-secondary); }
.app-list-table__type { display: inline-flex; align-items: center; gap: 6px; color: var(--app-text-secondary); font-size: 13px; white-space: nowrap; }
.app-list-table__type .ti { font-size: 17px; }
.app-list-table__address { max-inline-size: 280px; color: var(--app-text-secondary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list-rows .app-avatar { inline-size: 44px; block-size: 44px; font-size: 15px; }
.app-list-table__go { color: var(--app-text-secondary); font-size: 17px; }

/* The busy lists (U-6): Payments, Invoices, Expenses, Stock movements. A table wider than
   its card scrolls inside it rather than being cut off; cells are a little tighter below
   1400 px so eight columns fit beside the sidebar. */
.app-list-table { overflow-x: auto; }
@media (max-width: 1399.98px) { .app-list-table .app-table th, .app-list-table .app-table td { padding-inline: 12px; } }
.app-list-table__person { color: var(--app-text-secondary); font-size: 13px; max-inline-size: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list-table__what { max-inline-size: 260px; }
.app-list-table__what small, .app-list-table__kind + small { font-size: 12px; color: var(--app-text-secondary); }
.app-list-table__kind { white-space: nowrap; }
.app-list-table__method { white-space: normal; max-inline-size: 150px; }
.app-amount--undone { color: var(--app-text-muted); text-decoration: line-through; font-weight: 600; }
.app-amount--out { color: var(--app-red); }
.app-stat--text .app-stat__value { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list__total { order: 4; display: flex; justify-content: space-between; align-items: baseline; margin-block-start: 14px; padding: 10px 16px; border-radius: 14px;
  background: var(--app-card-bg); box-shadow: var(--app-shadow-card); color: var(--app-text-secondary); }
.app-list__total b { font-size: 18px; color: var(--app-text-primary); }
.app-chip--filter { background: rgba(var(--app-primary-rgb), .1); border-color: transparent; color: var(--app-primary); }
.app-chip--filter .ti { font-size: 14px; }
.app-chip--pick { border-style: dashed; cursor: pointer; }
.app-chip--pick .ti { font-size: 15px; }

/* A search box with a day in it (Payments, Expenses): a calendar icon over an unseen date
   field; the day chosen shows as a chip. */
.app-search__day { position: relative; flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 28px; border-inline-start: 1px solid var(--app-list-line);
  padding-inline-start: 6px; color: var(--app-text-secondary); }
.app-search__day.is-set { color: var(--app-primary); }
.app-search .app-search__day input { position: absolute; inset: 0; inline-size: 100%; opacity: 0; cursor: pointer; }
.app-list-table__customer { max-inline-size: 260px; }

/* Stock movements: the date chips with Kind and Entered by beside them, and "In and out". */
.app-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-end: 14px; }
.app-list-bar .app-chips { margin: 0; flex: 1 1 auto; min-inline-size: 0; }
.app-list-bar__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; inline-size: 100%; }
.app-list-bar__filters .form-select { border-radius: 12px; }
@media (min-width: 992px) { .app-list-bar__filters { inline-size: auto; grid-template-columns: 180px 180px; } }
.app-pick-dates { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 14px 16px; margin-block-end: 14px; }
.app-pick-dates label { display: grid; gap: 4px; flex: 1 1 140px; font-size: 12.5px; color: var(--app-text-secondary); }
.app-inout { margin-block-end: 16px; overflow: hidden; }
.app-inout__head { display: flex; justify-content: space-between; align-items: center; inline-size: 100%; padding: 14px 16px; border: 0; background: none; color: var(--app-text-primary);
  font-weight: 600; font-size: 15px; text-align: start; }
.app-inout__toggle { display: block; padding: 10px 16px 14px; border: 0; background: none; color: var(--app-primary); font-weight: 600; font-size: 13px; }
.app-inout__toggle[aria-expanded="true"] { display: none; }
@media (min-width: 992px) {
  .app-inout__head { pointer-events: none; padding-block-end: 10px; }
  .app-inout__body.collapse:not(.show) { display: block; }
}
.app-list-tiles--phone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 992px) { .app-list-tiles--phone { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* Help: an example takes the theme's surface, so it reads in dark too (U-6). */
.app-readonly-field { background: var(--app-surface-2); color: var(--app-text-secondary); }
.app-help-example { padding: 1rem; border: 1px solid var(--app-list-line); border-radius: 12px; background: var(--app-surface-2); }

/* ---- Sale screen: the till (UI refresh, D-187) ----------------------------------- */

/* Phone: one column (head, customer and type, products, lines, delivery, notes) with the
   two wrappers taking no box; the payment is a bottom sheet opened from the cart bar.
   Wide: as the mockup, the products scroll on the left and the panel (customer and type,
   the lines, totals and payment) is a full-height column fixed to the window's end edge
   under the top bar, which stays put; only the lines scroll inside it. */
.app-sale { display: flex; flex-direction: column; gap: 14px; padding-block-end: 88px; }
.app-sale__main, .app-sale__panel { display: contents; }
.app-sale__head { order: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-sale__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 700; }
.app-sale__title .app-pill { margin: 0; }
.app-sale__customer { order: 2; }
.app-sale__products { order: 3; }
.app-sale__lines { order: 4; }
.app-sale__delivery, .app-sale__notes { order: 5; margin: 0; }
.app-sale-pay { order: 6; }
.app-sale__cancel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; inline-size: 40px; block-size: 40px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 20px; }
.app-sale__cancel-menu { inline-size: 290px; padding: 12px; }
.app-sale__notes summary { cursor: pointer; font-weight: 600; }

.app-sale__who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--app-border); border-radius: var(--app-radius-card); background: var(--app-card-bg); box-shadow: var(--app-shadow-card); }
.app-sale__who .app-avatar, .app-sale__who > .app-icon { inline-size: 42px; block-size: 42px; font-size: 15px; }
.app-sale__standing { font-weight: 600; }
.app-sale__standing.is-owed { color: var(--app-red); }
.app-sale__standing.is-clear { color: var(--app-green); }
.app-sale__who .btn { flex: none; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; }
.app-segctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: 12px; padding: 4px; border-radius: 14px; background: var(--app-gray-lt); }
.app-segctl form { display: contents; }
.app-segctl__item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-inline-size: 0; padding: 8px 2px; border: 0; border-radius: 10px; background: transparent; color: var(--app-text-secondary); font-size: 12.5px; font-weight: 600; }
.app-segctl__item span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-segctl__item .ti { font-size: 18px; }
.app-segctl__item.is-on { background: var(--app-card-bg); color: var(--app-primary); box-shadow: var(--app-shadow-card); }

.app-sale__search { margin-block-end: 0; }
.app-sale__search .btn { flex: none; }
.app-sale__cats { margin: 14px 0 10px; gap: 8px; }
.app-sale__cats .app-chip { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--app-text-secondary); cursor: pointer; }
.app-sale__cats .app-chip.is-on, .app-sale__cats .app-chip.is-on:hover, .app-sale-line__extra .app-chip.is-on, .app-sale-line__extra .app-chip.is-on:hover { border-color: transparent; background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary); }
.app-sale__products > .app-sale__tiles:first-of-type { margin-block-start: 14px; }
.app-sale__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-sale__tile { margin: 0; min-inline-size: 0; }
.app-sale-tile { position: relative; display: flex; flex-direction: column; align-items: center; inline-size: 100%; block-size: 100%; padding: 12px 8px 10px; border: 2px solid transparent; border-radius: 16px; background: var(--app-card-bg); box-shadow: var(--app-shadow-card); color: var(--app-text-primary); text-align: center; user-select: none; transition: transform .08s; }
.app-sale-tile:active { transform: scale(.96); }
.app-sale-tile:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
@media (hover: hover) { .app-sale-tile:hover { border-color: rgba(var(--app-primary-rgb), .35); } }
.app-sale-tile .app-icon { inline-size: 46px; block-size: 46px; margin-block-end: 6px; border-radius: 15px; font-size: 24px; box-shadow: none; }
.app-sale-tile__name { display: flex; align-items: center; justify-content: center; min-block-size: 32px; font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.app-sale-tile__price { margin-block-start: 2px; font-size: 12.5px; font-weight: 700; color: var(--app-primary); }
.app-sale-tile__left { min-block-size: 1.3em; font-size: 10.5px; color: var(--app-text-secondary); }
.app-sale-tile__left.is-low { color: var(--app-amber); font-weight: 600; }
.app-sale-tile.is-on { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .1); }
.app-sale-tile__count { position: absolute; inset-block-start: -7px; inset-inline-end: -5px; display: grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding: 0 6px; border: 2px solid var(--app-content-bg); border-radius: 999px; background: var(--app-primary); color: var(--app-on-primary); font-size: 12.5px; font-weight: 700; }
.app-sale__nomatch { margin: 12px 0 0; color: var(--app-text-secondary); text-align: center; }

.app-sale__scanner { inline-size: min(420px, 92vw); padding: 14px; border: 0; border-radius: 20px; background: var(--app-card-bg); color: var(--app-text-primary); }
.app-sale__scanner::backdrop { background: var(--app-backdrop); }
.app-sale__scanner video { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--app-ink); }
.app-sale__scanner p { margin: 10px 0; color: var(--app-text-secondary); font-size: 13px; text-align: center; }

/* Phone: "On this order" over a card of lines. */
.app-sale__lines-title { margin: 6px 2px 10px; font-size: 15.5px; font-weight: 700; }
.app-sale__lines-list { border: 1px solid var(--app-border); border-radius: var(--app-radius-card); background: var(--app-card-bg); box-shadow: var(--app-shadow-card); }
.app-sale__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 22px; color: var(--app-text-secondary); font-size: 13px; text-align: center; }
.app-sale__empty .ti { font-size: 28px; }
.app-sale-line { padding: 10px 14px; }
.app-sale-line + .app-sale-line { border-block-start: 1px solid var(--app-list-line); }
.app-sale-line__row { display: flex; align-items: center; gap: 10px; }
.app-sale-line__main { flex: 1; min-inline-size: 0; }
.app-sale-line__name { display: block; padding: 0; border: 0; background: none; color: var(--app-text-primary); font-size: 13.5px; font-weight: 600; text-align: start; overflow-wrap: anywhere; }
button.app-sale-line__name { cursor: pointer; }
button.app-sale-line__name:hover, button.app-sale-line__name[aria-expanded="true"] { color: var(--app-primary); }
.app-sale-line__sub { font-size: 12px; color: var(--app-text-secondary); }
.app-sale-line__total { flex: none; min-inline-size: 64px; font-weight: 700; text-align: end; }
.app-sale-line__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-block-start: 8px; padding-inline-start: 42px; }
.app-sale-line__count { max-inline-size: 5rem; }
.app-sale-line__container { display: flex; flex-wrap: wrap; gap: 8px; }
.app-sale-line__container select { flex: 1 1 9rem; inline-size: auto; min-inline-size: 0; }
.app-sale-line__change { padding: 0; border: 0; background: none; color: var(--app-primary); font-size: 12px; font-weight: 600; }
.app-sale-line__more { margin-block-start: 10px; padding: 10px; border-radius: 12px; background: var(--app-surface-2); }
.app-sale__charge-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-block-start: 1px solid var(--app-list-line); }
.app-chips--sm { gap: 6px; margin: 0; }
.app-chips--sm form { display: contents; }
.app-chips--sm .app-chip { padding: 3px 10px; font-size: 12px; }
.app-stepper { flex: none; display: flex; align-items: center; border-radius: 12px; background: var(--app-gray-lt); }
.app-stepper form { display: contents; }
.app-stepper button { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border: 0; border-radius: 12px; background: transparent; color: var(--app-text-primary); font-size: 17px; }
.app-stepper b { min-inline-size: 22px; text-align: center; }
@media (max-width: 379.98px) {
  .app-sale-line__row > .app-icon { display: none; }
  .app-sale-line__extra { padding-inline-start: 0; }
}

.app-sale-pay { display: flex; flex-direction: column; gap: 12px; }
.app-sale-pay__grab { display: block; inline-size: 40px; block-size: 5px; margin: 0 auto; padding: 0; border: 0; border-radius: 999px; background: var(--app-border); }
.app-sale-pay__to-pay { text-align: center; }
.app-sale-pay__to-pay > span:first-child { display: block; color: var(--app-text-secondary); font-size: 13px; }
.app-sale-pay .app-sale-pay__to-pay-amount { display: block; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.app-sale-pay__sums > div { display: flex; justify-content: space-between; padding: 2px 0; color: var(--app-text-secondary); font-size: 13px; }
.app-sale-pay__sums > .app-sale-pay__total { padding: 6px 0 0; color: var(--app-text-primary); font-size: 20px; font-weight: 800; }
.app-sale-pay__methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.app-sale-pay__method { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 9px 2px 7px; border: 1.5px solid var(--app-input-border); border-radius: 14px; background: var(--app-card-bg); font-size: 11.5px; font-weight: 600; text-align: center; cursor: pointer; }
.app-sale-pay__method input { position: absolute; opacity: 0; pointer-events: none; }
.app-sale-pay__method .ti { font-size: 21px; }
.app-sale-pay__method.is-on { border-color: var(--app-green); background: var(--app-green-lt); color: var(--app-green); }
.app-sale-pay__method:focus-within { outline: 2px solid var(--app-primary); outline-offset: 1px; }
.app-sale-pay__method.is-off { opacity: .45; cursor: not-allowed; }
.app-sale-pay__cash { display: flex; flex-direction: column; gap: 10px; }
.app-sale-pay__cashrow { display: flex; flex-direction: column; gap: 10px; }
.app-sale-pay__given { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--app-input-border); border-radius: 14px; background: var(--app-surface-2); }
.app-sale-pay__given:focus-within { border-color: var(--app-primary); }
.app-sale-pay__given label { display: block; color: var(--app-text-secondary); font-size: 12px; }
.app-sale-pay__given > .ti { font-size: 26px; color: var(--app-text-secondary); }
/* The theme styles every number field with !important (dashboard_theme.css); this one is the big plain figure. */
.app-dashboard .app-sale-pay__given input { inline-size: 100%; min-inline-size: 0; padding: 0 !important; border: 0 !important; outline: 0; background: transparent !important; color: var(--app-text-primary) !important; font-size: 20px !important; font-weight: 700; }
.app-dashboard .app-sale-pay__given input:focus { border: 0 !important; box-shadow: none !important; }
.app-sale-pay__quick { display: flex; gap: 8px; }
.app-sale-pay__quick button { flex: 1; padding: 8px 0; border: 1px solid var(--app-input-border); border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-weight: 700; }
.app-sale-pay__quick button.is-on { border-color: transparent; background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary); }
.app-sale-pay__line { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; font-weight: 700; }
.app-sale-pay__line[data-tone="give"] { background: var(--app-amber-lt); color: var(--app-amber); }
.app-sale-pay__line[data-tone="owe"] { background: var(--app-red-lt); color: var(--app-red); }
.app-sale-pay__line[data-tone="extra"] { background: var(--app-blue-lt); color: var(--app-blue); }
.app-btn-big { padding: 12px 18px; border-radius: 14px; font-size: 15px; font-weight: 700; }
.app-btn-pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 14px; background: var(--app-green); color: var(--app-on-color); font-size: 15px; font-weight: 700; }
.app-btn-pay:hover, .app-btn-pay:focus { background: var(--app-green); color: var(--app-on-color); filter: brightness(.95); }
.app-btn-pay--outline { border: 1.5px solid var(--app-green); background: transparent; color: var(--app-green); }
.app-btn-pay--outline:hover { background: var(--app-green-lt); color: var(--app-green); }
.app-btn-pay kbd { padding: 0 5px; border: 1px solid currentColor; border-radius: 5px; background: transparent; color: inherit; font: 11px system-ui, sans-serif; opacity: .75; box-shadow: none; }
.app-sale-pay .app-sale-pay__confirm { margin-block-start: -2px; color: var(--app-text-secondary); font-size: 13px; font-weight: 600; text-decoration: none; }
/* Empties back (D-120) as compact rows: the till has little height to spare. */
.app-sale-pay #empties { gap: 6px !important; }
.app-sale-pay #empties > .fw-semibold { font-size: 12.5px; }
.app-sale-pay #empties label .d-block { display: inline !important; margin-inline-start: 6px; }
.app-sale-pay #empties input { max-inline-size: 76px !important; min-block-size: 0 !important; block-size: 38px; padding: 4px 8px !important; font-size: 15px !important; }
.app-sale-pay details > summary { list-style: none; cursor: pointer; }
.app-sale-pay details > summary::-webkit-details-marker { display: none; }

.app-sale__cartbar { position: fixed; inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1030; display: flex; align-items: center; gap: 12px; padding: 10px; padding-inline-start: 16px; border-radius: 20px; background: var(--app-ink); color: var(--app-on-ink); box-shadow: var(--app-shadow-cartbar); }
.app-sale__cartbar-sum { flex: 1; min-inline-size: 0; }
.app-sale__cartbar-sum span { display: block; font-size: 12px; opacity: .7; }
.app-sale__cartbar-sum b { font-size: 19px; }
.app-sale__cartbar-go { flex: none; gap: 8px; padding: 12px 18px; border-radius: 14px; font-size: 15px; font-weight: 700; }

@media (max-width: 991.98px) {
  .app-sale-pay.offcanvas-lg { block-size: auto; max-block-size: 92vh; overflow-y: auto; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 26px 26px 0 0; background: var(--app-card-bg); color: var(--app-text-primary); }
}

@media (min-width: 992px) {
  .app-dashboard.app-till .app-page-body { padding-inline-end: 400px; }
  .app-sale { display: block; padding-block-end: 0; }
  .app-sale__main { display: flex; flex-direction: column; gap: 0; min-inline-size: 0; }
  .app-sale__head { margin-block-end: 18px; }
  .app-sale__title { font-size: 23px; letter-spacing: -.01em; }
  .app-sale__cancel { inline-size: auto; block-size: auto; padding: 8px 14px; border-radius: 12px; background: var(--app-surface-2); color: var(--app-red); font-size: 14px; font-weight: 600; }
  .app-sale__cancel .ti { font-size: 18px; }
  .app-sale__delivery, .app-sale__notes { margin-block-start: 18px; }
  .app-sale__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .app-sale-tile { padding: 16px 8px 12px; }

  .app-sale__panel { position: fixed; inset-block: 62px 0; inset-inline-end: 0; z-index: 10; display: flex; flex-direction: column; inline-size: 400px; overflow-y: auto; border-inline-start: 1px solid var(--app-border); background: var(--app-card-bg); }
  .app-sale__customer { flex: none; padding: 16px 18px 12px; border-block-end: 1px solid var(--app-border); }
  .app-sale__who { padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none; }
  .app-sale__customer .app-segctl { margin-block-start: 0; }
  .app-sale__lines { flex: 1 1 auto; min-block-size: 96px; overflow-y: auto; }
  .app-sale__lines-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-sale__lines-list { border: 0; border-radius: 0; background: none; box-shadow: none; }
  /* As the mockup: the customer and the lines on white, totals and payment on the second
     surface (Bootstrap clears an offcanvas-lg background on a wide screen, hence !important). */
  .app-sale__customer, .app-sale__lines { background: var(--app-card-bg); }
  .app-sale-pay { flex: none; gap: 10px; padding: 14px 18px 18px; border-block-start: 1px solid var(--app-border); background: var(--app-surface-2) !important; }
  .app-sale-pay__cashrow { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--app-input-border); border-radius: 14px; background: var(--app-card-bg); }
  .app-sale-pay__cashrow:focus-within { border-color: var(--app-primary); }
  .app-sale-pay__given { flex: 1; min-inline-size: 0; padding: 0; border: 0; background: none; }
  .app-dashboard .app-sale-pay__given input { font-size: 17px !important; }
  .app-sale-pay__quick { flex: none; gap: 6px; }
  .app-sale-pay__quick button { flex: none; padding: 7px 10px; }
  .app-sale-pay__line { padding: 8px 12px; }
}
@media (min-width: 1200px) {
  .app-sale__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* "Sale completed" (D-187), shown once after completing. */
.app-sale-done { align-items: center; margin-block-end: 16px; padding: 28px 20px 22px; text-align: center; }
.app-sale-done__tick { display: grid; place-items: center; inline-size: 88px; block-size: 88px; border-radius: 50%; background: var(--app-green); color: var(--app-on-color); font-size: 48px; box-shadow: 0 0 0 12px var(--app-green-lt); animation: app-sale-tick .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes app-sale-tick { from { transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .app-sale-done__tick { animation: none; } }
.app-sale-done h2 { margin: 24px 0 4px; font-size: 22px; }
.app-sale-done p { margin: 0; color: var(--app-text-secondary); }
.app-sale-done__amount { margin: 12px 0 20px; font-size: 30px; font-weight: 800; }
.app-sale-done__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; inline-size: 100%; max-inline-size: 420px; }
.app-sale-done__acts .btn { gap: 8px; }
.app-sale-done__next { grid-column: 1 / -1; }
.app-sale-done__wa { color: var(--app-whatsapp); }
/* ---- Customer page (UI refresh, D-188 as settled 2026-10-28) --------------------- */
/* Wide: the header card (who, contact, actions, then the details strip), the balance cards
   in one row, activity and buying at equal width, addresses. Phone: the header stands on
   the page, centred, its details a 2 × 2 box; money takes the row, bottles and deposit
   share the next; the rest stacks. */
.app-customer-head { margin-block-end: 14px; overflow: hidden; }
.app-customer-head__top { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.app-customer-head__avatar { display: grid; place-items: center; flex: none; inline-size: 64px; block-size: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--app-amber), var(--app-red)); color: var(--app-on-color); font-size: 24px; font-weight: 700; box-shadow: 0 8px 20px rgba(var(--app-red-rgb), .3); }
.app-customer-head__who { flex: 1; min-inline-size: 0; }
.app-customer-head__name { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.app-customer-head__line { color: var(--app-text-secondary); font-size: 13px; }
.app-customer-head__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.app-customer-head__contact { display: flex; gap: 12px; flex: none; }
.app-customer-head__contact a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--app-text-secondary); font-size: 11.5px; font-weight: 600; }
.app-customer-head__contact a:hover { color: var(--app-text-primary); }
.app-customer-head__contact .app-icon { inline-size: 42px; block-size: 42px; border-radius: 50%; font-size: 19px; }
.app-customer-head__actions { display: flex; align-items: center; gap: 8px; flex: none; padding-inline-start: 18px; border-inline-start: 1px solid var(--app-border); align-self: stretch; }
.app-customer-head__actions form { display: flex; }
.app-customer-head__actions .btn-primary { display: inline-flex; align-items: center; gap: 6px; }
.app-customer-head__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block-start: 1px solid var(--app-border); }
.app-customer-head__facts > div { min-inline-size: 0; padding: 10px 20px; }
.app-customer-head__facts > div + div { border-inline-start: 1px solid var(--app-border); }
.app-customer-head__facts dt { font-size: 11.5px; font-weight: 400; color: var(--app-text-secondary); }
.app-customer-head__facts dd { margin: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-accounts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block-end: 14px; }
.app-account { margin: 0; padding: 16px; gap: 10px; }
.app-account__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.app-account__head .app-pill { margin-inline-start: auto; }
.app-account__label { color: var(--app-text-secondary); font-size: 12.5px; font-weight: 600; }
.app-account__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.app-account__value small { margin-inline-start: 6px; color: var(--app-text-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.app-account__value--owed { color: var(--app-red); font-size: 28px; }
.app-account__value--owed.is-clear { color: var(--app-green); font-size: 24px; }
.app-account__advance { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: var(--app-blue-lt); color: var(--app-blue); font-size: 13px; font-weight: 600; }
.app-account__rows { display: flex; flex-direction: column; gap: 6px; }
.app-account__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--app-surface-2); font-size: 13px; }
.app-account__row b { flex: none; font-weight: 700; }
.app-account__none { margin: 0; color: var(--app-text-secondary); font-size: 13px; }
.app-account__links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-weight: 600; }
.app-account__links a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.app-account__foot { display: flex; flex-direction: column; gap: 8px; margin-block-start: auto; }
.app-account__foot > .btn, .app-account__pair .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-weight: 600; }
.app-account__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.app-account__opening summary { color: var(--app-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
/* A single card (a shop without containers): the buttons sit side by side. */
.app-accounts--1 .app-account__foot { flex-direction: row; flex-wrap: wrap; }
.app-btn-cyan { background: var(--app-cyan); color: var(--app-on-color); border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.app-btn-cyan:hover, .app-btn-cyan:focus { background: var(--app-cyan); color: var(--app-on-color); filter: brightness(.95); }
.app-btn-violet { background: var(--app-violet-lt); color: var(--app-violet); border: 0; }
.app-btn-violet:hover { background: var(--app-violet-lt); color: var(--app-violet); filter: brightness(.97); }
.app-empties__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-empties__form .form-select { flex: 1 1 100%; }
.app-empties__form .btn { flex: 1; padding: 9px 12px; }
.app-empties__title { margin: 6px 0 4px; font-size: 17px; font-weight: 700; }
/* The theme styles every number field with !important (dashboard_theme.css); this one is the stepper's plain figure. */
.app-dashboard .app-stepper input { inline-size: 2.6rem; min-inline-size: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--app-text-primary) !important; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.app-stepper input::-webkit-inner-spin-button, .app-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.app-stepper button { block-size: 38px; }
.app-customer__sell { display: inline-flex; justify-content: center; gap: 6px; margin-block-end: 14px; padding: 11px; }
.app-customer__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block-end: 14px; }
.app-customer__panel { display: block; margin: 0; padding: 16px; }
.app-customer__panel .app-section-head { margin: 0 0 10px; align-items: center; }
.app-customer__panel-title { display: flex; align-items: center; gap: 10px; }
.app-customer__chips { margin-block-end: 6px; }
.app-customer__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-end: 12px; }
.app-customer__stats > div { padding: 8px 12px; border-radius: 12px; background: var(--app-surface-2); }
.app-customer__stats > div > span { display: block; color: var(--app-text-secondary); font-size: 11.5px; }
.app-customer__stats b { font-size: 16px; }
.app-addresses { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
.app-addresses__item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-block-start: 1px solid var(--app-list-line); }
.app-addresses__item:first-child { border-block-start: 0; }
.app-addresses__line { color: var(--app-text-secondary); font-size: 12.5px; }
.app-icon-btn--sm { inline-size: 32px; block-size: 32px; border-radius: 10px; font-size: 16px; color: var(--app-text-secondary); }
.app-month-bars { display: flex; align-items: flex-end; gap: 10px; block-size: 120px; }
.app-month-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; block-size: 100%; }
.app-month-bars i { display: block; inline-size: 100%; border-radius: 8px 8px 4px 4px; background: var(--app-blue-lt); }
.app-month-bars .is-current i { background: linear-gradient(180deg, var(--app-primary), var(--app-cyan)); }
.app-month-bars span[aria-hidden] { color: var(--app-text-secondary); font-size: 10.5px; }
.app-month-bars .is-current span[aria-hidden] { color: var(--app-text-primary); font-weight: 700; }
/* The row follows the page's direction, so in Urdu the newest month is on the left, as in the other charts (D-183). */
.app-timeline__item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.app-timeline__item::before { content: ""; position: absolute; inset-block: 42px -6px; inset-inline-start: 15.5px; inline-size: 1px; background: var(--app-list-line); }
.app-timeline__item:last-child::before { display: none; }
a.app-timeline__item:hover .app-timeline__title { color: var(--app-primary); }
.app-timeline__main { flex: 1; min-inline-size: 0; }
.app-timeline__title { display: block; font-size: 13.5px; font-weight: 600; }
.app-timeline__sub { display: block; color: var(--app-text-secondary); font-size: 12px; }
.app-timeline__end { flex: none; text-align: end; }
.app-timeline__end .app-pill { margin-block-start: 2px; }
.app-activity-page .app-timeline { padding: 6px 16px; }
@media (max-width: 991.98px) {
  .app-dashboard .app-customer-head { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .app-customer-head__top { position: relative; flex-direction: column; gap: 10px; padding: 0; text-align: center; }
  .app-customer-head__avatar { inline-size: 72px; block-size: 72px; font-size: 26px; }
  .app-customer-head__name { justify-content: center; font-size: 21px; }
  .app-customer-head__badges { justify-content: center; }
  .app-customer-head__contact { gap: 14px; }
  .app-customer-head__contact .app-icon { inline-size: 46px; block-size: 46px; font-size: 21px; }
  .app-customer-head__actions { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 0; border: 0; }
  .app-customer-head__actions .app-icon-btn { inline-size: 36px; block-size: 36px; font-size: 18px; }
  .app-customer-head__facts { grid-template-columns: 1fr 1fr; margin: 12px auto 0; max-inline-size: 300px; border: 0; border-radius: 14px; background: var(--app-card-bg); box-shadow: var(--app-shadow-card); text-align: start; }
  .app-customer-head__facts > div { padding: 8px 12px; }
  .app-customer-head__facts > div + div { border-inline-start: 0; }
  .app-customer-head__facts > div:nth-child(even) { border-inline-start: 1px solid var(--app-border); }
  .app-customer-head__facts > div:nth-child(n + 3) { border-block-start: 1px solid var(--app-border); }
  .app-accounts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .app-account { padding: 14px; }
  .app-account--money, .app-accounts > .app-account:last-child:nth-child(2) { grid-column: 1 / -1; }
  /* Half cards stay short: the bottles' lines are in the sheet, the deposit's buttons stack. */
  .app-account--bottles > .app-account__rows, .app-account--deposit > .app-account__rows { display: none; }
  .app-account--deposit .app-account__pair { grid-template-columns: minmax(0, 1fr); }
  .app-account--bottles .app-account__value, .app-account--deposit .app-account__value { font-size: 22px; }
  .app-account__value small { display: block; margin: 0; }
  .app-empties.offcanvas-lg { block-size: auto; max-block-size: 85vh; overflow-y: auto; gap: 12px; display: flex; flex-direction: column; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 26px 26px 0 0; background: var(--app-card-bg); color: var(--app-text-primary); }
  .app-empties .app-empties__form .btn { flex: 1 1 100%; padding: 12px; font-size: 15px; }
  .app-empties .app-stepper { margin-inline: auto; }
}
@media (min-width: 992px) {
  .app-accounts--2 { grid-template-columns: 1.15fr 1fr; }
  .app-accounts--3 { grid-template-columns: 1.15fr 1fr 1fr; }
  /* Activity and Buying stand the same height; the bars take what Buying has spare. */
  .app-customer__two { grid-template-columns: 1fr 1fr; align-items: stretch; }
  #customer-buying { display: flex; flex-direction: column; }
  #customer-buying .app-month-bars { flex: 1; min-block-size: 150px; block-size: auto; }
  .app-customer__two > :only-child { grid-column: 1 / -1; }
  /* Two per line with a line down the middle, as between the details. */
  .app-addresses { grid-template-columns: 1fr 1fr; column-gap: 49px; background: linear-gradient(var(--app-list-line), var(--app-list-line)) center / 1px 100% no-repeat; }
  .app-addresses__item:nth-child(2) { border-block-start: 0; }
  .app-month-bars { block-size: 150px; }
}

/* ---- The remaining lists (UI refresh U-9, D-195) ----------------------------------- */

/* Action tiles: Stock on hand's four jobs and the four Cash and bank moves. Two by two on
   a phone, one row on a wide screen. */
.app-act-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-end: 14px; }
@media (min-width: 992px) { .app-act-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-block-end: 18px; } }
.app-act { display: flex; align-items: center; gap: 10px; min-inline-size: 0; padding: 10px; border: 1.5px solid var(--app-list-line); border-radius: 14px;
  background: var(--app-card-bg); color: var(--app-text-primary); font-weight: 700; font-size: 13.5px; line-height: 1.25; text-align: start; }
.app-act:hover { border-color: var(--app-primary); color: var(--app-text-primary); }
.app-act .app-icon { flex: none; }
.app-act small { display: block; font-weight: 500; font-size: 12px; color: var(--app-text-secondary); }
.app-act--red { border-color: color-mix(in srgb, var(--app-red) 45%, transparent); background: var(--app-red-lt); color: var(--app-red); }
.app-act--red:hover { border-color: var(--app-red); color: var(--app-red); }
@media (min-width: 992px) { .app-act { padding: 12px; font-size: 14px; } }

/* A row running low on stock. */
.app-row.is-low, .app-list-table__row.is-low td { background: color-mix(in srgb, var(--app-amber-lt) 70%, transparent); }
.app-list-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-list-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-list-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-list-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-list-table tfoot td { padding: 12px 16px; border-block-start: 1px solid var(--app-list-line); font-weight: 700; }
.app-list-section { margin: 18px 4px 8px; font-size: 12px; font-weight: 700; color: var(--app-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
[lang="ur"] .app-list-section { font-size: 13px; text-transform: none; letter-spacing: 0; }
.app-amount--in { color: var(--app-green); }
.app-share { block-size: 6px; margin-block-start: 6px; border-radius: 999px; background: var(--app-gray-lt); overflow: hidden; }
.app-share > i { display: block; block-size: 100%; background: var(--app-violet); }

/* Who owes and We owe: the total, a bar coloured by age and the four age groups, which
   filter the list below. */
.app-aging { padding: 16px; margin-block-end: 14px; }
.app-aging__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--app-text-secondary); }
.app-aging__top b { font-size: 26px; color: var(--app-text-primary); white-space: nowrap; }
.app-aging__bar { display: flex; block-size: 8px; margin-block-start: 12px; border-radius: 999px; overflow: hidden; background: var(--app-gray-lt); }
.app-aging__bar > i { display: block; background: var(--dot); }
.app-aging__buckets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 12px; }
@media (min-width: 992px) { .app-aging__buckets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.app-aging__bucket { display: block; min-inline-size: 0; padding: 8px 10px; border: 1.5px solid var(--app-list-line); border-radius: 12px; background: var(--app-card-bg); }
.app-aging__bucket:hover { border-color: var(--app-primary); }
.app-aging__bucket.is-on { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .08); }
.app-aging__bucket > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-text-secondary); white-space: nowrap; }
.app-aging__bucket > span::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--dot); }
.app-aging__bucket b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-aging__bucket b.is-late { color: var(--dot); }
.app-aging__more { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--app-list-line);
  color: var(--app-text-secondary); }
.app-aging__more b { color: var(--app-text-primary); }
.app-age--current { --dot: var(--app-green); }
.app-age--days_31_60 { --dot: var(--app-amber); }
.app-age--days_61_90 { --dot: color-mix(in srgb, var(--app-red) 50%, var(--app-amber)); }
.app-age--over_90 { --dot: var(--app-red); }
.app-list-bar__count { color: var(--app-text-secondary); font-size: 13.5px; }

/* Work cards: Empties back (a − / + per container, one Save) and My deliveries. */
.app-work__line .app-stepper { background: var(--app-gray-lt); }
.app-work { display: grid; gap: 12px; }
@media (min-width: 992px) { .app-work { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.app-work__card { padding: 14px; }
.app-work__head { display: flex; align-items: center; gap: 10px; }
.app-work__head .app-avatar { inline-size: 44px; block-size: 44px; font-size: 15px; flex: none; }
.app-work__name { flex: 1; min-inline-size: 0; }
.app-work__name b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-work__name small { display: block; font-size: 12.5px; color: var(--app-text-secondary); }
.app-work__label { display: block; margin-block: 12px 4px; font-size: 12.5px; color: var(--app-text-secondary); }
.app-work__line { display: flex; align-items: center; gap: 10px; padding-block: 6px; }
.app-work__line + .app-work__line { border-block-start: 1px solid var(--app-list-line); }
.app-work__line > div { flex: 1; min-inline-size: 0; }
.app-work__line b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-work__line small { color: var(--app-text-secondary); font-size: 12.5px; }
.app-work__save { inline-size: 100%; margin-block-start: 12px; }
.app-work__address { display: flex; gap: 6px; margin-block-start: 10px; color: var(--app-text-secondary); font-size: 13.5px; }
.app-work__lines { margin-block-start: 8px; display: grid; gap: 4px; font-size: 14px; }
.app-work__lines span[dir] { display: inline-block; min-inline-size: 26px; font-weight: 700; }
.app-work__facts { display: grid; gap: 4px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--app-list-line); font-size: 13.5px; }
.app-work__facts > div { display: flex; justify-content: space-between; gap: 10px; }
.app-work__buttons { display: flex; gap: 8px; margin-block-start: 12px; }
.app-work__buttons > * { flex: 1; }
.app-work__buttons form { display: flex; }
.app-work__buttons form .btn { flex: 1; }
.app-done-list summary { padding: 14px 16px; font-weight: 700; cursor: pointer; }
.d-contents { display: contents; }
.app-chip--date { position: relative; }
.app-chip--date input { position: absolute; inset: 0; inline-size: 100%; opacity: 0; cursor: pointer; }
.app-work__bottle { color: var(--app-violet); }
.app-category__actions { display: inline-flex; gap: 6px; flex: none; }
.app-category__actions .btn-sm { padding: 5px 8px; }
.app-category { flex-wrap: wrap; row-gap: 4px; }
.app-category__links { display: flex; align-items: center; gap: 16px; inline-size: 100%; padding-inline-start: 56px; font-size: 13px; font-weight: 600; }
.app-category__links .btn-link { font-size: 13px; font-weight: 600; text-decoration: none; }
.app-category__links form { margin: 0; } .app-category__links .btn-link { line-height: inherit; border: 0; min-height: 0; }

/* Customer picker (D-196): a search box with its matches under it, then the chosen customer. */
.app-pick__results:not(:empty) { display: block; margin-block-start: 8px; }
.app-pick__label { margin-block-end: 6px; color: var(--app-text-secondary); font-size: 13px; }
.app-pick__chosen { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card-bg); }
.app-pick__chosen[hidden] { display: none; }
.app-pick__chosen > .ti { color: var(--app-nav-link-active-fg); font-size: 20px; }
.app-pick__who { flex: 1; min-width: 0; }
.app-pick .app-row--button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---- Day summary, U-11 (D-200, D-203, D-214, D-215) ----------------------------------
   One column on a phone in the agreed order (drawer, tiles, Worth a look, people, then the
   rest), reached by jump chips; on a wide screen the drawer and tiles sit beside Worth a
   look, people and accounts run across, and the rest fill three columns. The column
   wrappers dissolve on a phone so each card takes its place by `order`. */
.app-ds-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 12px; }
.app-ds-head .page-title { font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: 6px; margin: 0; }
.app-ds-head__actions { margin-inline-start: auto; gap: 8px; }
.app-ds-controls { display: flex; flex-direction: column; gap: 10px; margin-block-end: 14px; }
.app-ds-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 12px; background: var(--app-gray-lt); }
.app-ds-seg a { padding: 7px 4px; border-radius: 9px; text-align: center; font-size: 13px; font-weight: 600; color: var(--app-text-secondary); text-decoration: none; }
.app-ds-seg a:hover { color: var(--app-text-primary); }
.app-ds-seg a.is-on { background: var(--app-card-bg); color: var(--app-text-primary); box-shadow: var(--app-shadow-panel); }
.app-ds-nav { display: flex; align-items: center; gap: 8px; }
.app-ds-nav__step { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 18px; text-decoration: none; }
.app-ds-nav__step.is-off { opacity: .4; pointer-events: none; }
[dir="rtl"] .app-ds-nav__step .ti { transform: scaleX(-1); }
.app-ds-nav__when { position: relative; flex: 1; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; border: 1px solid var(--app-border); border-radius: 13px; background: var(--app-card-bg); }
.app-ds-nav__when b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.app-ds-nav__when b .ti { color: var(--app-text-muted); }
.app-ds-nav__when small { display: flex; align-items: center; gap: 6px; color: var(--app-text-secondary); font-size: 12px; }
.app-ds-nav__when small .ti { color: var(--app-green); }
.app-ds-nav__pick { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; }
.app-ds-nav__today { flex: none; }
.app-ds-jump { display: flex; gap: 8px; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem 2px; scrollbar-width: none; }
.app-ds-jump::-webkit-scrollbar { display: none; }
.app-ds-jump .app-chip, .app-ds-jump .app-chip:hover { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--app-text-primary); text-decoration: none; }
.app-ds-jump .app-chip .ti { color: var(--app-text-secondary); }

.app-ds { display: flex; flex-direction: column; gap: 14px; }
.app-ds__col, .app-ds__wide, .app-ds__cols { display: contents; }
.app-ds-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; scroll-margin-top: 80px; }
.app-ds-card__head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.app-ds-card__head small { display: block; color: var(--app-text-secondary); font-weight: 500; font-size: 12.5px; }
.app-ds-card__head > a { margin-inline-start: auto; flex: none; font-size: 13px; font-weight: 600; text-decoration: none; }
.app-ds-card__note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--app-surface-2); color: var(--app-text-secondary); font-size: 12.5px; }

/* The drawer on the gradient (D-207, D-209, D-210). */
.app-ds-hero { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: var(--app-hero); color: var(--app-on-hero); scroll-margin-top: 80px; }
.app-ds-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-ds-hero__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: .9; }
.app-ds-hero__amount { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.app-ds-hero__close { background: var(--app-card-bg); color: var(--app-primary); border: 0; font-weight: 700; }
.app-ds-hero__close:hover { background: var(--app-card-bg); color: var(--app-primary-dark); }
.app-ds-hero__closed { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--app-on-hero-soft); font-weight: 600; }
.app-ds-hero__closed > .ti { font-size: 20px; }
.app-ds-hero__closed small { display: block; font-size: 12.5px; font-weight: 500; opacity: .9; }
.app-ds-hero__closed a { color: var(--app-on-hero); text-decoration: underline; }
.app-ds-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app-ds-hero__chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--app-on-hero-soft); font-size: 12.5px; font-weight: 600; }
.app-ds-hero__chips > span.is-warn { background: var(--app-amber-lt); color: var(--app-amber); }
.app-ds-hero__flow summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; opacity: .9; }
.app-ds-hero__flow summary::-webkit-details-marker { display: none; }
.app-ds-hero__flow[open] summary .ti { transform: rotate(180deg); }
.app-ds-flow { margin-block-start: 10px; padding: 4px 12px; border-radius: 12px; background: var(--app-on-hero-soft); }
.app-ds-flow > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.app-ds-flow > div + div { border-block-start: 1px solid var(--app-on-hero-soft); }
.app-ds-flow > div > span:first-child { opacity: .92; }
.app-ds-flow > div.is-sum { font-weight: 800; }
.app-ds-flow > div.is-sum > span:first-child { opacity: 1; }

/* Four tiles (D-214's fair comparison under each). */
.app-ds-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-ds-tile { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; padding: 14px; }
.app-ds-tile__label { display: flex; align-items: center; gap: 6px; color: var(--app-text-secondary); font-size: 12.5px; font-weight: 600; }
.app-ds-tile__label .ti { font-size: 16px; }
.app-ds-tile__label .is-blue { color: var(--app-primary); } .app-ds-tile__label .is-cyan { color: var(--app-cyan); }
.app-ds-tile__label .is-green { color: var(--app-green); } .app-ds-tile__label .is-amber { color: var(--app-amber); }
.app-ds-tile__value { font-size: 21px; font-weight: 800; line-height: 1.15; }
.app-ds-tile__sub { color: var(--app-text-secondary); font-size: 12px; }
.app-ds-tile__change { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--app-text-secondary); }
.app-ds-tile__change .app-today-change { padding: 1px 7px; }
.app-ds-tile svg { inline-size: 100%; block-size: 26px; color: var(--app-primary); }

/* Worth a look: count, what, detail. */
.app-ds-att { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--app-surface-2); color: var(--app-text-primary); text-decoration: none; }
.app-ds-att + .app-ds-att { margin-block-start: 6px; }
.app-ds-att:hover { color: var(--app-text-primary); box-shadow: 0 0 0 1px var(--app-border); }
.app-ds-att__count { min-inline-size: 28px; font-size: 16px; font-weight: 800; text-align: center; }
.app-ds-att[data-tone="red"] .app-ds-att__count { color: var(--app-red); }
.app-ds-att[data-tone="amber"] .app-ds-att__count { color: var(--app-amber); }
.app-ds-att[data-tone="blue"] .app-ds-att__count { color: var(--app-primary); }
.app-ds-att__main { flex: 1; min-inline-size: 0; }
.app-ds-att__main b { display: block; font-weight: 600; }
.app-ds-att__main small { display: block; color: var(--app-text-secondary); font-size: 12.5px; }
.app-ds-att > .ti { color: var(--app-text-muted); }
[dir="rtl"] .app-ds-att > .ti { transform: scaleX(-1); }

/* Riders and staff (D-208): cards, riders first with the motorbike badge. */
.app-ds-people { display: flex; flex-direction: column; gap: 10px; }
.app-ds-group { display: flex; align-items: center; gap: 6px; color: var(--app-text-secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
[dir="rtl"] .app-ds-group { letter-spacing: 0; }
.app-ds-group span { margin-inline-start: auto; color: var(--app-text-primary); font-size: 13px; text-transform: none; letter-spacing: 0; }
.app-ds-person { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--app-border); border-radius: 14px; }
.app-ds-person.is-rider { border-inline-start: 3px solid var(--app-amber); }
.app-ds-person__top { display: flex; align-items: center; gap: 10px; }
.app-ds-person__top > div { flex: 1; min-inline-size: 0; }
.app-ds-person__top b { display: block; }
.app-ds-person__top small { display: block; color: var(--app-text-secondary); font-size: 12.5px; }
.app-ds-person__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.app-ds-person__nums > div { padding: 8px; border-radius: 10px; background: var(--app-surface-2); min-inline-size: 0; }
.app-ds-person__nums small { display: block; color: var(--app-text-secondary); font-size: 11.5px; font-weight: 600; }
.app-ds-person__nums b { font-size: 14px; }
.app-ds-person__hand { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-block-start: 8px; border-block-start: 1px dashed var(--app-border); font-weight: 700; }
.app-ds-person__state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.app-ds-person__state small { color: var(--app-text-secondary); }
.app-ds-bar { block-size: 8px; border-radius: 99px; background: var(--app-gray-lt); overflow: hidden; }
.app-ds-bar i { display: block; block-size: 100%; border-radius: 99px; background: var(--app-primary); }
.app-ds-bar.is-done i { background: var(--app-green); }
.app-ds-bar.is-cyan i { background: var(--app-cyan); }

/* Lists inside the cards: money per account, products, paid out, owing, refills. */
.app-ds-list { display: flex; flex-direction: column; }
.app-ds-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--app-text-primary); text-decoration: none; }
.app-ds-row + .app-ds-row { border-block-start: 1px solid var(--app-border); }
a.app-ds-row:hover { color: var(--app-primary); }
.app-ds-row__main { flex: 1; min-inline-size: 0; }
.app-ds-row__main b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.app-ds-row__main small { display: block; color: var(--app-text-secondary); font-size: 12.5px; }
.app-ds-row__main .app-ds-bar { margin-block-start: 6px; }
.app-ds-row__end { flex: none; text-align: end; font-weight: 700; }
.app-ds-row__end.is-out { color: var(--app-owed); }
.app-ds-mini { display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; border: 1px solid var(--app-border); border-radius: 11px; background: var(--app-card-bg); color: var(--app-text-primary); font-size: 18px; text-decoration: none; }
.app-ds-mini.is-wa { color: var(--app-whatsapp); }
.app-ds-split { display: flex; block-size: 10px; gap: 2px; border-radius: 99px; overflow: hidden; }
.app-ds-split i { display: block; block-size: 100%; }
.app-ds-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--app-text-secondary); font-size: 12.5px; }
.app-ds-legend span { display: inline-flex; align-items: center; gap: 6px; }
.app-ds-legend i { display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 3px; }
.app-ds-type--delivery { background: var(--app-primary); }
.app-ds-type--walk_in { background: var(--app-cyan); }
.app-ds-type--wholesale { background: var(--app-violet); }
.app-ds-type--contractor { background: var(--app-amber); }
.app-ds-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-ds-boxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-ds-boxes > div { padding: 10px; border-radius: 12px; background: var(--app-surface-2); min-inline-size: 0; }
.app-ds-boxes small { display: block; color: var(--app-text-secondary); font-size: 12px; }
.app-ds-boxes b { display: block; font-size: 17px; }

/* The phone's pinned actions: WhatsApp, Print, and Close the day. */
.app-ds-bar-actions { position: sticky; inset-block-end: calc(var(--app-tabbar-height, 3.75rem) + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 8px; margin: 14px -1rem -1rem; padding: 10px 1rem; background: color-mix(in srgb, var(--app-content-bg) 92%, transparent); border-block-start: 1px solid var(--app-list-line); }
.app-ds-bar-actions .btn { flex: 1; justify-content: center; }
.app-ds-bar-actions .btn-icon { flex: none; }

@media (max-width: 991.98px) {
  #day-drawer, #day-period { order: 1; }
  #day-tiles { order: 2; }
  #day-warnings { order: 3; }
  #day-people { order: 4; }
  #day-refills { order: 5; }
  #day-accounts { order: 6; }
  #day-products { order: 7; }
  #day-chart { order: 8; }
  #day-udhaar { order: 9; }
  #day-customers { order: 10; }
  #day-bottles { order: 11; }
  #day-paid-out { order: 12; }
}
@media (min-width: 992px) {
  .app-ds-controls { flex-direction: row; align-items: center; }
  .app-ds-seg { min-inline-size: 260px; }
  .app-ds-nav__when { flex: none; min-inline-size: 240px; }
  .app-ds { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
  .app-ds__col { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
  .app-ds__wide { display: flex; flex-direction: column; gap: 14px; grid-column: 1 / -1; }
  .app-ds__cols { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .app-ds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-ds-people__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
}
@media (max-width: 991.98px) {
  .app-ds-people__grid { display: flex; flex-direction: column; gap: 10px; }
}
@media (max-width: 380px) {
  .app-ds-hero__amount { font-size: 30px; }
}