/* ════════════════════════════════════════════════════════════════
   DEADLINE ALERTS — subway-line cards with full-width station chain
   ════════════════════════════════════════════════════════════════ */

.dl-alerts {
  background: #ffffff;
  border: 1px solid #e7dfcc;
  border-radius: 16px;
  margin: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13,27,42,.05);
}

.dl-alerts-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #eee7d4;
  background: linear-gradient(180deg, #fbf7ec 0%, #ffffff 100%);
}
.dl-alerts-head .ttl {
  font-size: .82rem;
  font-weight: 800;
  color: #0d1b2a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dl-alerts-head .ttl .icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(160deg, #c39940, #8a6a2e);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 3px 8px -3px rgba(195,153,64,.5);
}
.dl-alerts-head .summary {
  display: flex; align-items: center; gap: 12px;
  font-size: .65rem; color: #34465c; font-weight: 700;
  justify-content: center;
}
.dl-alerts-head .summary span {
  display: inline-flex; align-items: center; gap: 5px;
}
.dl-alerts-head .summary .d {
  width: 7px; height: 7px; border-radius: 50%;
}
.dl-alerts-head .summary .d.r { background: #b3261e; }
.dl-alerts-head .summary .d.a { background: #a86706; }
.dl-alerts-head .summary .d.g { background: #1a6b3b; }
.dl-alerts-head .summary b { color: #0d1b2a; font-weight: 800; }
.dl-alerts-head .count-pill {
  font-size: .55rem; background: #fef3c7; color: #92400e;
  padding: 3px 9px; border-radius: 10px; font-weight: 800;
  border: 1px solid #fde68a; letter-spacing: .04em;
}

.dl-alerts-empty {
  padding: 14px 18px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
}
.dl-alerts-empty .ico { font-size: 1.1rem; }
.dl-alerts-empty .ttl { font-size: .82rem; font-weight: 800; color: #047857; }
.dl-alerts-empty .sub { font-size: .7rem; color: #065f46; font-weight: 700; }

/* ────────────────────────────────────────
   CARD
   ──────────────────────────────────────── */
.dl-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 14px 24px 18px 24px;
  border-bottom: 1px solid #f4eed9;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
  background: #fff;
}
.dl-card:hover { background: #fffaeb; }
.dl-card:last-child { border-bottom: none; }

.dl-stripe {
  position: absolute;
  inset: 14px auto 18px 0;
  width: 5px; border-radius: 99px;
  background: #c39940;
}
.dl-card.r .dl-stripe { background: linear-gradient(180deg, #dc3a30, #9a2018); }
.dl-card.a .dl-stripe { background: linear-gradient(180deg, #e89c2a, #a86706); }
.dl-card.g .dl-stripe { background: linear-gradient(180deg, #3aa063, #1a6b3b); }

/* TOP ROW — full info distributed across width */
.dl-top {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding-right: 14px;
}

/* Late pill */
.dl-late-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  background: #fde7e3;
  border: 1px solid #f1c9c2;
  white-space: nowrap;
}
.dl-card.a .dl-late-pill { background: #fbeed0; border-color: #ecd9a5; }
.dl-card.g .dl-late-pill { background: #dff0e3; border-color: #bcd9c4; }
.dl-late-pill .n {
  font-size: 18px; font-weight: 800; color: #b3261e; line-height: 1;
}
.dl-card.a .dl-late-pill .n { color: #a86706; }
.dl-card.g .dl-late-pill .n { color: #1a6b3b; }
.dl-late-pill .u {
  font-size: 11px; color: #34465c; font-weight: 800;
}

/* ID + client — strong visual block */
.dl-id {
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  padding: 8px 18px 8px 22px;
  background: linear-gradient(180deg, #fffefa 0%, #fbf7ec 100%);
  border: 1px solid #eee7d4;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(13,27,42,.04), inset 0 0 0 1px rgba(255,255,255,.6);
}
.dl-id .num {
  display: inline-flex; align-items: center; gap: 1px;
  background: linear-gradient(160deg, #0d1b2a 0%, #1f2d42 100%);
  color: #d9b873;
  font-size: 17px; font-weight: 800; letter-spacing: .02em;
  padding: 7px 13px; border-radius: 9px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(217,184,115,.35), 0 4px 10px -4px rgba(13,27,42,.4);
}
.dl-id .num::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #d9b873; margin-left: 8px;
  box-shadow: 0 0 8px rgba(217,184,115,.6);
}
.dl-id .client {
  font-size: 24px; font-weight: 800; color: #0d1b2a;
  letter-spacing: -.01em; line-height: 1;
}

/* Meta chips */
.dl-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding-right: 4px;
}
.dl-chip {
  background: #fbf7ec; color: #34465c;
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid #eee7d4;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.dl-chip.now {
  background: #fde7e3; color: #b3261e; border-color: #f1c9c2;
}
.dl-card.a .dl-chip.now { background: #fbeed0; color: #a86706; border-color: #ecd9a5; }
.dl-card.g .dl-chip.now { background: #dff0e3; color: #1a6b3b; border-color: #bcd9c4; }

/* Dates */
.dl-dates {
  display: flex; gap: 12px; align-items: center;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.dl-dates .row { display: flex; align-items: baseline; gap: 5px; }
.dl-dates .lbl {
  color: #7c8597; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 800;
}
.dl-dates .v { color: #0d1b2a; font-size: 14px; }
.dl-dates .v.bad { color: #b3261e; }
.dl-dates .v.warn { color: #a86706; }
.dl-dates .arr { color: #a3aab6; margin: 0 2px; }

/* Actions */
.dl-actions { display: flex; gap: 6px; }
.dl-actions button {
  font-family: inherit; font-weight: 800; font-size: 11px;
  padding: 7px 12px; border-radius: 8px;
  cursor: pointer;
  border: 1px solid #e7dfcc;
  background: #fff; color: #34465c;
  white-space: nowrap;
}
.dl-actions button.go { background: #0d1b2a; color: #fff; border-color: #0d1b2a; }
.dl-actions button.gold {
  background: linear-gradient(160deg, #c39940, #8a6a2e);
  color: #fff; border-color: #8a6a2e;
}

/* SUBWAY LINE — full width */
.dl-line { padding: 8px 0 4px; direction: ltr; }
.dl-line-track {
  display: flex; align-items: center; gap: 0;
  height: 14px; position: relative;
}
.dl-seg {
  flex: 1; height: 6px; background: #e7dfcc; position: relative;
}
.dl-seg.done { background: linear-gradient(90deg, #3aa063, #1a6b3b); }
.dl-seg.todo {
  background: repeating-linear-gradient(90deg, #eee7d4 0 6px, transparent 6px 10px);
}
.dl-seg:first-child { border-radius: 0 99px 99px 0; }
.dl-seg:last-child { border-radius: 99px 0 0 99px; }

.dl-stops {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.dl-stop {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2.5px solid #e7dfcc;
  position: relative; z-index: 2;
}
.dl-stop.done {
  background: #1a6b3b; border-color: #1a6b3b;
}
.dl-stop.now {
  width: 24px; height: 24px;
  background: #fff; border: 4px solid #b3261e;
  box-shadow: 0 0 0 4px rgba(220,58,48,.18);
  animation: dl-pulse 1.4s ease-in-out infinite;
}
.dl-stop.now::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; background: #b3261e;
}
.dl-card.a .dl-stop.now { border-color: #a86706; box-shadow: 0 0 0 4px rgba(232,156,42,.18); }
.dl-card.a .dl-stop.now::after { background: #a86706; }
.dl-card.g .dl-stop.now { border-color: #1a6b3b; box-shadow: 0 0 0 4px rgba(58,160,99,.18); }
.dl-card.g .dl-stop.now::after { background: #1a6b3b; }

@keyframes dl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.dl-labels {
  display: flex; justify-content: space-between;
  margin-top: 8px; direction: rtl;
}
.dl-lbl {
  flex: 1; text-align: center;
  font-size: 10px; font-weight: 800; color: #7c8597;
  letter-spacing: .04em; white-space: nowrap;
}
.dl-lbl.done { color: #1a6b3b; }
.dl-lbl.now { color: #b3261e; font-size: 11px; }
.dl-lbl.now b {
  display: block; font-weight: 800; font-size: 9px;
  color: #34465c; margin-top: 1px; letter-spacing: 0;
}
.dl-card.a .dl-lbl.now { color: #a86706; }
.dl-card.g .dl-lbl.now { color: #1a6b3b; }

/* ────────────────────────────────────────
   COMPACT VARIANT — for dashboard banner
   ──────────────────────────────────────── */
.dl-card.compact {
  padding: 10px 18px 12px 18px;
}
.dl-card.compact .dl-stripe {
  inset: 10px auto 12px 0;
}
.dl-card.compact .dl-top {
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
}
.dl-card.compact .dl-late-pill { padding: 4px 10px; }
.dl-card.compact .dl-late-pill .n { font-size: 15px; }
.dl-card.compact .dl-late-pill .u { font-size: 10px; }
.dl-card.compact .dl-id {
  padding: 5px 12px 5px 14px; gap: 10px;
}
.dl-card.compact .dl-id .num {
  padding: 5px 9px; font-size: 13px;
}
.dl-card.compact .dl-id .num::before {
  width: 5px; height: 5px; margin-left: 6px;
}
.dl-card.compact .dl-id .client { font-size: 17px; }
.dl-card.compact .dl-meta { display: none; }
.dl-card.compact .dl-dates { font-size: 11px; gap: 8px; }
.dl-card.compact .dl-dates .v { font-size: 12px; }
.dl-card.compact .dl-actions button { padding: 5px 9px; font-size: 10px; }
.dl-card.compact .dl-line { padding: 4px 0 2px; }
.dl-card.compact .dl-line-track { height: 10px; }
.dl-card.compact .dl-seg { height: 4px; }
.dl-card.compact .dl-stop { width: 10px; height: 10px; border-width: 2px; }
.dl-card.compact .dl-stop.now { width: 18px; height: 18px; border-width: 3px; }
.dl-card.compact .dl-stop.now::after { inset: 3px; }
.dl-card.compact .dl-labels { display: none; }

/* Responsive: narrow screens collapse top row */
@media (max-width: 900px) {
  .dl-top {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .dl-meta {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .dl-id .client { font-size: 18px; }
  .dl-labels { font-size: 9px; }
}