/* MONOBUS_TYM_DEPARTMENT_SEAT_REFILL_V2_1_UI */
html.tym-dept-seat-refill-v2-active #tym-seat-refill-launcher {
  display: none !important;
}

#tym-dept-seat-refill-v2-root {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 14px 0 18px !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  align-self: stretch !important;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  color: #172033;
}

#tym-dept-seat-refill-v2-root * { box-sizing: border-box; }

.tym-dsr-card {
  width: 100%;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
  overflow: hidden;
}

.tym-dsr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
}

.tym-dsr-head-main { min-width: 0; }
.tym-dsr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .035em;
  color: #2563eb;
  text-transform: uppercase;
}

.tym-dsr-title {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  color: #172033;
}

.tym-dsr-subtitle {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.tym-dsr-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.tym-dsr-date-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #dbe5f2;
  border-radius: 9px;
  background: #f8fbff;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.tym-dsr-btn {
  appearance: none;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #ccd6e3;
  border-radius: 9px;
  background: #fff;
  color: #24324a;
  font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
.tym-dsr-btn:hover { background: #f7f9fc; }
.tym-dsr-btn:disabled { cursor: not-allowed; opacity: .48; }
.tym-dsr-btn.primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.tym-dsr-btn.primary:hover { background: #1d4ed8; }
.tym-dsr-btn.success { border-color: #059669; background: #059669; color: #fff; }
.tym-dsr-btn.success:hover { background: #047857; }

.tym-dsr-body { padding: 14px 18px 17px; }

.tym-dsr-statusline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #f8fafc;
}
.tym-dsr-statusline[data-tone="wait"] { border-color: #f5d78b; background: #fffaf0; }
.tym-dsr-statusline[data-tone="work"] { border-color: #bfd8ff; background: #f4f8ff; }
.tym-dsr-statusline[data-tone="ready"] { border-color: #a7e4ca; background: #f0fbf6; }
.tym-dsr-statusline[data-tone="danger"] { border-color: #f5b8b8; background: #fff6f6; }

.tym-dsr-dot {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}
[data-tone="wait"] .tym-dsr-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.11); }
[data-tone="work"] .tym-dsr-dot { background: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.11); }
[data-tone="ready"] .tym-dsr-dot { background: #059669; box-shadow: 0 0 0 4px rgba(5,150,105,.11); }
[data-tone="danger"] .tym-dsr-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.11); }

.tym-dsr-status-main { min-width: 0; flex: 1; }
.tym-dsr-status-main strong { display: block; font-size: 13px; line-height: 1.35; color: #1f2937; }
.tym-dsr-status-main span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.42; color: #6b7280; }

/* Compact workflow: one continuous line, not six bulky cards. */
.tym-dsr-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 14px 4px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tym-dsr-step {
  position: relative;
  min-width: 96px;
  flex: 1 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  color: #9aa6b6;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
}
.tym-dsr-step::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 15px);
  right: calc(-50% + 15px);
  height: 2px;
  background: #e5eaf1;
  z-index: 0;
}
.tym-dsr-step:last-child::after { display: none; }
.tym-dsr-step-num {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 2px solid #dce3ec;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}
.tym-dsr-step-label { max-width: 110px; font-weight: 700; }
.tym-dsr-step.done { color: #15803d; }
.tym-dsr-step.done .tym-dsr-step-num { border-color: #86d5ac; background: #effbf4; color: #15803d; }
.tym-dsr-step.done::after { background: #9eddbb; }
.tym-dsr-step.current { color: #1d4ed8; }
.tym-dsr-step.current .tym-dsr-step-num { border-color: #6ea8ff; background: #eef5ff; color: #1d4ed8; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.tym-dsr-step.ready { color: #047857; }
.tym-dsr-step.ready .tym-dsr-step-num { border-color: #34c28a; background: #eafaf2; color: #047857; box-shadow: 0 0 0 3px rgba(5,150,105,.08); }

.tym-dsr-refill {
  margin-top: 16px;
  border-top: 1px solid #e8edf3;
  padding-top: 15px;
}

.tym-dsr-refill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.tym-dsr-refill-title { min-width: 0; }
.tym-dsr-refill-head strong { display: block; font-size: 15px; color: #172033; }
.tym-dsr-refill-head small { display: block; margin-top: 3px; color: #6b7280; font-size: 12px; }

.tym-dsr-stats {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, minmax(115px, .8fr));
  gap: 9px;
  margin-bottom: 11px;
}
.tym-dsr-stat {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.tym-dsr-stat span { display: block; font-size: 11px; color: #6b7280; }
.tym-dsr-stat b { display: block; margin-top: 2px; font-size: 19px; line-height: 1.2; color: #172033; }
.tym-dsr-stat.emphasis { border-color: #8bd5b4; background: #f0fbf6; }
.tym-dsr-stat.emphasis span, .tym-dsr-stat.emphasis b { color: #047857; }
.tym-dsr-stat.emphasis b { font-size: 24px; }

.tym-dsr-rounds {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 11px;
}
.tym-dsr-round-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #dce5ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
}
.tym-dsr-round-pill b { color: #047857; font-size: 12px; }

.tym-dsr-list-head {
  display: grid;
  grid-template-columns: 82px minmax(180px, 1.15fr) minmax(190px, 1fr) 200px;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #e3e9f0;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tym-dsr-vehicles {
  border: 1px solid #e3e9f0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: #fff;
}
.tym-dsr-vehicle {
  display: grid;
  grid-template-columns: 82px minmax(180px, 1.15fr) minmax(190px, 1fr) 200px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f5;
}
.tym-dsr-vehicle:last-child { border-bottom: 0; }
.tym-dsr-vehicle:hover { background: #fbfdff; }
.tym-dsr-vehicle-round strong { display: block; font-size: 13px; color: #1d4ed8; }
.tym-dsr-vehicle-round span { display: block; margin-top: 2px; font-size: 10px; color: #94a3b8; }
.tym-dsr-vehicle-route { min-width: 0; }
.tym-dsr-vehicle-route strong { display: block; font-size: 12px; line-height: 1.35; color: #172033; overflow-wrap: anywhere; }
.tym-dsr-vehicle-route span { display: block; margin-top: 2px; font-size: 10px; color: #94a3b8; overflow-wrap: anywhere; }
.tym-dsr-vehicle-unit { min-width: 0; }
.tym-dsr-vehicle-unit strong { display: block; font-size: 12px; line-height: 1.35; color: #172033; }
.tym-dsr-vehicle-unit span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: #6b7280; overflow-wrap: anywhere; }
.tym-dsr-vehicle-actions-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tym-dsr-seat-pill {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #eafaf2;
  color: #047857;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}
.tym-dsr-seat-pill b { display: block; font-size: 16px; line-height: 1.05; }
.tym-dsr-vehicle-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.tym-dsr-vehicle-actions .tym-dsr-btn { min-height: 30px; padding: 5px 8px; font-size: 10.5px; }

.tym-dsr-list-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #7b8797;
}
.tym-dsr-empty {
  padding: 13px 14px;
  border: 1px dashed #d7e0ea;
  border-radius: 10px;
  background: #fafcfe;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
.tym-dsr-error {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 9px;
  background: #fff6f6;
  color: #991b1b;
  font-size: 12px;
  line-height: 1.45;
}

/* Internal diagnostics stay in DOM only when needed, never shown to clerks. */
.tym-dsr-debug { display: none !important; }

@media (max-width: 1180px) {
  .tym-dsr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tym-dsr-list-head { display: none; }
  .tym-dsr-vehicles { border: 0; border-radius: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; background: transparent; }
  .tym-dsr-vehicle { display: block; border: 1px solid #e3e9f0; border-radius: 10px; padding: 11px; }
  .tym-dsr-vehicle-round, .tym-dsr-vehicle-route, .tym-dsr-vehicle-unit { margin-bottom: 7px; }
  .tym-dsr-vehicle-actions-wrap { justify-content: space-between; align-items: flex-end; }
}

@media (max-width: 760px) {
  #tym-dept-seat-refill-v2-root { margin-top: 10px !important; }
  .tym-dsr-head { align-items: flex-start; flex-direction: column; padding: 13px; }
  .tym-dsr-actions { width: 100%; justify-content: space-between; }
  .tym-dsr-body { padding: 12px 13px 14px; }
  .tym-dsr-steps { margin-left: 0; margin-right: 0; }
  .tym-dsr-step { min-width: 82px; flex-basis: 82px; }
  .tym-dsr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tym-dsr-refill-head { align-items: flex-start; flex-direction: column; }
  .tym-dsr-refill-head .tym-dsr-btn { width: 100%; }
  .tym-dsr-vehicles { grid-template-columns: 1fr; }
}