/* Biashara — app styles. Potiva DS loaded first; tokens alias the DS so colour,
   spacing and type come from the shared system. Accent = steel indigo. The look
   is deliberately formal/professional: crisp radii, restrained palette, subtle
   depth, monochrome line icons, tabular figures. */
:root {
  --ds-primary: #33487a;         /* steel indigo — business, trust */
  --ds-primary-ink: #ffffff;
  --ds-primary-weak: #eef1f7;
  --biz-primary-dark: #263a63;
  /* alias the shared design-system tokens (fallbacks match the DS values) */
  --biz-bg:      var(--surface-2, #f4f7fa);
  --biz-surface: var(--surface, #ffffff);
  --biz-ink:     var(--ink, #14213a);
  --biz-soft:    var(--ink-soft, #445068);
  --biz-muted:   var(--ink-muted, #556074);   /* AA 5.6:1 — was a too-faint 4.7 */
  --biz-line:    var(--line, #e2e8f0);
  --biz-ok: #157a43;      --biz-ok-bg: #e8f4ec;
  --biz-warn: #9a5b00;    --biz-warn-bg: #f7edd9;
  --biz-danger: #b42525;  --biz-danger-bg: #fbe8e8;
  --biz-radius: 12px;
  --biz-radius-sm: 9px;
  --biz-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --biz-shadow-md: 0 2px 8px rgba(16, 24, 40, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--biz-bg); color: var(--biz-ink);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 15px; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
.biz-boot { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 28px; color: var(--biz-muted); }

/* inputs + buttons */
.ds-input { width: 100%; padding: 11px 13px; border: 1px solid var(--biz-line); border-radius: var(--biz-radius-sm);
  font-size: 16px; background: #fff; color: var(--biz-ink); margin-top: 4px; }
.ds-input:focus { outline: 2px solid var(--ds-primary); outline-offset: 1px; border-color: var(--ds-primary); }
.ds-btn { min-height: 46px; padding: 0 18px; border-radius: var(--biz-radius-sm); border: 1px solid transparent;
  font-size: 15px; font-weight: 600; cursor: pointer; background: #fff; color: var(--biz-ink); transition: background .12s, border-color .12s; }
.ds-btn-primary { background: var(--ds-primary); color: #fff; }
.ds-btn-primary:hover { background: var(--biz-primary-dark); }
.ds-btn-primary:disabled { opacity: .55; cursor: default; }
.ds-btn-ghost { background: #fff; color: var(--ds-primary); border-color: var(--biz-line); }
.ds-btn-ghost:hover { border-color: var(--ds-primary); }
.biz-del { color: var(--biz-danger) !important; }
.biz-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: biz-spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
.ds-btn-ghost .biz-spin { border-color: rgba(51,72,122,.35); border-top-color: var(--ds-primary); }
@keyframes biz-spin { to { transform: rotate(360deg); } }

/* ---------- onboarding ---------- */
.biz-onboard { max-width: 480px; margin: 0 auto; padding: 28px 20px 60px; text-align: center; position: relative; }
.biz-onboard-logo { color: var(--ds-primary); margin: 4px auto 8px; width: 44px; height: 44px; }
.biz-onboard-logo svg { width: 44px; height: 44px; }
.biz-onboard h1 { font-size: 23px; margin: 8px 0 4px; letter-spacing: -.01em; }
.biz-onboard-sub { color: var(--biz-soft); margin: 0 0 20px; font-size: 15px; }
.biz-onboard .biz-lbl { display: block; text-align: left; margin: 14px 0 0; font-weight: 600; font-size: 13px; color: var(--biz-soft); }
.biz-onboard-next { width: 100%; margin-top: 22px; }
.biz-onboard-back { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--biz-muted); padding: 10px; cursor: pointer; font-size: 14px; }
.biz-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.biz-tpl { text-align: left; background: #fff; border: 1.5px solid var(--biz-line); border-radius: var(--biz-radius); padding: 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.biz-tpl:hover { box-shadow: var(--biz-shadow-md); }
.biz-tpl.on { border-color: var(--ds-primary); box-shadow: 0 0 0 1px var(--ds-primary); }
.biz-tpl-ico { color: var(--ds-primary); width: 26px; height: 26px; }
.biz-tpl-ico svg { width: 26px; height: 26px; }
.biz-tpl-n { font-weight: 700; margin: 8px 0 4px; font-size: 15px; }
.biz-tpl-b { color: var(--biz-muted); font-size: 13px; line-height: 1.4; }

/* ---------- suite chrome: top bar (home link + language) ---------- */
.biz-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--biz-line); }
.pf-apps { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--biz-radius-sm); color: var(--biz-muted); text-decoration: none; flex: none; }
.pf-apps:hover { background: var(--biz-bg); color: var(--ds-primary); }
.biz-topbar-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; min-width: 0; }
.biz-topbar-brand .biz-brand-t { font-size: 15px; letter-spacing: -.01em; }
.biz-langpills { margin-left: auto; display: inline-flex; gap: 2px; background: var(--biz-bg); border: 1px solid var(--biz-line); border-radius: var(--r-pill, 999px); padding: 3px; flex: none; }
.biz-lang-pill { border: 0; background: transparent; color: var(--biz-muted); font-weight: 700; font-size: 13px; min-height: 40px; min-width: 42px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.biz-lang-pill.on { background: var(--ds-primary); color: #fff; }
.biz-onboard-top { display: flex; align-items: center; margin-bottom: 6px; }
.biz-onboard-top .biz-langpills { margin-left: auto; }

/* brand + connector icons (monochrome line glyphs) */
.biz-brand-ico { display: inline-flex; color: var(--ds-primary); }
.biz-brand-ico svg { width: 22px; height: 22px; }
.biz-nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; }
.biz-nav-ico svg { width: 20px; height: 20px; }

/* ---------- app frame ---------- */
.biz-app { display: flex; min-height: calc(100vh - 54px); }
.biz-side { width: 236px; background: #fff; border-right: 1px solid var(--biz-line); display: flex; flex-direction: column; position: sticky; top: 54px; height: calc(100vh - 54px); }
.biz-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; font-weight: 700; }
.biz-brand-t { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-nav { flex: 1; padding: 8px; overflow-y: auto; }
.biz-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: var(--biz-radius-sm); cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--biz-soft); position: relative; }
.biz-nav-item:hover { background: var(--biz-bg); color: var(--biz-ink); }
.biz-nav-item.on { background: var(--ds-primary-weak); color: var(--ds-primary); font-weight: 700; }
.biz-nav-badge { background: var(--biz-danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 7px; margin-left: auto; min-width: 18px; text-align: center; }
.biz-side-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--biz-line); }
.biz-actas-mini { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.3; }
.biz-actas-mini small { color: var(--biz-muted); font-weight: 500; }

.biz-main { flex: 1; min-width: 0; padding: 24px clamp(16px, 4vw, 40px) 90px; max-width: 780px; }

/* ---------- shared connector UI ---------- */
.biz-view-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.biz-view-head h2, .biz-head h2 { font-size: 21px; margin: 0; letter-spacing: -.01em; }
.biz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.biz-back { width: 38px; height: 38px; border-radius: var(--biz-radius-sm); border: 1px solid var(--biz-line); background: #fff; font-size: 22px; cursor: pointer; line-height: 1; color: var(--biz-soft); }
.biz-back:hover { border-color: var(--ds-primary); color: var(--ds-primary); }
.biz-card { background: var(--biz-surface); border: 1px solid var(--biz-line); border-radius: var(--biz-radius); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--biz-shadow); }
.biz-card-t { font-weight: 700; margin-bottom: 8px; }
.biz-lbl { display: block; font-weight: 600; font-size: 13px; color: var(--biz-soft); margin: 12px 0 0; }
.biz-lbl:first-child { margin-top: 0; }
.biz-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--biz-line); }
.biz-row:last-child { border-bottom: none; }
.biz-tap { cursor: pointer; margin: 0 -6px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.biz-tap:hover { background: var(--biz-bg); }
.biz-row-t { font-weight: 600; font-size: 15px; }
.biz-row-s { color: var(--biz-muted); font-size: 13px; margin-top: 2px; }
.biz-row-amt { font-weight: 700; color: var(--biz-danger); white-space: nowrap; font-variant-numeric: tabular-nums; }
.biz-stat { display: flex; align-items: center; justify-content: space-between; background: var(--ds-primary); color: #fff; padding: 16px 18px; border-radius: var(--biz-radius); margin-bottom: 14px; }
.biz-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.biz-add { min-height: 40px; padding: 0 14px; }
.biz-note { background: var(--ds-primary-weak); border-radius: var(--biz-radius-sm); padding: 10px 12px; font-size: 13px; color: var(--biz-soft); line-height: 1.45; }
.biz-sec-t { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--biz-muted); margin: 18px 2px 8px; }
.biz-amount { font-variant-numeric: tabular-nums; }

/* empty states — teach + offer the next action */
.biz-empty { text-align: center; color: var(--biz-muted); padding: 30px 16px; font-size: 14px; }
.biz-empty-ico { color: var(--ds-primary); opacity: .55; width: 40px; height: 40px; margin: 0 auto 12px; }
.biz-empty-ico svg { width: 40px; height: 40px; }
.biz-empty-t { font-weight: 700; font-size: 15px; color: var(--biz-ink); }
.biz-empty-d { font-size: 13px; color: var(--biz-muted); margin: 5px auto 0; line-height: 1.5; max-width: 300px; }
.biz-empty .ds-btn { margin-top: 16px; min-width: 160px; }

/* chips */
.biz-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--biz-bg); color: var(--biz-soft); white-space: nowrap; border: 1px solid var(--biz-line); }
.biz-chip-warn { background: var(--biz-warn-bg); color: var(--biz-warn); border-color: transparent; }
.biz-chip-ok { background: var(--biz-ok-bg); color: var(--biz-ok); border-color: transparent; }
.biz-chip-danger { background: var(--biz-danger-bg); color: var(--biz-danger); border-color: transparent; }
.biz-pending { border-color: var(--biz-warn); }

/* dashboard */
.biz-hello { margin-bottom: 18px; }
.biz-hello-t { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.biz-hello-s { color: var(--biz-muted); font-size: 14px; margin-top: 2px; }
.biz-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.biz-widget { text-align: left; background: #fff; border: 1px solid var(--biz-line); border-radius: var(--biz-radius); padding: 16px; cursor: pointer; box-shadow: var(--biz-shadow); transition: border-color .12s, box-shadow .12s; }
.biz-widget:hover { border-color: var(--ds-primary); box-shadow: var(--biz-shadow-md); }
.biz-widget-v { font-size: 23px; font-weight: 800; color: var(--ds-primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.biz-widget-t { font-size: 13.5px; margin-top: 4px; font-weight: 600; }
.biz-widget-s { font-size: 12px; color: var(--biz-muted); margin-top: 2px; }

/* approvals */
.biz-approve { border-color: var(--ds-primary); }
.biz-approve-btns { display: flex; gap: 10px; margin-top: 12px; }
.biz-approve-btns .ds-btn { flex: 1; }

/* settings tabs + toggles + matrix */
.biz-tabs { display: flex; gap: 4px; background: var(--biz-bg); border: 1px solid var(--biz-line); border-radius: var(--biz-radius-sm); padding: 4px; margin-bottom: 16px; }
.biz-tab { flex: 1; min-height: 40px; border: none; background: none; border-radius: 7px; font-weight: 600; font-size: 13.5px; color: var(--biz-muted); cursor: pointer; }
.biz-tab.on { background: #fff; color: var(--ds-primary); box-shadow: var(--biz-shadow); }
.biz-toggle { width: 46px; height: 27px; border-radius: 16px; border: none; background: #cbd3e0; position: relative; cursor: pointer; flex: none; padding: 0; transition: background .14s; }
.biz-toggle span { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .14s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.biz-toggle.on { background: var(--ds-primary); }
.biz-toggle.on span { left: 22px; }
.biz-matrix-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.biz-matrix-row .biz-lbl { margin: 0; }
.biz-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--biz-line); background: #fff; color: var(--biz-danger); cursor: pointer; }

/* segmented control (payment type) */
.biz-seg { display: flex; gap: 4px; margin-top: 4px; background: var(--biz-bg); border: 1px solid var(--biz-line); border-radius: var(--biz-radius-sm); padding: 4px; }
.biz-seg-btn { flex: 1; min-height: 44px; border: none; background: none; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--biz-muted); cursor: pointer; }
.biz-seg-btn.on { background: #fff; color: var(--ds-primary); box-shadow: var(--biz-shadow); }

/* money / ledger */
.biz-profit { background: var(--ds-primary); color: #fff; border-radius: var(--biz-radius); padding: 18px 20px; margin-bottom: 14px; display: flex; flex-direction: column; box-shadow: var(--biz-shadow-md); }
.biz-profit.neg { background: #6f2b2b; }
.biz-profit span { font-size: 13.5px; opacity: .85; }
.biz-profit b { font-size: 29px; margin: 3px 0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.biz-profit small { opacity: .82; font-size: 12px; }
.biz-money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.biz-money-card { text-align: left; background: #fff; border: 1px solid var(--biz-line); border-radius: var(--biz-radius); padding: 14px; cursor: pointer; box-shadow: var(--biz-shadow); transition: border-color .12s; }
.biz-money-card:hover { border-color: var(--ds-primary); }
.biz-money-card.muted { opacity: .55; }
.biz-money-v { font-size: 18px; font-weight: 800; color: var(--ds-primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.biz-money-t { font-size: 13px; color: var(--biz-muted); margin-top: 3px; }

/* sales / invoicing */
.biz-stat-grid { display: flex; gap: 10px; margin-bottom: 14px; }
.biz-stat-half { flex: 1; margin-bottom: 0; }
.biz-stat-alt { background: var(--biz-primary-dark); }
.biz-line { padding: 8px 0; border-bottom: 1px solid var(--biz-line); }
.biz-line:last-of-type { border-bottom: none; }
.biz-line-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.biz-line-row .s-qty { max-width: 74px; }
.biz-line-row .s-price { flex: 1; }
.biz-switch-row { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; }
.biz-totals { margin-top: 12px; }
.biz-totals > div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--biz-muted); }
.biz-totals > div b { color: var(--biz-ink); font-variant-numeric: tabular-nums; }
.biz-totals-grand { border-top: 1px solid var(--biz-line); margin-top: 4px; padding-top: 8px !important; font-size: 16px !important; color: var(--biz-ink) !important; font-weight: 700; }
.biz-totals-grand b { font-size: 18px; color: var(--ds-primary) !important; }
.biz-form-actions { display: flex; gap: 10px; }
.biz-form-actions .ds-btn { flex: 1; }

/* bottom nav (mobile) */
.biz-bottom { display: none; }
.biz-bn-ico { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.biz-bn-ico svg { width: 22px; height: 22px; }
.biz-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: var(--biz-ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 60; max-width: 90vw; box-shadow: var(--biz-shadow-md); }
.biz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .biz-side { display: none; }
  .biz-main { padding: 16px 16px 96px; max-width: 100%; }
  .biz-tpl-grid { grid-template-columns: 1fr; }
  .biz-bottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--biz-line); z-index: 50; padding-bottom: env(safe-area-inset-bottom); }
  .biz-bn { flex: 1; border: none; background: none; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--biz-muted); cursor: pointer; }
  .biz-bn.on { color: var(--ds-primary); font-weight: 700; }
  .biz-bn-ico .biz-nav-badge { position: absolute; top: -6px; left: 13px; margin: 0; }
}