/* Dreamflight brand palette (Brand_Guidelines_24-08-2026.pdf, p.15-17) */
:root {
  --df-dark-blue: #00205B;
  --df-cyan: #00A3E0;
  --df-yellow: #FFCE00;
  --df-red: #EC0033;
  --df-white: #FFFFFF;
  --df-bg: #f5f5f5;
}

* { box-sizing: border-box; }
body { font-family: "Inclusive Sans", system-ui, sans-serif; margin: 0; background: var(--df-bg); color: #222; }
h1, h2 { font-family: "Asap", system-ui, sans-serif; font-weight: 700; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--df-dark-blue); color: var(--df-white); }
#brand { display: flex; align-items: center; gap: 0.75rem; }
#brand-logo { height: 2rem; width: auto; }
header h1 { font-size: 1.1rem; margin: 0; }
#user-info { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
#sign-out-btn { padding: 0.35rem 0.75rem; background: transparent; color: var(--df-white); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
#sign-out-btn:hover { background: rgba(255, 255, 255, 0.1); }
nav#tab-nav { display: flex; flex-wrap: wrap; background: var(--df-dark-blue); border-top: 1px solid rgba(255, 255, 255, 0.15); }
nav#tab-nav button { flex: 1 1 auto; min-width: 8rem; padding: 0.75rem 1rem; border: none; background: transparent; color: var(--df-white); opacity: 0.75; cursor: pointer; font-size: 0.95rem; }
nav#tab-nav button.active { background: var(--df-bg); color: var(--df-dark-blue); opacity: 1; font-weight: 600; }
main { padding: 1rem; max-width: 900px; margin: 0 auto; }
section.tab { display: none; }
section.tab.active { display: block; }
#error-banner { background: var(--df-red); color: var(--df-white); padding: 0.75rem 1rem; display: none; }
#error-banner.hidden { display: none; }
#error-banner.visible { display: block; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #ddd; font-size: 0.9rem; }
form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 400px; background: white; padding: 1rem; border-radius: 4px; }
label { font-size: 0.85rem; font-weight: 600; }
input { padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
button.primary { padding: 0.6rem 1rem; background: var(--df-yellow); color: var(--df-dark-blue); border: none; border-radius: 4px; cursor: pointer; font-size: 0.95rem; font-weight: 600; }
button.primary:disabled { background: #999; color: var(--df-white); cursor: not-allowed; }
button.danger { padding: 0.6rem 1rem; background: var(--df-white); color: var(--df-red); border: 1px solid var(--df-red); border-radius: 4px; cursor: pointer; font-size: 0.95rem; font-weight: 600; }
button.danger:hover { background: var(--df-red); color: var(--df-white); }
button.danger:disabled { background: #eee; color: #999; border-color: #ccc; cursor: not-allowed; }
.card button { margin-right: 0.5rem; }
.card { background: white; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
details.card { border-left: 4px solid var(--df-cyan); }
details.card summary { cursor: pointer; font-weight: 600; color: var(--df-dark-blue); }
details.card h3 { font-family: "Asap", system-ui, sans-serif; font-size: 1rem; margin: 1rem 0 0.25rem; }
details.card p, details.card li { font-size: 0.9rem; line-height: 1.5; color: #333; }
details.card ul { padding-left: 1.25rem; }

/* Funky brand-colour loading spinner: a spinning ring cycling through the
   full Dreamflight accent palette (colour palette, Brand_Guidelines p.15). */
.df-spinner {
  width: 3rem;
  height: 3rem;
  margin: 3rem auto;
  border-radius: 50%;
  background: conic-gradient(var(--df-cyan), var(--df-yellow), var(--df-red), var(--df-dark-blue), var(--df-cyan));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  animation: df-spin 0.9s linear infinite;
}
@keyframes df-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
  nav#tab-nav button { min-width: 45%; }
}