/*
  تنسيق صفحة الصندوق في النسخة الثانية: بطاقة الصندوق كبيرةً زاهيةً بكتابة داكنة، ورصيده، وزرّ العدّ أو سطر القفل، وحركاته بأيامها.
  في الجوال عمود واحد، وفي الحاسوب البطاقة وزرّها في عمود ثابت على اليمين والحركات عريضة بجانبها، وفوقهما صفّ الصناديق الأربعة.
  يُقرأ بعد التنسيق المشترك وتنسيق الرئيسية، ويستعمل منه زخرفة البطاقة وسطر صاحبها.
  وإن غاب ظهرت صفحة الصندوق بالتنسيق المشترك وحده.
*/

.screen--box { gap: var(--sp-4); }

/* ---------- The large box card ---------- */
.boxp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.boxp-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.boxp-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 210px;
  padding: 20px;
  overflow: visible;
}
.boxp-card > :not(.home-deco) { position: relative; z-index: 2; margin: 0; }
/* An open «!» bubble stays above the rest of the card. */
.boxp-card > :has(.tip[aria-expanded="true"]) { z-index: 20; }
.boxp-card .home-mark { width: 72px; }
.boxp-card .boxp-name { padding-inline-end: 84px; font-size: var(--fs-lg); line-height: var(--lh-tight); }
.boxp-bal { margin-top: auto; padding-top: 18px; }
.boxp-bal-label { display: flex; align-items: center; min-height: 26px; color: var(--bx-sub); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.boxp-card .boxp-bal-num { white-space: nowrap; }
/* The Wafeq account link (Karim only) is written in the card's dark ink, never the gold of the page. */
.boxp-wafeq { margin-top: 10px; }
.boxp-wafeq .src-link { min-height: var(--touch); color: var(--bx-on); }
.boxp-wafeq .src-link .ico { flex: none; }

/* ---------- Count (owner) or the lock line (anyone else) ---------- */
.boxp-lock { display: flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 0 4px; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- The four boxes as tabs: desktop only ---------- */
.boxp-switch { display: none; }

@media (min-width: 1024px) {
  .screen--box { gap: var(--sp-5); }
  .boxp-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .boxp-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: var(--touch);
    padding: 0 14px;
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .boxp-tab:hover { background: var(--row-hover); color: var(--ink); }
  .boxp-tab[aria-current="page"] { background: var(--nav-on-bg); color: var(--ink); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 2px var(--bx-deep); }
  .boxp-tab-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .boxp-tab .ico { flex: none; }

  /* The card column gives way below 1280 px, so the movements column keeps room for one readable line per row */
  .boxp-cols { grid-template-columns: minmax(280px, 32%) minmax(0, 1fr); gap: 24px; }
  .boxp-side { position: sticky; top: 30px; }
  .boxp-card { min-height: 230px; padding: 22px 24px; }
}
@media (min-width: 1280px) {
  .boxp-cols { grid-template-columns: 380px minmax(0, 1fr); }
}

/* ---------- The statement of one box (Karim, 2026-10-10) ---------- */
/* The three buttons under the box card, equal and stacked: count (owner only), statement, record (Karim, 2026-10-10). */
.boxp-btns { display: grid; gap: 10px; }
.boxp-btns > .btn { min-height: 52px; gap: 8px; }
/* As wide as the screen, and one scrollbar only: the window's body scrolls inside the rounded frame, the table never on its own. */
@media (min-width: 1024px) {
  .sheet--statement.sheet--dialog { width: 100%; max-width: none; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .sheet--statement .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-inline: -24px; padding: 0 24px 24px; scrollbar-gutter: stable; }
}
.stm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.stm-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.stm-seg .seg-btn { justify-content: center; min-height: 44px; white-space: normal; text-align: center; line-height: 1.3; }
.stm-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stm-range[hidden] { display: none; }
.stm-range-f { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.stm-date { min-height: 46px; direction: ltr; text-align: end; }
.stm-body { display: grid; gap: var(--sp-3); }
.stm-period { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.stm-sum { margin: 0 0 var(--sp-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stm-sum-i { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface-2); min-width: 0; }
.stm-sum-i dt { color: var(--muted); font-size: var(--fs-xs); }
.stm-sum-i dd { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stm-sum-i[data-k="closing"] { border-color: var(--gold); }
.stm-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-tile); }
.stm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.stm-table th { text-align: start; color: var(--muted); font-weight: var(--fw-medium); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); background: var(--card); white-space: nowrap; }
.stm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.stm-table tr:last-child td { border-bottom: 0; }
.stm-table .stm-n { text-align: end; white-space: nowrap; font-weight: var(--fw-bold); }
.stm-table .stm-b { font-weight: var(--fw-medium); }
.stm-d { white-space: nowrap; color: var(--muted); }
.stm-p { color: var(--muted); }
.stm-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.stm-msg { margin: 0; color: var(--st-wafeq_failed-fg); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.stm-actions .btn { gap: 8px; min-height: 48px; }
@media (max-width: 560px) {
  .stm-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}