/*
 * theme.css — Travel Desk. A calm working tool for an Indian travel agency:
 * deep lagoon teal for actions, warm sand for the page, a coral and mustard
 * pair in the charts. The left rail is its own dark teal band in both modes.
 * Dense and quiet like Linear, warm like a printed itinerary.
 */

:root {
  --canvas: #f5f2ec;
  --surface: #ffffff;
  --surface-2: #efeae1;
  --border: #e2dbcf;
  --border-strong: #b9b0a2;
  --ink: #1c2624;
  --muted: #5e6966;
  --accent: #0e6b70;
  --accent-hover: #0b5559;
  --accent-ink: #ffffff;
  --accent-text: #0b5f63;
  --accent-strong: #0a4f53;
  --accent-soft: #d9ecea;
  --accent-border: #9fcfcb;
  --success: #1f7a4d;
  --success-ink: #ffffff;
  --success-soft: #dcefe3;
  --success-strong: #17633e;
  --warning: #a65a0e;
  --warning-ink: #ffffff;
  --warning-soft: #f7e7d3;
  --warning-strong: #84470a;
  --danger: #b4332e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dedc;
  --danger-strong: #962a26;
  --chart-1: #0e6b70;
  --chart-2: #e07a4f;
  --chart-3: #d9a441;
  --chart-4: #5b7fbf;
  --chart-5: #8a6bb0;
  --chart-6: #6f9a5a;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0.625rem;
  --radius-card: 0.875rem;
  --radius-input: 0.625rem;
  --card-pad: 1.25rem;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);

  --x-rail: #0c3a3e;
  --x-rail-ink: #f1f7f6;
  --x-rail-muted: #a8c6c2;
  --x-rail-hover: #134a4f;
  --x-rail-active: #1a5a5f;
  --x-rail-accent: #f2b37f;
  --x-rail-border: #1d4d51;
}

html[data-theme="dark"] {
  --canvas: #0f1615;
  --surface: #151f1e;
  --surface-2: #1b2827;
  --border: #263634;
  --border-strong: #3b504d;
  --ink: #e7efed;
  --muted: #9db0ac;
  --accent: #4fb8b1;
  --accent-hover: #6cc9c3;
  --accent-ink: #08201f;
  --accent-text: #6fcfc8;
  --accent-strong: #9fe3dd;
  --accent-soft: #143533;
  --accent-border: #2b5f5b;
  --success: #3fa36f;
  --success-ink: #06170e;
  --success-soft: #14301f;
  --success-strong: #7fd1a3;
  --warning: #d98a3a;
  --warning-ink: #1f1205;
  --warning-soft: #3a2614;
  --warning-strong: #f0b27a;
  --danger: #e0645d;
  --danger-ink: #240706;
  --danger-soft: #3d1a18;
  --danger-strong: #f29a94;
  --chart-1: #4fb8b1;
  --chart-2: #f0956c;
  --chart-3: #e8be5f;
  --chart-4: #86a6e0;
  --chart-5: #b195d6;
  --chart-6: #94c27f;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.5);

  --x-rail: #0a1110;
  --x-rail-ink: #e7efed;
  --x-rail-muted: #8fa6a2;
  --x-rail-hover: #142120;
  --x-rail-active: #1a2c2a;
  --x-rail-accent: #f0b27a;
  --x-rail-border: #1b2726;
}

/*
 * app.css — Travel Desk's own pieces: the app shell (a fixed left rail on a
 * laptop, a slide-in drawer on a phone), the KPI icon tile, the date chip on
 * appointment lists, and the one moment that moves (the KPI row on arrival).
 */

/* ---- Shell ------------------------------------------------------------ */
.app-shell { min-height: 100vh; }

.app-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 16rem;
  background: var(--x-rail);
  color: var(--x-rail-ink);
  border-right: 1px solid var(--x-rail-border);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  overflow-y: auto;
}
.navopen:checked ~ .app-shell .app-rail { transform: none; }

.rail-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  background: rgba(0, 0, 0, 0.45);
}
.navopen:checked ~ .app-shell .rail-scrim { display: block; }

.app-main { min-width: 0; }

@media (min-width: 64rem) {
  .app-rail { transform: none; }
  .navopen:checked ~ .app-shell .rail-scrim { display: none; }
  .app-main { margin-left: 16rem; }
  .mobile-bar { display: none; }
}

.rail-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--x-rail-accent);
  color: var(--x-rail);
}
.rail-muted { color: var(--x-rail-muted); }
.rail-label {
  padding: 1rem 0.75rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--x-rail-muted);
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--x-rail-muted);
  transition: background-color 150ms ease, color 150ms ease;
}
.rail-link:hover { background: var(--x-rail-hover); color: var(--x-rail-ink); text-decoration: none; }
.rail-link[aria-current="page"] { background: var(--x-rail-active); color: var(--x-rail-ink); font-weight: 600; }
.rail-link[aria-current="page"] .icon { color: var(--x-rail-accent); }
.rail-link .rail-count {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--x-rail-accent);
  color: var(--x-rail);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.rail-foot { border-top: 1px solid var(--x-rail-border); }
.rail-toggle { color: var(--x-rail-muted); }
.rail-toggle:hover { background: var(--x-rail-hover); color: var(--x-rail-ink); }

/* ---- KPI tile and date chip ------------------------------------------- */
.kpi-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: var(--surface-2);
  line-height: 1.1;
}
.date-chip b { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.date-chip span { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.date-chip.is-today { background: var(--accent); }
.date-chip.is-today b, .date-chip.is-today span { color: var(--accent-ink); }

/* ---- The one moment that moves: the KPI row settles in on arrival ------ */
@keyframes kpi-rise {
  from { transform: translateY(0.5rem); }
  to { transform: none; }
}
.kpi-row > * { animation: kpi-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.kpi-row > *:nth-child(2) { animation-delay: 60ms; }
.kpi-row > *:nth-child(3) { animation-delay: 120ms; }
.kpi-row > *:nth-child(4) { animation-delay: 180ms; }
html.reduced-motion .kpi-row > * { animation: none; }

/* A stage or status picker that sits in a table row. */
.select-sm { height: 2rem; padding-left: 0.625rem; font-size: 0.8125rem; width: auto; min-width: 8.5rem; }