/* ==========================================================================
   AeroWorld Virtual - shared design system
   --------------------------------------------------------------------------
   Loaded once in app.blade.php, AFTER theme_v3.css (and after the dark mode
   sheet), so every page of the site inherits it - including the stock phpVMS
   pages nobody ever edits.

   Palette is taken from the AeroWorld logo: deep navy, silver, gold.

   Scope note: this file styles the page CHROME and the shared Bootstrap
   components (navbar, footer, cards, buttons, tables, forms, badges). It does
   not touch the home page, which brings its own section styling in
   home.blade.php and only shares the tokens below.

   To change the whole site's colours, edit the block under :root. Nothing
   else in here hard-codes a brand colour.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --aw-navy-900: #02091c;   /* logo background, darkest surface */
  --aw-navy-800: #061532;
  --aw-navy-700: #0c1c3a;   /* headings */
  --aw-navy-600: #16315c;   /* links, primary text accents */
  --aw-gold: #e9b330;       /* the swoosh */
  --aw-gold-soft: #c28f27;
  --aw-gold-bright: #f4c65a;
  --aw-silver: #d6dee9;

  /* Neutrals ------------------------------------------------------------- */
  --aw-ink: #101828;
  --aw-muted: #667085;
  --aw-line: rgba(15, 23, 42, 0.10);
  --aw-surface: #ffffff;
  --aw-page: #f4f6fa;

  /* Shape ---------------------------------------------------------------- */
  --aw-radius: 16px;
  --aw-radius-sm: 10px;
  --aw-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
  --aw-shadow-lg: 0 24px 60px rgba(6, 12, 30, 0.20);
}

/* ==========================================================================
   1. BASE
   ========================================================================== */

/* NOTE: the page background is deliberately NOT set here. The theme puts a
   photo behind the site and overriding it with a flat colour kills that.
   Only type and colour are set. */
body#page-container {
  color: var(--aw-ink);
  font-family: 'Inter', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* IMPORTANT: headings inherit their colour instead of being given one.
   A colour set on the heading itself beats the colour inherited from a
   parent, so a fixed navy here turned every heading inside a dark panel
   (register, login, hero blocks) into dark-on-dark. Inheriting means a
   heading is dark on light panels and light on dark ones, automatically. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: inherit;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* The navy tint is applied where the background is known to be light. */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: var(--aw-navy-700);
}

a {
  color: var(--aw-navy-600);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--aw-gold-soft);
}

hr { border-color: var(--aw-line); opacity: 1; }

::selection {
  background: rgba(233, 179, 48, 0.28);
  color: var(--aw-navy-900);
}

/* Keyboard focus stays visible and on-brand ------------------------------ */
:focus-visible {
  outline: 2px solid var(--aw-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   2. NAVBAR - intentionally not styled here
   --------------------------------------------------------------------------
   nav_menu.blade.php ships its own complete navbar CSS with !important and
   its own tokens, and it loads after this file. Competing with it from here
   would only produce conflicts, so the navbar palette is changed in that
   file instead (--aw-nav-bg / --aw-accent).
   ========================================================================== */

/* ==========================================================================
   3. CARDS AND PANELS
   ========================================================================== */

.card {
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius);
  box-shadow: var(--aw-shadow);
  background: var(--aw-surface);
}

/* Sitting on the theme's background photo, cards need a little more lift
   than they would on a flat page. */
#page-contents > .card,
#page-contents .card {
  backdrop-filter: saturate(1.05);
}

.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--aw-line);
  font-weight: 800;
  color: var(--aw-navy-700);
  letter-spacing: -0.01em;
}

/* Gold hairline on top of headers, the one repeated brand cue ------------ */
.card > .card-header:first-child {
  position: relative;
}

.card > .card-header:first-child::after {
  content: '';
  position: absolute;
  left: 1rem;
  bottom: -1px;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aw-gold-soft), var(--aw-gold));
}

/* ==========================================================================
   4. BUTTONS
   --------------------------------------------------------------------------
   Gold carries dark type, navy carries light type. Bootstrap 5.1 compiles
   these colours in, so each state has to be restated.
   ========================================================================== */

.btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.15rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary,
.btn-primary:visited {
  background: linear-gradient(135deg, var(--aw-gold-soft), var(--aw-gold));
  border-color: transparent;
  color: var(--aw-navy-900);
  box-shadow: 0 8px 20px rgba(194, 143, 39, 0.28);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
  background: linear-gradient(135deg, var(--aw-gold), var(--aw-gold-bright));
  border-color: transparent;
  color: var(--aw-navy-900);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--aw-gold-soft);
  border-color: transparent;
  color: rgba(2, 9, 28, 0.55);
}

.btn-outline-primary {
  border-color: rgba(22, 49, 92, 0.35);
  color: var(--aw-navy-600);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--aw-navy-600);
  border-color: var(--aw-navy-600);
  color: #ffffff;
}

.btn-secondary,
.btn-secondary:visited {
  background: var(--aw-navy-700);
  border-color: var(--aw-navy-700);
  color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background: var(--aw-navy-600);
  border-color: var(--aw-navy-600);
  color: #ffffff;
}

.btn-link { color: var(--aw-navy-600); }
.btn-link:hover { color: var(--aw-gold-soft); }

/* ==========================================================================
   5. TABLES
   --------------------------------------------------------------------------
   Most of phpVMS is tables: flights, PIREPs, fleet, rosters. Making them
   legible does more for the site than any other single rule here.
   ========================================================================== */

.table {
  --bs-table-striped-bg: rgba(22, 49, 92, 0.035);
  color: var(--aw-ink);
  border-color: var(--aw-line);
}

.table > thead {
  border-bottom: 2px solid var(--aw-line);
}

.table > thead th {
  background: transparent;
  color: var(--aw-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table > tbody > tr:hover > * {
  background: rgba(233, 179, 48, 0.07);
}

.table td, .table th {
  border-color: var(--aw-line);
  vertical-align: middle;
}

/* Tables inside a card should not fight the card's rounded corners ------- */
.card > .table:last-child,
.card > .table-responsive:last-child {
  border-bottom-left-radius: var(--aw-radius);
  border-bottom-right-radius: var(--aw-radius);
  overflow: hidden;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */

.form-control,
.form-select,
.input-group-text {
  border-radius: var(--aw-radius-sm);
  border-color: rgba(15, 23, 42, 0.16);
  padding: 0.55rem 0.8rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--aw-gold);
  box-shadow: 0 0 0 0.2rem rgba(233, 179, 48, 0.22);
}

.form-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--aw-navy-700);
  margin-bottom: 0.35rem;
}

.form-check-input:checked {
  background-color: var(--aw-navy-600);
  border-color: var(--aw-navy-600);
}

.form-check-input:focus {
  border-color: var(--aw-gold);
  box-shadow: 0 0 0 0.2rem rgba(233, 179, 48, 0.22);
}

/* Select2 is used for the airport pickers -------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--aw-radius-sm) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  min-height: 42px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--aw-navy-600) !important;
}

/* ==========================================================================
   7. BADGES, ALERTS, PAGINATION, PROGRESS
   ========================================================================== */

.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.38em 0.7em;
}

.badge.bg-primary { background: var(--aw-navy-600) !important; }

/* Bootstrap's own colour utilities still hand out #0d6efd. They are used all
   over the views for small icons and hints, so they are redirected here
   rather than hunted down file by file. */
.text-primary { color: var(--aw-navy-600) !important; }
.bg-primary { background-color: var(--aw-navy-600) !important; }
.border-primary { border-color: var(--aw-navy-600) !important; }
.link-primary { color: var(--aw-navy-600) !important; }

/* Utility class for anything that should read as a brand highlight ------- */
.badge.aw-badge-gold {
  background: rgba(233, 179, 48, 0.16) !important;
  /* Deep gold, not --aw-gold-soft: that only reaches 2.6:1 on this tint. */
  color: #6b4e0f !important;
  border: 1px solid rgba(233, 179, 48, 0.35);
}

.alert {
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-sm);
  box-shadow: var(--aw-shadow);
}

/* Bootstrap's info alert is cyan, which is the one leftover colour from the
   old palette. Warning, success and danger keep their meaning and are left
   alone - only the neutral "here is some information" box is rebranded. */
.alert-info {
  background: rgba(22, 49, 92, 0.07);
  border-color: rgba(22, 49, 92, 0.20);
  color: var(--aw-navy-700);
}

/* Deep gold, not --aw-gold-soft: the lighter tone only reaches 2.6:1 on this
   tint, below the 3:1 a meaningful icon needs. */
.alert-info .fa,
.alert-info .fas,
.alert-info .far {
  color: #8a6410;
}

.alert-info a {
  color: var(--aw-navy-600);
  text-decoration: underline;
}

.page-link {
  color: var(--aw-navy-600);
  border-color: var(--aw-line);
}

.page-item.active .page-link {
  background: var(--aw-navy-600);
  border-color: var(--aw-navy-600);
  color: #ffffff;
}

.progress { background: rgba(15, 23, 42, 0.07); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--aw-navy-600), var(--aw-gold)); }

.nav-tabs .nav-link {
  color: var(--aw-muted);
  font-weight: 700;
  border: none;
  border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link.active {
  color: var(--aw-navy-700);
  background: transparent;
  border-bottom-color: var(--aw-gold);
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

#footer .card {
  background: linear-gradient(180deg, var(--aw-navy-800), var(--aw-navy-900));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.70);
  border-radius: var(--aw-radius);
}

#footer .card a { color: rgba(255, 255, 255, 0.86); }
#footer .card a:hover { color: var(--aw-gold); }

#footer .aw-footer-legal {
  margin: 0.6rem auto 0;
  max-width: 900px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
}

/* The optional network logos sit on a light page, so keep them subtle ---- */
#page-contents .position-absolute img { opacity: 0.9; }

/* ==========================================================================
   9. DARK MODE
   --------------------------------------------------------------------------
   The theme ships an optional dark sheet (gen_darkmode). If it is switched
   on, the light surfaces above have to give way, otherwise the page ends up
   half and half.
   ========================================================================== */

body.dark-mode,
[data-theme="dark"] body {
  --aw-surface: #0f1a30;
  --aw-page: #060d1e;
  --aw-ink: #e8edf7;
  --aw-muted: #93a3bd;
  --aw-line: rgba(255, 255, 255, 0.09);
  --aw-navy-700: #ffffff;
}

body.dark-mode .card,
[data-theme="dark"] body .card {
  background: var(--aw-surface);
  color: var(--aw-ink);
}

body.dark-mode .table,
[data-theme="dark"] body .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
  color: var(--aw-ink);
}

body.dark-mode .form-control,
body.dark-mode .form-select,
[data-theme="dark"] body .form-control,
[data-theme="dark"] body .form-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--aw-ink);
}

/* ==========================================================================
   10. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}