/* =========================================================
   WGH DE-ICE
   style.css
========================================================= */

:root {
  --bg: #0b0f14;
  --panel: #141c25;
  --panel-light: #19232e;
  --border: #2d3a48;

  --text: #f7f9fb;
  --muted: #93a1b1;

  --blue: #4b9cff;
  --green: #42d365;
  --yellow: #ffd46a;
  --red: #ff6262;

  --radius: 14px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}


/* =========================================================
   LOGIN
========================================================= */

.login-screen {
  min-height: 100vh;

  background: #ffffff;
  color: #111111;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.login-box {
  width: 100%;
  max-width: 420px;
}

.login-logo {
  display: block;

  width: 100%;
  max-height: 280px;

  object-fit: contain;

  margin: 0 auto 32px;
}

.login-box label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 900;

  color: #4d5863;

  letter-spacing: 0.8px;
  text-transform: uppercase;
}

#employee-number {
  width: 100%;

  padding: 17px;

  background: #f3f5f7;
  color: #111111;

  border: 1px solid #cfd5dc;
  border-radius: var(--radius);

  outline: none;

  font-size: 22px;
  font-weight: 800;
}

#employee-number:focus {
  border-color: var(--blue);

  box-shadow:
    0 0 0 3px
    rgba(75, 156, 255, 0.12);
}

.login-error {
  min-height: 22px;

  margin: 8px 0 0;

  color: var(--red);

  font-size: 13px;
  font-weight: 800;
}

#login-button {
  width: 100%;

  margin-top: 10px;

  padding: 16px;

  border: none;
  border-radius: var(--radius);

  background: var(--blue);
  color: #ffffff;

  font-size: 16px;
  font-weight: 900;
}

#login-button:active {
  transform: scale(0.99);
}


/* =========================================================
   MAIN APP
========================================================= */

.app-screen {
  min-height: 100vh;
  background: var(--bg);
}


/* =========================================================
   APP HEADER
========================================================= */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;

  padding: 14px 13px 12px;

  background: rgba(11, 15, 20, 0.97);

  border-bottom: 1px solid var(--border);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-top h1 {
  margin: 0;

  font-size: 20px;
  font-weight: 1000;

  letter-spacing: 0.4px;
}


/* =========================================================
   LIVE / TRAINING BUTTON
========================================================= */

.live-status {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 7px 10px;

  border: 1px solid #265032;
  border-radius: 999px;

  background: #132019;
  color: #ffffff;

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}

.live-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(66, 211, 101, 0.9);
}

.live-status.training-mode {
  background: #2c2514;

  border-color: #9b7625;

  color: var(--yellow);
}

.live-status.training-mode .live-dot {
  background: var(--yellow);

  box-shadow:
    0 0 10px
    rgba(255, 212, 106, 0.8);
}


/* =========================================================
   FLIGHT SECTIONS
========================================================= */

.flight-section {
  padding: 14px 12px 18px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 3px 2px 11px;
}

.section-title-group {
  display: flex;
  align-items: center;

  gap: 8px;
}

.section-header h2 {
  margin: 0;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: 0.7px;

  text-transform: uppercase;
}

.section-header > span {
  font-size: 10px;

  color: var(--muted);
}


/* =========================================================
   SECTION STATUS DOTS
========================================================= */

.section-status-dot {
  width: 8px;
  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;
}

.active-dot {
  background: var(--green);

  box-shadow:
    0 0 8px
    rgba(66, 211, 101, 0.8);
}

.offblock-dot {
  background: var(--blue);

  box-shadow:
    0 0 8px
    rgba(75, 156, 255, 0.7);
}

.requested-dot {
  background: #778594;
}


/* =========================================================
   FLIGHT LIST
========================================================= */

.flight-list {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


/* =========================================================
   FLIGHT CARD
========================================================= */

.flight-card {
  padding: 13px 12px;

  background:
    linear-gradient(
      180deg,
      var(--panel-light),
      var(--panel)
    );

  border: 1px solid var(--border);
  border-radius: var(--radius);

  -webkit-tap-highlight-color: transparent;

  transition:
    border-color 0.15s ease,
    transform 0.08s ease,
    background 0.15s ease;
}


/* CLICKABLE */

.flight-card-clickable {
  cursor: pointer;
}

.flight-card-clickable:hover {
  border-color: #3e5266;
}

.flight-card-clickable:active {
  transform: scale(0.99);

  border-color: var(--blue);
}


/* REQUESTED / DISABLED */

.flight-card-disabled {
  cursor: default;
}

.flight-card-disabled:active {
  transform: none;

  border-color: var(--border);
}


/* =========================================================
   FLIGHT CARD CONTENT
========================================================= */

.flight-row {
  display: grid;

  grid-template-columns:
    1fr
    1.35fr
    0.7fr;

  gap: 8px;

  align-items: center;
}

.flight-number {
  font-size: 20px;
  font-weight: 1000;
}

.flight-registration {
  margin-top: 4px;

  color: #bac5d0;

  font-size: 12px;
  font-weight: 800;
}

.flight-callsign {
  font-size: 16px;
  font-weight: 1000;
}

.flight-raw-callsign {
  margin-top: 4px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 800;
}

.flight-bay {
  text-align: right;

  font-size: 34px;
  font-weight: 1000;
}

.flight-bay-label {
  display: block;

  margin-bottom: 2px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.6px;

  text-transform: uppercase;
}


/* =========================================================
   FLIGHT CARD FOOTER
========================================================= */

.flight-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 9px;
  padding-top: 8px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);

  color: var(--muted);

  font-size: 10px;
}

.flight-agent {
  color: #a8d2ff;

  font-weight: 900;
}


/* =========================================================
   EMPTY LIST
========================================================= */

.empty-flight-list {
  padding: 20px;

  text-align: center;

  color: var(--muted);

  font-size: 12px;

  border:
    1px dashed
    rgba(147, 161, 177, 0.18);

  border-radius: var(--radius);
}


/* =========================================================
   LOGOUT
========================================================= */

.logout-container {
  padding:
    6px
    12px
    30px;
}

#logout-button {
  width: 100%;

  padding: 14px;

  background: transparent;
  color: var(--muted);

  border:
    1px solid
    var(--border);

  border-radius: var(--radius);

  font-weight: 900;
}

#logout-button:hover {
  color: #ffffff;

  border-color: #425467;
}


/* =========================================================
   TRAINING ADMIN
========================================================= */

.training-screen {
  min-height: 100vh;

  background: var(--bg);
  color: var(--text);
}

.training-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 15px;

  background: #0b0f14;

  border-bottom:
    1px solid
    var(--border);
}

.training-label {
  color: var(--muted);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;
}

.training-header h1 {
  margin: 3px 0 0;

  font-size: 21px;
  font-weight: 1000;
}

.training-badge {
  padding: 7px 10px;

  border:
    1px solid
    #9b7625;

  border-radius: 999px;

  background: #2c2514;
  color: var(--yellow);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.7px;
}

.training-content {
  padding: 15px 12px 30px;
}

.training-info {
  margin-bottom: 15px;

  color: var(--muted);

  font-size: 12px;
}


/* =========================================================
   TRAINING FORM
========================================================= */

.training-form {
  padding: 14px;

  background: var(--panel);

  border:
    1px solid
    var(--border);

  border-radius: var(--radius);
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;

  margin-bottom: 6px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.7px;

  text-transform: uppercase;
}

.form-group input,
.form-group select {
  width: 100%;

  padding: 14px;

  background: #0d131a;
  color: #ffffff;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  outline: none;

  font-size: 17px;
  font-weight: 800;
}

.form-group input {
  text-transform: uppercase;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--blue);

  box-shadow:
    0 0 0 2px
    rgba(75, 156, 255, 0.10);
}


/* SELECT */

.form-group select {
  appearance: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #93a1b1 50%
    ),
    linear-gradient(
      135deg,
      #93a1b1 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px)
    calc(50% - 2px),

    calc(100% - 12px)
    calc(50% - 2px);

  background-size:
    6px 6px,
    6px 6px;

  background-repeat: no-repeat;

  padding-right: 38px;
}


/* ADD TRAINING FLIGHT */

#add-training-flight {
  width: 100%;

  margin-top: 3px;

  padding: 15px;

  border: none;
  border-radius: 11px;

  background: var(--blue);
  color: #ffffff;

  font-size: 14px;
  font-weight: 950;
}

#add-training-flight:active {
  transform: scale(0.99);
}

.training-error {
  min-height: 18px;

  margin: 9px 0 0;

  color: var(--red);

  font-size: 12px;
  font-weight: 800;
}


/* =========================================================
   TRAINING LIST HEADER
========================================================= */

.training-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 25px 2px 11px;
}

.training-list-header h2 {
  margin: 0;

  font-size: 13px;
  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.7px;
}

.training-list-header span {
  color: var(--muted);

  font-size: 10px;
}


/* =========================================================
   TRAINING LOGOUT
========================================================= */

.training-logout {
  width: 100%;

  margin-top: 30px;
  padding: 14px;

  background: transparent;
  color: var(--muted);

  border:
    1px solid
    var(--border);

  border-radius: var(--radius);

  font-weight: 900;
}


/* =========================================================
   FULLSCREEN FLIGHT POPUP
========================================================= */

.flight-popup {
  position: fixed;

  inset: 0;

  z-index: 100;

  background: #000000;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;

  text-align: center;
}

.popup-content {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
}


/* STATUS */

.popup-status {
  position: absolute;

  top: 16px;

  color: #808b97;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}


/* SPOKEN CALLSIGN */

.popup-callsign {
  max-width: 100%;

  font-size:
    clamp(
      48px,
      13vw,
      105px
    );

  font-weight: 1000;

  line-height: 0.95;

  word-break: break-word;
}


/* FLIGHT NUMBER */

.popup-flight-number {
  margin-top: 17px;

  color: #aab3bd;

  font-size:
    clamp(
      27px,
      7vw,
      48px
    );

  font-weight: 900;
}


/* DIVIDER */

.popup-divider {
  width: 45%;
  height: 2px;

  margin:
    28px
    0
    24px;

  background: #29313a;
}


/* BAY */

.popup-bay {
  font-size:
    clamp(
      140px,
      43vw,
      310px
    );

  font-weight: 1000;

  line-height: 0.8;

  letter-spacing: -7px;
}

.popup-bay-label {
  margin-top: 20px;

  color: #8995a2;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


/* CLOSE POPUP */

.close-popup-button {
  position: absolute;

  bottom: 18px;

  width: auto;

  margin: 0;

  padding:
    12px
    20px;

  background: transparent;

  color: #89929c;

  border: none;

  font-size: 12px;
  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

  .header-top h1 {
    font-size: 18px;
  }

  .flight-number {
    font-size: 18px;
  }

  .flight-callsign {
    font-size: 14px;
  }

  .flight-bay {
    font-size: 30px;
  }

  .section-header {
    align-items: flex-start;

    gap: 8px;
  }

}


/* =========================================================
   TABLET / DESKTOP
========================================================= */

@media (min-width: 800px) {

  .flight-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .logout-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .training-content {
    max-width: 900px;

    margin: 0 auto;
  }

}


/* =========================================================
   LANDSCAPE POPUP
========================================================= */

@media (orientation: landscape) {

  .popup-content {
    flex-direction: row;

    gap: 6vw;
  }

  .popup-divider {
    width: 2px;
    height: 42%;

    margin: 0;
  }

  .popup-callsign {
    max-width: 48%;

    font-size:
      clamp(
        45px,
        8vw,
        95px
      );
  }

  .popup-flight-number {
    position: absolute;

    left: 11%;
    bottom: 10%;
  }

  .popup-bay {
    font-size:
      clamp(
        130px,
        19vw,
        280px
      );
  }

  .popup-bay-label {
    position: absolute;

    right: 10%;
    bottom: 10%;
  }

}

/* =========================================================
   DELETE TRAINING FLIGHT
========================================================= */

.delete-training-button {
  width: 100%;

  margin-top: 10px;
  padding: 11px;

  background: rgba(255, 98, 98, 0.08);
  color: #ff7676;

  border: 1px solid rgba(255, 98, 98, 0.35);
  border-radius: 10px;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.4px;
}

.delete-training-button:hover {
  background: rgba(255, 98, 98, 0.14);
}

.delete-training-button:active {
  transform: scale(0.99);
}

#add-training-flight:disabled {
  opacity: 0.5;
  cursor: wait;
}