/* =========================================================
   BarPokerManager style.css (simple override layer)
   Goal: predictable UI in CentOS/WHM without Node/Vite
   ========================================================= */

:root {
  --bpm-primary: 249 115 22;
  --bpm-primary-hover: 234 88 12;

  --bpm-bg: 15 23 42;
  --bpm-surface: 17 24 39;
  --bpm-border: 51 65 85;
  --bpm-muted: 148 163 184;
  --bpm-text: 226 232 240;
  --bpm-text-strong: 255 255 255;

  --bpm-radius: 12px;
  --bpm-radius-sm: 10px;
  --bpm-shadow-sm: 0 6px 14px rgba(0,0,0,.14);
}

/* ---------------------------------------------------------
   Onboarding scope theme (setup + subscribe)
   --------------------------------------------------------- */

.ui-scope-onboarding .bg-gray-100 { background: rgb(var(--bpm-bg)) !important; }
.ui-scope-onboarding .bg-white { background: rgba(255,255,255,.06) !important; }
.ui-scope-onboarding .border-gray-200 { border-color: rgba(255,255,255,.12) !important; }

.ui-scope-onboarding .text-gray-900 { color: rgb(var(--bpm-text-strong)) !important; }
.ui-scope-onboarding .text-gray-700,
.ui-scope-onboarding .text-gray-600,
.ui-scope-onboarding .text-gray-500 { color: rgb(var(--bpm-muted)) !important; }

/* Inputs/Textareas look good in dark onboarding */
.ui-scope-onboarding input,
.ui-scope-onboarding textarea {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgb(var(--bpm-text-strong)) !important;
}

/* ---------------------------------------------------------
   HARD FIX: Select + option readability (REAL WORLD)
   - avoids relying on dark: classes or option styling support
   --------------------------------------------------------- */

/* Force the control itself to render in a readable scheme */
.ui-scope-onboarding select,
.ui-scope-app select,
.ui-scope-guest select {
  /* This is key: tells browser to paint native controls in light mode */
  color-scheme: light !important;

  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;

  /* Prevent weird native theming in some browsers */
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

/* Best effort — some browsers ignore option styles no matter what */
.ui-scope-onboarding select option,
.ui-scope-app select option,
.ui-scope-guest select option {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* If YOU actually want dark selects later, we can flip this,
   but right now the goal is "never invisible". */

/* ---------------------------------------------------------
   Buttons (universal)
   --------------------------------------------------------- */

.ui-scope-onboarding button,
.ui-scope-onboarding input[type="submit"],
.ui-scope-onboarding input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  border-radius: var(--bpm-radius-sm);
  padding: .625rem 1rem;
  font-weight: 600;

  background: rgb(var(--bpm-primary));
  color: rgb(var(--bpm-text-strong));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--bpm-shadow-sm);

  cursor: pointer;
}

.ui-scope-onboarding button:hover,
.ui-scope-onboarding input[type="submit"]:hover,
.ui-scope-onboarding input[type="button"]:hover {
  background: rgb(var(--bpm-primary-hover));
}