/* ========================== *
 * ## Property Declaration ##
 * ========================== */

:root {
    --cdm-list-row-height: 32px;
    --cdm-list-row-padding: 5px;

    --stand-editor-list-rows-max: 10;
    --user-management-list-row-max: 10;
}

/* =========== *
 * ## Pages ##
 * =========== */

body[data-page="login"],
body[data-page="stand-editor"],
body[data-page="user-management"]{
    background: var(--grey);
}

/* ============================= *
 * ## CDM Interactive Editors ##
 * ============================= */

.cdm-interactive-editor {
    border-style: solid;
    border-width: 1px;
    display: flex;
    flex-direction: column;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
}

.cdm-interactive-editor > .header {
    font-size: 18px;
    font-weight: bold;
    line-height:18px;
    padding: 10px;
    text-transform: uppercase;
}

.cdm-interactive-editor .list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdm-interactive-editor .list-container .button-container {
    display: flex;
    flex-direction: row;
}

.cdm-interactive-editor .section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.cdm-interactive-editor .section > .header {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.cdm-interactive-editor .section > .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cdm-interactive-editor .action-button-container {
    display:flex;
    flex-direction: row;
    gap: 20px;
    position: relative;
    width: 100%;
}

.cdm-interactive-editor .ui-dynamic-list .list .list-row {
    height: var(--cdm-list-row-height);
    line-height: calc(var(--cdm-list-row-height) - (var(--cdm-list-row-padding) * 2));
    padding: var(--cdm-list-row-padding);
}


/* ========================= *
 * ## CDM Login Interface ##
 * ========================= */

.cdm-login-interface {
    background: var(--login-bg);
    border-color: var(--login-border);
    border-style: solid;
    border-width: 1px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cdm-login-interface .content {
    padding: 10px;
}

.cdm-login-interface .content .login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdm-login-interface .content .login-form .login-form-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.cdm-login-interface .content .login-form .login-form-row > label {
    color: var(--login-row-text);
    font-weight: bold;
    line-height: 24px;
    width: 70px;
}

.cdm-login-interface .content .login-form .login-form-row > input {
    width: 200px;
}

.cdm-login-interface .content .login-form .login-button {
    line-height: 20px;
    margin: 0;
}

.cdm-login-interface .content .login-form .forgot-password-link {
    display: none;
}

.cdm-login-interface .footer {
    background: var(--login-footer-bg);
    color: var(--login-footer-text);
    display: flex;
    flex-direction: row;
    justify-content: end;
    line-height: 16px;
    padding: 10px;
}

.cdm-login-interface .footer .version-container {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    gap: 5px;
    height: 16px;
    line-height: 16px;
}

.cdm-login-interface .header {
    background: var(--login-header-bg);
    color: var(--login-header-text);
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    padding: 10px;
    text-transform: uppercase;
}


/* ================== *
 * ## Stand Editor ##
 * ================== */

.stand-editor-component {
    background: var(--se-bg);
    border-color: var(--se-border);
    max-width: 400px;
}

.stand-editor-component > .header {
    background-color: var(--se-header-bg);
    color: var(--se-header-text);
}

.stand-editor-component .list-container .role-status-list .list.custom_scroll {
    max-height: 320px;
}

.stand-editor-component .section > .header {
    color: var(--se-section-header-font);
}

.stand-editor-component .action-button-container .role-logout {}
.stand-editor-component .action-button-container .role-back-to-cdm {}
.stand-editor-component .action-button-container .role-documentation {}

.stand-editor-component .ui-dynamic-list .list {
    max-height: calc(var(--stand-editor-list-rows-max) * var(--cdm-list-row-height));
}


/* ========================= *
 * ## Taxiway Block Layer ##
 * ========================= */

.taxiway-block-layer .taxiway-block-label {
    transform: translate(-50%, -10px);
}


/* ===================== *
 * ## User Management ##
 * ===================== */

.user-management-component {
    background: var(--um-bg);
    border-color: var(--um-border);
    max-width: 1100px;
}

.user-management-component > .header {
    background-color: var(--um-header-bg);
    color: var(--um-header-text);
}

.user-management-component .list-container .role-status-list .list.custom_scroll {
    max-height: 640px;
}

.user-management-component .section > .header {
    color: var(--um-section-header-font);
}

.user-management-component .ui-dynamic-list .list {
    max-height: calc(var(--user-management-list-row-max) * var(--cdm-list-row-height));
}

.user-management-list-popup .ui-input .input-container { width: 250px; }


/* =============================== *
 * ## CDM Times section filtering ##
 * =============================== */

/*
 * Show only the CDM Times block that matches the flight's state. The three blocks are all included
 * by tab-flight-info-summary-cdm_times.inc.tpl, so without this every flight showed departure and
 * arrival milestones at once. States come from config/products/cdm/javascript/FlightProvider.js
 * flightStateGetter; a local flight is both a departure and an arrival, so it shows both.
 *
 * These rules live here rather than in a customer stylesheet because the templates are product-level.
 */
.casper-tab .section-description-container.inbound-section,
.casper-tab .section-description-container.outbound-section,
.casper-tab .section-description-container.inblock-section {
   display: none;
}

.casper-tab .section-description-container.inbound-section[data-fl_state="INB"],
.casper-tab .section-description-container.inbound-section[data-fl_state="LOC"],
.casper-tab .section-description-container.outbound-section[data-fl_state="OUT"],
.casper-tab .section-description-container.outbound-section[data-fl_state="LOC"],
.casper-tab .section-description-container.inblock-section[data-fl_state="IBK"] {
   display: block;
}

/* Sub-header follows the blocks, so a state with no block loses the section rather than the heading. */
.casper-tab .section-sub-header.cdm-times {
   display: none;
}

.casper-tab .section-sub-header.cdm-times[data-fl_state="INB"],
.casper-tab .section-sub-header.cdm-times[data-fl_state="LOC"],
.casper-tab .section-sub-header.cdm-times[data-fl_state="OUT"],
.casper-tab .section-sub-header.cdm-times[data-fl_state="IBK"] {
   display: block;
}


/* ================================= *
 * ## Map label section filtering ## *
 * ================================= */

/*
 * Show exactly one section of the map hover label (see map-layer-aircraft.inc.tpl and the per-state
 * templates it includes). States come from config/products/cdm/javascript/FlightProvider.js
 * flightStateGetter.
 *
 * The .cdm class scopes these rules to the CDM label. AMS and LGW carry their own aircraft-layer
 * templates using the same .label-section names, and LGW has no filtering rules of its own.
 *
 * The label node carries both .casper-vehicle-label and .map-icon-label
 * (components/AircraftLayer.class.js) and is created lazily, on FLIGHT_INTERACTED.
 */
.casper-vehicle .map-icon-label .label-section.cdm {
   display: none;
}

.casper-vehicle .map-icon-label .label-section.cdm.vehicle[data-fl_state="VEH"],
.casper-vehicle .map-icon-label .label-section.cdm.inbound[data-fl_state="INB"],
.casper-vehicle .map-icon-label .label-section.cdm.outbound[data-fl_state="OUT"],
.casper-vehicle .map-icon-label .label-section.cdm.local[data-fl_state="LOC"],
.casper-vehicle .map-icon-label .label-section.cdm.inblock[data-fl_state="IBK"],
.casper-vehicle .map-icon-label .label-section.cdm.other {
   display: grid;
   grid-template-columns: max-content auto max-content auto;
   column-gap: 5px;
}

/*
 * .other is the fallback for an unknown state and is last in the template, so suppress it (and any
 * later sibling) once a state-specific section has matched.
 */
.casper-vehicle .map-icon-label .label-section.cdm.vehicle[data-fl_state="VEH"] ~ .label-section.cdm,
.casper-vehicle .map-icon-label .label-section.cdm.inbound[data-fl_state="INB"] ~ .label-section.cdm,
.casper-vehicle .map-icon-label .label-section.cdm.outbound[data-fl_state="OUT"] ~ .label-section.cdm,
.casper-vehicle .map-icon-label .label-section.cdm.local[data-fl_state="LOC"] ~ .label-section.cdm,
.casper-vehicle .map-icon-label .label-section.cdm.inblock[data-fl_state="IBK"] ~ .label-section.cdm {
   display: none;
}


/* ====================== *
 * ## Map label layout ## *
 * ====================== */

/*
 * Lay the label out as a table: every row spans all four columns, so each label and value lands in a
 * shared column and a row carrying two pairs lines up with a row carrying one. A row with a single
 * pair leaves columns 3 and 4 empty.
 */
.casper-vehicle .map-icon-label .label-section.cdm .label-row { display: contents; }

/* Anchor each row's first cell to column 1, or auto-placement flows it into the previous row's
   spare columns. A row's first label/value pair is never wrapped in a <lock> and never guarded, so
   the anchor survives skin gating; a later pair may be absent, which only leaves its columns empty. */
.casper-vehicle .map-icon-label .label-section.cdm .label-row > :first-child { grid-column: 1; }

.casper-vehicle .map-icon-label .label-section.cdm .label-row-label,
.casper-vehicle .map-icon-label .label-section.cdm .label-row-value {
   white-space: nowrap;
}

.casper-vehicle .map-icon-label .label-section.cdm .label-row.header {
   display: block;
   grid-column: 1 / -1;
}

/* Keep the flight number's separator off the callsign. The header is display: block, so the two
   labels flow inline and a gutter here does the job for all five state templates at once. */
.casper-vehicle .map-icon-label .label-section.cdm .label-row.header .label-row-label + .label-row-label {
   margin-left: 0.25em;
}