/* ═══════════════════════════════════════════════════════════════════════════
   TARTIB UI · DENSITY LAYER
   brand/ui.css → /brand/ui.css  (copied to every host by site.yml, like the
   rest of brand/)

   Hussain, 10 Sep 2026, holding Zoho Inventory beside our console: "check what
   is the style Zoho Inventory uses and lets use the same exactly and same
   compact size, not like the bulky you are doing, without over colours ...
   colors will follow Tenant Colors like zoho is doing" — then, on the sample:
   "lets use this style for OrderTech and Tartib."

   So this file is the SHAPE of a screen: how dense a row is, how a table is
   ruled, what a card's edge looks like, how a thing with a picture is listed,
   and what a tick in the margin means. It is measured off that reference:

     13px base · 32px nav rows · 34px table rows · 1px hairlines · 6px radius
     · no shadows anywhere · one accent, from the tenant.

   ⚠️ IT DEFINES NO COLOUR OF ITS OWN. Every value here is a token from
   tartib-tokens.css, which already settles what colour means: --accent is
   chrome, --ok/--warn/--bad/--info are data, and the two never borrow from
   each other. A tenant's own colour arrives by that file's accent block and
   this one follows it without knowing what it is.

   ⚠️ DATA MARKS USE --accent-deep, NOT --accent, AND THAT IS A MEASUREMENT.
   tartib-tokens.css records --accent #00BEEC at 2.19:1 on white — fine for a
   nav pill, invisible as a bar. So bars, progress fills and any mark carrying
   a value take --accent-deep here. The same trap is one careless line away in
   every screen this file will dress.

   ⚠️ SCOPED UNDER .ui ON PURPOSE. The OrderTech console owns .card, .btn and
   .tbl already, and tartib-ui.css owns others; a global rule here would repaint
   nine live screens the moment it deployed. A page opts in by putting class
   "ui" on the element that wraps the part being converted, so this estate moves
   screen by screen and a half-migrated page still works.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui{
  --ui-row:34px;            /* a table row, and the rhythm everything else keeps */
  --ui-nav-row:32px;
  --ui-radius:6px;
  --ui-pad:14px;
  font-size:13px;
  line-height:1.5;
  color:var(--body);
}
.ui *{box-sizing:border-box}
.ui a{color:var(--accent-ink);text-decoration:none}
.ui a:hover{text-decoration:underline}

/* ── page furniture ─────────────────────────────────────────────────────── */
.ui .page{padding:16px 22px}
.ui .ph{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.ui .ph h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ui .ph .sub{margin-top:2px;font-size:12.5px;color:var(--mute)}
.ui .ph .act{margin-inline-start:auto;display:flex;gap:7px;flex-wrap:wrap}

.ui .tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:14px}
.ui .tabs a{padding:0 0 8px;font-size:13px;color:var(--mute);border-bottom:2px solid transparent;
  margin-bottom:-1px;text-decoration:none}
.ui .tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent-deep)}

.ui .bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ui .count{color:var(--mute);font-size:12px}

/* ── controls ───────────────────────────────────────────────────────────── */
.ui .btn{height:28px;padding:0 11px;border:1px solid var(--line);background:var(--surface);
  border-radius:4px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.ui .btn:hover{background:var(--bg)}
.ui .btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:1px}
.ui .btn.pri{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.ui .btn.pri:hover{filter:brightness(.94)}
.ui .btn.on{background:var(--accent-wash);border-color:var(--accent-deep);color:var(--accent-ink);font-weight:600}
.ui .btn[disabled]{opacity:.5;cursor:default}
.ui .seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.ui .seg button{height:26px;padding:0 10px;border:0;background:var(--surface);font:inherit;
  font-size:12px;color:var(--mute);cursor:pointer;border-inline-end:1px solid var(--line)}
.ui .seg button:last-child{border-inline-end:0}
.ui .seg button.on{background:var(--accent-deep);color:#fff;font-weight:600}
.ui select,.ui input[type=text],.ui input[type=search],.ui input[type=number],
.ui input[type=date],.ui input[type=email],.ui input[type=tel]{
  height:28px;border:1px solid var(--line);border-radius:4px;background:var(--surface);
  padding:0 8px;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.ui input:focus,.ui select:focus{outline:2px solid var(--accent-deep);outline-offset:-1px;border-color:var(--accent-deep)}

/* ── cards ──────────────────────────────────────────────────────────────── */
.ui .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--ui-radius);
  margin-bottom:14px}
.ui .card > .h{display:flex;align-items:center;gap:10px;padding:11px var(--ui-pad);
  border-bottom:1px solid var(--line-soft)}
.ui .card > .h h2{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.ui .card > .h .r{margin-inline-start:auto;font-size:12px;color:var(--mute);
  display:flex;align-items:center;gap:10px}
.ui .card .body{padding:12px var(--ui-pad)}
.ui .foot{display:flex;align-items:center;gap:8px;padding:10px var(--ui-pad);
  border-top:1px solid var(--line-soft);font-size:12.3px;color:var(--mute)}
.ui .foot .act{margin-inline-start:auto;display:flex;gap:7px}
.ui .grid2{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.ui .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1080px){.ui .grid2,.ui .grid3{grid-template-columns:1fr}}

/* ── the figures strip ──────────────────────────────────────────────────────
   ⚠️ TEXT IN A RULED STRIP, NOT FOUR COLOURED TILES. The reference states its
   numbers quietly and spends its ink on the table underneath, which is where
   the work is. A tile per number turns five facts into five posters. */
.ui .figs{display:flex;border:1px solid var(--line);border-radius:var(--ui-radius);
  background:var(--surface);margin-bottom:14px;overflow:hidden}
.ui .figs > div{flex:1;padding:11px var(--ui-pad);border-inline-end:1px solid var(--line-soft)}
.ui .figs > div:last-child{border-inline-end:0}
.ui .figs .k{font-size:11px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.ui .figs .v{font-size:17px;font-weight:600;margin-top:3px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ui .figs .v small{font-size:11px;color:var(--mute);font-weight:500;margin-inline-start:3px}
.ui .figs .v.bad{color:var(--bad)}

/* ── tables ─────────────────────────────────────────────────────────────── */
.ui table{border-collapse:collapse;width:100%}
.ui th{text-align:start;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mute);font-weight:600;padding:8px var(--ui-pad);border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--surface-2)}
.ui td{padding:8px var(--ui-pad);border-bottom:1px solid var(--line-soft);font-size:12.8px;
  vertical-align:middle;color:var(--body)}
.ui tbody tr:last-child td{border-bottom:0}
.ui tbody tr:hover td{background:var(--surface-2)}
.ui .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui .dim{color:var(--mute)}
.ui .nm{font-weight:600;color:var(--ink)}
.ui .s{font-size:11.5px;color:var(--mute);margin-top:1px}
.ui .scroll{overflow-x:auto}

/* ── tags: the data palette, never the accent ───────────────────────────── */
.ui .tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;
  background:var(--bg);color:var(--mute);border:1px solid var(--line)}
/* ⚠️ THE TOKEN NAMES ARE --ok-bg / --ok-line, NOT --ok-wash. Written from
   memory the first time and caught by reading tartib-tokens.css: a var() that
   names nothing falls back to the literal beside it, so the tag would have
   rendered in a hard-coded green that drifts from every other green on the
   estate the day somebody tunes the palette. No fallbacks here on purpose —
   a missing token should look wrong immediately, not almost right forever. */
.ui .tag.g{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.ui .tag.a{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.ui .tag.r{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}

/* ── a thing with a picture ─────────────────────────────────────────────────
   Hussain, 10 Sep 2026: "its very important that when we have any item or
   product we show the image or Thumbnail."

   ⚠️ 28px INSIDE A 34px ROW, so the picture rides in the line rather than
   growing it — density and the photograph are not a trade.
   ⚠️ AND A MISSING PHOTO IS A LETTER, NOT A BROKEN ICON. `no picture yet` is
   information; a torn-image glyph reads as a fault in the page and teaches
   people to distrust the row it sits in. */
.ui .it{display:flex;align-items:center;gap:9px;min-width:0}
.ui .th{width:28px;height:28px;border-radius:4px;flex:none;object-fit:cover;
  border:1px solid var(--line);background:var(--bg)}
.ui .th.ph{display:grid;place-items:center;font-size:11px;font-weight:700;
  color:var(--accent-ink);background:var(--accent-wash);border-color:var(--line)}
.ui .th.big{width:52px;height:52px;border-radius:var(--ui-radius);font-size:17px}
.ui .th.sm{width:22px;height:22px;font-size:10px}
.ui .it .tx{min-width:0}
.ui .it .tx .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── selection ──────────────────────────────────────────────────────────────
   Hussain, same message: "when its applicable we need to have a check box
   before the raw if we can do filter or action for it."

   ⚠️ THE TICK IS A PROMISE. It appears only where a bulk action exists, and
   the bar that appears with it NAMES those actions rather than showing a
   generic toolbar. Where a row cannot be acted on, the box is disabled rather
   than missing, so the column does not jump under the eye.
   ⚠️ AND NEVER ON HISTORY. A movement ledger and a report have no checkboxes:
   nothing can be done to what already happened, and offering to select it says
   otherwise. */
.ui th.sel,.ui td.sel{width:30px;padding-inline-end:0}
.ui input[type=checkbox]{width:13px;height:13px;accent-color:var(--accent-deep);margin:0;cursor:pointer}
.ui tr.picked td{background:var(--accent-wash)}
.ui .bulk{display:flex;align-items:center;gap:8px;padding:7px var(--ui-pad);
  background:var(--accent-wash);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--accent-ink);font-weight:600}
.ui .bulk .act{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.ui .bulk .btn{font-weight:400}
.ui .bulk .x{cursor:pointer;color:var(--mute);font-weight:400}

/* ── small parts ────────────────────────────────────────────────────────── */
.ui .pend .g{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);
  padding:10px var(--ui-pad) 4px;font-weight:600}
.ui .pend .r{display:flex;align-items:center;gap:8px;padding:6px var(--ui-pad);font-size:12.8px}
.ui .pend .r:hover{background:var(--surface-2)}
.ui .pend .r .v{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:600}
.ui .pend .r .v.bad{color:var(--bad)}
.ui .pend .r .car{color:var(--mute);font-size:9px}

.ui .blist .r{display:flex;align-items:center;gap:10px;padding:7px var(--ui-pad);font-size:12.8px}
.ui .blist .r .t{width:170px;flex:none}
.ui .blist .r .tr{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.ui .blist .r .tr i{display:block;height:100%;background:var(--accent-deep)}
.ui .blist .r .v{width:86px;text-align:end;font-variant-numeric:tabular-nums;color:var(--mute)}

.ui .prog{height:5px;background:var(--bg);border-radius:3px;overflow:hidden;width:110px;
  display:inline-block;vertical-align:middle;margin-inline-end:8px}
.ui .prog i{display:block;height:100%;background:var(--accent-deep)}

.ui .hint{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info);
  border-radius:5px;padding:8px 11px;font-size:12.3px;margin:10px var(--ui-pad) var(--ui-pad)}
.ui .kv{display:flex;padding:6px var(--ui-pad);font-size:12.8px;border-bottom:1px solid var(--line-soft)}
.ui .kv:last-child{border-bottom:0}
.ui .kv .k{width:140px;color:var(--mute)}
.ui .kv .v{font-weight:500;color:var(--ink)}
.ui .fr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px var(--ui-pad)}
@media(max-width:720px){.ui .fr{grid-template-columns:1fr}}
.ui .fr label{display:block;font-size:11.5px;color:var(--mute);margin-bottom:3px}
.ui .fr select,.ui .fr input{width:100%}
.ui .empty{padding:22px var(--ui-pad);text-align:center;color:var(--mute);font-size:12.8px}

/* ── the sidebar, when a page owns one ──────────────────────────────────── */
.ui-nav{width:214px;flex:none;background:var(--surface);border-inline-end:1px solid var(--line);
  padding:8px}
.ui-nav .row{display:flex;align-items:center;gap:9px;height:32px;padding:0 9px;border-radius:5px;
  color:var(--ink);font-size:13px;cursor:pointer;text-decoration:none}
.ui-nav .row:hover{background:var(--bg)}
.ui-nav .row.on{background:var(--accent-wash);color:var(--accent-ink);font-weight:600}
.ui-nav .row .car{width:9px;color:var(--mute);font-size:9px;transition:transform .15s}
.ui-nav .row.open .car{transform:rotate(90deg)}
.ui-nav .row .ico{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;
  flex:none;opacity:.75}
.ui-nav .row .n{margin-inline-start:auto;font-size:11px;color:var(--mute)}
.ui-nav .row.on .n{color:var(--accent-ink)}
.ui-nav .kids .row{height:29px;padding-inline-start:33px;font-size:12.5px;color:var(--mute)}
.ui-nav .kids .row.on{color:var(--accent-ink)}
.ui-nav .sep{height:1px;background:var(--line-soft);margin:7px 4px}

/* ── dark, borrowed from the tokens rather than invented ────────────────── */
:root[data-theme="dark"] .ui .th.ph{background:var(--accent-wash)}
:root[data-theme="dark"] .ui .bulk{background:var(--accent-wash)}