/*
 * styles.css — presentation for the pages (pantalla.php, index.php,
 * rotacio.php) and rotacioRender.php.
 *
 * Class names follow the BEM convention: block, block__element and
 * block--modifier. Runtime-computed values (column widths, plane counts,
 * font sizes) are passed in through CSS custom properties set on the element's
 * style attribute and consumed here, so no declarative styling stays inline.
 */

/* ==========================================================================
   waiting — night-mode holding page
   ========================================================================== */
.waiting {
    text-align: center;
    color: silver;
    background-color: black;
    padding-top: 1500px;
}

/* ==========================================================================
   screen — top-level layout of the UPCOMING LOADS page
   ========================================================================== */
.screen {
    margin: 0;
    width: 100%;
    background-color: black;
    color: white;
    font-family: arial;
}

.screen__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 90px;
    display: flex;
}

.screen__manifest {
    flex: var(--planes);
    position: relative;
    overflow: hidden;
}

/* --staff-flex grows on busy days so the rotation is not scaled down to an
   unreadable size (set in pantalla.php from the busiest worker's jump count). */
.screen__staff {
    flex: var(--staff-flex, 1);
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   manifest — the aircraft columns table
   ========================================================================== */
.manifest {
    width: 100%;
    font-size: var(--manifest-font);
}

.manifest__col {
    width: var(--col-width);
}

.manifest__pane {
    position: absolute;
    top: 0;
    width: var(--pane-width);
}

.manifest__pane--visible {
    visibility: visible;
}

.manifest__pane--hidden {
    visibility: hidden;
}

.manifest__pane--empty {
    width: 0;
    visibility: visible;
}

.manifest__cell {
    color: gold;
    font-size: 28px;
    font-weight: 900;
}

.manifest__seats {
    color: yellow;
    font-weight: 600;
    font-size: 27px;
}

/* ==========================================================================
   status — flight take-off status label
   ========================================================================== */
.status {
    font-weight: bold;
}

.status--takeoff {
    background-color: red;
    color: white;
    text-decoration: blink;
}

.status--boarding {
    background-color: orange;
    color: white;
    text-decoration: blink;
}

.status--countdown {
    color: lime;
    font-weight: 600;
    font-size: 27px;
}

/* ==========================================================================
   jumper — jumper / group / staff lines inside a manifest cell
   ========================================================================== */
.jumper__indicator {
    color: red;
}

.jumper__group {
    color: Aqua;
}

.jumper__staff {
    color: gold;
}

/* ==========================================================================
   staff-heading — "MANIFESTED STAFF" title above the rotation
   ========================================================================== */
.staff-heading {
    text-align: center;
    font-weight: bold;
}

/* ==========================================================================
   footer — bottom marquee / limit / clock band
   ========================================================================== */
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    color: lightgrey;
    text-align: center;
}

.footer__marquee {
    font-size: 20px;
    font-weight: bold;
}

.footer__row {
    font-size: 20px;
}

.footer__limit {
    color: red;
    background-color: white;
}

/* ==========================================================================
   config-link — small "config" link in the bottom-left corner
   ========================================================================== */
.config-link {
    position: absolute;
    bottom: 0;
    left: 0;
    color: gray;
}

/* ==========================================================================
   rotation — staff rotation listing (rotacioRender.php)
   ========================================================================== */
.rotation {
    font-size: 12pt;
}

/* Busy day (a worker on 3+ flights). The cells shorten the aircraft name and
   drop the service line in PHP (the BRON/TITA lot stays); here the nowrap is
   lifted and the boxes are tightened. That nowrap is what forces the table
   wider than the staff column,
   after which scaleToFit.js shrinks the whole rotation to fit. Allowed to wrap,
   the table stays inside the column (.scale-to-fit is inline-block, so it is
   capped by it) and the text is no longer scaled down. */
.rotation--dense {
    border-collapse: collapse;
}

.rotation--dense .rotation__jump__load,
.rotation--dense .rotation__jump__booking {
    white-space: normal;
}

.rotation--dense .rotation__jump,
.rotation--dense .rotation__staff {
    padding: 0 2px;
    line-height: 1.1;
}

.rotation__count {
    font-size: 20px;
    font-weight: bold;
}

.rotation__lot {
    color: white;
    font-weight: bold;
    background-color: black;
}

/* Jump cell: base look, then a modifier for overlap or EXTRA_* state. */
.rotation__jump {
    color: #000;
    border: 1px solid gray;
    font-size: 12pt;
    background-color: LemonChiffon;
}
.rotation__jump__load, .rotation__jump__booking {
    white-space: nowrap;
}
.rotation__jump__load__flight {
    font-weight: bold;
}
.rotation__jump--overlap-full {
    border: 2px solid DarkRed;
    background-color: Salmon;
}

.rotation__jump--overlap-partial {
    border: 2px solid MidnightBlue;
    background-color: LightCyan;
}

.rotation__jump--extra {
    background-color: white;
}

.rotation__jump--course {
    background-color: PaleGreen;
}

.rotation__nocount {
    background-color: DarkSlateGray;
    color: White;
}

/* Worker name cell: base look, then a colour modifier for the group / state. */
.rotation__staff {
    color: #000;
    border: 1px solid gray;
    vertical-align: middle;
    font-weight: bold;
}

.rotation__staff--tandem {
    background-color: Gold;
}

.rotation__staff--camera {
    background-color: Yellow;
}

.rotation__staff--course {
    background-color: SpringGreen;
}

.rotation__staff--course-instructor {
    background-color: PaleGreen;
}

.rotation__staff--extra {
    background-color: White;
}

.rotation__clock {
    vertical-align: middle;
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 999;
}

/* ==========================================================================
   rotation-page — standalone rotation page layout (rotacio.php)
   ========================================================================== */
.rotation-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    font-family: arial;
}

/* ==========================================================================
   menu — jumping conditions / aircraft selection page (index.php)
   ========================================================================== */
.menu {
    background-color: #9ec9e6; /* sky tone while the image loads */
    background-image: url("bg_day.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;
}

.menu__container {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1em;
    text-align: center;
}

.menu__section {
    margin-top: 15px;
    padding: 10px;
    background: #fff;
    font-family: arial;
    font-size: 12px;
}

.menu__section p {
    padding: 8px;
}

.menu__marquee {
    color: lightgrey;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
}

.menu__conditions {
    font-size: 20px;
    text-align: center;
}

.menu__limit {
    color: red;
    background-color: white;
}

.menu__checkbox {
    margin-right: 30px;
    transform: scale(1.5);
}

.menu__button {
    display: block;
    width: 60px;
    margin: 0 auto 25px;
    padding: 10px;
    border: 2px solid #000;
    text-align: center;
    color: black;
    font-weight: bold;
    text-decoration: none;
    background-color: #f1f1f1;
}