@layer reset, layout, components;

/* 1. RESET LAYER */
@layer reset {
  #spatial-calendar-container {
    all: initial;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    background: #050505;
    color: #fff;
    position: relative;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%; 
  }
  
  #spatial-calendar-container * { 
    box-sizing: border-box; 
    text-decoration: none !important; 
    border-bottom: none !important;
  }
}

/* 2. LAYOUT LAYER */
@layer layout {
  .calendar-controls {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #333;
    margin-bottom: 20px;
    width: 100%;
    max-width: 600px;
    align-self: center;
    z-index: 20;
  }

  .mod-date {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    margin: 5px 0 10px 0;
  }

  .cal-btn-main {
    background: rgba(255,255,255,0.05);
    border: 1px solid #666;
    color: #fff;
    padding: 12px 24px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .cal-btn-main:hover { background: #fff; color: #000; }

  .map-viewport {
    position: relative;
    width: 100%;
    max-width: 900px; /* Desktop Limit */
    margin: 0 auto;
    container-type: inline-size;
    container-name: studio-map;
  }

  #floorplan-svg {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1; 
  }

  #labels-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
  }
}

/* 3. COMPONENTS LAYER */
@layer components {
  .room-rect { 
    fill: #333333; 
    stroke: #555555; 
    stroke-width: 2px; 
    transition: all 0.3s;
  }
  .room-rect:hover { fill: #444; cursor: pointer; }
  .gate-rect { fill: #00B0FF; }

  :root { --c-booked: #ff0000; --c-option: #00e676; }

  .label-container {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 15cqw; 
    text-align: center;
  }

  .spatial-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    pointer-events: auto;
  }

  .label-vertical { transform: rotate(-90deg); white-space: nowrap; }

  /* --- DESKTOP SCHRIFTGRÖSSEN (V8.3 Update) --- */
  .lbl-xl { font-size: 2.5cqw; }
  
  /* HIER IST DIE ÄNDERUNG: Wir gleichen alle Größen an */
  /* lg, md und sm sind jetzt auf Desktop fast gleich groß */
  .lbl-lg { font-size: 1.8cqw; }
  .lbl-md { font-size: 1.8cqw; } /* Angehoben von 1.5 */
  .lbl-sm { font-size: 1.6cqw; } /* Angehoben von 1.2 */
  
  /* --- MOBILE SCHRIFTGRÖSSEN (Unverändert perfekt) --- */
  @container studio-map (max-width: 768px) {
    .lbl-xl { font-size: 5cqw; }
    .lbl-lg { font-size: 4cqw; }
    .lbl-md { font-size: 3.5cqw; }
    .lbl-sm { font-size: 2.5cqw; } /* Explizit klein lassen für Mobile */
  }
}

@layer components {
  /* --- STATUS VISUALISIERUNG (ANBAU V8.4) --- */
  
  /* Status: Gebucht (Rot) */
  /* Wir nutzen !important, um das Standard-Grau sicher zu überschreiben */
  .booked .room-rect { 
    fill: rgba(255, 0, 0, 0.15) !important; 
    stroke: var(--c-booked) !important;
    stroke-width: 2px !important;
  }
  
  /* Status: Option (Grün gestrichelt) */
  .option .room-rect { 
    fill: rgba(0, 230, 118, 0.1) !important; 
    stroke: var(--c-option) !important; 
    stroke-dasharray: 6 4; 
    stroke-width: 2px !important;
  }
  
  /* Helper für Icons (kommt gleich) */
  .status-icon {
    width: 1.2cqw;
    height: 1.2cqw;
    margin-top: 0.2cqw;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
  }
}

@layer components {
  /* --- FARB-UPDATE V8.5 (Gold & Pink) --- */
  
  :root {
    /* Überschreibt das vorherige Grün mit Gold */
    --c-option: #FFD700; 
    
    /* Vorbereitung für 30% Rabatt (Pink) */
    --c-discount: #FF00CC; 
  }

  /* Korrektur der Option-Klasse auf Gold */
  .option .room-rect { 
    /* Goldener Schimmer (RGB 255, 215, 0) */
    fill: rgba(255, 215, 0, 0.15) !important; 
    stroke: var(--c-option) !important; 
    stroke-dasharray: 6 4; 
    stroke-width: 2px !important;
  }
  
  /* VORBEREITUNG: Rabatt-Klasse (noch inaktiv, aber bereit) */
  .discount .room-rect {
    stroke: var(--c-discount) !important;
    stroke-width: 3px !important;
    /* Optional: Leichter pinker Glow */
    filter: drop-shadow(0 0 5px rgba(255, 0, 204, 0.5));
  }
}

@layer components {
  /* --- PHASE 3: PICKER MODUL (ANBAU V8.6) --- */
  
  /* Das Overlay (Vollbild, fixiert) */
  #picker-v7 {
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); 
    z-index: 9999;
    display: none; /* Standardmäßig unsichtbar */
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(5px);
  }

  /* Der Container im Overlay */
  .picker-content {
    background: #050505; 
    border: 1px solid #333; 
    padding: 20px; 
    width: 90%; 
    max-width: 400px;
    color: #fff; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  }

  /* Der Header im Picker (Monat/Jahr) */
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
  }
  
  .picker-nav-btn {
    background: transparent; border: 1px solid #444; color: #fff;
    cursor: pointer; padding: 5px 10px;
  }
  .picker-nav-btn:hover { background: #fff; color: #000; }

  /* Das Kalender-Raster */
  .picker-grid {
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 5px; 
  }

  /* Ein einzelner Tag */
  .picker-day {
    aspect-ratio: 1; 
    border: 1px solid #222; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-size: 0.9rem;
    position: relative;
    background: #0a0a0a;
    transition: all 0.2s;
  }
  .picker-day:hover { border-color: #666; }
  
  .picker-day.other-month { opacity: 0.3; pointer-events: none; border: none; }
  
  /* Der gewählte Tag */
  .picker-day.selected { 
    border-color: var(--c-option); 
    background: #1a1a1a;
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
  }

  /* --- INTELLIGENTE PUNKTE (DOTS) --- */
  .status-dot { 
    width: 6px; height: 6px; 
    border-radius: 50%; 
    margin-top: 6px; 
  }
  
  /* Grün: Frei */
  .dot-free { background: #00e676; box-shadow: 0 0 4px #00e676; }
  
  /* Rot: Voll */
  .dot-full { background: var(--c-booked); opacity: 0.5; }
  
  /* Gold/Pulsierend: Teilbelegt */
  .dot-partial { 
    background: var(--c-option); 
    animation: pulse-dot 2s infinite; 
  }
  
  @keyframes pulse-dot { 
    0% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.5; transform: scale(0.8); } 
    100% { opacity: 1; transform: scale(1); } 
  }
}

@layer components {
  /* --- V8.7: GLOWING BUTTON --- */
  .cal-btn-glowing {
    background: #00e676 !important;
    color: #000 !important;
    border: none !important;
    padding: 10px 30px;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.3s ease;
    animation: button-glow-pulse 2s infinite;
  }

  @keyframes button-glow-pulse {
    0% { box-shadow: 0 0 5px rgba(0, 230, 118, 0.6); transform: scale(1); }
    50% { box-shadow: 0 0 20px rgba(0, 230, 118, 1); transform: scale(1.02); }
    100% { box-shadow: 0 0 5px rgba(0, 230, 118, 0.6); transform: scale(1); }
  }
  
  .cal-btn-glowing:hover {
    background: #fff !important;
    box-shadow: 0 0 30px #fff;
  }
}

@layer components {
  /* --- V8.8: SOLID GREEN PULSE BUTTON --- */
  .cal-btn-glowing {
    background-color: #00e676 !important; /* Leuchtend Grün */
    color: #000000 !important;             /* Tiefschwarz */
    border: 2px solid #00e676 !important;
    padding: 12px 35px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all 0.3s ease;
    /* Pulsieren der Hintergrundfarbe statt Schatten */
    animation: inner-pulse 2s infinite ease-in-out !important;
    box-shadow: none !important; /* Kein äußeres Leuchten */
  }

  @keyframes inner-pulse {
    0%   { background-color: #00e676; }
    50%  { background-color: #00a354; } /* Dunkleres Grün für den Puls-Effekt */
    100% { background-color: #00e676; }
  }
  
  .cal-btn-glowing:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
  }
}
@layer components {
  /* --- V8.9: ABSOLUT IDENTISCH (Rahmen + eckig + Puls) --- */
  
  .cal-btn-glowing {
    all: unset; /* Alle Standard-Button-Styles entfernen */
    display: inline-block;
    cursor: pointer;
    border: 1px solid #666; /* Der äußere feine graue Rahmen aus deiner Vorlage */
    padding: 3px;           /* Der exakte Abstand zwischen Rahmen und Grün */
    background: transparent;
    border-radius: 0 !important; /* Absolut eckig */
  }

  .cal-btn-glowing span {
    display: block;
    background-color: #00e676; /* Das leuchtende Grün */
    color: #000;              /* Schwarze Schrift */
    padding: 8px 25px;        /* Abstände innerhalb des Grüns */
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 0 !important; /* Auch innen eckig */
    /* Die Puls-Animation nur auf der grünen Fläche */
    animation: solid-pulse 2s infinite ease-in-out;
  }

  @keyframes solid-pulse {
    0%   { background-color: #00e676; }
    50%  { background-color: #00ffa2; } /* Wird kurzzeitig noch heller/leuchtender */
    100% { background-color: #00e676; }
  }

  .cal-btn-glowing:hover span {
    background-color: #fff; /* Beim Drüberfahren wird es weiß */
    color: #000;
  }
}
@layer components {
  /* --- V9.0: DIGITAL BRUTALISM BUTTON (Slave 14 Spec) --- */
  .cal-btn-glowing {
    all: unset; /* Radikaler Reset */
    display: inline-block;
    padding: 8px 20px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 0 !important; /* Absolute Regel: Keine Rundung */
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
  }

  .cal-btn-glowing:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
  }
  
  /* Korrektur für das Datum unter dem Button */
  .mod-date {
    font-family: 'JetBrains Mono', monospace;
    color: #ffffff;
    text-transform: uppercase;
  }
}
@layer components {
  /* Status: Promo / 30% Rabatt (Pink) */
  .promo .room-rect {
    fill: rgba(255, 0, 204, 0.15) !important;
    stroke: var(--c-discount) !important;
    stroke-width: 3px !important;
  }

  /* Status: Blockiert (WC-Weg Logik) */
  .blocked .room-rect {
    fill: rgba(50, 50, 50, 0.8) !important;
    stroke: #444 !important;
    stroke-dasharray: 2 2;
  }

  /* Lärm-Konflikt (Gelber Warnrand) */
  .noise-conflict .room-rect {
    stroke: #ffcc00 !important;
    stroke-width: 4px !important;
    animation: pulse-warn-border 1.5s infinite !important;
  }

  /* Zeit-Badges & Info-Icons */
  .time-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.6cqw;
    padding: 1px 4px;
    border-radius: 2px;
    margin-top: 2px;
  }
  .info-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5cqw;
    height: 1.5cqw;
    background: #fff;
    color: #000;
    border-radius: 50%;
    font-size: 1cqw;
    font-weight: bold;
    margin-top: 5px;
    cursor: pointer;
    animation: pulse-info 2s infinite;
  }
  @keyframes pulse-info { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
  
  /* Die Info-Card */
  #studio-info-card {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 260px;
    background: rgba(5, 5, 5, 0.95);
    border: 1px solid #444;
    padding: 15px;
    display: none;
    z-index: 100;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  }
}