/* roster.css — the roster screen. */
/* ── trips ── */
.trip{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.trip .h{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
.trip .h:hover{background:var(--raise)}
.trip .rt{font-weight:650;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trip .rt .ar{color:var(--faint);font-size:12px}
.trip .meta{margin-left:auto;text-align:right;color:var(--faint);font-size:12px;font-family:var(--mono);flex:none}
.trip .meta b{color:var(--txt)}
/* .legs opens as a drawer: the height animation and the border are in motion.css */
.leg{padding:12px 16px;border-bottom:1px solid var(--line2)}.leg:last-child{border-bottom:0}
.leg .lh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.leg .num{font-family:var(--mono);font-weight:700;color:var(--flt)}
.leg.dh .num{color:var(--dh)}
.leg .r{font-weight:600}.leg .r .ar{color:var(--faint)}
.leg .rm{margin-left:auto;color:var(--faint);font-size:12px;font-family:var(--mono)}
.rem{margin-top:8px;font-size:11px;color:var(--trn);background:rgba(255,202,74,.08);border:1px solid rgba(255,202,74,.25);border-radius:8px;padding:6px 9px;font-family:var(--mono)}
/* ── calendar ── */
.cal{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.cal .dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--raise);border-bottom:1px solid var(--line)}
.cal .dow div{padding:8px 4px;text-align:center;font-size:11px;color:var(--dim);font-weight:700;letter-spacing:.6px}
.cal .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cel{min-height:94px;min-width:0;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:5px 5px 6px;position:relative}
.cel:nth-child(7n){border-right:0}
.cel.pad{background:rgba(0,0,0,.16)}
:root[data-theme="light"] .cel.pad{background:rgba(0,0,0,.035)}
.cel.sat{background:rgba(61,155,255,.045)}
.cel .d{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--dim);margin-bottom:5px}
.cel.today .d{color:var(--acc);font-weight:700}
.cel.today{box-shadow:inset 0 0 0 1px var(--acc)}
.cel .chips{display:block}
.cel .d .dw{display:none}
.chip .mini{display:none}
/* Below ~1100px a seven-column month leaves under 100px of text per day, and
   "TLV–NRT 11.6h" stops fitting. The hours go rather than the route. */
@media(max-width:1100px){.chip .hrs{display:none}}
/* The Days/Month switch is a phone answer to a phone problem — the desktop
   grid has room for the whole route and nothing to choose between. */
.shape{display:none}
.chip{display:block;font-size:12px;font-family:var(--mono);border-radius:8px;padding:3px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;line-height:1.45}
/* One colour per meaning, so a month reads at a glance:
   amber = duty (flying, positioning, training) · blue = rest and layovers
   green = H-days and leave · red = sick · grey = plain days off. */
.chip.duty{background:rgba(255,202,74,.20);color:#ffd980;border-left:2px solid var(--trn)}
.chip.duty.dh{background:rgba(255,202,74,.10);border-left-style:dashed}
.chip.trn{background:rgba(255,202,74,.13);color:#ffd980;border-left:2px dotted var(--trn)}
.chip.rest{background:rgba(140,163,199,.18);color:#c3d2e8;border-left:2px solid var(--rest)}
/* Positioning: neither duty nor rest — the pilot is travelling, not operating. */
.chip.pos{background:rgba(169,136,255,.14);color:#c9b3ff;border-left:2px solid var(--dh)}
.chip.pos.dh{border-left-style:dashed}
.chip.hday{background:rgba(56,210,154,.20);color:#8fe3c4;border-left:2px solid var(--air)}
.chip.leave{background:rgba(56,210,154,.12);color:#8fe3c4;border-left:2px dashed var(--air)}
.chip.sick{background:rgba(255,93,108,.20);color:#ffb3ba;border-left:2px solid var(--bad)}
.chip.rsv{background:rgba(169,136,255,.18);color:#c9b3ff;border-left:2px solid var(--dh)}
.chip.off{background:rgba(255,255,255,.05);color:var(--faint)}
.chip.blank{background:transparent;color:var(--faint);border:1px dashed rgba(255,255,255,.16);opacity:.75;min-height:17px}
.chip.other{background:rgba(255,255,255,.05);color:var(--faint)}
.chip.cxl{background:rgba(255,93,108,.10);color:var(--faint);text-decoration:line-through}
:root[data-theme="light"] .chip.duty{color:#7a5300}
:root[data-theme="light"] .chip.trn{color:#7a5300}
:root[data-theme="light"] .chip.rest{color:#37496f}
:root[data-theme="light"] .chip.hday,:root[data-theme="light"] .chip.leave{color:#04613c}
:root[data-theme="light"] .chip.sick{color:#8f1622}
:root[data-theme="light"] .chip.rsv{color:#40219b}
:root[data-theme="light"] .chip.blank{border-color:rgba(0,0,0,.18)}
.legend{display:flex;flex-wrap:wrap;gap:12px;padding:11px 14px;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:11px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:block}
.legend.paylegend{margin-top:8px;border-style:dashed}
/* Idle days and paid Saturdays ride as a small tag in the cell's corner rather
   than a chip, since they overlay an existing day (a layover, a duty) instead
   of naming a new one. Green = idle credit, gold = weekend ladder — matching
   the hue every other "this earns something" chip already uses in this app.
   A flex column (not two hand-placed absolute offsets) stacks the tags when a
   layover day happens to also be a worked Saturday — the one date both clauses
   can land on at once. */
.cel .paytags{position:absolute;top:4px;right:5px;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px;pointer-events:none}
.paytag{font-family:var(--mono);font-size:10px;line-height:1.5;padding:0 5px;
  border-radius:8px;white-space:nowrap}
.paytag.idle{background:rgba(56,210,154,.20);color:#8fe3c4;border:1px solid rgba(56,210,154,.4)}
.paytag.idle.pending{background:transparent;color:var(--faint);border:1px dashed var(--faint);opacity:.85}
.paytag.wknd{background:rgba(255,202,74,.22);color:#ffd980;border:1px solid rgba(255,202,74,.45)}
.paytag.wknd.free{background:transparent;color:var(--faint);border:1px solid var(--line)}
:root[data-theme="light"] .paytag.idle{color:#04613c}
:root[data-theme="light"] .paytag.wknd{color:#7a5300}
.cel.pay-idle{background:rgba(56,210,154,.06)}
.cel.pay-wknd{background:rgba(255,202,74,.07)}
.mnav{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mnav > button{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--dim);width:34px;height:32px;cursor:pointer;font-size:15px;flex:0 0 auto}
.mnav > button:hover:not(:disabled){border-color:var(--acc);color:var(--txt)}
.mnav > button:disabled{opacity:.3;cursor:default}
.mnav .lbl{font-weight:700;font-size:17px}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.seg button{background:none;border:0;color:var(--faint);padding:7px 13px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.seg button.on{background:var(--acc);color:var(--on-acc)}
/* ── Compare mode ─────────────────────────────────────────────────────────
   Two months side by side. Crews compare figures — hours flown, POG, deadhead —
   so the numbers table is the headline and the day-by-day sits under it. */
.cmpfind{position:relative;margin:0 0 14px}
/* Comparing rosters with a colleague is a real feature and a secondary one.
   On a phone it was sitting between the month's totals and the month itself,
   which put a search box nobody opened the screen for ahead of the thing they
   did. Below the calendar on narrow screens; unchanged on a desktop, where
   there is room for both above the fold. */
@media(max-width:620px){
  #view{display:flex;flex-direction:column}
  #view > .cmpfind{order:9;margin-top:16px}
  #view > .legend{order:8}
  #view > .src{order:10}
}
.cmpfind input{width:100%;padding:12px 14px;font-size:16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--txt)}
.cmpfind input:focus{outline:none;border-color:var(--acc)}
.cmpres{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);
  background:var(--raise);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cmpres:empty{display:none}
.cmpres button{display:block;width:100%;text-align:start;background:none;border:0;
  border-bottom:1px solid var(--line2);padding:11px 14px;color:var(--txt);font-size:14px;cursor:pointer}
.cmpres button:last-child{border-bottom:0}
.cmpres button:hover{background:var(--surface)}
.cmpres small{color:var(--dim);font-weight:600}
.cmphead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.cmphead .who{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.cmphead .who small{color:var(--dim);font-weight:600;font-family:var(--mono)}
.cmphead .lo{margin-left:auto}
.sw{width:13px;height:13px;border-radius:4px;background:var(--acc);display:inline-block}
.sw.them{background:var(--dh)}
.card1{margin:16px 0 0}
.c1head{font-size:12px;color:var(--dim);margin:0 0 9px;line-height:1.5}
.c1head b{color:var(--txt);font-family:var(--mono)}
.c1sub{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--dim);margin:14px 0 7px}
.crow.big .cl{font-size:14px;color:var(--txt);font-weight:700}
.crow.big{background:var(--raise)}
.crow.big .cv{font-size:21px;font-weight:800}
.crow.big.gross{border-top:1px solid var(--line)}
.crow.big.gross .cv{font-size:19px;color:var(--txt)}
.crow.big.gross .cv.them{color:var(--dh)}
.crow.big .cl small{display:block;font-size:11px;font-weight:600;color:var(--faint);
  text-transform:none;letter-spacing:0;margin-top:2px}
.c1note{font-size:11px;color:var(--faint);line-height:1.6;margin:8px 2px 0}
.c1note b{color:var(--dim)}
.crow .cv.up{color:var(--air)}
.crow .cv.down{color:var(--bad)}
.crow .cv.them.up{color:var(--dh)}
.crow .nil{color:var(--faint);font-style:normal}
/* The table they came for. */
.cstat{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.crow{display:flex;align-items:center;border-bottom:1px solid var(--line2)}
.crow:last-child{border-bottom:0}
.crow.head{background:var(--raise)}
.crow.head .cv,.crow.head .cdlt{font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--dim);font-family:var(--sans)}
.crow .cl{flex:1 1 auto;padding:9px 14px;font-size:13px;color:var(--dim);font-weight:600}
.crow .cv{flex:0 0 88px;text-align:end;padding:9px 6px;font-family:var(--mono);
  font-size:15px;font-weight:700;color:var(--txt)}
.crow .cv small{font-size:11px;color:var(--faint);margin-inline-start:2px}
.crow .cv.them{color:var(--dh)}
.crow .cdlt{flex:0 0 76px;text-align:end;padding:9px 14px 9px 6px;font-family:var(--mono);
  font-size:14px;font-weight:800}
.cdlt.up{color:var(--air)}
.cdlt.down{color:var(--bad)}
.cdlt.same{color:var(--faint)}
.cmpsum{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 0;font-size:13px;color:var(--dim)}
.cmpsum b{font-family:var(--mono);font-size:16px;color:var(--txt);margin-inline-end:3px}
.cmpsum .tg b{color:var(--acc)}
.cmpflights{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.cmpflights span{font-size:13px;background:rgba(255,90,60,.14);color:var(--acc);
  border:1px solid rgba(255,90,60,.3);border-radius:8px;padding:5px 10px;font-family:var(--mono)}
.cmpflights small{color:var(--dim)}
/* Day against day. Each side carries a thin stripe for the day's character, so
   the month still has a readable shape, and the chips for what is actually on
   it — which is the half the colour bars alone were missing. */
.cmpgrid{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.cmprow{display:flex;align-items:stretch;border-bottom:1px solid var(--line2);min-height:34px}
.cmprow:last-child{border-bottom:0}
.cmprow .cd{flex:0 0 56px;display:flex;align-items:center;gap:6px;padding:5px 0 5px 12px;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--dim)}
.cmprow .cd .dw{font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.4px}
.cmprow .cc{flex:1 1 0;min-width:0;position:relative;padding:4px 8px 4px 13px}
.cmprow .cc.theirs{border-inline-start:1px solid var(--line2)}
.cmprow .cc .edge{position:absolute;inset-inline-start:5px;top:5px;bottom:5px;width:3px;border-radius:2px}
.cmprow .cc .none{color:var(--faint);font-family:var(--mono);font-size:13px}
.cmprow .chip{font-size:12px;padding:2px 6px;margin-bottom:2px}
.cmprow .chip .mini{display:none}
.cmprow.both-free{background:rgba(56,210,154,.07)}
.cmprow.tog{background:rgba(255,90,60,.10)}
.s-fly{background:var(--bad)}
.s-away{background:var(--flt)}
.s-duty{background:var(--trn)}
.s-free{background:var(--air);opacity:.6}
.s-none{background:rgba(255,255,255,.10)}
:root[data-theme="light"] .s-none{background:rgba(0,0,0,.10)}
@media(max-width:620px){
  .crow .cl{padding:9px 10px;font-size:12px}
  /* The headline row's 21px figures left "Above the card" three lines tall on a
     375px screen. The percentages still dominate at 18px and the label fits. */
  /* The headline rows carry the widest values, so the label needs the room back
     or "Month earns" stacks one word per line. */
  .crow.big .cv{font-size:16px;flex:0 0 76px}
  /* "₪41,853" is eight monospace characters and did not fit the 76px the
     percentages need, so the money row gets its own width and size. */
  .crow.big.gross .cv{font-size:14px;flex:0 0 84px}
  .crow.big .cl{font-size:13px;padding-inline-end:4px}
  .crow.big .cl small{font-size:10px}
  .crow .cv{flex:0 0 68px;font-size:14px}
  .crow .cdlt{flex:0 0 62px;padding-inline-end:10px;font-size:13px}
  .cmprow .cd{flex:0 0 42px;padding-inline-start:8px;font-size:13px}
  .cmprow .cd .dw{display:none}
  .cmprow .cc{padding:4px 5px 4px 11px}
  /* 375px across two columns leaves ~110px a side — the full route fits at
     three characters, not at seven, so the compact label is used here. */
  .cmprow .chip{font-size:12px;padding:2px 4px}
  .cmprow .chip .full{display:none}
  .cmprow .chip .mini{display:inline}
}
/* Ring round an aircraft whose position is a real ADS-B fix rather than an
   estimate — the two must never be indistinguishable on the map. */
.adsb{fill:none;stroke:var(--air);stroke-width:.7;opacity:.55}
/* The OP / DH / POG breakdown under the month tiles — laid out to read like the
   line AirCo365 prints, so the two screens can be compared at a glance. */
.sumline{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin:-4px 0 14px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px;color:var(--dim)}
.sumline span{display:flex;align-items:baseline;gap:5px;letter-spacing:.4px;text-transform:uppercase;font-weight:700}
.sumline b{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--txt);letter-spacing:0}
.sumline.days{margin-top:-10px}
@media(max-width:620px){.sumline{gap:7px 16px;font-size:12px}}
/* "Open their month", in a colleague's profile. */
.rosbtn{width:100%;margin:12px 0 4px;background:transparent;border:1px solid var(--line);border-radius:12px;padding:9px;font-size:13px;font-weight:700;color:var(--dim);cursor:pointer;transition:.15s}
.rosbtn:hover{border-color:var(--acc);color:var(--acc)}
/* ── Roster → Calendar: the month in bars (rosterviews.js) ── */
.mbars{margin-top:6px}
.mb-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;font-size:11px;font-weight:700;
  color:var(--faint);text-align:center;margin:0 0 5px}
.mb-dow .sat,.mb-d.sat{color:var(--trn)}
.mb-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:3px;row-gap:5px;
  background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:6px 4px 7px;margin-bottom:6px}
.mb-d{grid-row:1;font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center;line-height:22px}
/* A day with nothing on it is the date alone, quieter than a working one. */
.mb-d.quiet{color:var(--faint);opacity:.7}
.mb-d.today{color:var(--on-acc);background:var(--acc);border-radius:999px;width:24px;margin:0 auto;font-weight:700;opacity:1}
.mb-pay{font-style:normal;font-size:9px;color:var(--air);vertical-align:super;margin-inline-start:1px}
.mb-empty{grid-row:2;height:26px}
.mb-bar{grid-row:2;min-width:0;height:28px;border:0;border-radius:8px;padding:0 6px;font:inherit;font-size:11.5px;font-weight:650;
  text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--txt);
  background:transparent;border-inline-start:3px solid transparent}
/* The text sits in a span of its own so a run of airport codes can be laid
   out left to right while the bar keeps the page's direction — its coloured
   edge stays on the side the trip starts from. */
.mb-bar .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-bar.k-hday .t{text-align:center}
.mb-bar.cont{border-start-start-radius:2px;border-end-start-radius:2px;border-inline-start-width:0}
.mb-bar.more{border-start-end-radius:2px;border-end-end-radius:2px}
.mb-bar.k-fly,.mb-sw.k-fly{background:color-mix(in srgb,var(--flt) 32%,transparent);border-inline-start-color:var(--flt);font-weight:700}
.mb-bar.k-trn,.mb-sw.k-trn{background:color-mix(in srgb,var(--dh) 24%,transparent);border-inline-start-color:var(--dh)}
.mb-bar.k-away,.mb-sw.k-away{background:color-mix(in srgb,var(--dh) 14%,transparent);border-inline-start-color:color-mix(in srgb,var(--dh) 60%,transparent)}
.mb-bar.k-hday,.mb-sw.k-hday{background:color-mix(in srgb,var(--air) 14%,transparent);color:var(--dim);text-align:center;font-weight:600}
.mb-bar.k-leave,.mb-sw.k-leave{background:color-mix(in srgb,var(--air) 26%,transparent);border-inline-start-color:var(--air)}
.mb-bar.k-sick,.mb-sw.k-sick{background:color-mix(in srgb,var(--bad) 20%,transparent);border-inline-start-color:var(--bad)}
.mb-bar.k-rsv,.mb-sw.k-rsv{background:color-mix(in srgb,var(--trn) 18%,transparent);border-inline-start-color:var(--trn)}
.mb-bar.k-cxl{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--faint) 22%,transparent) 5px 7px);color:var(--dim)}
.mb-bar:active{transform:scale(.97)}
.mb-legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--dim);margin:8px 2px 0}
.mb-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
/* The days that change pay, folded under the month. */
.paydays{margin-top:12px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:10px 12px}
.paydays summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--dim)}
.paydays summary::before{content:'₪ ';color:var(--air)}
.pd-list{margin-top:8px}
.pd-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line2);font-size:13px}
.pd-d{min-width:64px;font-family:var(--mono);color:var(--dim)}
.paydays .paylegend{margin-top:8px}
/* "Swap this trip", under an open trip. */
.swapit{padding:10px 0 2px}
.swapit .rosbtn{margin:0}