/* Direction: Blue Line Travel Desk — premium B2B operations SaaS. Deep navy, professional blue, cool gray ground. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #e8eaee;
  --border: #dbe1ec;
  --border-strong: #acaeb2;
  --ink: #0e1a33;
  --muted: #55627a;
  --accent: #13294f;
  --accent-hover: #102343;
  --accent-ink: #ffffff;
  --accent-text: #1d55b5;
  --accent-strong: #13294f;
  --accent-soft: #e6eefb;
  --accent-border: #8f9aad;
  --success: #17803d;
  --success-ink: #ffffff;
  --success-soft: #d9e8e3;
  --success-strong: #157638;
  --warning: #a35f00;
  --warning-ink: #ffffff;
  --warning-soft: #eae4dc;
  --warning-strong: #965700;
  --danger: #c2332b;
  --danger-ink: #ffffff;
  --danger-soft: #eedfe1;
  --danger-strong: #b22f28;
  --chart-1: #13294f;
  --chart-2: #6b3078;
  --chart-3: #86262d;
  --chart-4: #594d03;
  --chart-5: #0e6d5c;
  --chart-6: #084c91;

  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --display-weight: 600;
  --display-tracking: -0.015em;
  --x-navy: #0d2147;
  --x-on-navy: #e7eefc;
  --x-on-navy-muted: #a9bbdf;
  --x-on-photo: #ffffff;
  --x-purple: #6b3fb5;
  --x-dep: #1d55b5;
  --x-arr: #0f7a80;
  --x-ret: #3a3f9e;
  --x-checkin: #6b3fb5;
  --x-checkout: #85509f;
  --x-pickup: #94560a;
  --x-dropoff: #a05227;
  --x-reception: #17803d;
  --x-task: #55627a;
  --x-reminder: #c2332b;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #03060b;
  --surface: #1c1f23;
  --surface-2: #101217;
  --border: #26292d;
  --border-strong: #4f5154;
  --ink: #f4f6fa;
  --muted: #94969a;
  --accent: #263a5d;
  --accent-hover: #475875;
  --accent-ink: #ffffff;
  --accent-text: #7b869d;
  --accent-strong: #7b869d;
  --accent-soft: #0b111d;
  --accent-border: #131d30;
  --success: #17803d;
  --success-ink: #ffffff;
  --success-soft: #072116;
  --success-strong: #4b9c68;
  --warning: #a35f00;
  --warning-ink: #ffffff;
  --warning-soft: #261a09;
  --warning-strong: #b17827;
  --danger: #c2332b;
  --danger-ink: #ffffff;
  --danger-soft: #2d1012;
  --danger-strong: #cf605a;
  --chart-1: #566c93;
  --chart-2: #aa6ab5;
  --chart-3: #c25d5d;
  --chart-4: #a47810;
  --chart-5: #4f9347;
  --chart-6: #19a9b1;
}

/* Blue Line Travel Desk — application shell and operational components. Tokens only. */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; }
.scrim { display: none; position: fixed; inset: 0; background: rgb(0 0 0 / 0.45); z-index: 40; }
body.nav-open .scrim { display: block; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 16rem; display: flex; flex-direction: column; padding: 1rem 0.75rem; background: var(--x-navy); color: var(--x-on-navy); transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; }
body.nav-open .sidebar { transform: none; }
@media (min-width: 768px) {
  .sidebar { position: sticky; top: 0; height: 100vh; transform: none; flex: none; transition: width 0.2s ease; }
  .scrim { display: none !important; }
  body.nav-collapsed .sidebar { width: 4.5rem; }
  body.nav-collapsed .nav-label { display: none; }
  body.nav-collapsed .brand { justify-content: center; }
}
.brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.25rem 0.5rem; color: var(--x-on-navy); text-decoration: none; }
.brand .nav-label strong { display: block; font-size: 1rem; line-height: 1.1; }
.brand .nav-label small { display: block; font-size: 0.72rem; color: var(--x-on-navy-muted); }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--x-dep); color: var(--x-on-photo); flex: none; }
.nav-link { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.75rem; border-radius: 8px; border: 0; background: transparent; color: var(--x-on-navy-muted); font-size: 0.9rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.nav-link:hover { background: rgb(255 255 255 / 0.08); color: var(--x-on-navy); }
.nav-link:focus-visible { outline: 2px solid var(--x-on-navy); outline-offset: 1px; }
.nav-link[aria-current="page"] { background: rgb(255 255 255 / 0.15); color: var(--x-on-navy); }
.nav-link .icon { flex: none; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar > * { flex: none; }
.topbar > .search { flex: 1 1 0; min-width: 0; }
.search { position: relative; flex: 1; max-width: 30rem; min-width: 0; }
.search .input { min-width: 0; }
@media (max-width: 520px) { .topbar { gap: 0.25rem; padding: 0.5rem; } .topbar .btn-icon { padding-inline: 0.4rem; } }
.search .icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .input { padding-left: 2.1rem; width: 100%; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.dropdown { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 60; min-width: 12.5rem; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgb(0 0 0 / 0.14); }
.dropdown.wide { width: 22rem; max-width: calc(100vw - 1.5rem); }
.dropdown a, .dropdown button { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.875rem; color: var(--ink); text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.dropdown a:hover, .dropdown button:hover { background: var(--surface-2); }
.dropdown a.unread { background: var(--accent-soft); }
.dropdown a.unread:hover { background: var(--accent-soft); }
.dropdown .wide-block { display: block; }
.bell { position: relative; }
.bell-dot { position: absolute; top: 1px; right: 1px; display: grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--danger); color: var(--x-on-photo); font-size: 0.65rem; font-weight: 700; }
.avatar-btn { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.15rem; border-radius: 999px; }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink, var(--x-on-photo)); font-weight: 600; font-size: 0.85rem; }
.page { max-width: 80rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
@media (min-width: 768px) { .page { padding: 2rem 2rem 4rem; } }

.flash { padding: 0.7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); font-size: 0.9rem; color: var(--ink); }
.flash-err { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.flash-ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.flash-warn { background: color-mix(in srgb, var(--warning) 11%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }

.metric { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.95rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.metric:hover { border-color: var(--accent-text); box-shadow: 0 2px 10px rgb(0 0 0 / 0.07); }
a.metric:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.metric-n { font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.metric.warn .metric-n { color: var(--warning); }
.metric.bad .metric-n { color: var(--danger); }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th { padding: 0.6rem 0.9rem; text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th a { color: inherit; text-decoration: none; }
.tbl th a:hover { color: var(--ink); }
.tbl td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

.badge { margin-right: 0.25rem; white-space: nowrap; }
.tone-gray { background: var(--surface-2); color: var(--muted); }
.tone-blue { background: var(--accent-soft); color: var(--accent-text); }
.tone-green { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: color-mix(in srgb, var(--success) 75%, var(--ink)); }
.tone-amber { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: color-mix(in srgb, var(--warning) 70%, var(--ink)); }
.tone-red { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); color: color-mix(in srgb, var(--danger) 75%, var(--ink)); }
.tone-purple { background: color-mix(in srgb, var(--x-purple) 13%, var(--surface)); color: color-mix(in srgb, var(--x-purple) 75%, var(--ink)); }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; align-items: end; margin-bottom: 1rem; padding: 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.filters .grow { grid-column: span 2; }
@media (max-width: 520px) { .filters .grow { grid-column: span 1; } }
.chip-on { background: var(--accent); color: var(--accent-ink, var(--x-on-photo)); border-color: var(--accent); }
a.chip { text-decoration: none; }

.tabs-nav { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tab-link { padding: 0.6rem 0.95rem; font-size: 0.9rem; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-link:hover { color: var(--ink); }
.tab-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.tab-link[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.7rem; }
.timeline li::before { content: ""; position: absolute; left: 0.3rem; top: 1rem; bottom: -0.1rem; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 0.35rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--x-dep); }

.week-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.week-col { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.5rem; background: var(--surface-2); border-radius: 8px; }
.ev-dep { --c: var(--x-dep); } .ev-arr { --c: var(--x-arr); } .ev-ret { --c: var(--x-ret); } .ev-checkin { --c: var(--x-checkin); } .ev-checkout { --c: var(--x-checkout); }
.ev-visa { --c: var(--x-ret); } .ev-decision { --c: var(--x-checkout); } .ev-followup { --c: var(--x-reception); }
.ev-pickup { --c: var(--x-pickup); } .ev-dropoff { --c: var(--x-dropoff); } .ev-reception { --c: var(--x-reception); } .ev-task { --c: var(--x-task); } .ev-reminder { --c: var(--x-reminder); }
.ev-dot { display: inline-block; flex: none; width: 0.65rem; height: 0.65rem; margin-top: 0.3rem; border-radius: 50%; background: var(--c, var(--x-dep)); }
.ev-chip { display: block; padding: 0.15rem 0.4rem; border-radius: 4px; background: var(--c); color: var(--x-on-photo); font-size: 0.72rem; line-height: 1.35; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-chip:hover { filter: brightness(1.1); }
.ev-done { opacity: 0.55; text-decoration: line-through; }
.unread-row { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }

.fc { --fc-border-color: var(--border); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--surface-2); --fc-today-bg-color: var(--accent-soft); --fc-button-bg-color: var(--accent); --fc-button-border-color: var(--accent); --fc-button-hover-bg-color: var(--accent-text); --fc-button-hover-border-color: var(--accent-text); --fc-button-active-bg-color: var(--accent-text); --fc-button-active-border-color: var(--accent-text); --fc-list-event-hover-bg-color: var(--surface-2); --fc-event-bg-color: var(--x-dep); font-size: 0.85rem; color: var(--ink); }
.fc .fc-button { color: var(--x-on-photo); font-size: 0.8rem; padding: 0.35rem 0.7rem; text-transform: none; }
.fc .fc-toolbar { flex-wrap: wrap; gap: 0.5rem; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; }
.fc .fc-event { background: var(--c, var(--x-dep)); border-color: var(--c, var(--x-dep)); color: var(--x-on-photo); cursor: pointer; }
.fc .fc-event .fc-event-main { color: var(--x-on-photo); }
.fc .fc-daygrid-event-dot { border-color: var(--c, var(--x-dep)); }
.fc .fc-list-event-dot { border-color: var(--c, var(--x-dep)); }
.fc a { color: inherit; }
.fc-theme-standard .fc-list { border-color: var(--border); }
#add-stay, #add-tr { width: min(56rem, calc(100vw - 2rem)); max-width: none; max-height: 90vh; overflow: auto; }
.seg legend { font-size: 0.9rem; }

.dropdown.wide a { flex-direction: column; gap: 0.1rem; }
@media print { .sidebar, .topbar, .scrim { display: none !important; } .page { max-width: none; padding: 0; } }