/* ============================================================
   BASE / RESET
   ============================================================ */
body{
    margin: 0;
}

/* ============================================================
   PAGE BACKGROUND
   ============================================================ */
#page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/index_background_image.jpeg);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* ============================================================
   STICKY FOOTER LAYOUT
   these settings prevent the footer from appearing in the middle
   of the screen if there is not enough content to fill the page
   ============================================================ */
main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav-wrapper {
    position: relative; /* anchors brand-logo's centering and #upload-new-pdf-btn's left placement to the nav bar itself, not the viewport */
    --nav-scale: 1; /* 1 = 0.8rem/36px/normal padding; 0.75 = the 0.6rem floor. Set by JS. */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: calc(64px * var(--nav-scale));
    padding: 0 20px;
    box-sizing: border-box;
    transition: height 0.12s ease-out;
}
.nav-wrapper.nav-wrap-2-row {
    --nav-scale: 1; /* force full size once wrapping to 2 rows */
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
.transparent {
    background-color: rgba(0, 0, 0, 0) !important;
}
.nav-btn {
    display: inline-flex;
    flex-shrink: 0; /* stops flex from squishing buttons on its own - all
                        shrinking is driven explicitly through --nav-scale instead */
    padding: 0 5px;
}
.nav-wrapper.nav-wrap-2-row .nav-btn {
    margin-bottom: 8px;
}
/* font-size, height, and padding all scale together off the same variable,
   so buttons shrink proportionally rather than just their text */
.nav-btn > a.btn {
    font-size: calc(0.8rem * var(--nav-scale));
    height: calc(36px * var(--nav-scale));
    line-height: calc(36px * var(--nav-scale));
    padding: 0 calc(16px * var(--nav-scale));
}
nav .brand-logo {
    left: 50%;
    top: 50%;
    position: absolute;
    color: black;
    display: inline-block;
    font-size:  clamp(5px, 2.1rem, 2.1rem);
    padding: 0;
    transform: translate(-50%, -50%);
    text-decoration: none;
}
/* upload_pdf_page.php's nav button. Deliberately NOT using .left (float) -
   floats have no effect on children of a flex container, and .nav-wrapper
   is display:flex, so a float-based approach silently does nothing here.
   Absolute positioning (same technique as .brand-logo above) sidesteps
   that entirely and keeps the button pinned to the left regardless of
   the nav's flex layout or scaling. */
#upload-new-pdf-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}
/* ============================================================
   BUTTON / COLOR UTILITIES
   ============================================================ */
.blue {
    background-color: #1976D2;
}
.green {
    background-color: rgb(38, 113, 40);
}
/* generic red button state, mirrors .blue/.green - used to mark a
   reference-grid button as "currently being edited" and to flip the
   submit button into its "Update in Database" state */
.red {
    background-color: #c62828;
}
.btn{
    text-decoration: none;
    color: #fff;
    text-align: center;
    letter-spacing: .5px;
    -webkit-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
.btn:active{
    background-color: #3c5b7a;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}
h5 {
    font-size: clamp(5px, 1.64rem, 1.64rem);
    line-height: 110%;
    margin: 1.0933333333rem 0 .656rem 0;
}
html {
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: normal;
    font-size:  clamp(5px, large, large);
    color: rgba(0, 0, 0, 0.87);
}
.small-text {
    font-size: 0.8rem;
}

/* ============================================================
   GENERAL LAYOUT / MISC UTILITY CLASSES
   ============================================================ */
.z-depth-1, nav, .card-panel, .card, .toast, .btn, .dropdown-content, .collapsible, .sidenav {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.black {
    background-color: #000 !important;
}
.grey-text {
    color: #9e9e9e !important;
}
.black-text {
    color: black !important;
}
.white {
    background-color: #fff !important;
}
.overlap-box{
    background: #f8f8f8;
    width: 30%;
    padding-top: 5px;
    padding-bottom: 20px;
    margin-top: 70px;
    display: block;
}
#overlap-box-welcome{
    margin-top: 20px;
}
.container{
    margin: 0 auto;
    max-width: 1280px;
    display: block;
}
.button-container-div{
    padding: 20px 40px 0 40px;
}
.gray-background{
    background-color: #6e6e6eff;
}
.right {
    float: right !important;
    margin-right: 20px;
}
.left {
    float: left !important;
}
.center{
    text-align: center;
}

/* ============================================================
   GENERIC FORM / INPUT STYLES (site-wide underline style)
   ============================================================ */
label {
    font-size: .8rem;
    color: #9e9e9e;
}
input[type=text]:not(.browser-default) {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: border .3s, -webkit-box-shadow .3s;
    transition: border .3s, -webkit-box-shadow .3s;
    transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
}
input[type="text" i] {
    padding-block: 1px;
    padding-inline: 2px;
}
form{
    max-width: 460px;
    margin: 20px auto;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

/* ============================================================
   DASHBOARD PAGE
   ============================================================ */
.dashboard-menu-button-container{
    display: inline-block;
    margin: 0;
}
.dashboard-container{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 20px;
    margin-right: 20px;
    max-width: 1280px;
    display: block;
}

/* ============================================================
   UPLOAD PDF PAGE - review/edit form (#edit-form-container)
   Compact, boxed inputs override the site-wide underline-only
   text input style, since a dense grid of small fields reads
   better boxed.
   ============================================================ */
#edit-form-container .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
#edit-form-container .field-block {
    display: flex;
    flex-direction: column;
}
#edit-form-container .field-block label {
    font-size: 0.72rem;
    color: #757575;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
#edit-form-container input[type="text"] {
    border: 1px solid #ccc !important;
    border-radius: 3px;
    padding: 5px 7px !important;
    font-size: 0.85rem;
    height: auto !important;
    width: 140px !important; /* explicit base width - width-half/width-large below scale relative to this */
    margin: 0 !important;
    box-sizing: border-box;
}
#edit-form-container .field-block.width-half input[type="text"] {
    width: 70px !important; /* half of the 140px base */
}
#edit-form-container .field-block.width-large input[type="text"] {
    width: 210px !important; /* 150% of the 140px base */
}
#edit-form-container .field-block.width-three-quarters input[type="text"] {
    width: 105px !important;
}
#edit-form-container .field-block.width-extra-large input[type="text"] {
    width: 300px !important;
}
#edit-form-container .field-block.field-highlight-yellow {
    background-color: #fff9c4; /* light yellow - Date, Flt Time and every leg's Leg time; the highlighted fields that AREN'T foreign-key validated */
    padding: 6px 8px 8px 8px;
    border-radius: 4px;
}
#edit-form-container .field-block.field-highlight-blue {
    background-color: #bbdefb; /* light blue - marks a field that must match an existing database value */
    padding: 6px 8px 8px 8px;
    border-radius: 4px;
}
#edit-form-container h6 {
    font-weight: 600;
    color: #444;
    margin: 22px 0 8px 0;
    font-size: 0.95rem;
}
#edit-form-container .leg-block {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 18px;
}
/* "Leg 1" etc. - no margin above it; the leg block's own padding already
   spaces it from the border. */
#edit-form-container .leg-block > h6 {
    margin-top: 0;
}
#edit-form-container .leg-columns {
    display: flex;
    margin-top: 12px;
}
#edit-form-container .leg-column-left {
    flex: 1;
    padding-right: 20px;
    border-right: 1px solid #ccc; /* the vertical divider between Passengers and Maneuvers */
}
#edit-form-container .leg-column-right {
    flex: 1;
    padding-left: 20px;
}
#edit-form-container .leg-columns > div > label {
    display: block;
    font-size: 0.72rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 8px;
    font-weight: bold;
}
#edit-form-container .passenger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
#edit-form-container .add-activity-btn,
#edit-form-container .add-operation-btn {
    display: block; /* stacks the PIC and SIC buttons one under the other, rather than side-by-side inline */
    font-size: 0.75rem;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    margin-top: 4px;
}
#edit-form-container .duty-entries,
#edit-form-container .activity-entries {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}
#edit-form-container .activity-entries {
    margin-top: 10px;
}
#edit-form-container .duty-entry-row,
#edit-form-container .activity-entry-row,
#edit-form-container .operation-entry-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
/* PIC/SIC Duty Log value boxes (Duty Time / Activity Time) - colored live
   by refreshDutyLogColors() in upload_pdf_page.php from how that value
   compares to the same operation added up across the legs: green = they
   match, red = the legs add up to LESS than the Duty Log value, yellow =
   the legs add up to MORE. Display only - the upload check itself is
   computed from the numbers, never from these classes. Selector carries
   the #edit-form-container id so it beats the site-wide
   input[type=text]:not(.browser-default) transparent background. */
#edit-form-container input.duty-status-green {
    background-color: #a5d6a7;
}
#edit-form-container input.duty-status-red {
    background-color: #ef9a9a;
}
#edit-form-container input.duty-status-yellow {
    background-color: #fff176;
}
.review-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    min-height: 36px;
}
.review-header h5 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
}

/* ============================================================
   DATABASE EDIT PAGE - dynamic table editor
   ============================================================ */

/* ---- container override: editor is always at least 90% of the
   screen, even though .container elsewhere caps out at 1280px ---- */
#gui-area-container.gui-area-editor-active {
    max-width: none;
}

/* ---- overall wrapper: left form / divider / right reference grid ---- */
.edit-table-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 90vw;
    margin-top: 10px;
    box-sizing: border-box;
}
.edit-table-left {
    padding: 20px;
    box-sizing: border-box;
}
.edit-table-divider {
    width: 1px;
    align-self: stretch;
    background-color: #ddd;
    margin: 25px 24px; /* 25px gap top/bottom so the line doesn't touch the container edges */
}
.edit-table-right {
    flex: 1 1 auto;
    padding: 20px;
    box-sizing: border-box;
    min-width: 0; /* lets the button row shrink instead of overflowing the flex row */
    position: relative; /* anchors the record modal */
}

/* The title at the top of each display area ("Flight Sheets", "Existing
   Regions", "Add to Fuel Contracts"...) - no margin above it, since the
   section's own 20px padding already spaces it from the edge. Direct
   children only, so headings inside modals aren't affected. */
.edit-table-left > h5,
.edit-table-right > h5 {
    margin-top: 0;
}

/* ---- left section: add/edit form fields ---- */
.edit-table-field-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left-aligned, including checkboxes */
    margin-bottom: 14px;
}
.edit-table-field-block label {
    font-size: 1.08rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 3px;
}
.edit-table-field-block input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 0.9rem;
    box-sizing: border-box;
    width: 100%;
}
.edit-table-field-block input[type="checkbox"] {
    margin: 0;
}
.edit-table-status {
    margin-top: 10px;
    text-align: center;
}

/* ---- right section: reference grid of existing records ---- */
.edit-table-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.edit-table-key-btn {
    width: auto; /* sized to its own text rather than a fixed grid cell */
    white-space: nowrap;
}

/* ---- record modal: compact popup showing one record's full data ---- */
.edit-table-record-modal {
    position: absolute;
    width: fit-content;
    max-width: calc(100% - 20px);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 5;
    box-sizing: border-box;
    overflow: visible; /* so the close/edit buttons can overhang without being clipped */
    opacity: 0;
}
.edit-table-record-modal-close {
    position: absolute;
    top: -13px;   /* 50% of the 26px diameter, so it overhangs the top edge */
    right: -13px; /* 50% of the 26px diameter, so it overhangs the right edge */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background-color: #1976D2;
    color: #fff;
    font-size: 0.8rem;
    line-height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 6;
}
.edit-table-record-modal-edit {
    position: absolute;
    top: -13px;   /* same 13px overhang as the close button */
    left: -13px;
    height: 26px; /* matches the close button's height */
    padding: 0 10px;
    border-radius: 4px;
    border: none;
    background-color: #1976D2;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 26px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 6;
}
.edit-table-record-modal-edit:disabled {
    opacity: 0.5;
    cursor: default;
}
.edit-table-record-modal-inner {
    overflow-x: hidden;
}
.edit-table-record-list {
    display: grid;
    grid-template-columns: max-content minmax(80px, 1fr);
    column-gap: 24px;
    margin-top: 10px;
}
.edit-table-record-row {
    display: contents; /* the row div stops being a box itself - its two
                           children (label, value) become direct grid items,
                           lining up in the grid's two columns */
}
.edit-table-record-label {
    font-size: 0.75rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.edit-table-record-value {
    font-size: 0.9rem;
    color: #212121;
    text-align: right;
    word-break: break-word;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

/* ---- foreign-key picker: small round "V" icon next to a required
   field's label, and the modal it opens listing existing values from
   the referenced table ---- */
.fk-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-left: 6px;
    border-radius: 50%;
    border: none;
    background-color: #1976D2;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}
.fk-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30; /* above the validation modal's 20, since the picker can open from inside it */
}
.fk-picker-modal {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 12px 24px 24px 24px; /* top halved from 24px - the heading's own margin was adding a lot of dead space above it */
    width: fit-content;
    max-width: min(90vw, 700px);
    max-height: 80vh;
    overflow: visible; /* so the close button can overhang without being clipped */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.fk-picker-inner {
    max-height: calc(80vh - 36px); /* 80vh minus the modal's own top+bottom padding (12px + 24px) */
    overflow-y: auto;
    overflow-x: hidden;
}
.fk-picker-close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background-color: #1976D2;
    color: #fff;
    font-size: 0.8rem;
    line-height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 6;
}

.fk-picker-grid-wrap {
    margin-top: 14px;
}

/* Picker title row (the operation picker's title also carries the role
   being listed, e.g. "(PIC)"). The h5's top margin is halved from Materialize's default
   (1.0933rem) to cut the blank space above the title. */
.fk-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.fk-picker-header h5 {
    flex: 1;
    margin: 0.55rem 0 0.656rem 0;
}
/* Small red X at the top left of an operation row on a leg - removes that
   operation. Used by both upload_pdf_page.php and database_edit_page.php. */
.remove-operation-btn {
    flex: 0 0 18px;
    align-self: flex-start;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #c62828;
    color: #fff;
    font-size: 0.6rem;
    line-height: 18px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.remove-operation-btn:hover {
    background-color: #8e0000;
}

/* ---- foreign-key picker: color-by-frequency buttons
   Colors a picker button by how often that value is actually used as a
   foreign key elsewhere in the database - see get_foreign_key_frequency.php
   and buildFrequencyColorMap() in database_edit_page.php and
   upload_pdf_page.php (same reusable picker component, ported near-
   verbatim between the two pages). 13 tiers, .fk-freq-tier-0 = most used
   down to .fk-freq-tier-12 = least/never used. Both JS copies only ever
   pick a tier INDEX (0-12) - never a color value - so this is the only
   place any of these colors are actually defined. This coloring (and the
   fetch behind it) is skipped entirely for the Flight Sheet ID picker -
   see the foreignKeyInfo.table === 'flight_sheets' check in both
   openForeignKeyPicker() implementations - so that field's buttons stay
   plain .blue with no tier class added, no matter how it's rendered
   here. No legend is shown alongside these colors (removed - the
   buttons' alphabetized labels already make the coloring legible enough
   on their own).
   background-color needs !important here because these buttons also
   carry .blue (also !important, see BUTTON / COLOR UTILITIES above) -
   without it .blue would win regardless of class order on the element,
   since equal-specificity !important rules are decided by source order
   in the stylesheet, not by the order of classes in the HTML. Text
   color per swatch is whichever of black/white gives the better WCAG
   contrast ratio against that swatch's background. ---- */
.fk-freq-tier-0  { background-color: #D42E26 !important; color: #fff !important; } /* most frequent */
.fk-freq-tier-1  { background-color: #D42E26 !important; color: #fff !important; }
.fk-freq-tier-2  { background-color: #D42E26 !important; color: #fff !important; }
.fk-freq-tier-3  { background-color: #a46561 !important; color: #fff !important; }
.fk-freq-tier-4  { background-color: #a46561 !important; color: #fff !important; }
.fk-freq-tier-5  { background-color: #a46561 !important; color: #fff !important; }
.fk-freq-tier-6  { background-color: #a46561 !important; color: #fff !important; }
.fk-freq-tier-7  { background-color: #b59d9a !important; color: #000 !important; }
.fk-freq-tier-8  { background-color: #b59d9a !important; color: #000 !important; }
.fk-freq-tier-9  { background-color: #b59d9a !important; color: #000 !important; }
.fk-freq-tier-10 { background-color: #c0c0c0 !important; color: #000 !important; }
.fk-freq-tier-11 { background-color: #c0c0c0 !important; color: #000 !important; }
.fk-freq-tier-12 { background-color: #c0c0c0 !important; color: #000 !important; } /* least/never used */

/* ---- validation modal: shown when a required/foreign-key field is
   blank or doesn't match an existing value, with an optional inline
   form to add the missing value as a new record ---- */
.validation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.validation-modal {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    width: fit-content;
    max-width: min(90vw, 900px);
    max-height: 85vh;
    overflow: visible; /* lets the close button overhang without being clipped */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.validation-modal-inner {
    max-height: calc(85vh - 48px); /* 85vh minus the modal's own top+bottom padding */
    overflow-y: auto;
    overflow-x: hidden;
}
.validation-modal-close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background-color: #1976D2;
    color: #fff;
    font-size: 0.8rem;
    line-height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 6;
}
.validation-modal-heading {
    margin-top: 0;
}
.validation-modal-message {
    color: #757575;
    margin-bottom: 14px;
}
.validation-modal-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.validation-modal-form .edit-table-field-block input[type="text"] {
    width: auto; /* sized explicitly by JS to fit its content instead of the shared 100% rule */
    white-space: nowrap;
}
.validation-modal-status {
    text-align: center;
    margin-top: 8px;
}

/* ============================================================
   FLIGHT SHEETS EDITOR (database_edit_page.php)
   Scoped under .flight-sheet-editor (applied to that editor's own
   wrapper - see renderFlightSheetEditor()) rather than relying on
   #edit-form-container's rules above to also apply here - they don't:
   those are scoped to upload_pdf_page.php's #edit-form-container id
   specifically, which doesn't exist on database_edit_page.php. Without
   rules scoped under .flight-sheet-editor instead, fields rendered as a
   single full-width column with no flex-wrap layout and the highlight
   classes had no visible effect. The rules below are intentionally the
   same values as #edit-form-container's, just re-scoped, so the Flight
   Sheets editor matches the upload page's real styling exactly. This
   section only affects elements inside .flight-sheet-editor, so it
   can't change how upload_pdf_page.php or database_edit_page.php's own
   generic table editor look.
   ============================================================ */
.flight-sheet-editor .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.flight-sheet-editor .field-block {
    display: flex;
    flex-direction: column;
}
.flight-sheet-editor .field-block label {
    font-size: 0.72rem;
    color: #757575;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.flight-sheet-editor input[type="text"] {
    border: 1px solid #ccc !important;
    border-radius: 3px;
    padding: 5px 7px !important;
    font-size: 0.85rem;
    height: auto !important;
    width: 140px !important;
    margin: 0 !important;
    box-sizing: border-box;
}
.flight-sheet-editor .field-block.width-half input[type="text"] { width: 70px !important; }
.flight-sheet-editor .field-block.width-large input[type="text"] { width: 210px !important; }
.flight-sheet-editor .field-block.width-three-quarters input[type="text"] { width: 105px !important; }
.flight-sheet-editor .field-block.width-extra-large input[type="text"] { width: 300px !important; }
.flight-sheet-editor .field-block.field-highlight-yellow {
    background-color: #fff9c4;
    padding: 6px 8px 8px 8px;
    border-radius: 4px;
}
.flight-sheet-editor .field-block.field-highlight-blue {
    background-color: #bbdefb;
    padding: 6px 8px 8px 8px;
    border-radius: 4px;
}
.flight-sheet-editor h6 {
    font-weight: 600;
    color: #444;
    margin: 22px 0 8px 0;
    font-size: 0.95rem;
}
.flight-sheet-editor .leg-block > h6 {
    margin-top: 0; /* no gap above "Leg 1" etc. - the block's own padding is enough */
}
.flight-sheet-editor .leg-block {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 18px;
}
.flight-sheet-editor .leg-block .field-row {
    margin-bottom: 8px;
}
/* Passengers (left) / Operations (right) under each leg's own fields -
   mirrors #edit-form-container's .leg-columns rules on the upload page,
   scoped to .flight-sheet-editor so the database edit page's legs look
   the same. */
.flight-sheet-editor .leg-columns {
    display: flex;
    margin-top: 12px;
}
.flight-sheet-editor .leg-column-left {
    flex: 1;
    padding-right: 20px;
    border-right: 1px solid #ccc; /* the vertical divider between Passengers and Operations */
}
.flight-sheet-editor .leg-column-right {
    flex: 1;
    padding-left: 20px;
}
.flight-sheet-editor .leg-columns > div > label {
    display: block;
    font-size: 0.72rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 8px;
    font-weight: bold;
}
.flight-sheet-editor .passenger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.flight-sheet-editor .passenger-row .remove-operation-btn {
    margin-right: -4px; /* the row's 12px gap is wider than the operation rows' 8px - pull the boxes a little closer to the X */
}
.flight-sheet-editor .operation-entry-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.flight-sheet-editor .add-operation-btn {
    display: block;
    font-size: 0.75rem;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    margin-top: 4px;
}
/* the left-hand record list's buttons (renderFlightSheetEditor()) - full
   width, left-aligned, one per row, instead of the auto-width/inline
   layout .edit-table-key-btn otherwise has for the FK picker's and the
   generic table editor's grids. The label stays on ONE line (a wrapped
   second line would just be pushed out of the button's fixed 36px
   height and never seen), and anything too long for the button is cut
   off at its edge by overflow:hidden - the full name is available as a
   tooltip (the button's title attribute). Only applies inside
   .flight-sheet-editor's own left-hand list - the FK picker's buttons
   live in a modal appended straight to <body>, and the generic table
   editor's grid is a different render path entirely, so neither is
   affected by this. */
.flight-sheet-editor .edit-table-key-btn {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    /* compact, fixed-size rows so many more fit on screen at once and
       differences between names are easy to spot - the font size is a
       fixed 12px (no scaling) */
    font-size: 12px;
    height: 25px;
    line-height: 27px;
    padding: 0 5px;
    margin-bottom: 0;
}
/* overall left-list/divider/right-fields layout for renderFlightSheetEditor() -
   per spec, this editor puts the single-column record list on the left
   and every field on the right, unlike the generic table editor's
   add/edit-form-on-the-left layout (.edit-table-wrapper/.edit-table-left/
   .edit-table-right above stay exactly as they were for that one). */
.flight-sheet-editor.edit-table-wrapper {
    align-items: flex-start; /* left/right columns scroll independently instead of stretching to match height */
}
.flight-sheet-editor .edit-table-left {
    flex: 0 0 320px;
    max-height: 80vh;
    overflow-y: auto;
}
.flight-sheet-editor .edit-table-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 5px; /* tighter than the generic grid's 10px, to fit more list buttons on screen */
}
.flight-sheet-editor .edit-table-divider {
    margin-left: 5px; /* narrower than the generic editor's divider - per spec */
    margin-right: 5px;
}
.flight-sheet-editor .edit-table-right {
    flex: 1 1 0%; /* equivalent to the generic .edit-table-right's "flex: 1 1 auto", but content-independent so this column doesn't grow/shrink based on how much field text happens to be in it */
    min-width: 0;
}