/* Dead End Motel v0.25 — Calendar / Weather / Motel Condition / Visual Decay */

/* ============================================================
   CSS VARIABLES
   ============================================================ */

:root {
  /* Weather tone palette */
  --v25-weather-clear:   rgba(52, 211, 153, 0.75);
  --v25-weather-fog:     rgba(148, 163, 184, 0.75);
  --v25-weather-cold:    rgba(96, 165, 250, 0.75);
  --v25-weather-rain:    rgba(100, 149, 237, 0.75);
  --v25-weather-storm:   rgba(251, 146, 60, 0.8);

  /* Motel condition tones */
  --v25-cond-upgraded:    rgba(52, 211, 153, 0.8);
  --v25-cond-maintained:  rgba(148, 163, 184, 0.65);
  --v25-cond-strained:    rgba(251, 191, 36, 0.75);
  --v25-cond-neglected:   rgba(248, 113, 113, 0.7);
  --v25-cond-deteriorating: rgba(220, 38, 38, 0.8);

  /* Effect chip colors */
  --v25-effect-visibility: rgba(148, 163, 184, 0.7);
  --v25-effect-power:      rgba(251, 146, 60, 0.75);
  --v25-effect-blackout:   rgba(220, 38, 38, 0.8);
  --v25-effect-outdoor:    rgba(100, 149, 237, 0.7);
  --v25-effect-neutral:    rgba(100, 116, 139, 0.6);
}

/* ============================================================
   APP SHELL — MOTEL CONDITION DATA HOOKS
   Affects camera grid and MCB surfaces
   ============================================================ */

[data-motel-condition="deteriorating"] .camera-grid {
  filter: contrast(0.82) brightness(0.88) saturate(0.7);
}
[data-motel-condition="deteriorating"] .camera-card {
  border-color: rgba(220, 38, 38, 0.3);
}
[data-motel-condition="deteriorating"] .motel-command-board {
  border-color: rgba(220, 38, 38, 0.2);
}

[data-motel-condition="neglected"] .camera-grid {
  filter: contrast(0.88) brightness(0.92) saturate(0.8);
}
[data-motel-condition="neglected"] .camera-card {
  border-color: rgba(248, 113, 113, 0.22);
}

[data-motel-condition="strained"] .camera-grid {
  filter: contrast(0.93) brightness(0.96);
}

[data-motel-condition="upgraded"] .camera-grid {
  filter: contrast(1.04) brightness(1.02) saturate(1.1);
}
[data-motel-condition="upgraded"] .camera-card {
  border-color: rgba(52, 211, 153, 0.2);
}
[data-motel-condition="upgraded"] .motel-command-board {
  border-color: rgba(52, 211, 153, 0.15);
}

/* ============================================================
   CAMERA GRID — WEATHER VISUAL EFFECTS
   Applied via .weather-${primary} on the camera-grid container
   ============================================================ */

/* Fog — low-contrast haze over preview cells */
.camera-grid.weather-fog .camera-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(148, 163, 184, 0.18);
  pointer-events: none;
  z-index: 1;
}
.camera-grid.weather-fog .camera-card {
  border-color: rgba(148, 163, 184, 0.25);
}
.camera-grid.weather-fog .camera-preview {
  filter: contrast(0.88) brightness(0.94) blur(0.3px);
}

/* Cold — blue tint, slight brightness drop */
.camera-grid.weather-cold .camera-preview {
  filter: contrast(0.92) brightness(0.91) hue-rotate(18deg) saturate(0.85);
}
.camera-grid.weather-cold .camera-card {
  border-color: rgba(96, 165, 250, 0.2);
}

/* Rain — vertical scanline overlay */
.camera-grid.weather-rain .camera-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(100, 149, 237, 0.06) 3px,
    rgba(100, 149, 237, 0.06) 4px
  );
  pointer-events: none;
  z-index: 1;
}
.camera-grid.weather-rain .camera-preview {
  filter: contrast(0.9) brightness(0.93);
}

/* Storm — amber instability tint + flicker-ready border */
.camera-grid.weather-storm .camera-preview {
  filter: contrast(0.87) brightness(0.88) sepia(0.15) hue-rotate(-8deg);
}
.camera-grid.weather-storm .camera-card {
  border-color: rgba(251, 146, 60, 0.3);
}
.camera-grid.weather-storm .camera-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(251, 146, 60, 0.06);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   MOTEL COMMAND BOARD — ENVIRONMENT STRIP
   .mcb-env-strip added below MCB header
   ============================================================ */

.mcb-env-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}

.mcb-env-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.55);
  margin-right: 2px;
}

/* Weather chip */
.mcb-weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(203, 213, 225, 0.85);
}

.mcb-weather-chip.is-clear    { border-color: rgba(52,211,153,0.35);   color: rgba(52,211,153,0.9); }
.mcb-weather-chip.is-fog      { border-color: rgba(148,163,184,0.45);  color: rgba(148,163,184,0.9); }
.mcb-weather-chip.is-cold     { border-color: rgba(96,165,250,0.4);    color: rgba(147,197,253,0.9); }
.mcb-weather-chip.is-rain     { border-color: rgba(100,149,237,0.4);   color: rgba(147,197,253,0.9); }
.mcb-weather-chip.is-storm    { border-color: rgba(251,146,60,0.5);    color: rgba(251,191,36,0.95);
  background: rgba(251,146,60,0.08); }

/* Motel condition chip */
.mcb-condition-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(203, 213, 225, 0.75);
}

.mcb-condition-chip.is-upgraded     { border-color: rgba(52,211,153,0.4);   color: rgba(52,211,153,0.9); }
.mcb-condition-chip.is-maintained   { border-color: rgba(148,163,184,0.35); color: rgba(148,163,184,0.85); }
.mcb-condition-chip.is-strained     { border-color: rgba(251,191,36,0.4);   color: rgba(251,191,36,0.9); }
.mcb-condition-chip.is-neglected    { border-color: rgba(248,113,113,0.4);  color: rgba(248,113,113,0.9); }
.mcb-condition-chip.is-deteriorating{ border-color: rgba(220,38,38,0.5);    color: rgba(248,113,113,1.0);
  background: rgba(220,38,38,0.08); }

/* ============================================================
   TOPBAR — CALENDAR STRIP WEATHER INTEGRATION
   Weather chip appended to .shift-cal-strip
   ============================================================ */

.shift-cal-weather-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(148, 163, 184, 0.8);
}

.shift-cal-weather-chip.is-clear   { border-color: rgba(52,211,153,0.3);  color: rgba(52,211,153,0.85); }
.shift-cal-weather-chip.is-fog     { border-color: rgba(148,163,184,0.4); color: rgba(148,163,184,0.9); }
.shift-cal-weather-chip.is-cold    { border-color: rgba(96,165,250,0.35); color: rgba(147,197,253,0.85); }
.shift-cal-weather-chip.is-rain    { border-color: rgba(100,149,237,0.35);color: rgba(147,197,253,0.85); }
.shift-cal-weather-chip.is-storm   { border-color: rgba(251,146,60,0.45); color: rgba(251,191,36,0.9); }

/* ============================================================
   OUTDOOR ZONES — WEATHER CONTEXT HINTS
   Appended to parking/rear zone cards as .v25-weather-context-hint
   ============================================================ */

.v25-weather-context-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 4px;
  margin-top: 4px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 3px 3px;
}

.v25-weather-context-hint-label {
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.7);
}

.v25-weather-context-hint-text {
  font-size: 9.5px;
  color: rgba(148,163,184,0.8);
}

.v25-weather-context-hint.is-fog   .v25-weather-context-hint-text { color: rgba(148,163,184,0.9); }
.v25-weather-context-hint.is-cold  .v25-weather-context-hint-text { color: rgba(147,197,253,0.85); }
.v25-weather-context-hint.is-rain  .v25-weather-context-hint-text { color: rgba(147,197,253,0.85); }
.v25-weather-context-hint.is-storm .v25-weather-context-hint-text { color: rgba(251,191,36,0.9); }

/* ============================================================
   NIGHT PREP — EXPANDED FORECAST PANEL (v25)
   Replaces v24-forecast-strip with richer layout
   ============================================================ */

.v25-forecast-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Condition row */
.v25-conditions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.v25-conditions-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.7);
  margin-right: 2px;
}

/* Condition chip — reuse v24 visual but with new variants */
.v25-condition-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(148,163,184,0.85);
}

.v25-condition-chip.is-clear      { border-color: rgba(52,211,153,0.35);  color: rgba(52,211,153,0.9); }
.v25-condition-chip.is-fog        { border-color: rgba(148,163,184,0.45); color: rgba(148,163,184,0.95); }
.v25-condition-chip.is-cold       { border-color: rgba(96,165,250,0.4);   color: rgba(147,197,253,0.9); }
.v25-condition-chip.is-rain       { border-color: rgba(100,149,237,0.4);  color: rgba(147,197,253,0.9); }
.v25-condition-chip.is-storm      { border-color: rgba(251,146,60,0.5);   color: rgba(251,191,36,0.95);
  background: rgba(251,146,60,0.07); }
.v25-condition-chip.is-unstable-grid { border-color: rgba(251,146,60,0.4); color: rgba(251,191,36,0.9); }
.v25-condition-chip.is-pressure-rising { border-color: rgba(248,113,113,0.4); color: rgba(248,113,113,0.9); }
.v25-condition-chip.is-calm       { border-color: rgba(52,211,153,0.3);   color: rgba(52,211,153,0.8); }

/* Effects block — gameplay impact */
.v25-effects-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
}

.v25-effects-header {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.65);
  margin-bottom: 2px;
}

.v25-effect-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.v25-effect-domain {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 72px;
  color: rgba(100,116,139,0.7);
}

.v25-effect-text {
  font-size: 10px;
  color: rgba(148,163,184,0.85);
  line-height: 1.3;
}

.v25-effect-text.severity-warn   { color: rgba(251,191,36,0.9); }
.v25-effect-text.severity-danger { color: rgba(248,113,113,0.9); }
.v25-effect-text.severity-ok     { color: rgba(52,211,153,0.85); }

/* Planning hints */
.v25-planning-hints {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 2px solid rgba(251,191,36,0.3);
  border-radius: 0 3px 3px 0;
}

.v25-planning-hints-header {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251,191,36,0.55);
  margin-bottom: 2px;
}

.v25-planning-hint {
  font-size: 10px;
  color: rgba(148,163,184,0.8);
  line-height: 1.35;
}

.v25-planning-hint::before {
  content: '›';
  margin-right: 5px;
  color: rgba(251,191,36,0.4);
}

/* ============================================================
   MOTEL CONDITION SURFACE (in night prep)
   .night-prep-condition slot
   ============================================================ */

.v25-condition-surface {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v25-condition-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v25-condition-score-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.v25-condition-score-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  background: rgba(148,163,184,0.5);
}

.v25-condition-score-bar-fill.is-upgraded     { background: rgba(52,211,153,0.7); }
.v25-condition-score-bar-fill.is-maintained   { background: rgba(148,163,184,0.55); }
.v25-condition-score-bar-fill.is-strained     { background: rgba(251,191,36,0.65); }
.v25-condition-score-bar-fill.is-neglected    { background: rgba(248,113,113,0.6); }
.v25-condition-score-bar-fill.is-deteriorating{ background: rgba(220,38,38,0.75); }

.v25-condition-score-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 70px;
  text-align: right;
}

.v25-condition-score-label.is-upgraded     { color: rgba(52,211,153,0.9); }
.v25-condition-score-label.is-maintained   { color: rgba(148,163,184,0.85); }
.v25-condition-score-label.is-strained     { color: rgba(251,191,36,0.9); }
.v25-condition-score-label.is-neglected    { color: rgba(248,113,113,0.85); }
.v25-condition-score-label.is-deteriorating{ color: rgba(220,38,38,1.0); }

/* Condition signals list */
.v25-condition-signals {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
}

.v25-condition-signal-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(100,116,139,0.75);
  line-height: 1.3;
}

.v25-condition-signal-row.is-positive { color: rgba(52,211,153,0.8); }
.v25-condition-signal-row.is-negative { color: rgba(248,113,113,0.8); }
.v25-condition-signal-row.is-neutral  { color: rgba(148,163,184,0.7); }

.v25-signal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(100,116,139,0.4);
}

.v25-condition-signal-row.is-positive .v25-signal-dot { background: rgba(52,211,153,0.6); }
.v25-condition-signal-row.is-negative .v25-signal-dot { background: rgba(248,113,113,0.6); }

/* ============================================================
   PHYSICAL UPGRADE IDENTITY (night prep upgrades section)
   ============================================================ */

.v25-upgrade-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.3);
  color: rgba(52,211,153,0.9);
}

.v25-upgrade-badge.is-inactive {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: rgba(100,116,139,0.6);
}

.v25-upgrade-badge-glyph {
  font-size: 10px;
  opacity: 0.85;
}

/* Upgrade list in condition surface */
.v25-upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.v25-upgrade-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 3px;
}

.v25-upgrade-item.is-owned {
  border-color: rgba(52,211,153,0.18);
  background: rgba(52,211,153,0.04);
}

.v25-upgrade-item-name {
  flex: 1;
  font-size: 10px;
  color: rgba(100,116,139,0.7);
}
.v25-upgrade-item.is-owned .v25-upgrade-item-name { color: rgba(148,163,184,0.9); }

.v25-upgrade-item-effect {
  font-size: 9.5px;
  color: rgba(52,211,153,0.7);
  font-style: italic;
}

/* ============================================================
   SUMMARY / DAWN — WEATHER + CONDITION SECTION
   ============================================================ */

.v25-summary-weather-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  margin-bottom: 6px;
}

.v25-summary-weather-header {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.6);
  margin-bottom: 2px;
}

.v25-summary-weather-body {
  font-size: 11px;
  color: rgba(148,163,184,0.85);
  line-height: 1.5;
}

.v25-summary-weather-body .highlight-weather { color: rgba(251,191,36,0.95); font-weight: 600; }
.v25-summary-weather-body .highlight-ok      { color: rgba(52,211,153,0.9); }
.v25-summary-weather-body .highlight-warn    { color: rgba(251,191,36,0.9); }
.v25-summary-weather-body .highlight-danger  { color: rgba(248,113,113,0.9); }

/* Condition payoff chip in summary */
.v25-summary-condition-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}

.v25-summary-condition-label {
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.6);
}

/* ============================================================
   CAMERA PREVIEW — ensure pseudo-element stacking works with weather
   (weather ::before overlay must not break v24 ::after text overlay)
   ============================================================ */

.camera-preview {
  position: relative;
}

/* Ensure v24 text overlay (::after) renders above weather overlays (::before) */
.camera-preview::after {
  z-index: 2;
}