/* heyde.schule - Modular CSS: 50_ui_effects.css */

/* --- Traffic Light Indicators --- */
.traffic-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.tl-red { background-color: #ff4d4d; }
.tl-orange { background-color: #ffa500; }
.tl-yellow { background-color: #ffff00; }
.tl-yellowgreen { background-color: #adff2f; }
.tl-green { background-color: #00ff00; }

/* Smart Overflow System */
.overflow-container {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 48px; /* Nur die erste Zeile */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 10px;
    align-items: center;
    width: 100%;
}

.overflow-container.expanded {
    max-height: 1000px;
}

.overflow-toggle-bar {
    width: 100%;
    height: 12px;
    background: linear-gradient(to bottom, rgba(199, 96, 45, 0.2), transparent);
    cursor: pointer;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2px;
    opacity: 0.5;
    transition: all 0.2s;
    border: none;
}

.overflow-toggle-bar:hover {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(199, 96, 45, 0.4), transparent);
}

.overflow-toggle-bar::after {
    content: '▼';
    font-size: 10px;
    color: var(--accent-1);
}

.overflow-container.expanded + .overflow-toggle-bar::after {
    content: '▲';
}

/* Fix für verschachtelte Buttons in Forms (bug.png) */
.updformrow button, .addform button {
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

/* Content from keyframes.css */
@keyframes error {
  from {background-color: rgba(255,220,210,1);}
  to {background-color: rgba(240,240,230,1);}
}

@keyframes success {
  from {background-color: rgba(220,255,210,1);}
  to {background-color: rgba(240,240,230,1);}
}