/**
 * style.css — Base styles for the Penn Yan Flying Club Weight & Balance Calculator.
 * Aviation-inspired color palette, instrument-panel summary cards, loading layout,
 * and graph placeholder styling for desktop and tablet viewports.
 */

/* ================================================================== */
/* Design tokens — aviation palette                                   */
/* ================================================================== */

:root {
  --navy-900: #0a1628;
  --navy-800: #0f2341;
  --navy-700: #1a365d;
  --navy-600: #234876;
  --sky-500: #3d7ea6;
  --sky-400: #5a9ec4;
  --gold-500: #c9a227;
  --gold-400: #dbb94a;
  --slate-100: #eef1f5;
  --slate-200: #dce2ea;
  --slate-300: #b8c4d0;
  --slate-500: #5c6b7a;
  --slate-700: #2e3a47;
  --white: #ffffff;
  --instrument-bg: #f7f9fc;
  --instrument-face: #ffffff;
  --instrument-border: #c5d0dc;
  --status-neutral: #5c6b7a;
  --status-ok: #1f7a4d;
  --status-warn: #b45309;
  --status-fail: #b91c1c;

  --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Consolas", "SF Mono", "Courier New", monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.1);
  --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.12);

  --max-width: 1200px;
  --banner-height: auto;
}

/* ================================================================== */
/* Reset & base                                                       */
/* ================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--slate-700);
  background-color: var(--slate-100);
}

/* ================================================================== */
/* Top banner                                                         */
/* ================================================================== */

.banner {
  position: relative;
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 55%, #060d18 100%);
  color: var(--white);
  overflow: hidden;
}

.banner-accent {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--gold-500) 0%,
    var(--gold-400) 35%,
    var(--sky-400) 65%,
    var(--gold-500) 100%
  );
}

.banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.60rem 1.5rem 0.75rem;
  text-align: center;
}

/* =======================================================
   CLUB LOGO
   ======================================================= */

.banner-logo {
  width: 170px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}

.banner-eyebrow {
    display: none;
}

.banner-title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}



.banner-subtitle {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,.90);
  letter-spacing: .03em;
}

/* ================================================================== */
/* Main layout                                                        */
/* ================================================================== */

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.0rem;
}

/* ================================================================== */
/* Panels                                                             */
/* ================================================================== */

.panel {
  background: var(--instrument-face);
  border: 1px solid var(--instrument-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 30px rgba(0,0,0,.10);
  overflow: hidden;
}

.panel-header {
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
  color: var(--white);
  border-bottom: 3px solid var(--gold-500);
}

.summary-panel .panel-header {
    padding: 0.65rem 1rem;
}

.banner-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}

.panel-desc {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}

/* ================================================================== */
/* Loading layout — photo left, form right                            */
/* ================================================================== */

.loading-layout {
    display: grid;
    grid-template-columns: 380px 520px;
    gap: 24px;
    align-items: start;
}

/* Aircraft photo placeholder */

.aircraft-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--instrument-bg);
  border-right: 1px solid var(--instrument-border);
}

.aircraft-photo-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  min-height: 240px;
  position: relative;
}

.aircraft-photo-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--instrument-border);
  box-shadow: var(--shadow-sm);
}

.aircraft-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--slate-300);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(26, 54, 93, 0.04) 0%, rgba(61, 126, 166, 0.08) 100%),
    var(--white);
  color: var(--navy-600);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.aircraft-photo-placeholder.is-selected {
  border-color: var(--sky-400);
  border-style: solid;
  color: var(--navy-700);
}

.aircraft-icon {
  width: 72px;
  height: 72px;
  opacity: 0.35;
}

.aircraft-photo-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.aircraft-photo-caption {
  padding: 0.40rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--navy-700);
  background: var(--white);
  border-top: 1px solid var(--instrument-border);
}

.aircraft-info h3 {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--navy-700);
    text-transform: uppercase;
}

/*==============================================================
  Current Aircraft Information Card

  Displays the selected aircraft's reference weight and balance
  data, including empty weight, useful load, empty arm, empty
  moment, and the date the aircraft was last weighed.

  This panel provides the baseline aircraft information used
  during weight and balance calculations and updates
  automatically whenever a different aircraft is selected.
==============================================================*/

.aircraft-info {
    width: 100%;
    max-width: 300px;
    min-width: 0;
}

.aircraft-info h3 {
    ...
}


.aircraft-card {
    background: #fcfcfd;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.aircraft-card hr {
    border: none;
    border-top: 1px solid #e6ebf2;
    margin: 8px 0 14px;
}

.aircraft-info {
    width: 100%;
    max-width: 420px;
    margin-right: auto;
}

.aircraft-info hr {
    width: 100%;
    margin: 10px 0 14px;
}

#aircraft-display-name {
  display: block;
}

/* Loading form */

.loading-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.125rem 1.25rem;
  padding: 1.5rem;
  align-content: start;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.form-unit {
  font-weight: 500;
  text-transform: lowercase;
  color: var(--slate-500);
  letter-spacing: 0;
}

.form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--slate-700);
  background: var(--white);
  border: 1px solid var(--instrument-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
  color: var(--slate-300);
  font-family: var(--font-mono);
}

.form-control:hover {
  border-color: var(--sky-400);
}

.form-control:focus {
  outline: none;
  border-color: var(--sky-500);
  box-shadow:
    inset 0 1px 2px rgba(10, 22, 40, 0.06),
    0 0 0 3px rgba(61, 126, 166, 0.2);
}

select.form-control {
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b7a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
}

/* ================================================================== */
/* Summary instrument cards                                           */
/* ================================================================== */

.summary-panel .panel-header {
  border-bottom-color: var(--sky-400);
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--instrument-bg);
}

.summary-card {
  display: flex;
  flex-direction: column;
  min-height: 95px;
  padding: 0.65rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--instrument-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--navy-600);
}

.summary-card--status {
  border-top-color: var(--gold-500);
}

.summary-card-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.35rem;
}

.summary-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--navy-700);
  border-radius: var(--radius-sm);
}

.summary-card-icon--status {
  font-size: 0.875rem;
  background: var(--gold-500);
  color: var(--navy-900);
}

.summary-card-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500);
  line-height: 1.3;
}

.summary-card-value {
  margin: auto 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.1;
}

.summary-card-value--status {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 600;
  color: var(--status-neutral);
}

.summary-card-value--status .status-ok {
  color: var(--status-ok);
}

.summary-card-value--status .status-warn {
  color: var(--status-warn);
}

.summary-card-value--status .status-fail {
  color: var(--status-fail);
}

/* Warnings panel */

.warnings-panel {
  margin: 0 1.5rem 1.5rem;
  padding: 1rem 1.25rem;
  background: #fff8eb;
  border: 1px solid #e8c878;
  border-left: 4px solid var(--status-warn);
  border-radius: var(--radius-md);
}

.warnings-panel.is-error {
  background: #fef2f2;
  border-color: #f0a8a8;
  border-left-color: var(--status-fail);
}

.warnings-title {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--status-warn);
}

.warnings-panel.is-error .warnings-title {
  color: var(--status-fail);
}

.warnings-list {
  margin: 0;
  padding-left: 1.25rem;
}

.warnings-list li {
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  color: var(--slate-700);
}

.warnings-list li:last-child {
  margin-bottom: 0;
}

.form-control.field-warning {
  border-color: var(--status-warn);
  box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.06), 0 0 0 2px rgba(180, 83, 9, 0.15);
}

.form-control.field-error {
  border-color: var(--status-fail);
  box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.06), 0 0 0 2px rgba(185, 28, 28, 0.15);
}

.value-placeholder {
  color: var(--slate-300);
}

.summary-card-value .value-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ================================================================== */
/* CG graph placeholder                                               */
/* ================================================================== */

.graph-panel .panel-header {
  border-bottom-color: var(--navy-600);
}

.graph-placeholder {
  margin: 1.5rem;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, var(--white) 0%, var(--instrument-bg) 100%);
  border: 1px solid var(--instrument-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 2px 8px rgba(10, 22, 40, 0.04);
}

.graph-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: var(--slate-500);
}

.graph-placeholder-icon {
  width: 160px;
  height: auto;
  opacity: 0.45;
}

.graph-placeholder-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.graph-placeholder-subtext {
  margin: 0;
  font-size: 0.875rem;
  color: var(--slate-500);
}

.cg-canvas {
  display: none;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ================================================================== */
/* Footer                                                             */
/* ================================================================== */

.app-footer {
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--slate-500);
  background: var(--white);
  border-top: 1px solid var(--instrument-border);
}

.app-footer p {
  margin: 0;
  max-width: var(--max-width);
  margin-inline: auto;
}

/* ==========================================================
   Loading Header
   ========================================================== */

.loading-header {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 0;
}

.loading-logo {
    width: 140px;
    height: auto;
}

.loading-header-text {

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Aircraft selector */

.aircraft-selector {
    width: 330px;
    margin: 18px 0 20px 28px;
}

.aircraft-selector .form-control {

    width: 100%;

}

/*==============================================================
  Current Aircraft Information Card

  Displays the selected aircraft's reference weight and balance
  data, including empty weight, useful load, empty arm, empty
  moment, and the date the aircraft was last weighed.

  This panel provides the baseline aircraft information used
  during weight and balance calculations and updates
  automatically whenever a different aircraft is selected.
==============================================================*/

.aircraft-card {
    width: 100%;
    max-width: 300px;
    min-width: 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #ececec;
}

.info-row span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.info-row span:last-child {
    flex: 0 0 auto;
    margin-left: 12px;
    text-align: right;
    white-space: nowrap;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row span:first-child {
    font-weight: 600;
    color: #555;
}

.info-row span:last-child {
    font-family: Consolas, monospace;
    font-weight: 700;
    color: #0b3d91;
}

/*==============================================================
  Compact Loading Rows

  Defines the layout for all aircraft loading station input rows.
  Each row contains a station label on the left and a fixed-width
  input field on the right, providing a compact, worksheet-style
  layout that minimizes vertical space and aligns all input fields.
==============================================================*/

.loading-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.loading-label {

    width: 220px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--navy-700);

}

.loading-input {
    width: 110px;
    text-align: right;
}

/*==============================================================
  Loading / Flight Summary Layout

  Places the Loading Stations and Flight Summary side-by-side
  on desktop screens.
==============================================================*/

.loading-results-layout {

    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 32px;

    align-items: start;

    margin-top: 20px;

}

.flight-summary-column {

    min-width: 300px;

}

/*==============================================================
  Loading Workspace

  Organizes the loading worksheet into two desktop columns:
  - Loading Stations (left)
  - Flight Summary (right)
==============================================================*/

.loading-workspace {

    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 24px;

    align-items: start;

    margin-top: -18px;

}

.loading-stations {

    width: 100%;

}

/*==============================================================
  Flight Summary Heading

  Compact heading used when the Flight Summary is displayed
  beside the loading worksheet.
==============================================================*/

.summary-heading {

    margin: 0 0 12px 0;

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: var(--navy-700);

}
/*==============================================================
    Application Footer
==============================================================*/

.app-footer {

    margin-top: 2rem;
    padding: 1.5rem 1rem;

    text-align: center;

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

    color: var(--slate-500);

    font-size: 0.9rem;

}

.footer-title {

    font-weight: 600;
    color: var(--navy-700);

}

.footer-subtitle {

    margin-top: 0.2rem;

}

.footer-version {

    margin-top: 0.5rem;

    font-size: 0.8rem;

    color: var(--slate-400);

}