/* ================================================================
   SAFA Calendar — Stylesheet additions (v5.0)
   ================================================================
   Styles for the features added in this round:
   permission tick boxes, event statuses, holidays, organizations,
   the company report, the services/cleaning view, the log search
   and the multi-option choice dialog.

   Everything here reuses the custom properties defined in the main
   stylesheet, so the visual language stays consistent.
   ================================================================ */

/* ----------------------------------------------------------------
   Shared small pieces
   ---------------------------------------------------------------- */
.btn-xs {
  padding: 4px 9px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}
.btn-xs svg { width: 12px; height: 12px; }

.btn-success {
  background: var(--success);
  color: var(--text-inverse);
  border-color: transparent;
}
.btn-success:hover {
  background: #059669;
  transform: translateY(-1px);
}

.badge-muted {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.badge-today {
  background: var(--accent);
  color: var(--text-inverse);
}

.empty-hint {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Inline notices inside modals */
.inline-notice {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  border-left: 3px solid transparent;
}
.inline-notice-info {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--text-secondary);
}
.inline-notice-ok {
  background: var(--success-soft);
  border-left-color: var(--success);
  color: var(--text-secondary);
}
.inline-notice-warn {
  background: var(--warning-soft);
  border-left-color: var(--warning);
  color: var(--text-secondary);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px 0;
}
.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.field-locked { opacity: 0.65; }

.calendar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--space-8);
}
.calendar-empty-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ----------------------------------------------------------------
   Multi-option choice dialog
   ---------------------------------------------------------------- */
.choice-dialog-overlay { z-index: 1200; }

.choice-dialog-message {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.choice-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-fast);
}
.choice-option:hover {
  background: var(--accent-soft);
  transform: translateX(2px);
}
.choice-option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.choice-option-warning { border-left-color: var(--warning); }
.choice-option-warning:hover { background: var(--warning-soft); }
.choice-option-danger { border-left-color: var(--danger); }
.choice-option-danger:hover { background: var(--danger-soft); }

.choice-option-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}
.choice-option-hint {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   Event statuses
   ---------------------------------------------------------------- */
/* Pending: dashed outline plus a faint diagonal hatch, so the state
   is visible without relying on colour alone. */
.event-status-pending {
  border: 1.5px dashed rgba(0, 0, 0, 0.45) !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.35) 0,
    rgba(255, 255, 255, 0.35) 4px,
    transparent 4px,
    transparent 8px
  );
}

.event-status-cancelled {
  opacity: 0.5;
  text-decoration: line-through;
  filter: grayscale(0.6);
}

.pill-status {
  margin-left: auto;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  padding: 0 3px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.week-event-status {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* A recurring event gets a small corner marker */
.event-recurring { position: relative; }
.event-recurring::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid rgba(0, 0, 0, 0.28);
  border-left: 6px solid transparent;
  pointer-events: none;
}

.row-cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}

/* ----------------------------------------------------------------
   Holidays in the calendar
   ---------------------------------------------------------------- */
.month-day-cell.holiday {
  background: color-mix(in srgb, var(--holiday-color) 38%, var(--bg-secondary));
  box-shadow: inset 3px 0 0 var(--holiday-color);
}
.month-day-cell.holiday .month-day-number {
  color: #7f1d1d;
  font-weight: 700;
}

.month-holiday-label {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  color: #7f1d1d;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-1) 2px;
  opacity: 0.85;
}

.week-header-day.holiday {
  background: color-mix(in srgb, var(--holiday-color) 32%, var(--bg-secondary));
  box-shadow: inset 0 -2px 0 var(--holiday-color);
}
.week-header-holiday {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  color: #7f1d1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 2px;
}

.day-header-info.holiday { position: relative; }
.day-header-holiday {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #7f1d1d;
  align-self: center;
}

.mini-cal-day.holiday {
  background: color-mix(in srgb, var(--holiday-color) 45%, transparent);
  color: #7f1d1d;
  font-weight: 700;
}

/* Sidebar legend */
.legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2) 0;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.legend-swatch {
  width: 18px;
  height: 12px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  background: var(--ev-lavender);
}
.legend-pending {
  border: 1.5px dashed rgba(0, 0, 0, 0.45);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 0,
    rgba(255, 255, 255, 0.4) 3px,
    transparent 3px,
    transparent 6px
  );
}
.legend-cancelled {
  opacity: 0.5;
  filter: grayscale(0.6);
}
.legend-holiday { background: #fecaca; }

/* ----------------------------------------------------------------
   Weekday picker (recurrence)
   ---------------------------------------------------------------- */
.weekday-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.weekday-chip {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}
.weekday-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.weekday-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--shadow-glow);
}

/* ----------------------------------------------------------------
   Permission tick boxes
   ---------------------------------------------------------------- */
.perm-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.perm-count {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
}
.perm-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.perm-group {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.perm-group-title {
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}

.perm-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-2);
  padding: 5px 4px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.12s ease;
}
.perm-row:hover { background: var(--accent-soft); }

.perm-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.perm-row input[type="checkbox"]:disabled { cursor: not-allowed; }

.perm-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.perm-code {
  grid-column: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  opacity: 0.6;
}

.perm-row-locked {
  background: var(--warning-soft);
  cursor: not-allowed;
}
.perm-row-locked .perm-label { font-style: italic; }

.users-form-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.user-card-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  padding-right: 60px;
}
.user-card-username {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.user-card-perms {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.user-card-role {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Locked accounts must stand out in the list without being mistaken for a
   selected row, so the marker is a red edge plus its own badge. */
.badge-locked {
  background: var(--danger);
  color: var(--text-inverse);
}

.user-card-locked {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.user-card-locked:hover { background: rgba(239, 68, 68, 0.16); }

.user-card-locked-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: var(--font-size-2xs);
}

.user-card-attempts {
  color: var(--warning);
  font-weight: 700;
}

/* ----------------------------------------------------------------
   Entity cards (organizations, holidays)
   ---------------------------------------------------------------- */
.entity-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease;
}
.entity-card:hover { background: rgba(0, 0, 0, 0.04); }
.entity-card.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.entity-card-inactive { opacity: 0.55; }

.entity-color-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.entity-card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.entity-card-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-card-meta {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

#organizations-list,
#holidays-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* ----------------------------------------------------------------
   Archived spaces in the sidebar
   ---------------------------------------------------------------- */
.archived-title {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.space-item-archived {
  opacity: 0.7;
  cursor: default;
}
.space-item-archived .space-item-name {
  text-decoration: line-through;
  color: var(--text-tertiary);
}
.space-item-archived .space-color-dot { opacity: 0.5; }

.space-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--success);
  font-family: inherit;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.space-restore-btn:hover {
  background: var(--success);
  color: var(--text-inverse);
}

/* ----------------------------------------------------------------
   Log search
   ---------------------------------------------------------------- */
.logs-search-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.search-input-wrapper {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}

/* Keep the scope selector beside the search box rather than letting it
   inherit width:100% and claim a line of its own. */
.logs-search-bar > .form-select {
  width: auto;
  flex: 0 0 auto;
  min-width: 190px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-input {
  padding-left: 36px !important;
  padding-right: 36px !important;
  width: 100%;
}
/* The browser's own clear button would sit on top of ours */
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.search-clear:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.logs-result-count {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  align-self: center;
  white-space: nowrap;
}

.logs-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-tertiary);
  line-height: 1.6;
}

.logs-details-cell {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.logs-page-info {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.logs-pagination {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
}

.logs-table mark,
.report-table-wrapper mark {
  background: var(--warning);
  color: #1e293b;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}

/* ----------------------------------------------------------------
   Company report
   ---------------------------------------------------------------- */
.report-filters {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.report-filters .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 140px;
}

.report-results { min-height: 200px; }

.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.report-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}
.report-stat-value {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.report-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.report-section-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.report-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.report-bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.report-bar-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}
.report-bar-value {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.report-bar-track {
  height: 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.report-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-bar-spaces {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.report-space-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.report-space-chip strong { color: var(--text-primary); }

.report-table-wrapper {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ----------------------------------------------------------------
   Cleaning / Services view
   ---------------------------------------------------------------- */
.cleaning-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
/* The form controls inherit width:100% from the base stylesheet, which would
   push every one of them onto its own line inside this flex row. */
.cleaning-toolbar .form-input,
.cleaning-toolbar .form-select {
  width: auto;
  flex: 0 1 auto;
  min-width: 150px;
}
.cleaning-toolbar .btn { flex: 0 0 auto; }

.cleaning-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cleaning-day {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.cleaning-day-today {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.cleaning-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-3);
}

.cleaning-day-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.cleaning-day-dow {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
}
.cleaning-day-date {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}

.cleaning-day-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cleaning-day-count {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.cleaning-none {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  font-style: italic;
  padding: var(--space-2) 0;
}

.cleaning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.cleaning-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--bg-secondary);
}

.cleaning-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cleaning-card-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
}

/* The one figure the services team actually needs */
.cleaning-free-badge {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--success);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

.cleaning-card-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.cleaning-pending {
  color: var(--warning);
  font-weight: 700;
}

.cleaning-event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.cleaning-event {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  padding: 4px 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
}
.cleaning-event-cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}
.cleaning-event-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.cleaning-event-title {
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}
.cleaning-event-org {
  font-size: var(--font-size-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cleaning-free-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .perm-grid {
    grid-template-columns: 1fr;
    max-height: 260px;
  }
  .perm-header { flex-direction: column; align-items: stretch; }
  .cleaning-grid { grid-template-columns: 1fr; }
  .report-summary { grid-template-columns: repeat(2, 1fr); }
  .report-filters .form-group { min-width: 100%; }
  .logs-search-bar { flex-direction: column; align-items: stretch; }
  .weekday-chip { width: 34px; height: 34px; }
}

/* Browsers without color-mix fall back to a flat holiday tint */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .month-day-cell.holiday,
  .week-header-day.holiday,
  .mini-cal-day.holiday {
    background: var(--holiday-color);
  }
}

/* ================================================================
   MÓVIL (≤768px)
   ================================================================
   El header de escritorio es una sola fila flex que necesita unos
   804px: en un teléfono de 375px los nueve botones de acción se
   salían de la pantalla y quedaban inalcanzables, y el selector de
   vistas desaparecía sin sustituto.

   Se reorganiza en dos filas con CSS Grid, que coloca cada pieza en
   su sitio sin depender del orden del HTML. `display: contents` en
   .header-center asciende a sus hijos a hijos directos de la
   rejilla, que es lo que permite repartirlos entre las dos filas.

   Nada de esto afecta al escritorio: vive todo dentro del media query.
   ================================================================ */
@media (max-width: 768px) {

  /* La barra lateral se ancla bajo el header, así que su altura debe
     reflejar las dos filas o se solaparían. */
  :root { --header-height: 96px; }

  /* ---------------- Header en dos filas ---------------- */
  #app-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "menu  titulo   hoy"
      "vistas acciones acciones";
    align-items: center;
    height: auto;
    min-height: var(--header-height);
    padding: 0 var(--space-2);
    column-gap: var(--space-2);
    row-gap: 0;
  }

  /* Asciende Hoy, la navegación de mes y el selector de vistas a
     hijos directos de la rejilla para poder situarlos por área. */
  .header-center { display: contents; }

  .header-left {
    grid-area: menu;
    gap: var(--space-2);
    height: 50px;
  }
  /* El logotipo escrito no cabe; el icono basta para identificar la app. */
  .header-title { display: none; }

  .header-nav-group {
    grid-area: titulo;
    justify-content: center;
    min-width: 0;
  }
  #current-month-display {
    font-size: var(--font-size-base);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  #btn-today {
    grid-area: hoy;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
  }

  /* Segunda fila */
  .view-selector {
    grid-area: vistas;
    margin: 0;
    align-self: center;
  }
  .view-btn {
    padding: 6px 9px;
    font-size: var(--font-size-xs);
  }

  /* Los botones de acción se deslizan lateralmente en su propia
     tira: un administrador tiene nueve y no caben, pero así todos
     quedan alcanzables en lugar de perderse fuera de la pantalla. */
  .header-right {
    grid-area: acciones;
    justify-content: flex-end;
    gap: var(--space-1);
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-right::-webkit-scrollbar { display: none; }

  /* Objetivos táctiles: 38px es el mínimo cómodo para un dedo. */
  .header-btn {
    min-width: 38px;
    min-height: 38px;
    flex-shrink: 0;
  }
  #btn-sidebar-toggle {
    min-width: 40px;
    min-height: 40px;
  }

  /* ---------------- Vista semanal ----------------
     Siete días en 375px dejan unos 49px por columna. Se probó a
     ensancharlas y recorrer la semana en horizontal, pero el
     encabezado de días y la rejilla son contenedores de scroll
     distintos: la columna de horas se despegaba y se perdía la
     referencia horaria, y no hay forma de anclarla sin reestructurar
     el HTML (overflow-x: visible se convierte en auto en cuanto el
     otro eje deja de ser visible).

     Así que la semana entra completa, como en las apps de
     calendario del móvil: sirve de vista general y el detalle se
     consulta en la vista Día, que a 335px sí es legible. */
  .week-view { overflow-x: hidden; }
  .week-header,
  .week-grid,
  .week-allday-area {
    grid-template-columns: 30px repeat(7, 1fr);
    min-width: 0;
  }
  .week-time-label { font-size: 8px; padding-right: 2px; }

  /* En 45px de ancho solo cabe el título, y muy corto. */
  .week-event-block { padding: 1px 2px; border-left-width: 2px; }
  .week-event-title {
    font-size: 8px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .week-event-time,
  .week-event-org,
  .week-event-status { display: none; }

  /* ---------------- Vista mensual ----------------
     Las celdas miden unos 53px. La hora dentro de la píldora se
     come el espacio del título, que es el dato que se busca. */
  .month-event-pill {
    padding: 1px 3px;
    gap: 2px;
    font-size: var(--font-size-2xs);
  }
  .pill-time { display: none; }
  .month-day-number { font-size: var(--font-size-sm); }
  .month-holiday-label { display: none; }
  .month-dow-cell { font-size: 9px; }

  /* ---------------- Barra lateral ---------------- */
  #sidebar { width: min(85vw, 300px); }

  /* ---------------- Diálogos y formularios ---------------- */
  .modal-content {
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  /* Dos columnas no caben: cada campo a su línea.
     El .form-group ya trae su propio margin-bottom, así que al apilarse
     se sumaba al row-gap de la rejilla y los campos emparejados salían
     más separados que los sueltos. Se anula el margen interior y manda
     una sola separación, la del propio grupo, para que todo el
     formulario respire igual. */
  .form-row {
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-bottom: 0;
  }
  .form-row > .form-group { margin-bottom: var(--space-5); }
  .form-row > .form-group:last-child { margin-bottom: var(--space-5); }

  .modal-footer {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .modal-footer .btn { flex: 1 1 auto; }
  .modal-footer-spacer { display: none; }

  .users-actions { flex-wrap: wrap; }
  .users-actions .btn { flex: 1 1 auto; }

  /* Las tablas anchas se recorren dentro de su marco, nunca
     empujando la página entera. */
  .logs-table-wrapper,
  .report-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .logs-table { min-width: 560px; }

  .logs-filters { gap: var(--space-2); }
  .logs-filters .form-select,
  .logs-filters .form-input { min-width: 0; flex: 1 1 45%; }

  .cleaning-toolbar .form-input,
  .cleaning-toolbar .form-select { min-width: 0; flex: 1 1 auto; }

  /* Evita el zoom automático de iOS al enfocar un campo, que se
     dispara con cualquier tamaño de letra por debajo de 16px. */
  .form-input,
  .form-select,
  .form-textarea { font-size: 16px; }

  /* ---------------- Login ---------------- */
  .login-container { padding: var(--space-6) var(--space-5); }
}

/* Móvil estrecho */
@media (max-width: 480px) {
  /* El original ocultaba el selector de vistas aquí y lo sustituía por
     un `.mobile-view-selector` que nunca se llegó a añadir al HTML,
     así que en pantallas pequeñas no había forma de cambiar de vista. */
  .view-selector { display: flex; }
  .view-btn { padding: 6px 7px; font-size: var(--font-size-2xs); }

  #btn-today { padding: 6px 9px; font-size: var(--font-size-xs); }
  #current-month-display { font-size: var(--font-size-sm); }

  .report-summary { grid-template-columns: 1fr 1fr; }
  .report-filters .form-group { min-width: 100%; }
}

/* ----------------------------------------------------------------
   Ajustes finos del header móvil
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* El título se recortaba porque la columna central quedaba
     comprimida entre el menú y el botón Hoy. Se les quita holgura
     para devolverle el espacio. */
  .header-left { gap: var(--space-1); }
  .header-logo { gap: 0; }

  #btn-today {
    padding: 5px 10px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  .nav-arrow {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
  }
  .header-nav-group { gap: 2px; }

  /* Nueve botones no caben en una fila de teléfono. La tira se
     desliza, y el degradado del borde es lo que avisa de que hay
     más a la izquierda: sin esa pista nadie descubre el gesto.
     Un visor, que solo ve uno o dos botones, no verá degradado. */
  .header-right {
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
    mask-image: linear-gradient(to right, transparent 0, #000 22px);
  }
  .header-right .header-btn { scroll-snap-align: end; }

  .header-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
  }
  .header-btn svg { width: 17px; height: 17px; }
}

/* ----------------------------------------------------------------
   Header móvil: reparto definitivo
   ----------------------------------------------------------------
   La tira deslizante no servía. Con `justify-content: flex-end`, lo
   que no cabe se dibuja ANTES del borde izquierdo del contenedor, y
   flexbox no permite desplazarse hasta ahí: los cuatro primeros
   botones quedaban inalcanzables, no solo escondidos.

   Se resuelve dando a los botones una fila entera para ellos. En
   359px caben los nueve a 36px sin desplazamiento alguno, así que
   no hay nada oculto ni gestos que adivinar.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  #app-header {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "menu     titulo   hoy      vistas"
      "acciones acciones acciones acciones";
  }

  .header-right {
    grid-area: acciones;
    /* Reparto uniforme en el ancho disponible, sin desbordamiento. */
    justify-content: space-between;
    gap: 2px;
    overflow: visible;
    padding: 0 var(--space-1) var(--space-1);
    /* Se retira el degradado: ya no hay nada que insinuar. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* El título pedía 5px más de los que tenía y salía con puntos
     suspensivos; un cuerpo menor le da el margen que faltaba. */
  #current-month-display { font-size: var(--font-size-sm); }

  .view-selector { justify-self: end; }
}

/* En pantallas muy estrechas los nueve botones ya no caben en una
   fila, así que se reparten en dos y el header crece lo necesario. */
/* (sustituido mas abajo por el corte en 359px) */

/* ----------------------------------------------------------------
   Header móvil: correcciones de espacio
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Se ocultan por ID, no por clase.
     applyPermissions() reescribe className del badge para pintar el
     color del rol, y al hacerlo borra la clase `role-badge` con la
     que la hoja original lo ocultaba en móvil. El resultado era un
     badge "ADMIN" ocupando 60px justo donde van los botones. */
  #user-display-name,
  #user-role-badge { display: none !important; }

  /* El icono de calendario junto al menú no aporta nada aquí: el
     usuario ya sabe en qué aplicación está, y libera 30px para el
     nombre del mes, que sí se estaba recortando. */
  .header-logo { display: none; }

  /* Se aprieta la primera fila para que "Septiembre 2026" entre
     completo en lugar de salir como "Se...". */
  .view-selector { gap: 1px; padding: 2px; }
  .view-btn { padding: 5px 6px; font-size: var(--font-size-2xs); }
  #btn-today { padding: 5px 8px; }
  .nav-arrow { min-width: 24px; min-height: 24px; }
  .nav-arrow svg { width: 14px; height: 14px; }
}

/* Los nueve botones caben en una fila desde 360px. Por debajo de
   eso se reparten en dos y el header crece lo justo. */
@media (max-width: 359px) {
  :root { --header-height: 132px; }

  #app-header { min-height: var(--header-height); }
  .header-right {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    row-gap: var(--space-1);
  }
}


/* ----------------------------------------------------------------
   Errores de validación dentro del formulario
   ----------------------------------------------------------------
   Un fallo al guardar se anunciaba solo con un aviso flotante en la
   esquina, que además desaparece en cuatro segundos. Si no estabas
   mirando esa esquina, el formulario parecía no hacer nada. El
   motivo se muestra ahora donde está la vista: junto a los campos.
   ---------------------------------------------------------------- */
.inline-notice-error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: #991b1b;
  font-weight: 600;
}

/* Resalta brevemente el campo que hay que corregir. */
.field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
}

/* ----------------------------------------------------------------
   Limpieza previa y posterior
   ----------------------------------------------------------------
   Cada reserva puede pedir que el espacio se limpie antes de empezar,
   después de terminar, o ambas. En la vista de Servicios estas tareas
   van al principio de la tarjeta, porque son lo que hay que hacer;
   los eventos de debajo son solo el contexto.
   ---------------------------------------------------------------- */
.cleaning-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}
.cleaning-options .checkbox-row { padding: 5px 0; }

/* Marca en el calendario los eventos que piden limpieza. */
.pill-cleaning,
.week-event-cleaning {
  font-size: var(--font-size-2xs);
  font-weight: 800;
  opacity: 0.75;
  flex-shrink: 0;
}

/* --- Tarjeta de espacio en la vista de Servicios --- */
.cleaning-card-required {
  background: linear-gradient(to right, var(--warning-soft), var(--bg-secondary) 60%);
}

.cleaning-tasks {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
}

.cleaning-tasks-title {
  display: block;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
  margin-bottom: 5px;
}

.cleaning-task-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.cleaning-task {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-sm);
}

.cleaning-task-when {
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-inverse);
  flex-shrink: 0;
}
/* Previa y posterior se distinguen por color: son momentos distintos
   del día y el operario tiene que poder separarlos de un vistazo. */
.cleaning-task-before .cleaning-task-when { background: #0891b2; }
.cleaning-task-after  .cleaning-task-when { background: #b45309; }

.cleaning-task-at {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cleaning-task-event {
  color: var(--text-secondary);
  min-width: 0;
}
.cleaning-task-notes {
  flex: 1 1 100%;
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--text-tertiary);
  padding-left: var(--space-2);
  border-left: 2px solid var(--border);
}

.cleaning-day-jobs {
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--warning);
  color: #422006;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

@media (max-width: 768px) {
  .cleaning-task { font-size: var(--font-size-xs); }
  .cleaning-task-notes { padding-left: 0; border-left: none; }
}