/* SHABAB BINAA PRO 1.0.0 - design pass of the screens (WP20). Loaded by app.css (@import). Rules for page classes of all
   packages + fixes found with tests/ui/design.shots.js (PC 1366 + phone 390, EN + AR, light + dark). Look: SB picture 14 Nov 2026,
   navy + gold, clean warm page, gold pill main button, soft filled inputs, cards with large round corners. Notes: docs/DESIGN-CHECK.txt */

/* ---------------------------------------------------------------- shell */
/* side menu: on PC the white column runs down the whole page (also in long pages) */
@media (min-width: 861px) {
  .body { background: linear-gradient(to right, var(--card) 240px, transparent 240px); }
  html[dir="rtl"] .body { background: linear-gradient(to left, var(--card) 240px, transparent 240px); }
}
.side a { min-height: 36px; display: flex; align-items: center; }
.side a.on { font-weight: 600; }
.top-logo { border-radius: 10px; }

/* page head: title + short grey line + tools */
.ph { margin-bottom: 14px; }
.ph h2 { line-height: 1.2; }
.ph-tools .btn { white-space: nowrap; }

/* the (i) hint on a gold / navy button keeps a visible ring */
.btn.gold .hi, .chip.on .hi { border-color: currentColor; color: inherit; opacity: 0.85; }
.btn:not(.gold):not(.ghost) .hi { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.top .hi { border-color: var(--gold2); color: var(--gold2); }
/* (i) inside a tab button: the tab rule must not stretch it */
.tabs .hi { border: 1px solid var(--gold); padding: 0; margin: 0 4px; width: 17px; height: 17px; border-radius: 50%; color: var(--gold);
  align-self: center; display: inline-flex; }
.tabs button { display: inline-flex; align-items: center; }

/* headings inside cards */
.card > h3:first-child, .card > h4:first-child { margin-top: 0; }
.card h4 { margin: 0 0 10px; font-size: 1rem; display: flex; align-items: center; color: var(--navy); }
html[data-theme="dark"] .card h4, html[data-theme="dark"] .card h3 { color: var(--text); }

/* empty and loading lines */
.pg-b > p.muted:only-child, .card > p.muted:only-child { padding: 18px 4px; text-align: center; }
table.t tr.empty td { padding: 28px 12px; font-size: 0.92rem; }

/* ---------------------------------------------------------------- lists */
.list-bar select, .list-bar > input:not([type="search"]) { width: auto; flex: 0 1 190px; min-width: 140px; }
.list-bar .search { min-height: 46px; border-radius: 14px; border-color: transparent; }
.list-bar .search:focus-within { border-color: var(--action); background: var(--input-focus); }
.list-bar .search .hi { margin-inline-start: auto; }
.list-bar .field { margin: 0; flex: 0 1 200px; }
/* a search box outside the list bar (counter, item pickers) */
label.search { display: flex; align-items: center; gap: 8px; background: var(--input); border: 1.5px solid transparent; border-radius: 14px;
  padding: 0 12px; min-height: 52px; }
label.search:focus-within { border-color: var(--action); background: var(--input-focus); box-shadow: 0 0 0 3px rgba(224, 165, 38, 0.18); }
label.search input { border: 0; background: transparent; box-shadow: none; padding: 8px 2px; min-height: 46px; }
label.search input:focus { border: 0; box-shadow: none; background: transparent; }
label.search .ic { color: var(--muted); }
table.t tbody tr[data-i], table.t tbody tr[data-id] { cursor: pointer; }
table.t td.num { white-space: nowrap; }

/* chips row then a field: keep air between them */
.chips + .field, .chips + label, .chips + .grid2 { margin-top: 12px; }
.field + .chips { margin-top: -2px; margin-bottom: 12px; }
.card > .btn.ghost + .field, .card > .btn.ghost + .grid2, .card > .btn + .grid2 { margin-top: 12px; }

/* ---------------------------------------------------------------- dashboard tiles (dashboard.js) */
.db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.db-tile { margin-bottom: 0; border-top: 4px solid var(--gold); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.db-tile[data-go] { cursor: pointer; }
.db-tile[data-go]:hover { box-shadow: 0 8px 22px rgba(11, 31, 58, 0.12); }
/* gate 7: money must never be cut ("23,469.849 ..."): the value may wrap before "OMR", never inside the number */
.db-tile .big { font-size: 1.3rem; line-height: 1.2; text-align: start; white-space: normal; overflow-wrap: normal; word-break: keep-all; color: var(--navy); }
html[dir="rtl"] .db-tile .big { text-align: right; }
html[data-theme="dark"] .db-tile .big { color: var(--text); }
.db-bar-row { display: grid; grid-template-columns: 90px 1fr 110px; align-items: center; gap: 8px; margin: 3px 0; }
.db-bar { display: block; height: 10px; border-radius: 6px; background: var(--gold); }
.db-red { background: var(--red); color: #fff; }
.db-amber { background: var(--gold); color: var(--navy); }

/* ---------------------------------------------------------------- theme studio (theme.js) */
.ts { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.ts-h { font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; }
.ts-presets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ts-set { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card);
  color: var(--text); font: inherit; cursor: pointer; text-align: start; min-height: 44px; }
.ts-set.on { border-color: var(--action); box-shadow: 0 0 0 3px rgba(224, 165, 38, 0.18); }
.ts-sw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); flex: 0 0 auto; }
.ts input[type="color"] { padding: 4px 6px; height: 48px; cursor: pointer; }
.ts-prev { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.ts-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: #fff; border-bottom: 3px solid transparent; }
.ts-dot { width: 18px; height: 18px; border-radius: 6px; }
.ts-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ts-t { font-size: 1.2rem; }
.ts-in { display: block; height: 40px; border-radius: 12px; background: var(--input); }
.ts-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; font-weight: 700; }
.ts-btn2 { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); }
.ts-cr { margin: 8px 0 0; color: var(--green); }
.ts-cr.ts-low { color: var(--red); }
.ts-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------------------------------------------------------------- phone (390 px) */
@media (max-width: 760px) {
  .ts { grid-template-columns: 1fr; }
  .ts-foot .btn { width: 100%; }
  .ph h2 { font-size: 1.35rem; }
  .ph-tools { width: 100%; margin-inline-start: 0; }
  .ph-tools .btn.gold { flex: 1 1 100%; }
  .list-bar select, .list-bar > input:not([type="search"]), .list-bar .field { flex: 1 1 140px; }
  .list-bar .btn { flex: 1 1 auto; }
  .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .db-tile { padding: 12px; }
  .db-tile .big { font-size: 1.1rem; }
  .db-bar-row { grid-template-columns: 70px 1fr 80px; }
  .card { padding: 14px; }
  .btn { min-height: 46px; }
  .btn.sm { min-height: 38px; }
}

/* empty head cell of the remove-line column (stock lines) */
table.t thead td.th-blank { border-bottom: 2px solid var(--line); padding: 8px 10px; }

/* phone: table rows as cards (sb-mobile.js) - round like the other cards, first cell stands out */
@media (max-width: 600px) {
  table.t.mcard tr { border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; box-shadow: var(--shadow); border-color: transparent; }
  html[data-theme="dark"] table.t.mcard tr { border-color: var(--line); }
  table.t.mcard td:first-child { font-weight: 700; }
}

/* colour boxes (settings + theme studio): a small swatch box, not a full-width bar */
input[type="color"] { padding: 4px 6px; height: 48px; max-width: 180px; cursor: pointer; }
html[data-theme="dark"] .ts-sw { border-color: rgba(255, 255, 255, 0.4); }

/* a clickable table row carries class "link": no underline over the whole row, only a pointer */
table.t tr.link { text-decoration: none; color: inherit; padding: 0; font: inherit; cursor: pointer; }
table.t tr.link td:first-child { color: var(--navy2); font-weight: 600; }
html[data-theme="dark"] table.t tr.link td:first-child { color: var(--gold2); }

/* dark: menu links keep the text colour (the dark rule "a = gold" made the whole menu gold) */
html[data-theme="dark"] .side a { color: var(--text); }
html[data-theme="dark"] .side a.on { color: #fff; }
html[data-theme="dark"] .side a:hover { color: var(--gold2); }

/* PC login on a short window (768 px high): smaller logo so the log-in button and footer stay in view */
@media (min-width: 761px) and (max-height: 820px) {
  .login-logo { width: 96px; height: 96px; margin-bottom: 4px; }
  .login.card { padding: 18px 20px; }
  .login .ph { margin: 8px 0 4px; }
}