/* Agency (travel-agency / B2B) screens. Built from the same tokens as the rest of the app; only what is new is defined here. */

/* ── Status of an agency booking ── */
.badge.ag-enquiry { background: var(--st-enquiry-bg); color: var(--st-enquiry-ink); }
.badge.ag-quoted { background: var(--st-tentative-bg); color: var(--st-tentative-ink); }
.badge.ag-advance { background: var(--st-hold-bg); color: var(--st-hold-ink); }
.badge.ag-confirmed { background: var(--st-confirmed-bg); color: var(--st-confirmed-ink); }
.badge.ag-completed { background: var(--st-out-bg); color: var(--st-out-ink); }
.badge.ag-cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-ink); }

/* "Needs attention" flags beside a status */
.agflags { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.agflag { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 1px 8px 1px 6px; border-radius: 99px; background: var(--mist-2); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.agflag svg { flex: none; }
.agflag.warn { background: var(--warn-bg); color: #5E3E00; }
.agflag.bad { background: var(--danger-bg); color: #7C2415; }
.agflag.info { background: var(--horizon-tint); color: #0A3F7A; }
.agflag.more { padding-inline: 8px; color: var(--ink-3); }
.bal.resort { color: var(--st-in-ink); }
.due-text { color: var(--danger); font-weight: 600; }
.mt-s { margin-top: 4px; }

/* ── Page frame ── */
.agencypage .tabs { margin-bottom: var(--s4); }
.agencybody { min-width: 0; }
.agtiles { margin-bottom: 12px; }
.agstats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.agattn { margin-bottom: 14px; }
.agattn .attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px; }
.agtiles:empty, .agattn:empty, .agsoon:empty, .agonboard:empty { display: none; }
.agonboardcard { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.agonboardcard .empty-ico { margin: 0; flex: none; }
.agonboardcard h3 { font-size: var(--fs-lg); }
.agonboardcard .grow { min-width: 220px; }
.agsubhead { margin: 24px 0 10px; font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); }

/* ── Bookings list ── */
.agchips { margin-bottom: 12px; }
.chipn { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 7px; padding: 0 6px; border-radius: 99px; background: var(--mist-2); color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip[aria-pressed='true'] .chipn { background: rgba(255, 255, 255, .22); color: #fff; }
.agtable td { vertical-align: top; }
.agtable td.right, .agtable td .due-text { white-space: nowrap; }
.agtable .code { font-variant-numeric: tabular-nums; }
.agcard .rescard-bot.agfin { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.agsooncard { margin-top: 18px; padding-bottom: 6px; }
.agsoonlist { display: flex; flex-direction: column; }
.agsoonrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 6px; text-align: left; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; }
.agsoonrow:first-child { border-top: 0; }
.agsoonrow:hover { background: var(--mist); }
.agsoonrow .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agsoonend { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }

/* ── One booking (drawer) ── */
.agnodates { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 600; }
.agconf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--mist); }
.agconf small { display: block; margin-bottom: 2px; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.agconf b { font-size: var(--fs-md); letter-spacing: .01em; overflow-wrap: anywhere; }
.kvs { margin: 0; }
.agmargin { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--canopy-tint); }
.agmargin b { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--canopy); }
.agmargin b.refund { color: var(--danger); }
.pay.out .pay-amt { color: var(--ink-2); }
.pay.out.refund .pay-amt { color: var(--ok); }
.pay.out.void .pay-amt { color: var(--ink-4); }

/* ── Booking form ── */
.agmarginline { padding: 9px 12px; border-radius: 10px; background: var(--canopy-tint); color: var(--canopy); font-size: var(--fs-sm); font-weight: 600; }
.agmarginline.neg { background: var(--danger-bg); color: #7C2415; }

/* ── Partner resorts ── */
.resortcard { cursor: default; }
.resortcard:hover { box-shadow: 0 4px 16px rgba(21, 48, 42, .08); }
.resortmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.badge.plain.warn { background: var(--warn-bg); color: #5E3E00; }
.resortcard .propcard-foot { flex-wrap: wrap; row-gap: 6px; }

/* ── Money ── */
.moneygrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.moneycol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.moneycard { margin-bottom: 0; }
.moneycard > .card-head { flex-wrap: nowrap; align-items: flex-start; }
.moneycard > .card-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.moneycard > .card-head > .moneytotal { flex: none; }
.moneytotal { font-family: var(--font-display); font-weight: 600; font-size: 22px; white-space: nowrap; }
.moneytotal.due, .moneytotal.bad { color: var(--danger); }
.moneytotal.good { color: var(--ok); }
.moneyrows { display: flex; flex-direction: column; }
.moneyrow { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-top: 1px solid var(--line); }
.moneyrow:hover { background: var(--mist); }
.moneyrow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 11px 0 11px 16px; text-align: left; border: 0; background: transparent; color: inherit; }
.moneyrow-top { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; min-width: 0; }
.moneyrow-top b { min-width: 0; max-width: 100%; }
.moneyrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; padding: 8px 0; }
.moneyrow-amt { font-size: var(--fs-md); font-weight: 700; }
.moneyrow-amt.due, .moneyrow-amt.bad { color: var(--danger); }
.moneyrow-amt.good { color: var(--ok); }
.moneywhen { color: var(--ink-3); }
.moneywhen.bad { color: var(--danger); font-weight: 600; }
.moneyempty { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 16px 16px; }
.moneyempty svg { color: var(--ok); flex: none; }

/* ── Reports ── */
.agbasis { margin-left: 6px; }
.agnote { margin-bottom: 12px; }
.agreport tfoot th, .agreport tfoot td { font-weight: 700; background: var(--mist); border-top: 2px solid var(--line-strong); border-bottom: 0; text-align: left; }
.agreport tfoot td.right { text-align: right; }
.agreport tfoot th { color: var(--ink); }
.print-sheet .agreport tfoot th, .print-sheet .agreport tfoot td { background: #eee; border-top: 2px solid #000; }

/* ── Voucher (paper) ── */
.agvoucher .voucher-brand { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--canopy); }
.agvoucher .voucher-head .right { text-align: right; }
.agvoucher .voucher-conf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; border: 1px dashed var(--canopy); border-radius: 8px; background: var(--canopy-tint); }
.agvoucher .voucher-conf small { color: var(--ink-3); font-size: 11px; }
.agvoucher .voucher-conf b { font-size: 16px; letter-spacing: .02em; }
.agvoucher .voucher-note { margin: 0; white-space: pre-wrap; color: var(--ink-2); font-size: 12px; }
.agvoucher .voucher-table td { vertical-align: top; }
.agvoucher .voucher-table td.vlabel { width: 28%; color: var(--ink-3); }

/* ── Tags ── */
.agtags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.agflag.ok { background: var(--st-confirmed-bg); color: var(--st-confirmed-ink); }



/* ── Phone ── */
@media (max-width: 520px) {
  .agstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moneyrow { padding-right: 12px; }
  .moneyrow-main { padding-left: 14px; }
  .agonboardcard .btn { width: 100%; }
}