/* style.css - Core variables, themes, global styles, sky gradients, clouds, and stars */
:root {
  --color-bg-primary: #141820;
  --color-bg-secondary: #1c2233;
  --color-bg-card: #242d3f;
  --color-bg-card-rgb: 36, 45, 63;
  --nav-bg-rgb: 20, 24, 32;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #60a5fa;
  --color-text-primary: #e8ecf4;
  --color-text-secondary: #8a94a6;
  --color-text-muted: #555f73;
  --color-cloud-1: rgba(200, 210, 230, 0.22);
  --color-cloud-2: rgba(180, 195, 220, 0.16);
  --color-cloud-3: rgba(160, 175, 200, 0.1);
  --color-border: #2e3a50;
  --color-border-light: #3a4760;
  --color-danger: #f87171;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-warning-text: #fbbf24;
  --color-warning-border: rgba(245, 158, 11, 0.4);
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-text: #fca5a5;
  --color-danger-border: rgba(239, 68, 68, 0.4);
  --color-info-bg: rgba(59, 130, 246, 0.15);
  --color-info-text: #93c5fd;
  --color-info-border: rgba(59, 130, 246, 0.4);
  --color-success-bg: rgba(22, 163, 74, 0.15);
  --color-success-text: #86efac;
  --color-success-border: rgba(22, 163, 74, 0.4);
  --badge-taa-bg: rgba(59, 130, 246, 0.15);
  --badge-taa-text: #7cacf8;
  --badge-hp-bg: rgba(251, 191, 36, 0.12);
  --badge-hp-text: #fcd34d;
  --badge-complex-bg: rgba(167, 139, 250, 0.15);
  --badge-complex-text: #c4b5fd;
  --badge-time-bg: rgba(52, 211, 153, 0.12);
  --badge-time-text: #6ee7b7;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
}
[data-theme="white"] {
  --color-bg-primary: #f0f2f5;
  --color-bg-secondary: #e4e7ed;
  --color-bg-card: #ffffff;
  --color-bg-card-rgb: 255, 255, 255;
  --nav-bg-rgb: 255, 255, 255;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #1d4ed8;
  --color-text-primary: #1a1f2e;
  --color-text-secondary: #4a5568;
  --color-text-muted: #8494a7;
  --color-cloud-1: rgba(160, 160, 180, 0.3);
  --color-cloud-2: rgba(160, 160, 180, 0.25);
  --color-cloud-3: rgba(160, 160, 180, 0.2);
  --color-border: #d5dae2;
  --color-border-light: #e2e6ec;
  --color-danger: #dc2626;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-warning-border: #f59e0b;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #991b1b;
  --color-danger-border: #ef4444;
  --color-info-bg: #eff6ff;
  --color-info-text: #1e40af;
  --color-info-border: #3b82f6;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-success-border: #16a34a;
  --badge-taa-bg: rgba(59, 130, 246, 0.1);
  --badge-taa-text: #1d4ed8;
  --badge-hp-bg: rgba(245, 158, 11, 0.1);
  --badge-hp-text: #b45309;
  --badge-complex-bg: rgba(139, 92, 246, 0.1);
  --badge-complex-text: #6d28d9;
  --badge-time-bg: rgba(34, 197, 94, 0.1);
  --badge-time-text: #15803d;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}
[data-theme="midnight"] {
  --color-bg-primary: #000000;
  --color-bg-secondary: #0a0a0a;
  --color-bg-card: #141414;
  --color-bg-card-rgb: 20, 20, 20;
  --nav-bg-rgb: 0, 0, 0;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #60a5fa;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #787878;
  --color-text-muted: #484848;
  --color-cloud-1: rgba(30, 30, 40, 0.3);
  --color-cloud-2: rgba(30, 30, 40, 0.25);
  --color-cloud-3: rgba(30, 30, 40, 0.2);
  --color-border: #1e1e1e;
  --color-border-light: #2a2a2a;
  --color-danger: #f87171;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-warning-text: #fbbf24;
  --color-warning-border: rgba(245, 158, 11, 0.4);
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-text: #fca5a5;
  --color-danger-border: rgba(239, 68, 68, 0.4);
  --color-info-bg: rgba(59, 130, 246, 0.15);
  --color-info-text: #93c5fd;
  --color-info-border: rgba(59, 130, 246, 0.4);
  --color-success-bg: rgba(22, 163, 74, 0.15);
  --color-success-text: #86efac;
  --color-success-border: rgba(22, 163, 74, 0.4);
  --badge-taa-bg: rgba(59, 130, 246, 0.15);
  --badge-taa-text: #60a5fa;
  --badge-hp-bg: rgba(251, 191, 36, 0.15);
  --badge-hp-text: #fbbf24;
  --badge-complex-bg: rgba(167, 139, 250, 0.15);
  --badge-complex-text: #a78bfa;
  --badge-time-bg: rgba(52, 211, 153, 0.15);
  --badge-time-text: #34d399;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
}
[data-theme="tarmac"] {
  --color-bg-primary: #2a2d31;
  --color-bg-secondary: #333639;
  --color-bg-card: #3c3f44;
  --color-bg-card-rgb: 60, 63, 68;
  --nav-bg-rgb: 42, 45, 49;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #60a5fa;
  --color-text-primary: #dcdfe3;
  --color-text-secondary: #929aa5;
  --color-text-muted: #636b78;
  --color-cloud-1: rgba(50, 55, 65, 0.3);
  --color-cloud-2: rgba(50, 55, 65, 0.25);
  --color-cloud-3: rgba(50, 55, 65, 0.2);
  --color-border: #4a4e55;
  --color-border-light: #565b63;
  --color-danger: #f87171;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-warning-text: #fbbf24;
  --color-warning-border: rgba(245, 158, 11, 0.4);
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-text: #fca5a5;
  --color-danger-border: rgba(239, 68, 68, 0.4);
  --color-info-bg: rgba(59, 130, 246, 0.15);
  --color-info-text: #93c5fd;
  --color-info-border: rgba(59, 130, 246, 0.4);
  --color-success-bg: rgba(22, 163, 74, 0.15);
  --color-success-text: #86efac;
  --color-success-border: rgba(22, 163, 74, 0.4);
  --badge-taa-bg: rgba(59, 130, 246, 0.15);
  --badge-taa-text: #60a5fa;
  --badge-hp-bg: rgba(251, 191, 36, 0.15);
  --badge-hp-text: #fbbf24;
  --badge-complex-bg: rgba(167, 139, 250, 0.15);
  --badge-complex-text: #a78bfa;
  --badge-time-bg: rgba(52, 211, 153, 0.15);
  --badge-time-text: #34d399;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
}
[data-theme="dusk"] {
  --color-bg-primary: #1a1612;
  --color-bg-secondary: #241f19;
  --color-bg-card: #2e2720;
  --color-bg-card-rgb: 46, 39, 32;
  --nav-bg-rgb: 26, 22, 18;
  --color-accent-primary: #d97706;
  --color-accent-hover: #b45309;
  --color-accent-light: #f59e0b;
  --color-text-primary: #f0e6d8;
  --color-text-secondary: #9a8e7e;
  --color-text-muted: #665c50;
  --color-cloud-1: rgba(40, 35, 28, 0.3);
  --color-cloud-2: rgba(40, 35, 28, 0.25);
  --color-cloud-3: rgba(40, 35, 28, 0.2);
  --color-border: #3d3529;
  --color-border-light: #4d4437;
  --color-danger: #f87171;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-warning-text: #fbbf24;
  --color-warning-border: rgba(245, 158, 11, 0.4);
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-danger-text: #fca5a5;
  --color-danger-border: rgba(239, 68, 68, 0.4);
  --color-info-bg: rgba(59, 130, 246, 0.15);
  --color-info-text: #93c5fd;
  --color-info-border: rgba(59, 130, 246, 0.4);
  --color-success-bg: rgba(22, 163, 74, 0.15);
  --color-success-text: #86efac;
  --color-success-border: rgba(22, 163, 74, 0.4);
  --badge-taa-bg: rgba(217, 119, 6, 0.15);
  --badge-taa-text: #f59e0b;
  --badge-hp-bg: rgba(251, 191, 36, 0.15);
  --badge-hp-text: #fbbf24;
  --badge-complex-bg: rgba(167, 139, 250, 0.15);
  --badge-complex-text: #a78bfa;
  --badge-time-bg: rgba(52, 211, 153, 0.15);
  --badge-time-text: #34d399;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}
[data-theme="cloud"] {
  --color-bg-primary: #e8ecf2;
  --color-bg-secondary: #dce2ea;
  --color-bg-card: #f0f4f8;
  --color-bg-card-rgb: 240, 244, 248;
  --nav-bg-rgb: 232, 236, 242;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #1d4ed8;
  --color-text-primary: #2d3748;
  --color-text-secondary: #5a6577;
  --color-text-muted: #8e99a8;
  --color-cloud-1: rgba(160, 170, 190, 0.3);
  --color-cloud-2: rgba(160, 170, 190, 0.25);
  --color-cloud-3: rgba(160, 170, 190, 0.2);
  --color-border: #c8d0db;
  --color-border-light: #d8dfe8;
  --color-danger: #dc2626;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-warning-border: #f59e0b;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #991b1b;
  --color-danger-border: #ef4444;
  --color-info-bg: #eff6ff;
  --color-info-text: #1e40af;
  --color-info-border: #3b82f6;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-success-border: #16a34a;
  --badge-taa-bg: rgba(59, 130, 246, 0.1);
  --badge-taa-text: #1d4ed8;
  --badge-hp-bg: rgba(245, 158, 11, 0.1);
  --badge-hp-text: #b45309;
  --badge-complex-bg: rgba(139, 92, 246, 0.1);
  --badge-complex-text: #6d28d9;
  --badge-time-bg: rgba(34, 197, 94, 0.1);
  --badge-time-text: #15803d;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}
[data-theme="cream"] {
  --color-bg-primary: #f5f0e8;
  --color-bg-secondary: #ebe5db;
  --color-bg-card: #faf7f2;
  --color-bg-card-rgb: 250, 247, 242;
  --nav-bg-rgb: 245, 240, 232;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #1d4ed8;
  --color-text-primary: #2c2418;
  --color-text-secondary: #6b5d4e;
  --color-text-muted: #9a8e7e;
  --color-cloud-1: rgba(180, 170, 150, 0.3);
  --color-cloud-2: rgba(180, 170, 150, 0.25);
  --color-cloud-3: rgba(180, 170, 150, 0.2);
  --color-border: #d9d0c3;
  --color-border-light: #e5ddd2;
  --color-danger: #dc2626;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-warning-border: #f59e0b;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #991b1b;
  --color-danger-border: #ef4444;
  --color-info-bg: #eff6ff;
  --color-info-text: #1e40af;
  --color-info-border: #3b82f6;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-success-border: #16a34a;
  --badge-taa-bg: rgba(59, 130, 246, 0.1);
  --badge-taa-text: #1d4ed8;
  --badge-hp-bg: rgba(245, 158, 11, 0.1);
  --badge-hp-text: #b45309;
  --badge-complex-bg: rgba(139, 92, 246, 0.1);
  --badge-complex-text: #6d28d9;
  --badge-time-bg: rgba(34, 197, 94, 0.1);
  --badge-time-text: #15803d;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}
[data-theme="high-contrast"] {
  --color-bg-primary: #0d0d0d;
  --color-bg-secondary: #1a1a1a;
  --color-bg-card: #262626;
  --color-bg-card-rgb: 38, 38, 38;
  --nav-bg-rgb: 13, 13, 13;
  --color-accent-primary: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #60a5fa;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #606060;
  --color-cloud-1: rgba(30, 30, 40, 0.3);
  --color-cloud-2: rgba(30, 30, 40, 0.25);
  --color-cloud-3: rgba(30, 30, 40, 0.2);
  --color-border: #333333;
  --color-border-light: #404040;
  --color-danger: #ea580c;
  --color-success: #2563eb;
  --color-warning: #eab308;
  --color-warning-bg: rgba(234, 179, 8, 0.2);
  --color-warning-text: #fde047;
  --color-warning-border: rgba(234, 179, 8, 0.5);
  --color-danger-bg: rgba(234, 88, 12, 0.2);
  --color-danger-text: #fdba74;
  --color-danger-border: rgba(234, 88, 12, 0.5);
  --color-info-bg: rgba(59, 130, 246, 0.2);
  --color-info-text: #93c5fd;
  --color-info-border: rgba(59, 130, 246, 0.5);
  --color-success-bg: rgba(37, 99, 235, 0.2);
  --color-success-text: #93c5fd;
  --color-success-border: rgba(37, 99, 235, 0.5);
  --badge-taa-bg: rgba(59, 130, 246, 0.15);
  --badge-taa-text: #60a5fa;
  --badge-hp-bg: rgba(234, 179, 8, 0.15);
  --badge-hp-text: #eab308;
  --badge-complex-bg: rgba(167, 139, 250, 0.15);
  --badge-complex-text: #a78bfa;
  --badge-time-bg: rgba(37, 99, 235, 0.15);
  --badge-time-text: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
}
[data-theme="white"] .btn-danger,
[data-theme="cloud"] .btn-danger,
[data-theme="cream"] .btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626;
}
[data-theme="white"] .btn-danger:hover,
[data-theme="cloud"] .btn-danger:hover,
[data-theme="cream"] .btn-danger:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
[data-theme="white"] .btn-success,
[data-theme="cloud"] .btn-success,
[data-theme="cream"] .btn-success,
[data-theme="white"] .btn-primary,
[data-theme="cloud"] .btn-primary,
[data-theme="cream"] .btn-primary {
  background: #16a34a;
  color: #fff;
  border: 1px solid #16a34a;
}
[data-theme="white"] .btn-success:hover,
[data-theme="cloud"] .btn-success:hover,
[data-theme="cream"] .btn-success:hover,
[data-theme="white"] .btn-primary:hover,
[data-theme="cloud"] .btn-primary:hover,
[data-theme="cream"] .btn-primary:hover {
  background: #15803d;
  color: #fff;
  border-color: #15803d;
}
[data-theme="white"] .btn-secondary,
[data-theme="cloud"] .btn-secondary,
[data-theme="cream"] .btn-secondary {
  background: #6b7280;
  color: #fff;
  border: 1px solid #6b7280;
}
[data-theme="white"] .btn-secondary:hover,
[data-theme="cloud"] .btn-secondary:hover,
[data-theme="cream"] .btn-secondary:hover {
  background: #4b5563;
  color: #fff;
  border-color: #4b5563;
}
[data-theme="white"] .btn-accent,
[data-theme="cloud"] .btn-accent,
[data-theme="cream"] .btn-accent {
  background: var(--color-accent-primary);
  color: #fff;
}
[data-theme="white"] .btn-accent:hover,
[data-theme="cloud"] .btn-accent:hover,
[data-theme="cream"] .btn-accent:hover {
  background: var(--color-accent-hover);
  color: #fff;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Match the navigation/tab bar background so safe area edges
     are always the same color — prevents visible seams on iOS */
  background: rgb(var(--nav-bg-rgb));
  /* Prevent iOS rubber-band overscroll which drags position:fixed
     elements (tab bar) away from the screen edge */
  overscroll-behavior: none;
}
body {
  font-family: var(--font-family);
  background: var(--color-bg-primary, #141820);
  color: var(--color-text-primary, #e5e5e5);
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.no-animations *,
body.no-animations *:before,
body.no-animations *:after {
  animation: none !important;
  transition: none !important;
}
body.no-animations {
  background: var(--color-bg-primary);
}
.signin-page,
.dashboard-page,
.profile-page,
.aircraft-page,
.logbook-page,
.landing-main,
.landing-footer,
.terms-page,
.terms-agreement-page,
.types-page,
main,
.site-footer {
  position: relative;
  z-index: 2;
}
.terms-page,
.terms-agreement-page,
.types-page,
main {
  flex: 1;
}
.cloud-1 {
  width: 300px;
  height: 120px;
  background: var(--cloud-color-1, var(--color-cloud-1));
  top: 10%;
  left: -50px;
  animation: float-1 18s ease-in-out infinite;
}
.cloud-1:before {
  width: 150px;
  height: 150px;
  top: -60px;
  left: 50px;
}
.cloud-1:after {
  width: 180px;
  height: 100px;
  top: -30px;
  left: 140px;
}
.cloud-2 {
  width: 350px;
  height: 140px;
  background: var(--cloud-color-2, var(--color-cloud-2));
  top: 35%;
  right: -100px;
  animation: float-2 22s ease-in-out infinite;
}
.cloud-2:before {
  width: 180px;
  height: 180px;
  top: -80px;
  left: 70px;
}
.cloud-2:after {
  width: 160px;
  height: 120px;
  top: -40px;
  left: 180px;
}
.cloud-3 {
  width: 280px;
  height: 100px;
  background: var(--cloud-color-3, var(--color-cloud-3));
  bottom: 20%;
  left: 15%;
  animation: float-3 20s ease-in-out infinite;
}
.cloud-3:before {
  width: 140px;
  height: 140px;
  top: -60px;
  left: 40px;
}
.cloud-3:after {
  width: 120px;
  height: 90px;
  top: -30px;
  left: 130px;
}
.cloud-4 {
  width: 250px;
  height: 100px;
  background: var(--cloud-color-2, var(--color-cloud-2));
  top: 65%;
  left: -60px;
  animation: float-1 25s ease-in-out infinite reverse;
}
.cloud-4:before {
  width: 130px;
  height: 130px;
  top: -50px;
  left: 40px;
}
.cloud-4:after {
  width: 110px;
  height: 80px;
  top: -25px;
  left: 120px;
}
.cloud-5 {
  width: 320px;
  height: 130px;
  background: var(--cloud-color-3, var(--color-cloud-3));
  top: 20%;
  right: 5%;
  animation: float-2 28s ease-in-out infinite;
}
.cloud-5:before {
  width: 160px;
  height: 160px;
  top: -70px;
  left: 60px;
}
.cloud-5:after {
  width: 140px;
  height: 100px;
  top: -35px;
  left: 160px;
}