/* Grayscale UI overrides */
:root {
  --ui-accent: #6b7280;
  --ui-accent-hover: #4b5563;
  --pico-font-size: 0.9375rem;
  --app-spacing: 1.5rem;
}

@media (max-width: 1024px) {
  :root {
    --app-spacing: 1rem;
  }
}

@media (max-width: 576px) {
  :root {
    --app-spacing: 5%;
  }
}

/* Base font + more breathing room */
body {
  font-size: 1rem;
  --pico-spacing: var(--app-spacing);
  --pico-block-spacing-vertical: var(--app-spacing);
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

/* Override Pico primary color for UI elements + pill shape */
button:not(.fc-button):not([class*="fc-"]),
[type="submit"],
[type="button"],
[role="button"] {
  --pico-primary: var(--ui-accent);
  --pico-primary-hover: var(--ui-accent-hover);
  --pico-primary-focus: rgba(107, 114, 128, 0.2);
  border-radius: 9999px;
}

/* Calendar navigation buttons - icon only */
.fc .fc-button {
  background: transparent !important;
  border: none !important;
  color: var(--pico-color) !important;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem !important;
}

.fc .fc-button:hover {
  color: var(--pico-primary) !important;
  background: transparent !important;
}

.fc .fc-button:focus {
  box-shadow: none !important;
}

.fc .fc-button-active {
  color: var(--pico-primary) !important;
  background: transparent !important;
}

/* Calendar list view - dark theme */
.fc .fc-list {
  background: transparent;
  border-color: var(--pico-background-color);
}

.fc .fc-list-table td,
.fc .fc-list-table th {
  border-color: var(--pico-background-color) !important;
}

.fc .fc-list-event:hover td {
  background: rgba(255, 255, 255, 0.05);
}

.fc .fc-list-event td {
  background: rgba(255, 255, 255, 0.03) !important;
}

.fc .fc-list-day th,
.fc .fc-list-day-cushion {
  background: var(--pico-background-color) !important;
  border-bottom: 1px solid var(--pico-muted-border-color) !important;
}

.fc .fc-list-event-time,
.fc .fc-list-event-title {
  color: var(--pico-color);
}

.fc .fc-list-day a {
  color: var(--pico-primary) !important;
}

/* Grayscale nav links */
nav a:not(:hover) {
  color: var(--pico-muted-color);
}

nav a.active {
  color: var(--pico-color);
}

/* Language Switcher - Toggle Style */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--pico-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 9999px;
  padding: 2px;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  width: auto;
  min-width: 0;
  height: auto;
  line-height: 1.2;
  border-radius: 9999px;
  transition: all 0.15s ease;
}

.lang-btn.active {
  background: var(--ui-accent);
  color: white;
}

.lang-btn:hover:not(.active) {
  color: var(--pico-color);
  background: transparent;
}

/* Auth Card */
.auth-card {
  max-width: 480px;
  margin: 2rem auto;
  padding: var(--app-spacing);
  padding-top: calc(var(--app-spacing) + 2rem);
  position: relative;
}

.auth-card .lang-switcher {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
}

.auth-card header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-card h1 {
  margin-bottom: 0.5rem;
}

.auth-switch {
  text-align: center;
  margin-top: 1rem;
}

.error-message {
  background: var(--pico-del-color);
  color: white;
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin-top: 1rem;
}

/* Navigation */
nav {
  background: var(--pico-card-background-color);
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-link.active {
  font-weight: bold;
  text-decoration: underline;
}

#user-name {
  color: var(--pico-muted-color);
}

/* View Headers */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.view-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.view-header-actions select {
  margin: 0;
  padding: 0.5rem 0.75rem;
  width: auto;
}

/* Planner Layout */
.planner-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
  min-height: calc(100vh - 150px);
}

@media (max-width: 1024px) {
  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-sidebar {
    order: -1;
  }
}

.calendar-container {
  background: var(--pico-card-background-color);
  padding: var(--app-spacing);
  border-radius: var(--pico-border-radius);
}

/* Calendar header */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-header h3 {
  margin: 0;
  font-weight: 600;
}

.calendar-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.calendar-nav {
  display: flex;
  gap: 0.25rem;
}

.nav-arrow {
  background: transparent !important;
  border: 1px solid var(--pico-muted-border-color) !important;
  color: var(--pico-color) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow:hover {
  border-color: var(--ui-accent) !important;
  color: var(--ui-accent) !important;
}

.view-toggle {
  display: flex;
  background: var(--pico-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 9999px;
  padding: 2px;
}

.view-toggle-btn {
  background: transparent !important;
  border: none !important;
  color: var(--pico-muted-color) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: all 0.15s ease;
}

.view-toggle-btn.active {
  background: var(--ui-accent) !important;
  color: white !important;
}

.view-toggle-btn:hover:not(.active) {
  color: var(--pico-color) !important;
}

/* Camps list view */
.camps-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.camp-list-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--app-spacing);
  background: var(--pico-background-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
  transition: background 0.15s ease;
  border-left: 4px solid transparent;
}

.camp-list-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.camp-list-card.selected {
  box-shadow: 0 0 0 2px var(--pico-primary);
}

.camp-list-card.fc-event-kids-team {
  border-left-color: rgba(41, 82, 122, 1);
}

.camp-list-card.fc-event-neues-leben {
  border-left-color: rgba(46, 99, 64, 1);
}

.camp-list-card.fc-event-schloss-klaus {
  border-left-color: rgba(88, 62, 111, 1);
}

.camp-list-content {
  flex: 1;
  min-width: 0;
}

.camp-list-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.camp-list-dates {
  color: var(--pico-muted-color);
}

.camp-list-source {
  color: var(--pico-muted-color);
  text-align: right;
  flex-shrink: 0;
}

/* Sidebar */
.planner-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-section {
  background: var(--pico-card-background-color);
  padding: var(--app-spacing);
  border-radius: var(--pico-border-radius);
}

.sidebar-section h3 {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.sidebar-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.sidebar-section .section-header h3 {
  margin: 0;
}

.mini-select {
  margin: 0;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  width: auto;
  height: auto;
  line-height: 1.2;
}

.sidebar-actions {
  display: flex;
  gap: 0.5rem;
}

.sidebar-actions button {
  flex: 1;
}

/* People List (checkboxes in planner) */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.person-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--pico-background-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
  width: 100%;
}

.person-checkbox:hover {
  background: var(--pico-primary-focus);
}

.person-checkbox input {
  margin: 0;
}

.person-checkbox .age {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--pico-muted-color);
}

/* Cost Summary */
.cost-summary {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
}

#cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  max-height: 350px;
  overflow-y: auto;
}

.camp-cost-item {
  background: var(--pico-background-color);
  border-radius: var(--pico-border-radius);
  padding: 0.75rem;
  font-size: 0.875rem;
}

.camp-cost-item.early-bird {
  border-left: 3px solid #27ae60;
}

.camp-cost-item.sibling-discount .camp-cost-price {
  color: var(--pico-ins-color);
}

.camp-cost-item.no-price {
  opacity: 0.7;
}

.camp-cost-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.camp-cost-info {
  flex: 1;
  min-width: 0;
}

.camp-cost-name {
  font-weight: 600;
  line-height: 1.2;
}

.camp-cost-people {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  margin-top: 0.125rem;
}

.camp-cost-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.camp-cost-price {
  font-weight: 600;
  white-space: nowrap;
}

.remove-btn {
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  margin: 0;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.remove-btn:hover {
  opacity: 1;
  color: var(--pico-del-color);
}

.camp-cost-detail {
  color: var(--pico-muted-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Early Bird Indicators */
.early-bird-active {
  color: #27ae60;
  font-weight: bold;
  font-size: 0.8em;
}

.early-bird-expired {
  color: var(--pico-muted-color);
  font-size: 0.8em;
}

.total-cost {
  font-size: 1.25rem;
  text-align: right;
  padding-top: 0.5rem;
  border-top: 2px solid var(--pico-muted-border-color);
}

/* People Cards */
.people-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
}

.person-card {
  background: var(--pico-card-background-color);
  padding: var(--app-spacing);
  border-radius: var(--pico-border-radius);
}

.person-card h4 {
  margin-bottom: 0.5rem;
}

.person-card .birthdate,
.person-card .age {
  color: var(--pico-muted-color);
  font-size: 0.875rem;
}

.person-card .actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.person-card .actions button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Selections Cards */
.selections-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.selection-card {
  background: var(--pico-card-background-color);
  padding: var(--app-spacing);
  border-radius: var(--pico-border-radius);
}

.selection-card h4 {
  margin-bottom: 0.5rem;
}

.selection-card .meta {
  color: var(--pico-muted-color);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.selection-card .camps-preview {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.selection-card .total {
  font-weight: bold;
  font-size: 1.125rem;
}

.selection-card .actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

/* Calendar Customization */
.fc-event {
  cursor: pointer;
  font-size: 0.8rem;
}

.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
  padding: 4px;
}

.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
  color: white !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* Calendar header row - dark background */
.fc .fc-col-header,
.fc .fc-col-header-cell {
  background: transparent !important;
}

.fc th {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Minimum height for day cells */
.fc .fc-daygrid-day-frame {
  min-height: 100px;
}

.fc-event-kids-team {
  background-color: rgba(41, 82, 122, 0.85) !important;
  border-color: rgba(31, 62, 92, 0.9) !important;
}

.fc-event-neues-leben {
  background-color: rgba(46, 99, 64, 0.85) !important;
  border-color: rgba(36, 79, 54, 0.9) !important;
}

.fc-event-schloss-klaus {
  background-color: rgba(88, 62, 111, 0.85) !important;
  border-color: rgba(68, 42, 91, 0.9) !important;
}

.fc-event-selected {
  box-shadow: 0 0 0 3px var(--pico-primary);
}

/* Camp Modal */
#modal-camp-details {
  font-size: 0.9rem;
}

#modal-camp-details p {
  margin-bottom: 0.5rem;
}

#modal-camp-details .label {
  font-weight: 600;
  color: var(--pico-muted-color);
}

#modal-camp-selection {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.camp-person-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--pico-background-color);
  border-radius: var(--pico-border-radius);
}

.camp-person-select.ineligible {
  opacity: 0.5;
}

.camp-person-select .ineligible-reason {
  font-size: 0.75rem;
  color: var(--pico-del-color);
}

/* Empty State */
.empty-state {
  text-align: center;
  color: var(--pico-muted-color);
  padding: 2rem;
}

/* Section Header with expand button */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h3 {
  margin: 0;
}

.expand-btn {
  background: transparent !important;
  border: none !important;
  color: var(--pico-muted-color) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: -0.5rem !important;
  font-size: 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.expand-btn:hover {
  color: var(--pico-color) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px;
}

/* Dialog tweaks */
dialog article {
  max-width: 500px;
  padding: var(--app-spacing);
}

dialog article header {
  padding-bottom: var(--app-spacing);
}

dialog article footer {
  padding-top: var(--app-spacing);
}

/* Expanded Modal */
.expanded-modal article {
  max-width: 90vw;
  width: 90vw;
  max-height: 90vh;
  height: auto;
  padding: var(--app-spacing);
}

.expanded-modal #expanded-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.expanded-camps-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.expanded-camp-card {
  background: var(--pico-background-color);
  border-radius: var(--pico-border-radius);
  padding: var(--app-spacing);
  border: 1px solid var(--pico-muted-border-color);
}

.expanded-camp-card.early-bird {
  border-left: 3px solid #27ae60;
}

.expanded-camp-card.no-price {
  opacity: 0.8;
}

.expanded-camp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.expanded-camp-header h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  flex: 1;
  padding-right: 0.5rem;
}

.expanded-camp-details {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.expanded-camp-details p {
  margin: 0.25rem 0;
}

.expanded-camp-details .camp-description {
  color: var(--pico-muted-color);
  font-style: italic;
  margin-top: 0.5rem;
}

.expanded-camp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.9rem;
}

.camp-attendees {
  flex: 1;
}

.camp-price {
  text-align: right;
}

.camp-price .price-amount {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
}

.camp-price .price-detail {
  display: block;
  font-size: 0.75rem;
  color: var(--pico-muted-color);
}

.expanded-total {
  text-align: right;
  font-size: 1.25rem;
}

dialog article header {
  margin-bottom: 1rem;
}

/* Source Legend */
.source-legend {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.kids-team {
  background: rgba(41, 82, 122, 0.85);
}

.legend-color.neues-leben {
  background: rgba(46, 99, 64, 0.85);
}

.legend-color.schloss-klaus {
  background: rgba(88, 62, 111, 0.85);
}