:root {
  /* Brand */
  --primary: #00c3ff;
  --primary-600: #0098c9;
  --danger: #ff4d4d;
  --success: #18a957;
  --warning: #f6c445;

  /* Backgrounds */
  --bg: #001F4D;
  --bg-alt: #003366;

  /* Layout surfaces */
  --header-bg: rgba(255,255,255,0.05); /* glass header */
  --sidebar-bg: #113060;    /* royal blue */
  --footer-bg: #000000;
  --sidebar-active: #ffd700; /* gold highlight */

  /* Text */
  --text: #ffffff;
  --text-dark: #000000;
  --text-muted: #dddddd;

  /* Glass */
  --glass-05: rgba(255,255,255,0.05);
  --glass-08: rgba(255,255,255,0.08);
  --glass-10: rgba(255,255,255,0.10);
  --glass-20: rgba(255,255,255,0.20);

  /* Borders / Radii / Shadows */
  --border: rgba(255,255,255,0.2);
  --radius-6: 6px;
  --radius-10: 10px;
  --shadow-sm: 0 0 10px rgba(0,0,0,0.2);
  --shadow-md: 0 0 15px rgba(0,0,0,0.3);
  --shadow-lg: 0 0 25px rgba(0,0,0,0.5);

  /* Typography */
  --font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

/* ===============================
   Global Layout
=============================== */
body {
  background: linear-gradient(to right, var(--bg), var(--bg-alt));
  font-family: var(--font);
  color: var(--text);
  margin: 0;
  padding: 0;
}

/* ===============================
   Cards & Containers
=============================== */
.card,
.mainContainer,
.custom-card {
  background: var(--glass-08);
  border-radius: var(--radius-10);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text);
}

/* ===============================
   Form Elements
=============================== */
.form-control,
.form-select,
textarea,
input,
select {
  background: var(--glass-10);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  color: var(--text);
  transition: 0.3s ease;
}

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

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  background: var(--glass-20);
  box-shadow: 0 0 8px var(--primary);
  outline: none;
}

/* ===============================
   Buttons
=============================== */
.btn,
button {
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-6);
  transition: 0.3s ease;
}

.btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary-600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-600);
  transform: scale(1.03);
}

.btn-outline-warning {
  border: 1px solid var(--warning);
  color: var(--warning);
  background: transparent;
}

.btn-outline-warning:hover {
  background: var(--warning);
  color: #000;
}

/* ===============================
   Section Titles
=============================== */
.module-title,
.section-title,
h4, h5 {
  color: var(--text);
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* ==== Select dropdown: consistent dark styling across OS/browsers ==== */
:root{
  --select-bg: var(--glass-10);
  --select-fg: var(--text);
  --select-popup-bg: #0b2440;   /* dropdown list background */
  --select-popup-fg: #ffffff;   /* dropdown list text */
  --select-border: var(--border);
  --select-muted:  #9fb3c8;     /* placeholder/disabled option */
}

select,
.form-select{
  color-scheme: dark;                 /* makes Chrome/Windows use dark popup */
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--select-bg);
  color: var(--select-fg);
  border: 1px solid var(--select-border);
  border-radius: var(--radius-6);
  padding: .6rem 2.2rem .6rem .8rem;
  line-height: 1.2;
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
  cursor: pointer;

  /* visible white caret on dark bg */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 12px;
}

select option,
select optgroup{
  background: var(--select-popup-bg);
  color: var(--select-popup-fg);
}

select option[disabled],
select option[value=""],
select option.placeholder{
  color: var(--select-muted);
}

/* focus ring for keyboard users */
select:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Old Edge/IE quirks (safe elsewhere) */
select::-ms-expand{ display:none; }
select::-ms-value{
  background: var(--select-bg);
  color: var(--select-fg);
}