/* ST Courier ERP — styles for the feature modules.
   Loaded after app.css. Only uses tokens defined in tokens.css. */

/* ---------------------------------------------------------------- notes */
.note {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; line-height: 1.5;
}
.note + .note { margin-top: var(--s2); }
.note svg { flex: none; margin-top: 1px; }
.note-success { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-soft); }
.note-danger  { border-color: color-mix(in srgb, var(--danger) 40%, transparent);  background: var(--danger-soft); }
.note-warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-soft); }
.note-info    { border-color: color-mix(in srgb, var(--info) 40%, transparent);    background: var(--info-soft); }

/* ---------------------------------------------------------------- chips that act as buttons */
.chip-clickable { cursor: pointer; border: 1px solid transparent; transition: all .12s ease; }
.chip-clickable:hover { filter: brightness(1.08); border-color: var(--border-strong); }

/* ---------------------------------------------------------------- dashboard */
.exception-card { cursor: pointer; }
.story-list { display: flex; flex-direction: column; gap: var(--s2); }
.story-step {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.story-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: var(--primary-contrast);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ai-answer { font-size: 13px; line-height: 1.6; }
.ai-answer ul { margin: 6px 0 0 18px; }
.ai-answer li { margin: 2px 0; }

/* ---------------------------------------------------------------- booking desk */
.booking-grid { align-items: start; }
.cn-msg { margin-top: 6px; min-height: 20px; font-size: 13px; }
.cn-ok, .cn-bad { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cn-ok { color: var(--success); }
.cn-bad { color: var(--danger); }
.svc-box { margin-top: 8px; }
.svc-facts { flex-wrap: wrap; gap: var(--s3); }
.svc-facts > span { display: inline-flex; align-items: center; gap: 4px; }
.dims-box { margin-top: var(--s3); }
.dim-group { display: flex; align-items: center; gap: 4px; }
.dim-group > .small { margin-right: 4px; }
.dim-input { width: 62px; }
.quote-box { min-height: 120px; }
.quote-head { text-align: center; padding-bottom: var(--s3); border-bottom: 1px dashed var(--border); margin-bottom: var(--s3); }
.quote-total { font-size: 30px; font-weight: 700; letter-spacing: -.5px; color: var(--text); }
.quote-eta { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.booked-panel { text-align: center; }
.booked-cn { font-size: 26px; font-weight: 700; letter-spacing: 1px; margin-bottom: var(--s2); }
.booked-panel .kv { text-align: left; margin-top: var(--s3); }
.voice-mic { display: grid; place-items: center; position: relative; width: 76px; height: 76px; margin: 0 auto var(--s2); border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.voice-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); animation: st-pulse 1.4s ease-out infinite; }
@keyframes st-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.voice-line { min-height: 54px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; line-height: 1.5; }

/* ---------------------------------------------------------------- consignment detail */
.pod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pod-photo {
  display: grid; place-items: center; gap: 6px; min-height: 130px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-muted); font-size: 12px; text-align: center; padding: var(--s3);
}
.pod-grid > p { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- hub: receiving */
.scan-counters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.scan-counter { flex: 1 1 120px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.scan-counter-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.scan-counter-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.scan-counter.tone-success { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-soft); }
.scan-counter.tone-warning { border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: var(--warning-soft); }
.scan-counter.tone-danger  { border-color: color-mix(in srgb, var(--danger) 45%, transparent);  background: var(--danger-soft); }
.scan-counter.tone-info    { border-color: color-mix(in srgb, var(--info) 45%, transparent);    background: var(--info-soft); }
.scan-counter.tone-accent  { border-color: color-mix(in srgb, var(--accent) 45%, transparent);  background: var(--accent-soft); }

.bag-check-list { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow-y: auto; }
.bag-check { display: flex; align-items: center; gap: var(--s2); padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 12.5px; }
.bag-check-icon { display: inline-flex; flex: none; }
.bag-check.is-in { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-soft); }
.bag-check.is-in .bag-check-icon { color: var(--success); }
.bag-check.is-out { background: var(--surface-2); }
.bag-check.is-out .bag-check-icon { color: var(--text-faint); }
.bag-check.is-excess { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); }
.bag-check.is-excess .bag-check-icon { color: var(--danger); }
.bag-check .small { margin-left: auto; }

.direct-banner {
  display: flex; align-items: center; gap: var(--s3);
  padding: 14px 16px; margin: var(--s3) 0; border-radius: var(--radius);
  background: var(--success-soft); border: 2px solid var(--success); color: var(--text);
  animation: st-flash-in .25s ease;
}
.direct-banner svg { color: var(--success); flex: none; }
.direct-banner strong { display: block; font-size: 15px; letter-spacing: .5px; }
@keyframes st-flash-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- hub: sorting */
.sort-result { margin-top: var(--s3); }
.sort-card { display: flex; gap: var(--s4); align-items: stretch; padding: var(--s4); border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface-2); }
.sort-good { border-color: var(--success); background: var(--success-soft); }
.sort-bad  { border-color: var(--danger);  background: var(--danger-soft); }
.sort-bin { flex: none; display: grid; place-items: center; align-content: center; min-width: 110px; padding: var(--s3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.sort-bin-label { font-size: 11px; letter-spacing: 2px; color: var(--text-muted); }
.sort-bin-no { font-size: 46px; font-weight: 800; line-height: 1; }
.sort-info { flex: 1; min-width: 0; }
.sort-headline { font-size: 22px; font-weight: 700; line-height: 1.2; }
.sort-sub { color: var(--text-muted); margin-bottom: var(--s2); }
.sort-line { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 13px; }
.sort-card.sort-bad .sort-bin-no { color: var(--danger); }

/* ---------------------------------------------------------------- hub: bagging & loading */
.bag-row { display: flex; align-items: center; gap: var(--s2); padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.bag-row.is-active { border-color: var(--primary); background: var(--primary-soft); }
.bag-row .flex-1 { min-width: 0; }
.load-gauge { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.load-gauge > :first-child { flex: none; width: 190px; }
.load-facts { flex: 1; min-width: 220px; }

/* ---------------------------------------------------------------- hub: pieces */
.piece-grid { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--s3); }
.piece-dot { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 600; border: 1px solid var(--border); }
.piece-ok { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.piece-missing { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---------------------------------------------------------------- hub: weighing */
.scale-readout {
  font-family: var(--mono); font-size: 40px; font-weight: 700; text-align: center;
  padding: var(--s4); border-radius: var(--radius); letter-spacing: 2px;
  background: #0d1117; color: #4ade80; border: 2px solid var(--border-strong);
}

/* ---------------------------------------------------------------- printing (on-screen preview) */
.print-doc, .print-bagtag, .print-receipt { color: #000; background: #fff; padding: 14px; font-size: 12px; }
.print-doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px; }
.print-brand { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: #0c2454; }
.print-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.print-table th, .print-table td { border: 1px solid #999; padding: 4px 6px; text-align: left; font-size: 11px; vertical-align: top; }
.print-table th { background: #f0f0f0; width: 90px; font-weight: 600; }
.print-list th { width: auto; }
.print-terms { font-size: 9px; color: #444; margin-top: 8px; line-height: 1.4; }
.print-sign { display: flex; justify-content: space-between; margin-top: 26px; font-size: 11px; }
.print-sign > div { border-top: 1px solid #000; padding-top: 3px; width: 40%; text-align: center; }
.print-receipt { width: 280px; margin: 0 auto; font-family: var(--mono); font-size: 11px; }
.print-receipt hr { border: none; border-top: 1px dashed #000; margin: 6px 0; }
.print-receipt .kv { font-size: 11px; }
.print-bagtag .bagtag-dest { font-size: 30px; font-weight: 800; text-align: center; margin: 10px 0; border: 3px solid #000; padding: 8px; }
.print-bagtag .bagtag-warn { margin-top: 10px; text-align: center; font-weight: 700; border: 2px dashed #000; padding: 6px; }

.label-sheet { display: flex; flex-wrap: wrap; gap: var(--s3); }
.print-label {
  width: 384px; min-height: 560px; background: #fff; color: #000;
  border: 1px solid #000; padding: 8px; font-size: 11px; display: flex; flex-direction: column;
  page-break-after: always;
}
.label-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 4px; font-weight: 700; }
.label-brand { background: #0c2454; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 15px; }
.label-pay { border: 2px solid #000; padding: 1px 6px; }
.label-route { font-size: 56px; font-weight: 800; text-align: center; letter-spacing: 2px; line-height: 1.1; margin: 6px 0 0; }
.label-branch { text-align: center; font-size: 15px; font-weight: 700; border-bottom: 2px solid #000; padding-bottom: 6px; }
.label-to { padding: 8px 2px; font-size: 12px; line-height: 1.45; flex: 1; }
.label-to strong { font-size: 14px; }
.label-bar { text-align: center; border-top: 1px dashed #000; padding-top: 6px; }
.label-foot { display: flex; justify-content: space-between; border-top: 2px solid #000; padding-top: 4px; font-weight: 600; }

/* ---------------------------------------------------------------- delivery app */
.drs-stop { display: flex; gap: var(--s3); padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.drs-seq { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.drs-stop.is-done { opacity: .62; }
.drs-stop.is-done .drs-seq { background: var(--success-soft); color: var(--success); }
.drs-stop.is-failed .drs-seq { background: var(--danger-soft); color: var(--danger); }
.otp-boxes { display: flex; gap: var(--s2); justify-content: center; margin: var(--s3) 0; }
.otp-boxes input { width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: 700; font-family: var(--mono); }
.sign-pad { height: 130px; border: 2px dashed var(--border-strong); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--text-muted); background: var(--surface-2); cursor: crosshair; }
.upi-qr { display: grid; place-items: center; gap: var(--s2); padding: var(--s3); }

/* ---------------------------------------------------------------- care / voice agent */
.call-log { display: flex; flex-direction: column; gap: var(--s2); max-height: 460px; overflow-y: auto; padding: var(--s2); }
.bubble { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.bubble-agent { align-self: flex-start; background: var(--surface-3); border-bottom-left-radius: 4px; }
.bubble-caller { align-self: flex-end; background: var(--accent-soft); color: var(--text); border-bottom-right-radius: 4px; }
.bubble-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.cost-meter { display: flex; align-items: baseline; gap: var(--s2); font-family: var(--mono); }
.cost-meter b { font-size: 22px; }

/* ---------------------------------------------------------------- tracking (public) */
.public-page { max-width: 860px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
.public-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; }
.track-milestones { display: flex; gap: 4px; margin: var(--s4) 0; }
.track-ms { flex: 1; text-align: center; font-size: 11px; color: var(--text-muted); }
.track-ms-bar { height: 6px; border-radius: 3px; background: var(--surface-3); margin-bottom: 6px; }
.track-ms.is-done .track-ms-bar { background: var(--success); }
.track-ms.is-current .track-ms-bar { background: var(--primary); }
.track-ms.is-done, .track-ms.is-current { color: var(--text); font-weight: 600; }
.fraud-warning { border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); background: var(--warning-soft); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; }

/* ---------------------------------------------------------------- misc helpers used by modules */
.flex-1 { flex: 1; min-width: 0; }
.text-warning { color: var(--warning); }
.text-success { color: var(--success); }
.text-info { color: var(--info); }

@media (max-width: 900px) {
  .sort-card { flex-direction: column; }
  .sort-bin { min-width: 0; }
  .pod-grid { grid-template-columns: 1fr; }
  .print-label { width: 100%; }
}

/* ---------------------------------------------------------------- delivery phone app */
.phone-stage { display: flex; justify-content: center; padding: var(--s3) 0; }
.phone-tabs { display: flex; border-top: 1px solid var(--border); background: var(--surface-2); }
.phone-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 10.5px; font-family: inherit;
}
.phone-tab.active { color: var(--primary); font-weight: 600; }
.phone-tab:hover { color: var(--text); }
.p-2 { padding: var(--s2); }
.drs-header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------- AI */
.ai-chairman { font-size: 17px; line-height: 1.7; }
.range { width: 100%; accent-color: var(--primary); }

/* ---------------------------------------------------------------- reports */
.report-layout { align-items: start; }
.report-row {
  display: flex; align-items: flex-start; gap: var(--s2); width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; cursor: pointer; font-family: inherit; color: var(--text);
}
.report-row:hover { background: var(--surface-2); border-color: var(--border); }
.report-row.is-active { background: var(--primary-soft); border-color: var(--primary); }
.report-icon { flex: none; color: var(--text-muted); margin-top: 1px; }
.report-row.is-active .report-icon { color: var(--primary); }
.report-name { display: block; font-size: 13px; font-weight: 600; }
.report-desc { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 1px; }
.report-star { color: var(--warning); }
.report-params { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.report-param { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.report-param .field-label { margin: 0; }
.report-param-actions { display: flex; gap: var(--s2); margin-left: auto; align-items: flex-end; flex-wrap: wrap; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.report-title { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 6px; }