:root{
    --bg:#0b0e14; --card:#111827; --card2:#0f172a; --text:#e5e7eb; --muted:#aab2c0;
    --border:#22304a; --btn:#1f2937; --btn2:#111827; --accent:#3b82f6;
    --listbg:#0f172a; --selbg:#0b1220; --selfg:var(--text); --star:#f5c542;
  }
  html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0e14;color:var(--text);}
  a{color:var(--accent);text-decoration:none}
  /* Use more of the viewport so list+details can sit closer together and details can be wider */
  .container{max-width:none;margin:0;padding:12px;}
  .topbar{background:#0b1220;border-bottom:1px solid var(--border)}
  .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin:12px 0;}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .right{margin-left:auto}
  .btn{background:var(--btn);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  /* Active sort button: tinted background + accent border so the user can
     see at a glance which sort is currently applied. Works in both light
     and dark themes via the existing --accent variable. */
  .btn.sort-active{background:color-mix(in srgb, var(--accent) 22%, var(--btn));border-color:var(--accent);color:var(--text);font-weight:650;}

  /* Scenario circle sort button */
  .btn.circle-btn{padding:6px 8px;min-width:40px;display:flex;align-items:center;justify-content:center;}
  .btn.circle-btn .circle-ico{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);display:inline-block;position:relative;box-sizing:border-box;}
  .btn.circle-btn.on .circle-ico::after{content:'';position:absolute;left:4px;top:4px;right:4px;bottom:4px;border-radius:50%;background:var(--sc-sel,#c9b7ff);}
  .btn:hover{filter:brightness(1.1)}
  .btn.disabled{opacity:0.55;pointer-events:none;filter:none}
  .btn.danger{background:#3b1b1b;border-color:#5c2424}
  .spinner{width:14px;height:14px;border:2px solid color-mix(in srgb, var(--muted) 55%, transparent);border-top-color:var(--text);border-radius:50%;display:inline-block;animation:spin 0.8s linear infinite}
  .spinner.hidden{display:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  .muted{color:var(--muted)}
  .small{font-size:12px}
  input,select{background:#0b1220;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px}
  input::placeholder{color:#7d8796}

  /* file input: hide native control, use styled label button */
  .file-input-hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  .file-name{margin-left:10px;color:var(--muted);font-size:12px}
  h1,h2,h3{margin:0 0 8px 0}

  /* Layout: list + details */
  /* Pairing list column width (narrower to reduce empty whitespace) */
  .grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:5px}
  @media (max-width: 900px) and (min-width: 701px){.grid{grid-template-columns:240px minmax(0,1fr)}}
  @media (max-width: 700px){.grid{grid-template-columns:1fr}}

  .list{
    background:var(--listbg);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:auto;
    max-height:calc(125dvh - 64px);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .details{
    background:var(--card2);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:auto;
    max-height:calc(125dvh - 64px);
    padding:10px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  body.scenario-initializing #pairing_list{visibility:hidden;}

  /* Win 1: opt-in flex layout used only when a sort is active. CSS `order:`
     reorders items visually without DOM moves, which is dramatically faster
     on iPad/Safari than N appendChild()s. When no sort is active these
     containers stay in normal block flow so the layout is byte-identical to
     the un-sorted baseline (no risk of margin/flow regressions). */
  #pairing_list[data-sorted="1"],
  #pairing_details[data-sorted="1"]{
    display:flex;
    flex-direction:column;
  }
  /* Prevent flex from shrinking items vertically; preserve intrinsic size. */
  #pairing_list[data-sorted="1"] > .pairing-item,
  #pairing_details[data-sorted="1"] > .detail-block{
    flex:0 0 auto;
  }

  .pairing-item{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    background:transparent;
    content-visibility:auto;
    contain-intrinsic-size:0 62px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .pairing-item:hover{background:#0b1220}
  .pairing-item.selected{outline:2px solid var(--accent);outline-offset:-2px;background:var(--selbg);color:var(--selfg)}
  .pairing-item .l1{font-weight:650;display:flex;align-items:center;gap:6px}
  .pairing-item .l2{color:var(--muted); font-size:12px; margin-top:2px; display:flex; align-items:center;}
  body[data-page="pairings"] .pairing-item.has-list-star, body[data-page^="sc"] .pairing-item.has-list-star{display:flex;align-items:flex-start;gap:6px}
  body[data-page="pairings"] .pairing-item.has-list-star .pairing-main, body[data-page^="sc"] .pairing-item.has-list-star .pairing-main{flex:1;min-width:0}
  body[data-page="pairings"] .pairing-item.has-list-star > .pb-star, body[data-page^="sc"] .pairing-item.has-list-star > .pb-star{width:34px;min-width:34px;height:40px;align-self:flex-start;justify-content:center;box-sizing:border-box;margin:-8px 0 0 -8px;padding:8px 0 0 0;border-radius:10px}
  .pairing-item .l2 .t-rpt{min-width:48px;}
  .pairing-item .l2 .t-cities{margin:0 10px; flex:1; white-space:nowrap;}
  .pairing-item .l2 .t-rls{min-width:48px; text-align:right;}
  .pairing-item .l3{color:var(--text); font-size:13px; margin-top:2px;} /* Credit/TAFB */

  /* Grouped view helpers */
  .pairing-item.pb-grp{position:relative}
  /* Mini calendar (grouped mode) - 40% larger + darker greens */
  .pb-mini-cal{width:224px;min-width:224px;max-width:224px;border:1px solid var(--border);border-radius:12px;background:var(--card2);padding:11px;}
  .pb-mini-cal .hdr{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;color:var(--muted);font-size:14px;margin-bottom:8px;text-align:center;}
  .pb-mini-cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
  .pb-mini-cal .cell{height:22px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);}
  .pb-mini-cal .bubble{height:22px;min-width:22px;padding:0 6px;border-radius:999px;color:#03150a;font-weight:800;line-height:22px;;display:flex;align-items:center;justify-content:center;text-align:center;}
  /* b-dark = any instance exists; b-lite = instance passes filters (only when filters are active) */
  .pb-mini-cal .b-mid{background:#169b45;}
  .pb-mini-cal .b-light{background:#8ff0b0;}
  .pb-mini-cal .b-sel{background:var(--sc-sel,#c9b7ff);color:var(--sc-sel-text,#1b1030);}
  .pb-mini-cal .b-sel-outline{background:transparent;border:2px solid var(--sc-sel,#c9b7ff);color:var(--sc-sel-text,#1b1030);line-height:18px;box-sizing:border-box;}
  html.dark .pb-mini-cal .b-sel-outline{color:#f5f7fb;}
  .pb-grp-detail-wrap{display:flex;gap:10px;align-items:flex-start;}
  .pb-grp-detail-wrap .detail-core{flex:1;min-width:0;}

  /* Scenario big calendar (3x mini calendar scale) */
  .pb-scenario-cal{border:none;border-radius:0;background:transparent;padding:0;width:100%;min-width:0;box-sizing:border-box;}
  #scenario_calendar_card{width:100%;min-width:0;box-sizing:border-box;}
  .pb-scen-cal-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
  .pb-scen-cal-title{font-weight:750;}
  .pb-scen-cal-range{color:var(--muted);font-size:13px;}
  .pb-scen-cal-hdr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;color:var(--muted);font-size:15px;margin-bottom:8px;text-align:center;}
  .pb-scen-cal-weeks{display:flex;flex-direction:column;gap:10px;}
  .pb-scen-cal-week{display:flex;flex-direction:column;gap:6px;position:relative;}
  .pb-scen-cal-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:center;position:absolute;left:0;right:0;top:28px;z-index:2;pointer-events:auto;}
  .pb-scen-cal-bar{height:14px;border-radius:999px;background:var(--sc-sel, var(--sc-bar,#7b5cff));color:#000;font-size:11px;line-height:14px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px rgba(0,0,0,0.12) inset;box-sizing:border-box;}
  .pb-scen-cal-bar-outline{background:transparent;border:2px solid var(--sc-sel, var(--sc-bar,#7b5cff));box-shadow:none;color:var(--text);}
  .pb-scen-cal-bar-vacation{background:#7ea6e0;color:#0f172a;}
  .pb-scen-cal-bar-training{background:#fecaca;color:#7f1d1d;}
  .pb-scen-cal-bar-other{background:#dbeafe;color:#1e3a8a;}
  html.dark .pb-scen-cal-bar{box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset;}
  .pb-scen-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;position:relative;z-index:1;}
  #scenario_metrics_card{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;overflow:hidden}
  .pb-scen-metric{font-size:16px;font-weight:650}
  .pb-scen-metric-k{color:var(--muted);font-weight:700;margin-right:6px}
  .pb-scen-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
  .pb-scen-action-row{display:flex;align-items:center;gap:10px}
  .pb-scen-actions .btn{display:inline-flex;align-self:flex-start;width:auto;min-width:0;padding-right:14px}
  .pb-scen-aux-pop{margin-top:16px;border:1px solid var(--border);border-radius:12px;background:var(--card2);padding:12px;display:none;width:100%;box-sizing:border-box}
  .pb-scen-aux-pop.open{display:block}
  .pb-scen-aux-title{font-weight:750;margin:0 0 10px 0}
  .pb-scen-aux-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px 0}
  .pb-scen-aux-tab{padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--btn);color:var(--text);cursor:pointer;user-select:none;font-weight:650}
  .pb-scen-aux-tab.active{background:var(--sc-sel,#c9b7ff);border-color:transparent;color:var(--sc-sel-text,#1b1030)}
  .pb-scen-aux-note{margin:0 0 10px 0;color:var(--muted);font-size:13px;display:none}
  .pb-scen-aux-note.open{display:block}
  .pb-scen-aux-extra{display:none;margin:0 0 10px 0}
  .pb-scen-aux-extra.open{display:block}
  .pb-scen-aux-credit-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .pb-scen-aux-credit-row label{font-weight:650}
  .pb-scen-aux-credit-input{width:96px;max-width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);box-sizing:border-box}
  .pb-scen-aux-cal{width:100%;min-width:0;box-sizing:border-box}
  .pb-scen-aux-cal .hdr{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;color:var(--muted);font-size:14px;margin-bottom:8px;text-align:center;}
  .pb-scen-aux-cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
  .pb-scen-aux-cal .cell{height:22px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);}
  .pb-scen-aux-cal .daybtn{height:22px;min-width:22px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text);cursor:pointer;user-select:none}
  .pb-scen-aux-cal .daybtn.sel{font-weight:800}
  .pb-scen-aux-cal .daybtn.sel-vacation{background:#7ea6e0;color:#0f172a}
  .pb-scen-aux-cal .daybtn.sel-training{background:#fecaca;color:#7f1d1d}
  .pb-scen-aux-cal .daybtn.sel-daysoff{background:#5f77b5;color:#eef2ff}
  .pb-scen-aux-cal .daybtn.sel-other{background:#dbeafe;color:#1e3a8a}
  .pb-scen-selected-list{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:4px;flex:1 1 auto;min-height:0;overflow:auto;width:100%}
  .pb-scen-selected-bubble{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--btn);color:var(--text);font-size:14px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;user-select:none}
  .pb-scen-selected-bubble.pb-state-filled{background:var(--sc-sel,#c9b7ff);border-color:transparent;color:var(--sc-sel-text,#1b1030)}
  .pb-scen-selected-bubble.pb-state-outlined{background:transparent;border:2px solid var(--sc-sel,#c9b7ff);color:var(--text)}
  html.dark .pb-scen-selected-bubble.pb-state-outlined{color:#f5f7fb}
  .pb-scen-selected-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--border);border-radius:999px;background:transparent;color:inherit;cursor:pointer;flex:0 0 auto;margin-right:8px;padding:0;line-height:1;}
.pb-scen-selected-remove:hover{background:var(--panel);}
.pb-scen-selected-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .pb-scen-drag-handle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;color:inherit;opacity:.8;cursor:grab;font-weight:700}
  .pb-scen-drag-handle:active{cursor:grabbing}
  .pb-scen-selected-bubble.pb-drag-over{box-shadow:inset 0 0 0 2px var(--sc-sel,#c9b7ff)}

  .pb-scen-cal-day{height:66px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,0.03);position:relative;}
  .pb-scen-cal-day.dayoff{background:#5f77b5;}
  .pb-scen-cal-day.out{opacity:0.55;}
  .pb-scen-cal-num{position:absolute;top:8px;left:10px;font-weight:750;color:var(--text);font-size:16px;}

  /* Star (favorites) */
  .pb-star{display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;user-select:none;}
  .pb-star.on{color:var(--star);}
  .pb-star.off{color:var(--muted);}
  .pairing-item .pb-star{font-size:16px;min-width:18px;margin-right:2px;}
  .v2title .pb-star{font-size:20px;min-width:22px;}
  .btn.pb-star-only{padding:8px 10px;min-width:34px;justify-content:center;font-size:18px;}
  .btn.pb-star-only.on{color:var(--star);}
  /* Scenario pages: selection color is shown via the filled circle icon, not the button background */

  /* Filters */
  .filter-row{
    display:grid;
    grid-template-columns:230px 1fr 90px;
    gap:10px;
    align-items:center;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:10px;
    margin-top:8px;
  }
  /* Dark mode: make selected filter state higher-contrast */
  .filter-row.active{background:#1b2e55;border-color:#335a9c}

  /* Dark mode: make native date picker icon visible */
  html.dark input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.35);opacity:0.9}
  .filter-title{cursor:pointer;font-weight:650}
  .filter-controls{display:flex;flex-direction:column;gap:6px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dow-bubbles{display:flex;flex-wrap:wrap;gap:8px}
  .dow-bubble{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--btn);color:var(--text);cursor:pointer;font:inherit;line-height:1}
  .dow-bubble.selected{background:var(--accent);border-color:var(--accent);color:#fff}
  .grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}
  .subrow{display:flex;gap:8px;flex-wrap:wrap}
  .subrow > *{flex:1 1 160px}
  #filter_summary{margin-top:8px;font-size:12px;color:var(--muted)}
  #filters_card.collapsed #filters_hdr, #filters_card.minimized #filters_hdr{display:none}
  #filters_card.collapsed #filter_summary, #filters_card.minimized #filter_summary{display:none}
  .pill{display:inline-block;padding:3px 8px;border:1px solid var(--border);border-radius:999px;margin:2px 6px 2px 0;background:#0b1220;color:var(--text)}
  .debug details{margin-top:10px}
  details.debug{background:#0b1220;border:1px solid var(--border);border-radius:10px;padding:8px}
  details.debug summary{cursor:pointer;font-weight:650;color:var(--text)}
  pre{white-space:pre-wrap;word-break:break-word;color:var(--text);margin:8px 0 0 0}

  /* Scrollbars (WebKit) */
  .list::-webkit-scrollbar,.details::-webkit-scrollbar{width:12px}
  .list::-webkit-scrollbar-track,.details::-webkit-scrollbar-track{background:#0b1220}
  .list::-webkit-scrollbar-thumb,.details::-webkit-scrollbar-thumb{background:#1f2937;border:2px solid #0b1220;border-radius:999px}


  /* Back-compat class names used in template */
  .layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:5px}
  @media (max-width: 900px) and (min-width: 701px){.layout{grid-template-columns:240px minmax(0,1fr)}}
  @media (max-width: 700px){.layout{grid-template-columns:1fr}}
  .left.card{padding:12px}
  .scrollpane{background:var(--listbg);border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:calc(125dvh - 64px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .right.card{padding:12px}
  .rightpane{background:var(--card2);border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:calc(125dvh - 64px);padding:10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .scrollpane::-webkit-scrollbar,.rightpane::-webkit-scrollbar{width:12px}
  .scrollpane::-webkit-scrollbar-track,.rightpane::-webkit-scrollbar-track{background:#0b1220}
  .scrollpane::-webkit-scrollbar-thumb,.rightpane::-webkit-scrollbar-thumb{background:#1f2937;border:2px solid #0b1220;border-radius:999px}
  html:not(.dark) .scrollpane::-webkit-scrollbar-track,html:not(.dark) .rightpane::-webkit-scrollbar-track{background:#ffffff}
  html:not(.dark) .scrollpane::-webkit-scrollbar-thumb,html:not(.dark) .rightpane::-webkit-scrollbar-thumb{background:#d1d5db;border-color:#ffffff}


  /* Light mode overrides */
  html:not(.dark){
    --bg:#f5f7fb; --card:#ffffff; --card2:#ffffff; --text:#111827; --muted:#516173;
    --border:#e5e7eb; --btn:#f3f4f6; --btn2:#ffffff; --accent:#2563eb; --listbg:#ffffff; --selbg:#e6f0ff; --selfg:var(--text);
    background:var(--bg); color:var(--text);
  }
  html:not(.dark) body{background:var(--bg);color:var(--text)}
  html:not(.dark) .topbar{background:#ffffff;border-bottom:1px solid var(--border)}
  html:not(.dark) input,html:not(.dark) select{background:#ffffff}
  html:not(.dark) .pairing-item .l2{color:#6b7280}
  html:not(.dark) .pairing-item .l3{color:#111827}
  html:not(.dark) .filter-row.active{background:#eef2ff;border-color:#c7d2fe}
  html:not(.dark) .pill{background:#f3f4f6;color:var(--text);border-color:var(--border)}
  html:not(.dark) details.debug{background:#ffffff}
  html:not(.dark) pre{color:var(--text)}
  html:not(.dark) .list::-webkit-scrollbar-track,html:not(.dark) .details::-webkit-scrollbar-track{background:#ffffff}
  html:not(.dark) .list::-webkit-scrollbar-thumb,html:not(.dark) .details::-webkit-scrollbar-thumb{background:#d1d5db;border-color:#ffffff}



  /* --- Pairing details (V2 / Format 1.2) --- */
  .v2details{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; white-space: normal; border:1px solid var(--border); background:var(--card); border-radius:12px; padding:12px; content-visibility:auto; contain-intrinsic-size:0 300px;}
  .v2title{font-size:18px; font-weight:800; margin:0 0 6px 0; color:var(--text);display:flex;align-items:center;gap:8px;}
  .v2totals{font-size:15px; font-weight:700; margin:0 0 10px 0; color:var(--accent); display:grid; grid-auto-flow:column; grid-auto-columns:max-content; column-gap:28px; align-items:baseline;}
  .v2totals .totcol{white-space:nowrap;}
  .day{border:none; background:transparent; border-radius:0; padding:0; margin:0;}
  /* Reduce vertical gap between layover and next day's first flight */
  .day + .day{margin-top:0; padding-top:0; border-top:1px solid var(--border);}
  .dayhdr{font-weight:800; background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin:-2px 0 10px 0; color:var(--text);}
  .rpt,.rls{font-size:15px; font-weight:800; color:color-mix(in srgb, var(--accent) 72%, #000); margin:6px 0;}
  /* Final-day inline RLS: keep daily totals columns unchanged, but align RLS with RPT/Trip# left edge.
     Table geometry:
       - Day column width: 34px
       - Default td padding left/right: 5px/5px
       - Layover cell (.clay) padding-left: 8px
     Offset = 34 + 5 + 5 + 8 = 52px.
  */
  td.clay{position:relative;}
  .rlsinline{position:absolute; left:0; top:50%; transform:translateY(-50%); white-space:nowrap; display:inline-block; line-height:1.2;}

  /* Fixed layout so each day table uses identical column widths.
     Keep the table from stretching when the window is maximized. */
  table.legs{width:fit-content; display:inline-table; table-layout:fixed; border-collapse:collapse; margin:0;}
  table.legs th{font-size:12px; color:var(--muted); text-align:left; padding:4px 5px; border-bottom:1px solid var(--border);}
  table.legs td{font-size:14px; color:var(--text); padding:4px 5px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);}
  table.legs tr.dh td.cnum{font-weight:inherit;}
  td.ctog, td.cblk, td.ccr{color:var(--muted); font-size:12px;}

  /* Column widths (keeps Day/Date spacing consistent across all duty periods) */
  th:nth-child(1), td.cday{width:34px}
  th:nth-child(2), td.cdate{width:64px}
  th:nth-child(3), td.cnum{width:58px}
  th:nth-child(4), td.croute{width:110px}
  th:nth-child(5), td.ctime{width:122px}
  th:nth-child(6), td.ctog{width:56px}
  th:nth-child(7), td.ccr{width:66px}
  th:nth-child(8), td.cblk{width:66px}
  th:nth-child(9), td.cduty{width:66px}
  /* Tighten Route ↔ Time spacing to match other column gaps */
  td.croute{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding-right:1px;}
  th:nth-child(4){padding-right:1px;}
  td.ctime{padding-left:1px;}
  th:nth-child(5){padding-left:1px;}
  .summary{margin-top:8px; padding-top:10px; border-top:1px solid var(--border); font-size:14px; color:var(--text);}
  .lay{margin:0; padding:4px 5px; font-size:14px; line-height:1.2; color:var(--text);}
  .layinline{display:inline-block; font-size:14px; line-height:1.2; color:var(--text);}
  .clay{padding:14px 8px; white-space:normal; overflow:visible; text-overflow:unset;}
  /* Extra vertical whitespace around layover row (user-requested: ~1.2x normal row) */
  .layrow td{padding-top:5px !important; padding-bottom:5px !important; vertical-align:middle;}
  .v2fail{border:2px solid #ef4444; background:color-mix(in srgb, #ef4444 12%, var(--card)); border-radius:12px; padding:12px;}
  .v2fail-title{font-weight:900; color:#ef4444; margin-bottom:6px;}
  .v2fail-body{color:var(--text); font-size:13px; margin-bottom:10px;}
  .rawpre{white-space:pre-wrap; background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:10px; overflow:auto; max-height:520px;}


  /* Top tabs */
  .tabsbar{position:sticky;top:0;z-index:50;background:var(--card2);border-bottom:1px solid var(--border);}
  .tabsbar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .tabs-left{display:flex;flex-wrap:wrap;gap:8px;}
  .tabs-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
  .tabs-month{font-weight:700;color:var(--text);white-space:nowrap;}
  .tabsbar .container{display:flex;gap:10px;align-items:center;padding:10px 16px;}
  .tablink{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;
           background:transparent;border:1px solid transparent;color:var(--muted);text-decoration:none;
           font-weight:600;font-size:14px;line-height:1;}
  .tablink:hover{color:var(--text);border-color:var(--border);background:rgba(255,255,255,0.02);}
  .tablink.active{color:var(--text);border-color:var(--border);background:rgba(59,130,246,0.12);}
  .save-state-btn{position:relative;padding-right:28px;}
  .save-state-check{display:none;position:absolute;right:8px;top:4px;font-size:13px;line-height:1;color:#22c55e;font-weight:900;pointer-events:none;}
  .save-state-btn.saved-clean .save-state-check{display:block;}

  /* ====================================================================
   * iPad portrait improvement (applies to desktop+tablet modes only).
   * Tightens the filter-row label column at 701-900px viewports so
   * controls aren't crammed.
   * ==================================================================== */
  body.mode-desktop .filter-row,
  body.mode-tablet  .filter-row{
    /* default desktop value already set by .filter-row above */
  }
  @media (max-width: 900px) and (min-width: 701px){
    body.mode-desktop .filter-row,
    body.mode-tablet  .filter-row{
      grid-template-columns: 180px 1fr 76px;
    }
  }

  /* ====================================================================
   * MOBILE MODE
   *
   * Single-column, page-flow layout designed for phones. Activated by
   * <body class="mode-mobile">.  All rules are scoped under body.mode-mobile
   * so desktop and tablet renderings are completely unaffected.
   *
   * Design principles:
   *   - The whole page is one document. No nested scroll containers
   *     (no max-height, no overflow:auto on .list / .details / .scrollpane
   *     / .rightpane). The page scrolls naturally.
   *   - Filters, list, details stack vertically.
   *   - Inputs are full-width (capped at 320px) and sized to prevent iOS
   *     zoom-on-focus (font-size: 16px).
   *   - Touch targets ≥ 44px.
   *   - Tabs scroll horizontally if needed.
   * ==================================================================== */

  /* --- Layout: keep list + details side by side; allow page-level horizontal scroll --- */
  /* The grid keeps its desktop column template (list + details), but the
     container/body becomes horizontally scrollable on the page level so
     the user can swipe sideways to see the details. No nested scroll
     containers — just the page itself scrolls in both directions. */
  body.mode-mobile{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Target only top-level layout grids — NOT .pb-mini-cal .grid or any
     other nested grid element that happens to use the class "grid". */
  body.mode-mobile .container > .grid,
  body.mode-mobile .container > .layout,
  body.mode-mobile .container > * > .grid,
  body.mode-mobile .container > * > .layout{
    /* Keep desktop's two-column template so list and details sit side-by-side */
    grid-template-columns: 290px minmax(640px, 1fr);
    gap: 8px;
    min-width: 940px;  /* ensures details column gets enough width to be useful */
  }
  /* Restore mini-calendar grid inside detail blocks — must not be overridden */
  body.mode-mobile .pb-mini-cal .grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    min-width: unset;
  }

  /* Filters card: match the grid width so it aligns in both portrait and landscape */
  body.mode-mobile #filters_card{
    min-width: 940px;
    box-sizing: border-box;
  }

  /* --- Remove fixed-height scroll containers; let the page flow --- */
  body.mode-mobile .list,
  body.mode-mobile .details,
  body.mode-mobile .scrollpane,
  body.mode-mobile .rightpane{
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
  }

  /* --- Container takes full width --- */
  body.mode-mobile .container{
    padding: 8px;
  }

  /* --- Cards: tighten padding, full width --- */
  body.mode-mobile .card{
    padding: 10px;
  }
  body.mode-mobile .left.card,
  body.mode-mobile .right.card{
    padding: 10px;
  }

  /* --- Filter rows: keep label / controls / reset on one row, but compact --- */
  body.mode-mobile .filter-row{
    grid-template-columns: 140px 1fr 70px;
    gap: 8px;
    padding: 8px 8px;
    align-items: start;
  }
  body.mode-mobile .filter-row .filter-label{
    font-size: 13px;
  }
  body.mode-mobile .filter-row .filter-reset{
    justify-self: end;
  }
  body.mode-mobile .filter-row .filter-reset .btn{
    padding: 6px 10px;
    min-height: 32px;
    font-size: 12px;
  }

  /* --- Filter controls: smaller so they fit beside the reset button --- */
  body.mode-mobile .filter-controls input,
  body.mode-mobile .filter-controls select,
  body.mode-mobile .filter-controls textarea{
    max-width: 100%;
    width: 100%;
    font-size: 16px;       /* still 16px to prevent iOS zoom-on-focus */
    min-height: 36px;
    box-sizing: border-box;
  }
  body.mode-mobile .filter-controls .grid2,
  body.mode-mobile .filter-controls .grid3{
    max-width: 100%;
  }

  /* --- Day-of-week bubbles: bigger touch target --- */
  body.mode-mobile .dow-bubble{
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Buttons: ensure decent touch target --- */
  body.mode-mobile .btn{
    min-height: 38px;
    font-size: 14px;
  }

  /* --- Tab bar: wrap into two rows; horizontally scroll the left tabs --- */
  body.mode-mobile .tabsbar .container{
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 6px;
  }
  body.mode-mobile .tabs-left{
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }
  body.mode-mobile .tabs-left::-webkit-scrollbar{display: none;}
  body.mode-mobile .tabs-right{
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 6px;
  }
  body.mode-mobile .tablink{
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 8px;
    white-space: nowrap;
  }
  body.mode-mobile .tabs-month{
    font-size: 12px;
    color: var(--muted);
    width: 100%;
    order: 99;
    font-weight: 500;
  }
  body.mode-mobile .tabs-right .btn{
    font-size: 13px;
    padding: 6px 10px;
  }

  /* --- Pairing list items: bigger touch target --- */
  body.mode-mobile .pairing-item{
    padding: 12px;
    min-height: 56px;
  }

  /* --- Detail blocks: roomier --- */
  body.mode-mobile .detail-block{
    padding: 8px 0;
  }

  /* --- Flight detail tables: horizontal scroll wrapper if too wide --- */
  body.mode-mobile table.legs{
    width: 100%;
    min-width: 0;
  }

  /* --- Hide elements that don't make sense on mobile --- */
  body.mode-mobile .desktop-only{display: none !important;}

  /* --- Show mobile-only elements --- */
  body:not(.mode-mobile) .mobile-only{display: none !important;}

  /* --- Scenario calendar: ensure it fits --- */
  body.mode-mobile .pb-scenario-cal{
    overflow-x: auto;
  }