/*
 * Shared Console CSS — Radzen dark-mode theming and form-control overrides.
 * Served as an RCL static asset at _content/Shops.Console.Common/css/console-common.css.
 * Consume from each console's App.razor BEFORE the per-vertical brand css/app.css so
 * that brand overrides win. Same rules previously lived inline in Shops.Barber.Console
 * /app/wwwroot/css/app.css (now removed there — moved here to share with thin-shell
 * consoles, which were missing dark-mode treatment for Radzen inputs).
 */

/* Radzen CSS-variable overrides in dark mode — Radzen's input styles all use
   var(--rz-input-*) which we override at the .dark scope. Affects every Radzen
   input (textbox, textarea, numeric, dropdown, autocomplete, datepicker) without
   needing per-selector !important rules. */
.dark {
  --rz-input-background-color: rgb(30 41 59);          /* slate-800 */
  --rz-input-color: rgb(241 245 249);                  /* slate-100 */
  --rz-input-value-color: rgb(241 245 249);            /* slate-100 */
  --rz-input-border: 1px solid rgb(51 65 85);          /* slate-700 */
  --rz-input-border-block-end: 1px solid rgb(51 65 85);
  --rz-input-placeholder-color: rgb(148 163 184);      /* slate-400 */
  --rz-input-hover-background-color: rgb(30 41 59);
  --rz-input-hover-border: 1px solid rgb(71 85 105);   /* slate-600 */
  --rz-input-hover-border-block-end: 1px solid rgb(71 85 105);
  --rz-input-focus-background-color: rgb(30 41 59);
  --rz-input-focus-border: 1px solid rgb(14 165 233);  /* primary-500 */
  --rz-input-focus-border-block-end: 1px solid rgb(14 165 233);
  --rz-input-disabled-background-color: rgb(15 23 42); /* slate-900 */
  --rz-input-disabled-color: rgb(100 116 139);         /* slate-500 */
  --rz-input-disabled-border: 1px solid rgb(51 65 85);
  --rz-input-disabled-placeholder-color: rgb(71 85 105);
}

/* Form inputs in dark mode - override Radzen theme */
.dark .rz-textbox,
.dark .rz-textarea,
.dark .rz-dropdown,
.dark .rz-autocomplete,
.dark .rz-spinner {
  background-color: rgb(30 41 59) !important; /* slate-800 */
  border-color: rgb(51 65 85) !important; /* slate-700 */
  color: white !important;
}

.dark .rz-textbox input,
.dark .rz-textbox .rz-inputtext,
.dark .rz-textarea textarea,
.dark input.rz-inputtext,
.dark .rz-autocomplete input,
.dark .rz-autocomplete .rz-inputtext,
.dark .rz-spinner input,
.dark .rz-spinner .rz-inputtext {
  background-color: transparent !important;
  background: transparent !important;
  color: white !important;
}

.dark .rz-spinner .rz-spinner-btn {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  border-color: rgb(51 65 85) !important;
  color: rgb(203 213 225) !important; /* slate-300 */
}

.dark .rz-spinner .rz-spinner-btn:hover {
  background-color: rgb(71 85 105) !important; /* slate-600 */
}

/* Autocomplete dropdown in dark mode */
.dark .rz-autocomplete-panel {
  background-color: rgb(30 41 59) !important; /* slate-800 */
  border-color: rgb(51 65 85) !important; /* slate-700 */
}

.dark .rz-autocomplete-list-item {
  color: rgb(226 232 240) !important; /* slate-200 */
}

.dark .rz-autocomplete-list-item:hover,
.dark .rz-autocomplete-list-item.rz-state-highlight {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  color: white !important;
}

.dark .rz-textbox input::placeholder,
.dark .rz-textbox .rz-inputtext::placeholder,
.dark .rz-textarea textarea::placeholder,
.dark input.rz-inputtext::placeholder,
.dark .rz-autocomplete input::placeholder,
.dark .rz-autocomplete .rz-inputtext::placeholder {
  color: rgb(148 163 184) !important; /* slate-400 */
  opacity: 1 !important;
}

.dark .rz-textbox:focus,
.dark .rz-textbox:focus-within,
.dark .rz-textarea:focus,
.dark .rz-textarea:focus-within,
.dark .rz-dropdown:focus,
.dark .rz-dropdown:focus-within,
.dark .rz-autocomplete:focus,
.dark .rz-autocomplete:focus-within {
  border-color: rgb(14 165 233) !important; /* primary-500 */
  box-shadow: 0 0 0 1px rgb(14 165 233) !important;
}

/* Dropdown panel in dark mode */
.dark .rz-dropdown-panel,
.dark .rz-popup {
  background-color: rgb(30 41 59) !important; /* slate-800 */
  border-color: rgb(51 65 85) !important; /* slate-700 */
}

.dark .rz-dropdown-item,
.dark .rz-dropdown-panel .rz-dropdown-item {
  color: rgb(226 232 240) !important; /* slate-200 */
}

.dark .rz-dropdown-item:hover,
.dark .rz-dropdown-item.rz-state-highlight,
.dark .rz-dropdown-panel .rz-dropdown-item:hover {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  color: white !important;
}

.dark .rz-dropdown-filter {
  background-color: rgb(51 65 85) !important; /* slate-700 */
  border-color: rgb(71 85 105) !important; /* slate-600 */
  color: white !important;
}

.dark .rz-dropdown-filter::placeholder {
  color: rgb(148 163 184) !important; /* slate-400 */
}

/* Dropdown trigger/label text in dark mode */
.dark .rz-dropdown .rz-dropdown-label,
.dark .rz-dropdown .rz-inputtext {
  color: white !important;
}

.dark .rz-dropdown .rz-dropdown-trigger {
  color: rgb(148 163 184) !important; /* slate-400 */
}