/* Stop iOS Safari from enlarging text in wide boxes. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :root {
    --navy: #233C86;
    --navy-deep: #16234F;
    --red: #FF0000;
    --ink: #1B1F27;
    --paper: #F7F7F5;
    --line: #DDDDD8;
    --gold: #B98A2E;
  }
  @keyframes authCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none !important; }
  }
  #authGate { min-height: 100vh; width: 100%; box-sizing: border-box; }
  .auth-split { display: flex; min-height: 100vh; width: 100%; }
  .auth-hero {
    flex: 0 0 42%;
    background: linear-gradient(155deg, var(--navy-deep), var(--navy));
    color: white;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .auth-hero-top { display: flex; align-items: center; gap: 12px; }
  .auth-hero-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
  .auth-hero-wordmark { font-family: Georgia, serif; font-size: 20px; font-weight: 700; margin: 0; }
  .auth-hero-headline { font-family: Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.28; margin: 0 0 14px; }
  .auth-hero-sub { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.55; margin: 0 0 32px; max-width: 380px; }
  .auth-feature-row { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
  .auth-feature-icon { width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .auth-feature-icon svg { width: 15px; height: 15px; }
  .auth-feature-title { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; }
  .auth-feature-body { font-size: 12px; color: rgba(255,255,255,0.65); margin: 0; line-height: 1.4; }
  .auth-hero-footer { font-size: 11.5px; color: rgba(255,255,255,0.5); margin: 0; }
  .auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--paper); box-sizing: border-box; }
  @media (max-width: 860px) {
    .auth-hero { display: none; }
  }
  .auth-wrap { width: 100%; max-width: 400px; }
  .auth-card {
    background: white; border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(22, 35, 79, 0.16), 0 2px 8px rgba(22, 35, 79, 0.08);
    animation: authCardIn 0.5s ease-out both;
  }
  .auth-cover-mobile {
    background: linear-gradient(155deg, var(--navy-deep), var(--navy));
    padding: 34px 30px 28px;
    color: white;
  }
  .auth-wordmark { font-family: Georgia, serif; font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: 0.01em; }
  .auth-tagline { font-size: 13.5px; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.5; max-width: 30ch; }
  .auth-card-title, .auth-card-subtitle { display: none; }
  @media (min-width: 861px) {
    .auth-cover-mobile { display: none; }
    .auth-card-title, .auth-card-subtitle { display: block; }
  }
  .auth-card-title { font-family: Georgia, serif; color: var(--navy); font-size: 19px; font-weight: 700; margin: 0 0 4px; }
  .auth-card-subtitle { font-size: 13px; color: #888; margin: 0 0 22px; }
  .auth-body { padding: 30px 30px 28px; }
  .auth-login-btn {
    width: 100%; background: var(--navy); color: white; border: none; border-radius: 8px;
    padding: 13px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease;
  }
  .auth-login-btn:hover { background: var(--navy-deep); }
  .auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
  .auth-divider .rule { flex: 1; height: 1px; background: var(--line); }
  .auth-divider .word { font-size: 12px; color: #999; }
  .auth-trial-toggle-row { text-align: center; }
  .auth-trial-link {
    background: none; border: none; color: var(--navy); font-size: 13.5px; font-weight: 600;
    cursor: pointer; padding: 6px 4px; border-bottom: 1px solid transparent;
  }
  .auth-trial-link:hover { border-bottom-color: var(--navy); }
  .auth-trial-panel {
    text-align: left; margin-top: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  }
  .auth-trial-panel input {
    width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px;
    margin-bottom: 9px; box-sizing: border-box; font-family: inherit;
  }
  .auth-trial-panel input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
  /* Plan picker on the trial form: two selectable cards (the radio itself is hidden) */
  .trial-plan-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
  .trial-plan { display: block; cursor: pointer; }
  .auth-trial-panel .trial-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none; }
  .trial-plan .tp-card { position: relative; display: flex; flex-direction: column; gap: 3px; height: 100%; box-sizing: border-box;
    padding: 11px 12px 11px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
  .trial-plan .tp-name { font-size: 13.5px; font-weight: 700; color: var(--navy); padding-right: 22px; line-height: 1.25; }
  .trial-plan .tp-desc { font-size: 12px; color: #6B7280; line-height: 1.35; }
  .trial-plan .tp-check { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #C5CAD6; background: #fff; box-sizing: border-box; }
  .trial-plan:hover .tp-card { border-color: #9AA6C8; }
  .trial-plan input:checked + .tp-card { border-color: var(--navy); background: #F3F5FB; box-shadow: 0 0 0 3px rgba(35,60,134,.10); }
  .trial-plan input:checked + .tp-card .tp-check { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px #fff; }
  .trial-plan input:focus-visible + .tp-card { outline: 2px solid var(--gold); outline-offset: 1px; }
  @media (max-width: 360px) { .trial-plan-choice { grid-template-columns: 1fr; } }
  .auth-footer-links { max-width: 400px; text-align: center; margin: 22px auto 0; font-size: 12.5px; }
  .auth-footer-links a { color: #999; text-decoration: none; margin: 0 10px; }
  .auth-footer-links a:hover { color: var(--navy); text-decoration: underline; }
  * { box-sizing: border-box; }
  html, body { overflow-x: clip; } /* backstop — the page itself should never scroll sideways; anything that genuinely needs horizontal scroll (like a wide table) gets its own contained overflow-x instead. Using clip rather than hidden here specifically -- per the CSS spec, setting only overflow-x to a non-"visible" value forces the OTHER axis's computed value from "visible" to "auto" too, which would silently turn html/body into their own scroll container instead of the real viewport -- and once that happens, any position:sticky element inside sticks relative to that (never-actually-scrolling, since body's height isn't constrained) container instead of the page, and visibly stops working. clip is exempt from that conversion rule, so overflow-y stays genuinely visible and the viewport remains the one true scrolling context. */
  body {
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    margin: 0;
    padding: 18px 16px 40px;
  }
  #app { max-width: 900px; margin: 0 auto; }
  /* 900px was previously a hard cap on every screen. This keeps that
     exact behavior for anything narrower (all mobile/tablet widths —
     deliberately untouched, since forcing a 900px floor there would
     force horizontal scrolling on a phone), but on genuinely larger
     screens the app now grows to use the extra space instead of
     leaving it empty on either side, capped at 1400px so it doesn't
     stretch into unreadably long lines on an ultrawide monitor. */
  #logoTitleGroup { order: 1; }
  #logoTitleGroup h1 { display: none; }
  #headerFullLogo { display: none; }
  #headerDate { display: none; }
  #headerIconsRow { order: 2; width: auto; margin-left: auto; }
  @media (min-width: 940px) {
    #app { max-width: 1400px; width: 90%; }
    #logoTitleGroup h1 { display: block; }
    #headerDate { display: block; order: 2; margin-left: auto; }
    #headerIconsRow { order: 3; width: auto; margin-left: 0; }
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--navy);
    padding-bottom: 10px;
    margin-bottom: 6px;
  }
  #logoTitleGroup h1 {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
  }
  .head .date { font-size: 13px; color: #666; }
  #statusBox { font-size: 11px; color: #999; margin: 0 0 18px; min-height: 14px; }
  #statusBox.error { color: #900; }
  .entry-row { display: flex; gap: 8px; margin-bottom: 6px; }
  #taskInput {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 15px;
    font-family: Calibri, sans-serif;
  }
  #taskInput:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
  #addBtn {
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  #addBtn:active { background: #1a2d66; }
  .section-label {
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin: 22px 0 8px;
  }
  .page-header {
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--navy);
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .page-header svg { flex-shrink: 0; }
  .today-list, .report-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: white;
  }
  .today-list li, .report-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }
  .today-list li:nth-child(even), .report-list li:nth-child(even) { background: #F0F1F5; }
  .today-list li:last-child, .report-list li:last-child { border-bottom: none; }
  #claimableTasksList li { border-bottom-color: #C9EDE5; }
  #claimableTasksList li:nth-child(even) { background: #E1F6F0; }
  #messagesContactsList li:nth-child(even) { background: none; }
  #messagesContactsList li:hover { background: #FAFAFA; }
  .entry-time { color: #888; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .entry-text { flex: 1; }
  .del-btn {
    background: none; border: none; color: var(--red);
    font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
  }
  .empty { padding: 14px 12px; font-size: 13px; color: #888; font-style: italic; background: white; }
  .report-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .report-controls button {
    background: white; border: 1px solid var(--navy); color: var(--navy);
    border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap; flex-shrink: 0; transition: background 0.15s, box-shadow 0.15s;
  }
  .report-controls button.active { background: var(--navy); color: white; box-shadow: 0 2px 6px rgba(35,60,134,0.35); }
  #taskCardActionRow button { white-space: nowrap; flex-shrink: 0; }
  .tab-btn {
    background: white; border: 1px solid var(--navy); color: var(--navy);
    border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; flex-shrink: 0;
  }
  .tab-btn svg { flex-shrink: 0; }
  .tab-btn.active { background: var(--navy); color: white; }
  /* Second-level tab rows (Flight Ops, Billing, Hangar, Training, Reports ...):
     a tidy wrap on desktop, a two-column grid of equal buttons on phones. */
  .sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  @media (max-width: 700px) {
    .sub-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sub-tabs > .tab-btn { width: 100%; min-width: 0; box-sizing: border-box; justify-content: flex-start;
      padding: 9px 10px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
    .sub-tabs > .tab-btn .fo-pill { margin-left: auto !important; }
  }
  #usersSubNavRow .tab-btn { flex: 1 1 calc(50% - 4px); justify-content: center; box-sizing: border-box; }
  #timeSummaryRangeRow button { flex: 1 1 calc(33.333% - 6px); text-align: center; box-sizing: border-box; }
  @media (max-width: 480px) {
    #topNav .tab-btn { flex: 1 1 30%; padding: 7px 6px; font-size: 12px; justify-content: center; box-sizing: border-box; }
    #topNav { margin-bottom: 6px !important; }
    #statusBox { margin-bottom: 4px; min-height: 0; }
    #taskCardKitTemplateSelect { min-width: 90px !important; }
    #taskCardKitSaveAsTemplateBtn { font-size: 11px !important; padding: 6px 8px !important; }
    #taskCardKitDescInput { min-width: 100px !important; }
    #taskCardKitPnInput { min-width: 50px !important; }
    #taskCardKitLocationInput { min-width: 90px !important; }
    #taskCardActionRow button { padding: 6px 9px !important; font-size: 12px !important; }
    #userEmail { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  }
  #usersList.user-list li {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px; border-bottom: 1px solid var(--line);
  }
  #usersList.user-list li:nth-child(even) { background: #F0F1F5; }
  #usersList.user-list li:last-child { border-bottom: none; }
  .user-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .user-email { font-weight: 600; color: var(--ink); font-size: 14px; }
  .user-meta { font-size: 12px; color: #888; margin-top: 2px; }
  .role-pills { display: flex; gap: 6px; flex-wrap: wrap; }
  .section-toggle-btn { background: none; border: none; padding: 2px; cursor: pointer; color: #999; display: inline-flex; align-items: center; flex-shrink: 0; }
  .section-count-badge { display: none; font-size: 10.5px; font-weight: 700; color: white; background: #99a2b8; border-radius: 9px; padding: 1px 7px; margin-left: 6px; }
  .section-count-badge.visible { display: inline-block; }
  .section-toggle-btn svg { transition: transform 0.15s ease; }
  .section-toggle-btn.collapsed svg { transform: rotate(-90deg); }
  .role-pill {
    background: white; border: 1px solid var(--line); color: #888;
    border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .role-pill.active { background: var(--navy); border-color: var(--navy); color: white; }
  .user-icon-actions { display: flex; gap: 6px; }
  .icon-btn {
    background: white; border: 1px solid var(--line); color: var(--navy);
    border-radius: 4px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
  }
  .icon-btn.danger { color: var(--red); }
  .icon-btn.danger:hover { background: #FFE8E8; border-color: var(--red); }
  .report-controls input[type=date] {
    border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: 13px; flex: 1;
  }
  .report-heading { font-size: 13px; color: #555; margin: 0 0 8px; }
  hr.rule { border: none; height: 1px; margin: 26px 0 18px; background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }

/* Current workspace pill (next to "MRO Tracker" in the header): full
   group name on desktop, single-letter abbreviation on mobile, to
   avoid pushing the header into wrapping on a narrow screen. Same
   860px breakpoint the rest of the app already treats as "mobile". */
#currentWorkspaceLabelShort { display: none; }
@media (max-width: 860px) {
  #currentWorkspaceLabelFull { display: none; }
  #currentWorkspaceLabelShort { display: inline; }
}


/* iPhone / iPad Safari draws date and time fields at their own intrinsic width
   and height, so in a two-column form they spill past the cell and sit taller
   than the text boxes beside them. Make them size like any other input. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    min-height: 2.35em;
    line-height: 1.2;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value,
  input[type="month"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
  }
}