html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ===== MainProject-like darker borders =====
   Goal: avoid bright/white frames around every bordered element in the dark UI.
   We apply a darker "line" color to generic borders, and then re-allow semantic colors. */

html[data-theme="gray"],
html[data-theme="black"] {
  --ui-line: #33343a;
}

html[data-theme="light"] {
  --ui-line: rgba(148, 163, 184, 0.6); /* slate-400/60 */
}

/* Generic borders (Tailwind width utilities do not set color) */
.border,
.border-t,
.border-b,
.border-l,
.border-r,
.border-s,
.border-e {
  border-color: var(--ui-line) !important;
}

/* Keep explicit semantic colors working */
.border-transparent { border-color: transparent !important; }
.border-brand { border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important; }
.border-red-500 { border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important; }
.border-red-600 { border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)) !important; }
.border-amber-500 { border-color: rgb(245 158 11 / var(--tw-border-opacity, 1)) !important; }
.border-emerald-500 { border-color: rgb(16 185 129 / var(--tw-border-opacity, 1)) !important; }
.border-sky-600 { border-color: rgb(2 132 199 / var(--tw-border-opacity, 1)) !important; }
.border-indigo-500\/70 { border-color: rgba(99, 102, 241, 0.7) !important; }

/* Themed select controls
   Keep native dropdowns readable across the app, especially on dark themes. */
html[data-theme="gray"],
html[data-theme="black"],
html[data-theme="light"] {
  --ui-select-bg: color-mix(in srgb, var(--ui-card, rgba(51, 65, 85, 0.82)) 84%, var(--ui-bg, #0f172a) 16%);
  --ui-select-menu-bg: color-mix(in srgb, var(--ui-card, rgba(51, 65, 85, 0.88)) 90%, var(--ui-bg, #0f172a) 10%);
  --ui-select-border: color-mix(in srgb, currentColor 16%, transparent);
  --ui-select-text: #f8fafc;
  --ui-select-accent: color-mix(in srgb, var(--ui-brand, #3b82f6) 16%, var(--ui-card, rgba(51, 65, 85, 0.88)) 84%);
}

html[data-theme="black"] {
  --ui-select-bg: color-mix(in srgb, #000 38%, var(--ui-card, rgba(17, 17, 17, 0.92)) 62%);
  --ui-select-menu-bg: color-mix(in srgb, #000 52%, var(--ui-card, rgba(17, 17, 17, 0.95)) 48%);
  --ui-select-border: rgba(148, 163, 184, 0.24);
  --ui-select-text: #f8fafc;
  --ui-select-accent: color-mix(in srgb, var(--ui-brand, #3b82f6) 18%, #111827 82%);
}

html[data-theme="light"] {
  --ui-select-bg: color-mix(in srgb, var(--ui-card, rgba(255, 255, 255, 0.96)) 97%, #e2e8f0 3%);
  --ui-select-menu-bg: color-mix(in srgb, var(--ui-card, rgba(255, 255, 255, 0.98)) 98%, #cbd5e1 2%);
  --ui-select-border: rgba(100, 116, 139, 0.38);
  --ui-select-text: #0f172a;
  --ui-select-accent: color-mix(in srgb, var(--ui-brand, #3b82f6) 10%, #eff6ff 90%);
}

select {
  background-color: var(--ui-select-bg);
  color: var(--ui-select-text);
  border-color: var(--ui-select-border);
}

html[data-theme="gray"] select,
html[data-theme="black"] select {
  color-scheme: dark;
}

html[data-theme="light"] select {
  color-scheme: light;
}

select option,
select optgroup {
  background-color: var(--ui-select-menu-bg);
  color: var(--ui-select-text);
}

select option:checked,
select option:hover,
select option:focus {
  background: var(--ui-select-accent);
  color: var(--ui-select-text);
}