:root {
  --bg: #eef2f7;
  --ink: #101828;
  --muted: #667085;
  --panel: rgba(255,255,255,.92);
  --line: #e4e7ec;
  --blue: #2563eb;
  --blue-soft: #dbeafe;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --yellow: #f59e0b;
  --yellow-soft: #fef3c7;
  --red: #ef4444;
  --red-soft: #fee2e2;
  --gray: #98a2b3;
  --gray-soft: #e5e7eb;
  --shadow: 0 24px 80px rgba(16, 24, 40, .14);
  --radius: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(22, 163, 74, .14), transparent 30%),
    var(--bg);
}

button, select, input { font: inherit; }

.home {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.hero-card, .glass-panel {
  width: min(1120px, 100%);
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 34px;
}

.hero-card {
  text-align: center;
}

.hero-card.compact {
  width: min(850px, 100%);
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 16px;
}

h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -1.5px;
}

p {
  margin: 8px 0 0;
  color: var(--muted);
}

.station-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.station-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 24px;
  min-height: 160px;
  padding: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 6px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.station-card.big {
  min-height: 210px;
}

.station-card:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 18px 40px rgba(37,99,235,.16);
}

.station-card .icon {
  font-size: 44px;
}

.station-card strong {
  font-size: 18px;
}

.station-card small {
  color: var(--muted);
}

.page {
  padding: 24px;
}

.dark-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .22), transparent 30%),
    #0f172a;
  color: #fff;
}

.topbar {
  width: min(1380px, 100%);
  margin: 0 auto 20px;
}

.topbar.modern {
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.back-btn, .ghost, .tv-home {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  margin-bottom: 14px;
}

.back-btn.dark {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

.toolbar {
  display: grid;
  grid-template-columns: 1.15fr 1.5fr 130px auto;
  gap: 14px;
  align-items: end;
}

label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  text-align: left;
}

select, input {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 15px;
  background: #fff;
  min-height: 50px;
}

.primary, .danger {
  border: 0;
  border-radius: 16px;
  min-height: 50px;
  padding: 0 20px;
  color: white;
  font-weight: 900;
  cursor: pointer;
}

.primary { background: var(--blue); }
.danger { background: var(--red); margin-top: 20px; }

.stats-line {
  margin: 24px 0 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.stats-line strong {
  display: block;
  font-size: 20px;
}

.stats-line span {
  color: var(--muted);
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 99px;
  margin-right: 7px;
}

.dot.green { background: var(--green); }
.dot.gray { background: var(--gray); }

.queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 11px;
}

.queue-box {
  border-radius: 18px;
  padding: 18px 8px;
  min-height: 68px;
  font-weight: 950;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}

.queue-box.available {
  background: var(--green-soft);
  border-color: #86efac;
  color: #14532d;
}

.queue-box.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(22,163,74,.16);
}

.queue-box.used {
  background: var(--gray-soft);
  border-color: #d0d5dd;
  color: #667085;
  cursor: not-allowed;
}

.modern-board {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1.55fr 1.15fr;
  gap: 18px;
}

.board-section {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  padding: 18px;
  min-height: 72vh;
  backdrop-filter: blur(16px);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
  font-size: 22px;
}

.section-head span {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
  font-weight: 900;
}

.card-area {
  display: grid;
  gap: 12px;
}

.card-area.grid {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
}

.queue-card {
  border: 0;
  border-radius: 22px;
  padding: 18px 14px;
  cursor: pointer;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  transition: transform .1s ease, filter .1s ease;
}

.queue-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.queue-card small {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  opacity: .82;
}

.queue-card.current {
  background: linear-gradient(135deg, #22c55e, #86efac);
  color: #052e16;
  min-height: 150px;
  font-size: 34px;
  display: grid;
  place-items: center;
}

.queue-card.waiting {
  background: linear-gradient(135deg, #fbbf24, #fde68a);
  color: #451a03;
  min-height: 116px;
}

.queue-card.pending {
  background: linear-gradient(135deg, #ef4444, #fecaca);
  color: #450a0a;
  text-align: left;
  min-height: 98px;
}

.empty {
  border: 2px dashed rgba(152,162,179,.55);
  color: var(--muted);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  background: rgba(255,255,255,.04);
}

.dark-page .empty {
  color: rgba(255,255,255,.65);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.64);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 20;
}

.modal.hidden { display: none; }

.modal-card {
  background: #fff;
  color: var(--ink);
  width: min(460px, 100%);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--shadow);
}

#modal-actions {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.action-btn {
  border: 0;
  border-radius: 16px;
  padding: 15px;
  font-weight: 950;
  cursor: pointer;
}

.tv-page {
  min-height: 100vh;
  background: #08111f;
  color: #fff;
  padding: 24px;
}

.tv-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 22px;
}

.tv-header h1 {
  font-size: clamp(32px, 4vw, 56px);
}

.tv-header p {
  color: #cbd5e1;
  font-size: 18px;
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tv-category {
  background: linear-gradient(180deg, #132238, #0f1b2d);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 20px;
  min-height: 560px;
}

.tv-category h2 {
  margin: 0 0 18px;
  font-size: 30px;
}

.tv-label {
  font-size: 15px;
  color: #93c5fd;
  font-weight: 950;
  margin: 18px 0 10px;
  letter-spacing: .08em;
}

.tv-row {
  border-radius: 18px;
  padding: 16px;
  margin: 10px 0;
  font-weight: 950;
  font-size: 28px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.4);
}

.tv-row span {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #dcfce7;
}

.tv-pending {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
}

.tv-pending span {
  color: #fee2e2;
}

.announcements {
  margin-top: 20px;
  border-radius: 28px;
  padding: 20px;
  background: linear-gradient(90deg, rgba(37,99,235,.24), rgba(14,165,233,.14));
  border: 1px solid rgba(255,255,255,.12);
}

.announcements h2 {
  margin: 0 0 10px;
}

.announcements p {
  color: #fff;
  font-size: 22px;
  margin: 6px 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.summary-card {
  border-radius: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  background: #fff;
}

.summary-card h2 {
  margin-top: 0;
}

.summary-list {
  display: grid;
  gap: 8px;
}

.summary-list div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f4f7;
  padding-bottom: 8px;
}

@media (max-width: 1000px) {
  .station-grid, .station-grid.two, .toolbar, .modern-board, .tv-grid, .summary-grid {
    grid-template-columns: 1fr;
  }

  .board-section {
    min-height: auto;
  }
}


/* V4 Workflow Map + flexible paper flow */
.proceed-box p {
  margin: 6px 0 12px;
  color: #344054;
}

.radio-list {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  font-weight: 800;
  background: #f8fafc;
}

.radio-option input {
  min-height: auto;
  width: 18px;
  height: 18px;
}

.hidden-input {
  display: none;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #d0d5dd;
  border-radius: 14px;
  padding: 13px;
}

.queue-card small + small {
  margin-top: 2px;
  opacity: .62;
  font-size: 12px;
}

.flow-category {
  min-height: auto !important;
  padding: 18px !important;
}

.flow-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.flow-title h2 {
  margin: 0;
  font-size: 24px;
}

.flow-title span {
  border-radius: 999px;
  background: rgba(59, 130, 246, .16);
  color: #bfdbfe;
  padding: 8px 12px;
  font-weight: 900;
  border: 1px solid rgba(147,197,253,.22);
}

.tv-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.flow-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  margin-top: 16px;
}

.flow-node-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
}

.flow-node-wrap:last-child {
  grid-template-columns: minmax(0, 1fr);
}

.flow-node {
  min-height: 160px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.flow-node::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(96,165,250,.18), transparent 45%);
  pointer-events: none;
}

.stage-name {
  position: relative;
  z-index: 1;
  font-weight: 950;
  font-size: 15px;
  color: #e0f2fe;
  margin-bottom: 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.stage-queues {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
}

.flow-queue {
  border-radius: 13px;
  padding: 8px 9px;
  display: grid;
  gap: 2px;
  border: 1px solid transparent;
}

.flow-queue strong {
  font-size: 18px;
}

.flow-queue span {
  font-size: 11px;
  font-weight: 800;
  color: inherit;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-queue.current {
  color: #052e16;
  background: linear-gradient(135deg, #22c55e, #bbf7d0);
  box-shadow: 0 0 22px rgba(34,197,94,.25);
}

.flow-queue.waiting {
  color: #451a03;
  background: linear-gradient(135deg, #fbbf24, #fde68a);
}

.flow-queue.pending {
  color: #450a0a;
  background: linear-gradient(135deg, #ef4444, #fecaca);
  box-shadow: 0 0 22px rgba(239,68,68,.18);
}

.stage-empty {
  border: 1px dashed rgba(148,163,184,.35);
  color: #94a3b8;
  border-radius: 12px;
  padding: 18px 8px;
  text-align: center;
  font-weight: 900;
}

.stage-more {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.flow-arrow {
  color: #60a5fa;
  font-size: 24px;
  font-weight: 950;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(96,165,250,.45));
}

.tv-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.tv-legend span {
  color: #fff;
  font-weight: 850;
}

.tv-legend i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 99px;
  margin-right: 7px;
}

.legend-current { background: #22c55e; }
.legend-waiting { background: #fbbf24; }
.legend-pending { background: #ef4444; }

@media (max-width: 1200px) {
  .flow-map {
    grid-template-columns: 1fr;
  }

  .flow-node-wrap,
  .flow-node-wrap:last-child {
    grid-template-columns: 1fr;
  }

  .flow-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}


/* V5 optimization fixes */
.station-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}

.disabled-card {
  opacity: .55;
  cursor: not-allowed !important;
  filter: grayscale(.35);
}

.disabled-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--line) !important;
}

/* Personnel cards: smaller, denser, more useful inside each section */
.modern-board {
  grid-template-columns: 1fr 1.35fr 1fr !important;
  gap: 16px !important;
}

.board-section {
  min-height: 62vh !important;
  padding: 16px !important;
}

.card-area {
  gap: 10px !important;
}

.card-area.grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
}

.queue-card {
  border-radius: 18px !important;
  padding: 13px 10px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.14) !important;
}

.queue-card.current {
  min-height: 112px !important;
  font-size: 26px !important;
}

.queue-card.waiting {
  min-height: 94px !important;
  font-size: 16px !important;
}

.queue-card.pending {
  min-height: 86px !important;
  font-size: 16px !important;
}

.queue-card small {
  margin-top: 5px !important;
  font-size: 12px !important;
}

/* PACD: centered and phone-friendly */
.page:has(.pacd-panel) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page:has(.pacd-panel) .topbar,
.pacd-panel {
  width: min(760px, 100%) !important;
}

.pacd-panel {
  padding: 18px !important;
  border-radius: 28px !important;
}

.pacd-panel .toolbar {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.pacd-panel select,
.pacd-panel input,
.pacd-panel button {
  min-height: 48px !important;
  border-radius: 16px !important;
}

.pacd-panel .stats-line {
  flex-direction: column;
  align-items: flex-start;
  margin: 18px 0 14px !important;
}

.pacd-panel .queue-grid {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
  gap: 9px !important;
}

.pacd-panel .queue-box {
  min-height: 54px !important;
  padding: 12px 6px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

/* TV map: remove PACD gap, optimize flow nodes */
.flow-map {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.flow-node {
  min-height: 145px !important;
}

.stage-name {
  min-height: 28px !important;
}

@media (max-width: 700px) {
  .page {
    padding: 14px !important;
  }

  .topbar h1 {
    font-size: 34px !important;
    letter-spacing: -1px;
  }

  .topbar p {
    font-size: 14px;
  }

  .pacd-panel {
    padding: 14px !important;
  }

  .pacd-panel .queue-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .pacd-panel .queue-box {
    font-size: 13px !important;
    min-height: 50px !important;
  }
}

@media (max-width: 1000px) {
  .modern-board {
    grid-template-columns: 1fr !important;
  }
}


/* V6: PACD pagination, transaction colors, priority lane */
.priority-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 1px solid #facc15;
  background: #fffbeb;
  border-radius: 16px;
  padding: 13px 14px;
  min-height: 50px;
  cursor: pointer;
}

.priority-toggle input {
  min-height: auto !important;
  width: 20px;
  height: 20px;
  accent-color: #eab308;
}

.priority-toggle span {
  color: #713f12;
  font-weight: 950;
}

.transaction-color-note {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  padding: 12px 14px;
  color: #475467;
  flex-wrap: wrap;
}

.tx-dot {
  width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-block;
}

.tx-dot.yellow { background: #facc15; }
.tx-dot.blue { background: #3b82f6; }
.tx-dot.green { background: #22c55e; }
.tx-dot.purple { background: #a855f7; }
.tx-dot.orange { background: #f97316; }
.tx-dot.gold { background: linear-gradient(135deg, #f59e0b, #fef08a); }

.batch-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.batch-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  flex: 1;
}

.batch-tab,
.batch-nav {
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 950;
  color: #344054;
  white-space: nowrap;
}

.batch-tab small {
  display: block;
  font-size: 10px;
  color: #667085;
  margin-top: 2px;
}

.batch-tab.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.batch-tab.active small {
  color: #dbeafe;
}

.batch-nav:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* transaction colors for available PACD boxes */
.queue-box.available.tx-yellow { background: #fef3c7 !important; border-color: #facc15 !important; color: #713f12 !important; }
.queue-box.available.tx-blue { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e3a8a !important; }
.queue-box.available.tx-green { background: #dcfce7 !important; border-color: #86efac !important; color: #14532d !important; }
.queue-box.available.tx-purple { background: #f3e8ff !important; border-color: #c084fc !important; color: #581c87 !important; }
.queue-box.available.tx-orange { background: #ffedd5 !important; border-color: #fb923c !important; color: #7c2d12 !important; }
.queue-box.available.tx-gold,
.queue-box.priority {
  background: linear-gradient(135deg, #f59e0b, #fef08a) !important;
  border-color: #facc15 !important;
  color: #422006 !important;
  box-shadow: 0 0 0 2px rgba(250,204,21,.25), 0 10px 22px rgba(234,179,8,.18);
}

.queue-box.used.priority {
  background: linear-gradient(135deg, #fde68a, #e5e7eb) !important;
  color: #713f12 !important;
}

/* Card colors in personnel board */
.queue-card.tx-yellow { background: linear-gradient(135deg, #fbbf24, #fde68a) !important; color: #451a03 !important; }
.queue-card.tx-blue { background: linear-gradient(135deg, #3b82f6, #bfdbfe) !important; color: #071b47 !important; }
.queue-card.tx-green { background: linear-gradient(135deg, #22c55e, #bbf7d0) !important; color: #052e16 !important; }
.queue-card.tx-purple { background: linear-gradient(135deg, #a855f7, #e9d5ff) !important; color: #2e1065 !important; }
.queue-card.tx-orange { background: linear-gradient(135deg, #f97316, #fed7aa) !important; color: #431407 !important; }
.queue-card.tx-gold,
.priority-card {
  background: linear-gradient(135deg, #f59e0b, #fef08a) !important;
  color: #422006 !important;
  border: 2px solid rgba(250,204,21,.85) !important;
  box-shadow: 0 0 0 3px rgba(250,204,21,.20), 0 18px 38px rgba(234,179,8,.22) !important;
}

/* TV priority lane */
.priority-lane {
  margin: 12px 0 14px;
  border: 1px solid rgba(250,204,21,.34);
  background: linear-gradient(90deg, rgba(234,179,8,.18), rgba(250,204,21,.06));
  border-radius: 18px;
  padding: 10px 12px;
}

.priority-title {
  color: #fde68a;
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 950;
  margin-bottom: 8px;
}

.priority-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.priority-pill {
  flex: 0 0 auto;
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 100px;
  background: linear-gradient(135deg, #f59e0b, #fef08a);
  color: #422006;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(250,204,21,.18);
}

.priority-pill span {
  display: block;
  font-size: 10px;
  opacity: .72;
  margin-top: 2px;
}

.priority-empty {
  color: #fef3c7;
  opacity: .72;
  font-weight: 800;
  font-size: 13px;
}

.flow-queue.tx-yellow { background: linear-gradient(135deg, #fbbf24, #fde68a) !important; color: #451a03 !important; }
.flow-queue.tx-blue { background: linear-gradient(135deg, #3b82f6, #bfdbfe) !important; color: #071b47 !important; }
.flow-queue.tx-green { background: linear-gradient(135deg, #22c55e, #bbf7d0) !important; color: #052e16 !important; }
.flow-queue.tx-purple { background: linear-gradient(135deg, #a855f7, #e9d5ff) !important; color: #2e1065 !important; }
.flow-queue.tx-orange { background: linear-gradient(135deg, #f97316, #fed7aa) !important; color: #431407 !important; }
.flow-queue.tx-gold { background: linear-gradient(135deg, #f59e0b, #fef08a) !important; color: #422006 !important; }

.legend-priority { background: #facc15; }

@media (max-width: 700px) {
  .batch-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    padding: 6px 0;
  }

  .transaction-color-note {
    font-size: 13px;
  }

  .batch-tab {
    padding: 9px 10px;
  }
}


/* V8 resolved: transaction-specific PACD numbering + Photo/Sig */
.priority-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 1px solid #facc15;
  background: #fffbeb;
  border-radius: 16px;
  padding: 13px 14px;
  min-height: 50px;
  cursor: pointer;
}

.priority-toggle input {
  min-height: auto !important;
  width: 20px;
  height: 20px;
  accent-color: #eab308;
}

.priority-toggle span {
  color: #713f12;
  font-weight: 950;
}

.transaction-color-note {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  padding: 12px 14px;
  color: #475467;
  flex-wrap: wrap;
}

.tx-dot {
  width: 16px;
  height: 16px;
  border-radius: 99px;
  display: inline-block;
}

.tx-dot.yellow { background: #facc15; }
.tx-dot.blue { background: #3b82f6; }
.tx-dot.green { background: #22c55e; }
.tx-dot.purple { background: #a855f7; }
.tx-dot.orange { background: #f97316; }
.tx-dot.gold { background: linear-gradient(135deg, #f59e0b, #fef08a); }

.batch-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.batch-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  flex: 1;
}

.batch-tab,
.batch-nav {
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 950;
  color: #344054;
  white-space: nowrap;
}

.batch-tab small {
  display: block;
  font-size: 10px;
  color: #667085;
  margin-top: 2px;
}

.batch-tab.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.batch-tab.active small {
  color: #dbeafe;
}

.batch-nav:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.batch-empty {
  color: #667085;
  font-weight: 850;
  padding: 10px;
}

.queue-box.available.tx-yellow { background: #fef3c7 !important; border-color: #facc15 !important; color: #713f12 !important; }
.queue-box.available.tx-blue { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e3a8a !important; }
.queue-box.available.tx-green { background: #dcfce7 !important; border-color: #86efac !important; color: #14532d !important; }
.queue-box.available.tx-purple { background: #f3e8ff !important; border-color: #c084fc !important; color: #581c87 !important; }
.queue-box.available.tx-orange { background: #ffedd5 !important; border-color: #fb923c !important; color: #7c2d12 !important; }
.queue-box.available.tx-gold,
.queue-box.priority {
  background: linear-gradient(135deg, #f59e0b, #fef08a) !important;
  border-color: #facc15 !important;
  color: #422006 !important;
  box-shadow: 0 0 0 2px rgba(250,204,21,.25), 0 10px 22px rgba(234,179,8,.18);
}

.queue-box.used.priority {
  background: linear-gradient(135deg, #fde68a, #e5e7eb) !important;
  color: #713f12 !important;
}

.queue-card.tx-yellow { background: linear-gradient(135deg, #fbbf24, #fde68a) !important; color: #451a03 !important; }
.queue-card.tx-blue { background: linear-gradient(135deg, #3b82f6, #bfdbfe) !important; color: #071b47 !important; }
.queue-card.tx-green { background: linear-gradient(135deg, #22c55e, #bbf7d0) !important; color: #052e16 !important; }
.queue-card.tx-purple { background: linear-gradient(135deg, #a855f7, #e9d5ff) !important; color: #2e1065 !important; }
.queue-card.tx-orange { background: linear-gradient(135deg, #f97316, #fed7aa) !important; color: #431407 !important; }
.queue-card.tx-gold,
.priority-card {
  background: linear-gradient(135deg, #f59e0b, #fef08a) !important;
  color: #422006 !important;
  border: 2px solid rgba(250,204,21,.85) !important;
  box-shadow: 0 0 0 3px rgba(250,204,21,.20), 0 18px 38px rgba(234,179,8,.22) !important;
}

.priority-lane {
  margin: 12px 0 14px;
  border: 1px solid rgba(250,204,21,.34);
  background: linear-gradient(90deg, rgba(234,179,8,.18), rgba(250,204,21,.06));
  border-radius: 18px;
  padding: 10px 12px;
}

.priority-title {
  color: #fde68a;
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 950;
  margin-bottom: 8px;
}

.priority-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.priority-pill {
  flex: 0 0 auto;
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 100px;
  background: linear-gradient(135deg, #f59e0b, #fef08a);
  color: #422006;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(250,204,21,.18);
}

.priority-pill span {
  display: block;
  font-size: 10px;
  opacity: .72;
  margin-top: 2px;
}

.priority-empty {
  color: #fef3c7;
  opacity: .72;
  font-weight: 800;
  font-size: 13px;
}

.flow-queue.tx-yellow { background: linear-gradient(135deg, #fbbf24, #fde68a) !important; color: #451a03 !important; }
.flow-queue.tx-blue { background: linear-gradient(135deg, #3b82f6, #bfdbfe) !important; color: #071b47 !important; }
.flow-queue.tx-green { background: linear-gradient(135deg, #22c55e, #bbf7d0) !important; color: #052e16 !important; }
.flow-queue.tx-purple { background: linear-gradient(135deg, #a855f7, #e9d5ff) !important; color: #2e1065 !important; }
.flow-queue.tx-orange { background: linear-gradient(135deg, #f97316, #fed7aa) !important; color: #431407 !important; }
.flow-queue.tx-gold { background: linear-gradient(135deg, #f59e0b, #fef08a) !important; color: #422006 !important; }

.legend-priority { background: #facc15; }

.transaction-color-note strong::after {
  content: " — own numbering";
  font-weight: 800;
  color: #667085;
}

@media (max-width: 700px) {
  .station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .station-card {
    min-height: 128px !important;
    padding: 14px !important;
  }

  .station-card .icon {
    font-size: 32px !important;
  }

  .batch-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    padding: 6px 0;
  }

  .transaction-color-note {
    font-size: 13px;
  }

  .batch-tab {
    padding: 9px 10px;
  }
}


/* V10: PACD correction workflow + Releasing dashboard */
.queue-box.used {
  cursor: pointer !important;
}

.queue-box.used:hover {
  outline: 3px solid rgba(37,99,235,.18);
  transform: translateY(-1px);
}

.queue-box.used::after {
  content: "";
}

/* Pending must stay red even if transaction has color */
.flow-queue.pending,
.flow-queue.pending.tx-yellow,
.flow-queue.pending.tx-blue,
.flow-queue.pending.tx-green,
.flow-queue.pending.tx-purple,
.flow-queue.pending.tx-orange,
.flow-queue.pending.tx-gold {
  background: linear-gradient(135deg, #ef4444, #fecaca) !important;
  color: #450a0a !important;
  border: 1px solid rgba(248,113,113,.85) !important;
  box-shadow: 0 0 22px rgba(239,68,68,.22) !important;
}

.queue-card.pending,
.queue-card.pending.tx-yellow,
.queue-card.pending.tx-blue,
.queue-card.pending.tx-green,
.queue-card.pending.tx-purple,
.queue-card.pending.tx-orange,
.queue-card.pending.tx-gold {
  background: linear-gradient(135deg, #ef4444, #fecaca) !important;
  color: #450a0a !important;
}

.station-card[data-route="releasing"] {
  border-color: rgba(34,197,94,.32);
}

.station-card[data-route="releasing"] .icon {
  filter: drop-shadow(0 8px 18px rgba(34,197,94,.18));
}


/* V12: finalized update dashboard + prefixes + reset queue card */
.lto-command-center {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(239,246,255,.92)),
    radial-gradient(circle at top right, rgba(37,99,235,.18), transparent 42%),
    radial-gradient(circle at bottom left, rgba(250,204,21,.16), transparent 36%);
}

.lto-command-center::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(37,99,235,.055) 1px, transparent 1px),
    linear-gradient(rgba(37,99,235,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  mask-image: linear-gradient(130deg, black 10%, transparent 75%);
}

.dashboard-header-art {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.lto-seal {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 28%, #60a5fa, transparent 35%),
    linear-gradient(135deg, #1d4ed8, #0f172a);
  border: 6px solid #facc15;
  color: #fff;
  font-size: 32px;
  font-weight: 1000;
  letter-spacing: -1px;
  box-shadow: 0 20px 45px rgba(29,78,216,.28);
}

.dashboard-mini-stats {
  position: relative;
  z-index: 1;
  margin: 20px auto 6px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-mini-stats span {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(37,99,235,.16);
  color: #334155;
  font-weight: 850;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.lto-command-center .station-grid {
  position: relative;
  z-index: 1;
}

.station-card[data-route="releasing"] {
  border-color: rgba(34,197,94,.35);
}

.station-card[data-route="releasing"] .icon {
  filter: drop-shadow(0 8px 18px rgba(34,197,94,.20));
}

.queue-box.used {
  cursor: pointer !important;
}

.queue-box.used:hover {
  outline: 3px solid rgba(37,99,235,.18);
  transform: translateY(-1px);
}

/* Pending stays red even when transaction has its own color */
.flow-queue.pending,
.flow-queue.pending.tx-yellow,
.flow-queue.pending.tx-blue,
.flow-queue.pending.tx-green,
.flow-queue.pending.tx-purple,
.flow-queue.pending.tx-orange,
.flow-queue.pending.tx-gold,
.queue-card.pending,
.queue-card.pending.tx-yellow,
.queue-card.pending.tx-blue,
.queue-card.pending.tx-green,
.queue-card.pending.tx-purple,
.queue-card.pending.tx-orange,
.queue-card.pending.tx-gold {
  background: linear-gradient(135deg, #ef4444, #fecaca) !important;
  color: #450a0a !important;
  border-color: rgba(248,113,113,.9) !important;
}

@media (max-width: 760px) {
  .dashboard-header-art {
    flex-direction: column;
    text-align: center;
  }

  .lto-seal {
    width: 88px;
    height: 88px;
    font-size: 24px;
  }
}


/* V13: real LTO logo + separated pending lane in TV monitor */
.lto-logo {
  width: 122px;
  height: 122px;
  object-fit: contain;
  filter: drop-shadow(0 20px 45px rgba(29,78,216,.28));
}

.tv-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.tv-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(96,165,250,.32));
}

.monitor-lanes {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  margin: 12px 0 14px;
}

.pending-lane {
  border: 1px solid rgba(248,113,113,.42);
  background: linear-gradient(90deg, rgba(239,68,68,.22), rgba(127,29,29,.12));
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.pending-title {
  color: #fecaca;
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 950;
  margin-bottom: 8px;
}

.pending-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.pending-pill {
  flex: 0 0 auto;
  min-width: 150px;
  border-radius: 14px;
  padding: 9px 10px;
  background: linear-gradient(135deg, #ef4444, #fecaca);
  color: #450a0a;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(239,68,68,.22);
  border: 1px solid rgba(254,202,202,.48);
}

.pending-pill strong {
  display: block;
  font-size: 18px;
}

.pending-pill span {
  display: block;
  font-size: 12px;
  margin-top: 2px;
  font-weight: 900;
}

.pending-pill small {
  display: block;
  font-size: 10px;
  opacity: .72;
  margin-top: 2px;
}

.pending-empty {
  color: #fecaca;
  opacity: .78;
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .monitor-lanes {
    grid-template-columns: 1fr;
  }

  .tv-brand {
    align-items: flex-start;
  }

  .tv-logo {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 760px) {
  .lto-logo {
    width: 92px;
    height: 92px;
  }
}


/* V14: assets folder, dashboard background, pending highlights in footer */
.lto-command-center {
  background:
    linear-gradient(135deg, rgba(4, 12, 31, .88), rgba(12, 34, 71, .72)),
    url("assets/dashboard-background.png") center/cover no-repeat !important;
  color: #fff;
  border: 1px solid rgba(147,197,253,.24);
}

.dashboard-bg-image {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 38%),
    linear-gradient(90deg, rgba(2,6,23,.74), rgba(2,6,23,.34), rgba(2,6,23,.72));
  pointer-events: none;
}

.lto-command-center h1,
.lto-command-center p {
  color: #fff;
  text-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.lto-command-center .brand-pill {
  background: rgba(255,255,255,.13);
  color: #dbeafe;
  border-color: rgba(255,255,255,.22);
}

.lto-command-center .dashboard-mini-stats span {
  background: rgba(15,23,42,.62);
  border-color: rgba(147,197,253,.25);
  color: #fff;
  backdrop-filter: blur(12px);
}

.lto-command-center .station-card {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
}

.monitor-lanes {
  grid-template-columns: 1fr !important;
}

.announcements {
  text-align: left !important;
}

.announcement-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 18px;
  align-items: start;
}

.announcement-left h2 {
  margin-bottom: 12px;
}

.announcement-left .tv-legend {
  justify-content: flex-start;
}

.announcement-pending {
  border: 1px solid rgba(248,113,113,.42);
  background: linear-gradient(90deg, rgba(239,68,68,.22), rgba(127,29,29,.12));
  border-radius: 20px;
  padding: 14px;
}

.footer-pending-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  overflow: visible !important;
}

.footer-pending-list .pending-pill {
  min-width: 0;
}

@media (max-width: 1000px) {
  .announcement-grid {
    grid-template-columns: 1fr;
  }
}


/* V15: Operations dashboard visual update */
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.35), transparent 26%),
    radial-gradient(circle at 90% 18%, rgba(14,165,233,.22), transparent 30%),
    linear-gradient(135deg, #020617, #071329 42%, #061a35) !important;
  background-size: 180% 180%;
  animation: bodyGradient 22s ease infinite;
}

@keyframes bodyGradient {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.operations-dashboard {
  width: min(1500px, 96vw) !important;
  min-height: 88vh;
  padding: 34px !important;
  border-radius: 34px !important;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(3, 8, 25, .90), rgba(7, 24, 52, .78)),
    url("assets/dashboard-background.png") center/cover no-repeat !important;
  border: 1px solid rgba(96,165,250,.28) !important;
  box-shadow:
    0 35px 120px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden;
}

.animated-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(56,189,248,.38) 1px, transparent 1.5px),
    linear-gradient(rgba(96,165,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.05) 1px, transparent 1px);
  background-size: 58px 58px, 44px 44px, 44px 44px;
  opacity: .34;
  animation: gridDrift 28s linear infinite;
  pointer-events: none;
}

@keyframes gridDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-58px,-58px,0); }
}

.orb {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .22;
  pointer-events: none;
  animation: floatOrb 9s ease-in-out infinite;
}

.orb-one { left: -80px; bottom: 80px; background: #2563eb; }
.orb-two { right: 120px; top: -120px; background: #06b6d4; animation-delay: -4s; }

@keyframes floatOrb {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-24px) scale(1.08); }
}

.ops-top,
.dashboard-mini-stats,
.station-grid,
.ops-bottom,
.ops-footer {
  position: relative;
  z-index: 2;
}

.ops-top {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.ops-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  text-align: left;
}

.ops-brand h1 {
  color: #fff;
  font-size: clamp(36px, 5vw, 68px);
  text-shadow: 0 10px 35px rgba(0,0,0,.55);
}

.ops-brand p {
  color: #dbeafe;
  font-size: 18px;
}

.online-pill {
  background: rgba(15,23,42,.72) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(147,197,253,.28) !important;
  backdrop-filter: blur(14px);
}

.lto-logo {
  width: 126px !important;
  height: 126px !important;
  flex: 0 0 auto;
  filter: drop-shadow(0 18px 36px rgba(96,165,250,.28));
}

.system-status-card {
  text-align: left;
  border-radius: 24px;
  padding: 18px;
  background: rgba(2, 10, 30, .58);
  border: 1px solid rgba(96,165,250,.46);
  box-shadow:
    0 0 36px rgba(14,165,233,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}

.system-status-card h3 {
  margin: 0 0 12px;
  color: #e0f2fe;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(148,163,184,.18);
  color: #dbeafe;
  font-weight: 800;
}

.status-row strong { color: #22c55e; }

.system-status-card small {
  display: block;
  text-align: center;
  color: #cbd5e1;
  margin-top: 12px;
}

.dashboard-mini-stats { margin: 22px auto 28px !important; }

.dashboard-mini-stats span {
  background: rgba(2, 10, 30, .56) !important;
  border: 1px solid rgba(96,165,250,.34) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.operations-dashboard .station-grid {
  grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 10px !important;
}

.operations-dashboard .station-card {
  min-height: 188px !important;
  border-radius: 24px !important;
  color: #f8fafc !important;
  background:
    linear-gradient(180deg, rgba(30,64,175,.28), rgba(15,23,42,.66)) !important;
  border: 1px solid rgba(147,197,253,.38) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
}

.operations-dashboard .station-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(56,189,248,.85) !important;
  box-shadow:
    0 28px 70px rgba(37,99,235,.34),
    0 0 22px rgba(56,189,248,.22) !important;
}

.operations-dashboard .station-card .icon {
  font-size: 50px !important;
  animation: iconFloat 3.6s ease-in-out infinite;
}

@keyframes iconFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.operations-dashboard .station-card strong {
  color: #fff;
  font-size: 20px;
}

.operations-dashboard .station-card small { color: #cbd5e1; }

.disabled-card {
  opacity: .38 !important;
  background: rgba(148,163,184,.22) !important;
}

.ops-bottom {
  display: grid;
  grid-template-columns: .95fr 1.65fr;
  gap: 18px;
  margin-top: 18px;
}

.ops-legend-card,
.ops-pending-card {
  text-align: left;
  border-radius: 24px;
  padding: 18px;
  background: rgba(2, 10, 30, .56);
  border: 1px solid rgba(96,165,250,.32);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.ops-legend-card h3,
.ops-pending-card h3 {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}

.ops-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.ops-legend span {
  font-weight: 850;
  color: #fff;
}

.ops-legend i {
  width: 13px;
  height: 13px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 7px;
}

.ops-legend-card p {
  color: #fff;
  font-size: 16px;
}

.pending-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pending-card-head span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border-radius: 16px;
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(248,113,113,.48);
  color: #fecaca;
  font-weight: 1000;
  font-size: 20px;
}

.home-pending-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.home-pending-row {
  display: grid;
  grid-template-columns: 110px 1fr 1.4fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.54);
  border: 1px solid rgba(248,113,113,.20);
  color: #fff;
}

.home-pending-row strong { color: #f87171; }
.home-pending-row small { color: #fecaca; }

.home-pending-empty {
  padding: 22px;
  text-align: center;
  color: #cbd5e1;
  border: 1px dashed rgba(148,163,184,.32);
  border-radius: 16px;
}

.ops-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.18);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #cbd5e1;
  font-weight: 800;
}

@media (max-width: 1200px) {
  .operations-dashboard .station-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }

  .ops-top,
  .ops-bottom {
    grid-template-columns: 1fr;
  }

  .system-status-card {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .operations-dashboard { padding: 20px !important; }

  .ops-brand {
    flex-direction: column;
    text-align: center;
  }

  .lto-logo {
    width: 94px !important;
    height: 94px !important;
  }

  .operations-dashboard .station-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
  }

  .home-pending-row { grid-template-columns: 1fr; }

  .ops-footer {
    flex-direction: column;
    text-align: center;
  }
}


/* V16: PACD status-aware queue cards */
.dot.red { background: #ef4444; }
.dot.done-dot { background: #0f172a; }

.queue-box {
  position: relative;
  overflow: hidden;
}

.queue-box .queue-code {
  position: relative;
  z-index: 2;
}

.queue-box.pacd-pending,
.queue-box.used.pacd-pending,
.queue-box.used.pacd-pending.tx-yellow,
.queue-box.used.pacd-pending.tx-blue,
.queue-box.used.pacd-pending.tx-green,
.queue-box.used.pacd-pending.tx-purple,
.queue-box.used.pacd-pending.tx-orange,
.queue-box.used.pacd-pending.tx-gold {
  background: linear-gradient(135deg, #ef4444, #fecaca) !important;
  color: #450a0a !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.12), 0 10px 24px rgba(239,68,68,.20);
}

.pending-mark {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .05em;
}

.queue-box.pacd-completed,
.queue-box.pacd-done {
  background: #e5e7eb !important;
  color: #475467 !important;
  border-color: #98a2b3 !important;
}

.done-stamp {
  position: absolute;
  inset: auto -18px 5px auto;
  transform: rotate(-18deg);
  background: rgba(15,23,42,.88);
  color: #fff;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 8px;
  padding: 2px 12px;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  z-index: 3;
  box-shadow: 0 5px 12px rgba(0,0,0,.18);
}

.queue-box.pacd-current {
  outline: 3px solid rgba(34,197,94,.20);
}

.queue-box.pacd-waiting {
  outline: 2px solid rgba(148,163,184,.14);
}

.pacd-status-card {
  border: 1px solid #e4e7ec;
  border-radius: 18px;
  padding: 14px;
  background: #f8fafc;
}

.pacd-status-card.status-pending {
  background: #fff1f2;
  border-color: #fecdd3;
}

.pacd-status-card.status-done {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.status-main-code {
  font-size: 28px;
  font-weight: 1000;
  margin-bottom: 10px;
}

.status-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.25);
  padding: 8px 0;
}

.status-line span {
  color: #667085;
  font-weight: 800;
}

.status-line strong {
  text-align: right;
}

.status-history {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}

.status-timeline-row {
  display: grid;
  gap: 2px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 8px 10px;
}

.status-timeline-row span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.modal-note {
  margin-top: 10px;
  color: #991b1b;
  font-weight: 800;
}


/* V17: PACD queue box color fixed by actual live status */
.queue-box {
  min-height: 64px;
}

.queue-box .queue-location {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 900;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Available keeps transaction color */
.queue-box.available.pacd-available.tx-yellow { background: #fef3c7 !important; border-color: #facc15 !important; color: #713f12 !important; }
.queue-box.available.pacd-available.tx-blue { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e3a8a !important; }
.queue-box.available.pacd-available.tx-green { background: #dcfce7 !important; border-color: #86efac !important; color: #14532d !important; }
.queue-box.available.pacd-available.tx-purple { background: #f3e8ff !important; border-color: #c084fc !important; color: #581c87 !important; }
.queue-box.available.pacd-available.tx-orange { background: #ffedd5 !important; border-color: #fb923c !important; color: #7c2d12 !important; }

/* Waiting/current/forwarded are gray/in process */
.queue-box.used.pacd-waiting,
.queue-box.used.pacd-current,
.queue-box.used.pacd-forwarded,
.queue-box.used.pacd-waiting.tx-yellow,
.queue-box.used.pacd-waiting.tx-blue,
.queue-box.used.pacd-waiting.tx-green,
.queue-box.used.pacd-waiting.tx-purple,
.queue-box.used.pacd-waiting.tx-orange,
.queue-box.used.pacd-current.tx-yellow,
.queue-box.used.pacd-current.tx-blue,
.queue-box.used.pacd-current.tx-green,
.queue-box.used.pacd-current.tx-purple,
.queue-box.used.pacd-current.tx-orange,
.queue-box.used.pacd-forwarded.tx-yellow,
.queue-box.used.pacd-forwarded.tx-blue,
.queue-box.used.pacd-forwarded.tx-green,
.queue-box.used.pacd-forwarded.tx-purple,
.queue-box.used.pacd-forwarded.tx-orange {
  background: #e5e7eb !important;
  color: #475467 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

/* Pending always red */
.queue-box.used.pacd-pending,
.queue-box.used.pacd-pending.tx-yellow,
.queue-box.used.pacd-pending.tx-blue,
.queue-box.used.pacd-pending.tx-green,
.queue-box.used.pacd-pending.tx-purple,
.queue-box.used.pacd-pending.tx-orange,
.queue-box.used.pacd-pending.tx-gold,
.queue-box.pacd-pending,
.queue-box.pacd-pending.tx-yellow,
.queue-box.pacd-pending.tx-blue,
.queue-box.pacd-pending.tx-green,
.queue-box.pacd-pending.tx-purple,
.queue-box.pacd-pending.tx-orange,
.queue-box.pacd-pending.tx-gold {
  background: linear-gradient(135deg, #ef4444, #fecaca) !important;
  color: #450a0a !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.16), 0 10px 24px rgba(239,68,68,.18) !important;
}

/* Done/completed gray with stamp */
.queue-box.used.pacd-completed,
.queue-box.used.pacd-done,
.queue-box.used.pacd-completed.tx-yellow,
.queue-box.used.pacd-completed.tx-blue,
.queue-box.used.pacd-completed.tx-green,
.queue-box.used.pacd-completed.tx-purple,
.queue-box.used.pacd-completed.tx-orange,
.queue-box.used.pacd-done.tx-yellow,
.queue-box.used.pacd-done.tx-blue,
.queue-box.used.pacd-done.tx-green,
.queue-box.used.pacd-done.tx-purple,
.queue-box.used.pacd-done.tx-orange {
  background: #e5e7eb !important;
  color: #475467 !important;
  border-color: #98a2b3 !important;
}

/* Priority pending stays red but with gold border */
.queue-box.used.pacd-pending.priority,
.queue-box.pacd-pending.priority {
  border-color: #facc15 !important;
  box-shadow: 0 0 0 2px rgba(250,204,21,.25), 0 10px 24px rgba(239,68,68,.18) !important;
}

/* Priority in process stays gold-tinted only when not pending */
.queue-box.used.priority:not(.pacd-pending):not(.pacd-completed):not(.pacd-done) {
  background: linear-gradient(135deg, #fde68a, #e5e7eb) !important;
  color: #713f12 !important;
  border-color: #facc15 !important;
}


/* V18: modal, PACD visibility, and device-fit fixes */

/* Better global fitting */
html {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

.home {
  min-height: 100dvh !important;
  padding: clamp(10px, 2vw, 24px) !important;
}

.page {
  min-height: 100dvh;
  padding: clamp(10px, 2vw, 24px) !important;
}

/* PACD title readability */
.page:has(.pacd-panel) {
  background:
    radial-gradient(circle at 15% 10%, rgba(37,99,235,.20), transparent 28%),
    linear-gradient(135deg, #eef4ff, #f8fafc) !important;
}

.page:has(.pacd-panel) .topbar h1 {
  color: #0f172a !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.page:has(.pacd-panel) .topbar p {
  color: #475467 !important;
  opacity: 1 !important;
}

/* PACD panel more compact on all screens */
.page:has(.pacd-panel) .topbar,
.pacd-panel {
  width: min(980px, 100%) !important;
}

.page:has(.pacd-panel) .topbar {
  margin-bottom: 10px !important;
}

.pacd-panel {
  padding: clamp(12px, 2vw, 20px) !important;
}

.pacd-panel .toolbar {
  gap: 10px !important;
}

.pacd-panel label {
  gap: 5px !important;
}

.pacd-panel select,
.pacd-panel input,
.pacd-panel button {
  min-height: 44px !important;
  padding: 10px 12px !important;
}

.pacd-panel .stats-line {
  margin: 12px 0 10px !important;
}

.pacd-panel .batch-tabs-wrap {
  margin-top: 10px !important;
}

.pacd-panel .queue-grid {
  gap: 8px !important;
}

.pacd-panel .queue-box {
  min-height: 52px !important;
  padding: 9px 5px !important;
}

/* Fixed modal usability: always visible close and scrollable content */
.modal {
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom) 12px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.modal-card {
  width: min(560px, calc(100vw - 24px)) !important;
  max-height: min(86dvh, 780px) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.modal-header {
  flex: 0 0 auto;
  padding: 18px 20px 12px !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #eef2f7;
}

.modal-header h2 {
  margin: 0 !important;
  font-size: clamp(20px, 4vw, 28px) !important;
  line-height: 1.15 !important;
}

.modal-x {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

.modal-scroll {
  flex: 1 1 auto;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px !important;
}

.modal-footer {
  flex: 0 0 auto;
  padding: 12px 20px 16px !important;
  border-top: 1px solid #eef2f7;
  background: #fff;
}

.modal-close-btn {
  width: 100%;
  min-height: 46px;
  margin: 0 !important;
  box-shadow: none !important;
}

#modal-actions {
  margin: 14px 0 0 !important;
}

.action-btn {
  min-height: 48px;
}

/* Pending reason / Other text input visible and reachable */
.hidden-input {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 10px !important;
  font-size: 16px !important;
}

.radio-list {
  max-height: 45dvh;
  overflow-y: auto;
  padding-right: 2px;
}

/* Make PACD status modal compact */
.pacd-status-card {
  padding: 12px !important;
  border-radius: 16px !important;
}

.status-main-code {
  font-size: clamp(24px, 7vw, 34px) !important;
}

.status-line {
  gap: 8px !important;
  padding: 7px 0 !important;
}

.status-line span,
.status-line strong {
  font-size: clamp(13px, 3.4vw, 16px) !important;
}

.status-history {
  gap: 6px !important;
}

/* Dashboard fit better on laptops without bottom scroll */
.operations-dashboard {
  min-height: auto !important;
  padding: clamp(18px, 2.2vw, 30px) !important;
}

.ops-top {
  gap: 14px !important;
}

.ops-brand h1 {
  font-size: clamp(34px, 4.1vw, 58px) !important;
}

.lto-logo {
  width: clamp(80px, 8vw, 116px) !important;
  height: clamp(80px, 8vw, 116px) !important;
}

.system-status-card {
  padding: 14px !important;
}

.status-row {
  padding: 7px 0 !important;
}

.dashboard-mini-stats {
  margin: 14px auto 18px !important;
}

.operations-dashboard .station-grid {
  gap: 14px !important;
}

.operations-dashboard .station-card {
  min-height: clamp(132px, 14vw, 174px) !important;
  padding: 16px !important;
}

.operations-dashboard .station-card .icon {
  font-size: clamp(32px, 4vw, 46px) !important;
}

.ops-bottom {
  margin-top: 14px !important;
  gap: 14px !important;
}

.ops-legend-card,
.ops-pending-card {
  padding: 14px !important;
}

.ops-footer {
  margin-top: 12px !important;
  padding-top: 10px !important;
}

/* Smart TV fit: avoid oversized footer consuming screen */
.tv-page {
  min-height: 100dvh !important;
  padding: clamp(12px, 1.4vw, 24px) !important;
}

.tv-header {
  margin-bottom: 14px !important;
}

.tv-header h1 {
  font-size: clamp(30px, 4vw, 50px) !important;
}

.tv-logo {
  width: clamp(56px, 5vw, 76px) !important;
  height: clamp(56px, 5vw, 76px) !important;
}

.flow-node {
  min-height: 120px !important;
}

.announcements {
  margin-top: 12px !important;
  padding: 14px !important;
}

.announcement-grid {
  gap: 12px !important;
}

.footer-pending-list {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
}

.pending-pill {
  padding: 7px 9px !important;
}

/* Phone/iPhone */
@media (max-width: 700px) {
  .page:has(.pacd-panel) .topbar h1 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }

  .page:has(.pacd-panel) .topbar p {
    font-size: 14px !important;
  }

  .pacd-panel .queue-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .pacd-panel .queue-box {
    min-height: 50px !important;
    font-size: 12px !important;
  }

  .queue-box .queue-location {
    font-size: 8px !important;
  }

  .modal-card {
    width: calc(100vw - 16px) !important;
    max-height: 90dvh !important;
    border-radius: 20px !important;
  }

  .modal-header {
    padding: 14px 14px 10px !important;
  }

  .modal-scroll {
    padding: 12px 14px !important;
  }

  .modal-footer {
    padding: 10px 14px 14px !important;
  }

  .radio-list {
    max-height: 38dvh;
  }

  .status-line {
    flex-direction: column;
    align-items: flex-start;
  }

  .status-line strong {
    text-align: left !important;
  }

  .operations-dashboard .station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .operations-dashboard .station-card {
    min-height: 118px !important;
  }
}

/* Very short laptop screens */
@media (max-height: 760px) and (min-width: 900px) {
  .home {
    align-items: start !important;
  }

  .operations-dashboard {
    transform-origin: top center;
  }

  .operations-dashboard .station-card {
    min-height: 126px !important;
  }

  .ops-bottom {
    grid-template-columns: 1fr 1fr !important;
  }

  .ops-footer {
    font-size: 12px;
  }
}


/* V19: real-time sync indicators */
.dashboard-mini-stats span:last-child {
  border-color: rgba(34,197,94,.38) !important;
  box-shadow: 0 0 20px rgba(34,197,94,.16) !important;
}

.dashboard-mini-stats span:last-child::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 rgba(34,197,94,.7);
  animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.system-status-card .status-row:first-of-type strong::after {
  content: " · Live";
  color: #86efac;
}


/* V21 — mobile queue issuance and Smart TV responsive repair */

/* Prevent accidental text selection during long press on queue cards. */
.queue-box {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Make PACD controls comfortable on phones without oversized spacing. */
@media (max-width: 700px) {
  .page:has(.pacd-panel) {
    display: block !important;
    padding:
      calc(10px + env(safe-area-inset-top))
      10px
      calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .page:has(.pacd-panel) .topbar,
  .pacd-panel {
    width: 100% !important;
    max-width: none !important;
  }

  .page:has(.pacd-panel) .topbar {
    margin-bottom: 12px !important;
  }

  .page:has(.pacd-panel) .topbar h1 {
    font-size: clamp(35px, 10.5vw, 52px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
  }

  .page:has(.pacd-panel) .topbar p {
    max-width: 100%;
    line-height: 1.35;
  }

  .pacd-panel {
    padding: 14px !important;
    border-radius: 26px !important;
  }

  .pacd-panel .toolbar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .pacd-panel label,
  .pacd-panel select,
  .pacd-panel input,
  .pacd-panel button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .priority-toggle {
    min-height: 74px !important;
    padding: 14px !important;
  }

  #generate-batch {
    min-height: 58px !important;
    font-size: 18px !important;
  }

  .transaction-color-note {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .transaction-color-note > span:last-child {
    grid-column: 1 / -1;
  }

  .batch-tabs-wrap {
    position: static !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    width: 100%;
  }

  .batch-tabs {
    min-width: 0;
    justify-content: center;
  }

  .stats-line {
    width: 100%;
  }

  .stats-line .legend {
    gap: 12px 16px !important;
    font-size: 14px;
  }

  .pacd-panel .queue-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .pacd-panel .empty {
    grid-column: 1 / -1;
    width: 100%;
    padding: 24px 14px !important;
    overflow-wrap: anywhere;
  }
}

/* Smart TV: desktop remains horizontal, mobile becomes a readable vertical tracker. */
@media (max-width: 800px) {
  .tv-page {
    width: 100%;
    min-height: 100dvh !important;
    padding:
      calc(12px + env(safe-area-inset-top))
      12px
      calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .tv-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 10px !important;
  }

  .tv-brand {
    min-width: 0;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px !important;
    align-items: start !important;
  }

  .tv-logo {
    width: 58px !important;
    height: 58px !important;
  }

  .tv-header h1 {
    font-size: clamp(29px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
    overflow-wrap: anywhere;
  }

  .tv-header p {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  .tv-home {
    margin: 0 !important;
    padding: 11px 16px !important;
    font-size: 16px !important;
  }

  .tv-category {
    min-height: auto !important;
    width: 100%;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: hidden;
  }

  .flow-title h2 {
    font-size: 26px !important;
    min-width: 0;
  }

  .flow-title > span {
    flex: 0 0 auto;
    font-size: 13px !important;
  }

  .priority-lane {
    width: 100%;
    overflow: hidden;
  }

  .priority-list {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .flow-map {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100%;
    margin-top: 12px !important;
  }

  .flow-node-wrap,
  .flow-node-wrap:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    min-width: 0;
  }

  .flow-node {
    width: 100%;
    min-width: 0;
    min-height: auto !important;
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .stage-name {
    min-height: 0 !important;
    margin-bottom: 9px !important;
    font-size: 17px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .stage-queues {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .flow-queue {
    width: 100%;
    min-width: 0;
    padding: 10px !important;
  }

  .flow-queue strong {
    font-size: 18px !important;
    overflow-wrap: anywhere;
  }

  .flow-queue span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  .flow-arrow {
    transform: none !important;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 0 !important;
  }

  .flow-arrow::after {
    content: "↓";
    font-size: 25px;
    color: #60a5fa;
  }

  .announcement-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-pending-list {
    grid-template-columns: 1fr !important;
  }

  .announcements p {
    font-size: 16px !important;
  }
}

@media (max-width: 430px) {
  .tv-brand {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .tv-logo {
    width: 48px !important;
    height: 48px !important;
  }

  .tv-header h1 {
    font-size: clamp(25px, 8.2vw, 36px) !important;
  }

  .tv-home {
    padding: 9px 13px !important;
  }

  .flow-title {
    align-items: flex-start !important;
  }

  .flow-title h2 {
    font-size: 23px !important;
  }

  .stage-queues {
    grid-template-columns: 1fr !important;
  }
}


/* V22 — reliable mobile generation + scalable pending monitoring */
#generate-batch:disabled {
  opacity: .72;
  cursor: wait;
}

.pending-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.pending-range {
  margin-top: 4px;
  color: #fecaca;
  font-size: 12px;
  font-weight: 800;
}

.pending-total {
  flex: 0 0 auto;
  min-width: 50px;
  height: 50px;
  padding: 0 10px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(239,68,68,.22);
  border: 1px solid rgba(254,202,202,.42);
  color: #fff;
  font-size: 22px;
  font-weight: 1000;
}

.pending-category-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 9px 0 10px;
}

.pending-category-counts span {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(15,23,42,.48);
  border: 1px solid rgba(254,202,202,.18);
  color: #fee2e2;
  font-size: 11px;
  font-weight: 800;
}

.footer-pending-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.footer-pending-list .pending-pill {
  min-width: 0 !important;
}

.pending-section .card-area {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 1100px) {
  .footer-pending-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .footer-pending-list {
    grid-template-columns: 1fr !important;
  }

  .pending-header-row {
    align-items: center;
  }

  .pending-total {
    min-width: 44px;
    height: 44px;
    font-size: 19px;
  }
}


/* V23 — PACD priority alignment, stable personnel boards, compact TV pending */

/* PACD priority lane alignment */
.priority-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow: hidden;
}

.priority-toggle input {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
}

.priority-toggle span {
  flex: 1 1 auto;
  min-width: 0;
  display: block !important;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Stable personnel dashboard layout.
   Each column has a fixed viewport and scrolls internally. */
.modern-board {
  align-items: stretch !important;
}

.board-section {
  height: calc(100dvh - 190px) !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.section-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 3;
  padding-bottom: 10px;
  margin-bottom: 8px !important;
  background: linear-gradient(
    180deg,
    rgba(27, 39, 65, .98),
    rgba(27, 39, 65, .92)
  );
}

.card-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  align-content: start;
  padding-right: 5px;
  padding-bottom: 10px;
  scrollbar-gutter: stable;
}

.card-area::-webkit-scrollbar {
  width: 8px;
}

.card-area::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
  border-radius: 99px;
}

.card-area::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.45);
  border-radius: 99px;
}

.current-section .card-area,
.pending-section .card-area {
  align-content: start;
}

/* Keep queue cards from making columns jump. */
.queue-card.current {
  flex: 0 0 auto;
}

.waiting-section .card-area.grid {
  grid-auto-rows: minmax(94px, auto);
}

/* TV pending uses queue numbers only */
.pending-public-note {
  margin: 0 0 10px;
  color: #fecaca;
  font-size: 12px;
  font-weight: 800;
}

.pending-number-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 7px !important;
  overflow: visible !important;
}

.pending-number-pill {
  min-width: 0;
  border-radius: 11px;
  padding: 9px 5px;
  background: linear-gradient(135deg, #ef4444, #fecaca);
  border: 1px solid rgba(254,202,202,.6);
  color: #450a0a;
  text-align: center;
  font-size: clamp(12px, 1.15vw, 18px);
  font-weight: 1000;
  line-height: 1.05;
  box-shadow: 0 4px 12px rgba(239,68,68,.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-pending-number {
  border: 2px solid #facc15;
  box-shadow:
    0 0 0 2px rgba(250,204,21,.18),
    0 4px 12px rgba(239,68,68,.15);
}

@media (max-width: 1500px) {
  .pending-number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .pending-number-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Mobile personnel board: sections remain stable and independently scrollable. */
@media (max-width: 1000px) {
  .modern-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .board-section {
    height: min(68dvh, 620px) !important;
    min-height: 430px !important;
  }

  .section-head {
    background: linear-gradient(
      180deg,
      rgba(34, 44, 68, .99),
      rgba(34, 44, 68, .94)
    );
  }
}

@media (max-width: 700px) {
  .priority-toggle {
    min-height: 72px !important;
    padding: 14px 16px !important;
  }

  .priority-toggle input {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .priority-toggle span {
    font-size: 18px !important;
    line-height: 1.2;
  }

  .board-section {
    height: 60dvh !important;
    min-height: 400px !important;
  }

  .pending-number-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .pending-number-pill {
    font-size: 13px;
    padding: 9px 4px;
  }
}

@media (max-width: 430px) {
  .pending-number-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Large TV optimization */
@media (min-width: 1600px) {
  .pending-number-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}


/* V24 — LETAS activation and four-category TV support */
.station-card[data-route="letas"] {
  border-color: rgba(168,85,247,.42) !important;
  background:
    linear-gradient(180deg, rgba(88,28,135,.42), rgba(15,23,42,.68)) !important;
}

.station-card[data-route="letas"]:hover {
  border-color: rgba(192,132,252,.9) !important;
  box-shadow:
    0 28px 70px rgba(126,34,206,.26),
    0 0 22px rgba(192,132,252,.22) !important;
}

@media (min-width: 1200px) {
  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Four TV categories remain readable on large screens. */
.tv-category {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

@media (max-width: 800px) {
  .tv-category {
    content-visibility: visible;
  }
}


/* V25 — LETAS Payment of Fines */
.letas-station {
  border-color: rgba(168,85,247,.52) !important;
  background:
    linear-gradient(180deg, rgba(126,34,206,.25), rgba(15,23,42,.68)) !important;
}

.letas-station:hover {
  border-color: rgba(216,180,254,.92) !important;
  box-shadow:
    0 28px 70px rgba(126,34,206,.32),
    0 0 24px rgba(168,85,247,.22) !important;
}

.letas-station .icon {
  filter: drop-shadow(0 8px 18px rgba(168,85,247,.30));
}


/* ================================================================
   V27 PROFESSIONAL GOVERNMENT / ENTERPRISE VISUAL SYSTEM
   ================================================================ */

:root {
  --pro-navy-950: #071426;
  --pro-navy-900: #0b1d33;
  --pro-navy-800: #123153;
  --pro-blue-600: #1667b7;
  --pro-blue-500: #2f80cf;
  --pro-blue-100: #dcecff;
  --pro-slate-700: #344054;
  --pro-slate-500: #667085;
  --pro-slate-300: #d0d5dd;
  --pro-slate-100: #f2f4f7;
  --pro-white: #ffffff;
  --pro-gold: #d7a928;
  --pro-success: #12b76a;
  --pro-warning: #f79009;
  --pro-danger: #d92d20;
}

body {
  background:
    linear-gradient(rgba(7,20,38,.86), rgba(7,20,38,.92)),
    url("assets/dashboard-background.png") center/cover fixed no-repeat !important;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
}

.professional-home {
  min-height: 100dvh;
  padding: clamp(14px, 2vw, 30px);
}

.professional-shell {
  width: min(1500px, 100%);
  margin: auto;
  padding: clamp(22px, 2.4vw, 38px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(7,20,38,.91);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  color: #fff;
}

.professional-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
}

.professional-brand {
  display: flex;
  align-items: center;
  gap: 22px;
}

.professional-brand .lto-logo {
  width: 104px !important;
  height: 104px !important;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.28));
}

.agency-label,
.panel-label,
.public-panel-kicker,
.tv-agency {
  color: #8fc5f5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.professional-brand h1 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: -.045em;
}

.professional-brand p {
  color: #c7d7e8;
  font-size: 16px;
}

.professional-status {
  width: min(370px, 100%);
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(18,49,83,.56);
  border: 1px solid rgba(143,197,245,.22);
}

.status-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pro-success);
  box-shadow: 0 0 0 5px rgba(18,183,106,.13);
}

.status-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 13px 0;
}

.status-metrics span {
  display: grid;
  gap: 2px;
  color: #a9bfd5;
  font-size: 10px;
}

.status-metrics b {
  color: #e8f4ff;
  font-size: 12px;
}

.professional-status small {
  color: #9db3c8;
}

.professional-divider {
  height: 1px;
  margin: 24px 0;
  background: linear-gradient(90deg, transparent, rgba(143,197,245,.35), transparent);
}

.professional-station-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 13px !important;
  margin: 0 !important;
}

.professional-card {
  min-height: 142px !important;
  padding: 18px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  text-align: left;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(18,49,83,.78), rgba(10,29,51,.90)) !important;
  border: 1px solid rgba(143,197,245,.17) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.professional-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(47,128,207,.72) !important;
  background: linear-gradient(145deg, rgba(22,67,111,.94), rgba(12,37,64,.96)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.featured-card {
  border-color: rgba(47,128,207,.58) !important;
  box-shadow: inset 0 0 0 1px rgba(47,128,207,.18) !important;
}

.professional-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(47,128,207,.14);
  border: 1px solid rgba(143,197,245,.18);
  color: #75b8ef;
}

.professional-icon img {
  width: 25px;
  height: 25px;
  color: inherit;
  filter: brightness(0) saturate(100%) invert(67%) sepia(45%) saturate(675%) hue-rotate(169deg) brightness(98%);
}

.professional-card strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.professional-card small {
  display: block;
  margin-top: 6px;
  color: #a9bfd5;
  line-height: 1.4;
}

.professional-lower-grid {
  display: grid;
  grid-template-columns: .85fr 1.45fr;
  gap: 14px;
  margin-top: 15px;
}

.professional-info-panel {
  padding: 17px;
  border-radius: 15px;
  background: rgba(11,29,51,.78);
  border: 1px solid rgba(143,197,245,.15);
}

.professional-info-panel p {
  color: #b5c8da;
  font-size: 13px;
  line-height: 1.55;
}

.professional-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0;
  color: #eaf3fb;
  font-size: 13px;
  font-weight: 700;
}

.professional-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
}

.pending-overview .pending-card-head {
  align-items: flex-start;
}

.pending-overview .pending-card-head > span {
  border-radius: 10px;
}

.professional-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(143,197,245,.13);
  color: #7f99b1;
  font-size: 11px;
  font-weight: 700;
}

/* Professional navigation */
.back-btn,
.tv-home,
.ghost {
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 13px;
}

.back-btn::before {
  content: "‹";
  margin-right: 6px;
  font-size: 17px;
}

.section-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.section-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.current-dot { background: var(--pro-success); }
.waiting-dot { background: var(--pro-warning); }
.pending-dot { background: var(--pro-danger); }

/* ================================================================
   V27 PROFESSIONAL PUBLIC SMART TV — 50/50
   ================================================================ */
.tv-page {
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.4vw, 25px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(22,103,183,.20), transparent 30%),
    #061323 !important;
}

.public-tv-header {
  flex: 0 0 auto;
  align-items: center !important;
  margin-bottom: 13px !important;
}

.tv-brand {
  display: flex;
  align-items: center;
  gap: 17px;
}

.tv-logo {
  width: 76px !important;
  height: 76px !important;
}

.tv-brand h1 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 53px) !important;
  letter-spacing: -.035em;
  line-height: 1;
}

.tv-brand p {
  color: #9db3c8 !important;
  font-size: 15px !important;
}

.tv-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tv-clock-block {
  display: grid;
  justify-items: end;
}

.tv-clock-block strong {
  color: #fff;
  font-size: clamp(29px, 3vw, 46px);
  line-height: 1;
}

.tv-clock-block span {
  margin-top: 5px;
  color: #8fa6bb;
  font-size: 11px;
  font-weight: 700;
}

#tv-sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.public-tv-layout {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.public-tv-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, #0b1d33, #081728);
  border: 1px solid rgba(143,197,245,.18);
}

.processing-panel { border-color: rgba(47,128,207,.52); }
.pending-panel { border-color: rgba(217,45,32,.42); }

.public-panel-title {
  min-height: 86px;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 19px;
  border-bottom: 1px solid rgba(143,197,245,.13);
  background: linear-gradient(90deg, rgba(22,103,183,.23), transparent);
}

.pending-panel-title {
  background: linear-gradient(90deg, rgba(217,45,32,.18), transparent);
}

.public-panel-title h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(25px, 2.2vw, 38px);
}

.public-panel-total {
  display: grid;
  justify-items: center;
  min-width: 78px;
  padding: 7px 12px;
  border-radius: 11px;
  background: rgba(47,128,207,.12);
  border: 1px solid rgba(47,128,207,.25);
}

.public-panel-total strong {
  color: #72b8ef;
  font-size: 27px;
  line-height: 1;
}

.public-panel-total span {
  color: #8fa6bb;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.pending-count {
  background: rgba(217,45,32,.10);
  border-color: rgba(217,45,32,.24);
}
.pending-count strong { color: #f97066; }

.public-priority-strip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(215,169,40,.25);
  background: linear-gradient(90deg, rgba(215,169,40,.15), rgba(215,169,40,.03));
}

.priority-strip-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f3cf65;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.priority-strip-title img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(420%) hue-rotate(5deg);
}

.priority-strip-numbers {
  display: flex;
  gap: 7px;
  overflow: hidden;
}

.public-processing-groups,
.public-pending-groups {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 11px;
}

.public-queue-group,
.public-pending-group {
  min-height: 0;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  border: 1px solid rgba(143,197,245,.13);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(5,17,31,.52);
}

.public-group-header,
.public-pending-group-header {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-content: center;
  gap: 3px 7px;
  padding: 10px;
  background: rgba(18,49,83,.54);
  border-right: 1px solid rgba(143,197,245,.13);
}

.public-group-header > span:last-child,
.public-pending-group-header > span:last-child {
  grid-column: 1 / -1;
  color: #7894ad;
  font-size: 10px;
  font-weight: 800;
}

.public-category-code {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  background: #1667b7;
  font-size: 11px;
  font-weight: 900;
}

.public-group-header strong,
.public-pending-group-header strong {
  align-self: center;
  color: #dceaf6;
  font-size: 12px;
  line-height: 1.2;
}

.public-number-grid {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 8px;
}

.processing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pending-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.public-number-card {
  min-width: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  padding: 7px 4px;
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.processing-number {
  color: #fff;
  border: 1px solid rgba(255,255,255,.17);
}

.pending-number {
  color: #fff;
  border: 1px solid rgba(255,255,255,.13);
  opacity: .95;
}

.priority-number {
  color: #3c2b00;
  background: linear-gradient(135deg, #d7a928, #f2d67b);
  border: 1px solid #f1d16b;
}

.public-empty-state {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  color: #55718a;
  font-size: 12px;
  font-weight: 700;
}

.public-page-footer {
  flex: 0 0 auto;
  min-height: 41px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-top: 1px solid rgba(143,197,245,.13);
  color: #8fa6bb;
  font-size: 10px;
  font-weight: 700;
}

.announcements {
  flex: 0 0 auto;
  margin-top: 9px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.professional-announcement {
  min-height: 39px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 15px;
  border-radius: 11px;
  color: #c6d6e5;
  background: rgba(11,29,51,.94);
  border: 1px solid rgba(143,197,245,.14);
  font-size: 11px;
}

.professional-announcement strong {
  color: #8fc5f5;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.realtime-badge {
  color: #8dd8b6;
  font-weight: 800;
}

.realtime-badge i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--pro-success);
}

/* Existing transaction colors remain, refined for professional contrast */
.public-number-card.tx-blue { background: #1667b7 !important; color: #fff !important; }
.public-number-card.tx-green { background: #15804a !important; color: #fff !important; }
.public-number-card.tx-yellow { background: #bc8500 !important; color: #fff !important; }
.public-number-card.tx-purple { background: #7244a7 !important; color: #fff !important; }
.public-number-card.tx-orange { background: #c35b18 !important; color: #fff !important; }
.public-number-card.tx-gold { background: linear-gradient(135deg, #d7a928, #f2d67b) !important; color: #3c2b00 !important; }

/* Responsive */
@media (max-width: 1200px) {
  .professional-station-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .professional-header {
    align-items: flex-start;
  }

  .public-queue-group,
  .public-pending-group {
    grid-template-columns: 115px minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .professional-header,
  .professional-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .professional-status {
    width: 100%;
  }

  .professional-station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .professional-lower-grid {
    grid-template-columns: 1fr;
  }

  .professional-card {
    min-height: 125px !important;
  }

  .public-tv-layout {
    height: auto;
    grid-template-columns: 1fr;
  }

  .tv-page {
    height: auto !important;
    overflow-y: auto !important;
  }

  .public-tv-panel {
    min-height: 670px;
  }

  .public-tv-header {
    align-items: flex-start !important;
  }

  .tv-header-actions {
    align-items: flex-end;
    flex-direction: column;
  }

  .processing-grid,
  .pending-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .professional-shell {
    padding: 17px;
    border-radius: 17px;
  }

  .professional-brand .lto-logo {
    width: 82px !important;
    height: 82px !important;
  }

  .professional-station-grid {
    grid-template-columns: 1fr !important;
  }

  .professional-card {
    min-height: 104px !important;
  }

  .professional-footer {
    flex-direction: column;
  }

  .public-queue-group,
  .public-pending-group {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .public-priority-strip {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   V28 OPERATIONS-FOCUSED UI
   ================================================================ */

/* Main dashboard: less empty space, stronger hierarchy */
.professional-shell {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

.professional-header {
  align-items: flex-start;
}

.professional-brand .lto-logo {
  width: 88px !important;
  height: 88px !important;
}

.professional-brand h1 {
  font-size: clamp(32px, 3.25vw, 50px);
}

.professional-brand p {
  margin-top: 7px;
  font-size: 14px;
}

.professional-station-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.professional-card {
  min-height: 116px !important;
  padding: 15px !important;
}

.professional-card strong {
  font-size: 15px;
}

.professional-card small {
  margin-top: 4px;
  font-size: 11px;
}

.professional-icon {
  width: 39px;
  height: 39px;
}

.professional-lower-grid {
  margin-top: 11px;
}

.professional-info-panel {
  padding: 13px 15px;
}

.professional-footer {
  margin-top: 12px;
  padding-top: 11px;
}

/* Workstation area selector */
.workstation-page {
  background: rgba(5, 17, 31, .42);
}

.workstation-shell {
  width: min(920px, calc(100% - 28px));
  padding: clamp(20px, 3vw, 34px);
  border-radius: 22px;
  background: rgba(248, 250, 252, .98);
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
}

.workstation-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 18px;
}

.workstation-header h1 {
  font-size: clamp(30px, 4vw, 48px);
  color: #101828;
}

.workstation-header p {
  color: #667085;
}

.compact-back {
  margin: 0 !important;
}

.workstation-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.workstation-option {
  min-height: 148px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #d0d5dd;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.workstation-option:hover {
  transform: translateY(-2px);
  border-color: #84b9e8;
  box-shadow: 0 15px 32px rgba(22,103,183,.13);
}

.workstation-option strong {
  display: block;
  font-size: 18px;
  color: #101828;
}

.workstation-option small {
  display: block;
  margin-top: 6px;
  color: #667085;
  line-height: 1.45;
}

.large-icon {
  width: 50px;
  height: 50px;
}

.option-arrow {
  color: #1667b7;
  font-size: 32px;
}

/* Modal: denser, more operational, actions always visible */
.modal-card {
  width: min(610px, calc(100vw - 22px)) !important;
  max-height: min(88dvh, 760px) !important;
}

.modal-header {
  padding: 15px 18px 12px !important;
}

.modal-header h2 {
  font-size: clamp(20px, 3vw, 27px) !important;
}

.modal-scroll {
  padding: 14px 18px !important;
}

.modal-footer {
  padding: 10px 18px 14px !important;
}

.queue-detail-summary,
.staff-queue-summary {
  border: 1px solid #dce4ec;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}

.queue-detail-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border-bottom: 1px solid #e4e7ec;
}

.queue-detail-label {
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.queue-detail-code-row .status-main-code {
  margin: 3px 0 0 !important;
  font-size: clamp(28px, 6vw, 40px) !important;
}

.queue-status-chip {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.chip-waiting { color: #7a4c00; background: #fef0c7; }
.chip-current { color: #05603a; background: #d1fadf; }
.chip-pending { color: #912018; background: #fee4e2; }
.chip-completed, .chip-done { color: #344054; background: #eaecf0; }
.chip-available { color: #175cd3; background: #dbeafe; }

.queue-detail-grid,
.staff-queue-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.queue-detail-grid > div,
.staff-queue-meta > div {
  min-width: 0;
  padding: 11px 14px;
  border-bottom: 1px solid #eaecf0;
}

.queue-detail-grid > div:nth-child(odd),
.staff-queue-meta > div:nth-child(odd) {
  border-right: 1px solid #eaecf0;
}

.queue-detail-grid span,
.staff-queue-meta span {
  display: block;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.queue-detail-grid strong,
.staff-queue-meta strong {
  display: block;
  margin-top: 3px;
  color: #101828;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.detail-wide,
.staff-queue-meta .wide {
  grid-column: 1 / -1;
  border-right: 0 !important;
}

.history-heading {
  margin-bottom: 8px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.status-history {
  padding: 12px 14px;
}

.staff-queue-code {
  padding: 15px;
  color: #101828;
  font-size: 32px;
  font-weight: 950;
  border-bottom: 1px solid #e4e7ec;
}

#modal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px !important;
}

.action-btn {
  min-height: 46px !important;
  padding: 10px 12px !important;
}

/* Staff board cards: compact and stable */
.queue-card.current {
  min-height: 92px !important;
  font-size: 24px !important;
}

.queue-card.waiting,
.queue-card.pending {
  min-height: 78px !important;
}

.board-section {
  height: calc(100dvh - 155px) !important;
}

/* TV: devote the screen to numbers */
.public-tv-header {
  min-height: 66px;
  margin-bottom: 7px !important;
}

.tv-logo {
  width: 58px !important;
  height: 58px !important;
}

.tv-brand h1 {
  font-size: clamp(27px, 2.7vw, 43px) !important;
}

.tv-agency,
.tv-brand p {
  font-size: 10px !important;
}

.tv-clock-block strong {
  font-size: clamp(27px, 2.6vw, 41px);
}

.public-panel-title {
  min-height: 67px;
  padding: 10px 15px;
}

.public-panel-title h2 {
  font-size: clamp(25px, 2.2vw, 38px);
}

.public-panel-kicker {
  font-size: 9px;
}

.public-panel-total {
  min-width: 65px;
  padding: 5px 9px;
}

.public-panel-total strong {
  font-size: 24px;
}

.public-processing-groups,
.public-pending-groups {
  gap: 6px;
  padding: 8px;
}

.public-queue-group,
.public-pending-group {
  grid-template-columns: 118px minmax(0, 1fr);
}

.public-group-header,
.public-pending-group-header {
  padding: 7px 8px;
}

.public-number-grid {
  gap: 5px;
  padding: 6px;
}

.processing-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pending-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.public-number-card {
  padding: 9px 4px;
  font-size: clamp(14px, 1.18vw, 20px);
}

.public-priority-strip {
  grid-template-columns: 120px minmax(0, 1fr);
  padding: 7px 10px;
}

.public-page-footer {
  min-height: 33px;
}

.professional-announcement {
  min-height: 32px;
}

/* Mobile: important actions fit without zoom */
@media (max-width: 800px) {
  .professional-shell {
    max-height: none;
  }

  .professional-station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .professional-card {
    min-height: 102px !important;
    padding: 13px !important;
  }

  .professional-icon {
    width: 36px;
    height: 36px;
  }

  .workstation-options {
    grid-template-columns: 1fr;
  }

  .workstation-option {
    min-height: 108px;
    padding: 15px;
  }

  .board-section {
    height: 55dvh !important;
    min-height: 370px !important;
  }

  #modal-actions {
    grid-template-columns: 1fr;
  }

  .public-tv-layout {
    grid-template-columns: 1fr;
  }

  .public-tv-panel {
    min-height: 600px;
  }
}

@media (max-width: 520px) {
  .professional-home {
    padding: 8px;
  }

  .professional-shell {
    width: 100%;
    padding: 14px;
  }

  .professional-header {
    gap: 14px;
  }

  .professional-brand {
    gap: 13px;
  }

  .professional-brand .lto-logo {
    width: 68px !important;
    height: 68px !important;
  }

  .professional-brand h1 {
    font-size: 27px;
    line-height: 1.06;
  }

  .professional-brand p {
    font-size: 12px;
  }

  .professional-station-grid {
    grid-template-columns: 1fr !important;
  }

  .professional-card {
    min-height: 82px !important;
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center !important;
  }

  .professional-card small {
    line-height: 1.25;
  }

  .professional-status {
    padding: 12px;
  }

  .status-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .professional-lower-grid {
    grid-template-columns: 1fr;
  }

  .workstation-shell {
    width: calc(100% - 14px);
    padding: 16px;
  }

  .workstation-header {
    grid-template-columns: 1fr;
  }

  .workstation-header h1 {
    font-size: 30px;
  }

  .queue-detail-grid,
  .staff-queue-meta {
    grid-template-columns: 1fr;
  }

  .queue-detail-grid > div:nth-child(odd),
  .staff-queue-meta > div:nth-child(odd) {
    border-right: 0;
  }

  .modal-card {
    max-height: 92dvh !important;
  }
}


/* ================================================================
   V29 MOBILE DASHBOARD + SMART TV CAPACITY REPAIR
   ================================================================ */

/* More indicator inside fixed TV category rows */
.public-more-card {
  min-width: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  padding: 8px 4px;
  color: #9fc7e8;
  background: rgba(47,128,207,.10);
  border: 1px dashed rgba(143,197,245,.34);
  font-size: clamp(10px, .9vw, 14px);
  font-weight: 900;
  white-space: nowrap;
}

.pending-more-card {
  color: #f2aaa5;
  background: rgba(217,45,32,.08);
  border-color: rgba(249,112,102,.34);
}

.priority-more-card {
  color: #4f3600;
  background: linear-gradient(135deg, #d7a928, #f2d67b);
  border: 1px solid #f0d169;
}

/* Fixed four equal category rows. One busy category cannot push LETAS away. */
.public-processing-groups,
.public-pending-groups {
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  overflow: hidden;
}

.public-queue-group,
.public-pending-group {
  min-height: 0 !important;
  overflow: hidden;
}

.public-number-grid {
  align-content: center;
  overflow: hidden;
}

.processing-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(31px, auto);
}

.pending-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(31px, auto);
}

.public-number-card,
.public-more-card {
  min-height: 31px;
}

/* Mobile dashboard becomes a practical menu list, not tall two-column cards. */
@media (max-width: 900px) {
  .professional-home {
    display: block !important;
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(16px + env(safe-area-inset-bottom)) !important;
  }

  .professional-shell {
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 13px !important;
    border-radius: 17px !important;
    overflow: visible !important;
  }

  .professional-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .professional-brand {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center !important;
    gap: 11px !important;
  }

  .professional-brand .lto-logo {
    width: 62px !important;
    height: 62px !important;
  }

  .professional-brand h1 {
    font-size: clamp(25px, 7.5vw, 36px) !important;
    line-height: 1.04 !important;
    overflow-wrap: normal;
  }

  .professional-brand p {
    display: none;
  }

  .agency-label {
    font-size: 9px !important;
  }

  .professional-status {
    display: none !important;
  }

  .professional-divider {
    margin: 12px 0 !important;
  }

  .professional-station-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .professional-card {
    width: 100% !important;
    min-height: 76px !important;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    gap: 11px !important;
    border-radius: 13px !important;
  }

  .professional-card::after {
    content: "›";
    color: #78b7eb;
    font-size: 25px;
    line-height: 1;
  }

  .professional-card .professional-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .professional-card strong {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .professional-card small {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .professional-lower-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 9px !important;
  }

  .professional-info-panel {
    padding: 12px !important;
  }

  .professional-footer {
    display: none !important;
  }
}

/* Phone TV preview: clean header and all four categories remain visible. */
@media (max-width: 800px) {
  .tv-page {
    padding:
      calc(9px + env(safe-area-inset-top))
      9px
      calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .public-tv-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    min-height: 0 !important;
  }

  .tv-brand {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center !important;
    gap: 10px !important;
  }

  .tv-logo {
    width: 54px !important;
    height: 54px !important;
  }

  .tv-brand h1 {
    font-size: clamp(25px, 8vw, 36px) !important;
    line-height: 1.02 !important;
    overflow-wrap: normal !important;
  }

  .tv-agency,
  .tv-brand p {
    display: none !important;
  }

  .tv-header-actions {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .tv-clock-block {
    justify-items: start !important;
  }

  .tv-clock-block strong {
    font-size: 25px !important;
  }

  .tv-clock-block span {
    font-size: 9px !important;
  }

  .tv-home {
    margin: 0 !important;
    padding: 9px 12px !important;
  }

  .public-tv-panel {
    min-height: 560px !important;
  }

  .public-processing-groups,
  .public-pending-groups {
    grid-template-rows: repeat(4, minmax(120px, auto)) !important;
  }

  .public-queue-group,
  .public-pending-group {
    grid-template-columns: 102px minmax(0, 1fr) !important;
  }

  .processing-grid,
  .pending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .public-number-card,
  .public-more-card {
    font-size: 12px !important;
    min-height: 34px;
  }
}


/* ================================================================
   V30 FIXED GRID + MOBILE CLEANUP
   ================================================================ */

/* Remove movement/click delays and animated feedback globally. */
*,
*::before,
*::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

button,
.station-card,
.professional-card,
.workstation-option,
.queue-card,
.queue-box,
.action-btn,
.back-btn,
.tv-home {
  transform: none !important;
}

button:active,
.station-card:active,
.professional-card:active,
.workstation-option:active,
.queue-card:active,
.queue-box:active,
.action-btn:active {
  transform: none !important;
}

/* Smart TV category sections never expand beyond their reserved row. */
.public-processing-groups,
.public-pending-groups {
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.public-queue-group,
.public-pending-group {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.public-number-grid {
  min-height: 0 !important;
  height: 100% !important;
  align-content: center !important;
  overflow: hidden !important;
}

/* Four numbers only, with the 5th slot reserved for +N more. */
.processing-grid,
.pending-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}

.public-number-card,
.public-more-card {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  max-height: 48px;
  padding: 6px 4px !important;
  font-size: clamp(11px, .92vw, 17px) !important;
}

.public-more-card {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Priority strip: fixed title, four numbers, +more. */
.public-priority-strip {
  grid-template-columns: 130px minmax(0, 1fr) !important;
  min-height: 52px;
  overflow: hidden !important;
}

.priority-strip-numbers {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.priority-strip-numbers .public-number-card,
.priority-strip-numbers .public-more-card {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Mobile public display: priority stays readable and categories stay compact. */
@media (max-width: 800px) {
  .public-priority-strip {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .priority-strip-title {
    white-space: nowrap;
  }

  .priority-strip-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .priority-strip-numbers .public-number-card,
  .priority-strip-numbers .public-more-card {
    min-height: 38px !important;
    font-size: 13px !important;
  }

  .public-processing-groups,
  .public-pending-groups {
    grid-template-rows: repeat(4, 128px) !important;
  }

  .public-queue-group,
  .public-pending-group {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  .processing-grid,
  .pending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
  }

  .public-number-card,
  .public-more-card {
    min-height: 34px !important;
    max-height: none !important;
    font-size: 12px !important;
  }
}

/* Main mobile dashboard: no descriptions, no overlap, compact menu. */
@media (max-width: 900px) {
  .professional-station-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .professional-card {
    min-height: 66px !important;
    padding: 10px 11px !important;
    grid-template-columns: 40px minmax(0, 1fr) 18px !important;
    gap: 10px !important;
  }

  .professional-card span:nth-child(2) {
    min-width: 0;
  }

  .professional-card strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .professional-card small {
    display: none !important;
  }

  .professional-card .professional-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .professional-card::after {
    font-size: 21px !important;
  }

  .professional-lower-grid,
  .professional-footer {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .professional-brand {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .professional-brand .lto-logo {
    width: 54px !important;
    height: 54px !important;
  }

  .professional-brand h1 {
    font-size: 24px !important;
    line-height: 1.02 !important;
  }

  .agency-label {
    font-size: 8px !important;
  }
}

/* PACD mobile controls: labels and inputs never collide. */
@media (max-width: 700px) {
  .page:has(.pacd-panel) .topbar h1 {
    font-size: clamp(31px, 9.2vw, 44px) !important;
    line-height: 1.02 !important;
  }

  .pacd-panel {
    padding: 12px !important;
  }

  .pacd-panel .toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pacd-panel label {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pacd-panel label > span,
  .pacd-panel label {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .pacd-panel select,
  .pacd-panel input {
    min-height: 52px !important;
    padding: 10px 13px !important;
    font-size: 16px !important;
  }

  .priority-toggle {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .priority-toggle span {
    min-width: 0 !important;
    font-size: 16px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #generate-batch {
    min-height: 54px !important;
    font-size: 17px !important;
  }

  .transaction-color-note {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .pacd-panel .queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .pacd-panel .queue-box {
    min-width: 0 !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
  }
}

/* Mobile modal: actions remain visible, details scroll inside. */
@media (max-width: 700px) {
  .modal-card {
    width: calc(100vw - 12px) !important;
    max-height: 90dvh !important;
    border-radius: 18px !important;
  }

  .modal-header {
    padding: 12px 14px !important;
  }

  .modal-scroll {
    max-height: 58dvh !important;
    overflow-y: auto !important;
    padding: 12px 14px !important;
  }

  .modal-footer {
    padding: 9px 14px 12px !important;
  }

  #modal-actions {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   V31 CONTINUOUS PUBLIC QUEUE + MOBILE LAYOUT REPAIR
   ================================================================ */

/* ---------- Main dashboard: stable responsive composition ---------- */
@media (max-width: 900px) {
  .professional-home {
    min-height: 100dvh !important;
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .professional-shell {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  .professional-header {
    display: block !important;
  }

  .professional-brand {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .professional-brand .lto-logo {
    width: 58px !important;
    height: 58px !important;
  }

  .professional-brand > div {
    min-width: 0 !important;
  }

  .agency-label {
    display: block !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }

  .professional-brand h1 {
    margin-top: 3px !important;
    font-size: clamp(23px, 7vw, 32px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.03em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .professional-status,
  .professional-brand p,
  .professional-divider,
  .professional-lower-grid,
  .professional-footer {
    display: none !important;
  }

  .professional-station-grid {
    margin-top: 13px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .professional-card {
    width: 100% !important;
    min-height: 64px !important;
    padding: 9px 11px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .professional-card .professional-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .professional-card > span:nth-child(2) {
    min-width: 0 !important;
  }

  .professional-card strong {
    display: block !important;
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.14 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .professional-card small {
    display: none !important;
  }

  .professional-card::after {
    content: "›";
    color: #76b7ed;
    font-size: 21px;
    justify-self: end;
  }
}

/* Extra-narrow phones: title and labels still stay intact. */
@media (max-width: 390px) {
  .professional-brand {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  .professional-brand .lto-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .professional-brand h1 {
    font-size: 22px !important;
  }

  .professional-card strong {
    font-size: 14px !important;
  }
}

/* ---------- Public display mobile: no overlap, compact preview ---------- */
@media (max-width: 800px) {
  .tv-page {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .public-tv-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .tv-brand {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  .tv-logo {
    width: 52px !important;
    height: 52px !important;
  }

  .tv-brand > div {
    min-width: 0 !important;
  }

  .tv-agency,
  .tv-brand p {
    display: none !important;
  }

  .tv-brand h1 {
    margin: 0 !important;
    font-size: clamp(24px, 7.3vw, 34px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .tv-header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .tv-clock-block {
    order: 2;
    min-width: 0 !important;
    justify-items: end !important;
  }

  .tv-clock-block strong {
    font-size: 23px !important;
  }

  .tv-clock-block span {
    font-size: 9px !important;
  }

  .tv-home {
    order: 1;
    margin: 0 !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
  }

  #tv-sections {
    overflow: visible !important;
  }

  .public-tv-layout {
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .public-tv-panel {
    min-height: 0 !important;
    height: auto !important;
  }

  .public-panel-title {
    min-height: 62px !important;
    padding: 10px 13px !important;
  }

  .public-panel-title h2 {
    font-size: 28px !important;
  }

  .public-processing-groups,
  .public-pending-groups {
    display: grid !important;
    grid-template-rows: repeat(4, 104px) !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .public-queue-group,
  .public-pending-group {
    height: 104px !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
  }

  .public-group-header,
  .public-pending-group-header {
    padding: 7px !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
  }

  .public-category-code {
    width: 31px !important;
    height: 31px !important;
    font-size: 10px !important;
    overflow: hidden !important;
  }

  .public-group-header strong,
  .public-pending-group-header strong {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  .public-group-header > span:last-child,
  .public-pending-group-header > span:last-child {
    font-size: 8px !important;
  }

  .processing-grid,
  .pending-grid {
    height: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    padding: 6px !important;
    gap: 5px !important;
  }

  .public-number-card,
  .public-more-card {
    min-height: 27px !important;
    padding: 4px 3px !important;
    font-size: 11px !important;
  }

  .public-priority-strip {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .priority-strip-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .professional-announcement {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }

  .realtime-badge {
    justify-self: start !important;
  }
}

/* ---------- PACD compact mobile layout ---------- */
@media (max-width: 700px) {
  .page:has(.pacd-panel) {
    padding:
      calc(7px + env(safe-area-inset-top))
      7px
      calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .page:has(.pacd-panel) .topbar {
    margin-bottom: 8px !important;
  }

  .page:has(.pacd-panel) .topbar h1 {
    font-size: clamp(28px, 8vw, 39px) !important;
    line-height: 1 !important;
  }

  .page:has(.pacd-panel) .topbar p {
    display: none !important;
  }

  .pacd-panel {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .pacd-panel .toolbar {
    gap: 7px !important;
  }

  .pacd-panel label {
    font-size: 12px !important;
  }

  .pacd-panel select,
  .pacd-panel input {
    min-height: 45px !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
  }

  .priority-toggle {
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
  }

  #generate-batch {
    min-height: 48px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
  }

  .transaction-color-note {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .batch-tabs-wrap {
    margin: 8px 0 !important;
  }

  .batch-tab {
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  .pacd-panel h2 {
    margin: 8px 0 2px !important;
    font-size: 19px !important;
  }

  .stats-line {
    margin: 4px 0 8px !important;
  }

  .stats-line .legend {
    font-size: 11px !important;
    gap: 7px 10px !important;
  }

  .pacd-panel .queue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .pacd-panel .queue-box {
    min-height: 48px !important;
    padding: 6px 2px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }
}

/* ---------- PACD correction modal: compact and action-focused ---------- */
@media (max-width: 700px) {
  .modal-card {
    width: calc(100vw - 10px) !important;
    max-height: 92dvh !important;
    border-radius: 17px !important;
  }

  .modal-header {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .modal-header h2 {
    font-size: 20px !important;
    line-height: 1.12 !important;
  }

  .modal-close {
    width: 42px !important;
    height: 42px !important;
  }

  .modal-scroll {
    max-height: 58dvh !important;
    padding: 10px 12px !important;
  }

  .queue-detail-code-row {
    padding: 10px 12px !important;
  }

  .queue-detail-code-row .status-main-code {
    font-size: 29px !important;
  }

  .queue-detail-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .queue-detail-grid > div {
    padding: 8px 10px !important;
  }

  .queue-detail-grid span {
    font-size: 8px !important;
  }

  .queue-detail-grid strong {
    font-size: 12px !important;
  }

  .status-history {
    max-height: 135px !important;
    overflow-y: auto !important;
    padding: 9px 10px !important;
  }

  #modal-actions {
    margin-top: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .action-btn {
    min-height: 42px !important;
    padding: 8px !important;
    font-size: 12px !important;
  }

  .modal-footer {
    padding: 7px 12px 10px !important;
  }

  .modal-footer button {
    min-height: 40px !important;
  }
}

@media (max-width: 390px) {
  .pacd-panel .queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #modal-actions {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   V33 CASHIER DIRECT ACTIONS
   ================================================================ */

.cashier-waiting-hidden {
  display: none !important;
}

.modern-board:has(.cashier-waiting-hidden) {
  grid-template-columns: 1.45fr 1fr !important;
}

.cashier-transaction-summary {
  overflow: hidden;
  border: 1px solid #d0d5dd;
  border-radius: 18px;
  background: #ffffff;
}

.cashier-queue-banner {
  padding: 18px;
  text-align: center;
  background:
    linear-gradient(135deg, #eff6ff, #ffffff);
  border-bottom: 1px solid #d0d5dd;
}

.cashier-queue-banner span {
  display: block;
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cashier-queue-banner strong {
  display: block;
  margin-top: 4px;
  color: #101828;
  font-size: clamp(38px, 7vw, 54px);
  line-height: 1;
  letter-spacing: -.04em;
}

.cashier-queue-banner small {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #175cd3;
  background: #dbeafe;
  font-size: 11px;
  font-weight: 900;
}

.cashier-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cashier-detail-grid > div {
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #eaecf0;
}

.cashier-detail-grid > div:nth-child(odd) {
  border-right: 1px solid #eaecf0;
}

.cashier-detail-grid span {
  display: block;
  color: #667085;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.cashier-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #101828;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.cashier-action-guide {
  padding: 11px 14px;
  color: #475467;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.cashier-complete-action,
.cashier-pending-action,
.cashier-return-action {
  min-height: 58px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  letter-spacing: .01em;
}

.cashier-complete-action {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.22),
    0 7px 18px rgba(22,163,74,.22) !important;
}

.cashier-pending-action {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 7px 18px rgba(220,38,38,.22) !important;
}

.cashier-return-action {
  border: 1px solid #d0d5dd !important;
}

@media (max-width: 1000px) {
  .modern-board:has(.cashier-waiting-hidden) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .cashier-detail-grid {
    grid-template-columns: 1fr;
  }

  .cashier-detail-grid > div:nth-child(odd) {
    border-right: 0;
  }

  .cashier-queue-banner {
    padding: 14px;
  }

  .cashier-queue-banner strong {
    font-size: 40px;
  }

  .cashier-complete-action,
  .cashier-pending-action,
  .cashier-return-action {
    min-height: 52px !important;
    font-size: 15px !important;
  }
}


/* ================================================================
   V34 UNIFIED FIXED-FIT MODAL SYSTEM
   ================================================================ */

.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left)) !important;
  background: rgba(8, 18, 35, .72) !important;
  overflow: hidden !important;
  backdrop-filter: blur(3px);
}

.modal.hidden {
  display: none !important;
}

.modal-card {
  width: min(620px, calc(100vw - 16px)) !important;
  max-width: 620px !important;
  max-height: min(92dvh, 760px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  color: #101828 !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
}

.modal-header {
  min-height: 72px !important;
  padding: 14px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e4e7ec !important;
}

.modal-header h2 {
  min-width: 0 !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: clamp(21px, 3.4vw, 31px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.modal-x {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f2f4f7 !important;
  color: #101828 !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

.modal-scroll {
  min-height: 0 !important;
  padding: 14px 18px 10px !important;
  overflow: hidden !important;
}

#modal-body {
  min-width: 0 !important;
}

.modal-actions-fixed {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 10px 18px 12px !important;
  background: #ffffff !important;
  border-top: 1px solid #eef2f6 !important;
}

.modal-one-action .modal-actions-fixed {
  grid-template-columns: 1fr !important;
}

.modal-three-actions .modal-actions-fixed {
  grid-template-columns: 1fr 1fr !important;
}

.modal-three-actions .modal-actions-fixed .action-btn:last-child {
  grid-column: 1 / -1;
}

.action-btn {
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
}

.modal-footer {
  min-height: 58px !important;
  padding: 8px 18px 12px !important;
  display: grid !important;
  place-items: center !important;
  background: #ffffff !important;
  border-top: 1px solid #eef2f6 !important;
}

.modal-close-btn {
  min-height: 40px !important;
  min-width: 120px !important;
  padding: 8px 20px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #101828 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* Compact waiting/start-action modal */
.compact-action-summary {
  border: 1px solid #dce4ec;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
}

.compact-action-code {
  padding: 14px;
  color: #101828;
  background: linear-gradient(135deg, #eef4ff, #ffffff);
  border-bottom: 1px solid #dce4ec;
  font-size: clamp(31px, 7vw, 43px);
  font-weight: 1000;
  text-align: center;
}

.compact-action-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-action-lines > div {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid #e4e7ec;
}

.compact-action-lines > div:last-child {
  border-right: 0;
}

.compact-action-lines span {
  display: block;
  color: #667085;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-action-lines strong {
  display: block;
  margin-top: 3px;
  color: #101828;
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Details/correction modal */
.modal-type-details .queue-detail-summary,
.modal-type-details .pacd-status-card {
  border-radius: 16px !important;
}

.modal-type-details .queue-detail-code-row {
  padding: 11px 13px !important;
}

.modal-type-details .queue-detail-code-row .status-main-code {
  font-size: clamp(29px, 6vw, 40px) !important;
}

.modal-type-details .queue-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.modal-type-details .queue-detail-grid > div {
  padding: 8px 10px !important;
}

.modal-type-details .queue-detail-grid span {
  font-size: 8px !important;
}

.modal-type-details .queue-detail-grid strong {
  font-size: 12px !important;
}

.modal-type-details .status-history {
  max-height: 118px !important;
  padding: 9px 10px !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
}

.modal-type-details .history-heading {
  margin-bottom: 5px !important;
  font-size: 10px !important;
}

/* Options/proceed/pending modal */
.modal-type-options .radio-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.modal-type-options .radio-option {
  min-height: 42px !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 11px !important;
  background: #f8fafc !important;
}

.modal-type-options .radio-option span {
  font-size: 11px !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.modal-type-options .radio-option input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.modal-type-options .hidden-input {
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* Cashier/action modal */
.modal-type-action .cashier-queue-banner {
  padding: 13px !important;
}

.modal-type-action .cashier-queue-banner strong {
  font-size: clamp(34px, 7vw, 46px) !important;
}

.modal-type-action .cashier-detail-grid > div {
  padding: 9px 11px !important;
}

@media (max-width: 700px) {
  .modal {
    padding:
      max(5px, env(safe-area-inset-top))
      5px
      max(5px, env(safe-area-inset-bottom))
      5px !important;
  }

  .modal-card {
    width: calc(100vw - 10px) !important;
    max-height: 94dvh !important;
    border-radius: 20px !important;
  }

  .modal-header {
    min-height: 62px !important;
    padding: 10px 13px !important;
  }

  .modal-header h2 {
    font-size: clamp(19px, 5.5vw, 25px) !important;
  }

  .modal-x {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    font-size: 27px !important;
  }

  .modal-scroll {
    padding: 10px 13px 8px !important;
  }

  .modal-actions-fixed {
    padding: 8px 13px 10px !important;
    gap: 7px !important;
  }

  .modal-footer {
    min-height: 50px !important;
    padding: 6px 13px 9px !important;
  }

  .action-btn {
    min-height: 46px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .modal-close-btn {
    min-height: 36px !important;
    font-size: 13px !important;
  }

  .modal-type-details .status-history {
    max-height: 96px !important;
  }

  .compact-action-lines {
    grid-template-columns: 1fr 1fr !important;
  }

  .compact-action-lines > div:nth-child(2) {
    border-right: 0;
  }

  .compact-action-lines > div:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid #e4e7ec;
  }
}

@media (max-width: 390px) {
  .modal-type-options .radio-list {
    grid-template-columns: 1fr !important;
  }

  .modal-three-actions .modal-actions-fixed {
    grid-template-columns: 1fr !important;
  }

  .modal-three-actions .modal-actions-fixed .action-btn:last-child {
    grid-column: auto;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .modal-card {
    max-height: calc(100dvh - 10px) !important;
  }

  .modal-header {
    min-height: 50px !important;
    padding: 7px 12px !important;
  }

  .modal-scroll {
    padding: 7px 12px 5px !important;
  }

  .modal-actions-fixed {
    padding: 6px 12px !important;
  }

  .modal-footer {
    min-height: 40px !important;
    padding: 4px 12px 6px !important;
  }
}


/* ================================================================
   V35 PACD IPHONE STABILITY + DIRECT PHOTO/SIGNATURE
   ================================================================ */

.queue-box,
.batch-tab,
#generate-batch,
#pacd-category,
#pacd-transaction,
#priority-toggle {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.queue-box {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

.direct-stage-waiting-hidden {
  display: none !important;
}

.modern-board:has(.direct-stage-waiting-hidden) {
  grid-template-columns: 1.45fr 1fr !important;
}

@media (max-width: 1000px) {
  .modern-board:has(.direct-stage-waiting-hidden) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  #pacd-category,
  #pacd-transaction {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-overflow: ellipsis !important;
  }

  .pacd-panel .queue-box {
    touch-action: manipulation !important;
  }
}


/* ================================================================
   V36 NO-WAITING WORKFLOW + ZERO-DELAY PACD
   ================================================================ */

/* No Waiting section anywhere in staff dashboards. */
.system-waiting-hidden,
.waiting-section {
  display: none !important;
}

.modern-board {
  grid-template-columns: 1.45fr 1fr !important;
}

@media (max-width: 1000px) {
  .modern-board {
    grid-template-columns: 1fr !important;
  }
}

/* PACD stays protected without visible delay. */
.queue-box {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.queue-box:active {
  opacity: .94;
}

/* Public category labels never overlap. */
.public-group-header,
.public-pending-group-header {
  min-width: 0 !important;
}

.public-group-header strong,
.public-pending-group-header strong {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.08 !important;
}

.category-cr .public-group-header strong,
.category-cr .public-pending-group-header strong {
  white-space: nowrap !important;
}

@media (max-width: 800px) {
  .category-cr .public-group-header,
  .category-cr .public-pending-group-header {
    grid-template-columns: 31px minmax(0, 1fr) !important;
  }

  .category-cr .public-group-header strong,
  .category-cr .public-pending-group-header strong {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}


/* ================================================================
   V37 MAIN DASHBOARD POLISH
   Uniform cards with restrained workstation accents
   ================================================================ */

.professional-shell {
  background:
    linear-gradient(180deg, rgba(7,20,38,.95), rgba(7,20,38,.90)) !important;
  border: 1px solid rgba(143,197,245,.18) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.professional-header {
  padding-bottom: 4px;
}

.professional-brand h1 {
  letter-spacing: -.035em !important;
}

.professional-brand p {
  max-width: 760px;
  color: #b8cadb !important;
}

.professional-divider {
  margin: 20px 0 !important;
}

.professional-station-grid {
  gap: 12px !important;
}

.professional-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 118px !important;
  padding: 16px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(18,49,83,.88), rgba(9,27,48,.96)) !important;
  border: 1px solid rgba(143,197,245,.16) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.professional-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--station-accent, #2f80cf);
  opacity: .95;
}

.professional-card::after {
  content: "";
  position: absolute;
  top: -42px;
  right: -42px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: var(--station-accent, #2f80cf);
  opacity: .045;
  z-index: -1;
}

.professional-card:hover {
  transform: none !important;
  border-color: color-mix(in srgb, var(--station-accent, #2f80cf) 58%, transparent) !important;
  background:
    linear-gradient(145deg, rgba(21,57,96,.96), rgba(10,31,54,.98)) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.professional-card .professional-icon {
  width: 43px !important;
  height: 43px !important;
  border-radius: 11px !important;
  color: var(--station-accent, #2f80cf) !important;
  background:
    color-mix(in srgb, var(--station-accent, #2f80cf) 13%, transparent) !important;
  border:
    1px solid color-mix(in srgb, var(--station-accent, #2f80cf) 28%, transparent) !important;
}

.professional-card .professional-icon img {
  filter:
    brightness(0)
    saturate(100%)
    invert(68%)
    sepia(36%)
    saturate(820%)
    hue-rotate(169deg)
    brightness(96%) !important;
}

.professional-card strong {
  font-size: 16px !important;
  letter-spacing: -.01em;
}

.professional-card small {
  color: #aabed1 !important;
  font-size: 11px !important;
}

.featured-card {
  border-color: rgba(47,128,207,.30) !important;
}

/* Workstation accents */
.accent-pacd      { --station-accent: #4aa3df; }
.accent-mvcr      { --station-accent: #2aa7c9; }
.accent-license   { --station-accent: #35b69f; }
.accent-photosig  { --station-accent: #8b78d1; }
.accent-cashier   { --station-accent: #35a86b; }
.accent-approving { --station-accent: #5e7ce2; }
.accent-releasing { --station-accent: #6f8da7; }
.accent-letas     { --station-accent: #d5a63d; }
.accent-display   { --station-accent: #2f80cf; }
.accent-summary   { --station-accent: #8796a8; }

/* LETAS now matches every other card body */
.accent-letas {
  background:
    linear-gradient(145deg, rgba(18,49,83,.88), rgba(9,27,48,.96)) !important;
  border-color: rgba(213,166,61,.20) !important;
}

.accent-letas:hover {
  background:
    linear-gradient(145deg, rgba(21,57,96,.96), rgba(10,31,54,.98)) !important;
  border-color: rgba(213,166,61,.52) !important;
}

/* Lower information panels */
.professional-lower-grid {
  gap: 12px !important;
  margin-top: 12px !important;
}

.professional-info-panel {
  background:
    linear-gradient(145deg, rgba(11,29,51,.92), rgba(9,25,44,.96)) !important;
  border-color: rgba(143,197,245,.13) !important;
}

.panel-label {
  color: #8fc5f5 !important;
}

.professional-footer {
  color: #829bb2 !important;
}

/* Tablet */
@media (max-width: 1200px) and (min-width: 901px) {
  .professional-station-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile dashboard: compact, consistent, no special LETAS fill */
@media (max-width: 900px) {
  .professional-shell {
    padding: 13px !important;
  }

  .professional-station-grid {
    margin-top: 12px !important;
    gap: 7px !important;
  }

  .professional-card {
    min-height: 64px !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    background:
      linear-gradient(145deg, rgba(18,49,83,.92), rgba(9,27,48,.98)) !important;
  }

  .professional-card::before {
    width: 3px;
  }

  .professional-card::after {
    display: none !important;
  }

  .professional-card .professional-icon {
    width: 39px !important;
    height: 39px !important;
  }

  .professional-card strong {
    font-size: 15px !important;
  }

  .accent-letas {
    background:
      linear-gradient(145deg, rgba(18,49,83,.92), rgba(9,27,48,.98)) !important;
  }
}


/* ================================================================
   V38 IPHONE PACD + MOBILE DASHBOARD REPAIR
   ================================================================ */

.pacd-panel .queue-box {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.pacd-panel .queue-box[disabled] {
  pointer-events: auto !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .professional-home {
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .professional-shell {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .professional-brand {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .professional-brand .lto-logo {
    width: 54px !important;
    height: 54px !important;
  }

  .professional-brand h1 {
    margin: 0 !important;
    font-size: clamp(23px, 7vw, 31px) !important;
    line-height: 1.03 !important;
  }

  .professional-brand p,
  .professional-status,
  .professional-divider,
  .professional-lower-grid,
  .professional-footer {
    display: none !important;
  }

  .professional-station-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 12px !important;
  }

  .professional-card {
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 9px 11px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .professional-card::after {
    content: "›" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    color: #78b8eb !important;
    font-size: 23px !important;
    justify-self: end !important;
  }

  .professional-card .professional-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .professional-card strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .professional-card small {
    display: none !important;
  }

  .accent-letas,
  .accent-letas:hover {
    background:
      linear-gradient(145deg, rgba(18,49,83,.94), rgba(9,27,48,.99)) !important;
  }
}

@media (max-width: 700px) {
  .pacd-panel .queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .pacd-panel .queue-box {
    min-height: 58px !important;
    padding: 7px 3px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
}


/* ================================================================
   V39 NATIVE IPHONE TAP + FRESH DASHBOARD
   ================================================================ */

.build-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #06182c;
  background: #78c7ff;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .04em;
  vertical-align: middle;
}

.queue-box {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.queue-action-in-flight {
  pointer-events: none !important;
}

/* Dashboard: visual depth without making one station look exceptional. */
.professional-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 8%, rgba(63,155,230,.14), transparent 27%),
    radial-gradient(circle at 10% 94%, rgba(43,183,164,.08), transparent 30%),
    linear-gradient(160deg, rgba(7,24,45,.98), rgba(5,16,31,.98)) !important;
}

.professional-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(111,180,235,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,180,235,.025) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.professional-header,
.professional-station-grid,
.professional-lower-grid,
.professional-footer {
  position: relative;
  z-index: 1;
}

.station-copy {
  min-width: 0;
}

.professional-card {
  background:
    linear-gradient(145deg, rgba(20,55,94,.88), rgba(8,25,46,.96)) !important;
}

.professional-card .station-copy strong {
  display: block;
}

.professional-card .station-copy small {
  display: block;
}

@media (max-width: 900px) {
  .professional-home {
    background:
      radial-gradient(circle at 50% -10%, rgba(50,139,211,.20), transparent 38%),
      #061426 !important;
  }

  .professional-shell {
    min-height: calc(100dvh - 16px);
    padding: 14px !important;
    border-radius: 19px !important;
  }

  .professional-brand {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 3px 2px 13px;
    border-bottom: 1px solid rgba(142,196,239,.14);
  }

  .professional-brand .lto-logo {
    width: 58px !important;
    height: 58px !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.28));
  }

  .professional-brand h1 {
    font-size: clamp(23px, 7vw, 31px) !important;
    line-height: 1.02 !important;
  }

  .agency-label {
    color: #8fc5f5 !important;
    font-size: 8px !important;
  }

  .professional-station-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 13px !important;
  }

  .professional-card {
    min-height: 68px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 11px !important;
    border-radius: 14px !important;
    box-shadow:
      0 9px 22px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .professional-card::after {
    content: "›" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--station-accent, #78b8eb) !important;
    opacity: .90 !important;
    font-size: 25px !important;
    justify-self: end !important;
  }

  .professional-card .professional-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .professional-card .station-copy {
    min-width: 0 !important;
  }

  .professional-card .station-copy strong {
    margin: 0 !important;
    color: #f7fbff !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  .professional-card .station-copy small {
    display: block !important;
    margin-top: 3px !important;
    color: #91a9bf !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .accent-letas,
  .accent-letas:hover {
    background:
      linear-gradient(145deg, rgba(20,55,94,.88), rgba(8,25,46,.96)) !important;
  }
}

/* PACD: all generated transaction cards use the same reliable tap surface. */
@media (max-width: 700px) {
  .pacd-panel .queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .pacd-panel .queue-box {
    min-height: 61px !important;
    padding: 7px 3px !important;
    border-radius: 11px !important;
  }
}


/* ================================================================
   V40 COMBINED WAITING + CURRENT SECTION
   ================================================================ */

.system-waiting-hidden,
.waiting-section {
  display: none !important;
}

/* Waiting and processing coexist inside the same visible active section. */
.current-section .queue-card.waiting {
  position: relative;
  opacity: .92;
  border-style: dashed !important;
}

.current-section .queue-card.current {
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(31,182,112,.24),
    0 8px 18px rgba(0,0,0,.12) !important;
}

.queue-work-state {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 3px auto 0;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.queue-card.waiting .queue-work-state {
  color: #7a4f00 !important;
  background: #fff0bd;
}

.queue-card.current .queue-work-state {
  color: #075c38 !important;
  background: #c9f5df;
}

.current-section .section-head h2 {
  white-space: normal !important;
}

@media (max-width: 700px) {
  .queue-work-state {
    font-size: 8px !important;
    padding: 3px 6px;
  }
}


/* ================================================================
   V41 DASHBOARD RESPONSIVE COLOR + TEXT FIX
   ================================================================ */

/* Unified dashboard palette */
.professional-home {
  background:
    radial-gradient(circle at 18% 12%, rgba(48, 132, 197, .22), transparent 30%),
    radial-gradient(circle at 84% 88%, rgba(32, 160, 145, .12), transparent 34%),
    linear-gradient(150deg, #061525 0%, #08233a 50%, #061523 100%) !important;
}

.professional-shell {
  background:
    linear-gradient(155deg, rgba(8, 28, 50, .97), rgba(5, 19, 34, .98)) !important;
  border: 1px solid rgba(96, 185, 232, .22) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.professional-station-grid {
  gap: 12px !important;
}

.professional-card {
  --station-accent: #47a9dd;
  min-width: 0 !important;
  background:
    linear-gradient(145deg, rgba(17, 53, 88, .95), rgba(7, 28, 49, .98)) !important;
  border:
    1px solid color-mix(in srgb, var(--station-accent) 34%, rgba(130, 190, 230, .12)) !important;
  box-shadow:
    0 11px 28px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

.professional-card:hover {
  background:
    linear-gradient(145deg, rgba(21, 66, 106, .98), rgba(8, 34, 58, 1)) !important;
  border-color:
    color-mix(in srgb, var(--station-accent) 62%, transparent) !important;
}

.professional-card .professional-icon {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--station-accent) 18%, transparent),
      rgba(8, 29, 51, .34)
    ) !important;
  border:
    1px solid color-mix(in srgb, var(--station-accent) 38%, transparent) !important;
  color: var(--station-accent) !important;
}

.professional-card .station-copy {
  min-width: 0 !important;
  width: 100% !important;
}

.professional-card .station-copy strong,
.professional-card strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.12 !important;
}

.professional-card .station-copy small,
.professional-card small {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Balanced workstation colors */
.accent-pacd      { --station-accent: #4aa8e6 !important; }
.accent-mvcr      { --station-accent: #2ec1d6 !important; }
.accent-license   { --station-accent: #34c3a5 !important; }
.accent-photosig  { --station-accent: #9a8bea !important; }
.accent-cashier   { --station-accent: #43c887 !important; }
.accent-approving { --station-accent: #6f98ef !important; }
.accent-releasing { --station-accent: #8ea9bc !important; }
.accent-letas     { --station-accent: #d9aa45 !important; }
.accent-display   { --station-accent: #4a9fe6 !important; }
.accent-summary   { --station-accent: #9aafc2 !important; }

/* LETAS now uses the same body treatment as every card */
.accent-letas,
.accent-letas:hover {
  background:
    linear-gradient(145deg, rgba(17, 53, 88, .95), rgba(7, 28, 49, .98)) !important;
}

/* Laptop/tablet keeps the polished multi-column system */
@media (min-width: 1101px) {
  .professional-station-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .professional-card {
    min-height: 116px !important;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .professional-station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .professional-card {
    min-height: 92px !important;
  }
}

/* Mobile: laptop-inspired cards, but sized correctly */
@media (max-width: 700px) {
  .professional-home {
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .professional-shell {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .professional-brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 2px 2px 12px !important;
    border-bottom: 1px solid rgba(108, 184, 231, .15) !important;
  }

  .professional-brand .lto-logo {
    width: 56px !important;
    height: 56px !important;
  }

  .professional-brand h1 {
    margin: 0 !important;
    font-size: clamp(22px, 6.5vw, 29px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .agency-label {
    font-size: 8px !important;
    line-height: 1.1 !important;
    color: #90c9f4 !important;
  }

  .professional-brand p,
  .professional-status,
  .professional-divider,
  .professional-lower-grid,
  .professional-footer {
    display: none !important;
  }

  .professional-station-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .professional-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
    height: auto !important;
    padding: 12px 10px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  .professional-card::before {
    width: 3px !important;
  }

  .professional-card::after {
    display: none !important;
  }

  .professional-card .professional-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 11px !important;
  }

  .professional-card .station-copy,
  .professional-card > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  .professional-card .station-copy strong,
  .professional-card strong {
    font-size: clamp(14px, 3.9vw, 17px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
  }

  .professional-card .station-copy small,
  .professional-card small {
    display: none !important;
  }
}

/* Very narrow phones switch to one column to guarantee zero overlap */
@media (max-width: 430px) {
  .professional-station-grid {
    grid-template-columns: 1fr !important;
  }

  .professional-card {
    min-height: 68px !important;
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    padding: 10px 12px !important;
  }

  .professional-card::after {
    content: "›" !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: var(--station-accent) !important;
    opacity: .9 !important;
    font-size: 24px !important;
    justify-self: end !important;
  }

  .professional-card .station-copy strong,
  .professional-card strong {
    font-size: 16px !important;
  }
}


/* ================================================================
   V43 DIRECT CURRENT WORKFLOW
   ================================================================ */

.system-waiting-hidden,
.waiting-section {
  display: none !important;
}

.current-section .queue-card.current {
  border-style: solid !important;
  box-shadow:
    inset 0 0 0 2px rgba(35, 137, 220, .20),
    0 8px 18px rgba(0, 0, 0, .12) !important;
}

.queue-card.current .queue-work-state {
  color: #0d4f85 !important;
  background: #dbeeff !important;
}

.queue-card.pending .queue-work-state {
  color: #8f1616 !important;
  background: #fee2e2 !important;
}

.queue-work-state {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 4px auto 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#modal-actions.modal-actions-fixed {
  justify-items: stretch !important;
}

#modal-actions.modal-actions-fixed .action-btn:only-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  justify-self: stretch !important;
}

@media (max-width: 700px) {
  .queue-work-state {
    padding: 3px 6px !important;
    font-size: 8px !important;
  }
}


/* ================================================================
   V44 STRICT STAGE ROUTING
   ================================================================ */

/* Prevent stale cards from accepting another click during route refresh. */
.queue-card {
  touch-action: manipulation !important;
}

.queue-card:active {
  opacity: .94;
}


/* ================================================================
   V45 GLOBAL STAGE ROUTING
   ================================================================ */

.queue-card {
  touch-action: manipulation !important;
}

.queue-card:active {
  opacity: .94;
}


/* ================================================================
   V46 FAST REALTIME SYNC
   ================================================================ */

.realtime-indicator,
.connection-status {
  transition: opacity .15s ease;
}


/* ================================================================
   V48 CURRENT-ONLY PUBLIC FOCUS
   ================================================================ */

.waiting-section,
.system-waiting-hidden {
  display: none !important;
}

/* The newest active queue per category is clearly emphasized. */
.public-number-card.public-active-processing {
  position: relative;
  z-index: 3;
  overflow: visible !important;
  color: #07192e !important;
  background:
    linear-gradient(145deg, #ffd953, #ffef9b) !important;
  border: 3px solid #ffffff !important;
  box-shadow:
    0 0 0 3px rgba(255, 210, 56, .46),
    0 0 26px rgba(255, 215, 72, .58),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  animation: publicProcessingPulse 2.4s ease-in-out infinite;
}

.public-active-processing strong {
  display: block;
  font-size: inherit;
  line-height: 1;
}

.public-active-caption {
  display: block;
  margin-top: 4px;
  color: #614500 !important;
  font-size: 7px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .08em;
  white-space: nowrap;
}

@keyframes publicProcessingPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 3px rgba(255, 210, 56, .40),
      0 0 20px rgba(255, 215, 72, .42);
  }

  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 0 5px rgba(255, 210, 56, .20),
      0 0 32px rgba(255, 215, 72, .68);
  }
}

/* Pending queues slowly showcase from left to right and back. */
.pending-showcase-track {
  position: relative;
  overflow: hidden !important;
}

.pending-showcase-track .pending-showcase-item {
  animation: pendingShowcase 12s ease-in-out infinite alternate;
  will-change: transform;
}

.pending-showcase-track .pending-showcase-item:nth-child(2n) {
  animation-delay: -2s;
}

.pending-showcase-track .pending-showcase-item:nth-child(3n) {
  animation-delay: -4s;
}

@keyframes pendingShowcase {
  from {
    transform: translateX(-6px);
  }

  to {
    transform: translateX(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-number-card.public-active-processing,
  .pending-showcase-track .pending-showcase-item {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .public-active-caption {
    font-size: 6px !important;
  }

  @keyframes pendingShowcase {
    from {
      transform: translateX(-4px);
    }

    to {
      transform: translateX(10px);
    }
  }
}


/* ================================================================
   V49 PENDING MARQUEE — PUBLIC DISPLAY ONLY
   ================================================================ */

/* Static layout for five or fewer pending queues */
.pending-static-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Continuous marquee for six or more queues */
.pending-marquee-viewport {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 4%,
      #000 96%,
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 4%,
      #000 96%,
      transparent 100%
    );
}

.pending-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  animation:
    pendingMarqueeScroll
    var(--pending-marquee-duration, 28s)
    linear
    infinite;
  will-change: transform;
}

.pending-marquee-set {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pending-marquee-set .public-number-card {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  min-height: 40px !important;
  flex: 0 0 108px;
}

@keyframes pendingMarqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 6px));
  }
}

/* Override the earlier per-card pending animation */
.pending-marquee-track .pending-number,
.pending-marquee-track .priority-number,
.pending-static-grid .pending-number {
  animation: none !important;
  transform: none;
}

.priority-pending-marquee {
  min-height: 42px;
}

.pending-priority-strip .pending-marquee-track {
  gap: 10px;
}

.pending-priority-strip .pending-marquee-set {
  gap: 10px;
}

/* This behavior is public-display only */
.personnel-page .pending-marquee-viewport,
.pacd-page .pending-marquee-viewport {
  display: none !important;
}

@media (max-width: 800px) {
  .pending-static-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  }

  .pending-marquee-set .public-number-card {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex-basis: 92px;
  }

  .pending-marquee-track,
  .pending-marquee-set {
    gap: 8px;
  }

  @keyframes pendingMarqueeScroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-50% - 4px));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pending-marquee-track {
    animation-play-state: paused !important;
  }
}


/* ================================================================
   V50 PENDING-ONLY MARQUEE
   ================================================================ */

/* Five or fewer pending queues remain still. */
.pending-static-grid {
  overflow: hidden !important;
}

/* Six or more pending queues animate only inside the public Pending panel. */
.pending-marquee-viewport {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden !important;
  contain: layout paint;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.pending-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  gap: 12px;
  animation:
    pendingOnlyMarquee
    var(--pending-marquee-duration, 32s)
    linear
    infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pending-marquee-set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  padding-right: 12px;
}

.pending-marquee-set .public-number-card {
  flex: 0 0 112px;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

@keyframes pendingOnlyMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - 6px), 0, 0);
  }
}

/* Disable all older per-card pending animations. */
.pending-number,
.pending-showcase-item,
.pending-showcase-track .pending-number,
.pending-static-grid .pending-number {
  animation: none !important;
}

/* Never animate Processing or any staff dashboard. */
.processing-panel .public-number-card,
.personnel-page .public-number-card,
.pacd-page .public-number-card {
  animation: none !important;
  transform: none !important;
}

/* Only the public Pending section is allowed to run the marquee. */
.public-pending-panel .pending-marquee-track,
.pending-panel .pending-marquee-track,
#public-pending .pending-marquee-track {
  animation-play-state: running;
}

.personnel-page .pending-marquee-track,
.pacd-page .pending-marquee-track {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 800px) {
  .pending-marquee-track,
  .pending-marquee-set {
    gap: 8px;
  }

  .pending-marquee-set {
    padding-right: 8px;
  }

  .pending-marquee-set .public-number-card {
    flex-basis: 94px;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }

  @keyframes pendingOnlyMarquee {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(calc(-50% - 4px), 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pending-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}


/* ================================================================
   V51 RELIABLE JS-DRIVEN PENDING MARQUEE
   ================================================================ */

.pending-panel .pending-marquee-track {
  animation: none !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pending-panel .pending-marquee-set {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
}

.pending-panel .pending-marquee-viewport {
  overflow: hidden !important;
  contain: layout paint;
}

/* Keep all individual cards static; only the track moves. */
.pending-panel .pending-marquee-set .public-number-card {
  animation: none !important;
  transform: none !important;
}

/* Do not disable the requested TV animation through reduced-motion rules. */
@media (prefers-reduced-motion: reduce) {
  .pending-panel .pending-marquee-track {
    animation: none !important;
  }
}


/* ================================================================
   V52 SEAMLESS PENDING MARQUEE + RED ACCENT
   ================================================================ */

.pending-panel .pending-marquee-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: max-content !important;
  gap: 12px !important;
  animation: none !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pending-panel .pending-marquee-set {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  gap: 12px !important;
  padding: 0 !important;
}

.pending-panel .pending-marquee-viewport {
  overflow: hidden !important;
  contain: layout paint;
}

/* Pending cards keep transaction colors but gain a restrained red status accent. */
.pending-panel .public-number-card.pending-number,
.pending-panel .public-number-card.priority-number {
  position: relative;
  overflow: hidden;
  border:
    1px solid rgba(239, 68, 68, .58) !important;
  box-shadow:
    inset 0 -3px 0 rgba(185, 28, 28, .42),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 7px 16px rgba(0,0,0,.15) !important;
}

.pending-panel .public-number-card.pending-number::before,
.pending-panel .public-number-card.priority-number::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(239, 68, 68, .18),
      transparent 42%,
      rgba(127, 29, 29, .10)
    );
}

.pending-panel .public-number-card.pending-number::after,
.pending-panel .public-number-card.priority-number::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background:
    linear-gradient(
      180deg,
      #ff6b6b,
      #b91c1c
    );
  opacity: .88;
}

/* Slightly stronger red treatment for priority pending. */
.pending-panel .public-number-card.priority-number {
  border-color: rgba(248, 113, 113, .82) !important;
  box-shadow:
    inset 0 -3px 0 rgba(153, 27, 27, .48),
    0 0 0 2px rgba(239, 68, 68, .16),
    0 7px 16px rgba(0,0,0,.16) !important;
}

/* Static 1–5 pending cards get the same pending identity. */
.pending-static-grid .public-number-card.pending-number {
  border:
    1px solid rgba(239, 68, 68, .58) !important;
}

/* Ensure individual cards never animate; only the track moves. */
.pending-panel .pending-marquee-set .public-number-card,
.pending-panel .pending-static-grid .public-number-card {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 800px) {
  .pending-panel .pending-marquee-track,
  .pending-panel .pending-marquee-set {
    gap: 8px !important;
  }
}


/* ================================================================
   V53 ALL PENDING QUEUES + CLEAN STATUS DESIGN
   ================================================================ */

/* Remove the heavy V52 red overlays and side bars. */
.pending-panel .public-number-card.pending-number::before,
.pending-panel .public-number-card.pending-number::after,
.pending-panel .public-number-card.priority-number::before,
.pending-panel .public-number-card.priority-number::after {
  content: none !important;
  display: none !important;
}

/* Restore the original transaction color treatment. */
.pending-panel .public-number-card.pending-number {
  background-image: none !important;
  border:
    1px solid rgba(239, 68, 68, .30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 14px rgba(0,0,0,.14) !important;
}

/* Small red status dot—cleaner than recoloring the whole queue card. */
.pending-panel .public-number-card.pending-number {
  position: relative;
}

.pending-panel .public-number-card.pending-number > * {
  position: relative;
  z-index: 1;
}

.pending-panel .public-number-card.priority-number {
  border:
    1px solid rgba(239, 68, 68, .30) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.14) !important;
}

/* Every off-screen queue remains part of the full marquee set. */
.pending-panel .pending-marquee-set {
  width: max-content !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.pending-panel .pending-marquee-set .public-number-card {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

@media (max-width: 800px) {
  .pending-panel .pending-marquee-set .public-number-card {
    flex-basis: 94px !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }
}


/* ================================================================
   V54 TRUE CIRCULAR PENDING LOOP
   ================================================================ */

.pending-panel .pending-marquee-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: max-content !important;
  gap: 0 !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pending-panel .pending-marquee-set {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  gap: 12px !important;
  padding-right: 12px !important;
  box-sizing: content-box !important;
}

.pending-panel .pending-marquee-viewport {
  overflow: hidden !important;
  contain: layout paint;
}

/* Only the track moves; individual cards remain fixed. */
.pending-panel .pending-marquee-set .public-number-card {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 800px) {
  .pending-panel .pending-marquee-set {
    gap: 8px !important;
    padding-right: 8px !important;
  }
}


/* ================================================================
   V61 — V54 TWO-ROW INFINITE PENDING CONVEYOR
   ================================================================ */

.pending-conveyor-viewport {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden !important;
  contain: layout paint;
  mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 2.5%,
      #000 97.5%,
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0,
      #000 2.5%,
      #000 97.5%,
      transparent 100%
    );
}

.pending-conveyor-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  gap: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pending-conveyor-track.pending-conveyor-fits {
  width: 100%;
  min-width: 100%;
  justify-content: center;
}

.pending-conveyor-track.pending-conveyor-fits
  .pending-conveyor-group[aria-hidden="true"] {
  display: none;
}

.pending-conveyor-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  gap: 8px;
  padding-right: 8px;
}

.pending-conveyor-track.pending-conveyor-fits
  .pending-conveyor-group {
  max-width: 100%;
  justify-content: center;
  padding-right: 0;
}

.pending-conveyor-column {
  display: grid;
  grid-template-rows: repeat(2, 30px);
  gap: 6px;
  flex: 0 0 auto;
  width: clamp(72px, 7.4vw, 104px);
  min-width: clamp(72px, 7.4vw, 104px);
}

.pending-conveyor-column .public-number-card {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 4px 7px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(10px, .82vw, 15px) !important;
  line-height: 1 !important;
  animation: none !important;
  transform: none !important;
}

.pending-number-placeholder {
  visibility: hidden;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Clean V54 colors: no heavy red redesign. */
.pending-panel .pending-conveyor-column
  .public-number-card.pending-number {
  border:
    1px solid rgba(115, 190, 238, .24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.12) !important;
}

.priority-pending-content {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

/* Disable the previous single-row V54 marquee in Pending. */
.pending-panel .pending-marquee-viewport,
.pending-panel .pending-marquee-track {
  display: none !important;
}

@media (max-width: 800px) {
  .pending-conveyor-group {
    gap: 6px;
    padding-right: 6px;
  }

  .pending-conveyor-column {
    width: clamp(68px, 20vw, 90px);
    min-width: clamp(68px, 20vw, 90px);
    grid-template-rows: repeat(2, 28px);
    gap: 5px;
  }

  .pending-conveyor-column .public-number-card {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size: 10px !important;
  }
}


/* ================================================================
   V63 PROCESSING PROGRESS — FIXED ON STABLE V61
   ================================================================ */

.processing-number {
  --processing-progress: 25%;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  padding: 7px 11px 13px !important;
  box-sizing: border-box !important;
}

.processing-card-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: grid;
  place-items: center;
}

.processing-card-content strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-step-label {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 4;
  padding: 2px 5px;
  border-radius: 999px;
  color: rgba(240,249,255,.94) !important;
  background: rgba(5,25,46,.28);
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.processing-focus-label {
  display: block;
  margin-top: 3px;
  color: #5b4200 !important;
  font-size: 6px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .07em;
  white-space: nowrap;
}

.processing-progress-border {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
}

.processing-progress-border::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--processing-progress);
  height: 4px;
  background:
    linear-gradient(90deg, #4eb4f2, #38d4b0);
  box-shadow:
    0 0 9px rgba(56,212,176,.34);
  transition: width 500ms ease;
}

.processing-progress-border::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - var(--processing-progress));
  height: 4px;
  background: rgba(113,145,169,.22);
}

.processing-focus-card {
  z-index: 5;
  color: #132038 !important;
  background:
    linear-gradient(145deg, #ffe16d, #ffefad) !important;
  border:
    2px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 0 0 3px rgba(255,211,70,.30),
    0 0 16px rgba(255,210,67,.34),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  transform: translateY(-1px);
}

.processing-focus-card .processing-step-label {
  color: #503900 !important;
  background: rgba(255,255,255,.56);
}

.processing-focus-card .processing-progress-border::before {
  background:
    linear-gradient(90deg, #f59e0b, #fff3ad);
  box-shadow:
    0 0 11px rgba(255,218,80,.50);
}

@media (max-width: 800px) {
  .processing-number {
    padding: 6px 8px 12px !important;
  }

  .processing-step-label {
    right: 4px;
    bottom: 3px;
    font-size: 6px !important;
  }

  .processing-focus-label {
    font-size: 5px !important;
  }

  .processing-focus-card {
    transform: none;
  }
}


/* ================================================================
   V64 CLEAN PROCESSING CARDS + CORRECT NUMBER ORDER
   ================================================================ */

/* Step text removed; progress is communicated by the border only. */
.processing-step-label {
  display: none !important;
}

/* Reclaim the space previously reserved for Step X/Y. */
.processing-number {
  padding:
    8px 11px 10px !important;
}

.processing-focus-label {
  color: #123d66 !important;
  font-size: 6px !important;
  font-weight: 1000 !important;
  letter-spacing: .085em !important;
  text-shadow: none !important;
}

/* Keep active card readable and clean. */
.processing-focus-card .processing-focus-label {
  color: #123d66 !important;
}

.processing-focus-card {
  border:
    2px solid rgba(255,255,255,.96) !important;
}

/* Progress border remains the only stage indicator. */
.processing-progress-border::before,
.processing-progress-border::after {
  height: 4px !important;
}

@media (max-width: 800px) {
  .processing-number {
    padding:
      7px 8px 9px !important;
  }

  .processing-focus-label {
    font-size: 5px !important;
  }
}


/* ================================================================
   V65 GOLD NOW PROCESSING + SUBTLE 3D LTO LOGO
   ================================================================ */

/* Gold NOW PROCESSING text */
.processing-focus-label,
.processing-focus-card .processing-focus-label {
  color: #d99a00 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 0 8px rgba(255, 196, 0, .22) !important;
}

/* Give logo containers perspective for a mild 3D turn */
.public-display-header,
.dashboard-hero,
.home-hero,
.brand-block,
.logo-wrap {
  perspective: 900px;
}

/*
  Covers the logo in the public display and main dashboard.
  Keeps the effect subtle so the seal remains readable.
*/
.public-display-header img[src*="lto-logo"],
.dashboard-hero img[src*="lto-logo"],
.home-hero img[src*="lto-logo"],
.brand-block img[src*="lto-logo"],
.logo-wrap img[src*="lto-logo"],
img.lto-logo {
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: transform, filter;
  animation:
    ltoLogo3DRotation 14s ease-in-out infinite;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.28))
    drop-shadow(0 0 9px rgba(69, 169, 236, .14));
}

@keyframes ltoLogo3DRotation {
  0% {
    transform:
      rotateY(-8deg)
      rotateX(2deg)
      translateZ(0)
      scale(1);
  }

  25% {
    transform:
      rotateY(7deg)
      rotateX(-2deg)
      translateZ(10px)
      scale(1.02);
  }

  50% {
    transform:
      rotateY(0deg)
      rotateX(2deg)
      translateZ(4px)
      scale(1.015);
  }

  75% {
    transform:
      rotateY(-7deg)
      rotateX(-1deg)
      translateZ(10px)
      scale(1.02);
  }

  100% {
    transform:
      rotateY(-8deg)
      rotateX(2deg)
      translateZ(0)
      scale(1);
  }
}

/* Slightly calmer motion on mobile */
@media (max-width: 800px) {
  .public-display-header img[src*="lto-logo"],
  .dashboard-hero img[src*="lto-logo"],
  .home-hero img[src*="lto-logo"],
  .brand-block img[src*="lto-logo"],
  .logo-wrap img[src*="lto-logo"],
  img.lto-logo {
    animation-duration: 18s;
  }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .public-display-header img[src*="lto-logo"],
  .dashboard-hero img[src*="lto-logo"],
  .home-hero img[src*="lto-logo"],
  .brand-block img[src*="lto-logo"],
  .logo-wrap img[src*="lto-logo"],
  img.lto-logo {
    animation: none !important;
    transform: none !important;
  }
}


/* ================================================================
   V66 REAL INTERACTIVE 3D LTO LOGO
   ================================================================ */

.interactive-lto-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  perspective: none !important;
  isolation: isolate;
}

.interactive-lto-logo-home {
  width: 126px;
  height: 126px;
}

.interactive-lto-logo-display {
  width: 82px;
  height: 82px;
}

.interactive-lto-logo.interactive-logo-dragging {
  cursor: grabbing;
}

.interactive-logo-canvas,
.interactive-logo-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.interactive-logo-canvas {
  z-index: 2;
  cursor: inherit;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.26))
    drop-shadow(0 0 10px rgba(76, 175, 238, .12));
}

.interactive-logo-fallback {
  z-index: 1;
  object-fit: contain;
  opacity: 1;
  transition: opacity 240ms ease;
  animation: none !important;
  transform: none !important;
}

.interactive-logo-ready .interactive-logo-fallback {
  opacity: 0;
  pointer-events: none;
}

.interactive-logo-failed .interactive-logo-fallback {
  opacity: 1;
}

/* Cancel the former CSS-only logo animation. */
.public-display-header img[src*="lto-logo"],
.dashboard-hero img[src*="lto-logo"],
.home-hero img[src*="lto-logo"],
.brand-block img[src*="lto-logo"],
.logo-wrap img[src*="lto-logo"],
img.lto-logo {
  animation: none !important;
  transform: none !important;
}

/* Clean NOW PROCESSING status */
.processing-focus-label,
.processing-focus-card .processing-focus-label {
  color: rgba(255, 226, 137, .92) !important;
  font-size: 6px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  text-shadow: none !important;
  opacity: .92;
}

.processing-focus-card {
  box-shadow:
    0 0 0 2px rgba(255, 213, 91, .30),
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

@media (max-width: 800px) {
  .interactive-lto-logo-home {
    width: 92px;
    height: 92px;
  }

  .interactive-lto-logo-display {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 430px) {
  .interactive-lto-logo-home {
    width: 76px;
    height: 76px;
  }

  .interactive-lto-logo-display {
    width: 58px;
    height: 58px;
  }
}


/* ================================================================
   V67 FIXED INTERACTIVE LOGO + MOBILE HEADER
   ================================================================ */

/* Metallic fallback should not show a white square. */
.interactive-logo-fallback {
  object-fit: contain !important;
  border-radius: 50%;
  mix-blend-mode: normal;
}

/* Main dashboard header becomes a proper grid so logo cannot overlap title. */
.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
  min-width: 0 !important;
}

.interactive-lto-logo-home {
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  grid-column: 1 !important;
  align-self: center !important;
}

.interactive-lto-logo-display {
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;
}

.interactive-lto-logo {
  position: relative !important;
  z-index: 3;
  overflow: visible !important;
  flex: none !important;
  touch-action: none !important;
  cursor: grab !important;
}

.interactive-lto-logo.interactive-logo-dragging {
  cursor: grabbing !important;
}

.interactive-logo-canvas {
  pointer-events: auto !important;
  touch-action: none !important;
}

.interactive-logo-ready .interactive-logo-canvas {
  opacity: 1;
}

.interactive-logo-failed .interactive-logo-canvas {
  display: none;
}

/* Prevent old logo styles from forcing oversized dimensions. */
.interactive-lto-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* The title area must shrink instead of crossing under the logo. */
.home-hero .hero-copy,
.dashboard-hero .hero-copy,
.brand-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

.home-hero h1,
.dashboard-hero h1,
.brand-block h1 {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Mobile: compact logo at the left, title gets the remaining width. */
@media (max-width: 800px) {
  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .interactive-lto-logo-home {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
  }

  .interactive-lto-logo-display {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }

  .home-hero h1,
  .dashboard-hero h1,
  .brand-block h1 {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.04 !important;
    margin: 0 !important;
  }
}

@media (max-width: 430px) {
  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .interactive-lto-logo-home {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }

  .interactive-lto-logo-display {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  .home-hero h1,
  .dashboard-hero h1,
  .brand-block h1 {
    font-size: clamp(24px, 6.7vw, 34px) !important;
  }
}


/* ================================================================
   V68 FULL CIRCULAR INTERACTIVE LOGO
   ================================================================ */

/* Keep the complete seal visible—never square-cropped or clipped. */
.interactive-lto-logo {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 3px !important;
}

.interactive-logo-canvas,
.interactive-logo-fallback {
  inset: 3px !important;
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  border-radius: 50% !important;
  object-fit: contain !important;
}

.interactive-logo-fallback {
  background: transparent !important;
  clip-path: circle(49% at 50% 50%);
}

.interactive-logo-canvas {
  overflow: visible !important;
}

/* Give the dashboard logo breathing room from the viewport edge. */
.home-hero,
.dashboard-hero,
.brand-block {
  padding-left: clamp(22px, 3vw, 46px) !important;
  padding-right: clamp(22px, 3vw, 46px) !important;
}

.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  grid-template-columns:
    112px minmax(0, 1fr) !important;
  gap: 24px !important;
}

.interactive-lto-logo-home {
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  margin-left: 0 !important;
  transform: none !important;
}

.interactive-lto-logo-display {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
}

/* Ensure no inherited negative margins clip the circle. */
.home-hero .interactive-lto-logo,
.dashboard-hero .interactive-lto-logo,
.brand-block .interactive-lto-logo {
  left: auto !important;
  right: auto !important;
  margin-inline: 0 !important;
}

@media (max-width: 800px) {
  .home-hero,
  .dashboard-hero,
  .brand-block {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      76px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .interactive-lto-logo-home {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }

  .interactive-lto-logo-display {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }
}

@media (max-width: 430px) {
  .home-hero,
  .dashboard-hero,
  .brand-block {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      62px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .interactive-lto-logo-home {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }

  .interactive-lto-logo-display {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}


/* ================================================================
   V69 FITTED CIRCULAR LOGO + DASHBOARD WATERMARKS
   ================================================================ */

/*
  The interactive seal gets a larger internal safe area.
  This keeps the full top and bottom of the circular logo visible
  even while it is tilted or rotating.
*/
.interactive-lto-logo {
  padding: 8px !important;
  overflow: visible !important;
}

.interactive-logo-canvas,
.interactive-logo-fallback {
  inset: 8px !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
}

.interactive-logo-fallback {
  clip-path: circle(48.5% at 50% 50%) !important;
  object-fit: contain !important;
}

/* Slightly larger home logo container while keeping the coin itself smaller. */
.interactive-lto-logo-home {
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;
}

.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  grid-template-columns:
    120px minmax(0, 1fr) !important;
}

/*
  Dashboard watermark:
  only applies to the visually plain dashboard/home areas.
  Operational workstations and the public queue display are untouched.
*/
.home-shell,
.dashboard-home,
.home-dashboard,
.main-dashboard,
.dashboard-grid-wrap {
  position: relative;
  isolation: isolate;
}

.home-shell::before,
.dashboard-home::before,
.home-dashboard::before,
.main-dashboard::before,
.dashboard-grid-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(3, 20, 37, .90),
      rgba(3, 20, 37, .90)
    ),
    url("assets/lto-dashboard-watermark.png");
  background-repeat: no-repeat;
  background-position:
    center,
    right 5% center;
  background-size:
    cover,
    min(44vw, 680px);
  opacity: .52;
}

/*
  Subtle watermark inside plain dashboard tiles.
  It is intentionally absent from highlighted/colored tiles.
*/
.dashboard-card:not(.letas-card):not(.featured-card),
.home-card:not(.letas-card):not(.featured-card),
.menu-card:not(.letas-card):not(.featured-card) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dashboard-card:not(.letas-card):not(.featured-card)::after,
.home-card:not(.letas-card):not(.featured-card)::after,
.menu-card:not(.letas-card):not(.featured-card)::after {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  right: -34px;
  bottom: -43px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background:
    url("assets/lto-dashboard-watermark.png")
    center / contain no-repeat;
  opacity: .045;
  filter: saturate(.75) contrast(1.05);
}

/* Keep all card content above the watermark. */
.dashboard-card > *,
.home-card > *,
.menu-card > * {
  position: relative;
  z-index: 1;
}

/* Do not apply watermark effects on public display or staff workstations. */
.tv-shell::before,
.public-display-shell::before,
.station-page::before,
.workspace-page::before,
.workstation-shell::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 800px) {
  .interactive-lto-logo {
    padding: 6px !important;
  }

  .interactive-logo-canvas,
  .interactive-logo-fallback {
    inset: 6px !important;
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
  }

  .interactive-lto-logo-home {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      82px minmax(0, 1fr) !important;
  }

  .home-shell::before,
  .dashboard-home::before,
  .home-dashboard::before,
  .main-dashboard::before,
  .dashboard-grid-wrap::before {
    background-position:
      center,
      center 26%;
    background-size:
      cover,
      min(76vw, 460px);
    opacity: .45;
  }

  .dashboard-card:not(.letas-card):not(.featured-card)::after,
  .home-card:not(.letas-card):not(.featured-card)::after,
  .menu-card:not(.letas-card):not(.featured-card)::after {
    width: 112px;
    height: 112px;
    right: -28px;
    bottom: -34px;
    opacity: .04;
  }
}

@media (max-width: 430px) {
  .interactive-lto-logo-home {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      68px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}


/* ================================================================
   V70 PREMIUM LOGO LAYOUT
   ================================================================ */

/* Main dashboard: larger interactive badge without clipping. */
.interactive-lto-logo-home {
  width: 144px !important;
  height: 144px !important;
  min-width: 144px !important;
  min-height: 144px !important;
  max-width: 144px !important;
  max-height: 144px !important;
  padding: 12px !important;
}

.interactive-lto-logo-home .interactive-logo-canvas,
.interactive-lto-logo-home .interactive-logo-fallback {
  inset: 12px !important;
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
}

.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  grid-template-columns:
    144px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: center !important;
}

/* Give the seal a soft premium halo without a heavy glow. */
.interactive-lto-logo-home::before {
  content: "";
  position: absolute;
  inset: 17%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      rgba(74, 171, 234, .17),
      transparent 68%
    );
  filter: blur(10px);
}

.interactive-lto-logo-home
  .interactive-logo-canvas,
.interactive-lto-logo-home
  .interactive-logo-fallback {
  z-index: 2;
}

/* Public display uses a static, fully visible official seal. */
.tv-logo-official {
  display: block !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  object-fit: contain !important;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  filter:
    drop-shadow(0 5px 10px rgba(0,0,0,.26));
}

/* Subtle workstation watermark on plain areas only. */
.station-page,
.workspace-page,
.workstation-shell {
  position: relative;
  isolation: isolate;
}

.station-page::after,
.workspace-page::after,
.workstation-shell::after {
  content: "";
  position: fixed;
  width: min(42vw, 520px);
  aspect-ratio: 1 / 1;
  right: -8vw;
  bottom: -14vh;
  z-index: -1;
  pointer-events: none;
  background:
    url("assets/lto-dashboard-watermark.png")
    center / contain no-repeat;
  opacity: .025;
  filter: saturate(.72);
}

/* Never place watermark over dialogs, cards, or public display. */
.modal,
.dialog,
.queue-modal,
.public-display-shell,
.tv-shell,
.public-number-card {
  isolation: isolate;
}

@media (max-width: 800px) {
  .interactive-lto-logo-home {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    padding: 8px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      96px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .tv-logo-official {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }

  .station-page::after,
  .workspace-page::after,
  .workstation-shell::after {
    width: min(72vw, 380px);
    right: -23vw;
    bottom: -10vh;
    opacity: .02;
  }
}

@media (max-width: 430px) {
  .interactive-lto-logo-home {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    padding: 7px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 7px !important;
    width: calc(100% - 14px) !important;
    height: calc(100% - 14px) !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      82px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .tv-logo-official {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
}


/* ================================================================
   V71 FRONT-FACING LOGO + FULL-CIRCLE SAFE AREA
   ================================================================ */

/* The wrapper is larger than the rendered coin, preventing top/bottom clipping. */
.interactive-lto-logo-home {
  width: 162px !important;
  height: 162px !important;
  min-width: 162px !important;
  min-height: 162px !important;
  max-width: 162px !important;
  max-height: 162px !important;
  padding: 18px !important;
  overflow: visible !important;
}

.interactive-lto-logo-home .interactive-logo-canvas,
.interactive-lto-logo-home .interactive-logo-fallback {
  inset: 18px !important;
  width: calc(100% - 36px) !important;
  height: calc(100% - 36px) !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  overflow: visible !important;
}

.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  grid-template-columns:
    162px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Prevent legacy clipping rules from affecting the circular logo. */
.home-hero,
.dashboard-hero,
.brand-block,
.interactive-lto-logo,
.interactive-logo-canvas {
  overflow: visible !important;
}

.interactive-logo-fallback {
  clip-path: circle(47% at 50% 50%) !important;
}

/* Mobile keeps a bigger visible seal while preserving the entire circle. */
@media (max-width: 800px) {
  .interactive-lto-logo-home {
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
    padding: 12px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      108px minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 430px) {
  .interactive-lto-logo-home {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    padding: 10px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      92px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}


/* ================================================================
   V74 UPRIGHT BACK FACE + LARGER FULL-CIRCLE BADGE
   ================================================================ */

/*
  The container grows more than the rendered canvas.
  This increases the visible badge while preserving safe space
  around every side of the circular seal.
*/
.interactive-lto-logo-home {
  width: 176px !important;
  height: 176px !important;
  min-width: 176px !important;
  min-height: 176px !important;
  max-width: 176px !important;
  max-height: 176px !important;
  padding: 15px !important;
  border-radius: 50% !important;
  overflow: visible !important;
}

.interactive-lto-logo-home .interactive-logo-canvas,
.interactive-lto-logo-home .interactive-logo-fallback {
  inset: 15px !important;
  width: calc(100% - 30px) !important;
  height: calc(100% - 30px) !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  overflow: visible !important;
}

.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  grid-template-columns:
    176px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Keep the complete circular fallback visible. */
.interactive-lto-logo-home .interactive-logo-fallback {
  clip-path: circle(48% at 50% 50%) !important;
}

/* Mobile gets a modest size increase without crowding the title. */
@media (max-width: 800px) {
  .interactive-lto-logo-home {
    width: 116px !important;
    height: 116px !important;
    min-width: 116px !important;
    min-height: 116px !important;
    max-width: 116px !important;
    max-height: 116px !important;
    padding: 10px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      116px minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 430px) {
  .interactive-lto-logo-home {
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
    min-height: 98px !important;
    max-width: 98px !important;
    max-height: 98px !important;
    padding: 9px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 9px !important;
    width: calc(100% - 18px) !important;
    height: calc(100% - 18px) !important;
  }

  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    grid-template-columns:
      98px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}


/* ================================================================
   V75 MOBILE DASHBOARD + INTERACTIVE LOGO FIX
   ================================================================ */

/* Ensure title and logo never occupy the same visual area. */
.home-hero .hero-brand,
.dashboard-hero .hero-brand,
.brand-block {
  min-width: 0 !important;
  width: 100% !important;
}

.home-hero .hero-copy,
.dashboard-hero .hero-copy,
.brand-copy {
  min-width: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

.home-hero h1,
.dashboard-hero h1,
.brand-block h1 {
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Phone layout: logo above the title, never on top of it. */
@media (max-width: 600px) {
  .home-hero .hero-brand,
  .dashboard-hero .hero-brand,
  .brand-block {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding-inline: 14px !important;
  }

  .interactive-lto-logo-home {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
    padding: 10px !important;
    margin: 0 auto !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
  }

  .home-hero .hero-copy,
  .dashboard-hero .hero-copy,
  .brand-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .home-hero h1,
  .dashboard-hero h1,
  .brand-block h1 {
    font-size: clamp(27px, 8vw, 36px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .home-hero p,
  .dashboard-hero p,
  .brand-block p {
    max-width: 31ch !important;
    margin-inline: auto !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/* Dashboard cards: prevent labels from colliding or escaping. */
.dashboard-card,
.home-card,
.menu-card {
  min-width: 0 !important;
}

.dashboard-card h2,
.dashboard-card h3,
.dashboard-card strong,
.home-card h2,
.home-card h3,
.home-card strong,
.menu-card h2,
.menu-card h3,
.menu-card strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (max-width: 430px) {
  .dashboard-card,
  .home-card,
  .menu-card {
    padding: 18px 14px !important;
  }

  .dashboard-card h2,
  .dashboard-card h3,
  .home-card h2,
  .home-card h3,
  .menu-card h2,
  .menu-card h3 {
    font-size: clamp(20px, 5.8vw, 27px) !important;
    line-height: 1.12 !important;
  }

  .dashboard-card p,
  .home-card p,
  .menu-card p {
    font-size: 13px !important;
    line-height: 1.32 !important;
  }
}



/* V77 Dashboard Hero Watermark */
.dashboard-hero,
.hero,
.home-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.dashboard-hero::before,
.hero::before,
.home-hero::before{
  content:"";
  position:absolute;
  width:min(42vw,700px);
  height:min(42vw,700px);
  right:-10%;
  top:-18%;
  background:url("assets/3d/lto_logo_metallic.png") center/contain no-repeat;
  opacity:.055;
  filter:blur(1px);
  pointer-events:none;
  z-index:0;
}
.dashboard-hero>*,
.hero>*,
.home-hero>*{
  position:relative;
  z-index:1;
}


/* ================================================================
   V78 TAILSCALE EMPLOYEE LOGIN
   ================================================================ */

.staff-login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(31, 111, 180, .24), transparent 34%),
    linear-gradient(145deg, #041426, #071f38 62%, #03111f);
}

.staff-login-card {
  width: min(480px, 100%);
  padding: 28px;
  border: 1px solid rgba(100, 184, 239, .28);
  border-radius: 24px;
  background: rgba(6, 29, 51, .94);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

.staff-login-brand {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.staff-login-brand img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 50%;
}

.staff-login-brand h1 {
  margin: 4px 0;
  color: #fff;
  font-size: 32px;
}

.staff-login-brand p,
.staff-login-note {
  color: #9cb9cf;
}

.staff-login-form {
  display: grid;
  gap: 15px;
}

.staff-login-form label {
  display: grid;
  gap: 7px;
  color: #dbeeff;
  font-size: 13px;
  font-weight: 800;
}

.staff-login-form input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid rgba(123, 192, 237, .30);
  border-radius: 12px;
  color: #fff;
  background: rgba(3, 18, 33, .82);
  font-size: 16px;
  outline: none;
}

.staff-login-form input:focus {
  border-color: #63b9ee;
  box-shadow: 0 0 0 3px rgba(65, 160, 222, .16);
}

.staff-login-submit,
.staff-login-public {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
}

.staff-login-submit {
  border: 0;
  color: #05223a;
  background: linear-gradient(135deg, #72c9f5, #3b9edb);
}

.staff-login-public {
  border: 1px solid rgba(123, 192, 237, .28);
  color: #d8edfb;
  background: rgba(16, 61, 96, .50);
}

.staff-login-error {
  min-height: 18px;
  margin: 0;
  color: #ff9d9d;
  font-size: 13px;
  font-weight: 800;
}

.staff-login-note {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
}

.staff-session-badge {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 9px 8px 13px;
  border: 1px solid rgba(116, 190, 237, .28);
  border-radius: 14px;
  color: #e8f6ff;
  background: rgba(4, 24, 42, .92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
  backdrop-filter: blur(10px);
}

.staff-session-badge div {
  display: grid;
}

.staff-session-badge small {
  color: #7fa7c2;
  font-size: 9px;
}

.staff-session-badge strong {
  font-size: 12px;
}

.staff-session-badge button {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  color: #fff;
  background: rgba(132, 34, 34, .70);
  cursor: pointer;
}

.route-locked {
  opacity: .34 !important;
  filter: grayscale(.60);
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

@media (max-width: 600px) {
  .staff-login-page {
    padding: 14px;
  }

  .staff-login-card {
    padding: 21px 17px;
    border-radius: 20px;
  }

  .staff-login-brand {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
  }

  .staff-login-brand img {
    width: 60px;
    height: 60px;
  }

  .staff-login-brand h1 {
    font-size: 27px;
  }

  .staff-session-badge {
    top: auto;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}


/* ================================================================
   V80 ADMIN BACKUP & RECOVERY
   ================================================================ */

.admin-page {
  display: grid;
  gap: 18px;
}

.admin-topbar {
  overflow: hidden;
  position: relative;
}

.admin-topbar::after {
  content: "";
  position: absolute;
  width: 340px;
  aspect-ratio: 1;
  right: -90px;
  top: -150px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(46, 163, 232, .18),
      transparent 68%
    );
  pointer-events: none;
}

.admin-title-row {
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.admin-eyebrow,
.admin-section-heading > div > span {
  display: block;
  margin-bottom: 6px;
  color: #65c2f4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.admin-title-row h1,
.admin-section-heading h2 {
  margin: 0;
}

.admin-title-row p,
.admin-section-heading p {
  margin: 7px 0 0;
  color: #92adc2;
}

.admin-safety-badge {
  min-width: 230px;
  padding: 14px 16px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(73, 196, 145, .35);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(17, 82, 66, .35),
      rgba(8, 37, 51, .72)
    );
}

.admin-safety-badge strong {
  color: #8cf1c4;
}

.admin-safety-badge span {
  color: #9eb9b0;
  font-size: 12px;
}

.admin-summary-panel,
.admin-recovery-panel {
  padding: 20px;
}

.admin-section-heading {
  margin-bottom: 16px;
}

.admin-recovery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.admin-recovery-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-backup-btn,
.admin-reset-btn,
.admin-restore-btn {
  min-height: 42px;
  border-radius: 11px;
  padding: 10px 16px;
  font-weight: 900;
  cursor: pointer;
}

.admin-backup-btn {
  border: 1px solid rgba(77, 183, 241, .42);
  color: #eaf8ff;
  background:
    linear-gradient(
      145deg,
      #1477b8,
      #0f5f97
    );
}

.admin-reset-btn {
  border: 1px solid rgba(255, 112, 112, .42);
}

.admin-backup-toolbar {
  padding: 13px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #dff3ff;
  border-top: 1px solid rgba(101, 174, 217, .14);
  border-bottom: 1px solid rgba(101, 174, 217, .14);
}

.admin-backup-toolbar span {
  color: #7fa5be;
  font-size: 12px;
}

.admin-backup-list {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.admin-backup-card {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(91, 165, 208, .18);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(15, 48, 72, .78),
      rgba(8, 31, 50, .88)
    );
}

.admin-backup-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-backup-card-main > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-backup-card-main strong {
  color: #ffffff;
}

.admin-backup-card-main span {
  color: #91adc1;
  font-size: 12px;
}

.admin-backup-metrics {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.admin-backup-metrics span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #b6d8ec;
  background: rgba(34, 109, 153, .23);
}

.admin-restore-btn {
  border: 1px solid rgba(107, 204, 160, .35);
  color: #c9f7df;
  background: rgba(22, 110, 75, .42);
}

.admin-backup-empty {
  padding: 26px;
  text-align: center;
  color: #829eb2;
  border: 1px dashed rgba(94, 160, 199, .24);
  border-radius: 13px;
}

.admin-backup-error {
  color: #ffb1b1;
  border-color: rgba(255, 105, 105, .27);
}

@media (max-width: 760px) {
  .admin-title-row,
  .admin-recovery-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-safety-badge {
    min-width: 0;
  }

  .admin-recovery-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-backup-card,
  .admin-backup-card-main {
    grid-template-columns: 1fr;
  }

  .admin-backup-card-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-restore-btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .admin-summary-panel,
  .admin-recovery-panel {
    padding: 14px;
  }

  .admin-recovery-actions {
    grid-template-columns: 1fr;
  }

  .admin-backup-metrics {
    flex-wrap: wrap;
  }
}


/* ================================================================
   V81 SECURE ACCOUNT MANAGEMENT + AUDIT
   ================================================================ */

.admin-accounts-panel,
.admin-password-panel,
.admin-audit-panel {
  padding: 20px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-form-grid input,
.admin-form-grid select {
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(93, 168, 211, .24);
  border-radius: 10px;
  color: #eaf8ff;
  background: rgba(7, 29, 48, .82);
}

.admin-password-form {
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) auto;
  margin-bottom: 0;
}

.admin-user-list {
  display: grid;
  gap: 9px;
}

.admin-user-card {
  padding: 11px 12px;
  display: grid;
  grid-template-columns:
    minmax(150px, 1.2fr)
    minmax(140px, .8fr)
    auto
    auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(91, 165, 208, .16);
  border-radius: 12px;
  background: rgba(9, 34, 55, .76);
}

.admin-user-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-user-identity strong {
  overflow: hidden;
  color: #ffffff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-identity span {
  color: #7fa2b9;
  font-size: 11px;
}

.admin-user-role,
.admin-user-toggle,
.admin-user-reset {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 9px;
}

.admin-user-role {
  border: 1px solid rgba(92, 168, 211, .22);
  color: #dff4ff;
  background: #092e4b;
}

.admin-user-toggle {
  border: 1px solid rgba(82, 202, 143, .27);
  color: #a9efca;
  background: rgba(23, 102, 71, .34);
}

.admin-user-toggle.disabled {
  border-color: rgba(255, 111, 111, .26);
  color: #ffb1b1;
  background: rgba(111, 37, 46, .32);
}

.admin-user-reset {
  border: 1px solid rgba(242, 191, 75, .26);
  color: #ffe2a1;
  background: rgba(106, 72, 20, .34);
}

.admin-audit-list {
  max-height: 420px;
  display: grid;
  gap: 6px;
  overflow: auto;
}

.admin-audit-row {
  padding: 9px 11px;
  display: grid;
  grid-template-columns:
    minmax(150px, .8fr)
    minmax(180px, 1.2fr)
    minmax(100px, .6fr);
  gap: 10px;
  border-radius: 9px;
  background: rgba(7, 29, 48, .68);
}

.admin-audit-row time,
.admin-audit-row span {
  color: #7f9eb3;
  font-size: 11px;
}

.admin-audit-row strong {
  color: #d9f1ff;
  font-size: 12px;
}

@media (max-width: 900px) {
  .admin-form-grid,
  .admin-password-form {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .admin-user-card {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(130px, .7fr);
  }
}

@media (max-width: 560px) {
  .admin-form-grid,
  .admin-password-form,
  .admin-user-card,
  .admin-audit-row {
    grid-template-columns: 1fr;
  }

  .admin-user-role,
  .admin-user-toggle,
  .admin-user-reset {
    width: 100%;
  }
}

/* V82 Mobile layout fixes */
@media (max-width:768px){
.professional-brand{display:grid!important;grid-template-columns:90px 1fr!important;gap:12px;align-items:center}
.interactive-lto-logo-home{width:90px!important;height:90px!important;margin:0!important}
.professional-brand h1{font-size:clamp(2rem,7vw,2.6rem)!important;line-height:1.05!important;white-space:normal!important}
.agency-label{display:flex;flex-wrap:wrap;gap:8px}
.build-badge{position:static!important}
.station-grid.professional-station-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
.station-card.professional-card{min-height:170px!important;padding:16px 12px!important}
.station-card strong{white-space:normal!important;overflow-wrap:break-word}
.staff-session-badge{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin-top:16px}
}
@media(max-width:420px){
.professional-brand{grid-template-columns:76px 1fr!important}
.interactive-lto-logo-home{width:76px!important;height:76px!important}
.station-card.professional-card{min-height:150px!important}
}


/* ================================================================
   V83 — FULL-CIRCLE MOBILE LOGO + INTERACTIVE LOGIN LOGO
   ================================================================ */

/* Shared circular safety rules. */
.interactive-lto-logo-home,
.interactive-lto-logo-login {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate;
}

.interactive-lto-logo-home .interactive-logo-canvas,
.interactive-lto-logo-home .interactive-logo-fallback,
.interactive-lto-logo-login .interactive-logo-canvas,
.interactive-lto-logo-login .interactive-logo-fallback {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  overflow: visible !important;
  clip-path: none !important;
}

/*
  Mobile dashboard logo:
  the outer frame is deliberately larger than the rendered canvas.
  This prevents the 3D coin from touching or being cut by its bounds
  while it rotates and tilts.
*/
@media (max-width: 768px) {
  .professional-brand {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .professional-header,
  .professional-brand,
  .professional-brand > div {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .interactive-lto-logo-home {
    width: 102px !important;
    height: 102px !important;
    min-width: 102px !important;
    min-height: 102px !important;
    max-width: 102px !important;
    max-height: 102px !important;
    padding: 13px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 13px !important;
    width: calc(100% - 26px) !important;
    height: calc(100% - 26px) !important;
  }
}

@media (max-width: 420px) {
  .professional-brand {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .interactive-lto-logo-home {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    padding: 12px !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
  }
}

/* Login-page interactive logo. */
.staff-login-brand {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0;
  overflow: visible !important;
}

.interactive-lto-logo-login {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  padding: 10px !important;
  cursor: grab;
  touch-action: none;
}

.interactive-lto-logo-login.interactive-logo-dragging {
  cursor: grabbing;
}

.interactive-lto-logo-login .interactive-logo-canvas,
.interactive-lto-logo-login .interactive-logo-fallback {
  inset: 10px !important;
  width: calc(100% - 20px) !important;
  height: calc(100% - 20px) !important;
}

.staff-login-brand > div:last-child {
  min-width: 0;
}

.staff-login-brand h1 {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 620px) {
  .staff-login-page {
    padding:
      max(18px, env(safe-area-inset-top))
      14px
      max(24px, env(safe-area-inset-bottom)) !important;
  }

  .staff-login-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .staff-login-brand {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .interactive-lto-logo-login {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    padding: 10px !important;
  }

  .interactive-lto-logo-login .interactive-logo-canvas,
  .interactive-lto-logo-login .interactive-logo-fallback {
    inset: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
  }

  .staff-login-brand .agency-label {
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.25 !important;
  }

  .staff-login-brand h1 {
    margin: 4px 0 0 !important;
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 380px) {
  .staff-login-brand {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .interactive-lto-logo-login {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    padding: 8px !important;
  }

  .interactive-lto-logo-login .interactive-logo-canvas,
  .interactive-lto-logo-login .interactive-logo-fallback {
    inset: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
  }
}






/* ================================================================
   V87 — REFERENCE-MATCHED DESKTOP DASHBOARD
   ================================================================ */

@media (min-width: 1001px) {
  .professional-home {
    min-height: 100vh;
    padding: 10px 12px 14px !important;
    box-sizing: border-box;
  }

  .operations-dashboard.professional-shell {
    position: relative !important;
    isolation: isolate !important;
    width: 100%;
    max-width: none !important;
    min-height: calc(100vh - 24px);
    margin: 0 !important;
    padding: 18px 28px 24px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background:
      linear-gradient(
        180deg,
        rgba(5, 31, 55, .965),
        rgba(3, 22, 40, .98)
      ) !important;
  }

  /* Reference-style centered seal: visible, but not overpowering. */
  .operations-dashboard.professional-shell::before {
    content: "";
    position: absolute;
    width: min(48vw, 760px);
    aspect-ratio: 1 / 1;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background:
      url("assets/lto-dashboard-watermark-v85.png")
      center / contain no-repeat;
    opacity: .12;
    filter:
      saturate(.58)
      brightness(.58)
      contrast(.86);
    mix-blend-mode: screen;
  }

  .operations-dashboard.professional-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(4, 28, 49, .08),
        rgba(3, 22, 39, .20)
      );
  }

  .operations-dashboard.professional-shell > * {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Header proportions aligned to the reference. */
  .professional-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    align-items: start !important;
    gap: 28px !important;
    min-height: 220px !important;
  }

  .professional-brand {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: center !important;
    min-width: 0;
  }

  .interactive-lto-logo-home {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
    max-width: 132px !important;
    max-height: 132px !important;
    padding: 9px !important;
    margin: 0 !important;
  }

  .interactive-lto-logo-home .interactive-logo-canvas,
  .interactive-lto-logo-home .interactive-logo-fallback {
    inset: 9px !important;
    width: calc(100% - 18px) !important;
    height: calc(100% - 18px) !important;
  }

  .professional-brand .agency-label {
    margin: 0 0 10px !important;
    font-size: 13px !important;
    letter-spacing: .14em !important;
  }

  .professional-brand h1 {
    margin: 0 !important;
    font-size: clamp(42px, 4vw, 68px) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
  }

  .professional-brand p {
    margin: 14px 0 0 !important;
    font-size: 16px !important;
    color: #9cb5c7 !important;
  }

  .professional-status {
    width: 100% !important;
    min-height: 150px !important;
    padding: 18px 20px !important;
    border-radius: 17px !important;
  }

  .professional-divider {
    margin: 0 0 18px !important;
  }

  /* Card grid: six first row, four second row. */
  .station-grid.professional-station-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
    align-items: stretch;
  }

  .station-card.professional-card {
    min-width: 0;
    min-height: 148px !important;
    padding: 20px 18px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 18px !important;
    align-items: start !important;
    gap: 14px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(
        145deg,
        rgba(13, 55, 96, .92),
        rgba(8, 31, 59, .94)
      ) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 10px 24px rgba(0,0,0,.12);
  }

  .station-card.professional-card:nth-child(n+7) {
    min-height: 136px !important;
  }

  .station-card .professional-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
  }

  .station-card strong {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  .station-card small {
    display: block !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #9eb5c6 !important;
  }

  .station-card .station-arrow,
  .station-card > span:last-child {
    align-self: start !important;
    justify-self: end !important;
  }

  /* Lower panels: reference proportions. */
  .professional-lower-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr) !important;
    gap: 14px !important;
    margin-top: 14px !important;
  }

  .professional-lower-grid > * {
    min-height: 170px !important;
    padding: 18px 20px !important;
    border-radius: 16px !important;
  }

  .professional-footer {
    margin-top: 10px !important;
  }

  /* Session badge stays compact at top-right. */
  .staff-session-badge {
    position: fixed !important;
    top: 10px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 300px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    z-index: 50 !important;
    border-radius: 14px !important;
  }
}

/* Slightly denser layout for common laptop widths. */
@media (min-width: 1001px) and (max-width: 1500px) {
  .professional-header {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    min-height: 205px !important;
  }

  .professional-brand {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  .interactive-lto-logo-home {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    min-height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
  }

  .professional-brand h1 {
    font-size: clamp(36px, 3.5vw, 56px) !important;
  }

  .station-card.professional-card {
    min-height: 138px !important;
    padding: 17px 15px !important;
  }

  .station-card strong {
    font-size: 17px !important;
  }

  .station-card small {
    font-size: 11px !important;
  }
}

/* Preserve the clean mobile layout from earlier versions. */
@media (max-width: 1000px) {
  .operations-dashboard.professional-shell::before,
  .operations-dashboard.professional-shell::after {
    display: none !important;
  }
}