/* ==========================================================================
   CrewCalc — Snapshot tab theme & layout scaffolding
   Palette (from original UPS Bid Assistant):
     brown      #3A2317   gold/amber #C8860D
     cream      #F4EFE9   warm grays #9E8674 / #7A726A
     dark brown #6B4528 (buttons)   cream-bg #FBF6F0 / #FBFAF7
     borders    #E2DDD2 / #ECE7DD   page bg #ECEAE3
   Everything is scoped under .snap-app and prefixed snap- so nothing leaks
   into the rest of CrewCalc.
   ========================================================================== */

.snap-app {
  /* Homogenized to CrewCalc's dark theme: the snapshot's original warm palette
     is remapped onto CrewCalc design tokens (--bg/--card/--cyan/--text*), so the
     tab follows CrewCalc's theme instead of the UPS brown/gold/cream. */
  --snap-brown: var(--bar-bg);          /* dark chrome / header bg */
  --snap-brown2: var(--cyan);           /* solid accent buttons */
  --snap-gold: var(--cyan);             /* accent / active / links / badges */
  --snap-gold-soft: var(--cyan-faint);  /* accent-soft highlight bg */
  --snap-cream: var(--card);            /* card / panel bg */
  --snap-cream2: #11202c;               /* card hover / alt surface */
  --snap-cream3: var(--card);           /* card bg */
  --snap-page: var(--bg);               /* page background */
  --snap-ink: var(--text-bright);       /* primary text */
  --snap-ink2: var(--text);             /* secondary text */
  --snap-gray: var(--text-dim);         /* muted / labels */
  --snap-gray2: var(--text-dim);        /* muted */
  --snap-gray3: #6f7f96;                /* fainter muted */
  --snap-line: var(--card-border);      /* borders */
  --snap-line2: var(--cyan-faint);      /* subtle border / hover bg */
  --snap-line3: rgba(255,255,255,0.05); /* faint divider */
  --snap-green: var(--green);           /* positive */
  --snap-green-bg: var(--green-dim);    /* positive soft bg */
  --snap-red: var(--red);               /* negative */
  --snap-red-bg: rgba(255,23,68,0.14);  /* negative soft bg */
  --snap-teal: var(--cyan);             /* info */
  --snap-card: var(--card);             /* explicit card bg (was #fff) */
  --snap-card2: #11202c;                /* card alt / hover */
  --snap-on-accent: #04222b;            /* dark text on cyan accent buttons/badges */

  background: var(--snap-page);
  color: var(--snap-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.snap-app *,
.snap-app *::before,
.snap-app *::after { box-sizing: border-box; }

.snap-app .snap-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

@keyframes snap-spin { to { transform: rotate(360deg); } }
@keyframes snap-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- HEADER ------------------------------------------------------------- */
.snap-app .snap-header {
  background: var(--snap-brown);
  color: var(--snap-ink);
  padding: 0 22px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--snap-gold);
}
.snap-app .snap-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
}
.snap-app .snap-badge {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background: var(--snap-gold);
  color: var(--snap-on-accent);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .5px;
  line-height: 1;
  text-align: center;
  flex: none;
}
.snap-app .snap-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}
.snap-app .snap-subtitle {
  font-size: 11.5px;
  color: var(--snap-gray);
  letter-spacing: .3px;
}
.snap-app .snap-header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.snap-app .snap-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--snap-gray2);
  font-weight: 600;
}
.snap-app .snap-bidperiod { text-align: right; }
.snap-app .snap-bidperiod-val {
  font-size: 12.5px;
  color: var(--snap-ink);
}
.snap-app .snap-login {
  border-left: 1px solid var(--snap-line);
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.snap-app .snap-bidding-as {
  display: flex;
  align-items: center;
  gap: 12px;
}
.snap-app .snap-bidding-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--snap-ink);
}
.snap-app .snap-bidding-proj { text-align: right; }
.snap-app .snap-bidding-projval {
  font-size: 13px;
  font-weight: 800;
  color: var(--snap-gold);
}
.snap-app .snap-login-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.snap-app .snap-gems-input {
  width: 170px;
  background: var(--snap-card);
  color: var(--snap-ink);
}
.snap-app .snap-login-err {
  font-size: 11px;
  color: var(--snap-red);
}

/* ---- TAB BAR ------------------------------------------------------------ */
.snap-app .snap-tabbar {
  background: var(--snap-card);
  border-bottom: 1px solid var(--snap-line);
  padding: 0 18px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.snap-app .snap-tab {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--snap-gray);
  padding: 13px 14px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.snap-app .snap-tab:hover { color: var(--snap-brown2); }
.snap-app .snap-tab-active {
  color: var(--snap-gold);
  border-bottom-color: var(--snap-gold);
}

/* ---- CONTENT WRAP ------------------------------------------------------- */
.snap-app .snap-content {
  padding: 18px;
  max-width: 1320px;
  margin: 0 auto;
  animation: snap-fadein .2s ease;
}

/* ---- CARDS -------------------------------------------------------------- */
.snap-app .snap-card {
  background: var(--snap-card);
  border: 1px solid var(--snap-line);
  border-radius: 8px;
  overflow: hidden;
}
.snap-app .snap-card-pad { padding: 15px 16px; }
.snap-app .snap-card-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--snap-line2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.snap-app .snap-card-head-tinted {
  background: var(--snap-cream2);
}
.snap-app .snap-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--snap-ink2);
}
.snap-app .snap-card-sub {
  font-size: 12px;
  color: var(--snap-gray);
  margin-top: 3px;
  line-height: 1.5;
}

/* ---- LINE MATRIX -------------------------------------------------------- */
.snap-app .snap-view-matrix {
  width: calc(100vw - 36px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  --matrix-left: 444px;
  --matrix-day: 42px;
  --matrix-row: 36px;
  --matrix-line: var(--snap-line);
  --matrix-ink: var(--snap-ink);
  --matrix-muted: var(--snap-gray);
  --matrix-bg: var(--snap-page);
  --matrix-left-bg: var(--snap-card);
  --matrix-duty: rgba(0,229,255,.16);
  --matrix-duty-border: rgba(0,229,255,.62);
  --matrix-red: var(--snap-red-bg);
  --matrix-want-bg: var(--snap-green-bg);
  --matrix-no-bg: var(--snap-red-bg);
}
.snap-app .snap-matrix-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--snap-card);
  border: 1px solid var(--snap-line);
  border-radius: 8px 8px 0 0;
  color: var(--matrix-ink);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.snap-app .snap-matrix-tool-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.snap-app .snap-matrix-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--matrix-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.snap-app .snap-matrix-toolbar input,
.snap-app .snap-matrix-toolbar select {
  height: 28px;
  border: 1px solid var(--snap-line);
  border-radius: 4px;
  background: var(--snap-card2);
  color: var(--matrix-ink);
  font: 700 12px ui-monospace, "SF Mono", Menlo, monospace;
  padding: 0 8px;
}
.snap-app .snap-matrix-toolbar .snap-matrix-search { width: 148px; }
.snap-app .snap-matrix-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--snap-line);
  border-radius: 4px;
  background: var(--snap-card2);
  color: var(--matrix-muted);
  font: 800 11px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-move button {
  appearance: none;
  height: 20px;
  min-width: 84px;
  border: 1px solid var(--snap-line);
  border-radius: 3px;
  background: var(--snap-card);
  color: var(--matrix-muted);
  cursor: pointer;
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
  padding: 0 6px;
}
.snap-app .snap-matrix-move button.active {
  background: var(--snap-gold-soft);
  border-color: var(--snap-gold);
  color: var(--snap-gold);
}
.snap-app .snap-matrix-move button.bucket-bidding {
  border-color: rgba(0,229,255,.34);
  color: var(--snap-gold);
}
.snap-app .snap-matrix-move button.bucket-yes {
  border-color: rgba(0,230,118,.38);
  color: var(--snap-green);
}
.snap-app .snap-matrix-move button.bucket-no {
  border-color: rgba(255,23,68,.42);
  color: var(--snap-red);
}
.snap-app .snap-matrix-move button.bucket-yes.active {
  background: var(--snap-green);
  border-color: var(--snap-green);
  color: #041a10;
}
.snap-app .snap-matrix-move button.bucket-no.active {
  background: var(--snap-red);
  border-color: var(--snap-red);
  color: #fff;
}
.snap-app .snap-matrix-move button.bucket-bidding.active {
  background: var(--snap-gold-soft);
  border-color: var(--snap-gold);
  color: var(--snap-gold);
}
.snap-app .snap-matrix-move button:disabled {
  opacity: .45;
  cursor: default;
}
.snap-app .snap-matrix-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--snap-gold);
}
.snap-app .snap-matrix-count {
  margin-left: auto;
  color: var(--matrix-muted);
  font: 700 11px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-stage {
  border: 1px solid var(--snap-line);
  border-top: 0;
  background: var(--matrix-bg);
  color: var(--matrix-ink);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.snap-app .snap-matrix-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  align-items: stretch;
  min-height: 360px;
}
.snap-app .snap-matrix-bucket-panel {
  display: grid;
  gap: 7px;
  padding: 8px 12px 10px;
  background: var(--snap-card);
  border-bottom: 1px solid var(--snap-line);
}
.snap-app .snap-matrix-move-row {
  display: flex;
  align-items: center;
  min-height: 30px;
}
.snap-app .snap-matrix-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: var(--matrix-muted);
  font: 800 13px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-status button {
  appearance: none;
  min-width: 138px;
  height: 26px;
  border: 1px solid var(--snap-line);
  border-radius: 6px;
  background: var(--snap-card2);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font: inherit;
}
.snap-app .snap-matrix-status button:hover {
  border-color: var(--snap-line2);
  background: rgba(0,229,255,.07);
}
.snap-app .snap-matrix-status button.bucket-bidding {
  color: var(--snap-gold);
  border-color: rgba(0,229,255,.30);
}
.snap-app .snap-matrix-status button.bucket-yes {
  color: var(--snap-green);
  border-color: rgba(0,230,118,.32);
}
.snap-app .snap-matrix-status button.bucket-no {
  color: var(--snap-red);
  border-color: rgba(255,23,68,.36);
}
.snap-app .snap-matrix-status .active {
  background: var(--snap-gold-soft);
  box-shadow: inset 0 -2px 0 var(--snap-gold);
  color: var(--snap-gold);
}
.snap-app .snap-matrix-status .bucket-yes.active {
  background: var(--snap-green-bg);
  box-shadow: inset 0 -2px 0 var(--snap-green);
  color: var(--snap-green);
}
.snap-app .snap-matrix-status .bucket-no.active {
  background: var(--snap-red-bg);
  box-shadow: inset 0 -2px 0 var(--snap-red);
  color: var(--snap-red);
}
.snap-app .snap-matrix-status span {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: inherit;
  font-size: 11px;
}
.snap-app .snap-matrix-copy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.snap-app .snap-matrix-copy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  color: var(--matrix-muted);
}
.snap-app .snap-matrix-copy-card span {
  color: inherit;
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
}
.snap-app .snap-matrix-copy-card.bucket-yes span { color: var(--snap-green); }
.snap-app .snap-matrix-copy-card.bucket-no span { color: var(--snap-red); }
.snap-app .snap-matrix-copy-card textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 34px;
  max-height: 74px;
  resize: vertical;
  border: 1px solid var(--snap-line);
  border-radius: 5px;
  background: var(--snap-card2);
  color: var(--snap-ink);
  font: 800 11px ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.35;
  padding: 7px 8px;
}
.snap-app .snap-matrix-copy-card textarea:focus {
  border-color: var(--snap-gold);
  outline: none;
}
.snap-app .snap-matrix-copy-card button {
  appearance: none;
  height: 22px;
  border: 1px solid var(--snap-line);
  border-radius: 4px;
  background: var(--snap-card2);
  color: var(--snap-gold);
  cursor: pointer;
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
  padding: 0 8px;
}
.snap-app .snap-matrix-copy-card button:hover,
.snap-app .snap-matrix-copy-card button:focus-visible {
  border-color: var(--snap-gold);
  background: var(--snap-gold-soft);
  outline: none;
}
.snap-app .snap-matrix-scroller {
  min-width: 0;
  max-height: calc(100vh - 392px);
  overflow: auto;
  background: var(--snap-card);
}
.snap-app .snap-matrix-month-row,
.snap-app .snap-matrix-date-row,
.snap-app .snap-matrix-line-row {
  display: flex;
  min-width: calc(var(--matrix-left) + (var(--matrix-days) * var(--matrix-day)));
}
.snap-app .snap-matrix-month-row {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 25px;
  background: var(--snap-card2);
}
.snap-app .snap-matrix-date-row {
  position: sticky;
  top: 25px;
  z-index: 8;
  height: 36px;
  background: var(--snap-card);
  border-bottom: 1px solid var(--matrix-line);
}
.snap-app .snap-matrix-left-spacer,
.snap-app .snap-matrix-left-head,
.snap-app .snap-matrix-row-left {
  width: var(--matrix-left);
  flex: none;
  position: sticky;
  left: 0;
  z-index: 9;
}
.snap-app .snap-matrix-left-spacer {
  background: var(--snap-card2);
  border-right: 2px solid var(--snap-line2);
}
.snap-app .snap-matrix-left-head {
  display: grid;
  grid-template-columns: 112px 42px 46px 84px 44px 36px 36px 44px;
  background: var(--snap-card2);
  border-right: 2px solid var(--snap-line2);
}
.snap-app .snap-matrix-left-head div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--matrix-line);
  color: var(--matrix-muted);
  font: 900 11px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-kss-run {
  appearance: none;
  width: calc(100% - 6px);
  height: 22px;
  border: 1px solid rgba(0,229,255,.48);
  border-radius: 5px;
  background: var(--snap-gold-soft);
  color: var(--snap-gold);
  cursor: pointer;
  font: 900 9px ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
}
.snap-app .snap-matrix-kss-run:hover,
.snap-app .snap-matrix-kss-run:focus-visible {
  border-color: var(--snap-gold);
  background: rgba(0,229,255,.18);
  outline: none;
}
.snap-app .snap-matrix-axis-grid,
.snap-app .snap-matrix-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(var(--matrix-days), var(--matrix-day));
  width: calc(var(--matrix-days) * var(--matrix-day));
  flex: none;
}
.snap-app .snap-matrix-month-cell {
  height: 25px;
  border-right: 1px solid var(--snap-line);
  color: var(--matrix-muted);
  background: var(--snap-card2);
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
  text-align: center;
  padding-top: 6px;
}
.snap-app .snap-matrix-date-cell {
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--matrix-line);
  background: var(--snap-card);
  color: var(--snap-ink2);
  line-height: 1.05;
}
.snap-app .snap-matrix-date-cell span {
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-date-cell b {
  font: 900 12px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-date-cell.weekend,
.snap-app .snap-matrix-empty-cell.weekend {
  background: var(--snap-card2);
}
.snap-app .snap-matrix-date-cell.pp-start,
.snap-app .snap-matrix-empty-cell.pp-start {
  border-left: 2px solid var(--snap-gold);
}
.snap-app .snap-matrix-date-cell.conflict,
.snap-app .snap-matrix-empty-cell.conflict {
  background: var(--matrix-red);
  color: var(--snap-red);
}
.snap-app .snap-matrix-body {
  min-width: calc(var(--matrix-left) + (var(--matrix-days) * var(--matrix-day)));
}
.snap-app .snap-matrix-line-row {
  height: var(--matrix-row);
  border-bottom: 1px solid var(--matrix-line);
}
.snap-app .snap-matrix-row-left {
  display: grid;
  grid-template-columns: 112px 42px 46px 84px 44px 36px 36px 44px;
  height: var(--matrix-row);
  background: var(--matrix-left-bg);
  border-right: 2px solid var(--snap-line2);
  color: var(--matrix-ink);
}
.snap-app .snap-matrix-line-row:hover .snap-matrix-row-left {
  background: var(--snap-card2);
}
.snap-app .snap-matrix-bucket-yes .snap-matrix-row-left {
  background: linear-gradient(90deg, var(--matrix-want-bg), var(--matrix-left-bg) 58%);
}
.snap-app .snap-matrix-bucket-no .snap-matrix-row-left {
  background: linear-gradient(90deg, var(--matrix-no-bg), var(--matrix-left-bg) 58%);
}
.snap-app .snap-matrix-row-left.selected {
  box-shadow: inset 3px 0 0 var(--snap-gold);
}
.snap-app .snap-matrix-row-left > div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--matrix-line);
  font: 800 11px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-row-left .line-action {
  width: 100%;
  height: 100%;
  border-right: 1px solid var(--matrix-line);
  background: transparent;
  color: var(--matrix-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 900 11px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-row-left .line-action:hover {
  background: var(--snap-gold-soft);
  color: var(--snap-gold);
}
.snap-app .snap-matrix-row-left .line-action.bucket-yes {
  color: var(--snap-green);
  background: var(--matrix-want-bg);
}
.snap-app .snap-matrix-row-left .line-action.bucket-no {
  color: var(--snap-red);
  background: var(--matrix-no-bg);
}
.snap-app .snap-matrix-row-left .line-action.bucket-bidding {
  color: var(--snap-gold);
  background: var(--snap-gold-soft);
}
.snap-app .snap-matrix-row-left .line-select-box {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--snap-gold);
  cursor: pointer;
}
.snap-app .snap-matrix-row-left .line-number {
  appearance: none;
  min-width: 24px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 900 11px ui-monospace, "SF Mono", Menlo, monospace;
  padding: 0 3px;
}
.snap-app .snap-matrix-row-left .line-number:hover,
.snap-app .snap-matrix-row-left .line-number:focus-visible {
  border-color: currentColor;
  background: rgba(255,255,255,.06);
  outline: none;
}
.snap-app .snap-matrix-row-left .line-order-buttons {
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.snap-app .snap-matrix-row-left .line-order {
  appearance: none;
  width: 22px;
  height: 18px;
  border: 1px solid var(--snap-line);
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
  font: 900 8px ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1;
  padding: 0;
}
.snap-app .snap-matrix-row-left .line-order:hover,
.snap-app .snap-matrix-row-left .line-order:focus-visible {
  border-color: currentColor;
  background: rgba(255,255,255,.10);
  outline: none;
}
.snap-app .snap-matrix-row-left .hold-mark {
  color: var(--snap-red);
  font-size: 18px;
  line-height: 1;
}
.snap-app .snap-matrix-row-left .hold-mark.held {
  color: var(--snap-green);
  font-size: 13px;
}
.snap-app .snap-matrix-row-left .kss-mark {
  color: var(--snap-ink);
}
.snap-app .snap-matrix-row-left .kss-mark.elevated {
  color: #ffc107;
}
.snap-app .snap-matrix-row-left .kss-mark.high {
  color: var(--snap-red);
}
.snap-app .snap-matrix-day-track {
  position: relative;
  height: var(--matrix-row);
  flex: none;
}
.snap-app .snap-matrix-placeholder-grid {
  height: var(--matrix-row);
}
.snap-app .snap-matrix-empty-cell {
  height: var(--matrix-row);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--snap-line3);
  color: rgba(255,255,255,.22);
  background: var(--snap-card);
  font: 900 9px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-trip-slot {
  position: absolute;
  top: 5px;
  height: 26px;
  z-index: 2;
}
.snap-app .snap-matrix-trip-chip {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 1px solid var(--matrix-duty-border);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(0,229,255,.20), rgba(0,229,255,.09));
  color: var(--snap-ink);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(0,229,255,.08);
  cursor: pointer;
}
.snap-app .snap-matrix-trip-chip:hover,
.snap-app .snap-matrix-trip-chip:focus-visible,
.snap-app .snap-matrix-trip-chip.selected {
  border-color: var(--snap-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,229,255,.22), 0 0 18px rgba(0,229,255,.14);
  outline: none;
}
.snap-app .snap-matrix-trip-chip::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 999px;
  flex: none;
  background: var(--snap-gold);
}
.snap-app .snap-matrix-trip-chip .chip-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snap-app .snap-matrix-trip-turn {
  justify-content: center;
  padding: 0 5px;
}
.snap-app .snap-matrix-trip-turn .chip-main {
  flex: none;
}
.snap-app .snap-matrix-trip-chip .chip-meta,
.snap-app .snap-matrix-trip-chip .chip-days {
  flex: none;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: var(--snap-ink2);
  font-size: 9px;
}
.snap-app .snap-matrix-trip-chip .prefix {
  color: var(--snap-gold);
}
.snap-app .snap-matrix-trip-chip .home {
  color: var(--snap-green);
}
.snap-app .snap-matrix-trip-chip .lo {
  color: var(--snap-gold);
}
.snap-app .snap-matrix-trip-reserve {
  background: linear-gradient(135deg, rgba(0,230,118,.18), rgba(0,230,118,.08));
  border-color: rgba(0,230,118,.55);
}
.snap-app .snap-matrix-trip-reserve::before {
  background: var(--snap-green);
}
.snap-app .snap-matrix-trip-vto {
  background: linear-gradient(135deg, rgba(0,229,255,.14), rgba(255,255,255,.05));
  border-color: rgba(0,229,255,.55);
}
.snap-app .snap-matrix-trip-layover {
  background: linear-gradient(135deg, rgba(255,193,7,.18), rgba(0,229,255,.07));
  border-color: rgba(255,193,7,.58);
}
.snap-app .snap-matrix-trip-layover::before {
  background: #ffc107;
}
.snap-app .snap-matrix-drawer {
  border-left: 1px solid var(--snap-line);
  background: linear-gradient(180deg, var(--snap-card2), var(--snap-card));
  padding: 12px;
  max-height: calc(100vh - 392px);
  overflow: auto;
}
.snap-app .snap-matrix-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.snap-app .snap-matrix-drawer-head span,
.snap-app .snap-matrix-detail-kicker {
  display: block;
  color: var(--snap-gray);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.snap-app .snap-matrix-drawer-head b {
  display: block;
  color: var(--snap-ink);
  font: 900 22px ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1;
}
.snap-app .snap-matrix-drawer-head > div:last-child {
  border: 1px solid var(--snap-line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--snap-gold);
  background: var(--snap-gold-soft);
  font: 900 10px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-drawer-head .bucket-yes {
  color: var(--snap-green);
  background: var(--snap-green-bg);
}
.snap-app .snap-matrix-drawer-head .bucket-no {
  color: var(--snap-red);
  background: var(--snap-red-bg);
}
.snap-app .snap-matrix-drawer-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.snap-app .snap-matrix-drawer-actions button {
  appearance: none;
  height: 28px;
  border: 1px solid var(--snap-line);
  border-radius: 5px;
  background: var(--snap-card);
  color: var(--snap-gray);
  cursor: pointer;
  font: 900 11px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-drawer-actions button.active {
  background: var(--snap-gold);
  border-color: var(--snap-gold);
  color: var(--snap-on-accent);
}
.snap-app .snap-matrix-drawer-actions .bucket-yes.active {
  background: var(--snap-green);
  border-color: var(--snap-green);
  color: #041a10;
}
.snap-app .snap-matrix-drawer-actions .bucket-no.active {
  background: var(--snap-red);
  border-color: var(--snap-red);
  color: #fff;
}
.snap-app .snap-matrix-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.snap-app .snap-matrix-metric,
.snap-app .snap-matrix-detail-card {
  border: 1px solid var(--snap-line);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
}
.snap-app .snap-matrix-metric {
  min-height: 48px;
  padding: 7px;
}
.snap-app .snap-matrix-metric span,
.snap-app .snap-matrix-detail-grid span {
  display: block;
  color: var(--snap-gray);
  font-size: 10px;
  font-weight: 800;
}
.snap-app .snap-matrix-metric b,
.snap-app .snap-matrix-detail-grid b {
  display: block;
  color: var(--snap-ink);
  font: 900 13px ui-monospace, "SF Mono", Menlo, monospace;
  overflow-wrap: anywhere;
}
.snap-app .snap-matrix-metric.good b {
  color: var(--snap-green);
}
.snap-app .snap-matrix-metric.warn b {
  color: #ffc107;
}
.snap-app .snap-matrix-metric.risk b {
  color: var(--snap-red);
}
.snap-app .snap-matrix-detail-card {
  padding: 10px;
  margin-bottom: 12px;
}
.snap-app .snap-matrix-detail-card.muted {
  color: var(--snap-gray);
  font-weight: 800;
}
.snap-app .snap-matrix-detail-title {
  margin: 2px 0 8px;
  color: var(--snap-ink);
  font: 900 15px ui-monospace, "SF Mono", Menlo, monospace;
}
.snap-app .snap-matrix-detail-grid {
  display: grid;
  gap: 7px;
}
.snap-app .snap-matrix-trip-list {
  display: grid;
  gap: 6px;
}
.snap-app .snap-matrix-trip-list button {
  appearance: none;
  width: 100%;
  border: 1px solid var(--snap-line);
  border-radius: 6px;
  background: var(--snap-card);
  color: var(--snap-ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
  text-align: left;
}
.snap-app .snap-matrix-trip-list button.active,
.snap-app .snap-matrix-trip-list button:hover {
  border-color: var(--snap-gold);
  background: var(--snap-gold-soft);
}
.snap-app .snap-matrix-trip-list span,
.snap-app .snap-matrix-trip-list em {
  color: var(--snap-gray);
  font: 800 10px ui-monospace, "SF Mono", Menlo, monospace;
  font-style: normal;
}
.snap-app .snap-matrix-trip-list b {
  color: var(--snap-ink);
  font: 900 11px ui-monospace, "SF Mono", Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snap-app .snap-matrix-drawer-empty {
  color: var(--snap-gray);
  font-weight: 800;
  padding: 12px 0;
}
.snap-app .snap-matrix-empty {
  padding: 34px;
  color: var(--matrix-muted);
  font-weight: 800;
}

@media (max-width: 900px) {
  .snap-app .snap-view-matrix {
    width: calc(100vw - 20px);
  }
  .snap-app .snap-matrix-toolbar {
    gap: 8px;
  }
  .snap-app .snap-matrix-count {
    width: 100%;
    margin-left: 0;
  }
  .snap-app .snap-matrix-workspace {
    grid-template-columns: 1fr;
  }
  .snap-app .snap-matrix-drawer {
    border-left: 0;
    border-top: 1px solid var(--snap-line);
    max-height: none;
  }
}
.snap-app .snap-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--snap-gray3);
  font-weight: 600;
}

/* layout helpers */
.snap-app .snap-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 18px;
  align-items: start;
}
.snap-app .snap-grid-hold {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.snap-app .snap-stack { display: flex; flex-direction: column; gap: 16px; }
.snap-app .snap-sticky { position: sticky; top: 12px; }
@media (max-width: 880px) {
  .snap-app .snap-grid-2,
  .snap-app .snap-grid-hold { grid-template-columns: 1fr; }
  .snap-app .snap-sticky { position: static; }
}

/* ---- LINE ANALYSIS ------------------------------------------------------ */
.snap-app .snap-analysis-row { min-width: 680px; }
@media (max-width: 980px) {
  .snap-app .snap-analysis-grid { grid-template-columns: 1fr !important; }
  .snap-app .snap-analysis-detail { position: static !important; }
}
@media (max-width: 760px) {
  .snap-app .snap-analysis-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .snap-app .snap-analysis-stats { grid-template-columns: 1fr !important; }
}

/* ---- FORM CONTROLS ------------------------------------------------------ */
.snap-app .snap-input,
.snap-app .snap-select {
  appearance: none;
  padding: 8px 11px;
  border: 1px solid var(--snap-line);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--snap-cream3);
  color: var(--snap-ink);
}
.snap-app .snap-input:focus,
.snap-app .snap-select:focus { border-color: var(--snap-brown2); }
.snap-app .snap-input-grow { flex: 1; min-width: 150px; }
.snap-app .snap-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--snap-ink2);
  cursor: pointer;
  user-select: none;
}
.snap-app .snap-check input { accent-color: var(--snap-brown2); width: 15px; height: 15px; }

/* ---- BUTTONS ------------------------------------------------------------ */
.snap-app .snap-btn {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid transparent;
  line-height: 1;
}
.snap-app .snap-btn:disabled { opacity: .6; cursor: default; }
.snap-app .snap-btn-brown {
  background: var(--snap-brown2);
  color: var(--snap-on-accent);
  border-color: var(--snap-brown2);
}
.snap-app .snap-btn-gold {
  background: var(--snap-gold);
  color: var(--snap-on-accent);
  border-color: var(--snap-gold);
}
.snap-app .snap-btn-outline {
  background: var(--snap-card);
  color: var(--snap-brown2);
  border-color: var(--snap-brown2);
}
.snap-app .snap-btn-ghost {
  background: var(--snap-cream3);
  color: var(--snap-brown2);
  border-color: var(--snap-line);
  font-size: 11px;
  padding: 4px 9px;
}
.snap-app .snap-btn-pill {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--snap-card);
  color: var(--snap-gray);
  border-color: var(--snap-line);
}
.snap-app .snap-btn-pill.snap-btn-pill-on {
  background: var(--snap-brown2);
  color: var(--snap-on-accent);
  border-color: var(--snap-brown2);
}

/* Fleet selector + upload affordance (header) */
.snap-app .snap-fleet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.snap-app .snap-fleet-pick {
  display: flex;
  align-items: center;
  gap: 6px;
}
.snap-app .snap-fleet-select {
  appearance: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--snap-ink);
  background: var(--snap-card);
  border: 1px solid var(--snap-line);
  border-radius: 6px;
  padding: 6px 26px 6px 10px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--snap-gray) 50%),
    linear-gradient(135deg, var(--snap-gray) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.snap-app .snap-fleet-select:focus {
  outline: none;
  border-color: var(--snap-gold);
}
.snap-app .snap-upload-btn {
  font-size: 11.5px;
  padding: 6px 11px;
}
.snap-app .snap-upload-msg {
  font-size: 11.5px;
  color: var(--snap-gray);
  line-height: 1.4;
  flex: 1 1 100%;
}
.snap-app .snap-upload-hint {
  font-style: italic;
  opacity: 0.85;
}

/* ---- METRIC GRID -------------------------------------------------------- */
.snap-app .snap-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--snap-line2);
}
.snap-app .snap-metric {
  padding: 11px 12px;
  border-right: 1px solid var(--snap-line3);
  border-bottom: 1px solid var(--snap-line3);
}
.snap-app .snap-metric-val {
  font-size: 16px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--snap-ink2);
  margin-top: 2px;
}
.snap-app .snap-metric-unit { font-size: 9px; color: var(--snap-gray3); }

/* ---- TABLES ------------------------------------------------------------- */
.snap-app .snap-table-head,
.snap-app .snap-row {
  display: grid;
  gap: 8px;
  padding: 9px 16px;
  align-items: center;
}
.snap-app .snap-table-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--snap-gray3);
  font-weight: 600;
  border-bottom: 1px solid var(--snap-line2);
  background: var(--snap-cream3);
}
.snap-app .snap-row {
  border-bottom: 1px solid var(--snap-line3);
  cursor: pointer;
}
.snap-app .snap-row:hover { background: var(--snap-cream2); }
.snap-app .snap-row-active { background: var(--snap-card2); }
.snap-app .snap-scroll {
  max-height: calc(100vh - 290px);
  overflow: auto;
}
.snap-app .snap-cell-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.snap-app .snap-cell-num { text-align: center; }
.snap-app .snap-cell-right { text-align: right; }
.snap-app .snap-th-btn {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--snap-gray3);
  font-weight: 600;
  text-align: left;
  padding: 0;
}
.snap-app .snap-th-btn:hover { color: var(--snap-brown2); }

/* ---- BADGES / TAGS ------------------------------------------------------ */
.snap-app .snap-tag {
  font-size: 9px;
  color: var(--snap-gray);
  background: var(--snap-card2);
  border-radius: 3px;
  padding: 0 5px;
}
.snap-app .snap-badge-seat {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--snap-gold);
  background: var(--snap-gold-soft);
  padding: 1px 5px;
  border-radius: 3px;
}
.snap-app .snap-badge-nb {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--snap-gold);
  background: var(--snap-gold-soft);
  padding: 1px 5px;
  border-radius: 3px;
}
.snap-app .snap-badge-jr {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--snap-green);
  background: var(--snap-green-bg);
  padding: 1px 5px;
  border-radius: 3px;
}
.snap-app .snap-pill-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.snap-app .snap-star { color: var(--snap-gold); font-weight: 700; }

/* ---- CONFLICT / CLEAR BANNERS ------------------------------------------ */
.snap-app .snap-banner {
  margin: 13px 16px 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.snap-app .snap-banner-conflict {
  background: var(--snap-red-bg);
  border: 1px solid var(--snap-red);
  color: var(--snap-red);
}
.snap-app .snap-banner-clear {
  background: var(--snap-green-bg);
  border: 1px solid var(--snap-green);
  color: var(--snap-green);
}

/* ---- TRIP CARDS --------------------------------------------------------- */
.snap-app .snap-trip-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--snap-line);
  border-radius: 7px;
  background: var(--snap-card);
}
.snap-app .snap-trip-card.snap-trip-conflict {
  border-color: var(--snap-red);
  background: var(--snap-red-bg);
}
.snap-app .snap-trip-range {
  font-size: 13px;
  font-weight: 700;
  color: var(--snap-ink);
}
.snap-app .snap-trip-sub {
  font-size: 11.5px;
  color: var(--snap-gray);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 2px;
}
.snap-app .snap-icon-btn {
  appearance: none;
  border: 1px solid var(--snap-line);
  background: var(--snap-cream3);
  color: var(--snap-brown2);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex: none;
}

/* ---- HOLD CHIPS --------------------------------------------------------- */
.snap-app .snap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.snap-app .snap-chip {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--snap-line);
  background: var(--snap-card);
  font-family: inherit;
}
.snap-app .snap-chip-line {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--snap-ink2);
}
.snap-app .snap-chip-cat { font-size: 10px; color: var(--snap-gray); }
.snap-app .snap-chip-clear { border-color: var(--snap-green); }
.snap-app .snap-chip-hit { border-color: var(--snap-red); background: var(--snap-red-bg); }

/* ---- DIRECTORY HERO ----------------------------------------------------- */
.snap-app .snap-dir-hero {
  background: var(--snap-brown);
  color: var(--snap-ink);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.snap-app .snap-dir-vru {
  font-size: 26px;
  font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--snap-ink);
  text-decoration: none;
  letter-spacing: .5px;
}

/* ---- STATE BLOCKS (loading / empty / error) ----------------------------- */
.snap-app .snap-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  text-align: center;
  color: var(--snap-gray);
  background: var(--snap-card);
  border: 1px solid var(--snap-line);
  border-radius: 8px;
}
.snap-app .snap-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--snap-gray);
}
.snap-app .snap-state-sub { font-size: 12.5px; color: var(--snap-gray3); }
.snap-app .snap-state-msg { font-size: 13px; letter-spacing: .3px; }
.snap-app .snap-error .snap-state-msg { color: var(--snap-red); font-weight: 600; max-width: 440px; }
.snap-app .snap-error-icon { font-size: 30px; }
.snap-app .snap-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--snap-line);
  border-top-color: var(--snap-brown2);
  border-radius: 50%;
  animation: snap-spin .8s linear infinite;
}
.snap-app .snap-spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ---- SCROLLBARS (scoped) ------------------------------------------------ */
.snap-app *::-webkit-scrollbar { width: 10px; height: 10px; }
.snap-app *::-webkit-scrollbar-thumb {
  background: var(--snap-gray);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.snap-app *::-webkit-scrollbar-track { background: transparent; }