:root {
      /* This app is dark-mode only — declare it globally so every native control
         (selects + their dropdowns, scrollbars, date pickers, form fields) renders
         dark across browsers. Do not add a light theme. */
      color-scheme: dark;
      --bg: #0a0c10;
      --surface: #111318;
      --surface2: #181c23;
      --border: rgba(255, 255, 255, 0.07);
      --accent: #3b82f6;
      --accent2: #22d3ee;
      --accent3: #a78bfa;
      --accent4: #f59e0b;
      --text: #e8eaf0;
      --muted: #aab9d8;
      --muted2: #6b7280;
      --green: #10b981;
      --red: #ef4444;
      --orange: #f97316;
      --mono: 'Space Mono', monospace;
      --sans: 'DM Sans', sans-serif;
      --sidebar-w: 248px;
    }

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

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 14px;
      min-height: 100vh;
      line-height: 1.6;
      overflow-x: hidden;
      padding-left: var(--sidebar-w);
    }

    body.access-loading nav,
    body.access-loading .mobile-menu-btn,
    body.access-loading .mobile-page-title,
    body.access-loading .mobile-nav-scrim,
    body.access-loading .header-club-switcher,
    body.access-loading .page {
      visibility: hidden;
      pointer-events: none;
    }

    body.modal-scroll-locked {
      overflow: hidden;
      width: 100%;
      touch-action: none;
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 100;
      background: rgba(10, 12, 16, 0.92);
      backdrop-filter: blur(16px);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
      padding: 20px 16px;
      width: var(--sidebar-w);
      height: 100vh;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--accent2);
      letter-spacing: .05em;
      margin: 0 0 4px;
      white-space: nowrap;
    }

    .nav-logo-icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      object-fit: contain;
    }

    .nav-logo span {
      color: var(--muted);
    }

    .nav-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;
    }

    /* Finance-only accounts: surface finance-relevant pages right after the dashboard.
       Order = Dashboard, Finances, Students, Instructors, Aircraft, then the rest
       (everything else keeps its default order: 0, in original DOM order). */
    body.is-finance-only .nav-links .nav-btn[onclick*="showPage('dashboard'"] { order: -5; }
    body.is-finance-only .nav-links .nav-btn[onclick*="showPage('finances'"] { order: -4; }
    body.is-finance-only .nav-links .nav-btn[onclick*="showPage('students'"] { order: -3; }
    body.is-finance-only .nav-links .nav-btn[onclick*="showPage('instructors'"] { order: -2; }
    body.is-finance-only .nav-links .nav-btn[onclick*="showPage('aircraft'"] { order: -1; }

    .nav-btn {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: var(--fin-gap);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      padding: 10px 12px;
      border-radius: 6px;
      transition: all .15s;
      text-align: left;
      width: 100%;
    }

    .nav-icon {
      display: inline-grid;
      place-items: center;
      width: 22px;
      min-width: 22px;
      height: 22px;
      font-size: 15px;
      line-height: 1;
    }

    .nav-icon svg {
      width: 18x;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav-icon svg.dispatch-svg,
    .nav-icon svg.wxtest-svg {
      fill: currentColor;
      stroke: none;
    }

    .nav-icon img,
    .dispatch-nav-icon {
      width: 19px;
      height: 19px;
      display: block;
      object-fit: contain;
    }

    .dispatch-nav-icon {
      background: currentColor;
      -webkit-mask: url('../icons/Dispatch.svg') center / contain no-repeat;
      mask: url('../icons/Dispatch.svg') center / contain no-repeat;
    }

    .nav-svg-icon {
      width: 20px;
      height: 20px;
      display: block;
      flex: 0 0 20px;
      object-fit: contain;
      filter: invert(44%) sepia(10%) saturate(629%) hue-rotate(179deg) brightness(91%) contrast(85%);
      opacity: 1;
    }

    .nav-btn:hover .nav-svg-icon,
    .nav-btn.active .nav-svg-icon,
    .mobile-page-title .nav-svg-icon {
      filter: invert(93%) sepia(6%) saturate(270%) hue-rotate(192deg) brightness(101%) contrast(92%);
    }

    .mobile-menu-btn,
    .mobile-page-title,
    .mobile-nav-scrim {
      display: none;
    }

    .club-access-banner {
      position: fixed;
      top: 14px;
      left: calc(var(--sidebar-w) + 16px);
      right: 16px;
      z-index: 140;
      display: none;
      border: 1px solid rgba(245, 158, 11, .35);
      border-radius: 8px;
      background: rgba(24, 28, 35, .96);
      color: var(--text);
      padding: 10px 14px;
      box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
      font-size: 13px;
    }

    .club-access-banner.show {
      display: block;
    }

    .header-club-switcher {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 125;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 56px;
      border-bottom: 1px solid var(--border);
      background: rgba(10, 12, 16, .94);
      padding: 8px 16px;
      backdrop-filter: blur(16px);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
    }

    .header-club-switcher.show {
      display: flex;
    }

    .header-club-label {
      color: var(--accent2);
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .header-club-switcher .club-select {
      width: min(420px, 46vw);
      height: 34px;
      padding: 5px 32px 5px 10px;
      font-size: 12px;
      background: var(--surface2);
    }

    body.header-club-switcher-visible nav {
      padding-top: 76px;
    }

    body.header-club-switcher-visible .page {
      padding-top: 88px;
    }

    body.header-club-switcher-visible .club-access-banner {
      top: 70px;
    }

    .mobile-menu-btn {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 130;
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(17, 19, 24, .92);
      color: var(--text);
      backdrop-filter: blur(16px);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    }

    body.header-club-switcher-visible > .mobile-menu-btn {
      display: none;
    }

    .mobile-menu-btn span {
      position: absolute;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform .18s ease, opacity .18s ease;
    }

    .mobile-menu-btn span:nth-child(1) {
      transform: translateY(-6px);
    }

    .mobile-menu-btn span:nth-child(3) {
      transform: translateY(6px);
    }

    .header-club-switcher .mobile-menu-btn {
      position: relative;
      top: auto;
      left: auto;
      z-index: 1;
      flex: 0 0 42px;
      box-shadow: none;
    }

    .mobile-page-title {
      position: absolute;
      top: 18px;
      left: 72px;
      right: 72px;
      z-index: 95;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .1em;
      text-align: center;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
    }

    .mobile-page-title .nav-icon {
      width: 24px;
      min-width: 24px;
      height: 24px;
      font-size: 18px;
      letter-spacing: 0;
    }

    .mobile-page-title .nav-icon svg {
      width: 22px;
      height: 22px;
    }

    .mobile-page-title .nav-icon img,
    .mobile-page-title .dispatch-nav-icon {
      width: 22px;
      height: 22px;
    }

    body.mobile-nav-open .mobile-menu-btn span:nth-child(1) {
      transform: rotate(45deg);
    }

    body.mobile-nav-open .mobile-menu-btn span:nth-child(2) {
      opacity: 0;
    }

    body.mobile-nav-open .mobile-menu-btn span:nth-child(3) {
      transform: rotate(-45deg);
    }

    .nav-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-btn:hover {
      color: var(--text);
      background: rgba(255, 255, 255, .05);
    }

    .nav-btn.active {
      color: var(--accent);
      background: rgba(59, 130, 246, .15);
    }

    .nav-stat {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 12px;
      border-top: 1px solid var(--border);
    }

    .nav-stat-val {
      color: var(--green);
    }

    .auth-shell {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(10, 12, 16, .96);
      backdrop-filter: blur(14px);
    }

    .auth-shell.open {
      display: flex;
    }

    .auth-card {
      width: min(420px, 100%);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
    }

    .auth-title {
      font-family: var(--mono);
      font-size: 18px;
      color: var(--text);
      margin-bottom: 6px;
    }

    .auth-subtitle {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 18px;
    }

    .auth-form {
      display: grid;
      gap: 10px;
    }

    .auth-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 6px;
    }

    .auth-message {
      min-height: 18px;
      font-size: 12px;
      color: var(--muted);
      margin-top: 12px;
    }

    .account-pill {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      gap: 8px;
      margin: -10px 0 0;
      min-width: 0;
    }

    .account-email {
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
    }

    .club-select {
      width: 100%;
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 10px;
      padding: 6px 8px;
      outline: none;
    }

    .club-select:focus {
      border-color: rgba(59, 130, 246, .45);
    }

    .sync-badge {
      border: 1px solid rgba(34, 211, 238, .28);
      border-radius: 999px;
      padding: 3px 8px;
      color: var(--accent2);
      font-family: var(--mono);
      font-size: 10px;
      white-space: nowrap;
    }

    .page {
      display: none;
      padding: 32px;
      max-width: 1300px;
      margin: 0 auto;
    }

    .page.active {
      display: block;
    }

    #page-dashboard.dashboard-admin-mode {
      max-width: 100%;
    }

    .admin-dash-top-row {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;
    }

    .admin-dash-today-box,
    .admin-dash-progress-box {
      height: 50vh;
      display: flex;
      flex-direction: column;
    }

    .admin-dash-today-box {
      width: 70%;
    }

    .admin-dash-progress-box {
      width: 30%;
    }

    @media(max-width:768px) {
      .admin-dash-top-row {
        flex-direction: column;
      }

      .admin-dash-today-box,
      .admin-dash-progress-box {
        width: 100%;
        height: 360px;
      }
    }

    .section-header {
      display: flex;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 24px;
    }

    /* Nested title+value wrappers use the same gap as the header (the inline
       gap was removed from the markup); mobile narrows it below. Control groups
       keep their own inline gap, which overrides this. */
    .section-header div {
      gap: 16px;
    }

    .section-title {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .section-title::before {
      content: '//';
      margin-right: 8px;
      color: var(--accent);
    }

    .section-value {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.02em;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 32px;
    }

    .stats-grid.featured {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: 12px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 20px 16px;
      position: relative;
      overflow: hidden;
      transition: border-color .2s, transform .15s;
    }

    .stat-card:hover {
      border-color: rgba(255, 255, 255, .14);
      transform: translateY(-1px);
    }

    .stat-card.action {
      cursor: pointer;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--c, var(--accent));
    }

    .stat-label {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
      font-weight: 500;
    }

    .stat-val {
      font-family: var(--mono);
      font-size: 26px;
      font-weight: 700;
      color: var(--text);
      line-height: 1;
    }

    .stat-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 6px;
    }

    .currency-stat-icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      vertical-align: -2px;
      filter: invert(55%);
    }

    .charts-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      margin-bottom: 32px;
    }

    .charts-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 32px;
    }

    .chart-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      min-width: 0;
    }

    .profile-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      min-width: 0;
      grid-column: 1/-1;
    }

    .chart-card.full {
      grid-column: 1/-1;
    }

    .club-row {
      background: rgba(255, 255, 255, .025);
      transition: background .15s;
    }

    .club-row:hover {
      background: rgba(255, 255, 255, .05);
    }

    .dashboard-loading-panel {
      display: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 22px;
      margin-bottom: 18px;
    }

    .dashboard-loading-title {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--text);
      margin-bottom: 12px;
    }

    .dashboard-loading-lines {
      display: grid;
      gap: 8px;
    }

    .dashboard-loading-line {
      height: 11px;
      width: min(420px, 100%);
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05));
      background-size: 220% 100%;
      animation: dashboardLoadingSweep 1.25s ease-in-out infinite;
    }

    .dashboard-loading-line:nth-child(2) {
      width: min(320px, 86%);
      animation-delay: .12s;
    }

    .dashboard-loading-line:nth-child(3) {
      width: min(240px, 70%);
      animation-delay: .24s;
    }

    @keyframes dashboardLoadingSweep {
      0% { background-position: 120% 0; }
      100% { background-position: -120% 0; }
    }

    #page-dashboard.dashboard-loading .dashboard-loading-panel {
      display: block;
    }

    #page-dashboard.dashboard-loading .dashboard-content {
      opacity: 0;
      pointer-events: none;
      max-height: 0;
      overflow: hidden;
    }

    #page-dashboard.dashboard-ready .dashboard-content {
      opacity: 1;
      transition: opacity .22s ease;
    }

    .chart-title {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }

    .aci-item-title {
      font-size: 11px;
    }

    .aci-sub-title {
      font-size: 10px;
    }

    .aci-mnb-icon {
      width: 15px;
      height: 14px;
      display: block;
      filter: invert(1);
    }

    .aci-station-type-view {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .aci-station-type-select {
      position: relative;
      flex: 0 0 auto;
    }

    .aci-station-type-trigger {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
    }

    .aci-station-type-trigger:hover {
      border-color: currentColor;
    }

    .aci-station-type-trigger.unset {
      border-style: dashed;
      opacity: .5;
    }

    .aci-station-type-menu {
      display: none;
      position: absolute;
      z-index: 1000;
      top: calc(100% + 6px);
      left: 0;
      min-width: 160px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #10131a;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
      flex-direction: column;
      gap: 4px;
    }

    .aci-station-type-select.open .aci-station-type-menu {
      display: flex;
    }

    .aci-station-type-option {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      text-align: left;
      padding: 6px 8px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text);
      font-family: var(--sans);
      font-size: 12px;
      opacity: .75;
      cursor: pointer;
    }

    .aci-station-type-option:hover,
    .aci-station-type-option.active {
      opacity: 1;
      background: rgba(255, 255, 255, .06);
    }

    .profile-card-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 20px;
    }

    .profile-card-title-row .chart-title {
      margin-bottom: 0;
    }

    .expiry-badge {
      display: none;
      border: 1px solid rgba(16, 185, 129, .32);
      border-radius: 999px;
      padding: 3px 8px;
      color: var(--green);
      background: rgba(16, 185, 129, .08);
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .expiry-badge.show {
      display: inline-flex;
    }

    .expiry-badge.warn {
      border-color: rgba(245, 158, 11, .38);
      color: var(--accent4);
      background: rgba(245, 158, 11, .1);
    }

    .expiry-badge.expired {
      border-color: rgba(239, 68, 68, .4);
      color: var(--red);
      background: rgba(239, 68, 68, .1);
    }

    .chart-wrap {
      position: relative;
      height: 220px;
      min-width: 0;
      width: 100%;
      overflow: hidden;
    }

    .chart-wrap canvas {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }

    .chart-wrap.donut {
      height: clamp(190px, 26vw, 240px);
    }

    .chart-wrap.tall {
      height: 300px;
    }

    .progress-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 32px;
    }

    .progress-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
    }

    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 10px;
    }

    .progress-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }

    .progress-nums {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
    }

    .progress-nums span {
      color: var(--text);
    }

    .progress-track {
      height: 6px;
      background: rgba(255, 255, 255, .06);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 6px;
    }

    .progress-fill {
      height: 100%;
      border-radius: 99px;
      background: var(--c, var(--accent));
      transition: width 1s cubic-bezier(.4, 0, .2, 1);
    }

    .progress-fill.over {
      background: var(--green);
    }

    .progress-status {
      font-size: 10px;
      color: var(--muted);
    }

    .progress-status.ok {
      color: var(--green);
    }

    .progress-status.warn {
      color: var(--orange);
    }

    .progress-sub {
      margin-top: 6px;
      padding-left: 8px;
      border-left: 2px solid rgba(255, 255, 255, 0.1);
    }

    .progress-sub.progress-label {
      font-size: 0.8em;
      opacity: 0.8;
    }

    .progress-sub.progress-nums {
      font-size: 0.8em;
      opacity: 0.8;
    }

    .table-controls {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      align-items: center;
    }

    .search-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 14px;
      color: var(--text);
      font-family: var(--sans);
      font-size: 13px;
      outline: none;
      flex: 1;
      min-width: 200px;
      transition: border-color .15s;
    }

    .search-box::placeholder {
      color: var(--muted2);
    }

    .search-box:focus {
      border-color: rgba(59, 130, 246, .4);
    }

    .fin-date-range-popover {
      position: fixed;
      z-index: 4000;
      width: min(380px, calc(100vw - 24px));
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
      color: var(--text);
      font-family: var(--sans);
      overflow: hidden;
    }

    .fin-date-range-shell {
      display: grid;
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .fin-date-range-presets {
      border-bottom: 1px solid var(--border);
      padding: 8px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      overflow-x: auto;
    }

    .fin-date-range-preset {
      border: 0;
      background: transparent;
      color: var(--muted);
      text-align: left;
      padding: 8px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-family: var(--sans);
      font-size: 12px;
      white-space: nowrap;
    }

    .fin-date-range-preset:hover {
      background: rgba(59, 130, 246, .14);
      color: var(--text);
    }

    .fin-date-range-main {
      padding: 12px;
    }

    .fin-date-range-calendars {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .fin-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }

    .fin-cal-nav {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 6px;
      width: 28px;
      height: 28px;
      cursor: pointer;
    }

    .fin-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 2px;
    }

    .fin-cal-dow,
    .fin-cal-day {
      height: 30px;
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 10px;
    }

    .fin-cal-dow {
      color: var(--muted);
    }

    .fin-cal-day {
      border: 0;
      background: transparent;
      color: var(--text);
      border-radius: 999px;
      cursor: pointer;
    }

    .fin-cal-day:hover {
      background: rgba(59, 130, 246, .18);
    }

    .fin-cal-day.out {
      color: rgba(107, 114, 128, .55);
    }

    .fin-cal-day.in-range {
      background: rgba(59, 130, 246, .16);
      border-radius: 3px;
    }

    .fin-cal-day.selected {
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
    }

    .fin-date-range-actions {
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 12px;
    }

    .exercise-time-highlight {
      border-color: rgba(34, 211, 238, .6) !important;
      background: rgba(34, 211, 238, .08) !important;
      box-shadow: 0 0 0 1px rgba(34, 211, 238, .18);
    }

    .exercise-time-highlight-ir {
      border-color: rgba(167, 139, 250, .7) !important;
      background: rgba(167, 139, 250, .1) !important;
      box-shadow: 0 0 0 1px rgba(167, 139, 250, .2);
    }

    .ir-time-chosen {
      border-color: rgba(34, 211, 238, .6) !important;
      background: rgba(34, 211, 238, .08) !important;
      box-shadow: 0 0 0 1px rgba(34, 211, 238, .18);
    }

    .solo-time-chosen,
    .sim-time-chosen {
      border-color: rgba(34, 211, 238, .6) !important;
      background: rgba(34, 211, 238, .08) !important;
      box-shadow: 0 0 0 1px rgba(34, 211, 238, .18);
    }

    .ir-choice-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .ir-choice-card {
      display: block;
      min-width: 0;
    }

    .ir-choice-field {
      border: 1px solid rgba(167, 139, 250, .7);
      background: rgba(167, 139, 250, .1);
      box-shadow: 0 0 0 1px rgba(167, 139, 250, .2);
      border-radius: 8px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 12px;
      min-height: 38px;
      padding: 8px 10px;
      cursor: pointer;
      text-align: center;
      width: 100%;
    }

    .filter-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 14px;
      cursor: pointer;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 12px;
      transition: all .15s;
      white-space: nowrap;
    }

    select.filter-btn,
    .dark-select {
      color-scheme: dark;
      background-color: var(--surface);
      color: var(--text);
    }

    select.filter-btn:hover,
    select.filter-btn:focus,
    .dark-select:hover,
    .dark-select:focus {
      color: var(--text);
      background-color: var(--surface2);
      border-color: rgba(59, 130, 246, .4);
      outline: none;
    }

    select.filter-btn option,
    .dark-select option,
    .club-select option {
      background: #111318;
      color: var(--text);
    }

    select.filter-btn option:checked,
    .dark-select option:checked,
    .club-select option:checked {
      background: #1f2937;
      color: var(--accent2);
    }

    .filter-btn:hover,
    .filter-btn.active,
    .filter-btn.on {
      color: var(--accent);
      border-color: rgba(59, 130, 246, .4);
      background: rgba(59, 130, 246, .08);
    }

    .filter-btn.danger {
      color: var(--red);
      border-color: rgba(239, 68, 68, .3);
      background: rgba(239, 68, 68, .1);
    }

    .filter-btn.danger:hover {
      color: var(--red);
      border-color: rgba(239, 68, 68, .3);
      background: rgba(239, 68, 68, .2);
    }

    .drag-row {
      cursor: grab;
    }

    .drag-row:active {
      cursor: grabbing;
    }

    .drag-row.dragging {
      opacity: .45;
    }

    .drag-row.drag-over {
      box-shadow: inset 0 2px 0 var(--accent);
    }

    .table-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

    .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    .hide-sub-hours .col-sub-hours {
      display: none;
    }

    .hide-cost .col-cost {
      display: none;
    }

    thead th {
      text-align: left;
      padding: 12px 16px;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }

    thead th:hover {
      color: var(--text);
    }

    thead th.sorted {
      color: var(--accent);
    }

    .sort-icon {
      margin-left: 4px;
      opacity: .5;
    }

    thead th.sorted .sort-icon {
      opacity: 1;
    }

    tbody tr {
      border-bottom: 1px solid rgba(255, 255, 255, .03);
      transition: background .1s;
      cursor: pointer;
    }

    tbody tr:last-child {
      border-bottom: none;
    }

    tbody tr:hover {
      background: rgba(255, 255, 255, .025);
    }

    tbody td {
      padding: 10px 16px;
      font-size: 13px;
    }

    .mono {
      font-family: var(--mono);
      font-size: 12px;
    }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    /* Role color tokens — single source of truth for role badges & labels.
       Referenced by pages/accounts.js and pages/roles-access.js.
       Each role class exposes 4 vars; .role-badge / .role-solid-text consume them. */
    .role-student    { --role-bg: rgba(16,185,129,.15); --role-border: rgba(16,185,129,.45); --role-fg: #86efac; --role-solid: rgb(16,185,129); }
    .role-cfi        { --role-bg: rgba(14,165,233,.15); --role-border: rgba(14,165,233,.45); --role-fg: #7dd3fc; --role-solid: rgb(14,165,233); }
    .role-dcfi       { --role-bg: rgba(236,72,153,.15); --role-border: rgba(236,72,153,.45); --role-fg: #f9a8d4; --role-solid: rgb(236,72,153); }
    .role-club_admin { --role-bg: rgba(245,158,11,.15); --role-border: rgba(245,158,11,.45); --role-fg: #fbbf24; --role-solid: rgb(245,158,11); }
    .role-instructor { --role-bg: rgba(99,102,241,.15); --role-border: rgba(99,102,241,.45); --role-fg: #a5b4fc; --role-solid: rgb(99,102,241); }
    .role-dispatcher { --role-bg: rgba(20,184,166,.15); --role-border: rgba(20,184,166,.45); --role-fg: #5eead4; --role-solid: rgb(20,184,166); }
    .role-finance    { --role-bg: rgba(239,68,68,.15);  --role-border: rgba(239,68,68,.45);  --role-fg: #fca5a5; --role-solid: rgb(239,68,68); }
    .role-engineering{ --role-bg: rgba(168,85,247,.15); --role-border: rgba(168,85,247,.45); --role-fg: #d8b4fe; --role-solid: rgb(168,85,247); }

    /* Translucent fill badge (dispatcher/superuser/unknown fall back to neutral).
       border-color kept as a token but no border-style, matching prior appearance. */
    .badge.role-badge {
      background: var(--role-bg, rgba(148,163,184,.14));
      border-color: var(--role-border, rgba(148,163,184,.38));
      color: var(--role-fg, #cbd5e1);
    }

    /* Full-opacity brand text, e.g. capability-matrix column headers. */
    .role-solid-text {
      color: var(--role-solid, #cbd5e1);
      font-weight: 700;
    }

    .badge-GF {
      background: rgba(59, 130, 246, .15);
      color: #93c5fd;
    }

    .badge-NAV {
      background: rgba(34, 211, 238, .15);
      color: #67e8f9;
    }

    .badge-IR {
      background: rgba(167, 139, 250, .15);
      color: #c4b5fd;
    }

    .badge-NF {
      background: rgba(251, 36, 36, 0.15);
      color: #fc4d4d;
    }

    /*    .badge-NF {
      background: rgba(251, 191, 36, .15);
      color: #fcd34d;
    }*/

    .badge-SIM {
      background: rgba(16, 185, 129, .15);
      color: #6ee7b7;
    }

    .exercise-badge-select {
      position: relative;
      display: inline-block;
    }

    .exercise-badge-select.full-width {
      display: block;
      width: 100%;
    }

    .exercise-badge-trigger,
    .exercise-badge-option {
      border: 1px solid rgba(255, 255, 255, .08);
      cursor: pointer;
      transition: opacity .15s, border-color .15s, transform .15s, background .15s;
    }

    .exercise-badge-trigger {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 72px;
      justify-content: space-between;
    }

    .exercise-badge-select.full-width .exercise-badge-trigger {
      width: 100%;
      padding: 5px 10px;
      border-radius: 8px;
    }

    #flightModal .exercise-badge-select.full-width .exercise-badge-trigger,
    #tmrAddModal .exercise-badge-select.full-width .exercise-badge-trigger {
      min-height: 37px;
      padding: 9px 12px;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 1.2;
    }

    .exercise-badge-trigger::after {
      content: "▾";
      font-size: 9px;
      opacity: .72;
    }

    .exercise-badge-menu {
      position: absolute;
      z-index: 1000;
      top: calc(100% + 6px);
      left: 0;
      display: none;
      min-width: 92px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #10131a;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    }

    .exercise-badge-select.open .exercise-badge-menu {
      display: grid;
      gap: 5px;
    }

    .exercise-badge-option {
      width: 100%;
      text-align: left;
      opacity: .7;
      min-height: 32px;
      padding: 5px 10px;
      border-radius: 8px;
    }

    .exercise-badge-trigger:hover,
    .exercise-badge-option:hover,
    .exercise-badge-option.active {
      opacity: 1;
      border-color: currentColor;
    }

    .exercise-badge-option.active {
      transform: translateY(-1px);
    }

    .badge-P1 {
      background: rgba(16, 185, 129, .12);
      color: #6ee7b7;
    }

    .badge-P3 {
      background: rgba(107, 114, 128, .15);
      color: #9ca3af;
    }

    .badge-blank {
      background: rgba(107, 114, 128, .08);
      color: var(--muted);
    }

    .badge-Solo {
      background: rgba(251, 191, 36, .12);
      color: #fbbf24;
    }

    .badge-Dual {
      background: rgba(107, 114, 128, .1);
      color: #9ca3af;
    }

    .rating-blocks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .rating-block {
      display: inline-block;
      border: 0;
      background: rgba(107, 114, 128, .1);
      color: var(--muted);
      border-radius: 4px;
      padding: 2px 8px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .15s;
    }

    .rating-block:hover {
      color: var(--text);
    }

    .rating-block.active {
      background: var(--rating-bg, rgba(59, 130, 246, .15));
      color: var(--rating-color, #93c5fd);
    }

    /* Bridge: a rating-block tagged with a role token (e.g. role-cfi) pulls its
       colors from the shared role palette above, so instructor role chips and
       role badges stay in sync from one place. */
    .rating-block.role-student,
    .rating-block.role-cfi,
    .rating-block.role-dcfi,
    .rating-block.role-club_admin,
    .rating-block.role-instructor,
    .rating-block.role-dispatcher,
    .rating-block.role-finance,
    .rating-block.role-engineering {
      --rating-bg: var(--role-bg);
      --rating-color: var(--role-fg);
    }

    .rating-block.static {
      cursor: inherit;
    }

    .aircraft-status-badge {
      font-size: 11px;
      padding: 4px 10px;
    }

    .rating-heading {
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .cost-val {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
    }

    .table-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .table-footer-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pagination {
      display: flex;
      gap: 4px;
    }

    .page-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 10px;
      cursor: pointer;
      color: var(--muted);
      font-size: 11px;
      font-family: var(--mono);
      transition: all .15s;
    }

    .page-btn:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .15);
    }

    .page-btn.active {
      color: var(--accent);
      border-color: rgba(59, 130, 246, .4);
      background: rgba(59, 130, 246, .08);
    }

    .page-btn:disabled {
      opacity: .3;
      cursor: default;
    }

    .month-picker-menu {
      position: fixed;
      z-index: 10000;
      width: 220px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #10131a;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    }

    .aircraft-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
      margin-bottom: 32px;
    }

    .aircraft-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
      transition: border-color .2s, transform .15s;
      cursor: pointer;
    }

    .aircraft-card:hover {
      border-color: rgba(59, 130, 246, .4);
      transform: translateY(-2px);
    }

    .ac-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px;
    }

    .ac-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .ac-reg {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: .02em;
    }

    .ac-type {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .ac-rank {
      font-family: var(--mono);
      font-size: 10px;
      background: rgba(245, 158, 11, .15);
      border-radius: 6px;
      padding: 4px 8px;
      color: var(--orange);
    }

    .modal-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .aircraft-status-toggle {
      border: 0;
      border-radius: 4px;
      padding: 2px 8px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all .15s;
    }

    .aircraft-status-toggle.active {
      background: rgba(16, 185, 129, .18);
      color: #6ee7b7;
    }

    .aircraft-status-toggle.down {
      background: rgba(239, 68, 68, .1);
      color: #ff5050;
    }

    .ac-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .ac-stat-label {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .ac-stat-val {
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
    }

    .ac-bar {
      height: 3px;
      background: rgba(255, 255, 255, .06);
      border-radius: 99px;
      margin-top: 16px;
      overflow: hidden;
    }

    .ac-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: var(--c, var(--accent));
    }

    .ac-cost {
      font-size: 11px;
      color: var(--muted);
      margin-top: 10px;
      font-family: var(--mono);
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }

    .milestones {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 32px;
    }

    .milestone {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .milestone-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      background: rgba(59, 130, 246, .12);
    }

    .milestone-label {
      font-size: 13px;
      font-weight: 500;
    }

    .milestone-date {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      margin-top: 1px;
    }

    .milestone-val {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--accent);
      white-space: nowrap;
    }

    /* ---- BUTTONS ---- */
    .add-flight-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(59, 130, 246, .12);
      border: 1px solid rgba(59, 130, 246, .3);
      color: var(--accent);
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      transition: all .15s;
      white-space: nowrap;
    }

    .add-flight-btn:hover {
      background: rgba(59, 130, 246, .2);
      border-color: rgba(59, 130, 246, .5);
    }

    #my-bookings-btn:hover {
      background: rgba(16, 185, 129, .2) !important;
      border-color: rgba(16, 185, 129, .7) !important;
      color: #6ee7b7 !important;
    }

    .add-flight-btn .plus {
      font-size: 18px;
      line-height: 1;
      font-weight: 400;
    }

    /* ---- MODALS ---- */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, .7);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal {
      --modal-pad-x: 32px;
      background: #13151c;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 16px;
      padding: 32px;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(16px) scale(.98);
      transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
      position: relative;
    }

    .modal-overlay.open .modal {
      transform: translateY(0) scale(1);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28px;
    }

    .modal-title {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .modal-close {
      background: rgba(255, 255, 255, .06);
      border: none;
      border-radius: 6px;
      color: var(--muted);
      font-size: 18px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }

    .modal-close:hover {
      background: rgba(255, 255, 255, .12);
      color: var(--text);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group.full {
      grid-column: 1/-1;
    }

    .form-group.third {
      grid-column: span 1;
    }

    .form-group.right-col {
      grid-column: 2;
    }

    .flight-aircraft-pair,
    .flight-date-reg-row,
    .flight-crew-mode-row,
    .flight-time-pair,
    .flight-instructor-landings-row,
    .flight-breakdown-total-row {
      display: contents;
    }

    .flight-time-section {
      grid-column: 1/-1;
      justify-self: stretch;
      align-self: stretch;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255, 255, 255, .025);
      overflow: hidden;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .flight-time-section.modal-wide {
      width: calc(100% + (var(--modal-pad-x) * 2));
      margin-left: calc(var(--modal-pad-x) * -1);
      margin-right: calc(var(--modal-pad-x) * -1);
      border-left: 0;
      border-right: 0;
      border-radius: 0;
    }

    .flight-time-grid.cost-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #flightModal .flight-date-reg-row,
    #flightModal .flight-aircraft-pair {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    #flightModal .flight-date-reg-row .form-group,
    #flightModal .flight-date-reg-row .form-input,
    #flightModal .flight-aircraft-pair .form-group,
    #flightModal .flight-aircraft-pair .form-input {
      min-width: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    #flightModal #f_date {
      display: block;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      height: 38px;
      min-height: 38px;
      line-height: 18px;
      box-sizing: border-box;
      overflow: hidden;
      -webkit-appearance: none;
      appearance: none;
    }

    #flightModal #f_date::-webkit-date-and-time-value {
      min-width: 0;
      text-align: left;
    }

    #flightModal #f_date::-webkit-calendar-picker-indicator {
      flex-shrink: 0;
      margin-left: 2px;
    }

    @media(max-width:560px) {
      #flightModal .flight-date-reg-row {
        grid-template-columns: 1fr;
      }
    }


    .flight-time-section summary {
      cursor: pointer;
      list-style: none;
      padding: 12px 14px;
      color: var(--text);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .flight-time-section summary::-webkit-details-marker {
      display: none;
    }

    .flight-time-section summary::after {
      content: '+';
      color: var(--accent2);
      font-family: var(--mono);
      font-size: 14px;
    }

    .flight-time-section[open] summary::after {
      content: '-';
    }

    .flight-time-grid {
      padding: 0 14px 14px;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .profile-licence-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .form-label {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }

    /* No custom checkbox/radio styling existed anywhere before this - checked
       boxes app-wide (including the aircraft info popup) now use the app's
       own accent color instead of whatever the browser/OS default happens to
       be. Radio is included since Wake Category reuses the same checkbox-grid
       look with radio inputs (single-choice, enforced via shared name).
       :disabled gets an explicit opacity:1 too, since view-only (read-only)
       fields should still show that same accent color, not a washed-out
       disabled look. */
    input[type="checkbox"],
    input[type="radio"] {
      accent-color: var(--accent);
    }

    input[type="checkbox"]:disabled,
    input[type="radio"]:disabled {
      opacity: 1;
    }

    /* The aircraft info popup's checkbox-grid labels (ICAO Equipment,
       Surveillance, STS) - a checked item's text also turns accent-blue, so
       selected codes are easy to spot in a long grid even in read-only view. */
    .aci-cb-label:has(input:checked) span {
      color: var(--accent);
    }

    .form-input,
    .form-select {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 9px 12px;
      color: var(--text);
      font-family: var(--sans);
      font-size: 13px;
      outline: none;
      transition: border-color .15s;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    input.form-input.mbt-input {
      padding: 5px 8px;
    }

    .mbt-layout {
      display: grid;
      grid-template-columns: 300px 1fr;
      grid-template-areas: "stations chart" "summary summary";
      gap: 20px;
      align-items: start;
    }

    .mbt-stations {
      grid-area: stations;
      min-width: 0;
      border-right: 1px solid var(--border);
      padding-right: 20px;
    }

    .mbt-chart-col {
      grid-area: chart;
      min-width: 0;
    }

    .mbt-chart-wrap {
      position: relative;
      min-width: 0;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .mbt-chart-wrap canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .mbt-summary-area {
      grid-area: summary;
      border-top: 1px solid var(--border);
      padding-top: 14px;
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 20px;
    }

    @media(max-width:768px) {
      .mbt-summary-area {
        grid-template-columns: 1fr;
      }

      .mbt-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "stations" "chart" "summary";
      }

      .mbt-stations {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border);
        padding-bottom: 14px;
      }

      .mbt-chart-col {
        border-bottom: 1px solid var(--border);
        padding-bottom: 14px;
      }
    }

    /* Fuel Planning block diagram - reproduces Fuel/Fuel Block.jpg's nested
       labeled-bracket layout: a vertical "bracket" label column (Block Fuel /
       Take Off Fuel / Reserves) sits beside a stack of horizontal "strip"
       rows, recursing one level deeper for Take Off Fuel and again for
       Reserves. Colors are fixed to match the reference image, not the app
       theme, since this is reproducing a specific external diagram. */
    .fp-diagram {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      font-family: var(--sans);
      color: var(--muted);
    }

    .fp-row {
      display: flex;
      align-items: stretch;
    }

    .fp-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .fp-bracket {
      flex: 0 0 92px;
      width: 92px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px 6px;
      font-size: 12px;
      font-weight: 600;
    }

    .fp-strip {
      padding: 8px 12px;
      font-size: 12px;
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .fp-strip-title {
      font-weight: 600;
    }

    .fp-strip-sub {
      font-size: 10px;
      opacity: .85;
      margin-top: 2px;
    }

    .fp-strip-sub-inline {
      font-size: 11px;
      opacity: .85;
    }

    .fp-c-block { background: #000000; border: 1px solid var(--border); }
    .fp-c-takeoff { background: #47ff002b; border: 1px solid var(--border); }
    .fp-c-reserves { background: #ff000042; border: 1px solid var(--border); }
    .fp-c-taxi { background: #ffab0030; border: 1px solid var(--border); }
    .fp-c-trip { background: #47ff0012; border: 1px solid var(--border); }
    .fp-c-contingency { background: #ff000026; border: 1px solid var(--border); }
    .fp-c-alternate { background: transparent; border: 2px solid var(--border); }
    .fp-c-finalreserve { background: #ff000026; border: 1px solid var(--border); }
    .fp-c-additional { background: transparent; border: 2px solid var(--border); }
    .fp-c-extra { background: transparent; border: 2px solid var(--border); font-weight: 600; }

    .fp-dim {
      display: none;
    }

    .fp-diagram:not(.fp-jet) .fp-reserve-jet-line {
      display: none;
    }

    .fp-diagram.fp-jet .fp-reserve-prop-line {
      display: none;
    }

    .fp-diagram.fp-hide-desc .fp-desc {
      display: none;
    }

    @media(max-width:768px) {
      .fp-bracket {
        writing-mode: sideways-lr;
        width: auto;
        flex: 0 0 auto;
        padding: 6px 4px;
      }
    }

    /* Holding Pattern / Entry calculator */
    /* Named grid areas so mobile can reorder (diagram, then results, then
       Recommended Entry) without touching the desktop layout - "view" spans
       both left-column rows on desktop so it still reads as "diagram next
       to inputs+results stacked", same as before this was split out. */
    .hp-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "inputs view" "results view" "rec rec";
      gap: 20px;
      align-items: start;
    }
    .hp-inputs { grid-area: inputs; min-width: 0; }
    .hp-view { grid-area: view; min-width: 0; }
    .hp-results-area { grid-area: results; min-width: 0; }
    .hp-rec { grid-area: rec; min-width: 0; }

    .hp-canvas-wrap {
      position: relative;
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
    }

    .hp-canvas-wrap canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* Always exactly 3 columns, even on mobile - unlike .form-grid, which
       collapses to 1 column below 768px. minmax(0,1fr) instead of plain 1fr:
       grid tracks default to min-width:auto (sized to fit their content's
       natural width), which stops them shrinking on narrow screens like
       iPhone SE and clips/overflows instead - minmax(0,...) lets the track
       actually compress down. */
    .hp-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .hp-grid-3 > * { min-width: 0; }

    /* Same idea as .hp-grid-3 but 2 columns (Aircraft Heading/Hold Course,
       Course Is/Turn Direction) - stays 2-up on mobile instead of stacking. */
    .hp-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .hp-grid-2 > * { min-width: 0; }

    /* Linear 0-360deg scrubber under Aircraft Heading / Hold Course - a
       compact ruler that slides under a fixed center pointer, not a plain
       <input type=range> (no min/max edge - dragging spins indefinitely in
       either direction, wrapping same as a real heading knob). Small
       footprint so it fits a mobile 2-column row. touch-action:none stops
       the browser hijacking the drag as a page-scroll gesture on touch. */
    .hp-linear {
      display: block;
      margin: 8px auto 0;
      max-width: 100%;
      touch-action: none;
      cursor: ew-resize;
    }

    @media(max-width:768px) {
      .hp-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "inputs" "view" "results" "rec";
      }
    }

    /* Role-badge side box next to a field (e.g. Add Flight's Instructor/Student) —
       same box metrics as .form-input/.form-select so it lines up at full height,
       full width of its slot. The placeholder ("—") sits centered with field padding;
       once a badge/text is populated it stretches to fill the box completely (full
       width + height, clipped to the box's rounded corners) instead of floating as a
       small pill inside empty padding. */
    .field-badge-box {
      display: flex;
      align-items: stretch;
      width: 100%;
      box-sizing: border-box;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      font-family: var(--sans);
      font-size: 10px;
      color: var(--muted);
    }

    .field-badge-box > * {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 12px;
      box-sizing: border-box;
    }

    .field-badge-box .badge {
      font-size: 12px;
      border-radius: 0;
    }

    /* Add Flight's "Student / Instructor / Non Member" mode selector — the label
       text itself is the picker; the active word is colored, the rest stay muted. */
    .tmr-mode-label {
      cursor: pointer;
      color: var(--muted);
      transition: color .15s;
    }

    .tmr-mode-label.active[data-mode="student"] {
      color: var(--accent);
    }

    .tmr-mode-label.active[data-mode="instructor"] {
      color: var(--green);
    }

    .tmr-mode-label.active[data-mode="external"] {
      color: var(--orange);
    }

    button,
    input,
    select,
    textarea {
      touch-action: manipulation;
    }

    .input-copy-wrap {
      position: relative;
    }

    .input-copy-wrap .form-input {
      padding-right: 66px;
    }

    .copy-btn {
      position: absolute;
      top: 50%;
      right: 38px;
      transform: translateY(-50%);
      border: none;
      background: rgba(255, 255, 255, .06);
      color: var(--muted);
      width: 26px;
      height: 26px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }

    .copy-btn:hover {
      background: rgba(59, 130, 246, .15);
      color: var(--accent);
    }

    .copy-btn:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, .24);
    }

    .unit-convert-btn {
      right: 10px;
      width: auto;
      min-width: 34px;
      padding: 0 7px;
      font-family: var(--mono);
      font-size: 10px;
    }

    .delete-btn {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      border: none;
      background: rgba(255, 255, 255, .06);
      color: var(--muted);
      width: 26px;
      height: 26px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }

    .delete-btn:hover {
      background: rgba(239, 68, 68, .15);
      color: #ef4444;
    }

    .delete-btn:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, .24);
    }

    .form-input:focus,
    .form-select:focus {
      border-color: rgba(59, 130, 246, .5);
      background: rgba(59, 130, 246, .04);
    }

    .form-input:disabled,
    .form-select:disabled {
      opacity: .78;
      cursor: default;
    }

    .unit-convert-btn:disabled {
      opacity: .45;
      cursor: default;
      pointer-events: none;
    }

    .form-select option {
      background: #13151c;
      color: var(--text);
    }

    .form-select optgroup {
      background: #13151c;
      color: var(--muted);
      font-style: normal;
    }

    .form-input::placeholder {
      color: var(--muted2);
    }

    .form-input.computed {
      color: var(--accent2);
      background: rgba(34, 211, 238, .04);
      border-color: rgba(34, 211, 238, .2);
    }

    .form-input.invalid {
      border-color: rgba(239, 68, 68, .72);
      background: rgba(239, 68, 68, .06);
    }

    .field-error {
      display: none;
      margin-top: 4px;
      color: var(--red);
      font-size: 11px;
      line-height: 1.35;
    }

    .field-error.show {
      display: block;
    }

    .toggle-row {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      cursor: pointer;
      width: fit-content;
    }

    .toggle-row input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .toggle-switch {
      width: 36px;
      height: 20px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      position: relative;
      transition: all .15s;
      flex: 0 0 auto;
    }

    .toggle-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--muted);
      transition: all .15s;
    }

    .toggle-row input:checked + .toggle-switch {
      border-color: rgba(16, 185, 129, .45);
      background: rgba(16, 185, 129, .18);
    }

    .toggle-row input:checked + .toggle-switch::after {
      transform: translateX(16px);
      background: var(--green);
    }

    .toggle-row input:focus + .toggle-switch {
      box-shadow: 0 0 0 2px rgba(59, 130, 246, .24);
    }

    .iti {
      width: 100%;
      color: var(--text);
    }

    .iti .form-input {
      padding-left: 92px;
    }

    .iti__country-container {
      border-right: 1px solid var(--border);
    }

    .iti__selected-country {
      background: rgba(255, 255, 255, .03);
      border-radius: 8px 0 0 8px;
    }

    .iti__selected-country:hover,
    .iti__selected-country:focus {
      background: rgba(59, 130, 246, .12);
    }

    .iti__dropdown-content,
    .iti__country-list {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
      z-index: 1200;
    }

    .iti__search-input {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      color: var(--text);
      outline: none;
    }

    .iti__country.iti__highlight,
    .iti__country:hover {
      background: rgba(59, 130, 246, .16);
    }

    .iti__dial-code {
      color: var(--muted);
    }

    .form-actions {
      display: flex;
      gap: 10px;
      margin-top: 24px;
      justify-content: flex-end;
    }

    .btn-cancel {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 9px 20px;
      cursor: pointer;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 13px;
      transition: all .15s;
    }

    .btn-cancel:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .15);
    }

    .btn-save {
      background: var(--accent);
      border: none;
      border-radius: 8px;
      padding: 9px 24px;
      cursor: pointer;
      color: #fff;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      transition: all .15s;
    }

    .btn-save:hover {
      background: #2563eb;
    }

    .btn-delete {
      background: rgba(239, 68, 68, .1);
      border: 1px solid rgba(239, 68, 68, .3);
      border-radius: 8px;
      padding: 9px 20px;
      cursor: pointer;
      color: var(--red);
      font-family: var(--sans);
      font-size: 13px;
      transition: all .15s;
      margin-right: auto;
    }

    .btn-delete:hover {
      background: rgba(239, 68, 68, .2);
    }

    .hidden {
      display: none !important;
    }

    .form-input,
    .form-select {
      color-scheme: dark;
    }

    /* ---- TOAST ---- */
    .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 300;
      background: #1a1e27;
      border: 1px solid rgba(16, 185, 129, .3);
      border-radius: 10px;
      padding: 12px 18px;
      color: var(--green);
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transform: translateY(80px);
      opacity: 0;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      pointer-events: none;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast.error {
      color: var(--red);
      border-color: rgba(239, 68, 68, .3);
    }

    /* ---- FINANCES ---- */
    .fin-summary {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      margin-bottom: 28px;
    }

    .fin-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .fin-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--c, var(--accent));
    }

    .fin-label {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .fin-val {
      font-family: var(--mono);
      font-size: 22px;
      font-weight: 700;
    }

    .fin-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    .fin-list {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      margin-bottom: 24px;
    }

    /* Real <table> layout - .fin-row is a <tr>, .fin-col-* are <th>/<td>. Column
       order is now pure DOM order (no grid-column reordering trick), so
       finances.js/dashboard.js must emit cells in the exact visual order. */
    .fin-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      min-width: 1190px;
      --fin-row-pad-y: 11px;
    }

    .fin-table th,
    .fin-table td {
      padding: var(--fin-row-pad-y) 5px;
      background: var(--surface);
      border-bottom: 1px solid rgba(255, 255, 255, .03);
      vertical-align: middle;
    }

    .fin-table tr:last-child td {
      border-bottom: none;
    }

    .fin-row.header th {
      --fin-row-pad-y: 9px;
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      white-space: nowrap;
    }

    .fin-row.header th:not(.fin-col-right):not(.fin-col-center) {
      text-align: left;
    }

    .fin-table .fin-col-date { width: 100px; padding-left: 16px; }
    .fin-table .fin-col-club { width: 30px; text-align: center; }
    .fin-table .fin-col-type { width: 70px; }
    .fin-table .fin-col-student { width: 150px; min-width: 0; }
    .fin-table .fin-col-desc { min-width: 0; }
    .fin-table .fin-col-time { width: 60px; }
    .fin-table .fin-col-rate { width: 100px; }
    .fin-table .fin-col-debit { width: 130px; }
    .fin-table .fin-col-credit { width: 130px; }
    .fin-table .fin-col-balance { width: 130px; }
    .fin-table .fin-col-actions { width: 36px; padding-right: 16px; }

    .fin-col-right {
      text-align: right;
    }

    .fin-col-center {
      text-align: center;
    }

    .fin-col-amount {
      display: none;
    }

    @media(min-width:901px) {
      .fin-col-date,
      .fin-col-club,
      .fin-col-type {
        position: sticky;
        z-index: 2;
      }

      .fin-col-date { left: 0; }
      .fin-col-club { left: 100px; }
      .fin-col-type { left: 130px; }

      .fin-row.header .fin-col-date,
      .fin-row.header .fin-col-club,
      .fin-row.header .fin-col-type {
        z-index: 3;
      }
    }

    /* Tablet: full column set minus Time/Cost-per-Hr (desktop stays untouched
       above 1199px; below 900px the Mobile tier below takes over instead). */
    @media(min-width:901px) and (max-width:1199px) {
      .fin-table {
        min-width: 1020px;
      }

      .fin-col-time,
      .fin-col-rate {
        display: none;
      }
    }

    @media(max-width:900px) {
      .fin-table {
        width: 100%;
        min-width: 430px;
      }

      .fin-table th,
      .fin-table td {
        padding: 10px 6px;
      }

      .fin-table .fin-col-date { width: 74px; padding-left: 6px; }
      .fin-table .fin-col-student { width: 120px; }
      .fin-table .fin-col-amount { width: 96px; }
      .fin-table .fin-col-balance { width: 100px; }

      .fin-col-club,
      .fin-col-type,
      .fin-col-desc,
      .fin-col-time,
      .fin-col-rate,
      .fin-col-debit,
      .fin-col-credit,
      .fin-col-actions {
        display: none;
      }

      .fin-col-amount {
        display: table-cell;
      }

      .fin-row.header th {
        font-size: 9px;
        letter-spacing: .08em;
      }

      .fin-date-cell {
        font-size: 10px;
      }

      .fin-date-cell .fin-date-full {
        display: none;
      }

      .fin-date-cell .fin-date-short {
        display: inline;
      }

      .fin-desc {
        min-width: 0;
        font-size: 12px;
        line-height: 1.35;
      }

      .fin-col-amount,
      .fin-col-balance {
        font-size: 11px;
        white-space: nowrap;
      }

      .fin-col-balance {
        text-align: right;
      }

      .fin-amount {
        font-size: 11px;
      }

      .fin-currency {
        display: none;
      }
    }

    @media(max-width:480px) {
      .fin-table {
        width: 100%;
        min-width: 390px;
      }

      .fin-table th,
      .fin-table td {
        padding: 9px 5px;
      }

      .fin-col-amount,
      .fin-col-balance {
        font-size: 10px;
      }

      .fin-amount {
        font-size: 10px;
      }
    }

    .fin-desc {
      font-size: 13px;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fin-date-cell {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
    }

    .fin-date-short {
      display: none;
    }

    .fin-amount {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
    }

    .fin-amount.credit {
      color: var(--green);
    }

    .fin-amount.debit {
      color: var(--red);
    }

    .fin-type-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .fin-type-badge.credit {
      background: rgba(16, 185, 129, .12);
      color: var(--green);
    }

    .fin-type-badge.debit {
      background: rgba(239, 68, 68, .12);
      color: var(--red);
    }

    .fin-edit-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(59, 130, 246, 0);
      font-size: 14px;
      padding: 4px;
      border-radius: 4px;
      transition: all .15s;
    }

    .fin-row:hover .fin-edit-btn {
      color: rgba(59, 130, 246, .5);
    }

    .fin-edit-btn:hover {
      color: var(--accent) !important;
      background: rgba(59, 130, 246, .1);
    }

    .fin-empty {
      text-align: center;
      padding: 40px;
      color: var(--muted);
      font-size: 13px;
    }

    .instructor-table td:first-child {
      font-weight: 600;
    }

    /* ---- AIRCRAFT EDIT MODAL ---- */
    .ac-edit-hint {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ---- TABLE TOTALS ---- */
    #totalsRow td {
      padding-left: 16px;
    }

    /* ---- SCROLLBAR ---- */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .1);
      border-radius: 99px;
    }

    @media(max-width:1100px) {
      .charts-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media(max-width:1024px), (hover:none) and (pointer:coarse) {
      body {
        padding-left: 0;
      }

      nav {
        width: min(280px, 86vw);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        padding: 58px 14px 14px;
        gap: 10px;
        align-items: stretch;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 24px 0 60px rgba(0, 0, 0, .38);
        overflow: hidden;
      }

      .page {
        padding-top: 68px;
      }

      .mobile-menu-btn {
        display: flex;
      }

      .mobile-page-title {
        display: flex;
      }

      .mobile-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(0, 0, 0, .42);
        backdrop-filter: blur(2px);
      }

      body.mobile-nav-open nav {
        transform: translateX(0);
      }

      body.mobile-nav-open .mobile-nav-scrim {
        display: block;
      }

      .nav-logo {
        margin: 0;
      }

      .nav-links {
        width: 100%;
        gap: 3px;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 2px;
      }

      .nav-btn {
        min-height: 38px;
        justify-content: flex-start;
        padding: 7px 10px;
        font-size: 12px;
      }

      .nav-stat,
      .account-pill {
        display: flex;
      }

      nav > .nav-btn[aria-label="Profile"] {
        flex: 0 0 auto;
        margin-top: 0;
        border-top: 1px solid var(--border);
        padding-top: 10px;
      }

      nav .account-pill {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        gap: 6px;
        margin-top: -10px;
        padding-top: 0;
        border-top: 0;
        background: rgba(10, 12, 16, .94);
        backdrop-filter: blur(16px);
      }

      nav .account-email {
        display: none;
      }

      nav #signOutBtn {
        width: 100%;
        justify-content: center;
        padding-top: 7px;
        padding-bottom: 7px;
      }

      .nav-icon {
        width: 22px;
        min-width: 22px;
        height: 22px;
        font-size: 20px;
      }
    }

    @media(max-width:768px) {

      body {
        padding-left: 0;
      }

      .club-access-banner {
        top: 66px;
        left: 14px;
        right: 14px;
      }

      .header-club-switcher {
        top: 0;
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
        min-height: 58px;
        justify-content: center;
        gap: 8px;
        padding: 8px 14px;
      }

      .header-club-label {
        font-size: 13px;
        letter-spacing: .08em;
      }

      body.header-club-switcher-visible .page {
        padding-top: 126px;
      }

      body.header-club-switcher-visible .mobile-page-title {
        top: 74px;
      }

      body.header-club-switcher-visible .club-access-banner {
        top: 116px;
      }

      .header-club-switcher .club-select {
        width: min(100%, 420px);
        height: 34px;
        font-size: 11px;
      }

      body.header-club-switcher-visible > .mobile-menu-btn {
        display: none;
      }

      .charts-grid,
      .charts-grid-3,
      .progress-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stats-grid.featured {
        grid-template-columns: 1fr;
      }

      nav {
        width: min(280px, 86vw);
        padding: 66px 16px 20px;
        gap: 18px;
        align-items: stretch;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 24px 0 60px rgba(0, 0, 0, .38);
      }

      .page {
        padding: 68px 16px 16px;
      }

      .mobile-menu-btn {
        display: flex;
      }

      .mobile-page-title {
        display: flex;
      }

      .mobile-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(0, 0, 0, .42);
        backdrop-filter: blur(2px);
      }

      body.mobile-nav-open nav {
        transform: translateX(0);
      }

      body.mobile-nav-open .mobile-nav-scrim {
        display: block;
      }

      .nav-logo {
        margin: 0;
      }

      .nav-links {
        width: 100%;
        gap: 4px;
      }

      .nav-btn {
        min-height: 44px;
        justify-content: flex-start;
        padding: 10px 12px;
      }

      .nav-stat {
        display: flex;
      }

      .account-pill {
        display: flex;
      }

      .nav-icon {
        width: 22px;
        min-width: 22px;
        height: 22px;
        font-size: 20px;
      }

      .section-header {
        flex-wrap: wrap;
        gap: 8px 14px;
        margin-bottom: 18px;
      }

      /* Headers that group title+value in nested wrappers (e.g. Weather, Flight
         records): let them wrap so the value drops to its own line and the title
         stays on one line, with the title->value gap matching direct headers. */
      .section-header div {
        flex-wrap: wrap;
        gap: 8px;
      }

      .section-value {
        font-size: 20px;
        flex-basis: 100%;
      }

      /* Row 1: search + Clear. Row 2: the exercise filters (wrap, no scroll).
         Uses flex order + a 100%-wide break pseudo-element to split the rows
         without changing the HTML or the desktop layout. */
      .table-controls {
        flex-wrap: wrap;
        align-items: center;
      }
      .table-controls .search-box {
        order: 0;
        flex: 4 1 0;          /* ~80% of row 1 */
        min-width: 0;         /* override the 200px floor so it shrinks to fit */
      }
      .table-controls .filter-btn {
        order: 3;
        flex: 1 1 auto;       /* row 2 buttons stretch to fill the width */
      }
      .table-controls .filter-btn.danger {   /* Clear: ~20%, stays on row 1 */
        order: 1;
        flex: 1 1 0;
      }
      .table-controls::before {              /* forces the wrap after Clear */
        content: "";
        order: 2;
        flex-basis: 100%;
        height: 0;
      }

      .chart-card {
        padding: 18px;
      }

      .chart-wrap {
        height: 200px;
      }

      .chart-wrap.tall {
        height: 240px;
      }

      .table-controls {
        align-items: stretch;
      }

      .search-box {
        min-width: 100%;
      }

      .filter-btn,
      .add-flight-btn,
      .btn-delete,
      .sched-nav-btn,
      .dispatch-tab,
      .lock-btn {
        min-height: 42px;
      }

      .table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
      }

      #page-flights .table-wrap {
        overflow: hidden;
      }

      #page-flights .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .table-wrap>table,
      .table-wrap>.dispatch-bookings-table {
        min-width: 720px;
      }

      #flightsTable {
        min-width: 920px;
      }

      #flightsTable th,
      #flightsTable td {
        padding-left: 10px;
        padding-right: 10px;
      }

      #flightsTable th:nth-child(1),
      #flightsTable td:nth-child(1) {
        display: none;
      }

      #flightsTable th:nth-child(2),
      #flightsTable td:nth-child(2) {
        position: sticky;
        left: 0;
        width: 88px;
        min-width: 88px;
        max-width: 88px;
        z-index: 4;
      }

      #flightsTable thead th:nth-child(2),
      #flightsTable #totalsRow td:nth-child(2) {
        background: var(--surface);
        z-index: 6;
      }

      #flightsTable tbody td:nth-child(2) {
        background: var(--surface);
      }

      #flightsTable tbody tr:hover td:nth-child(2) {
        background: #151820;
      }

      #flightsTable th:nth-child(2),
      #flightsTable td:nth-child(2) {
        box-shadow: 10px 0 14px -14px rgba(0, 0, 0, .9);
      }

      .table-scroll table {
        min-width: 720px;
      }

      .table-footer {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
      }

      .table-footer-controls {
        align-self: flex-end;
      }

      .aircraft-grid {
        grid-template-columns: 1fr;
      }

      .aircraft-card,
      .dispatch-ac-card {
        padding: 18px;
      }

      .ac-cost {
        align-items: flex-start;
        flex-direction: column;
      }

      .milestone {
        align-items: flex-start;
      }

      .milestone-val {
        margin-left: 0;
      }

      .modal-overlay {
        align-items: center;
      }

      .modal {
        --modal-pad-x: 10px;
        max-width: none;
        max-height: min(92vh, 900px);
        width: calc(100% - 24px);
        border-radius: 16px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        /*  padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); */

      }

      .modal-header {
        margin-bottom: 10px;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .form-group.third {
        grid-column: auto;
      }

      .form-group.right-col {
        grid-column: auto;
      }

      .flight-aircraft-pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      #flightModal .flight-date-reg-row {
        grid-column: auto;
      }

      .flight-time-pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .flight-instructor-landings-row {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        gap: 14px;
      }

      .flight-breakdown-total-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .flight-crew-mode-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .flight-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .flight-time-grid.cost-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sched-name-bar,
      .sched-week-nav,
      .dispatch-tabs {
        align-items: stretch;
      }

      .sched-week-nav {
        flex-wrap: wrap;
      }

      .dispatch-tab {
        flex: 1 1 150px;
      }

      .dispatch-booking-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .dispatch-booking-field[style*="grid-column:1 / span 2"]:not(.two-cols),
      .dispatch-booking-field[style*="grid-column:1/-1"] {
        grid-column: auto !important;
      }

      .dispatch-booking-actions {
        flex-direction: row;
        flex-wrap: nowrap;
      }

      .dispatch-booking-actions>* {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        justify-content: center;
      }

      .tmr-card {
        overflow: visible;
      }

      .tmr-card-header {
        gap: 8px;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
      }

      .tmr-card-header>div:last-child {
        margin-left: auto;
        text-align: right;
        white-space: nowrap;
      }

      .tmr-table {
        overflow: visible;
      }

      .tmr-row {
        min-width: 0;
      }

      .fin-summary {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:560px) {
      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .stats-grid.featured {
        grid-template-columns: 1fr;
      }

      .page {
        padding: 68px 12px 12px;
      }

      .section-value {
        width: 100%;
      }

      .stat-card,
      .progress-item {
        padding: 16px;
      }

      .ac-head {
        gap: 10px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
      }

      .ac-stats {
        grid-template-columns: 1fr 1fr;
      }

      .milestone {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
      }

      .milestone>div:nth-child(2) {
        min-width: 0;
        width: auto;
      }

      .milestone-val {
        margin-left: 0;
        justify-self: end;
        align-self: start;
      }

      .wx-sort-btn,
      .wx-fetch-btn {
        min-height: 42px;
      }
    }

    /* ---- SCHEDULING / AVAILABILITY CALENDAR ---- */
    .sched-name-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .sched-name-display {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--accent2);
      padding: 5px 12px;
      background: rgba(34, 211, 238, .08);
      border: 1px solid rgba(34, 211, 238, .2);
      border-radius: 8px;
    }

    .sched-week-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .sched-nav-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 14px;
      cursor: pointer;
      color: var(--muted);
      font-size: 12px;
      font-family: var(--sans);
      transition: all .15s;
    }

    .sched-nav-btn:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .2);
    }

    .sched-nav-btn.accent {
      color: var(--accent);
      border-color: rgba(59, 130, 246, .3);
      background: rgba(59, 130, 246, .08);
    }

    .sched-date-label {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      min-width: 220px;
      text-align: center;
    }

    .sched-lock-banner {
      background: rgba(239, 68, 68, .08);
      border: 1px solid rgba(239, 68, 68, .25);
      border-radius: 10px;
      padding: 12px 18px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: #ef4444;
      font-weight: 600;
    }

    .sched-cal-wrap {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
    }

    .cal-corner {
      background: #15171d;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 8px 6px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      text-align: center;
      position: sticky;
      left: 0;
      z-index: 2;
    }

    .cal-corner.cal-week-header {
      position: static;
      background: rgba(255, 255, 255, .03);
    }

    .cal-corner.sunday {
      color: var(--red);
    }

    .cal-day-header {
      border-right: 1px solid rgba(255, 255, 255, .05);
      border-bottom: 1px solid var(--border);
      padding: 8px 6px;
      text-align: center;
      min-width: 90px;
      transition: background .1s;
    }

    .cal-day-header.cal-day-header-row {
      background: rgba(255, 255, 255, .03);
    }

    .cal-day-header.month-alt {
      background: rgba(0, 0, 0, .14);
    }

    .cal-day-header.selectable {
      cursor: pointer;
    }

    .cal-day-header.selectable:hover {
      background: rgba(59, 130, 246, .08);
    }

    .cal-day-header.today {
      background: rgba(16, 185, 129, .12);
    }

    .cal-day-header.today .cal-day-name,
    .cal-day-header.today .cal-day-date {
      color: #6ee7b7;
    }

    .cal-day-header.tomorrow {
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .45);
      background: rgba(59, 130, 246, .12);
    }

    .cal-day-header.tomorrow .cal-day-name,
    .cal-day-header.tomorrow .cal-day-date {
      color: #93c5fd;
    }

    .cal-day-header.locked {
      cursor: not-allowed;
      background: rgba(239, 68, 68, .05);
    }

    .cal-day-header.locked:hover {
      background: rgba(239, 68, 68, .05);
    }

    .cal-day-header.available {
      background: rgba(16, 185, 129, .18);
    }

    .cal-day-header.available:hover {
      background: rgba(16, 185, 129, .28);
    }

    .cal-day-header.locked.available {
      background: rgba(245, 158, 11, .22);
      box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25);
    }

    .cal-day-header.sunday .cal-day-name,
    .cal-day-header.sunday .cal-day-date {
      color: var(--red);
    }

    .cal-day-header.today.sunday .cal-day-name,
    .cal-day-header.today.sunday .cal-day-date {
      color: #6ee7b7;
    }

    .cal-day-header.tomorrow.sunday .cal-day-name,
    .cal-day-header.tomorrow.sunday .cal-day-date {
      color: #93c5fd;
    }

    .cal-month-start-label {
      display: inline-block;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--orange);
      vertical-align: middle;
    }

    /* Stack the month-start label above the date number instead of inline
       before it, and color the date number to match on that day. */
    .cal-daily-grid .cal-day-date {
      flex-direction: column;
      gap: 1px;
    }

    .cal-day-num.cal-month-start-day {
      color: var(--orange);
    }

    .cal-daily-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(90px, 1fr));
      min-width: 630px;
    }

    .cal-daily-grid .cal-day-date {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cal-day-name {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .cal-day-date {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      margin-top: 2px;
    }

    .cal-day-date.today {
      color: var(--green);
    }

    .cal-day-date.tomorrow {
      color: var(--accent);
    }

    .cal-time-label {
      background: #15171d;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      padding: 0 8px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      min-height: 40px;
      width: 52px;
      position: sticky;
      left: 0;
      z-index: 1;
    }

    .cal-slot {
      min-height: 40px;
      min-width: 90px;
      border-right: 1px solid rgba(255, 255, 255, .04);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      cursor: pointer;
      transition: background .1s;
      padding: 3px 4px;
    }

    .cal-slot:hover {
      background: rgba(59, 130, 246, .1);
    }

    .cal-slot.available {
      background: rgba(16, 185, 129, .18);
    }

    .cal-slot.available:hover {
      background: rgba(16, 185, 129, .28);
    }

    .cal-slot.locked {
      cursor: not-allowed;
      background: rgba(239, 68, 68, .05);
    }

    .cal-slot.locked.available {
      background: rgba(245, 158, 11, .22);
      box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25);
    }

    .cal-slot.partial {
      background: rgba(16, 185, 129, .06);
      box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .35);
    }

    .cal-slot.partial:hover {
      background: rgba(16, 185, 129, .14);
    }

    .cal-slot.locked.partial {
      background: rgba(245, 158, 11, .08);
      box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3);
    }

    .cal-slot-range {
      display: block;
      font-size: 10px;
      font-family: var(--mono);
      color: #6ee7b7;
      text-align: center;
      padding-top: 4px;
    }

    .cal-slot.has-names {
      cursor: default;
    }

    .cal-slot-names {
      display: block;
      width: 100%;
      margin: 2px 0;
      padding: 2px 5px;
      border: 1px solid rgba(34, 211, 238, .36);
      border-radius: 6px;
      background: rgba(34, 211, 238, .07);
      font-size: 8px;
      font-family: var(--mono);
      color: var(--accent2);
      line-height: 1.35;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .cal-slot-names.role-instructor {
      border-color: rgba(16, 185, 129, .42);
      background: rgba(16, 185, 129, .1);
      color: #6ee7b7;
    }

    .cal-slot-names.role-superuser {
      border-color: rgba(249, 115, 22, .48);
      background: rgba(239, 68, 68, .1);
      color: #fb923c;
    }

    /* availability day view */
    .avail-day-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(110px, 1fr));
      min-width: 700px;
    }

    .avail-day-card {
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
    }

    .avail-day-card:last-child {
      border-right: none;
    }

    .avail-day-card.today .avail-day-card-header {
      background: rgba(16, 185, 129, .12);
      border-color: rgba(16, 185, 129, .45);
    }

    .avail-day-card.tomorrow .avail-day-card-header {
      background: rgba(59, 130, 246, .12);
      border-color: rgba(59, 130, 246, .45);
    }

    .date-today {
      color: var(--green);
    }

    .date-tomorrow {
      color: var(--accent);
    }

    .avail-day-card-header {
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border);
      padding: 10px 6px;
      text-align: center;
    }

    .avail-day-card-body {
      padding: 6px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-height: 60px;
    }

    .avail-day-empty {
      color: var(--muted);
      font-size: 11px;
      text-align: center;
      padding: 10px 0;
    }

    /* booking modal */
    .sched-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .75);
      backdrop-filter: blur(4px);
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sched-modal-box {
      background: #13151c;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 16px;
      padding: 32px;
      width: 400px;
      max-width: 92vw;
      max-height: 90vh;
      overflow-y: auto;
      animation: fadeUp .2s forwards;
    }

    .sched-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .sched-modal-title {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .sched-modal-row {
      margin-bottom: 14px;
    }

    .sched-modal-label {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
      font-weight: 600;
    }

    .sched-modal-val {
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 700;
    }

    .booking-chip {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 8px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: start;
    }

    .booking-chip-title {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 3px;
    }

    .booking-chip-sub {
      font-size: 11px;
      color: var(--muted);
    }

    .booking-status {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      font-family: var(--mono);
      letter-spacing: .06em;
    }

    .booking-status.pending {
      background: rgba(245, 158, 11, .15);
      color: var(--orange);
    }

    .booking-status.confirmed {
      background: rgba(16, 185, 129, .15);
      color: var(--green);
    }

    /* Dispatcher-approved but not yet published by the CFI (dispatch-page only). */
    .booking-status.staged {
      background: rgba(59, 130, 246, .15);
      color: var(--accent);
    }

    .booking-status.completed {
      background: rgba(107, 114, 128, .15);
      color: var(--muted);
    }

    /* "Times shown in X" pill — Flights Log, Scheduling, Dispatch headers.
       .local = LMT (green), .utc = Zulu (cyan). */
    .time-unit-pill {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 8px;
    }

    .time-unit-pill.local {
      background: rgba(16, 185, 129, .12);
      color: var(--green);
      border: 1px dashed var(--green);
    }

    .time-unit-pill.utc {
      background: rgba(34, 211, 238, .12);
      color: #22d3ee;
      border: 1px dashed #22d3ee;;
    }

    #flightsTimeUnitNote {
      margin-top: 6px;
    }

    .club-local-time-note {
      margin-bottom: 16px;
    }


    /* ---- DISPATCH ---- */
    .dispatch-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .dispatch-tab {
      padding: 8px 18px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      font-size: 13px;
      color: var(--muted);
      font-family: var(--sans);
      transition: all .15s;
    }

    .dispatch-tab:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .2);
    }

    .dispatch-tab.active {
      color: var(--accent);
      border-color: rgba(59, 130, 246, .4);
      background: rgba(59, 130, 246, .08);
    }

    .dispatch-ac-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px;
      margin-bottom: 16px;
    }

    .dispatch-ac-title {
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dispatch-ac-sub {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 18px;
      font-family: var(--mono);
    }

    .dispatch-booking-row {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 0;
      min-width: 0;
    }

    .dispatch-booking-time {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 10px;
    }

    .dispatch-student-summary {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 6px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 500;
    }

    .dispatch-student-summary .sum-total { color: #fff; }
    .dispatch-student-summary .sum-xc { color: #67e8f9; }
    .dispatch-student-summary .sum-nf { color: #fc4d4d; }
    .dispatch-student-summary .sum-ir { color: #c4b5fd; }

    .dispatch-booking-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 14px;
      row-gap: 10px;
      margin-bottom: 10px;
    }

    .dispatch-booking-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .dispatch-booking-field.two-cols {
      grid-column: span 2;
    }

    .dispatch-booking-field-label {
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }

    .dispatch-booking-field-val {
      font-size: 12px;
      font-family: var(--mono);
      min-height: 32px;
      display: flex;
      align-items: center;
    }

    .dispatch-booking-grid .form-select {
      width: 100%;
    }

    .dispatch-booking-grid .exercise-badge-select {
      width: 100%;
    }

    .dispatch-booking-grid .exercise-badge-select.open {
      z-index: 25;
    }

    .dispatch-booking-grid .exercise-badge-trigger {
      width: 100%;
      min-height: 32px;
      height: 32px;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1;
    }

    .dispatch-booking-actions {
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .05);
    }

    .dispatch-booking-actions>* {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .dispatch-bookings-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .dispatch-bookings-table th {
      text-align: left;
      padding: 10px 14px;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      font-weight: 600;
    }

    .dispatch-bookings-table td {
      padding: 11px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
    }

    .dispatch-bookings-table tr:last-child td {
      border-bottom: none;
    }

    .dispatch-bookings-table tr:hover td {
      background: rgba(255, 255, 255, .02);
    }

    .lock-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(239, 68, 68, .1);
      border: 1px solid rgba(239, 68, 68, .3);
      color: #ef4444;
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      font-weight: 600;
      font-size: 13px;
      font-family: var(--sans);
      transition: all .15s;
    }

    .lock-btn:hover {
      background: rgba(239, 68, 68, .2);
    }

    .lock-btn.locked {
      background: rgba(16, 185, 129, .1);
      border-color: rgba(16, 185, 129, .3);
      color: var(--green);
    }

    /* tomorrow schedule */
    .tmr-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: visible;
      margin-bottom: 16px;
    }

    .tmr-card-header {
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10px 10px 0px 0px
    }

    .tmr-card-ac {
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 700;
    }

    .tmr-table {
      overflow: visible;
      --tmr-control-h: 32px;
    }

    .tmr-row {
      display: grid;
      grid-template-columns: var(--tmr-cols);
      min-width: 780px;
      gap: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
    }

    .tmr-row[draggable="true"] {
      cursor: grab;
    }

    .tmr-row[draggable="true"]:active {
      cursor: grabbing;
    }

    .tmr-row:last-child {
      border-bottom: none;
    }

    .tmr-cell {
      padding: 10px 14px;
      font-size: 12px;
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: visible;
    }

    .tmr-cell>* {
      min-width: 0;
    }

    .tmr-cell .exercise-badge-select {
      width: 100%;
      min-width: 0;
      position: relative;
      display: flex;
    }

    .tmr-cell .exercise-badge-select.open {
      z-index: 30;
    }

    .tmr-cell .form-select,
    .tmr-cell .search-box,
    .tmr-cell .exercise-badge-trigger {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: var(--tmr-control-h);
      min-height: var(--tmr-control-h);
      box-sizing: border-box;
      font-size: 11px;
      line-height: 1;
    }

    .tmr-cell .exercise-badge-trigger {
      padding: 4px 8px;
      border-radius: 8px;
    }

    .tmr-cell .exercise-badge-menu {
      min-width: 100%;
    }

    .tmr-cell .search-box {
      padding: 4px 8px;
    }

    .tmr-cell.head {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      background: transparent;
      padding: 8px 14px;
      display: flex;
      align-items: center;
    }

    .tmr-cell.time {
      font-family: var(--mono);
      font-weight: 700;
      color: var(--accent);
    }

    .tmr-row.dragging {
      opacity: .45;
    }

    .tmr-row.drag-over {
      box-shadow: inset 0 2px 0 var(--accent);
    }

    @media(min-width:769px) {
      .tmr-card:not(.dashboard-tmr-card) .tmr-table {
        display: grid;
        grid-template-columns: var(--tmr-cols);
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-row {
        display: contents;
        min-width: 0;
        border-bottom: 0;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .04);
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell:nth-child(3),
      .tmr-card:not(.dashboard-tmr-card) .tmr-cell:nth-child(3)>* {
        overflow: visible;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell:nth-child(3) {
        position: relative;
        z-index: 2;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell:nth-child(3):has(.exercise-badge-select.open) {
        z-index: 60;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell>* {
        max-width: 100%;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell:nth-child(4),
      .tmr-card:not(.dashboard-tmr-card) .tmr-cell:nth-child(4) span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-cell.time,
      .tmr-card:not(.dashboard-tmr-card) .tmr-cell.actions {
        justify-content: center;
        text-align: center;
      }

      .tmr-card:not(.dashboard-tmr-card) .tmr-row:last-child .tmr-cell {
        border-bottom: 0;
      }
    }

    @media(min-width:769px) {
      .dashboard-tmr-card {
        --dashboard-tmr-cols: minmax(0, 1.15fr) minmax(0, 1.15fr) 86px minmax(0, 1.35fr) 68px;
      }

      .dashboard-tmr-card .tmr-table {
        display: grid;
        grid-template-columns: var(--dashboard-tmr-cols);
        overflow-x: auto;
        overflow-y: visible;
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }

      .dashboard-tmr-card .tmr-row {
        display: contents;
        grid-template-columns: none;
        min-width: 0;
        width: auto;
        border-bottom: 0;
      }

      .dashboard-tmr-card .tmr-cell {
        padding: 10px 12px;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .04);
      }

      .dashboard-tmr-card .tmr-cell>* {
        max-width: 100%;
      }

      .dashboard-tmr-card .tmr-cell.time,
      .dashboard-tmr-card .tmr-cell.head:nth-child(5) {
        justify-content: flex-end;
        text-align: right;
      }

      .dashboard-tmr-card .tmr-row:last-child .tmr-cell {
        border-bottom: 0;
      }

      .dashboard-tmr-card .tmr-cell:nth-child(4),
      .dashboard-tmr-card .tmr-cell:nth-child(4) span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .wx-fetch-btn {
      background: rgba(59, 130, 246, .12);
      border: 1px solid rgba(59, 130, 246, .3);
      color: var(--accent);
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      transition: all .15s;
      white-space: nowrap;
    }

    .wx-fetch-btn:hover {
      background: rgba(59, 130, 246, .22);
    }

    .wx-sort-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 14px;
      cursor: pointer;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 12px;
      transition: all .15s;
      white-space: nowrap;
    }

    .wx-sort-btn.active {
      color: var(--accent);
      border-color: rgba(59, 130, 246, .4);
      background: rgba(59, 130, 246, .08);
    }

    .wx-sort-btn:hover {
      color: var(--text);
    }

    .wx-countdown {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      margin-left: auto;
    }

    .wx-countdown span {
      color: var(--accent2);
    }

    .wx-remove-btn {
      background: none;
      border: none;
      color: rgba(107, 114, 128, .5);
      cursor: pointer;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 4px;
      transition: all .15s;
      line-height: 1;
    }

    .wx-remove-btn:hover {
      color: var(--red);
      background: rgba(239, 68, 68, .1);
    }

    .wx-input {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 9px 14px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 13px;
      outline: none;
      letter-spacing: .05em;
      transition: border-color .15s;
      width: 200px;
    }

    .wx-input:focus {
      border-color: rgba(59, 130, 246, .5);
    }

    .wx-input::placeholder {
      color: var(--muted2);
      font-family: var(--sans);
      letter-spacing: 0;
      font-size: 12px;
    }

    /* compact cards grid */
    .wx-cards-grid {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 10px;
    }

    /* compact card */
    .wx-ccard {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: border-color .15s;
    }

    .wx-ccard.primary {
      border-color: rgba(59, 130, 246, .4);
    }

    .wx-ccard.primary::before {
      content: '';
      display: block;
      height: 2px;
      background: var(--accent);
    }

    .wx-ccard-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px 6px;
      background: linear-gradient(180deg, rgba(96, 165, 250, .18), rgba(96, 165, 250, .05));
      background-color: black;
    }

    .wx-ccard-icao {
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .04em;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .wx-primary-star {
      appearance: none;
      background: none;
      border: 0;
      color: rgba(107, 114, 128, .65);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      padding: 0 1px;
      transition: color .15s, transform .15s;
    }

    .wx-primary-star:hover {
      color: var(--accent4);
      transform: scale(1.12);
    }

    .wx-primary-star.is-primary {
      color: var(--accent4);
    }

    .wx-ccard-cat {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      min-width: 28px;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: .06em;
      text-align: center;
    }

    .wx-ccard-name {
      padding: 0 14px 4px;
      font-size: 10px;
      color: var(--muted);
    }

    .wx-ccard-dist {
      padding: 0 14px 4px;
      font-family: var(--mono);
      font-size: 9px;
      color: rgba(107, 114, 128, .7);
    }

    .wx-ccard-raw {
      padding: 6px 14px 10px;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text);
      line-height: 1.6;
      word-break: break-all;
      border-top: 1px solid rgba(255, 255, 255, .04);
    }

    .wx-almanac-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 14px;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      background: rgba(255, 196, 0, .06);
      border-top: 1px solid rgba(255, 255, 255, .04);
    }

    .wx-almanac-strip strong {
      color: var(--text);
      font-weight: 600;
    }

    .wx-ccard.open .wx-ccard-taf-preview {
      display: none;
    }

    .wx-metar-expanded-title {
      display: none;
    }

    .wx-ccard.open>.wx-metar-expanded-title {
      display: flex;
    }

    .wx-ccard.open .wx-metar-collapsed-pill {
      display: none;
    }

    .wx-ccard.open>.wx-metar-expanded-title+.wx-ccard-raw {
      border-top: 0;
    }

    .wx-below-vmc {
      color: var(--orange) !important;
    }

    /* Strong hazard (e.g. SNOCLO - aerodrome closed). */
    .wx-metar-hazard {
      color: var(--red) !important;
    }

    /* expanded panel */
    .wx-ccard-expanded {
      display: none;
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding: 14px;
    }

    .wx-ccard.open .wx-ccard-expanded {
      display: block;
    }

    .wx-exp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    .wx-trend-box {
      grid-column: span 3;
    }

    .wx-exp-validity {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .wx-exp-age.fresh {
      color: var(--green);
    }

    .wx-exp-age.stale {
      color: var(--red);
    }

    .wx-exp-item {
      background: rgba(255, 255, 255, .03);
      border-radius: 6px;
      padding: 8px 10px;
    }

    .wx-exp-label {
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 3px;
    }

    .wx-exp-val {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
    }

    .wx-exp-clouds {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .wx-cloud-chip {
      background: rgba(34, 211, 238, .08);
      border: 1px solid rgba(34, 211, 238, .15);
      color: #67e8f9;
      border-radius: 4px;
      padding: 2px 7px;
      font-family: var(--mono);
      font-size: 10px;
    }

    .wx-exp-phenom {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--orange);
      margin-bottom: 8px;
    }

    .wx-exp-taf-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent3);
      margin-bottom: 5px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .05);
    }

    .wx-exp-taf {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      line-height: 1.8;
      word-break: break-all;
      cursor: pointer;
    }

    .wx-taf-decoded {
      display: grid;
      gap: 8px;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text);
      cursor: pointer;
    }

    .wx-taf-decoded .wx-exp-val {
      color: var(--text);
    }

    .wx-taf-decoded .wx-taf-period,
    .wx-taf-decoded .wx-taf-period-head {
      color: var(--text) !important;
    }

    .wx-taf-decoded .wx-taf-line {
      color: var(--muted) !important;
    }

    .wx-taf-decoded .wx-taf-type {
      color: var(--accent3) !important;
    }

    .wx-taf-decoded .wx-taf-time {
      color: rgba(107, 114, 128, .9) !important;
    }

    .wx-taf-period {
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 6px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, .025);
    }

    .wx-taf-period.below-vmc {
      border-color: rgba(249, 115, 22, .25);
      background: rgba(249, 115, 22, .05);
      color: var(--orange);
    }

    .wx-taf-period.current .wx-taf-time,
    .wx-taf-period.below-vmc.current .wx-taf-time,
    .wx-taf-time.current {
      color: var(--accent2) !important;
      font-weight: 800;
    }

    .wx-taf-period.below-vmc .wx-taf-time {
      color: rgba(249, 115, 22, .75);
    }

    .wx-taf-period-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
    }

    .wx-taf-type {
      color: var(--accent3);
      font-weight: 700;
      letter-spacing: .08em;
    }

    .wx-exp-taf-label.metar-label,
    .wx-taf-type.metar-type {
      color: var(--text);
    }

    .wx-taf-time {
      color: rgba(107, 114, 128, .9);
      font-size: 9px;
    }

    .wx-taf-line {
      line-height: 1.7;
    }

    .wx-decode-pill {
      margin-left: auto;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 4px;
      padding: 2px 7px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0;
      text-transform: none;
      cursor: pointer;
    }

    .wx-decode-pill.decode {
      color: var(--accent4);
      background: rgba(245, 158, 11, .08);
    }

    .wx-decode-pill.raw {
      color: var(--accent2);
      background: rgba(34, 211, 238, .06);
    }

    .wx-decode-pill.decode:hover {
      border-color: rgba(245, 158, 11, .35);
      background: rgba(245, 158, 11, .14);
    }

    .wx-decode-pill.raw:hover {
      border-color: rgba(34, 211, 238, .35);
      background: rgba(34, 211, 238, .12);
    }

    .wx-exp-time {
      font-family: var(--mono);
      font-size: 9px;
      color: var(--muted);
    }

    .wx-spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255, 255, 255, .1);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .8s linear infinite;
      display: inline-block;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }


    .page.active>* {
      animation: fadeUp .35s ease both;
    }

    .page.active>*:nth-child(2) {
      animation-delay: .05s;
    }

    .page.active>*:nth-child(3) {
      animation-delay: .1s;
    }

    .page.active>*:nth-child(4) {
      animation-delay: .15s;
    }

    /* ---- FINAL RESPONSIVE OVERRIDES ---- */
    @media(max-width:768px) {
      .sched-name-bar,
      .sched-week-nav,
      .dispatch-tabs {
        align-items: stretch;
      }

      .sched-date-label {
        min-width: 0;
        width: 100%;
        order: -1;
      }

      #sched-nav-week-prev {
        order: 1;
      }

      #sched-nav-day-prev {
        order: 2;
      }

      #sched-nav-this-week {
        order: 3;
      }

      #sched-nav-day-next {
        order: 4;
      }

      #sched-nav-week-next {
        order: 5;
      }

      .sched-week-nav {
        justify-content: center;
      }

      .nav-week-prev {
        order: 1;
      }

      .nav-day-prev {
        order: 2;
      }

      .nav-tomorrow {
        order: 3;
      }

      .nav-day-next {
        order: 5;
      }

      .nav-week-next {
        order: 6;
      }

      .sched-week-nav {
        gap: 6px;
      }

      .sched-week-nav .sched-nav-btn {
        padding: 7px 10px;
        font-size: 12px;
      }

      .dispatch-booking-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .dispatch-booking-field[style*="grid-column:1 / span 2"]:not(.two-cols),
      .dispatch-booking-field[style*="grid-column:1/-1"] {
        grid-column: auto !important;
      }

      .dispatch-booking-actions {
        flex-direction: row;
        flex-wrap: nowrap;
      }

      .dispatch-booking-actions>* {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        justify-content: center;
      }

      .tmr-card {
        overflow: visible;
      }

      .tmr-card-header {
        gap: 8px;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
      }

      .tmr-table {
        overflow: visible;
      }

      .tmr-row {
        min-width: 680px;
      }

      .sched-cal-wrap {
        -webkit-overflow-scrolling: touch;
      }

      .cal-daily-grid {
        grid-template-columns: repeat(7, minmax(40px, 1fr));
        min-width: 0;
      }

      .cal-daily-grid .cal-day-header,
      .cal-daily-grid .cal-corner {
        min-width: 0;
        padding: 6px 2px;
      }

      .cal-daily-grid .cal-day-date {
        font-size: 11px;
      }

      .wx-exp-grid {
        grid-template-columns: 1fr;
      }

      .wx-trend-box {
        grid-column: auto;
      }

      .wx-metar-card-grid {
        grid-template-columns: 1fr 1fr;
      }

      .wx-metar-card-grid .wx-exp-item:nth-child(n+5) {
        grid-column: span 2;
      }

      .cal-time-label {
        background: #15171d;
      }

      .cal-corner {
        background: #15171d;
      }



      .tmr-card {
        border-radius: 12px;
        max-width: 100%;
      }

      .tmr-table {
        display: grid;
        gap: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        --tmr-control-h: 28px;
      }

      .tmr-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 48px minmax(0, .5fr) 55px;
        gap: 4px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .04);
        border-radius: 0;
        background: transparent;
        padding: 7px 8px;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow: visible;
      }

      .tmr-row:first-child {
        display: grid;
        background: transparent;
        border-bottom: 1px solid var(--border);
        padding-top: 9px;
        padding-bottom: 9px;
      }

      .tmr-row:first-child .tmr-cell,
      .tmr-row:not(:first-child) .tmr-cell {
        min-width: 0;
      }

      .tmr-row:first-child .tmr-cell:nth-child(1),
      .tmr-row:not(:first-child) .tmr-cell:nth-child(1) {
        grid-column: 1;
      }

      .tmr-row:first-child .tmr-cell:nth-child(2),
      .tmr-row:not(:first-child) .tmr-cell:nth-child(2) {
        grid-column: 2;
      }

      .tmr-row:first-child .tmr-cell:nth-child(3),
      .tmr-row:not(:first-child) .tmr-cell:nth-child(3) {
        grid-column: 3;
      }

      .tmr-row:first-child .tmr-cell:nth-child(4),
      .tmr-row:not(:first-child) .tmr-cell:nth-child(4) {
        grid-column: 4;
      }

      .tmr-row:first-child .tmr-cell:nth-child(5),
      .tmr-row:not(:first-child) .tmr-cell:nth-child(5) {
        grid-column: 5;
      }

      .tmr-cell {
        display: block;
        min-height: 0;
        padding: 0;
        min-width: 0;
        font-size: 10px;
      }

      .tmr-cell.head {
        display: block;
        font-size: 9px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
        line-height: 1.2;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tmr-row:first-child .tmr-cell:nth-child(5) {
        text-align: right;
      }

      .tmr-row:first-child .tmr-cell:nth-child(4) {
        min-width: 0;
        visibility: hidden;
      }


      .tmr-cell::before {
        display: none;
      }

      .tmr-cell.time {
        color: var(--accent);
      }

      .tmr-cell .form-select,
      .tmr-cell .form-input,
      .tmr-cell .search-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: var(--tmr-control-h) !important;
        min-height: var(--tmr-control-h) !important;
        box-sizing: border-box;
        font-size: 9px !important;
        padding: 3px 5px !important;
        line-height: 1 !important;
      }

      .tmr-cell .exercise-badge-select,
      .tmr-cell .exercise-badge-trigger {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .tmr-cell .exercise-badge-trigger {
        padding: 3px 5px;
        justify-content: center;
        gap: 3px;
        font-size: 9px;
        height: var(--tmr-control-h);
        min-height: var(--tmr-control-h);
        line-height: 1;
      }

      .tmr-cell:nth-child(3),
      .tmr-cell:nth-child(3) .exercise-badge-select {
        overflow: visible;
        position: relative;
      }

      .tmr-cell:nth-child(3) .exercise-badge-select.open {
        z-index: 20;
      }

      .tmr-cell,
      .tmr-cell>* {
        max-width: 100%;
      }

      .tmr-cell:last-child {
        display: block;
      }

      .tmr-cell.actions {
        display: none !important;
      }

      .tmr-cell:nth-child(4),
      .tmr-cell:nth-child(4) span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tmr-cell:nth-child(4) {
        min-width: 0;
      }

      .tmr-cell:nth-child(5) {
        text-align: right;
        justify-self: end;
        width: 100%;
      }

      .tmr-cell.time,
      .tmr-cell.time select {
        font-size: 9px !important;
      }

      .tmr-cell .filter-btn {
        min-height: 24px;
        width: 100%;
        padding: 2px 0 !important;
      }
    }

    @media (hover:none) {
      .stat-card:hover,
      .aircraft-card:hover {
        transform: none;
      }
    }

    @media(max-width:768px) {
      .instructor-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
      }

      .instructor-table,
      .instructor-table tbody,
      .instructor-table tr,
      .instructor-table td {
        display: block;
        width: 100%;
      }

      .instructor-table {
        min-width: 0 !important;
        border-collapse: separate;
      }

      .instructor-table thead {
        display: none;
      }

      .instructor-table tbody {
        display: grid;
        gap: 12px;
      }

      .instructor-table tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
      }

      .instructor-table tbody tr:hover {
        background: var(--surface);
      }

      .instructor-table td {
        padding: 0;
      }

      .instructor-table td+td {
        margin-top: 12px;
      }

      .instructor-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 9px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
      }

      .instructor-table td:first-child {
        font-size: 15px;
      }

      .instructor-table td:first-child::before {
        display: none;
      }

      .instructor-table .rating-blocks {
        gap: 6px;
      }
    }

    /* ---- Colored button variants -----------------------------------------
       Compose with a base button class (filter-btn / add-flight-btn / lock-btn):
       btn-c-* sets the text + border tint, btn-c-*-fill adds a soft background.
       !important so variants beat the base classes' hover/active/state rules,
       matching how the old inline styles behaved. Fills come last so their
       border tint wins when combined with a different text color. */
    .btn-c-green { color: var(--green) !important; border-color: rgba(16, 185, 129, .4) !important; }
    .btn-c-blue { color: var(--accent) !important; border-color: rgba(59, 130, 246, .4) !important; }
    .btn-c-white { color: #fff !important; border-color: rgba(255, 255, 255, .3) !important; }
    .btn-c-amber { color: #fbbf24 !important; border-color: rgba(251, 191, 36, .3) !important; }
    .btn-c-orange { color: var(--orange) !important; border-color: rgba(249, 115, 22, .35) !important; }
    .btn-c-red { color: var(--red) !important; border-color: rgba(239, 68, 68, .3) !important; }
    .btn-c-muted { color: var(--muted) !important; }
    .btn-c-green-fill { background: rgba(16, 185, 129, .12) !important; }
    .btn-c-amber-fill { background: rgba(251, 191, 36, .12) !important; border-color: rgba(251, 191, 36, .3) !important; }

    /* Compact button sizes (previously inline font-size/padding) */
    .btn-sm { font-size: 11px; }
    .btn-compact { font-size: 11px; padding: 6px 14px; }
    .btn-xs { font-size: 10px; padding: 3px 8px; }

    /* ---- Scheduling "Daily" calendar view — cosmetic-only pass -----------
       Scoped to .cal-daily-grid so the Quarter/Hourly header row (which reuses
       the same .cal-day-header/.today/.tomorrow classes) keeps its original
       look untouched. Today/tomorrow become a small pill on the date number
       instead of a whole-cell tint; day-selection (available) and locked/past
       days keep their original full-cell background highlight. No logic or
       markup changes; same classes, same click handlers, same computed states. */
    .cal-daily-grid .cal-day-header {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cal-daily-grid .cal-day-header.today:not(.available):not(.locked),
    .cal-daily-grid .cal-day-header.tomorrow:not(.available):not(.locked) {
      background: transparent;
    }

    .cal-daily-grid .cal-day-header.today .cal-day-date,
    .cal-daily-grid .cal-day-header.tomorrow .cal-day-date {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 26px;
      min-height: 0;
      padding: 0 7px;
      border-radius: 999px;
      color: #fff;
    }

    .cal-daily-grid .cal-day-header.today .cal-day-date {
      background: var(--green);
    }

    .cal-daily-grid .cal-day-header.tomorrow .cal-day-date {
      background: var(--accent);
    }

    /* Locked-day red border — edit the color/width right here to change it.
       Applies to every locked day (including today/tomorrow) in the Daily
       view's day cells and the Quarter/Hourly views' day-header row, since
       it's a separate box-shadow property, not a background, so it never
       fights with the pill badge above. Left off .locked.available (the "you
       marked yourself available on a now-locked day" conflict cell), which
       keeps its own amber ring from the original rule instead. */
    .cal-daily-grid .cal-day-header.locked:not(.available),
    .cal-day-header.locked.cal-day-header-row {
      box-shadow: inset 0 0 0 1px #ef444426;
    }