/* ───────────────────────────── حاسبي · owner surfaces (dashboard, approvals, reports, settings) */

:root {
  /* Chart tokens, validated for the dark surface (#141130) with the dataviz palette checker:
     payment identity — all-pairs CVD ΔE ≥ 9.2, normal ≥ 20.9, ≥ 3:1 contrast. */
  --pay-cash: #19aa8e;
  --pay-card: #3783f0;
  --pay-cliq: #bb459b;
  --pay-other: #9e9ab8;
  --series-1: #8b5cf6;
  --series-1-em: #a78bfa;
  --series-ctx: #6f69a0;
  --viz-surface: #141130;
  --viz-grid: rgba(167, 139, 250, 0.1);
  --viz-axis: rgba(167, 139, 250, 0.26);
  --tabbar-h: 70px;
}

/* ── frame */

.owner-screen {
  gap: 16px;
}

.owner-screen.has-tabbar {
  padding-bottom: calc(var(--tabbar-h) + 34px + var(--safe-bottom));
}

.owner-screen .topbar .brand-text {
  min-width: 0;
}

.owner-screen .topbar .brand-name {
  font-size: 17.5px;
}

.page-title {
  margin: 0;
  font: 600 20px/1.3 var(--font-display);
}

.me-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.grow {
  flex: 1;
  min-width: 0;
}

.strong {
  font-weight: 600;
}

.link {
  color: var(--violet-300);
  font: 500 13.5px/1 var(--font-display);
  text-decoration: none;
}

.small-note {
  margin: 4px 0 0;
  font-size: 14px;
}

.empty.small {
  padding: 22px 12px;
  font-size: 14px;
}

.empty.small p {
  margin: 0;
  max-width: 30ch;
}

/* ── the glass tab bar */

.tabbar {
  position: fixed;
  z-index: 20;
  inset-inline: 12px;
  bottom: calc(10px + var(--safe-bottom));
  max-width: 536px;
  margin: 0 auto;
  height: var(--tabbar-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 6px;
  border-radius: 26px;
  view-transition-name: tabbar;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface-raised-2));
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow:
    0 18px 50px -16px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(var(--fg-rgb), 0.03) inset,
    0 -12px 40px -24px rgba(139, 92, 246, 0.45);
}

.tabbar-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 10%, rgba(196, 181, 253, 0.55) 50%, transparent 90%) top / 100% 1px no-repeat;
  opacity: 0.7;
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 58px;
  border-radius: 18px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.tab-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 30px;
  border-radius: 12px;
  transition: all 0.35s var(--ease-out);
}

.tab-label {
  font: 500 11.5px/1 var(--font-display);
}

.tab.on {
  color: #fff;
}

.tab.on .tab-ico {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.55), rgba(79, 70, 229, 0.55));
  box-shadow: 0 0 20px -4px rgba(139, 92, 246, 0.85), inset 0 1px 0 rgba(var(--fg-rgb), 0.2);
}

.tab:active .tab-ico {
  transform: scale(0.92);
}

.tab-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: none;
  place-items: center;
  border-radius: 10px;
  font: 600 11px/1 var(--font-display);
  color: #fff;
  background: linear-gradient(135deg, #f472b6, #a855f7);
  box-shadow: 0 0 0 2px var(--ring-bg), 0 0 14px rgba(236, 72, 153, 0.7);
  animation: badge-pop 0.5s var(--ease-spring) both;
}

.tab-badge.on {
  display: grid;
}

@keyframes badge-pop {
  from {
    transform: scale(0.3);
  }
}

::view-transition-group(tabbar) {
  animation: none;
}

/* ── chip rows (stations, periods, tabs) */

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter);
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip.seg {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
}

.chip-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-size: 11.5px;
  background: rgba(236, 72, 153, 0.25);
  color: var(--pink-ink);
}

/* ── dashboard */

.dash {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.3s var(--ease-out);
}

.dash.refetching > :not(.chip-row) {
  opacity: 0.6;
}

.dash-skel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
  border-radius: var(--r-xl);
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(168, 85, 247, 0.35), transparent 65%),
    radial-gradient(360px 220px at 0% 100%, rgba(37, 99, 235, 0.3), transparent 60%);
}

.hero-orbit {
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  inset-inline-start: -90px;
  top: -120px;
  border-radius: 50%;
  background: conic-gradient(from var(--angle), transparent 0 70%, rgba(103, 232, 249, 0.5) 82%, transparent 92%);
  -webkit-mask: radial-gradient(closest-side, transparent 96%, #000 97%, #000 99%, transparent);
  mask: radial-gradient(closest-side, transparent 96%, #000 97%, #000 99%, transparent);
  animation: spin-angle 9s linear infinite;
  opacity: 0.7;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.hero-label {
  font: 500 14.5px/1.3 var(--font-display);
  color: var(--text-1);
}

.hero-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 12px;
}

.hero-figure {
  font: 600 52px/1.05 var(--font-display);
  font-variant-numeric: proportional-nums;
  font-feature-settings: 'pnum' 1, 'lnum' 1;
  letter-spacing: -0.5px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(139, 92, 246, 0.45));
}

.hero-cur {
  font: 500 17px/1 var(--font-display);
  color: var(--text-2);
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font: 500 12.5px/1.2 var(--font-display);
  color: var(--text-2);
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid var(--line);
}

.delta.up {
  color: var(--ok-ink);
  background: var(--ok-soft);
  border-color: rgba(52, 211, 153, 0.3);
}

.delta.down {
  color: var(--bad-ink);
  background: var(--bad-soft);
  border-color: rgba(251, 113, 133, 0.3);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}

.hero-stat .ico {
  color: var(--violet-300);
}

.hero-stat strong {
  font: 600 16px/1 var(--font-display);
  font-variant-numeric: proportional-nums;
}

/* KPI tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 13px 12px;
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
}

.tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12.5px;
}

.tile-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.16);
}

.tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-value {
  font: 600 18px/1.1 var(--font-display);
  font-variant-numeric: proportional-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-sub {
  min-height: 15px;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile.attn {
  border-color: rgba(244, 114, 182, 0.45);
  box-shadow: 0 0 26px -10px rgba(236, 72, 153, 0.7), var(--shadow-card);
}

.tile.attn .tile-ico {
  color: var(--pink-ink);
  background: rgba(236, 72, 153, 0.22);
}

/* approvals banner */

.approve-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: var(--r);
  color: #fff;
  text-decoration: none;
  font: 500 15px/1.3 var(--font-display);
  border: 1px solid transparent;
  background:
    linear-gradient(110deg, rgba(76, 29, 149, 0.92), rgba(30, 27, 75, 0.92)) padding-box,
    linear-gradient(110deg, #f472b6, #a855f7 45%, #60a5fa) border-box;
  box-shadow: 0 10px 34px -14px rgba(168, 85, 247, 0.9);
}

.approve-banner-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.12);
  animation: pulse-soft 2.4s ease-in-out infinite;
}

@keyframes pulse-soft {
  50% {
    box-shadow: 0 0 0 7px rgba(244, 114, 182, 0.12);
  }
}

/* cards */

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.card-title {
  margin: 0 0 10px;
  font: 600 15.5px/1.3 var(--font-display);
}

.card-head .card-title {
  margin: 0;
}

.view-toggle {
  min-height: 32px;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  color: var(--cyan-400);
  background: var(--cyan-400);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* ── charts */

.viz {
  position: relative;
}

.chart-host {
  min-height: 170px;
}

.viz-columns {
  width: 100%;
  border-radius: 12px;
  outline-offset: 4px;
  touch-action: pan-y;
  cursor: crosshair;
}

.viz-svg {
  display: block;
  overflow: visible;
}

.viz-grid {
  stroke: var(--viz-grid);
  stroke-width: 1;
}

.viz-axis {
  stroke: var(--viz-axis);
  stroke-width: 1;
}

.viz-tick {
  fill: var(--text-3);
  font: 500 10.5px var(--font-display);
  font-variant-numeric: tabular-nums;
}

.viz-bars .viz-bar {
  fill: var(--series-1);
  transition: fill 0.2s;
}

.viz-bars .viz-bar.em {
  fill: var(--series-1-em);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.75));
}

.viz-bars .viz-bar.hot {
  fill: var(--violet-ink);
}

.viz-bars.grow .viz-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bar-grow 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}

@keyframes bar-grow {
  from {
    transform: scaleY(0);
  }
}

.viz-line {
  fill: none;
  stroke: var(--series-ctx);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.viz-dot {
  fill: var(--series-ctx);
  stroke: var(--viz-surface);
  stroke-width: 2;
}

.viz-cross {
  stroke: rgba(196, 181, 253, 0.55);
  stroke-width: 1;
}

.viz-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.viz-legend.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--text-2);
}

.viz-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viz-stack-wrap .viz-legend li {
  display: grid;
  grid-template-columns: auto 1fr auto 42px;
  font-size: 14px;
}

.viz-legend li.zero {
  opacity: 0.5;
}

.viz-legend-label {
  color: var(--text-1);
}

.viz-legend strong {
  font: 600 14.5px/1 var(--font-display);
}

.viz-legend-pct {
  color: var(--text-3);
  font-size: 12.5px;
  text-align: end;
}

.viz-key {
  flex: none;
  display: inline-block;
}

.viz-key.rect {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--c, var(--series-1));
}

.viz-key.line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--c, var(--series-ctx));
}

.series-1 {
  --c: var(--series-1);
}
.series-ctx {
  --c: var(--series-ctx);
}
.pay-cash {
  --c: var(--pay-cash);
}
.pay-card {
  --c: var(--pay-card);
}
.pay-cliq {
  --c: var(--pay-cliq);
}
.pay-other,
.pay-account,
.pay-subscription,
.pay-split {
  --c: var(--pay-other);
}

.viz-stack {
  display: flex;
  gap: 2px;
  height: 14px;
}

.viz-seg {
  flex: var(--g) 1 0px;
  min-width: 4px;
  background: var(--c);
  transition: filter 0.2s;
  animation: seg-in 0.8s var(--ease-out) both;
  transform-origin: right center;
}

.viz-seg:last-child {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}

.viz-seg:hover,
.viz-seg:focus-visible {
  filter: brightness(1.25);
  outline: none;
}

.viz-seg.empty {
  background: rgba(var(--fg-rgb), 0.06);
}

@keyframes seg-in {
  from {
    transform: scaleX(0);
  }
}

.viz-hbars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viz-hrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.viz-hmain {
  flex: 1;
  min-width: 0;
}

.viz-hhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.viz-hlabel {
  font: 500 14.5px/1.3 var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viz-hvalue {
  flex: none;
  font: 600 13.5px/1 var(--font-display);
  color: var(--text-1);
}

.viz-htrack {
  height: 8px;
}

.viz-hbar {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--series-1);
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  animation: seg-in 0.9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.viz-hsub {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-3);
}

.avatar.xs {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.viz-tip {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0));
  background: var(--tip-bg);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 0 24px -10px rgba(139, 92, 246, 0.6);
  opacity: 0;
  transition: opacity 0.15s;
}

.viz-tip.on {
  opacity: 1;
}

.viz-tip-title {
  margin-bottom: 6px;
  font: 500 12px/1.2 var(--font-display);
  color: var(--text-2);
}

.viz-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}

.viz-tip-row + .viz-tip-row {
  margin-top: 5px;
}

.viz-tip-row strong {
  font: 600 14px/1.1 var(--font-display);
  color: var(--text-0);
}

.viz-table-wrap {
  overflow-x: auto;
}

.viz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.viz-table th {
  padding: 8px 6px;
  text-align: start;
  font: 500 12px/1.2 var(--font-display);
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
}

.viz-table th:not(:first-child) {
  text-align: right;
}

.viz-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.07);
}

.viz-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── live feed */

.feed-card .list {
  margin: 0 -8px;
}

.sale-row {
  gap: 12px;
  padding: 11px 8px;
  border-radius: 14px;
}

.sale-row .title {
  display: block;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-row .sub {
  display: block;
  font-size: 12.5px;
}

.car-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font: 600 14px/1 var(--font-display);
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

/* A feed row's picture (ADR 0034: the car for a wash, the drop for oil, the bag for goods), the day's number on it. */
.feed-badge {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
}

.feed-art {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid var(--line);
}

.feed-badge .car-no {
  position: absolute;
  bottom: -5px;
  inset-inline-end: -7px;
  width: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  background: var(--surface-raised);
  border-color: var(--line-2);
}

.drawers-empty {
  padding: 14px 8px 6px;
  gap: 6px;
}

.drawers-empty .small-note {
  margin: 0;
}

.sale-amt {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1 var(--font-display);
}

.pay-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent);
}

.sale-row.voided {
  opacity: 0.5;
}

.sale-row.voided .sale-amt .num {
  text-decoration: line-through;
}

.sale-row.fresh {
  animation: fresh-in 2.6s var(--ease-out) both;
}

@keyframes fresh-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
    background: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.7), 0 0 34px -4px rgba(139, 92, 246, 0.9);
  }
  18% {
    opacity: 1;
    transform: none;
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ── drawers and alerts */

.drawers {
  display: flex;
  flex-direction: column;
}

.drawer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.drawer-row:last-child {
  border-bottom: 0;
}

.drawer-row .title {
  display: block;
  font: 500 15px/1.3 var(--font-display);
}

.drawer-row .sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-2);
}

.drawer-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--cyan-300);
  background: rgba(34, 211, 238, 0.12);
}

.drawer-ico.ok {
  color: var(--ok);
  background: var(--ok-soft);
}

.drawer-ico.warn {
  color: var(--warn);
  background: var(--warn-soft);
}

.drawer-ico.bad {
  color: var(--bad);
  background: var(--bad-soft);
}

.drawer-amt {
  flex: none;
  text-align: end;
}

.drawer-amt .num {
  display: block;
  font-size: 15px;
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: rgba(var(--fg-rgb), 0.03);
  border: 1px solid var(--line);
}

.alert-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.sev-high .alert-ico {
  color: var(--bad);
  background: var(--bad-soft);
}

.sev-medium .alert-ico {
  color: var(--warn);
  background: var(--warn-soft);
}

.sev-low .alert-ico {
  color: var(--cyan-300);
  background: rgba(34, 211, 238, 0.12);
}

.sev-high {
  border-color: rgba(251, 113, 133, 0.3);
}

.alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font: 500 14.5px/1.3 var(--font-display);
}

.sev-label {
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--text-2);
  background: rgba(var(--fg-rgb), 0.06);
}

.sev-high .sev-label {
  color: var(--bad-ink-2);
  background: var(--bad-soft);
}

.sev-medium .sev-label {
  color: var(--warn-ink-2);
  background: var(--warn-soft);
}

.alert-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-1);
}

.alert-time {
  flex: none;
  font-size: 12px;
  color: var(--text-3);
}

/* ── forms in sheets and settings */

.form-sheet {
  gap: 14px;
}

.field .opt {
  color: var(--text-3);
  font-weight: 400;
}

.field-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

.input.textarea {
  min-height: 96px;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
  font: 400 16px/1.6 var(--font-body);
}

.input.select {
  appearance: none;
  padding-inline-end: 44px;
  font-size: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239d97c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 16px center / 18px,
    var(--field-bg);
}

.input.select option {
  background: var(--ring-bg);
  color: var(--text-0);
}

.input[type='date'] {
  font-size: 16px;
}

.money-input {
  position: relative;
}

.money-input .input {
  padding-inline-end: 64px;
  font-size: 22px;
  font-weight: 600;
}

/* The figure is typed left-to-right, so its unit sits after it on the right, over the
   input's end padding, in either language. */
.money-cur {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font: 500 15px/1 var(--font-display);
  pointer-events: none;
}

.seg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The picture a service or an item wears on the counter. */
.icon-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}

.icon-pick {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 13px;
  color: var(--text-2);
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid var(--line);
  transition: all 0.2s var(--ease-out);
}

.icon-pick.active {
  color: #fff;
  border-color: rgba(196, 181, 253, 0.6);
  background: rgba(139, 92, 246, 0.26);
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, 0.8);
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.switch-label {
  font: 500 15px/1.35 var(--font-display);
}

.switch {
  position: relative;
  flex: none;
  width: 54px;
  height: 32px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), 0.07);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.switch i {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #cdc7ef;
  transition: transform 0.3s var(--ease-spring), background 0.25s;
}

.switch.on {
  border-color: rgba(196, 181, 253, 0.6);
  background: linear-gradient(135deg, #a855f7, #4f46e5);
  box-shadow: 0 0 18px -4px rgba(139, 92, 246, 0.9);
}

.switch.on i {
  background: #fff;
  transform: translateX(-22px);
}

[dir='ltr'] .switch.on i {
  transform: translateX(22px);
}

/* ── approvals inbox */

.proposal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.proposal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.proposal.kind-owner_drawing {
  border-color: rgba(244, 114, 182, 0.28);
}

.proposal.flash {
  animation: card-flash 1.2s var(--ease-out);
}

@keyframes card-flash {
  0% {
    box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.8), 0 0 40px -6px rgba(139, 92, 246, 0.9);
  }
}

.p-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-kind-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--violet-200);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(79, 70, 229, 0.22));
  border: 1px solid rgba(196, 181, 253, 0.25);
}

.kind-owner_drawing .p-kind-ico {
  color: var(--pink-ink);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.28), rgba(168, 85, 247, 0.2));
}

.kind-note .p-kind-ico {
  color: var(--cyan-300);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(79, 70, 229, 0.22));
}

.p-kind {
  font: 600 15.5px/1.3 var(--font-display);
}

.p-meta {
  font-size: 12.5px;
  color: var(--text-2);
}

.pill.src-brain {
  color: var(--violet-200);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(139, 92, 246, 0.14);
}

.p-amount {
  font: 600 30px/1.1 var(--font-display);
  font-variant-numeric: proportional-nums;
  align-self: flex-start;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-effect {
  margin: 0;
  font: 500 16.5px/1.6 var(--font-display);
  color: var(--text-0);
}

.p-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-display);
  color: var(--violet-300);
}

.p-understood {
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.16);
}

.p-understood p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-1);
}

.p-assume ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.p-assume li {
  padding: 6px 11px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-1);
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px dashed rgba(167, 139, 250, 0.3);
}

.pill.edited {
  align-self: flex-start;
  min-height: 26px;
  font-size: 12px;
  color: var(--warn-ink-2);
  border-color: rgba(251, 191, 36, 0.35);
  background: var(--warn-soft);
}

.p-problem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--bad-ink-2);
  background: var(--bad-soft);
}

.p-entry {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--inset-bg);
}

.p-entry summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  font: 500 14px/1 var(--font-display);
  color: var(--text-1);
}

.p-entry summary::-webkit-details-marker {
  display: none;
}

.p-entry summary .chev {
  margin-inline-start: auto;
  transition: transform 0.3s var(--ease-out);
}

.p-entry[open] summary .chev {
  transform: rotate(-90deg);
}

.entry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.entry-table th {
  padding: 6px 12px;
  text-align: start;
  font: 500 12px/1.2 var(--font-display);
  color: var(--text-3);
  border-top: 1px solid var(--line);
}

.entry-table td {
  padding: 8px 12px;
  border-top: 1px solid rgba(167, 139, 250, 0.07);
}

.entry-table td.num,
.entry-table th:not(:first-child) {
  text-align: right;
  width: 28%;
}

.entry-table tfoot td {
  font-weight: 600;
  border-top: 1px solid var(--line-2);
}

.acc-code {
  display: inline-block;
  font-size: 11.5px;
  color: var(--text-3);
}

/* The code is an LTR isolate, so the gap sits on the name (logical start in RTL). */
.acc-code + span {
  margin-inline-start: 8px;
}

.p-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 8px;
}

.p-actions .btn {
  min-height: 50px;
}

.p-actions .reject {
  color: var(--bad-ink);
  padding-inline: 16px;
}

.p-decided {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13px;
}
/* M21: the way back, at the far end of the decided line; the reason it is shut, under it. */
.p-decided .p-undo {
  margin-inline-start: auto;
}
.p-decided .p-undo-no {
  flex-basis: 100%;
}

.p-note {
  flex-basis: 100%;
  color: var(--text-2);
  font-size: 13.5px;
}

.proposal.leaving-ok,
.proposal.leaving-bad {
  animation: card-leave 0.7s var(--ease-in-out) forwards;
  pointer-events: none;
}

.proposal.leaving-ok {
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.7), 0 0 40px -6px rgba(52, 211, 153, 0.7);
}

@keyframes card-leave {
  0% {
    max-height: var(--h);
  }
  40% {
    opacity: 1;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(0.94);
    max-height: 0;
    padding-block: 0;
    margin-block: -7px;
  }
}

.approvals-empty {
  padding: 44px 24px;
  border-radius: var(--r-lg);
}

.empty-orb {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: var(--ok);
  background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.05) 70%);
  box-shadow: 0 0 40px -8px rgba(52, 211, 153, 0.5);
}

/* The approvals' filters (ADR 0051): compact pickers on one line under the tabs (the top bar's own line on the
   computer), wrapping on a narrow phone; a picker that filters is lit. */
.ap-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
}

.ap-filters .input.select.ap-filter {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding-inline: 12px 34px;
  border-radius: 12px;
  font-size: 14px;
  background-position: left 10px center;
  background-size: 16px;
}

.ap-filters .input.select.ap-filter.on {
  border-color: var(--violet-400);
  color: var(--text-0);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.ap-filters .ap-filter[hidden],
.ap-filters .ap-filter-clear[hidden] {
  display: none;
}

.ap-filter-clear {
  --btn-h: 38px;
  gap: 6px;
}

.ap-bar .ap-filters {
  margin: 0;
}

.approvals-empty.filtered .empty-orb {
  color: var(--violet-ink);
  background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.05) 70%);
  box-shadow: 0 0 40px -8px rgba(139, 92, 246, 0.5);
}

.approvals-empty .ap-empty-title {
  margin: 14px 0 4px;
  font: 600 16px/1.4 var(--font-display);
  color: var(--text-0);
}

.approvals-empty .ap-empty-where {
  margin: 0 0 14px;
  font-size: 13.5px;
}

/* ── reports */

.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.range-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13.5px/1.2 var(--font-display);
  color: var(--text-2);
}

.range-label .ico {
  color: var(--violet-300);
}

.report-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.3s var(--ease-out);
}

.report-body.refetching {
  opacity: 0.55;
}

.tiles.two {
  grid-template-columns: repeat(2, 1fr);
}

.tiles.two .tile-value {
  font-size: 21px;
}

.tile.pos .tile-value {
  color: var(--ok-ink);
}

.tile.neg .tile-value {
  color: var(--bad-ink);
}

.tile.pos .tile-ico {
  color: var(--ok-ink);
  background: var(--ok-soft);
}

.tile.neg .tile-ico {
  color: var(--bad-ink);
  background: var(--bad-soft);
}

.tiles.two .tile-sub {
  white-space: normal;
  line-height: 1.4;
}

.svc-icon.mini {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.table-scroll {
  overflow-x: auto;
  margin-inline: -4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 8px 6px;
  text-align: start;
  font: 500 12px/1.2 var(--font-display);
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table th:not(:first-child),
.data-table td.num {
  text-align: right;
}

.data-table td {
  padding: 10px 6px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.07);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.avatar.xxs {
  width: 24px;
  height: 24px;
  font-size: 10.5px;
  border-width: 1px;
}

.shift-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  font-size: 14px;
}

.shift-summary.bad {
  color: var(--bad-ink-2);
  background: var(--bad-soft);
}

.shift-summary.ok {
  color: var(--ok-ink-2);
  background: var(--ok-soft);
}

.closes {
  display: flex;
  flex-direction: column;
}

.close-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.close-row:last-child {
  border-bottom: 0;
}

.close-row .title {
  display: block;
  font: 500 14.5px/1.3 var(--font-display);
}

.close-row .sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-2);
}

.close-row .pill {
  min-height: 28px;
  font-size: 12.5px;
}

.variance-link {
  align-self: flex-start;
  margin-top: 10px;
}

/* ── more */

.more-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.more-list .choice {
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}

.more-list .choice .choice-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.more-list .choice .choice-title {
  font-size: 16px;
}

.more-list .choice .choice-sub {
  font-size: 13px;
}

.more-list .chev {
  color: var(--text-3);
}

.profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
}

.avatar.lg {
  width: 58px;
  height: 58px;
  font-size: 20px;
}

.profile-name {
  font: 600 19px/1.3 var(--font-display);
}

.profile-sub {
  font-size: 13.5px;
  color: var(--text-2);
}

.push-row .switch.is-busy {
  opacity: 0.6;
}

.push-row .btn-sm {
  min-height: 36px;
  font-size: 13px;
}

.count-pill {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font: 600 12.5px/1 var(--font-display);
  color: var(--bad-ink-2);
  background: var(--bad-soft);
  border: 1px solid rgba(251, 113, 133, 0.35);
}

.logout {
  margin-top: 8px;
  color: var(--text-2);
}

/* ── alerts screen */

.alert-list.big {
  gap: 12px;
}

.alert-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r);
  overflow: hidden;
}

.alert-card.sev-high {
  border-color: rgba(251, 113, 133, 0.35);
  box-shadow: 0 0 30px -14px rgba(251, 113, 133, 0.7), var(--shadow-card);
}

.alert-card.acked {
  opacity: 0.75;
}

.alert-row.flat {
  padding: 0;
  border: 0;
  background: none;
}

.alert-meta {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}

.alert-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
}

.alert-foot.muted {
  justify-content: flex-start;
}

.alert-card.leaving-ok {
  animation: card-leave 0.65s var(--ease-in-out) forwards;
}

/* ── brain memory */

.notes-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-lg);
}

.notes-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-1);
}

.intro-orb {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--violet-ink), #7c3aed 55%, #312e81);
  box-shadow: 0 0 30px -4px rgba(139, 92, 246, 0.9);
  animation: orb-breathe 4s ease-in-out infinite;
}

@keyframes orb-breathe {
  50% {
    box-shadow: 0 0 44px 2px rgba(139, 92, 246, 0.75);
    transform: scale(1.04);
  }
}

.note-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: var(--r);
}

.note-card.pinned {
  border-color: rgba(196, 181, 253, 0.45);
  box-shadow: 0 0 30px -14px rgba(139, 92, 246, 0.9), var(--shadow-card);
}

.note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-subject {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  font: 500 12.5px/1 var(--font-display);
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.14);
}

.note-subject.s-worker {
  color: var(--cyan-300);
  background: rgba(34, 211, 238, 0.12);
}

.note-subject.s-service {
  color: var(--pink-ink);
  background: rgba(236, 72, 153, 0.14);
}

.pin-mark {
  color: var(--violet-300);
}

.note-text {
  margin: 0;
  font: 500 15.5px/1.7 var(--font-display);
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--text-3);
}

.note-meta .src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-2);
}

.conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.conf-bar {
  position: relative;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.08);
  overflow: hidden;
}

.conf-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: 2px;
  background: var(--series-1);
}

.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-inline: -8px;
}

.note-actions .btn-sm {
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-2);
}

.danger-text {
  color: var(--bad-ink) !important;
}

.empty-orb.brain {
  color: var(--violet-200);
  background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.05) 70%);
  box-shadow: 0 0 40px -8px rgba(139, 92, 246, 0.6);
}

/* ── settings */

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.set-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.set-group {
  margin: 10px 4px 0;
  font: 500 13px/1.2 var(--font-display);
  color: var(--text-3);
}

/* ADR 0053: a section's heading on «الخدمات والأسعار» is a button that opens the section's sheet. */
.set-group.sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 4px 4px 2px;
  background: none;
  border: 0;
  color: var(--text-2);
  text-align: start;
  cursor: pointer;
}
.set-group.sec-head.off {
  opacity: 0.6;
}
.sec-art {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: hsl(var(--cat, 234 85% 70%) / 0.12);
}
.sec-name {
  font: 600 14px/1.25 var(--font-display);
  color: var(--text-1);
}
.sec-count {
  font-size: 12px;
  color: var(--text-3);
}
.sec-head .chev {
  flex: none;
  color: var(--text-3);
}

/* The station's pictures a section of the company's own may wear. */
.pic-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
.pic-pick {
  display: grid;
  place-items: center;
  height: 56px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid var(--line);
  transition: all 0.2s var(--ease-out);
}
.pic-pick.active {
  border-color: rgba(196, 181, 253, 0.6);
  background: rgba(139, 92, 246, 0.2);
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, 0.8);
}
html[data-theme='light'] .pic-pick.active {
  background: rgba(124, 58, 237, 0.12);
}

.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r);
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), border-color 0.2s;
}

.set-row:active {
  transform: scale(0.985);
}

.set-row.off {
  opacity: 0.55;
}

.set-row .chev {
  flex: none;
  color: var(--text-3);
}

.set-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.15);
}

.set-title {
  display: block;
  font: 500 15.5px/1.35 var(--font-display);
}

.set-title .you {
  color: var(--text-3);
  font-size: 13px;
}

.set-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-2);
}

.set-price {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font: 600 15px/1 var(--font-display);
}

.set-per {
  font: 500 11.5px/1 var(--font-display);
  color: var(--text-2);
}

.price-chip {
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 11.5px;
  background: rgba(34, 211, 238, 0.1);
  color: var(--cyan-300);
}

.add-row {
  min-height: 52px;
  border-style: dashed;
  color: var(--violet-200);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.swatch {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--fg-rgb), 0.15);
  background: var(--c);
  box-shadow: 0 0 16px -6px var(--c);
  transition: transform 0.2s var(--ease-spring);
}

.swatch.on {
  border-color: var(--text-0);
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(var(--fg-rgb), 0.1), 0 0 22px -4px var(--c);
}

.pill.role-owner {
  color: var(--pink-ink-2);
  border-color: rgba(232, 121, 249, 0.35);
  background: rgba(232, 121, 249, 0.12);
}

.pill.role-manager {
  color: var(--violet-200);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(139, 92, 246, 0.14);
}

.pill.role-accountant {
  color: var(--blue-300);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.12);
}

.row-actions .btn-sm {
  min-height: 40px;
  font-size: 13.5px;
}

/* ── E-invoicing settings: a status hero that glows when live, counts, credentials, problems ── */
.einv-hero {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px;
  overflow: hidden;
}
.einv-hero::after {
  content: '';
  position: absolute;
  inset: -45% -25% auto auto;
  width: 75%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.32), transparent 65%);
  pointer-events: none;
}
.einv-hero.on::after {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.26), transparent 65%);
}
.einv-status {
  display: flex;
  align-items: center;
  gap: 14px;
}
.einv-orb {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: var(--text-1);
  background: var(--grad-brand-soft);
  box-shadow: var(--glow-violet);
}
.einv-hero.on .einv-orb {
  color: #03140d;
  background: linear-gradient(135deg, #34d399, #22d3ee);
  animation: einv-pulse 2.8s ease-in-out infinite;
}
.einv-state {
  font: 600 17px/1.3 var(--font-display);
}
.einv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.einv-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.einv-count {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.04);
}
.einv-count strong {
  font: 600 20px/1.1 var(--font-display);
}
.einv-count span {
  font-size: 12px;
  color: var(--text-2);
}
.einv-count.c-cleared strong {
  color: var(--ok);
}
.einv-count.c-pending strong {
  color: var(--blue-300);
}
.einv-count.c-rejected strong,
.einv-count.c-failed strong {
  color: var(--bad);
}
.einv-cred-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.04);
}
.einv-test-result {
  min-height: 1.4em;
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  color: var(--text-2);
}
.einv-test-result.ok {
  color: var(--ok);
}
.einv-test-result.bad {
  color: var(--bad);
}
.einv-verify {
  margin: 10px 0 0;
}
.einv-problem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.einv-problem-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}
.einv-problem-why {
  margin-top: 2px;
  font-size: 13px;
  color: var(--bad);
}
.einv-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 12px var(--bad);
}
.einv-dot.s-failed {
  background: var(--warn);
  box-shadow: 0 0 12px var(--warn);
}
.switch[disabled],
.chip[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
@keyframes einv-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.5), 0 10px 36px -8px rgba(52, 211, 153, 0.75);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.75), 0 10px 46px -4px rgba(52, 211, 153, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .einv-hero.on .einv-orb {
    animation: none;
  }
}

/* ───────────────────────────── branch comparison (M7) */

:root {
  /* Station identity: the dataviz reference order stepped for dark, validated with the palette checker
     against the chart surface #141130 — six slots: adjacent CVD ΔE ≥ 8.4, normal-vision ΔE ≥ 19.3, every
     colour ≥ 3.6:1; the first three also all-pairs (CVD ≥ 9.4, normal ≥ 20.9). A seventh station and
     beyond fold into the neutral "other". A station keeps its colour; its rank never changes it. */
  --st-1: #3987e5;
  --st-2: #d95926;
  --st-3: #199e70;
  --st-4: #c98500;
  --st-5: #d55181;
  --st-6: #008300;
  --st-other: #9e9ab8;
}

.st-1 {
  --c: var(--st-1);
}
.st-2 {
  --c: var(--st-2);
}
.st-3 {
  --c: var(--st-3);
}
.st-4 {
  --c: var(--st-4);
}
.st-5 {
  --c: var(--st-5);
}
.st-6 {
  --c: var(--st-6);
}
.st-other {
  --c: var(--st-other);
}

.viz-hbar.keyed {
  background: var(--c);
}

/* lines(): one 2px line per series, drawn in on first render */

.viz-series .viz-line {
  stroke: var(--c);
}

.viz-series .viz-dot {
  fill: var(--c);
}

.viz-series.draw .viz-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-draw 1.1s var(--ease-out) forwards;
  animation-delay: calc(var(--k, 0) * 140ms);
}

.viz-series.draw .viz-dot {
  animation: dot-in 0.35s var(--ease-out) 0.9s both;
}

@keyframes line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dot-in {
  from {
    opacity: 0;
  }
}

/* hgroups(): categories × series */

.viz-hgroups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viz-hgroup {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.viz-hgroup > .viz-hlabel {
  margin-bottom: 2px;
  font-size: 13.5px;
}

.viz-hgrow {
  display: grid;
  grid-template-columns: 1fr 78px;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  outline-offset: 3px;
}

.viz-hgrow .viz-htrack {
  height: 7px;
}

.viz-hgrow .viz-hbar {
  background: var(--c);
  animation-delay: calc(var(--i, 0) * 40ms);
}

.viz-hgrow .viz-hvalue {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  text-align: end;
}

.viz-hgrow:hover .viz-hbar,
.viz-hgrow:focus-visible .viz-hbar {
  filter: brightness(1.25);
}

.viz-hgrow:focus-visible {
  outline: 2px solid var(--violet-300);
}

/* the screen */

.range-label.vs {
  color: var(--text-3);
  font-size: 12.5px;
}

.range-label.vs .ico {
  color: var(--text-3);
}

.cmp-entry .choice-icon {
  color: var(--blue-ink);
  background: linear-gradient(135deg, rgba(57, 135, 229, 0.25), rgba(139, 92, 246, 0.25));
}

.cmp-hl-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-hl {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.035);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

.cmp-hl-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.16);
}

.cmp-hl.good .cmp-hl-ico {
  color: var(--ok-ink);
  background: var(--ok-soft);
}

.cmp-hl.bad .cmp-hl-ico {
  color: var(--bad-ink);
  background: var(--bad-soft);
}

.cmp-hl.warn .cmp-hl-ico {
  color: var(--warn-ink);
  background: var(--warn-soft);
}

.cmp-hl-keys {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.cmp-hl-text {
  color: var(--text-1);
}

.cmp-body > .btn {
  align-self: center;
}

/* a card per station */

.cmp-stations {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}

.cmp-stations.scroll {
  grid-auto-columns: minmax(172px, 46%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: -16px;
  padding: 2px 16px 8px;
  scrollbar-width: none;
}

.cmp-stations.scroll::-webkit-scrollbar {
  display: none;
}

.cmp-stations.scroll > * {
  scroll-snap-align: start;
}

.cmp-st {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 13px 13px;
  border-radius: var(--r);
  overflow: hidden;
}

.cmp-st-edge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--c) 55%, transparent);
}

.cmp-st.lead {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 34px -12px rgba(139, 92, 246, 0.85), var(--shadow-card);
}

.cmp-st-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.cmp-st-name {
  min-width: 0;
  font: 600 15px/1.3 var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-rank {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--warn-ink-2);
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.cmp-st-label {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-2);
}

.cmp-st-value {
  font: 700 23px/1.15 var(--font-display);
  font-variant-numeric: proportional-nums;
  background: linear-gradient(90deg, var(--violet-ink), var(--blue-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-st-value.neg {
  background: none;
  color: var(--bad-ink);
}

.cmp-st .delta {
  align-self: flex-start;
  min-height: 24px;
  padding: 0 9px;
  font-size: 11.5px;
}

.cmp-st-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.cmp-st-facts div {
  min-width: 0;
}

.cmp-st-facts dt {
  font-size: 11.5px;
  color: var(--text-3);
}

.cmp-st-facts dd {
  margin: 2px 0 0;
  font: 600 13.5px/1.2 var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* who leads in what */

.cmp-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 720px) {
  .cmp-board {
    grid-template-columns: 1fr 1fr;
  }
}

.cmp-measure-title {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-2);
}

.cmp-measure .viz-hbars {
  gap: 9px;
}

.cmp-measure .viz-hhead {
  margin-bottom: 5px;
}

.cmp-measure .viz-hlabel {
  font-size: 13.5px;
}

.cmp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.cmp-note .ico {
  flex: none;
  margin-top: 1px;
  color: var(--text-3);
}

.cmp-table th[scope='row'] {
  padding: 10px 6px;
  font: 500 12.5px/1.3 var(--font-display);
  color: var(--text-2);
  border-bottom: 1px solid rgba(167, 139, 250, 0.07);
}

.cmp-table .pill {
  min-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.cmp-table .who {
  gap: 6px;
}

.viz-series .viz-line.partial {
  stroke-dasharray: 3 4;
  opacity: 0.7;
}

.viz-series.draw .viz-line.partial {
  animation: dot-in 0.35s var(--ease-out) 0.9s both;
}

.cmp-table th {
  white-space: normal;
}

.cmp-table th[scope='row'] {
  min-width: 86px;
}

.cmp-table td {
  padding-inline: 5px;
}

.cmp-table td.txt {
  font-size: 13px;
  line-height: 1.35;
}

/* ───────────────────────────── payroll (M8) */

.payroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.3s var(--ease-out);
}

.payroll.refetching {
  opacity: 0.55;
}

.pay-month {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pay-month-name {
  flex: 1;
  text-align: center;
  font: 600 17px/1.2 var(--font-display);
}

.pay-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 26px;
  overflow: hidden;
}

.pay-hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.35), transparent);
  pointer-events: none;
  animation: pay-orb 9s ease-in-out infinite alternate;
}

.pay-hero.st-paid::before {
  background: radial-gradient(closest-side, rgba(52, 211, 153, 0.28), transparent);
}

@keyframes pay-orb {
  to {
    transform: translate(-18%, 22%) scale(1.15);
  }
}

.pay-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pay-hero-label {
  font: 500 14px/1.2 var(--font-display);
  color: var(--text-2);
}

.pay-status {
  min-height: 28px;
  font-size: 12.5px;
}

.pay-status.draft,
.pay-status.none {
  color: var(--violet-200);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(139, 92, 246, 0.14);
}

.pay-status.pending {
  color: var(--warn-ink);
  border-color: rgba(251, 191, 36, 0.35);
  background: var(--warn-soft);
}

.pay-status.approved {
  color: var(--blue-ink);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.14);
}

.pay-status.paid {
  color: var(--ok-ink);
  border-color: rgba(52, 211, 153, 0.35);
  background: var(--ok-soft);
}

.pay-net-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pay-net {
  font: 700 40px/1.05 var(--font-display);
  font-variant-numeric: proportional-nums;
  background: linear-gradient(90deg, var(--violet-ink-2), var(--blue-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pay-cur {
  font: 500 16px/1 var(--font-display);
  color: var(--text-2);
}

.pay-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--text-2);
}

.pay-hero-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pay-hero-stats .ico {
  color: var(--violet-300);
}

.pay-hero-stats strong {
  font: 600 14px/1 var(--font-display);
  color: var(--text-1);
}

.pay-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.pay-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.07);
  overflow: hidden;
}

.pay-progress-bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #60a5fa);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.5);
  animation: seg-in 1s var(--ease-out) both;
  transform-origin: right center;
}

.pay-progress-text {
  font-size: 12.5px;
  color: var(--text-2);
}

.pay-running {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pay-actions .btn-primary {
  flex: 1 1 100%;
}

.pay-actions .btn-glass,
.pay-actions .btn-ghost {
  flex: 1 1 0;
}

.pay-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--warn-ink);
  background: var(--warn-soft);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.pay-alert .ico {
  flex: none;
  margin-top: 2px;
}

.pay-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Name and pay on the first row; the chips and warnings under the name, as wide as the card allows. */
.pay-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  width: 100%;
  padding: 13px;
  border-radius: 18px;
  text-align: start;
  color: inherit;
  animation: enter 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition:
    transform 0.2s var(--ease-spring),
    border-color 0.2s;
}

.pay-person:active {
  transform: scale(0.985);
}

.pay-person.paid {
  border-color: rgba(52, 211, 153, 0.3);
}

.pay-who {
  min-width: 0;
}

.pay-person > .pay-chips,
.pay-person > .pay-warn {
  grid-column: 2 / -1;
}

.pay-chips:empty {
  display: none;
}

.pay-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 15px/1.3 var(--font-display);
}

.pay-name .ico {
  color: var(--text-3);
}

.pay-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-3);
}

.pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.pay-chip {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-2);
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid var(--line);
}

.pay-chip.plus {
  color: var(--ok-ink-2);
  border-color: rgba(52, 211, 153, 0.25);
}

.pay-chip.minus {
  color: var(--bad-ink);
  border-color: rgba(251, 113, 133, 0.25);
}

.pay-warn {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

.pay-warn.below_min_wage {
  color: var(--warn-ink);
}

.pay-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

.pay-amount {
  font: 700 17px/1.1 var(--font-display);
}

.pill.xs {
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
  gap: 4px;
}

.pay-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pay-sheet-head .sheet-title {
  margin: 0;
}

.pay-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 16px;
}

.pay-breakdown .kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.07);
}

.pay-breakdown .kv.total {
  border: 0;
  font: 700 16px/1.2 var(--font-display);
}

.pay-note {
  margin: 4px 0 0;
  font-size: 13px;
}

/* A person's pay history (ADR 0038): newest first; a change in an approved month is locked, a stop is dimmed. */
.pay-hist .set-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.pay-hist-row.off .set-title {
  color: var(--text-3);
}

.pay-hist-row[aria-disabled='true'] {
  cursor: default;
}

.pay-hist-row[aria-disabled='true']:active {
  transform: none;
}

.pay-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
}

.pay-due strong {
  font: 700 20px/1 var(--font-display);
}

.adv-list {
  display: flex;
  flex-direction: column;
}

.adv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  text-align: start;
  color: inherit;
  border-bottom: 1px solid rgba(167, 139, 250, 0.07);
}

.adv-row:last-child {
  border-bottom: 0;
}

.adv-row.voided {
  opacity: 0.5;
}

.adv-row.voided .adv-amount {
  text-decoration: line-through;
}

.adv-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--orange-ink-2);
  background: rgba(251, 146, 60, 0.14);
}

.adv-name {
  display: block;
  font: 500 14px/1.3 var(--font-display);
}

.adv-sub {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}

.adv-amount {
  font: 600 14px/1 var(--font-display);
}

.adv-people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adv-person {
  gap: 7px;
}

.set-list .warn-ico {
  color: var(--warn-ink);
}

/* The payslip: in a sheet on screen, alone on paper. */

.payslip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  color: #1c1733;
  background: #fbfaff;
}

.payslip header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cfc8ea;
}

.ps-company {
  font: 700 16px/1.2 var(--font-display);
}

.ps-title {
  font-size: 13px;
  color: #5b5280;
}

.ps-period {
  font-size: 12px;
  color: #6f6795;
}

.ps-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #5b5280;
}

.ps-who strong {
  font: 700 17px/1.2 var(--font-display);
  color: #1c1733;
}

.payslip table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.payslip th {
  padding: 6px 0;
  font-weight: 500;
  text-align: start;
  color: #4a4270;
}

/* Amounts in one narrow column at the end, aligned on the decimals. */
.payslip td {
  width: 1%;
  padding: 6px 0;
  padding-inline-start: 16px;
  text-align: right;
  white-space: nowrap;
}

.payslip tr.total th,
.payslip tr.total td {
  padding-top: 10px;
  font: 700 16px/1.2 var(--font-display);
  color: #1c1733;
  border-top: 1px solid #cfc8ea;
}

.payslip .ps-group th,
.payslip .ps-group td {
  padding-block: 3px;
  font-size: 12.5px;
  color: #4a4270;
}

.payslip .ps-group tr:first-child th {
  padding-top: 14px;
  font-weight: 600;
  color: #1c1733;
}

.ps-note {
  margin: 0;
  font-size: 12.5px;
  color: #5b5280;
}

.print-only {
  display: none;
}

@media print {
  body.printing > :not(.print-only) {
    display: none !important;
  }
  body.printing .print-only {
    display: block;
  }
  body.printing .payslip {
    border-radius: 0;
    box-shadow: none;
  }
}

/* In the approvals inbox: who gets what. */

.p-pay-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.p-pay-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.p-open {
  align-self: flex-start;
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .pay-hero::before {
    animation: none;
  }
}

/* ── M9: stock, suppliers and purchase orders ─────────────────────────────── */

.stock,
.suppliers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.small-print {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.pill.info {
  color: var(--blue-300);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.12);
}

.stock-stations {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.stock-stations .chip {
  flex: none;
  min-height: 40px;
}

/* The value and how the items stand. */
.stock-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stock-hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 65%);
  pointer-events: none;
}

.stock-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stock-hero-label {
  font: 500 14px/1.2 var(--font-display);
  color: var(--text-2);
}

.stock-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stock-value {
  font: 700 clamp(34px, 11vw, 46px) / 1 var(--font-display);
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stock-mix {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--fg-rgb), 0.05);
}

.mix-seg {
  width: var(--w);
  min-width: 6px;
  border-radius: 999px;
  transform-origin: right center;
  animation: grow-x 0.9s var(--ease-out) both;
}

.mix-seg.out {
  background: linear-gradient(90deg, #f43f5e, var(--bad));
}

.mix-seg.low {
  background: linear-gradient(90deg, #f59e0b, var(--warn));
}

.mix-seg.ok {
  background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
}

.mix-seg.idle {
  background: rgba(157, 151, 199, 0.35);
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}

.stock-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--text-1);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-item.out .ico {
  color: var(--bad);
}

.legend-item.low .ico {
  color: var(--warn);
}

.legend-item.ok .ico {
  color: var(--cyan-300);
}

/* The head of the stock (the owner's word of 20 October): the camera and «مادة جديدة» side by side, the search by name
   under them, its answers under the box. */
.stock-find {
  display: grid;
  gap: 10px;
  align-content: start;
}

.stock-find .find-row,
.stock-find .goods-search {
  margin-bottom: 0;
}

.stock-find .new-tile {
  border-color: rgba(167, 139, 250, 0.38);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
    linear-gradient(160deg, var(--surface-raised), var(--surface-raised-2));
}

.stock-find .new-tile .scan-tile-icon {
  color: var(--violet-ink);
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 22px -6px rgba(139, 92, 246, 0.9);
}

.stock-hits {
  display: grid;
  gap: 6px;
}

.stock-hits:empty {
  display: none;
}

.stock-hits .btn {
  justify-self: start;
}

.stock-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r);
  color: var(--text-0);
  text-align: start;
}

.stock-hit .si-ico {
  flex: none;
  width: 36px;
  height: 36px;
}

.stock-hit .grow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stock-hit .hit-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.stock-hits-note {
  margin: 0;
  padding: 2px 4px;
}

/* An item's opening at each station, with «صحّح» while nothing else moved it (ابو جادو, 2026-10-20). */
.item-openings {
  display: grid;
  gap: 8px;
}

.opening-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Actions: a row of glass tiles. */
.stock-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
}

.stock-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: var(--r);
  color: var(--text-0);
  font: 500 13px/1.2 var(--font-display);
  text-align: center;
  transition:
    transform 0.2s var(--ease-spring),
    border-color 0.2s;
}

.stock-action:active {
  transform: scale(0.96);
}

.sa-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--violet-200);
  background: var(--grad-brand-soft);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 24px -8px rgba(139, 92, 246, 0.8);
}

/* What needs ordering. */
.need-card {
  border-color: rgba(251, 191, 36, 0.28);
}

.need-card .warn-ico {
  color: var(--warn);
}

.need-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--line);
}

.need-group:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.need-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.need-sup {
  font: 600 14.5px/1.3 var(--font-display);
}

.need-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  font-size: 14px;
}

.need-qty {
  color: var(--cyan-300);
  font-weight: 600;
}

.dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
}

.dot.out {
  background: var(--bad);
  box-shadow: 0 0 10px var(--bad);
}

.dot.low {
  background: var(--warn);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
}

.dot.ok {
  background: var(--cyan-400);
}

/* One row per item, with a gauge of days left against the order window — kept small, a long list folds by kind (the
   owner's notes of 2026-10-22: the list was long and its cards big). */
.stock-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stock-items[hidden] {
  display: none;
}

.kind-fold {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.kind-fold .card-title {
  white-space: nowrap;
}

.kind-count {
  font-size: 12.5px;
  white-space: nowrap;
}

.fold-chev {
  flex: none;
  color: var(--text-3);
  transition: transform 0.2s var(--ease-out);
}

/* Folded: the chevron points along the line (the start of an RTL line is on the right). */
.stock-kind.folded .fold-chev {
  transform: rotate(90deg);
}

html[dir='ltr'] .stock-kind.folded .fold-chev {
  transform: rotate(-90deg);
}

.stock-kind.folded > .card-head {
  margin-bottom: 0;
}

.stock-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 11px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 15px;
  text-align: start;
  color: inherit;
  animation: enter 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition:
    transform 0.2s var(--ease-spring),
    border-color 0.2s;
}

.stock-item:active {
  transform: scale(0.985);
}

.stock-item.st-out {
  border-color: rgba(251, 113, 133, 0.35);
}

.stock-item.st-low {
  border-color: rgba(251, 191, 36, 0.3);
}

.si-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.14);
}

.si-ico.k-oil {
  color: var(--warn-ink-2);
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.28);
}

.si-ico.k-accessory {
  color: var(--cyan-300);
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.26);
}

.si-ico.k-part {
  color: var(--blue-ink-2);
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(147, 197, 253, 0.3);
}

/* ADR 0043: an item's picture in place of its icon in the stock list, and large on its sheet. */
.si-ico.has-pic {
  width: 38px;
  height: 38px;
  background: rgba(var(--fg-rgb), 0.04);
}

.si-ico.has-pic > .ico {
  display: none;
}

.si-ico > img.pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.item-photo {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 10px 0 2px;
  padding: 0;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), 0.04);
  overflow: hidden;
  cursor: zoom-in;
}

.item-photo[hidden] {
  display: none;
}

.item-photo img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.si-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.si-name {
  font: 600 14px/1.3 var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
}

.si-sub:empty {
  display: none;
}

.gauge {
  position: relative;
  height: 5px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
}

.gauge-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w);
  border-radius: 999px;
  transform-origin: right center;
  animation: grow-x 1s var(--ease-out) both;
}

.gauge-fill.ok {
  background: linear-gradient(270deg, var(--violet-500), var(--blue-500) 55%, var(--cyan-400));
  box-shadow: 0 0 12px -2px rgba(34, 211, 238, 0.6);
}

.gauge-fill.low {
  background: linear-gradient(270deg, #f59e0b, var(--warn));
  box-shadow: 0 0 12px -2px rgba(251, 191, 36, 0.65);
}

.gauge-fill.out {
  background: var(--bad);
}

.gauge-fill.idle {
  background: rgba(157, 151, 199, 0.4);
}

/* The day to order by: the order's lead time plus the margin. */
.gauge-tick {
  position: absolute;
  inset-block: -3px;
  inset-inline-start: var(--x);
  width: 2px;
  border-radius: 2px;
  background: var(--text-2);
  opacity: 0.7;
}

.si-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.si-qty {
  font: 700 15px/1.1 var(--font-display);
  white-space: nowrap;
}

/* An item's value: a column of the computer's stock table (css/desktop.css, ADR 0044), not on the phone's card. */
.si-value {
  display: none;
}

.si-days {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-2);
}

.si-days.out {
  color: var(--bad-ink);
}

.si-days.low {
  color: var(--warn-ink);
}

.si-days.ok {
  color: var(--cyan-300);
}

.pill.si-days {
  min-height: 26px;
  padding: 0 10px;
}

.pill.si-days.out {
  border-color: rgba(251, 113, 133, 0.35);
  background: var(--bad-soft);
}

.pill.si-days.low {
  border-color: rgba(251, 191, 36, 0.35);
  background: var(--warn-soft);
}

/* Materials per service. */
.svc-costs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.svc-cost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-align: start;
}

.svc-cost:last-child {
  border-bottom: 0;
}

.svc-cost.none {
  opacity: 0.6;
}

.svc-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14.5px/1.3 var(--font-display);
}

.svc-name .ico {
  color: var(--violet-300);
}

.svc-fig {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}

.svc-fig strong {
  color: var(--text-0);
  font-size: 14px;
}

.svc-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  overflow: hidden;
}

.svc-bar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(270deg, var(--violet-500), var(--blue-400));
  transform-origin: right center;
  animation: grow-x 1s var(--ease-out) both;
}

/* One item. */
.item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-head .sheet-title {
  margin: 0;
}

.item-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 2px;
}

.item-big .num {
  font: 700 40px/1 var(--font-display);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.item-facts,
.po-lines {
  display: flex;
  flex-direction: column;
  padding: 6px 14px;
  border-radius: 16px;
}

.item-facts .kv,
.po-lines .kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.item-facts .kv:last-child,
.po-lines .kv:last-child {
  border-bottom: 0;
}

.kv-v {
  text-align: end;
}

.po-lines .kv.total {
  font: 700 15.5px/1.3 var(--font-display);
}

.item-levels,
.item-used,
.item-history,
.sup-statement,
.sup-invoices,
.sup-orders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lv-row,
.mv-row,
.st-row,
.inv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}

.inv-row,
.st-row.st-pay {
  width: 100%;
  color: inherit;
  text-align: start;
}

/* ADR 0032: the invoice a statement line names, after its kind. */
.st-ref {
  font-size: 12.5px;
}

.inv-row.voided {
  opacity: 0.5;
  text-decoration: line-through;
}

.mv-date {
  flex: none;
  min-width: 52px;
  font-size: 12.5px;
}

.mv-qty {
  font-weight: 600;
}

.mv-qty.in,
.owed-down {
  color: var(--ok-ink);
}

.mv-qty.out,
.owed-up {
  color: var(--bad-ink);
}

.st-bal {
  min-width: 70px;
  text-align: end;
  font-size: 12.5px;
}

.chip.static {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  cursor: default;
}

/* A count: one row per item. */
.count-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow-y: auto;
}

.count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 128px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.count-name {
  font: 600 14.5px/1.3 var(--font-display);
}

.count-diff {
  font-size: 13px;
  font-weight: 600;
}

.count-diff.in {
  color: var(--ok-ink);
}

.count-diff.out {
  color: var(--bad-ink);
}

.qty-input .input,
.count-row .input {
  min-height: 46px;
}

.qty-input .input {
  padding-inline: 12px 46px;
  font-size: 18px;
}

.qty-input .money-cur {
  right: 12px;
  font-size: 13px;
}

/* Order and invoice lines being typed. */
.po-lines-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.po-lines-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.po-line-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px auto;
  align-items: center;
  gap: 8px;
}

.po-line-edit.with-total {
  grid-template-columns: minmax(0, 1fr) 100px auto;
  grid-template-areas: 'item qty x' 'total total total';
}

.po-line-edit.with-total > .select {
  grid-area: item;
}

.po-line-edit.with-total > .qty-input {
  grid-area: qty;
}

.po-line-edit.with-total > .money-input:not(.qty-input) {
  grid-area: total;
}

.po-line-edit.with-total > button {
  grid-area: x;
}

.po-line-edit .input {
  min-height: 48px;
}

.add-line {
  align-self: flex-start;
}

/* M11: add a line or scan them in; a camera button wears the scanner's cyan. */
.line-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.line-scan {
  color: var(--cyan-300);
  border-color: rgba(103, 232, 249, 0.35);
}
.line-scan .ico {
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
}

/* An item's barcodes: chips with print and remove. */
.codes-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r);
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.06), rgba(99, 102, 241, 0.05));
}
.code-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.code-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, 0.35);
  background: rgba(34, 211, 238, 0.08);
  color: var(--text-0);
  font-size: 14px;
  animation: disc-in 0.3s var(--ease-spring) both;
}
.code-chip > .ico {
  color: var(--cyan-300);
}
.code-chip.pending {
  padding-inline-end: 12px;
  border-style: dashed;
  color: var(--text-2);
}
.code-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--text-2);
}
.code-btn:hover,
.code-btn:focus-visible {
  color: var(--text-0);
  background: rgba(var(--fg-rgb), 0.08);
}

/* The item sheet's quick actions (count it, goods received). */
.item-quick {
  margin: 4px 0 2px;
}

/* A barcode label: white like paper on screen, alone on the page when printed. */
.label-preview {
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: var(--r);
  background: radial-gradient(90% 90% at 50% 0%, rgba(139, 92, 246, 0.25), transparent 70%);
}
.label-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(280px, 100%);
  padding: 12px 14px 10px;
  border-radius: 10px;
  background: #fff;
  color: #000;
  box-shadow: 0 16px 40px -14px rgba(139, 92, 246, 0.8);
}
.label-name {
  max-width: 100%;
  font: 600 15px/1.25 var(--font-display);
  text-align: center;
  overflow-wrap: anywhere;
}
.label-price {
  font: 600 16px/1 var(--font-display);
}
.barcode-svg {
  display: block;
  width: 100%;
  height: auto;
}
.label-print {
  display: none;
}
@media print {
  body.printing-label > *:not(.label-print) {
    display: none !important;
  }
  body.printing-label {
    background: #fff;
  }
  body.printing-label .label-print {
    display: block;
  }
  body.printing-label .label-card {
    width: 50mm;
    padding: 2mm;
    box-shadow: none;
  }
}

.inv-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid var(--line-2);
  font: 500 14px/1.2 var(--font-display);
}

.inv-sum {
  font: 700 18px/1 var(--font-display);
}

/* One order. */
.po-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.po-head .sheet-title {
  margin: 0;
}

.po-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--cyan-300);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.28);
}

.po-ico.sm {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.po-status.open {
  color: var(--violet-200);
  border-color: var(--line-2);
  background: rgba(139, 92, 246, 0.14);
}

.po-status.sent {
  color: var(--blue-300);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.12);
}

.po-status.received {
  color: var(--ok-ink);
  border-color: rgba(52, 211, 153, 0.35);
  background: var(--ok-soft);
}

.po-status.cancelled {
  color: var(--text-3);
}

.po-rows,
.sup-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.po-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-align: start;
}

.po-row:last-child {
  border-bottom: 0;
}

.po-row .grow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.po-row-title {
  font: 600 14.5px/1.3 var(--font-display);
}

.po-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-weight: 600;
}

/* Suppliers. */
.sup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border-radius: 18px;
  color: inherit;
  text-align: start;
  animation: enter 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.sup-row.off {
  opacity: 0.55;
}

.sup-row .grow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sup-name {
  font: 600 15px/1.3 var(--font-display);
}

.sup-owed {
  font: 700 15px/1 var(--font-display);
  color: var(--warn-ink);
}

.sup-owed.zero {
  color: var(--text-3);
  font-weight: 500;
}

.sup-row .chev {
  color: var(--text-3);
}

/* ADR 0039: the chart of accounts («الحسابات»): the classes, each account's row, a sub-account under its parent. */
.chart,
.chart-classes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.chart-intro p {
  margin: 0;
}

.chart-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.chart-tools .chart-search {
  flex: 1 1 220px;
}

.chart-tools .chart-search .input {
  width: 100%;
}

.chart-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
}

.chart-row:last-child {
  border-bottom: 0;
}

.chart-row.sub {
  padding-inline-start: 22px;
}

.chart-row.head .chart-name {
  font-weight: 700;
  color: var(--text-1);
}

.chart-row.off {
  opacity: 0.55;
}

.chart-row .grow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chart-code {
  flex: none;
  min-width: 64px;
  font-size: 13px;
  color: var(--text-3);
}

.chart-name {
  font: 500 14.5px/1.35 var(--font-display);
  overflow-wrap: anywhere;
}

.chart-row.custom .chart-name {
  color: var(--violet-ink);
}

.chart-ico,
.chart-lock {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.chart-ico {
  color: var(--violet-200);
  background: var(--grad-brand-soft);
}

.chart-lock {
  color: var(--text-3);
}

.chart-acts {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.chart-code-will {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--violet-ink);
}

/* The tree's balances (the owner's notes of 2026-10-22): each account's on its own side, flush to the end. */
.chart-bal {
  flex: none;
  min-width: 92px;
  font: 600 13.5px/1.2 var(--font-display);
  text-align: end;
  color: var(--text-1);
  white-space: nowrap;
}

.chart-bal.zero {
  color: var(--text-3);
  font-weight: 500;
}

.chart-bal.neg {
  color: var(--bad-ink);
}

.chart-class-total {
  font: 700 15px/1.2 var(--font-display);
  color: var(--text-1);
  white-space: nowrap;
}

.chart-tools .chart-asof {
  gap: 8px;
}

/* «الموجودات المتداولة» and the others: a heading inside the class, with its sum. */
.chart-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(var(--fg-rgb), 0.05);
  font: 700 13.5px/1.3 var(--font-display);
  color: var(--violet-ink);
}

.chart-group:first-child {
  margin-top: 0;
}

/* Card and CliQ money shown under the bank: on its way to it, not in it yet. */
.chart-row.on-way {
  padding-inline-start: 26px;
}

/* A customer, a supplier, a person or a class of equipment under its account. */
.chart-row.chart-party {
  padding-block: 6px;
  padding-inline-start: 34px;
  border-bottom-style: dashed;
}

.chart-party .chart-name {
  font-size: 13.5px;
  font-weight: 500;
}

.chart-party-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: var(--text-3);
  background: rgba(var(--fg-rgb), 0.05);
}

.chart-party-link {
  color: inherit;
  text-decoration: none;
}

.chart-party-link:hover .chart-name {
  color: var(--violet-ink);
  text-decoration: underline;
}

.chart-row.chart-profit .chart-name {
  font-weight: 600;
}

.chart-summary .chart-sum-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  font: 500 14.5px/1.3 var(--font-display);
}

.chart-summary .chart-sum-row.strong {
  border-bottom: 0;
  font-weight: 700;
  color: var(--violet-ink);
}

.chart-summary .chart-sum-row.strong .chart-bal {
  font-size: 16px;
  color: var(--violet-ink);
}

@media (max-width: 480px) {
  .chart-act-label {
    display: none;
  }

  .chart-code {
    min-width: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mix-seg,
  .gauge-fill,
  .svc-bar-fill,
  .stock-item,
  .sup-row {
    animation: none;
  }
}

/* M11: the day's discounts under the payment mix, and a mark on a discounted sale. */
.disc-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--text-1);
  background: rgba(232, 121, 249, 0.08);
  border: 1px solid rgba(232, 121, 249, 0.25);
}
.disc-note .ico {
  color: var(--magenta-400);
}
.disc-note span:nth-of-type(1) {
  flex: 1;
}
.disc-note .num {
  color: var(--magenta-400);
  font-weight: 600;
}
.disc-dot {
  display: inline-grid;
  place-items: center;
  color: var(--magenta-400);
}
/* ADR 0037: a sale with goods at a wholesale price. */
.disc-dot.wholesale-dot {
  color: var(--violet-ink);
}
/* M12: the day's returns under the discounts, and a mark on a sale something came back from. */
.ret-note {
  margin-top: 8px;
  background: var(--bad-soft);
  border-color: rgba(251, 113, 133, 0.3);
}
.ret-note .ico,
.ret-note .num {
  color: var(--bad);
}
.ret-dot {
  display: inline-grid;
  place-items: center;
  color: var(--bad);
}

/* M14: fixed and prepaid expenses — each one's standing, a spread's months used, the new-one preview. */
.fx-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border-radius: 18px;
  color: inherit;
  text-align: start;
  animation: enter 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.fx-row .grow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fx-row.s-ended,
.fx-row.s-voided {
  opacity: 0.55;
}

.fx-row .chev {
  flex: none;
  color: var(--text-3);
}

.fx-name {
  font: 600 15px/1.3 var(--font-display);
}

.fx-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: var(--violet-200);
  background: var(--grad-brand-soft);
  border: 1px solid var(--line-2);
}

.fx-ico.lg {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.fx-status {
  flex: none;
  max-width: 44%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-status.muted {
  color: var(--text-3);
}

/* A spread's months behind it: a thin bar, violet into blue, drawn from the start side. */
.fx-bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--fg-rgb), 0.06);
}

.fx-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(270deg, var(--violet-500), var(--blue-400));
  transform-origin: right center;
  animation: grow-x 0.9s var(--ease-out) both;
}

.fx-how {
  margin: 12px 2px 0;
  line-height: 1.6;
}

.fx-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-1);
}

.fx-preview .ico {
  flex: none;
  color: var(--violet-300);
}

.fx-preview strong {
  color: var(--text-0);
}

.fx-paid-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed var(--line-2);
}

.st-row.voided {
  opacity: 0.5;
}

.st-row.voided .num {
  text-decoration: line-through;
}

/* M14: customer accounts — what each owes, its limit as a meter, its statement on paper. */
.acc-bal {
  flex: none;
  font: 700 15px/1 var(--font-display);
  color: var(--warn-ink);
}

.acc-bal.zero {
  color: var(--text-3);
  font-weight: 500;
}

.acc-bal.credit {
  color: var(--ok-ink);
}

.acc-bal.over {
  color: var(--bad);
}

.acc-over-stat .ico {
  color: var(--bad);
}

.acc-off {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.acc-off-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.acc-off-head p {
  margin: 4px 0 0;
  line-height: 1.6;
}

.acc-limit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.acc-meter {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--fg-rgb), 0.06);
}

.acc-meter i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(270deg, var(--violet-500), var(--blue-400));
  transform-origin: right center;
  animation: grow-x 0.9s var(--ease-out) both;
}

.acc-meter.over i {
  background: linear-gradient(270deg, #f43f5e, var(--bad));
}

.acc-range {
  margin-top: 6px;
}

.acc-range .seg-row {
  flex-wrap: wrap;
}

.acc-statement-box.refetching {
  opacity: 0.55;
  transition: opacity 0.2s;
}

.acc-statement table {
  font-size: 12.5px;
}

.acc-statement thead th {
  padding: 6px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #6f6795;
  border-bottom: 1px solid #cfc8ea;
}

.acc-statement th.amt,
.acc-statement td.amt {
  width: 1%;
  padding-inline-start: 10px;
  text-align: right;
  white-space: nowrap;
}

.acc-statement td {
  padding: 6px 0;
  width: auto;
  text-align: start;
  white-space: normal;
  vertical-align: top;
  color: #1c1733;
  border-bottom: 1px solid #ece8f8;
}

.acc-statement .st-date {
  width: 1%;
  padding-inline-end: 8px;
  white-space: nowrap;
  color: #5b5280;
}

.acc-statement .st-text {
  display: block;
  font-size: 11.5px;
  color: #6f6795;
}

.acc-statement .st-open td {
  color: #5b5280;
}

.acc-statement tfoot td {
  padding-top: 10px;
  font: 700 14px/1.2 var(--font-display);
  color: #1c1733;
  border-top: 1px solid #cfc8ea;
  border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fx-row,
  .fx-bar i,
  .acc-meter i {
    animation: none;
  }
}

/* M14: a fixed expense's standing and its months used, on one line under its plan. */
.fx-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
}

.fx-foot .fx-status {
  max-width: none;
}

.fx-foot .fx-bar {
  flex: 1;
  margin-top: 0;
}

.acc-statement .st-no {
  margin-inline-start: 4px;
}

/* M15: an item's or a service's tax — one of the company's rates, another added in place. */
.tax-field {
  display: grid;
  gap: 8px;
}

.tax-add {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r);
  border: 1px dashed var(--line-3);
  background: var(--grad-brand-soft);
  animation: disc-in 0.3s var(--ease-spring) both;
}

.tax-rate {
  max-width: 150px;
}

.tax-rate .input {
  padding-inline: 12px 34px;
  font-size: 18px;
}

/* An item's packs: each with its price, what one piece in it comes to, its codes; a new one under them. */
.packs-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: var(--r);
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.09), rgba(37, 99, 235, 0.06));
}

.packs-field .small-print {
  margin: -4px 0 0;
}

.pack-list {
  display: grid;
  gap: 8px;
}

.pack-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), 0.035);
  animation: disc-in 0.3s var(--ease-spring) both;
}

.pack-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pack-row-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.pack-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--violet-300);
  background: rgba(139, 92, 246, 0.16);
  box-shadow: 0 0 16px -4px rgba(139, 92, 246, 0.75);
}

.pack-name {
  font: 600 15px/1.3 var(--font-display);
  overflow-wrap: anywhere;
}

.pack-each {
  font-size: 12.5px;
}

.pack-price {
  flex: none;
  font: 700 16px/1 var(--font-display);
  white-space: nowrap;
}

.pack-actions {
  display: flex;
  flex: none;
  gap: 2px;
}

.pack-new {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
}

.pack-new .btn {
  justify-self: start;
}

/* A receipt line's pack and tax, under the line (when they matter); the invoice's tax under its total. */
.po-line-extra {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.line-per,
.line-tax {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.line-per {
  flex: 2 1 0;
}

.line-tax {
  flex: 3 1 0;
}

.line-per .select,
.line-tax .select {
  width: 100%;
  min-height: 40px;
  font-size: 14px;
}

/* Lines with something under them stand apart. */
.po-line-edit.with-total + .po-line-edit.with-total {
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
}

.inv-tax {
  margin-top: -4px;
  padding-inline: 14px;
  text-align: end;
}

@media (prefers-reduced-motion: reduce) {
  .tax-add,
  .pack-row {
    animation: none;
  }
}

/* M15: the company's tax rates in its settings, one switch each (the general rate is always on). */
.tax-list {
  display: grid;
  gap: 2px;
}

.tax-rates .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tax-always {
  flex: none;
}

/* ── M17: cars due for an oil change, the reminders, a car's file */

.cars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cars-hero::before {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 65%);
}

.cars-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
}

.cars-stat.late {
  color: var(--bad);
}

.cars-stat.on {
  color: var(--ok);
}

.cars-range .seg-row {
  width: 100%;
}

.cars-search {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.cars-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
}

.cars-search-row .input {
  flex: 1;
}

.cars-found:empty {
  display: none;
}

.cars-none {
  margin: 0;
  padding: 4px 6px;
}

/* A plate as it hangs on the car: dark, bordered, wide letter spacing. */
.plate-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 7px 10px;
  border-radius: 10px;
  font: 700 15px/1 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--text-0);
  background: linear-gradient(180deg, rgba(var(--fg-rgb), 0.08), rgba(var(--fg-rgb), 0.02)), var(--bg-2);
  border: 1px solid var(--line-3);
  box-shadow: inset 0 0 0 2px var(--ring-bg);
}

.plate-badge.lg {
  min-width: 130px;
  padding: 11px 14px;
  font-size: 21px;
}

.car-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.car-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.car-group-title {
  margin: 0;
  font: 600 13px/1.2 var(--font-display);
  color: var(--text-2);
}

.car-group-title.overdue {
  color: var(--bad);
}

.car-group-title.today {
  color: var(--warn);
}

.cars .card-title,
.oil-card .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The plate, when it is due and the reminder on one line; what was done and what is next under them. */
.car-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'plate due act'
    'info info info';
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 12px 13px;
  border-radius: 18px;
  cursor: pointer;
  animation: enter 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.car-row > .plate-badge {
  grid-area: plate;
}

.car-row > .car-due {
  grid-area: due;
}

.car-row > .cars-act,
.car-row > .cars-no {
  grid-area: act;
}

.car-row > .car-row-text {
  grid-area: info;
}

.car-next-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}

.car-next-pace {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.car-next-pace .ico {
  flex: none;
  margin-top: 2px;
}

.car-file-kv .kv.wide {
  grid-column: 1 / -1;
}

.wa-btn.again {
  color: var(--text-2);
}

.car-row.state-overdue {
  box-shadow: inset 3px 0 0 var(--bad);
}

[dir='rtl'] .car-row.state-overdue {
  box-shadow: inset -3px 0 0 var(--bad);
}

.car-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.car-row-text .small {
  overflow-wrap: anywhere;
}

.car-due {
  font: 600 14.5px/1.3 var(--font-display);
  color: var(--text-0);
}

.car-due.overdue {
  color: var(--bad);
}

.car-due.today {
  color: var(--warn);
}

.car-pace {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--cyan-300);
}

.cars-act {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

.wa-btn {
  color: var(--ok);
}

.cars-sent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ok);
}

.cars-no {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 12px;
  color: var(--text-3);
}

.car-file {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.car-file-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.car-file-head .grow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.car-phone {
  color: var(--blue-300);
  font-weight: 600;
}

.car-file-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.car-file-kv .kv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.03);
  border: 1px solid var(--line);
}

.car-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
}

.car-next-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.car-next-head strong {
  flex: 1;
}

.car-next .wa-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.car-sec-title {
  margin: 0 0 6px;
  font: 600 14px/1.3 var(--font-display);
  color: var(--text-1);
}

.car-lines {
  display: flex;
  flex-direction: column;
}

.car-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.car-line:first-child {
  border-top: 0;
}

.car-line .grow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.car-line.void {
  opacity: 0.5;
  text-decoration: line-through;
}

.car-line-date {
  flex: none;
  min-width: 64px;
  color: var(--text-2);
  font-size: 13px;
}

.car-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oil-box[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .car-row {
    animation: none;
  }
}

/* ── M18: packages and subscriptions — paid ahead, the list by plate, a package's file */

.pkgs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pkgs-month {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-1);
}

.pkgs-month .ico {
  flex: none;
  color: var(--violet-300);
}

.pkgs-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pkgs-filters .cars-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 16px;
}

.pkgs-filters .cars-search-row .input {
  flex: 1;
  border: 0;
  background: transparent;
}

.pkg-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pkg-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  padding: 11px 13px 12px;
  border-radius: 18px;
  color: inherit;
  text-align: start;
  animation: enter 0.4s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.pkg-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The plate at the start; what it holds and the chevron together at the end. */
.pkg-item-top .plate-badge {
  margin-inline-end: auto;
}

.pkg-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 14.5px/1.3 var(--font-display);
}

.pkg-item-name .ico,
.pkg-file-name .ico {
  flex: none;
  color: hsl(252 92% 76%);
}

.pkg-item-held {
  font: 600 13.5px/1 var(--font-display);
  color: var(--text-1);
  white-space: nowrap;
}

.pkg-item.s-used,
.pkg-item.s-expired,
.pkg-item.s-voided {
  opacity: 0.72;
}

.pkg-item .chev {
  color: var(--text-3);
}

.pkgs-plans {
  align-self: flex-start;
  margin-top: 4px;
}

.pkg-file-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pkg-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pkg-flags:empty {
  display: none;
}

.plan-worth:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pkg-item {
    animation: none;
  }
}

.set-intro {
  margin: 0 2px 4px;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── a bar row that opens its own sheet (a service edited from the reports, 2026-10-13) */
.viz-hrow.viz-tap {
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.18s;
}

.viz-hrow.viz-tap:hover,
.viz-hrow.viz-tap:focus-visible {
  background: rgba(var(--fg-rgb), 0.045);
  outline: none;
}

.viz-trail {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-inline-start: 4px;
  color: var(--text-3);
}

.viz-hrow.viz-tap:hover .viz-trail {
  color: var(--violet-300);
}

.viz-hint {
  margin: 6px 4px 0;
}

/* ── the light theme's chart tokens (2026-10-13), validated with the dataviz palette checker against the light chart
   surface #f5f3fc: payment identity all-pairs CVD ΔE ≥ 10.1, normal ≥ 24.0 (cash sits at 2.56:1 contrast — the
   legend and the table are the relief); station identity (the reference light column) adjacent CVD ΔE ≥ 9.1,
   normal ≥ 19.6, the first three all-pairs CVD ≥ 9.2 (four slots under 3:1 — every chart has its legend and table);
   the single series #6d28d9 with its context #8580ad ≥ 3:1. */
html[data-theme='light'] {
  --pay-cash: #1baf7a;
  --pay-card: #2a78d6;
  --pay-cliq: #c43f8f;
  --pay-other: #8e8aa8;
  --series-1: #6d28d9;
  --series-1-em: #5b21b6;
  --series-ctx: #8580ad;
  --viz-surface: #f5f3fc;
  --viz-grid: rgba(109, 40, 217, 0.1);
  --viz-axis: rgba(109, 40, 217, 0.28);
  --st-1: #2a78d6;
  --st-2: #eb6834;
  --st-3: #1baf7a;
  --st-4: #eda100;
  --st-5: #e87ba4;
  --st-6: #008300;
  --st-other: #8e8aa8;
}

/* ── the light theme's active states (2026-10-13): ink on tints, a solid gradient under the active tab's icon */
html[data-theme='light'] .tab.on {
  color: var(--violet-200);
}

html[data-theme='light'] .tab.on .tab-ico {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.7);
}

html[data-theme='light'] .icon-pick.active {
  color: var(--violet-200);
  background: rgba(124, 58, 237, 0.16);
}

/* The packages' lavender icon reads only on dark (2026-10-14). */
html[data-theme='light'] .pkg-item-name .ico,
html[data-theme='light'] .pkg-file-name .ico {
  color: var(--violet-ink);
}

/* ── The home's shortcuts (ADR 0033, the reviewer's R19; chosen by the person, ADR 0051): one compact row under the day's
   figure — the shortcuts in equal columns (their count in --sc-n, set by the home), «تخصيص» a narrow last column. */
.shortcuts {
  display: grid;
  grid-template-columns: repeat(var(--sc-n, 4), minmax(0, 1fr)) auto;
  gap: 8px;
}

.shortcuts.sc-none {
  grid-template-columns: auto;
  justify-content: start;
}

button.shortcut {
  font: inherit;
  cursor: pointer;
}

.sc-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 46px;
  padding: 8px 3px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  font: 500 11px/1.2 var(--font-display);
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    transform 0.2s var(--ease-spring);
}

.sc-edit:hover {
  color: var(--text-0);
  border-color: var(--line-3);
}

.sc-edit:active {
  transform: scale(0.95);
}

.sc-edit:focus-visible {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
}

.sc-edit-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--violet-ink);
  background: rgba(var(--fg-rgb), 0.06);
}

/* The chooser (ADR 0051): every screen the person may open, a toggle each, numbered in the order picked. */
.sc-pick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sc-pick-head p {
  margin: 0;
}

.sc-pick-count {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--violet-ink);
  background: rgba(139, 92, 246, 0.14);
  font: 600 13px/1.4 var(--font-display);
}

.sc-pick-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.sc-pick-row {
  --sc: 139, 92, 246;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.03);
  color: var(--text-1);
  font: 500 14px/1.25 var(--font-display);
  text-align: start;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    opacity 0.2s,
    transform 0.15s;
}

.sc-pick-row .sc-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.sc-pick-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-pick-row.on {
  border-color: rgba(var(--sc), 0.6);
  background: rgba(var(--sc), 0.12);
  color: var(--text-0);
}

.sc-pick-row.full {
  opacity: 0.5;
}

.sc-pick-row:active {
  transform: scale(0.98);
}

.sc-pick-row:focus-visible {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
}

.sc-pick-place {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  color: #fff;
  font: 700 12.5px/1 var(--font-display);
}

.sc-pick-row.on .sc-pick-place {
  border-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  box-shadow: 0 0 12px -2px rgba(139, 92, 246, 0.7);
}

.sc-pick-note {
  min-height: 1.3em;
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
}

.sc-reset {
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sc-pick-row,
  .sc-edit {
    transition: none;
  }
}

.shortcut {
  --sc: 139, 92, 246;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 82px;
  padding: 12px 4px 10px;
  border-radius: var(--r);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease-spring),
    box-shadow 0.25s;
}

.shortcut:active {
  transform: scale(0.96);
}

.shortcut:focus-visible {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
}

.sc-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--violet-200);
  background: rgba(var(--sc), 0.16);
  box-shadow: 0 0 22px -8px rgba(var(--sc), 0.8);
}

.sc-cash {
  --sc: 34, 211, 238;
}

.sc-cash .sc-ico {
  color: var(--cyan-300);
}

.sc-purchases {
  --sc: 96, 165, 250;
}

.sc-purchases .sc-ico {
  color: var(--blue-300);
}

.sc-alerts {
  --sc: 236, 72, 153;
}

.sc-alerts .sc-ico {
  color: var(--pink-ink);
}

.shortcut.attn {
  border-color: rgba(244, 114, 182, 0.45);
  box-shadow: 0 0 26px -10px rgba(236, 72, 153, 0.7), var(--shadow-card);
}

.sc-label {
  max-width: 100%;
  font: 500 12.5px/1.25 var(--font-display);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.sc-badge {
  position: absolute;
  top: -7px;
  inset-inline-end: -9px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  font: 600 11px/1 var(--font-display);
  color: #fff;
  background: linear-gradient(135deg, #f472b6, #a855f7);
  box-shadow: 0 0 0 2px var(--ring-bg), 0 0 14px rgba(236, 72, 153, 0.7);
  animation: badge-pop 0.5s var(--ease-spring) both;
}

.sc-badge.hidden {
  display: none;
}

/* ── «الصندوق»: where the money stands (ADR 0033). The rows are the home's drawer rows; a row with a statement is a link. */
.cash-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cash-hero .hero-stats {
  flex-wrap: wrap;
  row-gap: 8px;
}

a.cash-row {
  color: inherit;
  text-decoration: none;
}

a.cash-row:focus-visible {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
  border-radius: 12px;
}

.cash-row .chev {
  flex: none;
  color: var(--text-3);
}

[dir='ltr'] .cash-row .chev {
  transform: scaleX(-1);
}

.cash-row .num.neg {
  color: var(--bad-ink);
}

/* ADR 0057, 0058: a person's row carries «اسحب منه» and «سكّر ورديته» — on a line of their own on a phone. */
.cash-person-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.cash-row:has(> .cash-person-actions) {
  flex-wrap: wrap;
}

.cash-row > .cash-person-actions {
  flex-basis: 100%;
}

html[data-frame='desktop'] .cash-row > .cash-person-actions {
  flex-basis: auto;
}

.pickup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pickup-row {
  align-items: center;
}

.pickup-row-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.drawer-ico.fund {
  color: var(--violet-200);
  background: rgba(139, 92, 246, 0.14);
}

.drawer-ico.main {
  color: var(--pink-ink);
  background: rgba(236, 72, 153, 0.14);
}

.drawer-ico.bank {
  color: var(--blue-300);
  background: rgba(96, 165, 250, 0.16);
}

.cash-settle {
  margin-top: 10px;
}

.cash-note {
  margin: 0;
  padding: 0 4px;
}

/* ── ADR 0036: purchases — the invoice's printed total against the lines, goods sent back, the report by month. */
.inv-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  font: 500 13.5px/1.35 var(--font-display);
}

.inv-gap.bad {
  color: var(--warn-ink);
  background: var(--warn-soft);
}

.ret-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ret-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
}

.ret-line .qty-input {
  flex: 0 0 132px;
}

.ret-free {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.viz-stackcols .viz-stackbar {
  fill: var(--c, var(--series-1));
  transition: filter 0.2s;
}

.viz-stackcols .viz-stackbar.hot {
  filter: brightness(1.15);
}

.viz-stackcols.grow .viz-stackbar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bar-grow 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}

@media (prefers-reduced-motion: reduce) {
  .viz-stackcols.grow .viz-stackbar {
    animation: none;
  }
}

/* ── warehouses (ADR 0042): a chip beside a warehouse's name; the stock value per place */

.pill.wh {
  color: var(--violet-ink);
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.12);
}

.loc-card .viz-table td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.loc-card .viz-table tr.loc-total td {
  font-weight: 600;
  color: var(--text-0);
  border-bottom: 0;
}

.loc-card .loc-share {
  color: var(--text-3);
  font-size: 12px;
}

.loc-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ── approvals on the device (ADR 0041): the settings card, one's own approval PIN, the managers' PINs */
.appr-card .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.appr-own {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), 0.03);
}
.appr-own-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--violet-ink);
}
.appr-own-head strong {
  display: block;
  color: var(--text-1);
  font: 600 15px/1.3 var(--font-display);
}
.appr-own-head .muted {
  display: block;
}
.appr-own-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.appr-people {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Approvals never decided: the owner's «no» beside the switch (ADR 0019 amendment). */
.appr-undecided {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.appr-undecided .grow {
  flex: 1 1 200px;
}
.appr-person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.appr-person-row strong,
.appr-person-row .muted {
  display: block;
}

/* ── ADR 0048: a supplier's invoice read from its photo. The button wears the brain's violet; while the model reads,
   its border breathes. The panel says what to check; a read line shows what the supplier printed under its row. */
.inv-read {
  display: grid;
  gap: 6px;
}

.inv-read-btn {
  color: var(--violet-ink);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: var(--glow-violet);
}

.inv-read-btn .ico {
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
}

.inv-read-btn.is-busy {
  opacity: 0.85;
  animation: inv-read-breathe 1.6s var(--ease-in-out) infinite;
}

@keyframes inv-read-breathe {
  50% {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: var(--glow-blue);
  }
}

.inv-read-status {
  margin: 0;
  padding: 9px 12px;
  border-radius: 12px;
  font: 500 13.5px/1.45 var(--font-display);
}

.inv-read-status.warn {
  color: var(--warn-ink);
  background: var(--warn-soft);
}

.inv-read-status.ok {
  color: var(--ok-ink);
  background: var(--ok-soft);
}

.inv-read-panel {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--warn-ink);
  background: var(--warn-soft);
  border: 1px solid rgba(var(--fg-rgb), 0.06);
}

.inv-read-panel.clear {
  color: var(--ok-ink);
  background: var(--ok-soft);
}

.inv-read-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1.35 var(--font-display);
}

.inv-read-list {
  margin: 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 4px;
  font: 500 13.5px/1.45 var(--font-body);
}

.po-line-read {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12.5px;
  line-height: 1.4;
}

.po-line-printed {
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.po-line-flag {
  color: var(--warn-ink);
  font-weight: 600;
}

.po-line-edit.needs-item > .select,
.select.needs-pick {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

/* The panel's «أضف المورد»: beside its sentence, small. */
.inv-read-add {
  margin-inline-start: 8px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .inv-read-btn.is-busy {
    animation: none;
  }
}

/* ADR 0056: the item's fitting job; «التركيب مشمول بالسعر» only once a job is picked. */
.fit-box {
  display: grid;
  gap: 10px;
}
.fit-box .switch-row[hidden] {
  display: none;
}

/* ADR 0059: «فواتير البيع» — the list's filters, the new invoice's lines and parts, and the invoice and the voucher on paper
   (A4 when printed, the payslip's paper colours). */
.inv-filters {
  display: grid;
  gap: 10px;
}

.inv-filters .seg-row {
  flex-wrap: wrap;
}

.inv-row .inv-no {
  min-width: 3.2em;
  font: 700 15px/1 var(--font-display);
  color: var(--violet-ink);
}

.inv-lines {
  display: grid;
  gap: 10px;
}

.inv-lines-head,
.inv-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inv-total-row {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.05);
}

.inv-total-row strong {
  font: 700 18px/1.2 var(--font-display);
}

.inv-line {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 14px;
}

.inv-line-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: end;
  gap: 8px;
}

.inv-line-row .field {
  margin: 0;
}

.inv-line-sum {
  display: grid;
  gap: 4px;
  min-width: 5.5em;
  padding-bottom: 10px;
  text-align: end;
}

.inv-line-total {
  font-weight: 700;
  color: var(--text-1);
}

.inv-parts {
  display: grid;
  gap: 8px;
}

.inv-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

@media (max-width: 520px) {
  .inv-line-row {
    grid-template-columns: 1fr 1fr;
  }
}

.inv-paper .inv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.inv-paper .inv-title {
  display: grid;
  gap: 2px;
  text-align: end;
}

.inv-paper .inv-kind {
  font: 700 18px/1.2 var(--font-display);
  color: #1c1733;
}

.inv-paper .inv-voided {
  padding: 6px 10px;
  border: 2px solid #b4233c;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  color: #b4233c;
}

.inv-paper.voided .inv-table,
.inv-paper.voided .voucher-table {
  opacity: 0.6;
}

.inv-paper .inv-table {
  font-size: 12.5px;
}

.inv-paper .inv-table thead th {
  padding: 6px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #6f6795;
  border-bottom: 1px solid #cfc8ea;
}

.inv-paper .inv-table th.amt,
.inv-paper .inv-table td.amt {
  width: 1%;
  padding-inline-start: 10px;
  text-align: right;
  white-space: nowrap;
}

.inv-paper .inv-table td {
  padding: 6px 0;
  color: #1c1733;
  border-bottom: 1px solid #ece8f8;
}

.inv-paper .inv-table td.inv-item {
  width: auto;
  text-align: start;
  white-space: normal;
}

.inv-paper .inv-table tfoot td {
  border-bottom: 0;
  text-align: start;
}

.inv-paper .inv-table tfoot td.amt {
  text-align: right;
}

.inv-paper .voucher-table th {
  width: 30%;
}

.inv-paper .voucher-table td.voucher-v {
  width: auto;
  /* The start of the line in Arabic, also for an amount (its .num runs left to right). */
  text-align: right;
  white-space: normal;
}

.inv-paper .inv-sign {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  font-size: 12px;
  color: #5b5280;
}

@media print {
  body.printing .inv-paper {
    padding: 0;
    background: #fff;
  }
}