/* PIOS theme — Terracotta Editorial (see ../DESIGN.md).
 * Extracted from the application layout so every layout (admin, leader dashboard)
 * shares one cacheable, offline-capable stylesheet. Loaded AFTER tailwind.css:
 * the semantic remaps below override utility colors for dark mode support.
 */

:root {
  --color-primary: 180 88 65;
  --color-on-primary: 255 255 255;
  --color-background-light: 246 243 240;
  --color-surface: 252 250 248;
  --color-text-main: 60 50 48;
  --color-muted: 133 122 118;
  --color-accent: 117 156 138;
  --color-on-accent: 255 255 255;
  --color-field-bg: 241 237 233;
  --color-field-border: 209 189 181;
  --color-warning-surface: 251 247 237;
  --color-warning-bg: 244 233 209;
  --color-warning-border: 219 186 122;
  --color-warning-text: 128 94 36;
  --color-warning-strong: 92 67 25;
  --color-danger-surface: 250 243 242;
  --color-danger-bg: 243 223 220;
  --color-danger-border: 217 167 160;
  --color-danger-text: 150 72 62;
  --color-danger-strong: 116 52 44;
  --color-danger-action: 150 72 62;
  --color-success-bg: 224 242 233;
  --color-success-border: 167 216 190;
  --color-success-text: 47 122 85;
  --color-success-strong: 31 92 62;
  --color-info-bg: 235 231 250;
  --color-info-border: 197 186 240;
  --color-info-text: 106 88 188;
  --color-info-strong: 79 63 152;
  --shadow-color: 58 46 43;
  --motion-duration-fast: 140ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 320ms;
  --motion-delay: 0ms;
  --motion-distance-xs: 3px;
  --motion-distance-sm: 6px;
  --motion-distance-sm-negative: -6px;
  --motion-distance-md: 10px;
  --motion-scale-start: 0.985;
  --motion-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-ease-emphasis: cubic-bezier(0.18, 0.82, 0.24, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-primary: 214 147 124;
  --color-on-primary: 34 32 36;
  --color-background-light: 24 22 25;
  --color-surface: 34 32 36;
  --color-text-main: 236 230 227;
  --color-muted: 172 164 159;
  --color-accent: 136 181 160;
  --color-on-accent: 24 22 25;
  --color-field-bg: 43 40 45;
  --color-field-border: 95 84 79;
  --color-warning-surface: 65 54 30;
  --color-warning-bg: 78 64 32;
  --color-warning-border: 134 110 56;
  --color-warning-text: 232 205 145;
  --color-warning-strong: 244 227 185;
  --color-danger-surface: 62 37 39;
  --color-danger-bg: 85 48 48;
  --color-danger-border: 141 86 86;
  --color-danger-text: 240 185 179;
  --color-danger-strong: 249 214 209;
  --color-danger-action: 132 66 70;
  --color-success-bg: 38 61 49;
  --color-success-border: 74 118 92;
  --color-success-text: 158 216 183;
  --color-success-strong: 199 235 214;
  --color-info-bg: 54 48 79;
  --color-info-border: 105 94 156;
  --color-info-text: 190 178 240;
  --color-info-strong: 217 209 248;
  --shadow-color: 0 0 0;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at top left, rgb(var(--color-primary) / 0.10), transparent 26%),
    radial-gradient(circle at top right, rgb(var(--color-accent) / 0.09), transparent 22%),
    rgb(var(--color-background-light));
}

body, input, textarea, select, button {
  font-family: "Outfit", sans-serif;
  color: rgb(var(--color-text-main));
}

h1, h2, h3, h4, .font-display, .app-brand {
  font-family: "Newsreader", serif;
}

a, button, summary {
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard),
    opacity var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-base) var(--motion-ease-standard);
}

article {
  transition:
    transform var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

article:hover {
  transform: translateY(-2px);
}

input, select, textarea {
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-base) var(--motion-ease-standard);
  background-color: rgb(var(--color-field-bg)) !important;
  color: rgb(var(--color-text-main));
  border-color: rgb(var(--color-field-border)) !important;
}

input::placeholder, textarea::placeholder {
  color: rgb(var(--color-muted));
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.12);
  background-color: rgb(var(--color-surface)) !important;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.18);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-primary) / 0.14) !important;
  background-color: rgb(var(--color-muted) / 0.18) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 2px rgb(var(--shadow-color) / 0.08),
    0 0 0 1px rgb(var(--color-surface) / 0.06);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background-color: rgb(var(--color-surface));
  background-image: none !important;
  box-shadow:
    0 1px 2px rgb(var(--shadow-color) / 0.14),
    0 4px 10px rgb(var(--shadow-color) / 0.12);
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

input[type="checkbox"]:checked {
  background-color: rgb(var(--color-accent) / 0.82) !important;
  background-image: none !important;
  border-color: rgb(var(--color-accent) / 0.62) !important;
  box-shadow:
    inset 0 1px 2px rgb(var(--color-accent) / 0.16),
    0 0 0 1px rgb(var(--color-accent) / 0.08);
}

input[type="checkbox"]:checked::after {
  transform: translateX(1.25rem);
  box-shadow:
    0 1px 2px rgb(var(--shadow-color) / 0.12),
    0 6px 14px rgb(var(--shadow-color) / 0.16);
}

input[type="checkbox"]::before,
input[type="checkbox"]:checked::before {
  content: none !important;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

summary::-webkit-details-marker {
  display: none;
}

dialog[data-hey-menu-dialog]::backdrop {
  background: rgb(var(--shadow-color) / 0.35);
  backdrop-filter: blur(4px);
}

.person-card-trigger {
  cursor: pointer;
  transition: opacity 0.15s ease;
  outline: none;
}
.person-card-trigger:hover {
  opacity: 0.78;
}
.person-card-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.18);
  border-radius: 8px;
}

[data-theme-option] {
  border: 1px solid rgb(var(--color-primary) / 0.12);
  color: rgb(var(--color-muted));
}

[data-theme-option][data-selected="true"] {
  background: rgb(var(--color-primary) / 0.14);
  border-color: rgb(var(--color-primary) / 0.28);
  color: rgb(var(--color-primary));
}

html[data-theme="dark"] .bg-white {
  background-color: rgb(var(--color-surface)) !important;
}

html[data-theme="dark"] .bg-white\/70 {
  background-color: rgb(var(--color-surface) / 0.72) !important;
}

html[data-theme="dark"] .hover\:bg-white:hover {
  background-color: rgb(var(--color-surface)) !important;
}

/* Action colors remain readable when the dark palette uses lighter accents. */
.bg-primary.text-white {
  color: rgb(var(--color-on-primary)) !important;
}

.bg-accent.text-white {
  color: rgb(var(--color-on-accent)) !important;
}

/* A frame navigation keeps its current content visible while the next event tab loads. */
turbo-frame#event-workspace {
  display: block;
  min-height: 8rem;
  position: relative;
}

turbo-frame#event-workspace[busy] {
  cursor: progress;
}

turbo-frame#event-workspace[busy]::before {
  animation: event-workspace-progress 900ms var(--motion-ease-standard) infinite;
  background: linear-gradient(90deg, transparent, rgb(var(--color-primary)), transparent);
  border-radius: 999px;
  content: "";
  height: 3px;
  inset: 0 auto auto 0;
  position: absolute;
  width: 45%;
  z-index: 20;
}

turbo-frame#event-workspace[busy] > * {
  opacity: 0.58;
  pointer-events: none;
}

@keyframes event-workspace-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(325%); }
}

@media (prefers-reduced-motion: reduce) {
  turbo-frame#event-workspace[busy]::before {
    animation: none;
    width: 100%;
  }
}

.bg-yellow-50 {
  background-color: rgb(var(--color-warning-surface)) !important;
}

.bg-yellow-100 {
  background-color: rgb(var(--color-warning-bg)) !important;
}

.border-yellow-200,
.border-yellow-300,
.border-yellow-400 {
  border-color: rgb(var(--color-warning-border)) !important;
}

.text-yellow-600,
.text-yellow-700,
.text-yellow-800 {
  color: rgb(var(--color-warning-text)) !important;
}

.text-yellow-900 {
  color: rgb(var(--color-warning-strong)) !important;
}

.hover\:bg-yellow-50:hover {
  background-color: rgb(var(--color-warning-surface)) !important;
}

.bg-red-50 {
  background-color: rgb(var(--color-danger-surface)) !important;
}

.bg-red-100 {
  background-color: rgb(var(--color-danger-bg)) !important;
}

.bg-red-500,
.bg-red-600 {
  background-color: rgb(var(--color-danger-action)) !important;
}

.border-red-100,
.border-red-200,
.border-red-300,
.border-red-400 {
  border-color: rgb(var(--color-danger-border)) !important;
}

.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800 {
  color: rgb(var(--color-danger-text)) !important;
}

.text-red-900 {
  color: rgb(var(--color-danger-strong)) !important;
}

.hover\:bg-red-50:hover {
  background-color: rgb(var(--color-danger-surface)) !important;
}

/* Status accents use the same semantic colors in every workspace and theme. */
.bg-green-50,
.bg-emerald-50 {
  background-color: rgb(var(--color-success-bg) / 0.55) !important;
}

.bg-green-100,
.bg-emerald-100,
.bg-emerald-100\/60,
.bg-emerald-100\/40 {
  background-color: rgb(var(--color-success-bg) / 0.75) !important;
}

.hover\:bg-emerald-100:hover {
  background-color: rgb(var(--color-success-bg)) !important;
}

.bg-green-300,
.bg-emerald-300 {
  background-color: rgb(var(--color-success-border)) !important;
}

.border-green-200,
.border-green-300,
.border-green-400,
.border-emerald-200,
.border-emerald-300,
.border-emerald-400,
.border-emerald-300\/50 {
  border-color: rgb(var(--color-success-border) / 0.5) !important;
}

.text-green-500,
.text-green-600,
.text-green-700,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700 {
  color: rgb(var(--color-success-text)) !important;
}

.text-green-800,
.text-green-900,
.text-emerald-800,
.text-emerald-900,
.text-emerald-800\/80 {
  color: rgb(var(--color-success-strong)) !important;
}

.bg-violet-100\/60 {
  background-color: rgb(var(--color-info-bg) / 0.75) !important;
}

.hover\:bg-violet-100:hover {
  background-color: rgb(var(--color-info-bg)) !important;
}

.bg-violet-300 {
  background-color: rgb(var(--color-info-border)) !important;
}

.text-violet-700 {
  color: rgb(var(--color-info-text)) !important;
}

.bg-amber-50 {
  background-color: rgb(var(--color-warning-surface)) !important;
}

.bg-amber-100,
.bg-amber-100\/60 {
  background-color: rgb(var(--color-warning-bg) / 0.75) !important;
}

.hover\:bg-amber-100:hover {
  background-color: rgb(var(--color-warning-bg)) !important;
}

.bg-amber-300 {
  background-color: rgb(var(--color-warning-border)) !important;
}

.border-amber-200,
.border-amber-300,
.border-amber-400 {
  border-color: rgb(var(--color-warning-border)) !important;
}

.text-amber-600,
.text-amber-700 {
  color: rgb(var(--color-warning-text)) !important;
}

.text-amber-800,
.text-amber-900,
.text-amber-950 {
  color: rgb(var(--color-warning-strong)) !important;
}

.hover\:text-red-600:hover,
.hover\:text-red-700:hover,
.hover\:text-red-800:hover {
  color: rgb(var(--color-danger-text)) !important;
}