/* =============================================================
   Kiosk Radio — calendar styles
   Loaded after calendar-styles.css on /admin/calendar

   The package's styles.css omits .pill-input, label/legend, and
   .label-description so each site defines them to match its own
   design system. This file provides the full visual style for
   the Kiosk admin UI — no !important needed for base styles.
   ============================================================= */

/* ── 1. Site font ──────────────────────────────────────────── */

:root {
  --cal-font-family: "Nimbus", Arial, Helvetica, sans-serif;
}

/* ── 2. Labels / legends ───────────────────────────────────── */

.calendar-container label,
.calendar-container legend,
[data-radix-dialog-content] label,
[data-radix-dialog-content] legend {
  font-family: "Nimbus", Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
  display: inline-block;
}

.calendar-container .label-description,
.calendar-container .checkbox-label,
[data-radix-dialog-content] .label-description,
[data-radix-dialog-content] .checkbox-label {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ── 3. Inputs ─────────────────────────────────────────────── */

.calendar-container .pill-input,
[data-radix-dialog-content] .pill-input {
  width: 100%;
  background-color: none !important;
  border: 1px solid #000;
  box-shadow: none;
  border-radius: 0;
  color: #000;
  font-family: "Nimbus", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  padding: 8px 10px;
  box-sizing: border-box;
}

.calendar-container textarea.pill-input,
[data-radix-dialog-content] textarea.pill-input {
  border-radius: 0;
}

/* react-select */
.calendar-container [class$="-control"],
.calendar-container [class*="-control "],
[data-radix-dialog-content] [class$="-control"],
[data-radix-dialog-content] [class*="-control "] {
  border-radius: 0 !important;
  border-width: 1px !important;
  box-shadow: none !important;
  min-height: 34px !important;
  font-size: 14px !important;
}

.calendar-container [class$="-menu"],
.calendar-container [class*="-menu "],
[data-radix-dialog-content] [class$="-menu"],
[data-radix-dialog-content] [class*="-menu "] {
  border-radius: 0 !important;
  font-size: 14px !important;
}

[data-radix-dialog-content] .basic-multi-select {
  padding: 0 !important;
}

[data-radix-dialog-content] fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ── 4. Tailwind text-size utilities ───────────────────────── */

.calendar-container .text-small,
[data-radix-dialog-content] .text-small {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.calendar-container .text-tiny,
[data-radix-dialog-content] .text-tiny {
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.calendar-container .text-xxs,
[data-radix-dialog-content] .text-xxs {
  font-size: 12px !important;
}
.calendar-container .text-sm,
[data-radix-dialog-content] .text-sm {
  font-size: 13px !important;
}
.calendar-container .text-base,
[data-radix-dialog-content] .text-base {
  font-size: 14px !important;
}

.calendar-container h5,
[data-radix-dialog-content] h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.125rem;
}

/* ── 5. FullCalendar ───────────────────────────────────────── */

.fc table {
  font-size: 14px;
  font-weight: 400;
}

.fc .fc-toolbar-title {
  font-size: 18px;
  font-weight: 400;
}

.fc .fc-button-primary {
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  padding: 4px 10px !important;
  height: 26px !important;
  box-sizing: border-box !important;
}

.fc-event {
  overflow: hidden;
}

/* ── 6. Buttons ────────────────────────────────────────────── */
/*
  Ghost style: invisible border at rest, black border on hover, square corners.
  FullCalendar nav buttons (.fc-button) and weekday toggles (.rounded-full)
  are excluded. Pill buttons with explicit borders (.border) are also
  excluded so they keep their own visible border and rounded shape.
*/

/* Calendar toolbar/widget ghost buttons */
.calendar-container button:not(.fc-button):not(.rounded-full):not(.border) {
  border: 1px solid transparent;
  transition: border-color 0.15s;
  background: none;
  cursor: pointer;
  border-radius: 0;
}
.calendar-container
  button:not(.fc-button):not(.rounded-full):not(.border):hover {
  border-color: #000;
}

/* Dialog ghost buttons (no background:none so Tailwind hover:bg-* still works) */
[data-radix-dialog-content] button:not(.rounded-full):not(.border) {
  border: 1px solid transparent;
  background: none;
  transition: border-color 0.15s;
  cursor: pointer;
  border-radius: 0;
}
[data-radix-dialog-content] button:not(.rounded-full):not(.border):hover {
  border-color: #000;
}

/* External link anchor in dialog header — same ghost treatment as icon buttons */
[data-radix-dialog-content] a.rounded-lg {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  background: none;
  transition: border-color 0.15s;
  border-radius: 0;
}
[data-radix-dialog-content] a.rounded-lg:hover {
  border-color: #000;
}

/* SVG icons at 24px — calendar buttons, dialog non-pill buttons, dialog icon anchors */
.calendar-container button svg,
[data-radix-dialog-content] button:not(.border) svg,
[data-radix-dialog-content] a.rounded-lg svg {
  width: 20px;
  height: 20px;
}

/* Email / participant pill buttons: keep pill shape + small mail icon */
[data-radix-dialog-content] button.border.text-tiny {
  border-radius: 9999px;
}
[data-radix-dialog-content] button.border svg {
  width: 12px;
  height: 12px;
}

/* Save button: match dialog heading size, no underline */
[data-radix-dialog-content] button[type="submit"] {
  font-size: 1.125rem;
}
[data-radix-dialog-content] button[type="submit"] .underline {
  text-decoration: none;
}

/* Toolbar icon buttons: compact sizing, matched height to fc-buttons */
.cal-toolbar-actions button,
.calendar-container div.absolute button {
  padding: 4px 6px;
  line-height: 1;
  font-size: 14px;
  height: 26px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .cal-toolbar-actions button,
  .calendar-container div.absolute button {
    display: flex;
    align-items: center;
  }
}

.cal-toolbar-actions {
  top: 0px;
}

.cal-toolbar-date-picker {
  top: 0px;
}

/* ── 7. Dialog form spacing ────────────────────────────────── */
/*
  Scoped to [data-radix-dialog-content] — set explicitly on each
  Dialog.Content in the package JS (data-radix-dialog-content="").

  Tailwind mb-* / mt-* / p-* utilities inside the dialog are
  generated from the Refuge scale (mb-10 = 2.5rem = 40px).
  Override them here so the form is compact.
*/

/* Dialog header uses px-8 py-4 — reduce for compact kiosk UI */
[data-radix-dialog-content] .px-8 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
[data-radix-dialog-content] .py-4 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
[data-radix-dialog-content] .p-8 {
  padding: 1rem !important;
}
[data-radix-dialog-content] .mb-10 {
  margin-bottom: 12px !important;
}
[data-radix-dialog-content] .mb-8 {
  margin-bottom: 8px !important;
}
[data-radix-dialog-content] .mb-6 {
  margin-bottom: 6px !important;
}
[data-radix-dialog-content] .mb-4 {
  margin-bottom: 4px !important;
}
[data-radix-dialog-content] .mb-2 {
  margin-bottom: 4px !important;
}
[data-radix-dialog-content] .mt-6 {
  margin-top: 4px !important;
}
[data-radix-dialog-content] .mt-4 {
  margin-top: 4px !important;
}
[data-radix-dialog-content] .mt-2 {
  margin-top: 2px !important;
}
[data-radix-dialog-content] .mt-1 {
  margin-top: 2px !important;
}
[data-radix-dialog-content] .space-y-4 > * + * {
  margin-top: 4px !important;
}
[data-radix-dialog-content] .space-y-2 > * + * {
  margin-top: 2px !important;
}
[data-radix-dialog-content] .space-y-1 > * + * {
  margin-top: 2px !important;
}
[data-radix-dialog-content] .-mt-6,
[data-radix-dialog-content] .-mt-4 {
  margin-top: 0px !important;
}

/* ── 8. Dialog font ────────────────────────────────────────── */

[data-radix-dialog-content],
[data-radix-dialog-content] * {
  font-family: "Nimbus", Arial, Helvetica, sans-serif !important;
}