html, body {
  height: 100%;
}

body { background: #0f172a; position: relative;}
.glass {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.muted { color: rgba(255,255,255,0.75); }
.soft { color: rgba(255,255,255,0.9); }
.badge-soft {
  background: rgba(201,162,77,0.15);
  border: 1px solid rgba(201,162,77,0.35);
  color: #f6e3a1;
}
.accent {
  background: linear-gradient(90deg, rgba(201,162,77,0.22), rgba(184,115,51,0.18));
  border: 1px solid rgba(201,162,77,0.35);
}
.form-control, .form-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}

.form-control:focus, .form-select:focus {
  border-color: rgba(201,162,77,0.7);
  box-shadow: 0 0 0 .25rem rgba(201,162,77,.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.btn-accent {
  background: #c9a24d;
  border: none;
  color: #0b1220;
  font-weight: 600;
}
.btn-accent:hover { background: #ddb764; }
.card-title small { font-weight: 500; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.logo-circle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;        /* 🔑 KEY FIX */
}

/* ---------- COMMON FORM LOOK ---------- */
.form-control,
.form-select {
background-color: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.22);
color: #ffffff;
border-radius: 0.75rem;
padding: 0.6rem 0.9rem;
}

.form-control::placeholder {
color: rgba(255,255,255,0.5);
}

/* ---------- FOCUS STATE ---------- */
.form-control:focus,
.form-select:focus {
background-color: rgba(255,255,255,0.08);
border-color: rgba(201,162,77,0.8);
box-shadow: 0 0 0 0.2rem rgba(201,162,77,0.25);
color: #ffffff;
}

/* ---------- DATE PICKER ---------- */
/* =========================================
   FLATPICKR — DARK/GLASS THEME (READABLE)
   Matches: night background + gold accent
   ========================================= */

   :root{
    --fp-bg: rgba(15, 23, 42, 0.96);
    --fp-border: rgba(255,255,255,0.18);
    --fp-text: rgba(255,255,255,0.92);
    --fp-text-dim: rgba(255,255,255,0.70);
    --fp-text-faint: rgba(255,255,255,0.38);
    --fp-hover: rgba(255,255,255,0.12);
    --fp-accent: #c9a24d;
    --fp-accent-ink: #0b1220;
  }
  
  /* Container */
  .flatpickr-calendar {
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: 0.9rem;
    box-shadow: 0 20px 45px rgba(0,0,0,0.45);
    overflow: hidden;
  }
  
  /* Header (month/year row) */
  .flatpickr-months {
    padding: 10px 10px 6px;
  }
  
  .flatpickr-current-month {
    color: var(--fp-text);
    font-weight: 650;
  }
  
  /* Month label text */
  .flatpickr-current-month .cur-month {
    color: var(--fp-text);
  }
  
  /* Year input */
  .flatpickr-current-month input.cur-year {
    color: var(--fp-text);
    font-weight: 650;
  }
  
  /* Prev/Next arrows */
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    color: var(--fp-text);
    fill: var(--fp-text);
    border-radius: 0.6rem;
  }
  
  .flatpickr-months .flatpickr-prev-month:hover,
  .flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255,255,255,0.08);
  }
  
  /* Weekdays row */
  .flatpickr-weekdays {
    background: transparent;
    padding: 6px 10px 8px;
  }
  
  .flatpickr-weekday {
    color: var(--fp-text-dim) !important;
    font-weight: 600;
  }
  
  /* Day cells */
  .flatpickr-day {
    color: var(--fp-text);
    border-radius: 0.65rem;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  
  /* Hover */
  .flatpickr-day:hover {
    background: var(--fp-hover);
    border-color: rgba(255,255,255,0.10);
  }
  
  /* Today */
  .flatpickr-day.today {
    border-color: rgba(201,162,77,0.65);
  }
  
  /* Selected */
  .flatpickr-day.selected,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
    background: var(--fp-accent);
    border-color: var(--fp-accent);
    color: var(--fp-accent-ink);
    font-weight: 700;
  }
  
  /* In range (if you ever use range picker) */
  .flatpickr-day.inRange {
    background: rgba(201,162,77,0.18);
    border-color: transparent;
  }
  
  /* Other-month days */
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
    color: var(--fp-text-faint);
  }
  
  /* Disabled days */
  .flatpickr-day.disabled,
  .flatpickr-day.disabled:hover {
    color: rgba(255,255,255,0.22);
    background: transparent;
    cursor: not-allowed;
  }
  
  /* Week numbers (if enabled) */
  .flatpickr-weekwrapper .flatpickr-weekday,
  .flatpickr-weekwrapper .flatpickr-day {
    color: var(--fp-text-dim);
  }
  
  /* Month dropdown (this is the one you mentioned) */
  .flatpickr-monthDropdown-months {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: var(--fp-text) !important;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0.6rem;
    padding: 2px 10px;
    font-weight: 650;
  
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  /* Dropdown hover/focus */
  .flatpickr-monthDropdown-months:hover,
  .flatpickr-monthDropdown-months:focus {
    border-color: rgba(201,162,77,0.8);
    outline: none;
  }
  
  /* Dropdown options */
  .flatpickr-monthDropdown-months option {
    background: rgb(15, 23, 42);
    color: #ffffff;
  }
  
  /* Year input arrows */

/* Up arrow */
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  content: "▲";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
}

/* Down arrow */
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  content: "▼";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
}



  
  /* Time picker (safe to keep; won’t affect you unless enableTime=true) */
  .flatpickr-time {
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .flatpickr-time input,
  .flatpickr-time .flatpickr-am-pm {
    background: transparent;
    color: var(--fp-text);
  }
  


/* ---------- PERIOD DROPDOWN ---------- */
.form-select {
appearance: none;
background-image:
    linear-gradient(45deg, transparent 50%, #c9a24d 50%),
    linear-gradient(135deg, #c9a24d 50%, transparent 50%);
background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
background-size: 6px 6px;
background-repeat: no-repeat;
padding-right: 2.2rem;
}

/* hover */
.form-select:hover {
background-color: rgba(255,255,255,0.1);
}

/* ---------- OPTION LIST (limited support) ---------- */
option {
background-color: #0f172a;
color: #ffffff;
}

/* ---------- FORM TEXT ---------- */
.form-text {
color: rgba(255,255,255,0.55);
}

/* the overlay tint (optional), placed UNDER the canvas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* same layer as canvas, but canvas will be on top if it comes later */
  background:
    radial-gradient(1200px 800px at 20% 30%, rgba(157, 98, 255, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 80% 60%, rgba(0, 255, 200, 0.10), transparent 55%),
    radial-gradient(900px 600px at 50% 90%, rgba(255, 170, 80, 0.08), transparent 60%),
    radial-gradient(1400px 900px at 50% 50%, rgba(0,0,0,0.25), rgba(0,0,0,0.70));
}

/* canvas layer */
#bg3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;          /* IMPORTANT: not -1 */
  pointer-events: none;
  display: block;
}

/* UI must be above canvas */
.container {
  position: relative;
  z-index: 1;
}

/* ===== Top menu ===== */
.topnav-wrap {
  position: sticky;
  top: 0;
  z-index: 2; /* above canvas (0) and UI (1) */
  padding-top: 18px;
  padding-bottom: 6px;
}

/* keep navbar looking “glass” and tight */
.topnav {
  backdrop-filter: blur(12px);
}

/* logo in navbar */
.topnav-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.topnav-logo img {
  width: 18px;
  height: 18px;
}

/* links */
.topnav-link {
  color: rgba(255,255,255,0.85);
  border-radius: 0.75rem;
  padding: 0.5rem 0.85rem;
}

.topnav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.topnav-link.active {
  background: rgba(201,162,77,0.18);
  border: 1px solid rgba(201,162,77,0.30);
  color: #f6e3a1 !important;
  font-weight: 650;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* language dropdown in top menu */
.topnav-lang {
  width: 64px;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 2rem; /* keeps your custom arrow space */
  font-size: 18px;     /* makes flag readable */
  line-height: 1.1;
}

/* Center option text (works in most browsers) */
.topnav-lang option {
  text-align: center;
}