/**
 * Xenia — modern native <select> controls.
 *
 * Hand-authored (not part of the Tailwind build). Restyles single-line
 * <select> dropdowns to match the app (slate borders/surfaces, blue focus,
 * custom chevron). Colours mirror the palette used elsewhere.
 *
 * NOTE: the OPEN option list of a native <select> is rendered by the OS and
 * cannot be fully styled with CSS — this targets the control + focus state.
 * Multi-selects and list boxes ([multiple]/[size]) are intentionally excluded.
 */

select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom slate chevron, replacing the native arrow. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 16px 16px;

  background-color: #ffffff;
  color: rgb(15 23 42);                       /* slate-900 */
  border: 1px solid rgb(226 232 240);         /* slate-200 */
  border-radius: 8px;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;     /* room for the chevron */
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 100%;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

select:not([multiple]):not([size]):hover {
  border-color: rgb(203 213 225);             /* slate-300 */
}

select:not([multiple]):not([size]):focus,
select:not([multiple]):not([size]):focus-visible {
  outline: none;
  border-color: rgb(37 99 235);               /* blue-600 */
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.18);
}

select:not([multiple]):not([size]):disabled {
  background-color: rgb(248 250 252);         /* slate-50 */
  color: rgb(148 163 184);                    /* slate-400 */
  cursor: not-allowed;
  opacity: 1;
}

/* Best-effort styling of options (honoured by some browsers/OSes only). */
select:not([multiple]):not([size]) option {
  color: rgb(15 23 42);
  background-color: #ffffff;
}

/* ==========================================================================
   Drupal form controls (settings/config pages, walk-in, etc.)
   Scoped to .form-item so the React SPA pages are never affected.
   Caps the full-width-stretched inputs and gives every control the same
   rounded, slate-bordered, blue-focus treatment as the <select> above.
   ========================================================================== */

.form-item input[type="text"],
.form-item input[type="password"],
.form-item input[type="email"],
.form-item input[type="tel"],
.form-item input[type="url"],
.form-item input[type="number"],
.form-item input[type="search"],
.form-item input[type="date"],
.form-item input[type="time"],
.form-item input[type="datetime-local"],
.form-item textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 32rem;
  border: 1px solid rgb(226 232 240);          /* slate-200 */
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  background-color: #ffffff;
  color: rgb(15 23 42);                          /* slate-900 */
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-item textarea {
  max-width: 48rem;
}

.form-item input[type="text"]:focus,
.form-item input[type="password"]:focus,
.form-item input[type="email"]:focus,
.form-item input[type="tel"]:focus,
.form-item input[type="url"]:focus,
.form-item input[type="number"]:focus,
.form-item input[type="search"]:focus,
.form-item input[type="date"]:focus,
.form-item input[type="time"]:focus,
.form-item input[type="datetime-local"]:focus,
.form-item textarea:focus {
  outline: none;
  border-color: rgb(37 99 235);                  /* blue-600 */
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.18);
}

/* Checkboxes & radios — brand accent. */
.form-item input[type="checkbox"],
.form-item input[type="radio"] {
  accent-color: rgb(37 99 235);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Colour pickers (e.g. Messenger template colours) — tidy rounded swatch. */
.form-item input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 48px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  vertical-align: middle;
}
.form-item input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.form-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }

/* Inline entity form (e.g. reservation Occupants): its wrapper div is a plain
   grid cell in the top-level auto-grid, so the IEF card would otherwise be
   squeezed into one narrow column. Stretch it across the full grid row. */
.xenia-content form:not(:has(> fieldset)) > .field--widget-inline-entity-form-complex {
  grid-column: 1 / -1;
}

/* Collapsible <details> sections (settings forms) — card-style accordion. */
#main-content details {
  border: 1px solid rgb(226 232 240);
  border-radius: 10px;
  background: #ffffff;
  margin: 0 0 1rem;
  overflow: hidden;
}
#main-content details > summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: rgb(15 23 42);
  background: rgb(248 250 252);                   /* slate-50 */
  cursor: pointer;
  list-style: none;
}
#main-content details[open] > summary {
  border-bottom: 1px solid rgb(226 232 240);
}
#main-content details > .details-wrapper,
#main-content details > .fieldset-wrapper {
  padding: 1rem;
}

/* Width cap must beat the theme's Tailwind `w-full` utility on inputs.
   Use #main-content (id) specificity + !important so short token fields
   (API keys, IDs) stop stretching edge-to-edge on settings pages. */
#main-content .form-item input[type="text"],
#main-content .form-item input[type="password"],
#main-content .form-item input[type="email"],
#main-content .form-item input[type="tel"],
#main-content .form-item input[type="url"],
#main-content .form-item input[type="number"],
#main-content .form-item input[type="search"],
#main-content .form-item select:not([multiple]):not([size]) {
  max-width: 32rem !important;
}
#main-content .form-item textarea {
  max-width: 48rem !important;
}

/* Grid the inline-entity-form guest sub-form fields into columns (matching the
   panel grid), instead of one tall stacked column. The IEF entity form nests
   its fields inside .ief-form .fieldset__wrapper > .form-wrapper. Wide controls
   (rich text, textareas, the allergy widget) and the submit row span full. */
.xenia-content form[class*="pms-"] .ief-form .fieldset__wrapper > .form-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}
.xenia-content form[class*="pms-"] .ief-form .fieldset__wrapper > .form-wrapper > :is(
  .field--type-text-long,
  .field--type-text-with-summary,
  .field--type-pms-allergy,
  .form-actions
),
.xenia-content form[class*="pms-"] .ief-form .fieldset__wrapper > .form-wrapper > div:not([class*="field--"]) {
  grid-column: 1 / -1;
}