/* ════════════════════════════════════════════════════════════════════
   ZGAGI — base styles and shared components. Reads tokens.css only.
   RTL first: logical properties (inline-start/end) everywhere, so the
   layout is right-to-left without a single "right:" or "left:".
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/* "hidden" means hidden, whatever display a class gives (a .btn is inline-flex: without this, a button
   hidden from who may not use it still showed) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--zg-font); font-size: var(--fs-md); line-height: var(--lh);
  color: var(--zg-text); background: var(--zg-bg);
}
h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--zg-text); }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-xl);  font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-med); }
p { margin: 0; }
.muted { color: var(--zg-text-2); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--r-md);
  font: inherit; font-weight: var(--fw-med); cursor: pointer; border: 1px solid transparent;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--zg-blue); color: #fff; box-shadow: var(--shadow-glass); }
.btn-primary:hover { background: #0B95E8; }
.btn-dark { background: var(--zg-navy); color: #fff; }
.btn-ghost { background: var(--zg-surface); color: var(--zg-navy); border-color: var(--zg-line); }
.btn-ghost:hover { background: var(--zg-ice); }
.btn-danger { background: var(--zg-surface); color: var(--zg-danger-ink); border-color: #F5C2C2; }
.btn-block { width: 100%; }
.btn-fab {
  width: 56px; height: 56px; border-radius: 50%; padding: 0; background: var(--zg-grad-main);
  color: #fff; font-size: 28px; box-shadow: var(--shadow-glass); border: none;
}

/* ── fields ── */
.field { display: grid; gap: var(--sp-1); }
.field label { font-size: var(--fs-sm); color: var(--zg-text-2); font-weight: var(--fw-med); }
.input {
  min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--zg-line); background: var(--zg-surface); font: inherit; color: var(--zg-text);
}
.input:focus { outline: none; border-color: var(--zg-blue); box-shadow: var(--focus); }
.search { position: relative; }
.search .input { width: 100%; padding-inline-start: 40px; }
.search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--zg-text-2); }

/* ── cards ── */
.card {
  background: var(--zg-surface); border: 1px solid #E5EAF1; border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-4);
}
.stat { display: grid; gap: var(--sp-1); }
.stat .v { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--zg-navy); line-height: 1.1; }
.stat .l { font-size: var(--fs-sm); color: var(--zg-text-2); }
.stat .ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; }

/* ── status badge ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-med); white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-draft      { background: var(--st-draft-bg);      color: var(--st-draft-fg); }
.st-quote      { background: var(--st-quote-bg);      color: var(--st-quote-fg); }
.st-factory    { background: var(--st-factory-bg);    color: var(--st-factory-fg); }
.st-production { background: var(--st-production-bg); color: var(--st-production-fg); }
.st-ready      { background: var(--st-ready-bg);      color: var(--st-ready-fg); }
.st-installed  { background: var(--st-installed-bg);  color: var(--st-installed-fg); }
.st-cancelled  { background: var(--st-cancelled-bg);  color: var(--st-cancelled-fg); }

/* ── list rows ── */
.row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid #EEF2F7; min-height: var(--tap);
}
.row:last-child { border-bottom: none; }
.row .t { font-weight: var(--fw-med); }
.row .s { font-size: var(--fs-sm); color: var(--zg-text-2); }
.thumb { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--zg-ice); display: grid; place-items: center; }

/* ── app shell: bottom bar on phones, side menu from tablet up ── */
.shell { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #EEF2F7;
}
.topbar .logo { height: 28px; display: block; }
.main { padding: var(--sp-4); padding-bottom: calc(var(--nav-h) + var(--sp-6) + env(safe-area-inset-bottom)); }
.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--zg-surface); border-top: 1px solid #E5EAF1; z-index: 10;
}
.bottom-nav a {
  display: grid; place-items: center; align-content: center; gap: 2px; color: var(--zg-text-2);
  text-decoration: none; font-size: 11px; min-height: var(--tap);
}
.bottom-nav a.on { color: var(--zg-blue); font-weight: var(--fw-med); }
.bottom-nav .fab-slot { position: relative; }
.bottom-nav .fab-slot .btn-fab { position: absolute; top: -22px; inset-inline-start: 50%; transform: translateX(50%); }
.side { display: none; }

@media (min-width: 768px) {
  .shell { display: grid; grid-template-columns: var(--side-w) 1fr; }
  .side {
    display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: 0; height: 100vh;
    background: var(--zg-navy); color: #C9D6E8; padding: var(--sp-5) var(--sp-3); grid-row: 1 / span 2;
  }
  .side .logo { height: 32px; margin: 0 var(--sp-2) var(--sp-6); }
  .side a {
    display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: 0 var(--sp-3);
    border-radius: var(--r-md); color: inherit; text-decoration: none;
  }
  .side a:hover { background: rgba(255,255,255,.06); }
  .side a.on { background: rgba(14,165,255,.16); color: #fff; box-shadow: inset -3px 0 0 var(--zg-blue); }
  .side .foot { margin-top: auto; font-size: var(--fs-xs); opacity: .6; padding: 0 var(--sp-3); }
  .topbar .logo { display: none; }
  .bottom-nav { display: none; }
  .main { padding: var(--sp-6); max-width: var(--content-max); width: 100%; }
}