/* =========================================
   Modern UI Theme – Dropdowns, Checkboxes, Text Frames
   ========================================= */

/* Design tokens (easy to customize) */
:root {
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Base palette (light mode) */
 /* --bg: #0f172a;                    /* deep navy backdrop */
/*  --card: #111827;                  /* cards */
 /* --text: #e5e7eb;                  /* body text */
/*  --muted: #a1a1aa;                 /* secondary text */
/*  --border: #334155;                /* border color */

  /* Base palette (your requested changes applied) */
  --bg: #1f3a93;          /* NAVY (not too dark) – rich but readable backdrop */
  --card: #152a55;        /* Card surface – slightly darker navy for depth */
  --text: #0b3c8a;        /* DARK BLUE – body text */
  --muted: #f7a75e;       /* LIGHT ORANGE – secondary text and hints */
  --border: #0b1f3a;      /* DARK NAVY – borders and outlines */
  --focus: #93c5fd;                 /* focus ring */
  --accent: #60a5fa;                /* primary accent (blue) */
  --accent-2: #22c55e;              /* success (green) */
  --danger: #ef4444;                /* error (red) */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);



  /* Surface gradients */
  --card-grad: linear-gradient(180deg, rgba(31,41,55,.9), rgba(17,24,39,.9));
  --btn-grad: linear-gradient(180deg, #3b82f6, #2563eb);
  --btn-outline: #2563eb;
}

/* Page scaffold (optional) */
body {
  margin: 0;
  font-family: var(--ui-font);
  background:
    radial-gradient(1000px 600px at 20% 20%, rgba(96,165,250,.08), transparent 60%),
    radial-gradient(800px 500px at 80% 10%, rgba(34,197,94,.06), transparent 55%),
    var(--bg);
  color: var(--text);
}

.container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1rem;
}

.card {
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

/* Headings */
h1, h2 {
  margin: 0 0 .75rem 0;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Grid helpers */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Labels */
label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}

/* =========================
   Dropdowns (select)
   ========================= */
select {
  appearance: none;
  width: 100%;
  font-size: 1rem;
  line-height: 1.25;
  padding: .65rem 2.5rem .65rem .85rem; /* room for caret */
  color: var(--text);
  background:
    linear-gradient(180deg, #0b1220, #0c1322) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)) border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  will-change: transform;
}

/* Custom caret using background SVG */
select {
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%23a1a1aa' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 16px 16px;
}

select:hover {
  border-color: #3b82f6;
}

select:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow:
    0 0 0 3px rgba(147,197,253,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Disabled state */
select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* =========================
   Fancy checkboxes
   ========================= */
/* Container for inline check labels */
.checks {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Base checkbox reset */
.check {
  --size: 22px;
  appearance: none;
  inline-size: var(--size);
  block-size: var(--size);
  margin: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0b1220;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Checkmark (SVG) - drawn only when checked */
.check::after {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .12s ease, transform .12s ease;
}

.check:checked {
  border-color: #1d4ed8;
  background: var(--btn-grad);
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

.check:checked::after {
  opacity: 1;
  transform: scale(1);
}

.check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(147,197,253,.45);
}

/* Label pairing */
.check-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 500;
  color: var(--text);
}

/* Disabled checkbox */
.check:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* =========================
   Text frames (textarea / .text-frame)
   ========================= */
textarea,
.text-frame {
  width: 100%;
  min-height: 220px;
  font-family: var(--mono-font);
  font-size: .95rem;
  line-height: 1.45;
  color: #e2e8f0;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), var(--shadow);
  padding: .85rem 1rem;
  resize: vertical;
}

textarea::placeholder,
.text-frame::placeholder {
  color: var(--muted);
}

textarea:focus,
.text-frame:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow:
    0 0 0 3px rgba(147,197,253,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Error/Success variants (optional utility classes) */
.text-frame.success,
textarea.success {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

.text-frame.error,
textarea.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}

/* =========================
   Buttons
   ========================= */
.btn {
  appearance: none;
  border: 1px solid var(--btn-outline);
  background: var(--btn-grad);
  color: #fff;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, filter .2s ease;
}

.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(147,197,253,.45);
}

/* Secondary button */
.btn.secondary {
  border-color: var(--border);
  background: #0b1220;
  color: var(--text);
}

/* =========================
   Helper: Screen-reader only
   ========================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}