/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Searchable Select styles */
.searchable-select { position: relative; }
.searchable-select-display { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 0.375rem; background: white; cursor: text; }
.searchable-select-input { flex: 1; min-width: 60px; border: none; outline: none; padding: 4px 0; background: transparent; }
.searchable-select-tag { display: inline-flex; align-items: center; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 4px; font-size: 0.875rem; }
.searchable-select-tag-remove { margin-left: 4px; cursor: pointer; font-weight: bold; }
.searchable-select-tag-remove:hover { color: #dc2626; }
.searchable-select-dropdown { position: absolute; z-index: 50; width: 100%; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #d1d5db; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); margin-top: 4px; }
.searchable-select-option { padding: 8px 12px; cursor: pointer; }
.searchable-select-option:hover { background: #eff6ff; }
.searchable-select-option.selected { background: #dbeafe; }

/* Dark mode for the hand-written components above, which use literal colours
 * rather than Tailwind utilities. Kept in step with app/assets/tailwind/application.css.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .searchable-select-display { background: #1a1f2b; border-color: #3b4354; color: #e8eaf0; }
  :root:not([data-theme="light"]) .searchable-select-input { color: #e8eaf0; }
  :root:not([data-theme="light"]) .searchable-select-dropdown { background: #1a1f2b; border-color: #3b4354; color: #e8eaf0; }
  :root:not([data-theme="light"]) .searchable-select-option:hover { background: #26304a; }
  :root:not([data-theme="light"]) .searchable-select-option.selected { background: #2b3a5c; }
  :root:not([data-theme="light"]) .searchable-select-tag { background: #2b3a5c; color: #cfe0ff; }
}

:root[data-theme="dark"] .searchable-select-display { background: #1a1f2b; border-color: #3b4354; color: #e8eaf0; }
:root[data-theme="dark"] .searchable-select-input { color: #e8eaf0; }
:root[data-theme="dark"] .searchable-select-dropdown { background: #1a1f2b; border-color: #3b4354; color: #e8eaf0; }
:root[data-theme="dark"] .searchable-select-option:hover { background: #26304a; }
:root[data-theme="dark"] .searchable-select-option.selected { background: #2b3a5c; }
:root[data-theme="dark"] .searchable-select-tag { background: #2b3a5c; color: #cfe0ff; }

/* Form controls and the drag-and-drop highlights in the lobby editor.
 * Submit and button inputs are excluded: they carry their own Tailwind fill
 * (bg-blue-600 and friends), which this rule would paint over. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input:not([type="submit"]):not([type="button"]),
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background-color: #1a1f2b;
    color: #e8eaf0;
    border-color: #3b4354;
  }
}

:root[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: #1a1f2b;
  color: #e8eaf0;
  border-color: #3b4354;
}

/* Let the browser paint native widgets (scrollbars, date pickers) to match */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }