/* Vandok — client portal layout. Portal-specific only; everything else reused from vandok.css. */

html, body { height: 100%; }

.vd-portal {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  /* gradient-mesh atmosphere so the glass cards refract colour, same as the driver app */
  background:
    radial-gradient(130% 80% at 88% -8%, var(--vd-glow-a), transparent 55%),
    radial-gradient(130% 85% at -18% 108%, var(--vd-glow-b), transparent 55%),
    radial-gradient(100% 70% at 50% 45%, var(--vd-glow-c), transparent 68%),
    var(--vd-field);
}

/* ---- header: floating glass, thread + wordmark + client identity ---- */
.vd-portal-header {
  flex: none;
  display: flex; flex-direction: column;
  position: sticky; top: 0; z-index: 40;
}
.vd-portal-header .vd-thread { height: 3px; background: var(--vd-identity); flex: none; }
.vd-portal-header .vd-head-row {
  display: flex; align-items: center; gap: var(--vd-space-3);
  padding: var(--vd-space-4) var(--vd-space-5);
}
.vd-portal-header .vd-head-wordmark { flex: none; display: flex; align-items: center; }
.vd-portal-header .vd-head-client {
  flex: 1; min-width: 0;
  font-size: var(--vd-fs-sm); font-weight: 700; color: var(--vd-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
}
.vd-portal-header .vd-head-back {
  flex: none; width: 40px; height: 40px; border: none; background: transparent;
  color: var(--vd-ink); font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin-left: -8px;
}
.vd-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--vd-invert-bg); color: var(--vd-invert-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: 0; cursor: pointer; border: none;
}

/* ---- view: the only scrolling region ---- */
.vd-portal-view {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--vd-space-5) var(--vd-space-5) calc(var(--vd-touch-primary) + var(--vd-space-6) * 2);
  display: flex; flex-direction: column; gap: var(--vd-space-5);
}
.vd-portal-view.vd-centering { align-items: center; justify-content: center; }

/* ---- footer action bar ---- */
.vd-portal-foot {
  flex: none;
  padding: var(--vd-space-4) var(--vd-space-5);
  padding-bottom: calc(var(--vd-space-4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--vd-space-3);
}
.vd-foot-row2 { display: flex; gap: var(--vd-space-3); }
.vd-foot-row2 > .vd-btn { flex: 1; }
.vd-portal-foot:empty { display: none; }

/* ---- home: balance cards ---- */
.vd-balance-card .vd-bal-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vd-space-3); }
.vd-balance-card .vd-bal-secondary { text-align: right; }
.vd-balance-card .vd-bal-secondary .vd-bal-num { display: block; font-size: var(--vd-fs-h2); font-weight: 500; }
.vd-balance-card .vd-bal-dev { margin-top: var(--vd-space-3); padding-top: var(--vd-space-3); border-top: 1px solid var(--vd-hairline); font-weight: 700; }
.vd-balance-card .vd-bal-dev.vd-dev-up,
.vd-balance-card .vd-bal-dev.vd-dev-down { color: var(--vd-attention); }
.vd-balance-card .vd-bal-dev.vd-dev-even { color: var(--vd-ok); font-weight: 600; }
.vd-balance-card .vd-bal-note { display: block; margin-top: 4px; font-weight: 400; color: var(--vd-ink-soft); font-size: var(--vd-fs-sm); }

.vd-home-grid { display: flex; flex-direction: column; gap: var(--vd-space-5); }

/* ---- equipment rows ---- */
.vd-equip-row { display: flex; justify-content: space-between; align-items: center; gap: var(--vd-space-3); padding: var(--vd-space-2) 0; }
.vd-equip-row + .vd-equip-row { border-top: 1px solid var(--vd-hairline); }
.vd-equip-model { font-weight: 700; }

/* ---- order form ---- */
.vd-order-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.vd-order-total .vd-num { font-size: var(--vd-fs-h2); }
.vd-disclaimer {
  border-left: 3px solid var(--vd-attention);
  background: var(--vd-field);
  padding: var(--vd-space-3) var(--vd-space-4);
  font-size: var(--vd-fs-sm); color: var(--vd-ink-soft);
  border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
}
.vd-disclaimer b { color: var(--vd-ink); font-weight: 700; }

/* ---- status chips (orders list) ---- */
.vd-chip { display: inline-flex; align-items: center; font-size: var(--vd-fs-sm); font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--vd-edge); }
.vd-chip--requested { color: var(--vd-attention); border-color: var(--vd-attention); }
.vd-chip--confirmed, .vd-chip--scheduled { color: var(--vd-ok); border-color: var(--vd-ok); }
.vd-chip--delivered { color: var(--vd-ink-soft); }
.vd-chip--cancelled { color: var(--vd-fail); border-color: var(--vd-fail); }

/* ---- list rows (orders / deliveries / ledger) ---- */
.vd-list { display: flex; flex-direction: column; }
.vd-list-row { padding: var(--vd-space-3) 0; display: flex; justify-content: space-between; gap: var(--vd-space-3); align-items: flex-start; }
.vd-list-row + .vd-list-row { border-top: 1px solid var(--vd-hairline); }
.vd-list-row .vd-list-main { min-width: 0; }
.vd-list-row .vd-list-lines { color: var(--vd-ink-soft); font-size: var(--vd-fs-sm); margin-top: 2px; }
.vd-list-row .vd-list-side { flex: none; text-align: right; }

/* ---- empty states ---- */
.vd-empty { text-align: center; padding: var(--vd-space-6) var(--vd-space-4); color: var(--vd-ink-soft); }
.vd-empty .vd-empty-title { color: var(--vd-ink); font-weight: 700; font-size: var(--vd-fs-h2); margin-bottom: var(--vd-space-2); }

/* ---- tabs (ledger: 19L / 11L) ---- */
.vd-tabs { display: flex; gap: var(--vd-space-2); }
.vd-tab {
  flex: 1; height: 44px; border-radius: var(--vd-radius); border: 1px solid var(--vd-edge);
  background: var(--vd-surface); color: var(--vd-ink-soft); font-weight: 700; cursor: pointer;
}
.vd-tab[aria-pressed="true"] { background: var(--vd-invert-bg); color: var(--vd-invert-ink); border-color: var(--vd-invert-bg); }

/* ---- login (C1) ---- */
.vd-login-wrap { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--vd-space-5); align-items: center; }
.vd-login-wrap .vd-login-form { width: 100%; }
.vd-login-title { font-size: var(--vd-fs-h1); font-weight: 700; text-align: center; }
.vd-login-error { color: var(--vd-fail); font-size: var(--vd-fs-sm); text-align: center; min-height: 1.2em; }

/* ---- settings ---- */
.vd-settings-row { display: flex; justify-content: space-between; align-items: center; padding: var(--vd-space-3) 0; }
.vd-settings-row + .vd-settings-row { border-top: 1px solid var(--vd-hairline); }

/* ============================================================ desktop ≥900px */
@media (min-width: 900px) {
  .vd-portal-view {
    width: 720px; max-width: 720px; margin: 0 auto;
    padding-top: var(--vd-space-6); padding-bottom: calc(var(--vd-touch-primary) + var(--vd-space-6) * 2);
  }
  .vd-portal-header .vd-head-row,
  .vd-portal-foot { width: 720px; max-width: 720px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .vd-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vd-space-5); }
  .vd-home-grid > .vd-span-2 { grid-column: 1 / -1; }
}