/* ======================================================================
   KOREALM — Component styles (flows, dashboards, calendar, payment)
   Supplements styles.css
   ====================================================================== */

/* ---------------- CTA / highlight cards ---------------- */
.cta-card { background: linear-gradient(120deg, var(--green-tint), var(--surface)); border-color: var(--green-soft-2); }
.cta-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--green); color: #eaf2ed; display: flex; align-items: center; justify-content: center; flex: none; }

/* approved banner */
.approved-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--success-soft); color: var(--success); border-radius: var(--r); }
.approved-banner strong { font-size: 15px; }

/* ---------------- inline status strips ---------------- */
.ratio-bar { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.ratio-bar.ok { background: var(--success-soft); color: var(--success); }
.ratio-bar.warn { background: var(--warning-soft); color: var(--warning); }
.info-strip { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; background: var(--info-soft); color: var(--info); }
.vendor-strip { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: var(--r); font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.vendor-strip strong { color: var(--ink); }
.warn-strip { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; background: var(--danger-soft); color: var(--danger); }

/* ---------------- date chip (tenant dashboard / lists) ---------------- */
.date-chip { width: 44px; height: 48px; border-radius: 11px; background: var(--green-soft); color: var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1; }
.date-chip.lg { width: 56px; height: 60px; border-radius: 13px; }
.date-chip .dc-m { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.date-chip.lg .dc-m { font-size: 12px; }
.date-chip .dc-d { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-top: 2px; }
.date-chip.lg .dc-d { font-size: 24px; }

/* ---------------- review grid (apply / drawers) ---------------- */
.review-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.review-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: none; }
.review-row:nth-child(odd) { background: var(--surface-2); }

/* ---------------- consent box ---------------- */
.consent-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; transition: border-color .14s, background .14s; background: var(--surface); }
.consent-box:hover { border-color: var(--line-strong); }
.consent-box.err-box { border-color: var(--danger); background: var(--danger-soft); }

/* ---------------- upload drop ---------------- */
.upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); cursor: pointer; transition: all .14s; text-align: center; }
.upload-drop:hover { border-color: var(--green-500); background: var(--green-tint); color: var(--green); }

/* ======================================================================
   FLOW LAYOUT (book inspection, apply, onboarding)
   ====================================================================== */
.flow { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; max-width: 920px; margin: 0 auto; }
.flow-main { min-width: 0; }
.flow-aside { position: sticky; top: calc(var(--nav-h) + 20px); }

/* num step pill */
.num-step { width: 24px; height: 24px; border-radius: 99px; background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; flex: none; }

/* success card */
.success-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.success-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; }
.success-card .panel, .success-card .cost-list, .success-card .receipt { text-align: left; width: 100%; }
.success-card .row { justify-content: center; }
.success-card .panel .row, .success-card .receipt .row { justify-content: space-between; }

/* ---------------- calendar (book inspection) ---------------- */
.day-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.day-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: all .14s; font-family: var(--font-ui); }
.day-cell:hover { border-color: var(--green-500); background: var(--green-tint); }
.day-cell.sel { background: var(--green); border-color: var(--green); }
.day-cell.sel .dc-dow, .day-cell.sel .dc-mon { color: #cfe0d7; }
.day-cell.sel .dc-day { color: #fff; }
.dc-dow { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dc-day { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.dc-mon { font-size: 11.5px; color: var(--ink-3); }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { padding: 11px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); transition: all .14s; }
.slot:hover:not(:disabled) { border-color: var(--green-500); background: var(--green-tint); }
.slot.sel { background: var(--green); border-color: var(--green); color: #fff; }
.slot:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- cost list (payment) ---------------- */
.cost-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cost-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cost-row:last-child { border-bottom: none; }
.cost-row .mono { font-size: 15px; }
.cost-row.total { background: var(--surface-2); }
.pay-total { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin: 6px 0 4px; border-top: 1px solid var(--line); }

/* bank box */
.bank-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.bank-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.bank-row .muted { font-size: 13.5px; }

/* receipt */
.receipt { padding: 16px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r); margin-top: 18px; font-size: 14px; }

/* ======================================================================
   KYC (landlord upload + admin verify)
   ====================================================================== */
.kyc-doc { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); transition: border-color .14s; }
.kyc-doc:hover { border-color: var(--line-strong); }
.kyc-doc .doc-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex: none; }
.kyc-doc.uploaded .doc-ic { background: var(--green-soft); color: var(--green); }
.kyc-doc.verified .doc-ic { background: var(--success-soft); color: var(--success); }

/* doc thumbnail (admin review) */
.doc-thumb { aspect-ratio: 4/3; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; cursor: pointer; transition: box-shadow .14s, transform .14s; }
.doc-thumb:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }

/* ======================================================================
   COMMISSION / payout breakdown (admin + landlord)
   ====================================================================== */
.split-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.split-bar .seg-payout { background: var(--green); }
.split-bar .seg-comm { background: var(--gold); }
.split-legend { display: flex; gap: 18px; margin-top: 12px; }
.split-legend .lg-item { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.split-legend .lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* mini bar chart (dashboards) */
.barchart { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 8px; }
.barchart .bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barchart .bc-bar { width: 100%; max-width: 38px; background: var(--green-soft-2); border-radius: 6px 6px 0 0; transition: height .5s cubic-bezier(.2,.8,.2,1); position: relative; }
.barchart .bc-bar.accent { background: var(--green); }
.barchart .bc-lbl { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* ======================================================================
   ADMIN — queue rows, vendor picker
   ====================================================================== */
.queue-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .14s, box-shadow .14s; }
.queue-row:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.queue-row .qr-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.vendor-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; transition: all .14s; background: var(--surface); width: 100%; text-align: left; }
.vendor-pick:hover { border-color: var(--green-500); background: var(--green-tint); }
.vendor-pick.sel { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); background: var(--green-tint); }
.vendor-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--gold); }

/* timeline */
.timeline { display: flex; flex-direction: column; position: relative; padding-left: 6px; }
.tl-item { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 1.5px; background: var(--line-2); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 18px; height: 18px; border-radius: 99px; background: var(--surface); border: 2px solid var(--line-strong); flex: none; z-index: 1; display: flex; align-items: center; justify-content: center; }
.tl-dot.done { background: var(--green); border-color: var(--green); color: #fff; }
.tl-dot.current { border-color: var(--green); }
.tl-dot.current::after { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--green); }
.tl-body { padding-top: -2px; }

/* segmented filter row */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

/* KPI card with accent left */
.kpi-strip { display: grid; gap: 14px; }

/* property row (landlord) */
.prop-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .14s, box-shadow .14s; }
.prop-row:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.prop-row .pr-photo { width: 76px; height: 58px; border-radius: 9px; flex: none; }

/* big number on onboarding */
.welcome-banner { background: linear-gradient(120deg, var(--green), var(--green-600)); color: #eef3ef; border-radius: var(--r-lg); padding: 22px 24px; position: relative; overflow: hidden; }
.welcome-banner::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px); }
.welcome-banner h2 { color: #fff; position: relative; }
.welcome-banner p { position: relative; }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow-aside { position: static; order: -1; }
  .day-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .day-grid { grid-template-columns: repeat(2, 1fr); }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
}