/* Vietnam Airlines theme — activated by SOTADOCS_THEME=vietnamairlines.
 *
 * Loaded AFTER the inline stylesheet in base.html, so it only has to redefine
 * the :root tokens plus the handful of places that hardcode a colour or hide
 * the logo. Palette lifted from vietnamairlines.com: teal primary (#006885,
 * pressed #005c76, deep #003240), gold lotus (#dba410), near-black text
 * (#292929), light teal wash (#f2f7f9). Corners are rounder than the Academy
 * theme because the airline site uses soft cards, not boxed portal rules. */

:root {
  --bg: #f2f7f9; --surface: #ffffff; --surface-2: #f5f9fa; --surface-hover: #e9f1f4;
  --border: #dcdcdc; --border-strong: #bdbdbd;
  --text: #292929; --muted: #656565; --faint: #989898;
  --accent: #006885; --accent-press: #005c76; --accent-soft: #e0eef2;
  --gold: #dba410; --gold-soft: #fbf3dc;
  --header-1: #007080; --header-2: #006885;
  --green: #067647; --green-soft: #e6f4ec;
  --amber: #8a6100; --amber-soft: #fbf3dc;
  --red: #a62c2a; --red-soft: #fbe5e5;
  --card-shadow: 0 1px 3px rgba(0, 50, 64, .06);
  --radius: 6px; --radius-sm: 4px;
}

body { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ---- header: thin deep-teal utility strip, teal masthead with the lockup ---- */
.appbar, .auth-strip { background: #003240; }

.masthead, .auth-masthead { background: var(--header-2); border-bottom: 3px solid var(--gold); }
/* The lockup is white text + gold lotus, drawn for a teal ground. Show it at
   a fixed height next to the unit name instead of stretching it full-width. */
.masthead-inner { justify-content: flex-start; padding: 12px 14px; }
.masthead-inner a { display: flex; align-items: center; gap: 14px; }
.masthead img { width: auto; height: 44px; max-width: none; }
.masthead-text { display: block; text-align: left; color: #fff; }
.masthead-text .mh-unit { color: #fff; font-size: 14px; }
.masthead-text .mh-org { color: rgba(255, 255, 255, .78); font-size: 12px; }

.auth-masthead-inner { justify-content: flex-start; padding: 14px 18px; }
.auth-masthead img { width: auto; height: 56px; max-width: none; }

/* Section bars and panel headers: flat teal, gold hairline underneath. */
.section-bar, details.panel > summary, .auth-panel-bar {
  background: var(--header-2); box-shadow: inset 0 -2px 0 var(--gold);
}

/* Hardcoded pink borders from the Academy palette. */
.fd-icon { border-color: #c5dde4; }
.auth-intro .kicker { border-color: #c5dde4; }
.auth-points .pi { border-color: #f0dfae; }

/* Preview command bar accent. */
.pv-bar { border-top-color: var(--gold); }

/* Phones: the lockup stays legible at 36px, so keep it beside the text. */
@media (max-width: 480px) {
  .masthead img { display: block; height: 36px; }
  .masthead-text { display: block; }
  .masthead-text .mh-unit { font-size: 13px; }
  .masthead-text .mh-org { display: none; }
}