/* bookings screen — styles specific to this screen only; shared styles live in tiye.css */

/* Filter chip with a clear (×) button, design p.3 "State: Pending ×".
   Shared by Bookings, Transactions and Exceptions (all use .ty-chip). */
.ty-chip .chip-x {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin: 0 -4px 0 2px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
.ty-chip .chip-x:hover { background: rgba(255,255,255,.18); }
.ty-chip .chip-x .ico { width: 12px; height: 12px; }

/* Toolbar: the search box is the screen's main control — Support pastes a phone here. */
.bk .bk-search { flex: 0 1 362px; min-width: 300px; }
.bk .bk-search .input { height: 36px; }
.bk-table td.bk-trip { max-width: 220px; }
.bk-table tbody tr:focus { outline: none; }

/* The panel opens over the list without dimming it: staff compare rows
   (brief §6.3), so the list stays readable and clickable beside it. */
body.bk-panel #scrim.on { background: transparent; pointer-events: none; }
body.bk-panel #panel { box-shadow: -1px 0 0 var(--line), -12px 0 32px rgba(22,24,27,.08); }

/* Panel blocks */
.bk-kv { grid-template-columns: 110px minmax(0, 1fr); row-gap: 8px; }
.bk-kv .v.row { gap: 8px; }
.bk-legs { gap: 8px; }
.leg .leg-top { font-size: 13px; }
.leg .meta { line-height: 1.5; }
.leg .tkt { align-items: baseline; margin-top: 2px; }
.bk-tkt { font-weight: 600; font-size: 12.5px; }
.bk-red { color: var(--red); font-weight: 600; }
.bk-history .h { grid-template-columns: 72px minmax(0, 1fr); }
.bk-history .t { font-size: 12.5px; }
.ty-arr { width: 13px; height: 13px; vertical-align: -2px; margin: 0 1px; }