/* ============================================================
   All Star Airlines — Global Stylesheet
   Fonts: loaded via Google Fonts in layout
   Colors: red #B91C1C, navy #0F172A
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.0.0/tabler-icons.min.css');

:root {
  --red:        #B91C1C;
  --red2:       #991B1B;
  --red-light:  #FEF2F2;
  --red-mid:    #FCA5A5;
  --navy:       #0F172A;
  --navy2:      #1E293B;
  --navy3:      #334155;
  --white:      #FFFFFF;
  --off:        #F8FAFC;
  --border:     #E2E8F0;
  --text:       #0F172A;
  --muted:      #64748B;
  --light:      #94A3B8;
  --green:      #065F46;
  --green-bg:   #D1FAE5;
  --amber:      #92400E;
  --amber-bg:   #FEF3C7;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Links ─────────────────────────────────────────── */
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--red2); }

/* ── Bootstrap overrides ───────────────────────────── */
.btn-primary {
  background: var(--red) !important;
  border-color: var(--red) !important;
  font-weight: 500;
  border-radius: var(--radius);
}
.btn-primary:hover {
  background: var(--red2) !important;
  border-color: var(--red2) !important;
}
.btn-danger { border-radius: var(--radius); font-weight: 500; }

.form-control, .form-select {
  border-color: var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  padding: 9px 12px;
  background: var(--off);
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(185,28,28,.1);
  background: var(--white);
}
.form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-control.is-invalid { border-color: #DC2626; }
.invalid-feedback { font-size: 12px; }

.alert { border-radius: var(--radius); font-size: 13px; border: none; }
.alert-danger  { background: var(--red-light); color: var(--red2); }
.alert-success { background: var(--green-bg);  color: var(--green); }
.alert-warning { background: var(--amber-bg);  color: var(--amber); }

/* ── Auth pages ────────────────────────────────────── */
.auth-page {
  background: var(--off);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-container {
  width: 100%;
  max-width: 420px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.auth-logo .logo-mark {
  width: 40px;
  height: 40px;
  background: var(--red);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}

.auth-logo .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.auth-logo .l1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .04em;
}

.auth-logo .l2 {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.auth-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--border);
  padding: 32px;
  box-shadow: var(--shadow-md);
}

.auth-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.auth-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
}

.btn-auth {
  padding: 11px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
}

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
  margin-bottom: 0;
}

.auth-terms {
  text-align: center;
  font-size: 12px;
  color: var(--light);
  margin-top: 12px;
}

.auth-forgot {
  font-size: 12px;
  color: var(--red);
}

/* ── Status badges ─────────────────────────────────── */
.badge-pending    { background: var(--amber-bg);  color: var(--amber);  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-confirmed  { background: var(--green-bg);  color: var(--green);  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-declined   { background: var(--red-light); color: var(--red2);   font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-cancelled  { background: #F1F5F9;           color: var(--muted);  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-approved   { background: var(--green-bg);  color: var(--green);  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-processing { background: #DBEAFE;           color: #1E3A8A;       font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-submitted  { background: #DBEAFE;           color: #1E3A8A;       font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-rejected   { background: var(--red-light); color: var(--red2);   font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-open       { background: #DBEAFE;           color: #1E3A8A;       font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.badge-closed     { background: #F1F5F9;           color: var(--muted);  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }

/* ── Impersonation banner ──────────────────────────── */
.impersonate-bar {
  background: #92400E;
  color: #FEF3C7;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.impersonate-bar a {
  color: #FEF3C7;
  font-weight: 600;
  text-decoration: underline;
}

/* ── Utility ───────────────────────────────────────── */
.text-red   { color: var(--red) !important; }
.text-navy  { color: var(--navy) !important; }
.text-muted { color: var(--muted) !important; }
.bg-red     { background: var(--red) !important; }

/* ── Responsive helpers ────────────────────────────── */
@media (max-width: 768px) {
  .auth-card { padding: 24px 20px; }
  .auth-title { font-size: 20px; }
}