/* ============================================================
   Roster — planning.css
   All colours and sizes match the spec exactly.
   No shadows, no gradients, no decorative elements.
   ============================================================ */

:root {
  /* ── Semantic text colours ── */
  --c-text-primary:   #1a1a1a;
  --c-text-secondary: #6b6b6b;

  /* ── Structural colours ── */
  --c-bg-page:        #ffffff;
  --c-bg-secondary:   #f4f4f4;
  --c-border-secondary: #d0d0d0;
  --c-border-tertiary:  #e8e8e8;

  /* ── Vol (flight operated) ── */
  --vol-bg:     #E6F1FB;
  --vol-border: #85B7EB;
  --vol-num:    #0C447C;
  --vol-text:   #185FA5;
  --vol-left:   #378ADD;   /* thick left border for suite/arrival */

  /* ── MEP (positioning) ── */
  --mep-bg:     #EEEDFE;
  --mep-border: #AFA9EC;
  --mep-num:    #3C3489;
  --mep-text:   #534AB7;
  --mep-left:   #7F77DD;

  /* ── Escale (layover) ── */
  --escale-bg:     #dceef9;
  --escale-border: #85B7EB;   /* same as vol */

  /* ── Repos (rest) ── */
  --repos-bg:     #EAF3DE;
  --repos-border: #97C459;
  --repos-text:   #3B6D11;

  /* ── Congé (leave) ── */
  --conge-bg:     #C0DD97;
  --conge-border: #639922;
  --conge-text:   #27500A;

  /* ── Sol (ground activity) ── */
  --sol-bg:     #FAECE7;
  --sol-border: #F0997B;
  --sol-num:    #712B13;
  --sol-text:   #993C1D;
  --sol-left:   #D85A30;   /* thick left border for suite CCO */

  /* ── Tz offset capsule colours ── */
  --tz-pos-bg: #5DCAA5;   /* positive offset (Athens +1h) */
  --tz-neg-bg: #888780;   /* negative offset (New York −6h) */
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  background: var(--c-bg-page);
  color: var(--c-text-primary);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

/* ============================================================
   HEADER
   ============================================================ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 0.75rem;
}

.pilot-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-text-primary);
  line-height: 1.2;
}

.pilot-subtitle {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-top: 3px;
}

.month-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-secondary);
}

.header-sep {
  border: none;
  border-top: 1px solid var(--c-border-tertiary);
  margin: 0 0 1rem;
}

/* ============================================================
   MONTH NAVIGATION
   ============================================================ */

.month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.month-nav a {
  font-size: 12px;
  color: var(--c-text-secondary);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--c-border-secondary);
  border-radius: 4px;
}

.month-nav a:hover { background: var(--c-bg-secondary); }

/* ============================================================
   LEGEND
   ============================================================ */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--c-text-secondary);
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-swatch.vol     { background: #B5D4F4; border: 0.5px solid #85B7EB; }
.legend-swatch.mep     { background: #AFA9EC; border: 0.5px solid #7F77DD; }
.legend-swatch.escale  { background: #dceef9; border: 0.5px solid #85B7EB; }
.legend-swatch.repos   { background: #EAF3DE; border: 0.5px solid #97C459; }
.legend-swatch.conge   { background: #C0DD97; border: 0.5px solid #639922; }
.legend-swatch.sol     { background: #F5C4B3; border: 0.5px solid #F0997B; }

/* ============================================================
   METRICS
   ============================================================ */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.metric-card {
  background: var(--c-bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
}

.metric-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--c-text-primary);
  line-height: 1;
}

.metric-label {
  font-size: 10px;
  color: var(--c-text-secondary);
  margin-top: 4px;
}

/* ============================================================
   SECTION TITLE
   ============================================================ */

.section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ============================================================
   CALENDAR GRID
   ============================================================ */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-weekday {
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-secondary);
  text-align: center;
  padding-bottom: 5px;
}

/* ── Base cell ── */
.cal-cell {
  border-radius: 5px;
  padding: 4px 4px 3px;
  min-height: 56px;
  overflow: hidden;
}

.cal-cell-placeholder {
  min-height: 56px;
}

/* ── Day number ── */
.cal-day-num {
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 2px;
}

/* ── Pill text lines ── */
.cal-pill {
  font-size: 8px;
  display: block;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-pill.small  { font-size: 7.5px; }
.cal-pill.italic { font-style: italic; }
.cal-pill.dim    { opacity: 0.55; }

/* ── Micro-tag (MEP, suite nuit, suite CCO, escale, arrivée +1) ── */
.micro-tag {
  display: inline-block;
  font-size: 7px;
  font-weight: 500;
  color: #fff;
  border-radius: 2px;
  padding: 0px 3px;
  margin-right: 3px;
  vertical-align: middle;
  line-height: 1.6;
}
.micro-tag.mep          { background: #7F77DD; }
.micro-tag.suite_bleu   { background: #378ADD; }
.micro-tag.suite_orange { background: #D85A30; }
.micro-tag.escale       { background: #185FA5; }
.micro-tag.arrivee      { background: #378ADD; }

/* ── Cell types ── */

.cal-cell.vol {
  background: var(--vol-bg);
  border: 0.5px solid var(--vol-border);
}
.cal-cell.vol .cal-day-num { color: var(--vol-num); }
.cal-cell.vol .cal-pill    { color: var(--vol-text); }

.cal-cell.vol_mep {
  background: var(--vol-bg);
  border: 0.5px solid var(--vol-border);
}
.cal-cell.vol_mep .cal-day-num { color: var(--vol-num); }
.cal-cell.vol_mep .cal-pill    { color: var(--vol-text); }

.cal-cell.mep_pure {
  background: var(--mep-bg);
  border: 0.5px solid var(--mep-border);
}
.cal-cell.mep_pure .cal-day-num { color: var(--mep-num); }
.cal-cell.mep_pure .cal-pill    { color: var(--mep-text); }

.cal-cell.repos {
  background: var(--repos-bg);
  border: 0.5px solid var(--repos-border);
}
.cal-cell.repos .cal-day-num { color: var(--repos-text); }
.cal-cell.repos .cal-pill    { color: var(--repos-text); }

.cal-cell.conge {
  background: var(--conge-bg);
  border: 0.5px solid var(--conge-border);
}
.cal-cell.conge .cal-day-num { color: var(--conge-text); }
.cal-cell.conge .cal-pill    { color: var(--conge-text); }

.cal-cell.sol {
  background: var(--sol-bg);
  border: 0.5px solid var(--sol-border);
}
.cal-cell.sol .cal-day-num { color: var(--sol-num); }
.cal-cell.sol .cal-pill    { color: var(--sol-text); }

.cal-cell.escale {
  background: var(--escale-bg);
  border: 0.5px solid var(--escale-border);
}
.cal-cell.escale .cal-day-num { color: var(--vol-num); }
.cal-cell.escale .cal-pill    { color: var(--vol-text); }

/* Suite vol nocturne + arrivée J+1: vol colours + thick left border */
.cal-cell.suite_vol,
.cal-cell.arrivee_j1 {
  background: var(--vol-bg);
  border: 0.5px solid var(--vol-border);
  border-left: 3px solid var(--vol-left);
}
.cal-cell.suite_vol .cal-day-num,
.cal-cell.arrivee_j1 .cal-day-num { color: var(--vol-num); }
.cal-cell.suite_vol .cal-pill,
.cal-cell.arrivee_j1 .cal-pill    { color: var(--vol-text); }

/* Suite sol nocturne: sol colours + thick left border */
.cal-cell.suite_sol {
  background: var(--sol-bg);
  border: 0.5px solid var(--sol-border);
  border-left: 3px solid var(--sol-left);
}
.cal-cell.suite_sol .cal-day-num { color: var(--sol-num); }
.cal-cell.suite_sol .cal-pill    { color: var(--sol-text); }

.cal-cell.empty {
  background: transparent;
  border: 0.5px solid var(--c-border-tertiary);
}
.cal-cell.empty .cal-day-num { color: var(--c-text-secondary); }

/* ============================================================
   SECTION SEPARATOR
   ============================================================ */

.section-sep {
  border: none;
  border-top: 1px solid var(--c-border-tertiary);
  margin: 1.5rem 0;
}

/* ============================================================
   DETAIL TABLE
   ============================================================ */

.detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.detail-table col.col-date     { width: 58px; }
.detail-table col.col-type     { width: 78px; }
.detail-table col.col-activity { width: auto; }

/* ── Header row ── */
.detail-table thead th {
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-secondary);
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--c-border-secondary);
}

/* ── Body rows ── */
.detail-table tbody tr {
  border-bottom: 0.5px solid var(--c-border-tertiary);
}
.detail-table tbody tr:last-child { border-bottom: none; }
.detail-table tbody tr:hover { background: var(--c-bg-secondary); }

/* Continuation row tinting */
.detail-table tbody tr.continuation-vol { background: rgba(230, 241, 251, 0.4); }
.detail-table tbody tr.continuation-sol { background: rgba(250, 236, 231, 0.4); }
.detail-table tbody tr.continuation-vol:hover,
.detail-table tbody tr.continuation-sol:hover { background: var(--c-bg-secondary); }

/* ── Date cell ── */
td.td-date {
  padding: 6px 8px;
  vertical-align: top;
  white-space: nowrap;
}

.date-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-primary);
  display: block;
  line-height: 1.2;
}
.date-num.continuation { font-size: 11px; color: var(--c-text-secondary); font-weight: 400; }

.date-wd {
  font-size: 10px;
  color: var(--c-text-secondary);
  display: block;
}

/* ── Type badge ── */
td.td-type {
  padding: 6px 8px;
  vertical-align: top;
}

.badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.badge.vol    { background: #B5D4F4; color: #0C447C; }
.badge.mep    { background: #AFA9EC; color: #3C3489; }
.badge.repos  { background: #C0DD97; color: #27500A; }
.badge.conge  { background: #97C459; color: #27500A; }
.badge.sol    { background: #F5C4B3; color: #712B13; }
.badge.escale { background: #B5D4F4; color: #0C447C; }
.badge.empty  { background: var(--c-bg-secondary); color: var(--c-text-secondary); }

.badge.continuation { opacity: 0.6; }

/* ── Activity cell ── */
td.td-activity {
  padding: 4px 8px 4px 0;
  vertical-align: top;
}

.activity-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
  align-items: flex-start;
}

/* ── Flight block (vol) ── */
.flight-block {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 4px;
  padding: 4px 8px 4px 6px;
  background: var(--vol-bg);
  border-left: 2px solid var(--vol-left);
}

.flight-block.mep-block {
  background: var(--mep-bg);
  border-left-color: var(--mep-left);
}

.flight-num {
  font-size: 10px;
  font-weight: 500;
  color: var(--vol-num);
  white-space: nowrap;
}
.mep-block .flight-num { color: var(--mep-num); }

.flight-sep {
  width: 1px;
  height: 12px;
  background: var(--vol-border);
  margin: 0 6px;
  flex-shrink: 0;
}
.mep-block .flight-sep { background: var(--mep-border); }

.flight-route {
  font-size: 10px;
  color: var(--vol-text);
  white-space: nowrap;
}
.mep-block .flight-route { color: var(--mep-text); }

/* ── Time block inside flight block ── */
.time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.time-paris {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--vol-num);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mep-block .time-paris { color: var(--mep-num); }

.time-local {
  font-size: 9px;
  color: #5F5E5A;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* +1 next-day tag inside time block */
.tag-nextday {
  font-size: 9px;
  font-weight: 500;
  background: var(--vol-left);
  color: #fff;
  border-radius: 2px;
  padding: 0 3px;
  line-height: 1.5;
}

/* passager tag for MEP */
.tag-passenger {
  font-size: 8px;
  font-weight: 500;
  background: var(--mep-left);
  color: #fff;
  border-radius: 2px;
  padding: 0 3px;
  line-height: 1.5;
}

/* tz offset capsule */
.tz-capsule {
  display: inline-block;
  font-size: 8px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1.4;
}
.tz-capsule.pos { background: var(--tz-pos-bg); }
.tz-capsule.neg { background: var(--tz-neg-bg); }

/* ── Escale block ── */
.escale-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--escale-bg);
  border-radius: 4px;
  border-left: 2px solid #185FA5;
  padding: 4px 8px 4px 6px;
}
.escale-city {
  font-size: 10px;
  font-weight: 500;
  color: var(--vol-num);
}
.escale-hotel {
  font-size: 10px;
  color: var(--vol-num);
  opacity: 0.7;
}

/* ── Sol (ground activity) block ── */
.sol-block {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--sol-bg);
  border-radius: 4px;
  border-left: 2px solid var(--sol-left);
  padding: 4px 8px 4px 6px;
}
.sol-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--sol-num);
  white-space: nowrap;
}
.sol-detail {
  font-size: 10px;
  color: var(--sol-num);
  opacity: 0.75;
  white-space: nowrap;
}
.tag-overnight {
  font-size: 9px;
  font-weight: 500;
  background: var(--sol-left);
  color: #fff;
  border-radius: 2px;
  padding: 0 3px;
  line-height: 1.5;
  align-self: center;
}

/* ── Repos / congé text ── */
.rest-text {
  font-size: 10px;
  color: var(--c-text-secondary);
  padding: 6px 0;
}

/* ── Arrival J+1 block ── */
.arrival-block {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--vol-bg);
  border-radius: 4px;
  border-left: 2px solid var(--vol-left);
  padding: 4px 8px 4px 6px;
}
.arrival-city {
  font-size: 10px;
  color: var(--vol-text);
}
.arrival-time {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--vol-num);
}
.arrival-flight {
  font-size: 9px;
  font-style: italic;
  color: var(--vol-text);
}

/* ── Continuation text (italic, below main block) ── */
.continuation-text {
  font-size: 9.5px;
  font-style: italic;
  color: var(--vol-text);
  padding: 3px 0 2px;
  display: block;
}
.continuation-text.sol { color: var(--sol-text); }