@import url('/css/workflow-box.css');

/* The v3 boards: one 60px identity strip and the page below it. */
.shell { display: grid; grid-template-rows: 60px 1fr; height: 100dvh; width: 100%; max-width: 100vw; overflow: hidden; }
.shell-body { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.shell.box-open .shell-body { opacity: .5; pointer-events: none; }
.shell-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: var(--sp-4); }
.shell-main:not(.screen-sell) { display: block; }
.shell-main > * { min-width: 0; }

.shell-top {
  display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 20px; line-height: 1.5;
  background: var(--surface); border-block-end: 1px solid var(--line);
  width: 100%; max-width: 100vw; position: relative; z-index: 50;
}
.shell.box-open .shell-top, .shell.box-open .shell-brand-group { gap: 14px; }
.shell-brand-group { display: flex; align-items: center; gap: 16px; flex: none; min-width: 0; }
.shell-wordmark { font-family: var(--font-stack); font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.shell-wordmark span { color: var(--teal); }
.shell-rule { flex: none; inline-size: 1px; block-size: 24px; background: var(--line); }
.shell-shop-name {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-inline-size: 210px; cursor: pointer;
}
.shell-shop-name:disabled { cursor: default; }
/* the three places, the box, and the owner-page back link */
.shell-places { display: flex; align-items: center; gap: 6px; flex: none; }
.place {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  block-size: 48px; min-block-size: var(--control-h); padding-inline: 16px;
  border-radius: 10px; font-size: 16px; font-weight: 700; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.place:hover { background: var(--surface-2); }
.place[aria-current="page"] { background: var(--primary-bg); color: var(--primary-ink); }
.place[aria-current="page"]::after {
  content: ''; position: absolute; inset-inline: 12px; inset-block-end: -2px;
  block-size: 3px; border-radius: var(--r-mark); background: var(--primary);
}
.place:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.place-icon { flex: none; }
.shell-box-slot { flex: none; inline-size: 320px; margin-inline-start: 6px; position: relative; }
.shell-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.shell-shift-chip {
  display: flex; align-items: center; gap: 8px; block-size: 34px; padding-inline: 12px;
  border-radius: 18px; background: var(--green-bg); border: 1px solid var(--green-line);
  color: var(--green); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.shell-shift-chip[hidden], .shell-user-dot[hidden], .shell-user-menu[hidden], .shell-user-menu-trouble[hidden] { display: none; }
.shell-shift-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--green); flex: none; }
.shell-user-wrap { position: relative; min-inline-size: 0; }
.shell-user {
  display: flex; align-items: center; gap: 8px; block-size: 36px; min-inline-size: 0; max-inline-size: 100%;
  padding-inline: 6px 12px; border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface); color: var(--ink); cursor: pointer; position: relative;
}
.shell-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: var(--teal-bg); color: var(--teal-ink); font-size: 14px; font-weight: 800;
}
.pill-user { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.shell-user-dot {
  position: absolute; inset-inline-start: 6px; inset-block-end: 5px;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--red);
}
.shell-user-menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-inline-size: max-content; max-inline-size: calc(100vw - 16px); padding: 8px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow-2); z-index: 70;
}
.shell-user-menu-trouble { padding: 8px; color: var(--red); font-size: 13.5px; font-weight: 700; }
.shell-user-menu .btn { inline-size: 100%; min-height: 48px; }
.shell-back:not([hidden]) { display: flex; align-items: center; flex: none; padding: var(--sp-2) var(--sp-4); background: var(--surface); border-block-end: 1px solid var(--line); }
.shell-back-link { min-block-size: var(--control-h); gap: var(--sp-2); font-weight: 700; text-decoration: none; }

/* «ارجع للإدارة» folded into the page's own first row (Q8a B-04; mockup-v3/Staff.dc.html draws it as the
   first thing in its head: a 164x48 ghost button with its Esc cap, then a 1x30 rule, then the page). The
   bar stays where the shell put it — the Esc road and the tests read the link there — and is laid over
   the head of a page whose first row is a command bar or a head band; that row leaves room for it
   (16 + 164 + 14 + 1 + 14 = 209 from the page edge). A page with no such row keeps the strip above. */
.shell-body:has(> .shell-main > .bf > :is(.scr-actions, .bf-head):first-child) > .shell-back:not([hidden]) {
  position: absolute; inset-inline-start: 32px; inset-block-start: 22px; z-index: 2;
  padding: 0; gap: 14px; background: none; border: 0;
}
.shell-body:has(> .shell-main > .bf > .bf-head:first-child) > .shell-back:not([hidden]) { inset-block-start: 24px; }
.shell-body:has(> .shell-main > .bf > :is(.scr-actions, .bf-head):first-child) > .shell-back:not([hidden])::after {
  content: ''; flex: none; inline-size: 1px; block-size: 30px; background: var(--line);
}
.shell-body:has(> .shell-main > .bf > :is(.scr-actions, .bf-head):first-child) > .shell-back:not([hidden]) .shell-back-link {
  inline-size: 164px; block-size: 48px; padding: 0 14px; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.shell-body:has(> .shell-main > .bf > :is(.scr-actions, .bf-head):first-child) > .shell-back:not([hidden]) ~ .shell-main > .bf > :is(.scr-actions, .bf-head):first-child {
  padding-inline-start: 209px;
}
.shell-body:has(> .shell-main > .bf > :is(.scr-actions, .bf-head):first-child) > .shell-back:not([hidden]) ~ .shell-main > .bf > .bf-head:first-child {
  min-block-size: 64px;
}

.nav-icon { flex: none; width: 18px; height: 18px; }

/* Alt+1..4 (spec 018 US1.14): the digit cap in the door's corner, shown only while Alt is held
   (`body.show-keys`, shell.js). The DS key-hint helper — a 150 ms fade that reduced motion drops
   (casheer.css) — and, on a screen wider than 1600 px, on hover too. Never on a phone: no Alt key. */
.nav-key {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  min-width: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s, visibility .15s;
}
body.show-keys .nav-key { opacity: 1; visibility: visible; }
@media (min-width: 1601px) {
  .place:hover .nav-key { opacity: 1; visibility: visible; }
}
@media (max-width: 600px) { .nav-key { display: none; } }

/* Segmented dates retain a real native input as the canonical ISO value for forms/controllers.
   The hidden source is absolutely positioned, so its parent must be its containing block: with
   none it measured against the root, sat at its unscrolled spot far below the fold and escaped
   both `.shell`'s clip and `.shell-main`'s scroller — the DOCUMENT grew and scrolled as well,
   leaving a blank viewport (customers' statement dates at 390 px). Zero specificity, so any page
   that already positions that parent keeps its own value. */
:where(:has(> .segmented-date-source)) { position: relative; }
.segmented-date-source {
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.segmented-date {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: min(178px, calc(100vw - 32px));
  min-height: var(--control-h);
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  direction: rtl;
}
.segmented-date.is-invalid { border-color: var(--danger); }
.segmented-date-part {
  width: 0;
  min-width: 0;
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  color: var(--ink);
  direction: ltr;
  text-align: center;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.segmented-date-year { flex-grow: 1.55; }
.segmented-date-part:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  box-shadow: none;
  background: var(--primary-bg);
}
.segmented-date-part::placeholder { color: var(--ink-3-text); opacity: 1; font-size: var(--fs-sm); }
.segmented-date-separator { flex: none; color: var(--ink-2); font-size: var(--fs-sm); }
.segmented-date-error { color: var(--danger-ink); font-size: var(--fs-sm); font-weight: 700; }
.segmented-date-error[hidden] { display: none !important; }

.segmented-time {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: min(190px, calc(100vw - 32px));
  min-height: var(--control-h);
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  direction: rtl;
}
.segmented-time.is-invalid { border-color: var(--danger); }
.segmented-time-part {
  width: 0;
  min-width: 0;
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  color: var(--ink);
  direction: ltr;
  text-align: center;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.segmented-time-part:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  box-shadow: none;
  background: var(--primary-bg);
}
.segmented-time-part::placeholder { color: var(--ink-3-text); opacity: 1; font-size: var(--fs-sm); }
.segmented-time-separator { flex: none; color: var(--ink-2); font-size: var(--fs-sm); }
.segmented-time-periods { display: inline-flex; flex: none; gap: 2px; padding-inline-start: 2px; border-inline-start: 1px solid var(--line); }
.segmented-time-periods button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 3px;
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
}
.segmented-time-periods button[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); }

/* Keep the same header pieces when there is less horizontal room. */
@media (max-width: 1100px) {
  .shell-shop-name { max-inline-size: 130px; }
  .shell-top { gap: 8px; padding-inline: 12px; }
  .shell-box-slot { inline-size: min(320px, 25vw); margin-inline-start: 0; }
  .box-field { width: 100%; }
}

@media (max-width: 900px) {
  .shell { grid-template-rows: auto minmax(0, 1fr); }
  .shell-top { flex-wrap: wrap; height: auto; min-height: 60px; padding-block: 8px; }
  .shell-places { order: 2; flex: 1 0 100%; justify-content: space-around; }
  .shell-box-slot { inline-size: min(320px, 38vw); }
  .shell-shift-chip { display: none; }
  .shell-main { padding: var(--sp-3); }
  /* The till lays its toasts over the header on a tablet or a phone (sell.css). A second line or a
     second toast hung them over the doors below it, so there: one line, 40 px, the newest only —
     each scan's «تمت إضافة …» replaces the one before instead of stacking under it. */
  body:has(.screen-sell) .toast-item {
    display: block;
    min-height: 0;
    height: 40px;
    line-height: 40px;
    padding-block: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  body:has(.screen-sell) .toast-item:not(:last-child) { display: none; }
}

@media (max-width: 600px) {
  .shell-top { padding-inline: var(--sp-2); gap: var(--sp-2); }
  .shell-end { gap: var(--sp-1); }
  .shell-brand-group { gap: 8px; }
  .shell-rule { display: none; }
  .shell-shop-name { max-inline-size: 90px; }
  .shell-box-slot { order: 1; flex: 1 0 100%; inline-size: auto; }
  .place { padding-inline: 8px; font-size: 13px; }
  .box-results { max-width: calc(100vw - 16px); }
}

/* ------------------------------------------------------------------- tables, in the rail's hand
   No zebra (the DS table): hairline rows, a header that reads as a label and not as a row, the row
   under the pointer on the sunk surface, and the numeric columns set tabular. */
.table tbody tr { transition: background-color var(--transition); }
.table tbody tr:hover { background: var(--surface-2); }
.table thead th { z-index: 5; }
.table td { color: var(--ink); font-size: var(--fs-base); }

/* ------------------------------------------------------------------- «سحب المالك» (018 T032)
   One dialog (public/js/owner-draw.js) opened from three pages — الخزنة، صفحة المالك، الوردية — so it
   lives here, beside the other shared pieces, and not in one page's sheet. Built on .field, .input,
   .segmented, .help and .error of casheer.css: «منين؟» is one full-width segmented row, each place
   with its balance under its word (never the drawer's — the close is blind) or why it cannot give. */
.odraw-amount { min-height: 56px; font-size: var(--t-22); font-weight: 800; }
.odraw-caption { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.odraw-sources { display: flex; width: 100%; box-sizing: border-box; }
.odraw-sources > button {
  flex: 1 1 0;
  flex-direction: column;
  gap: 0;
  min-height: var(--control-h);
  padding-block: var(--space-2);
}
.odraw-sources > button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.odraw-bal { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }