:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --line: #e2e6ef;
  --line-soft: #eef1f7;
  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #8a94a6;
  --brand: #123c8c;
  --brand-2: #1c56c4;
  --brand-soft: #eaf0fd;
  --ok: #067647;
  --ok-soft: #e6f4ec;
  --warn: #b54708;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 8px 28px rgba(16, 24, 40, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--brand-2); }
.hidden { display: none !important; }

/* ------------------------------------------------------------- login ---- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #dce7fb 0%, var(--bg) 60%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}
.login-card .brand { text-align: center; margin-bottom: 24px; }
.login-card .brand .mark {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--brand); color: #fff;
  font-weight: 750; font-size: 17px; letter-spacing: .5px;
  margin-bottom: 12px;
}
.login-card .brand h1 { font-size: 19px; }
.login-card .brand p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------- shell ---- */

.topbar {
  background: var(--brand);
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 52px;
}
.topbar .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: .3px; font-size: 15px;
  height: 100%;
}
.topbar .logo .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center; font-size: 12px;
}
/* Main menu: its own row under the blue bar. It wraps onto a second line instead of
   scrolling, so every page stays visible on any screen. */
.mainnav {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 2px;
  background: #fff; border-bottom: 1px solid var(--line); padding: 0 14px;
  position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.mainnav button {
  position: relative; background: none; border: 0; color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 12px 13px 10px; cursor: pointer; white-space: nowrap;
  border-bottom: 2.5px solid transparent;
}
.mainnav button:hover { color: var(--brand); background: #f6f8fc; }
.mainnav button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 650; }
.mainnav .nav-gap { flex: 1 1 12px; }

.userbox { display: flex; align-items: center; gap: 10px; min-width: 0; }
.userbox .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.16); display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
}
.userbox .meta { line-height: 1.25; text-align: right; }
.userbox .meta .nm { font-size: 13px; font-weight: 600; }
.userbox .meta .rl { font-size: 11px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .4px; }
.userbox button {
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  border-radius: 7px; padding: 7px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.userbox button:hover { background: rgba(255,255,255,.2); }

main { padding: 22px; max-width: 1500px; margin: 0 auto; }

.page-head { margin-bottom: 18px; }
.page-head h2 { font-size: 20px; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); }

/* -------------------------------------------------------------- cards ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.card > header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.card > header h3 { font-size: 14.5px; }
.card > header .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.card .body { padding: 18px; }

/* -------------------------------------------------------------- forms ---- */

.grid { display: grid; gap: 14px; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

label.field { display: block; }
label.field > span {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 6px; letter-spacing: .01em;
}
label.field > span .req { color: var(--danger); }

input, select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; font-size: 13.5px; color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(28, 86, 196, .12);
}
input[readonly] { background: #f7f8fb; color: var(--ink-3); }
::placeholder { text-transform: none; color: var(--ink-3); opacity: 1; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23667' stroke-width='1.6' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

/* password fields with a show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 58px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 4px 7px; border-radius: 6px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.pw-toggle:hover { color: var(--brand-2); background: var(--brand-soft); }
.pw-match { font-size: 11.5px; margin-top: 4px; min-height: 15px; font-weight: 600; color: var(--danger); }
.pw-match.ok { color: var(--ok); }

/* station type-ahead */
.ac { position: relative; }
.ac-list {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; min-width: 260px;
}
.ac-item {
  padding: 8px 11px; cursor: pointer; display: flex; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.on { background: var(--brand-soft); }
.ac-item b { font-size: 12.5px; color: var(--brand); min-width: 46px; font-variant-numeric: tabular-nums; }
.ac-item span { font-size: 12.5px; color: var(--ink-2); flex: 1; }
.ac-item em { font-size: 10.5px; color: var(--ink-3); font-style: normal; white-space: nowrap; }
.ac-add {
  padding: 9px 11px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--brand-2); background: #fafbfd; border-top: 1px solid var(--line);
  position: sticky; bottom: 0;
}
.ac-add:hover { background: var(--brand-soft); }
.ac-hint { font-size: 11.5px; color: var(--ok); margin-top: 4px; min-height: 15px; font-weight: 500; }
.ac-hint.warn { color: var(--warn); }

button.btn {
  border: 1px solid transparent; border-radius: 8px;
  padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; background: var(--brand); color: #fff;
}
button.btn:hover { background: var(--brand-2); }
button.btn:disabled { opacity: .6; cursor: not-allowed; }
button.btn.ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
button.btn.ghost:hover { background: #f7f8fb; }
button.btn.danger { background: var(--danger); }
button.btn.sm { padding: 6px 11px; font-size: 12.5px; }

.link-btn {
  background: none; border: 0; color: var(--brand-2);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 4px;
}
.link-btn.danger { color: var(--danger); }

/* -------------------------------------------------------------- table ---- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  background: #fafbfd; padding: 10px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:hover { background: #fbfcfe; }
tbody tr.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: #fff5d6; } to { background: transparent; } }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.sno { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); font-size: 12px; }
code.uname {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: #f4f6fa; border: 1px solid var(--line-soft); border-radius: 5px;
  padding: 2px 6px; color: var(--ink-2);
}
.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  background: var(--brand-soft); color: var(--brand);
}
.pill.grey { background: #f0f2f6; color: var(--ink-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--danger-soft); color: var(--danger); }

.sector { font-weight: 600; }
.sector .arrow { color: var(--ink-3); margin: 0 5px; font-weight: 400; }

/* --------------------------------------------------------- dashboard ---- */

.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.stat .k { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.stat .v { font-size: 27px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.stat .d { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.bar-track { height: 6px; background: var(--line-soft); border-radius: 4px; overflow: hidden; min-width: 90px; }
.bar-fill { height: 100%; background: var(--brand-2); border-radius: 4px; }

.spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding-top: 8px; }
.spark .col { flex: 1 1 0; max-width: 42px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
.spark .col i { width: 100%; background: var(--brand-2); border-radius: 3px 3px 0 0; display: block; min-height: 2px; opacity: .85; }
.spark .col span { font-size: 10px; color: var(--ink-3); white-space: nowrap; }

/* --------------------------------------------------------- utilities ---- */

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.toolbar label.field { min-width: 130px; }
.toolbar .grow { flex: 1; min-width: 180px; }

.msg { padding: 10px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; font-weight: 500; }
.msg.error { background: var(--danger-soft); color: var(--danger); }
.msg.ok { background: var(--ok-soft); color: var(--ok); }

.two-col { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.two-col > * { min-width: 0; } /* a wide chart or table must not push the page past a phone's edge */
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }

.placeholder {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 60px 24px; text-align: center;
}
.placeholder .icon { font-size: 30px; }
.placeholder h3 { margin: 14px 0 6px; font-size: 17px; }
.placeholder p { color: var(--ink-2); margin: 0 auto; max-width: 420px; line-height: 1.6; }

.modal-back {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .45);
  display: grid; place-items: center; padding: 20px; z-index: 60;
}
.modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg); max-height: 90vh; overflow: auto;
}
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.modal .body { padding: 20px; }

/* wider daily chart on the report page */
.spark.wide { height: 110px; }
.spark.wide .col { max-width: 34px; }

.print-head { display: none; }

@media print {
  .topbar, .mainnav, .no-print, .toolbar, button { display: none !important; }
  body { background: #fff; font-size: 11px; }
  main { padding: 0; max-width: none; }
  .print-head { display: block; margin-bottom: 14px; }
  .print-head h2 { font-size: 17px; }
  .print-head p { margin: 3px 0 0; color: #444; font-size: 11px; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; margin-bottom: 10px; }
  .card > header { padding: 8px 10px; }
  .stats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .stat { padding: 8px 10px; box-shadow: none; }
  .stat .v { font-size: 18px; }
  .two-col { grid-template-columns: 1fr 1fr; }
  tbody td, thead th { padding: 4px 6px; }
  .table-wrap { overflow: visible; }
}

@media (max-width: 640px) {
  main { padding: 14px; }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .logo span.txt, .userbox .meta, .userbox .wide-only { display: none; }
  .mainnav { padding: 0 6px; }
  .mainnav button { padding: 10px 9px 8px; font-size: 13px; }
}

/* ---------------------------------------------------------- tkt form ---- */

.tkt-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.printer-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow); min-width: 260px;
}
.printer-box b { font-size: 13.5px; }
.printer-box .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); margin-top: 4px; flex: none; }
.printer-box.on { border-color: #b7e0c7; }
.printer-box.on .dot { background: #12b76a; box-shadow: 0 0 0 3px var(--ok-soft); }
.printer-box.on b { color: var(--ok); }
.printer-box.off { border-color: #f5c2bd; }
.printer-box.off .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.printer-box.off b { color: var(--danger); }
.printer-box .why { color: var(--danger); }

.svc-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.svc-pick .svc-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.svc-pick .svc-label .req { color: var(--danger); }
.svc {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 10px; padding: 11px 18px;
  font-weight: 700; font-size: 15px; letter-spacing: .02em; background: #fff; user-select: none;
}
.svc input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }
.svc .box { width: 20px; height: 20px; border: 2px solid var(--ink-3); border-radius: 5px; display: grid; place-items: center; flex: none; }
.svc:hover { border-color: var(--brand-2); }
.svc.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.svc.on .box { border-color: var(--brand); background: var(--brand); }
.svc.on .box::after { content: '✓'; color: #fff; font-size: 14px; line-height: 1; }
.svc:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(28, 86, 196, .2); }

.tkt-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 14px; }
.tkt-grid.four { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.tkt-section { margin: 18px 0; }
.tkt-section h4 {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.tkt-head, .tkt-row { display: grid; gap: 8px; align-items: start; }
.tkt-head { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.tkt-row { margin-bottom: 4px; }
.j-row { grid-template-columns: minmax(170px, 1.5fr) 100px 140px minmax(110px, 1fr) minmax(110px, 1fr) 150px 30px; }
.p-row { grid-template-columns: 26px 1fr 120px 80px 130px 30px; }
.tkt-row .pno { font-weight: 700; color: var(--ink-3); padding-top: 10px; text-align: center; }
.tkt-row .ac-hint { min-height: 13px; font-size: 11px; margin-top: 2px; }
.row-x {
  border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 14px;
  padding: 9px 6px; border-radius: 6px;
}
.row-x:hover { color: var(--danger); background: var(--danger-soft); }
textarea { resize: vertical; line-height: 1.5; }
/* Owner: everything written in Remarks is bold — while typing and wherever it is shown. */
input[name="remarks"], textarea[name="remarks"], .remark-text, .daily-remarks, .daily-table .daily-rem { font-weight: 700; }
input[name="remarks"]::placeholder, textarea[name="remarks"]::placeholder { font-weight: 400; }

button.btn.print-btn { padding: 11px 22px; font-size: 14.5px; }

.pill.warn { background: #fef0c7; color: var(--warn); }
.muted.err { color: var(--danger); max-width: 260px; white-space: normal; }
.svc-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 7px; border-radius: 4px; margin-bottom: 3px;
}
.svc-tag.tq { background: #fde7d6; color: #b54708; }
.svc-tag.ep { background: #e0eafe; color: var(--brand); }
.jline { white-space: nowrap; }
.tkt-table td { vertical-align: top; }

@media (max-width: 860px) {
  .tkt-head { display: none; }
  .j-row.tkt-row, .p-row.tkt-row {
    grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 8px;
  }
  .tkt-row [data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px;
  }
  .p-row.tkt-row .pno { grid-column: 1 / -1; text-align: left; padding: 0; }
  .p-row.tkt-row [data-label="Name of Passenger"] { grid-column: 1 / -1; }
}

.tab-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  background: #e9edf5; border-radius: 11px;
}
.tab-switch button {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 9px 20px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.tab-switch button:hover { color: var(--ink); }
.tab-switch button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow); }

.ack { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ink-3); font-weight: 800; }
.ack.on { background: var(--ok-soft); color: var(--ok); }

/* Fully ruled table for the ticket lists: every cell boxed, generous spacing. */
table.grid-table { border-collapse: collapse; font-size: 13px; }
table.grid-table th, table.grid-table td { border: 1px solid var(--line); }
table.grid-table thead th {
  background: #f3f5fa; color: var(--ink-2); padding: 12px 14px; font-size: 11px;
  border-bottom: 2px solid #d5dbe7; vertical-align: bottom;
}
table.grid-table tbody td { padding: 12px 14px; vertical-align: top; line-height: 1.5; }
table.grid-table tbody tr:nth-child(even) { background: #fafbfd; }
table.grid-table tbody tr:hover { background: #f2f6fe; }
table.grid-table tr > :first-child { border-left: 0; }
table.grid-table tr > :last-child { border-right: 0; }
table.grid-table .center { text-align: center; }
table.grid-table .jl { white-space: nowrap; }
table.grid-table .jl + .jl { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px; }
table.grid-table .pax-cell { min-width: 170px; }
table.grid-table .pax-cell .muted { margin-top: 2px; line-height: 1.55; }
table.grid-table .actions .link-btn { display: block; padding: 2px 0; text-align: left; }
table.grid-table .svc-tag { margin: 0; }

main.wide { max-width: none; }

.printer-box.warn { border-color: #f7d48b; }
.printer-box.warn .dot { background: #f79009; box-shadow: 0 0 0 3px #fef0c7; }
.printer-box.warn b, .printer-box.warn .why { color: var(--warn); }
a.btn { display: inline-block; text-decoration: none; border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; }
a.btn.ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
a.btn.ghost:hover { background: #f7f8fb; }
.setup-body .steps { margin: 0; padding-left: 20px; line-height: 1.9; color: var(--ink-2); }
.key-box {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #f7d48b; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
}
.key-box code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; user-select: all; word-break: break-all; }
.events { margin-top: 14px; }
.events summary { cursor: pointer; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }

/* ------------------------------------------ tkt form: one-screen layout ---- */

.tkt-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.tkt-top h2 { font-size: 20px; }
.tkt-top .tab-switch { margin: 0; }
.tkt-top p { margin: 0; flex: 1; }
.tkt-top .top-printer { margin-left: auto; }
.tkt-top .printer-box { padding: 7px 12px; min-width: 0; }
.tkt-top .printer-box .why { display: none; } /* reason shows on hover instead, to keep one line */

#tktCard .body { padding: 14px 18px 16px; }
.tkt-compact label.field > span, .tkt-compact .field > span {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px;
}
.tkt-compact .req { color: var(--danger); }
.tkt-compact input, .tkt-compact select, .tkt-compact textarea { padding: 7px 10px; font-size: 13.5px; }
.tkt-compact select { padding-right: 26px; }

.tkt-line { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.tkt-line .grow { flex: 1 1 180px; }
.tkt-line .grow2 { flex: 2 1 220px; }
.tkt-line .date-field { flex: 0 0 130px; }

.tkt-compact .svc-pick { margin: 0; gap: 8px; flex-wrap: nowrap; }
.tkt-compact .svc { padding: 6px 12px; font-size: 13.5px; border-width: 2px; gap: 8px; }
.tkt-compact .svc .box { width: 17px; height: 17px; }
.tkt-compact .svc:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(28, 86, 196, .25); }

.tkt-compact .tkt-section { margin: 4px 0 10px; }
.tkt-compact .tkt-head { margin-bottom: 4px; }
.tkt-compact .tkt-row { margin-bottom: 2px; }
.tkt-compact .tkt-row .ac-hint { min-height: 12px; font-size: 10.5px; margin-top: 1px; line-height: 12px; }
.tkt-compact .p-row .pno { padding-top: 8px; }
.tkt-compact .row-x { padding: 7px 6px; }
.add-row { display: inline-block; border-radius: 6px; padding: 3px 6px; margin-left: -6px; }
.add-row:focus-visible { outline: 0; background: var(--brand-soft); box-shadow: 0 0 0 2px rgba(28, 86, 196, .3); }

.bottom-line { align-items: stretch; }
.bottom-line .remarks-field { flex: 1 1 340px; display: flex; flex-direction: column; }
.bottom-line .remarks-field textarea { flex: 1; min-height: 70px; }
.bottom-line .money {
  flex: 1 1 420px; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 8px 12px; align-content: start;
}
.tkt-compact .form-actions { margin-top: 6px; }
.tkt-compact button.btn.print-btn { padding: 10px 22px; }

.bin-note { padding: 10px 18px; font-size: 12.5px; color: var(--ink-2); background: #fafbfd; border-bottom: 1px solid var(--line-soft); }

.tkt-compact .train-field .ac-hint {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ok);
}
.tkt-compact .train-field .ac-hint.warn { color: var(--warn); }
.train-field .ac-list { min-width: 420px; }
.phone-hint { font-size: 11px; font-weight: 600; min-height: 13px; line-height: 13px; margin-top: 2px; }
.phone-hint.ok { color: var(--ok); }
.phone-hint.bad { color: var(--danger); }
.phone-field input:has(+ .phone-hint.bad) { border-color: #f1a9a2; }
.ac-none { padding: 9px 11px; font-size: 12.5px; color: var(--ink-3); }

/* ------------------------------------------------------ new-form alert ---- */

.nav-badge {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 6px; border-radius: 10px;
  background: #f04438; color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.12); } }
.nav-badge.calm { animation: none; } /* new problems: worth a look, not an alarm */
.userbox button.bell-warn { background: #f79009; }

#toastRoot { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; font: inherit;
  width: 330px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 5px solid var(--brand-2);
  background: #fff; box-shadow: var(--shadow-lg); animation: toast-in .25s ease-out;
}
.toast.tq { border-left-color: #f04438; }
.toast b { font-size: 14px; }
.toast span { font-size: 12.5px; color: var(--ink-2); }
.toast:hover { background: #f7f9fe; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

table.grid-table tbody tr.new-row { background: #fff8e1; }
table.grid-table tbody tr.new-row:hover { background: #fff1c2; }
.new-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: #fff; background: #f04438; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.svc-tag.op { background: #ebe4ff; color: #5925dc; }

/* ------------------------------------------------------- ticket status ---- */

.tkt-status-cell { min-width: 150px; max-width: 220px; }
.tstat, .tstat-select { font-weight: 700; font-size: 12px; border-radius: 6px; }
.tstat { display: inline-block; padding: 2px 8px; }
.tstat-select { padding: 4px 26px 4px 8px; width: auto; min-width: 140px; background-color: #fff; }
.tstat.cnf, .tstat-select.cnf { background-color: var(--ok-soft); color: var(--ok); border-color: #b7e0c7; }
.tstat.failed, .tstat-select.failed { background-color: var(--danger-soft); color: var(--danger); border-color: #f5c2bd; }
.tstat.refund, .tstat-select.refund { background-color: #fef0c7; color: var(--warn); border-color: #f7d48b; }
.tstat.alternative, .tstat-select.alternative { background-color: #ebe4ff; color: #5925dc; border-color: #d4c7fb; }
.status-note { font-size: 12px; color: var(--ink); white-space: normal; margin-top: 3px; line-height: 1.4; }

/* backup trains / classes in a journey row */
.multi { display: flex; flex-direction: column; gap: 3px; }
.alt-line .ac, .class-box.alt-line { position: relative; }
.alt-line input, .alt-line select { border-style: dashed; background-color: #fbfcfe; }
.alt-line input { padding-right: 24px; }
.class-box.alt-line select { padding-right: 34px; background-position: right 22px center; }
.alt-x {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); z-index: 2;
  border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 3px 4px; border-radius: 4px;
}
.alt-x:hover { color: var(--danger); background: var(--danger-soft); }
.add-alt { font-size: 11.5px; padding: 1px 6px; align-self: flex-start; }
/* Each class box reserves the same line a train box uses for the train name, so backup
   trains and backup classes sit side by side. */
.class-box::after { content: ''; display: block; height: 13px; }

/* ------------------------------------------ tkt form: alignment polish ---- */

/* One height for every box in the form (date pickers were taller). */
.tkt-compact input:not([type=radio]), .tkt-compact select { height: 34px; }
/* Number boxes: no spinner arrows. */
.tkt-compact input[type=number]::-webkit-inner-spin-button,
.tkt-compact input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tkt-compact input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Money on one row: Total | Advance | Paid by, Bank name under Paid by when needed. */
.bottom-line .money { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
.bottom-line .money #bankField { grid-column: 3; }
.bottom-line .remarks-field textarea { min-height: 62px; }
/* First row (service type, branch, staff, date) stays on one line on a 1000px screen. */
.tkt-line .grow { flex: 1 1 150px; }
.tkt-line .date-field { flex: 0 0 112px; }
.tkt-compact .field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* branch: ticket status pop-ups */
.status-toast.cnf { border-left-color: #12b76a; }
.status-toast.failed { border-left-color: #f04438; }
.status-toast.refund { border-left-color: #f79009; }
.status-toast.alternative { border-left-color: #7a5af8; }
.status-toast .tstat { font-size: 12px; vertical-align: 1px; }
.status-toast .call-hint { font-size: 11.5px; font-weight: 700; color: var(--danger); }

/* PIN box for the shared booking-desk login */
.pin-input { font-size: 26px !important; letter-spacing: .5em; text-align: center; max-width: 180px; height: auto !important; padding: 10px 12px !important; }

/* TKT settings switches (admin) */
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .muted { max-width: 640px; margin-top: 2px; line-height: 1.45; }
.setting-row.off { opacity: .55; }
.switch {
  flex: none; min-width: 64px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line);
  background: #f0f2f6; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; cursor: pointer;
}
.switch.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.switch:disabled { cursor: not-allowed; }

/* ------------------------------------------------------------ account ---- */

.acc-top .acc-books { margin-left: auto; min-width: 230px; }
.acc-top div.acc-books { min-width: 0; font-size: 13px; }
.acc-top .tab-switch { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) { .acc-top .acc-books { margin-left: 0; width: 100%; } }

.acc-type { margin-bottom: 14px; }
.acc-type .svc .muted { font-weight: 400; margin-left: 2px; }
.acc-type .svc.acc-receipt.on { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.acc-type .svc.acc-receipt.on .box { border-color: var(--ok); background: var(--ok); }
.acc-type .svc.acc-payment.on { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.acc-type .svc.acc-payment.on .box { border-color: var(--danger); background: var(--danger); }
.acc-type .svc.is-off { opacity: .4; cursor: not-allowed; }

.acc-grid { display: grid; gap: 14px; grid-template-columns: 170px minmax(170px, 1fr) minmax(240px, 2fr) 170px; }
.acc-grid .acc-span3 { grid-column: span 3; }
.acc-grid .ac-hint { color: var(--ink-3); }
.acc-grid .ac-hint.warn { color: var(--danger); }
@media (max-width: 860px) {
  .acc-grid { grid-template-columns: 1fr 1fr; }
  .acc-grid .acc-span3 { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-tip { margin-left: auto; }

.vno.receipt { color: var(--ok); }
.vno.payment { color: var(--danger); }
.acc-table td.num { white-space: nowrap; }
.acc-table .acc-narr { min-width: 180px; max-width: 360px; }
.acc-table tfoot td { padding: 10px 14px; background: #f4f6fb; border: 1px solid var(--line); }
table.grid-table.acc-table tbody tr.acc-sum td { background: #f4f6fb; }
table.grid-table .actions-row .link-btn { padding: 2px 6px 2px 0; }
.acc-table tr.acc-off td { color: var(--ink-3); }
.acc-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); padding-bottom: 9px; white-space: nowrap; }
.acc-check input { width: auto; }
.acc-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.acc-open { display: flex; gap: 8px; }
.acc-open input { flex: 1; }
.acc-open select { width: 84px; flex: none; }
button.btn.ghost.on { border-color: var(--brand-2); background: var(--brand-soft); color: var(--brand); }

/* Two-sided statements, laid out like the CA's P&L and balance sheet. */
.acc-report-head { text-align: center; margin-bottom: 16px; }
.acc-report-head h2 { font-size: 18px; letter-spacing: .03em; }
.acc-report-head h3 { font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
table.acc-t { border-collapse: collapse; font-size: 13.5px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
table.acc-t thead th { position: static; background: none; color: var(--ink); font-size: 11.5px; border-bottom: 1px solid var(--ink); padding: 9px 12px; }
table.acc-t tbody td { padding: 6px 12px; border: 0; }
table.acc-t th:nth-child(2), table.acc-t td:nth-child(2) { border-right: 1px solid var(--ink); }
table.acc-t td.num { white-space: nowrap; width: 150px; }
table.acc-t td.head { font-weight: 700; padding-top: 12px; }
table.acc-t td.indent { padding-left: 26px; }
table.acc-t td.acc-a.sub { border-top: 1px solid var(--ink-2); font-weight: 600; }
table.acc-t td.net, table.acc-t td.strong { font-weight: 700; }
table.acc-t tfoot td { font-weight: 700; border-top: 1px solid var(--ink); padding: 10px 12px; font-size: 14px; }
table.acc-t tbody tr:hover { background: none; }
table.acc-t a { color: inherit; text-decoration: none; }
table.acc-t a:hover { color: var(--brand-2); text-decoration: underline; }
.acc-result { margin: 14px 0 0; font-size: 14px; }
.acc-neg { color: var(--danger); }
.acc-sub { margin: 24px 0 8px; font-size: 13.5px; }

@media print {
  .acc-report { border: 0 !important; }
  .acc-report .body { padding: 0; }
  table.acc-t { font-size: 11.5px; }
  table.acc-t a, .acc-neg { color: #000; }
  .acc-print-head { text-align: center; }
}

/* ------------------------------------------------------- daily report ---- */

.toolbar > input[type=date] { width: auto; }
.warn-text { color: var(--danger); font-weight: 600; }
.daily-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 14px; }
.daily-fields .ac-hint { color: var(--ink-3); }
.daily-fields .ac-hint.warn { color: var(--danger); font-weight: 600; }
.daily-lock { background: var(--ok-soft); color: var(--ok); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.daily-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.daily-cell { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.daily-cell span, .daily-remarks span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.daily-cell b { font-size: 17px; font-variant-numeric: tabular-nums; }
.daily-remarks { margin-top: 12px; font-size: 13px; }
.daily-table .daily-rem { min-width: 160px; max-width: 280px; white-space: normal; }
.daily-table th.num { white-space: normal; min-width: 90px; }
table.grid-table tbody tr.daily-missing { background: #fff6f5; }
.daily-table tfoot td { padding: 10px 14px; background: #f4f6fb; border: 1px solid var(--line); }

/* attendance */
.att-day { display: flex; gap: 6px; align-items: center; }
.att-day input[type=date] { width: auto; }
.att-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.att-legend { font-size: 12px; color: var(--ink-2); }
.att-legend .att-st { cursor: default; padding: 2px 5px; min-width: 0; font-size: 10.5px; }
.att-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.att-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.att-table td { vertical-align: middle; }
.att-table .att-name { min-width: 150px; }
.att-table select { width: 170px; padding: 6px 28px 6px 9px; }
.att-table select.att-moved { border-color: var(--warn); background-color: #fffaeb; font-weight: 600; }
.att-table input[type=time] { width: 122px; padding: 6px 8px; }
.att-table input:disabled { background: #f7f8fb; color: transparent; }
.att-status { display: inline-flex; gap: 4px; }
.att-st {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 0; min-width: 36px;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer;
}
.att-st:hover { border-color: var(--brand-2); color: var(--ink); }
.att-st.on { color: #fff; }
.att-st.on[data-s="P"] { background: var(--ok); border-color: var(--ok); }
.att-st.on[data-s="A"] { background: var(--danger); border-color: var(--danger); }
.att-st.on[data-s="H"] { background: #dc6803; border-color: #dc6803; }
.att-st.on[data-s="L"] { background: #6941c6; border-color: #6941c6; }
.att-st.on[data-s="W"] { background: #475467; border-color: #475467; }
.pill.att-P { background: var(--ok-soft); color: var(--ok); }
.pill.att-A { background: var(--danger-soft); color: var(--danger); }
.pill.att-H { background: #fef0c7; color: #b54708; }
.pill.att-L { background: #f4ebff; color: #6941c6; }
.pill.att-W { background: #eaecf0; color: #344054; }
.att-table tr.att-dirty td { background: #fffaeb; }
.att-table tr.att-group td { background: #f4f6fb; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); padding: 7px 12px; }
.att-sum tfoot td { padding: 10px 12px; background: #f4f6fb; border-top: 1px solid var(--line); }
tr.att-left td { color: var(--ink-3); }

/* booking desk: branch or party; every new TKT form: filling it from a WhatsApp message */
.pill.party { background: #f3e8ff; color: #6b21a8; }
.ac-hint.party { color: #6b21a8; }
.wa-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px;
  background: #ecfdf3; border: 1px solid #abefc6; border-radius: 9px;
}
.wa-bar .muted { flex: 1; min-width: 200px; }
button.btn.wa-btn { background: #128c4a; }
button.btn.wa-btn:hover { background: #0e7a40; }
.wa-text {
  width: 100%; resize: vertical; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}
.msg.wa-report { background: #ecfdf3; color: var(--ink); border: 1px solid #abefc6; font-weight: 400; }
.wa-report ul { margin: 4px 0 0 18px; padding: 0; }
.wa-check { margin-top: 8px; color: var(--warn); }
.wa-unread { margin-top: 8px; color: var(--ink-2); }
.icon-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid #abefc6; border-radius: 7px;
  color: var(--brand-2); padding: 5px 7px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
}
.icon-btn:hover { background: var(--brand-soft); border-color: var(--brand-2); }
.icon-btn.done { color: var(--ok); border-color: var(--ok); }

/* ----------------------------------------------------- users & roles ---- */

.um-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.um-top h2 { font-size: 20px; }
.um-top p { margin: 3px 0 0; }
.um-top .tab-switch { margin: 0; }
.grid.two { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid.two { grid-template-columns: 1fr; } }
.modal .grid { gap: 14px; }
.modal .ac-hint.muted { color: var(--ink-3); font-weight: 400; }

/* A filter row under a card's title: role chips on the left, search on the right. */
.filter-bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--line-soft); background: #fbfcfe;
}
.filter-bar input[type=search] { flex: 0 1 300px; margin-left: auto; padding: 7px 11px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 20px;
  padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.chip b { font-weight: 700; color: var(--ink-3); margin-left: 3px; }
.chip:hover { border-color: var(--brand-2); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.on b { color: rgba(255,255,255,.8); }

/* Plain, compact admin tables: one line per row, actions in a row. */
table.data-table thead th { padding: 9px 12px; }
table.data-table tbody td { padding: 8px 12px; vertical-align: middle; line-height: 1.4; }
table.data-table td.empty { padding: 30px; }
.row-actions { white-space: nowrap; }
.row-actions .link-btn { padding: 2px 6px; }
.row-actions .link-btn + .link-btn { border-left: 1px solid var(--line); }
tr.row-off td { color: var(--ink-3); }
tr.row-off td b { color: var(--ink-2); font-weight: 600; }
.roles-table td { vertical-align: top !important; line-height: 1.5; }
.role-explain p { margin: 0 0 10px; line-height: 1.6; color: var(--ink-2); max-width: 900px; }
.role-explain p:last-child { margin: 0; }
.role-note {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--brand-soft); border-radius: 8px; padding: 9px 12px;
}

/* Role badges: one colour per role, the same everywhere. */
.pill.role { font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.pill.mgr { background: #e0f2fe; color: #075985; }
.pill.desk { background: #fef0c7; color: #93370d; }
.pill.agent { background: #fde7d6; color: #b54708; }

/* --------------------------------------------- TKT list: compact ledger ---- */
/* One line per detail, grouped headings, short rows. On a small screen the table scrolls
   sideways while the form number (left) and the actions (right) stay in view. */

table.tkt-list { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: 100%; }
table.tkt-list th, table.tkt-list td { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); background: #fff; }
table.tkt-list thead th {
  position: static; background: #f3f5fa; color: var(--ink-2); font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 8px 9px; white-space: nowrap; vertical-align: bottom;
}
table.tkt-list thead tr.groups th {
  background: #e9edf5; color: var(--brand); font-size: 10.5px; padding: 5px 9px; text-align: left;
  border-right: 1px solid #d5dbe7; border-bottom: 1px solid #d5dbe7;
}
table.tkt-list thead tr:last-child th { border-bottom: 2px solid #d5dbe7; }
table.tkt-list tbody td { padding: 7px 9px; vertical-align: top; line-height: 1.4; }
table.tkt-list tbody tr:nth-child(even) td { background: #fafbfd; }
table.tkt-list tbody tr:hover td { background: #f2f6fe; }
table.tkt-list tbody tr.new-row td { background: #fff8e1; }
table.tkt-list tbody tr.new-row:hover td { background: #fff1c2; }
table.tkt-list tbody tr.flash td { animation: flash 1.6s ease-out; }
table.tkt-list .gstart { border-left: 2px solid #d5dbe7; }
table.tkt-list .center { text-align: center; }
table.tkt-list .jl { white-space: nowrap; }
table.tkt-list .jl + .jl { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 4px; }
table.tkt-list .svc-tag { margin: 0; }
table.tkt-list .muted { font-size: 11.5px; }
table.tkt-list .pax-cell { min-width: 160px; }
table.tkt-list .pax-line { white-space: nowrap; }
table.tkt-list .owner-cell { min-width: 110px; }
table.tkt-list .owner-name { font-weight: 650; }
table.tkt-list .row-actions .link-btn { padding: 2px 6px; }
table.tkt-list .row-actions > :first-child { padding-left: 0; }
table.tkt-list button.btn.sm { padding: 5px 10px; font-size: 12px; }
table.tkt-list .tkt-status-cell { min-width: 150px; max-width: 200px; }
table.tkt-list .tstat-select { min-width: 0; width: 140px; padding: 3px 24px 3px 7px; }
table.tkt-list .status-note {
  margin-top: 3px; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px;
}
table.tkt-list .note-btn { padding: 0 4px; margin-left: 2px; font-size: 12px; }
.ack-done { display: flex; align-items: center; justify-content: center; gap: 5px; font-weight: 600; }
.ack-done .ack { width: 18px; height: 18px; border-radius: 5px; font-size: 12px; }

/* Columns that stay put while the table scrolls sideways. */
table.tkt-list .stick-l, table.tkt-list .stick-r { position: sticky; z-index: 2; }
table.tkt-list .s0 { left: 0; min-width: 46px; width: 46px; }
table.tkt-list .s1 { left: 46px; box-shadow: 1px 0 0 #d5dbe7; }
table.tkt-list .s0w { left: 0; box-shadow: 1px 0 0 #d5dbe7; }
table.tkt-list thead tr.groups .stick-l { left: 0; }
table.tkt-list .stick-r { right: 0; box-shadow: -1px 0 0 #d5dbe7; }

/* Filters in their own row under the list title. */
.tkt-filters { align-items: flex-end; }
.tkt-filters label.field { min-width: 130px; }
.tkt-filters label.field.grow { flex: 1 1 200px; }
.tkt-filters label.field > span { font-size: 11px; margin-bottom: 3px; }
.tkt-filters input, .tkt-filters select { padding: 6px 10px; font-size: 13px; }
.tkt-filters select { padding-right: 26px; }
.tkt-filters input[type=search] { margin-left: 0; flex: none; }

/* ---------------------------------------- TKT form: ruled journey/passenger tables ---- */

.tkt-compact .tkt-section { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 12px; background: #fff; }
.tkt-compact .tkt-head {
  background: #f3f5fa; color: var(--ink-2); padding: 7px 10px; margin: 0;
  border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0;
}
.tkt-compact .tkt-row { padding: 6px 10px 0; margin: 0; border-bottom: 1px solid var(--line-soft); }
.tkt-compact .tkt-section > .add-row { margin: 5px 4px 5px 4px; }
.tkt-compact .tkt-line:first-of-type { padding-bottom: 2px; }
.tkt-compact .bottom-line { border-top: 1px solid var(--line-soft); padding-top: 10px; }
@media (max-width: 860px) {
  .tkt-compact .tkt-section { border: 0; }
  .tkt-compact .tkt-row { padding: 10px; }
}
.ac-item b.ac-name { color: var(--ink); min-width: 0; }
/* Headings may take two lines, so a long heading never widens its column. */
table.tkt-list thead tr:last-child th { white-space: normal; min-width: 44px; }
table.tkt-list .owner-cell .pill { white-space: nowrap; }
table.tkt-list .muted.err {
  max-width: 170px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
table.tkt-list td.ack-cell { white-space: normal; min-width: 110px; max-width: 150px; }
table.tkt-list .ack-done { justify-content: flex-start; align-items: flex-start; text-align: left; line-height: 1.3; }
table.tkt-list td.ack-cell { white-space: nowrap; max-width: 170px; }
table.tkt-list .ack-done, table.tkt-list .one-line {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
table.tkt-list .ack-done .ack { display: inline-grid; vertical-align: -3px; margin-right: 3px; }
table.tkt-list .tkt-status-cell .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
table.tkt-list .tstat-select { width: 152px; font-size: 11.5px; }
table.tkt-list .ack-cell .muted .link-btn { padding: 0 2px; font-size: 11.5px; }
/* A wide table always shows its sideways scrollbar (Mac and Windows hide it otherwise), and
   the fixed columns cast a shadow, so it is clear there is more to see. */
.table-wrap::-webkit-scrollbar { height: 11px; }
.table-wrap::-webkit-scrollbar-track { background: #eef1f7; }
.table-wrap::-webkit-scrollbar-thumb { background: #b8c2d6; border-radius: 6px; border: 2px solid #eef1f7; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #8a94a6; }
.table-wrap { scrollbar-color: #b8c2d6 #eef1f7; }
table.tkt-list .stick-r { box-shadow: -6px 0 8px -6px rgba(16, 24, 40, .28); }
table.tkt-list .s1, table.tkt-list .s0w { box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .28); }
.um-top .tab-switch { max-width: 100%; overflow-x: auto; }
/* Users & Roles: a booking agent's optional PIN */
.pin-opt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 10px; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.check-line input { width: auto; margin: 0; }
/* Received: the name of whoever has the form, and the time, in black. */
.ack-done .ack-name { color: var(--ink); font-weight: 750; letter-spacing: .01em; }
.ack-time { color: var(--ink); font-weight: 600; font-size: 12px; margin-top: 2px; white-space: nowrap; }
table.tkt-list .ack-cell .ack-time .link-btn { padding: 0 2px; font-size: 11.5px; }
/* A long name wraps rather than being cut off. */
table.tkt-list .ack-done { display: flex; align-items: flex-start; gap: 4px; white-space: normal; overflow: visible; max-width: 170px; }
table.tkt-list .ack-done .ack { flex: none; margin: 1px 0 0; }
table.tkt-list td.ack-cell { min-width: 140px; }

/* ------------------------------------------------------------ problems ---- */

.prob-table .small { font-size: 11.5px; }
.prob-table td { vertical-align: top !important; }
.prob-table .prob-msg { min-width: 240px; max-width: 460px; overflow-wrap: anywhere; }
.prob-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.prob-dl dt { color: var(--ink-3); font-weight: 600; }
.prob-dl dd { margin: 0; overflow-wrap: anywhere; }
.prob-h { margin: 16px 0 6px; font-size: 13px; }
.prob-pre {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: #f4f6fa; border: 1px solid var(--line-soft);
  font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 300px; overflow: auto;
}
.prob-pre.plain { font-family: inherit; font-size: 13.5px; } /* the person's own words */

/* TKT on a phone: nothing may push the page past the screen's edge. The service type boxes
   wrap, the money boxes go two to a row, the page tabs scroll, and the Actions column of the
   TKT List scrolls with the rest so the data keeps its room. */
.tkt-top .tab-switch { max-width: 100%; overflow-x: auto; }
@media (max-width: 480px) {
  .tkt-compact .svc-pick { flex-wrap: wrap; }
  .bottom-line .money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-line .money #bankField { grid-column: auto; }
  table.tkt-list .stick-r { position: static; box-shadow: none; }
}
/* ---------------------------------------- TKT: group booking pop-up (group.js) ---- */

button.btn.grp-btn { background: var(--brand-2); }
.msg.warn { background: #fef0c7; color: var(--warn); }
body.grp-open { overflow: hidden; }
.grp-back {
  position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 40, .45);
  overflow-y: auto; overscroll-behavior: contain; padding: 20px;
}
.grp {
  background: var(--bg); max-width: 1240px; min-height: calc(100vh - 40px); margin: 0 auto;
  border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
.grp-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0;
}
.grp-top h2 { margin: 0 0 2px; font-size: 19px; }
#grpMsg { padding: 0 20px; }
#grpMsg .msg { margin: 14px 0 0; }
#grpBody { padding: 16px 20px 20px; flex: 1; }
.grp-reading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 70px 0; font-size: 15px; color: var(--ink-2); }
.grp-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--brand-2); animation: grp-spin .8s linear infinite;
}
@keyframes grp-spin { to { transform: rotate(360deg); } }
.grp-sec { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.grp-h { margin: 0 0 10px; font-size: 15px; }
.msg.grp-notes { background: #f3f5fa; color: var(--ink-2); font-weight: 400; }
.grp-notes ul { margin: 4px 0 0 18px; padding: 0; }
.grp-remarks { display: block; }
.grp-remarks textarea { width: 100%; }
/* journeys: Journey 1 (the main one), 2, 3 ... each in its colour; the same tag on each passenger */
.grp-j-hint { margin: -4px 0 10px; font-size: 12.5px; line-height: 1.5; }
.tkt-compact .grp-journey { border-left: 4px solid var(--jc); transition: box-shadow .3s; }
.grp-journey.grp-flash { box-shadow: 0 0 0 3px rgba(28, 86, 196, .35); }
.grp-j-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding: 8px 10px; font-size: 13px; }
.grp-j-sum { font-weight: 600; }
.grp-j-count { font-size: 12.5px; }
.grp-j-head .grp-jdel { margin-left: auto; color: var(--danger); font-size: 12.5px; }
.tkt-compact .grp-journey .tkt-head { border-radius: 0; border-top: 1px solid var(--line); }
.grp-jtag {
  display: inline-block; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; background: var(--jb); color: var(--jc);
}
:is(.grp-jtag, .grp-journey)[data-c="1"] { --jc: #1c56c4; --jb: #e8effc; }
:is(.grp-jtag, .grp-journey)[data-c="2"] { --jc: #b54708; --jb: #fef0c7; }
:is(.grp-jtag, .grp-journey)[data-c="3"] { --jc: #067647; --jb: #dcfae6; }
:is(.grp-jtag, .grp-journey)[data-c="4"] { --jc: #6941c6; --jb: #f4ebff; }
:is(.grp-jtag, .grp-journey)[data-c="5"] { --jc: #c11574; --jb: #fce7f6; }
:is(.grp-jtag, .grp-journey)[data-c="6"] { --jc: #0e7090; --jb: #e0f2fe; }
:is(.grp-jtag, .grp-journey)[data-c="7"] { --jc: #93370d; --jb: #fdead7; }
:is(.grp-jtag, .grp-journey)[data-c="0"] { --jc: #344054; --jb: #eaecf0; }

/* the passenger list: tick some, move them to a journey */
.grp-h-note { font-weight: 400; font-size: 13px; }
.grp-h-q { margin-top: 18px; }
.grp-tickbar {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 8px;
  padding: 8px 10px; background: #f3f5fa; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.grp-tickrange, .grp-moving { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grp-tickbar input[type=number] { width: 70px; padding: 5px 8px; }
.grp-tickbar select { padding: 5px 8px; max-width: 260px; }
.grp-move-to { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; white-space: nowrap; }
.grp-moved { color: #067647; font-weight: 600; }
.grp-moved:empty { display: none; }
table.grp-list tbody tr { cursor: pointer; }
table.grp-list tbody tr:hover td { background: #f7f9fc; }
table.grp-list tr.grp-ticked td { background: #e8effc; }
table.grp-list .grp-tickcell { width: 30px; padding-right: 0; }
table.grp-list .grp-tickcell input { margin: 2px 0 0; cursor: pointer; }
table.grp-list td.grp-jcell { white-space: nowrap; }

/* the question: arrange automatically or keep the list order */
.grp-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.grp-opts .check-line { font-weight: 400; color: var(--ink); align-items: flex-start; }
.grp-opts .check-line input { margin-top: 3px; }
.grp-size-note { margin: 2px 0 0; font-size: 12.5px; }
.grp-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 14px; }
.grp-choice {
  display: grid; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--brand-2); border-radius: 10px; padding: 12px 14px;
}
.grp-choice b { font-size: 15px; color: var(--brand); }
.grp-choice span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.grp-choice:hover, .grp-choice:focus-visible { background: var(--brand-soft); outline: 0; }
.grp-list-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
table.grp-list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grp-list th {
  position: sticky; top: 0; background: #f3f5fa; text-align: left; padding: 7px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); border-bottom: 1px solid var(--line);
}
table.grp-list td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.grp-list tr.grp-check td { background: #fffaeb; }
.grp-check-text { color: var(--warn); font-size: 12px; }
.grp-missing { color: var(--danger); font-weight: 700; }

/* the forms to check */
.grp-forms-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.grp-forms-head .grp-h { margin: 0; }
.grp-forms-head .link-btn { margin-left: auto; font-size: 13.5px; }
.grp-form {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand-2);
  border-radius: 10px; padding: 10px 12px 2px; margin-bottom: 14px; transition: box-shadow .3s;
}
.grp-form[data-kind="senior"] { border-left-color: #dc6803; }
.grp-form[data-kind="ladies"] { border-left-color: #c11574; }
.grp-form.grp-over { border-color: #fda29b; border-left-color: var(--danger); }
.grp-form.grp-bad { box-shadow: 0 0 0 3px rgba(180, 35, 24, .25); }
.grp-form.grp-flash { box-shadow: 0 0 0 3px rgba(28, 86, 196, .35); }
.grp-form-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.grp-no { font-size: 15px; }
.grp-warn { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.grp-form-head .grp-del { margin-left: auto; color: var(--danger); }
.grp-form-msg .msg { margin: 0 0 8px; }
.pill.grp-tag.senior { background: #fef0c7; color: #93370d; }
.pill.grp-tag.ladies { background: #fce7f6; color: #c11574; }
.tkt-compact .grp-form .tkt-section { margin: 4px 0 8px; }
.grp-p .grp-note { font-size: 11.5px; color: var(--warn); margin-top: 2px; line-height: 1.35; }
.grp-p.grp-check input[name=name] { border-color: #fdb022; background: #fffcf5; }
.grp-move { width: 100%; }
@media (min-width: 861px) {
  .p-row.grp-p { grid-template-columns: 26px 1fr 110px 72px 120px 110px 30px; }
}
.grp-foot {
  position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; background: #fff; border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px; box-shadow: 0 -4px 14px rgba(16, 24, 40, .06);
}
#grpSaveInfo { margin-right: auto; font-weight: 600; }
#grpFootMsg { flex-basis: 100%; order: -1; }
#grpFootMsg:empty { display: none; }
#grpFootMsg .msg { margin: 0; }
@media (max-width: 640px) {
  .grp-back { padding: 0; }
  .grp { border-radius: 0; min-height: 100vh; }
  .grp-top, .grp-foot { border-radius: 0; }
  .grp-top, #grpBody, .grp-foot { padding-left: 12px; padding-right: 12px; }
  .grp-choose { grid-template-columns: 1fr; }
  .grp-foot { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
  #grpSaveInfo { flex-basis: 100%; font-size: 12.5px; }
  .grp-foot button.btn { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; }
}
.grp-need { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
#grpArrangeMsg .msg { margin: 0 0 12px; }

/* ------------------------------------------------------------ YTSK Form ---- */
/* Same look as the TKT form: ruled tables for passengers, children and the onward journey. */
.yp-row { grid-template-columns: 26px 1fr 80px 120px 130px 150px 30px; }
.yc-row { grid-template-columns: 26px 1fr 120px 80px 30px; }
.yo-row { grid-template-columns: minmax(170px, 1.5fr) 150px 120px minmax(110px, 1fr) minmax(110px, 1fr); }
.ytsk-form .station-cell { flex: 1 1 150px; min-width: 130px; }
.ytsk-form .class-cell { flex: 0 0 130px; }
.ytsk-form .seats-cell { flex: 0 0 90px; }
.ytsk-form .train-cell { flex: 2 1 220px; }
.ytsk-form .sec-title { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
.ytsk-form textarea[name="address"] { width: 100%; }
tr.ytsk-deleted td { color: var(--ink-3); }
tr.ytsk-deleted td.strike { text-decoration: line-through; }
@media (max-width: 860px) {
  .yp-row.tkt-row, .yc-row.tkt-row, .yo-row.tkt-row {
    grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 8px;
  }
  .yp-row.tkt-row .pno, .yc-row.tkt-row .pno { grid-column: 1 / -1; text-align: left; padding: 0; }
  .yp-row.tkt-row [data-label^="Name"], .yc-row.tkt-row [data-label^="Name"] { grid-column: 1 / -1; }
}
.ytsk-form .money-box .field { flex: 1 1 140px; }
.calc-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 14px; }
.calc-table td { padding: 5px 4px; border-bottom: 1px solid var(--line-soft); }
.calc-table td.num { text-align: right; white-space: nowrap; }
.calc-table tr.sum td { border-top: 1px solid var(--line); }
.settle-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px; background: #f6f8fc; border-radius: 8px; }
.settle-box .check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.danger-text { color: var(--danger); }
.settle-box .check { flex-direction: row; flex: 1 1 auto; margin: 0; }
.settle-box .check span { display: inline; }
.settle-box input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; }
.settle-box select { width: auto; flex: 0 0 150px; }

/* ------------------------------------------- grouped left menu (Nov 2026) ---- */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - 52px); }
.shell > main { flex: 1 1 auto; min-width: 0; }
.sidenav {
  flex: 0 0 196px; position: sticky; top: 0; height: calc(100vh - 52px); overflow-y: auto;
  background: #fff; border-right: 1px solid var(--line); padding: 10px 8px 20px; z-index: 40;
}
.sidenav .nav-group { margin-bottom: 6px; }
.sidenav .nav-title {
  font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 10px 4px;
}
.sidenav button {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; border-radius: 7px; color: var(--ink-2); text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 550; padding: 8px 10px; cursor: pointer; white-space: nowrap;
}
.sidenav button .ni { width: 18px; text-align: center; font-size: 14px; }
.sidenav button:hover { background: #f3f6fb; color: var(--brand); }
.sidenav button.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.sidenav .nav-badge { position: static; margin-left: auto; }
.nav-toggle {
  display: none; background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 7px;
  width: 34px; height: 32px; font-size: 17px; cursor: pointer;
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .shell { display: block; }
  .sidenav {
    display: none; position: static; height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidenav.open { display: block; }
}
@media print { .sidenav, .nav-toggle { display: none !important; } }

/* ---------- Daily summary as tables (Nov 2026) ---------- */
.sum-cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.sum-cols h4 { margin: 0 0 8px; font-size: 13px; }
.sum-table { width: 100%; }
.sum-table th { text-align: left; font-weight: 500; white-space: normal; }
.sum-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sum-table tr.sum-head td { background: var(--bg, #f4f6fa); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.sum-table tr.sum-total th, .sum-table tr.sum-total td { border-top: 2px solid var(--line); }
.sum-table input { width: 100%; max-width: 180px; text-align: right; }
.sum-table .ac-hint { text-align: right; }
.ok-text { color: var(--ok); font-weight: 600; }
tr.acc-click { cursor: pointer; }
tr.acc-click:hover td { background: var(--brand-soft); }
.vno-btn { padding: 0; }
.vch-table th { width: 38%; }

/* ---------- YTSK group list (Nov 2026) ---------- */
.ygrp-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ygrp-bar .muted { font-size: 12px; }
.modal.ygrp { max-width: 1000px; width: 96vw; }
.ygrp-top { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.ygrp-table input, .ygrp-table select { padding: 4px 6px; font-size: 13px; }
.ygrp-table input[data-k="name"] { width: 100%; min-width: 180px; }
.ygrp-table tr.ygrp-first td { border-top: 2px solid var(--line); }
.ygrp-table td.ygrp-no { vertical-align: top; background: var(--brand-soft); }

/* Trial site marker */
.trial-bar { background: #f79009; color: #fff; font-weight: 700; text-align: center; padding: 5px 12px; font-size: 13px; letter-spacing: .02em; }
@media print { .trial-bar { display: none; } }