/* ============================================================
   BASE CARD LAYOUT
   ============================================================ */

.app-list-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.app-list-card-left,
.app-list-card-right
.app-list-card-middle {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-list-card-left {
    text-align: left;
}

.app-list-card-right {
    text-align: right;
}

.app-list-card-middle {
    text-align: center;
}


/* ============================================================
   TYPOGRAPHY SYSTEM FOR CARDS
   ============================================================ */

/* Najważniejsza informacja: nazwa zajęć, imię i nazwisko */
.app-list-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Drugorzędne informacje: czas, instruktor, grupy */
.app-list-card-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    line-height: 1.2;
}

/* Meta-informacje: daty, drobne opisy */
.app-list-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #555);
    line-height: 1.2;
}

/* Prowadzący zajęcia w studiu (subinstruktor) - druga, mniejsza linijka pod nazwą studia lub zajęć.
   Renderowana wtedy i tylko wtedy, gdy backend przysłał nazwisko; zwykły instruktor nigdy go nie ma,
   więc jego karta wygląda dokładnie tak jak dotąd.
   Patrz docs/architecture/studio-role-domain-model.md, sekcja 5. */
.app-list-card-subinstructor {
    font-size: 0.7rem;
    color: var(--text-muted, #555);
    line-height: 1.2;
}

/* Statusy (kolor nadpisywany inline) */
.app-list-card-status {
    font-size: 0.80rem;
    font-weight: 600;
}

/* Informacje o miejscach */
.app-list-card-spots {
    font-size: 0.80rem;
    font-weight: 500;
}


/* ============================================================
   CHIPS (grupy, tagi, itp.)
   ============================================================ */

.app-list-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.app-list-chip {
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #333;
    line-height: 1;
}

.app-list-chip-more {
    background: #e0e0e0;
    font-weight: 600;
}


/* ============================================================
   OPTIONAL MODIFIERS
   ============================================================ */

/* Ostrzeżenia (np. oczekujący uczestnicy) */
.app-list-card-warning {
    color: #c0392b;
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .app-list-card-warning .icon {
        font-weight: 700;
        font-size: 0.9rem;
    }


/* ============================================================
   ANIMACJE (np. przenoszenie uczestnika w górę/dół)
   ============================================================ */

@keyframes fadePulse {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.app-list-card.move-up,
.app-list-card.move-down {
    animation: fadePulse 0.6s ease-out;
}

/* ============================================================
   Akcje i przyciski Akcji
   ============================================================ */


/*.actions {
    display: flex;
    flex-direction: row;*/ /* 🔥 wymusza układ poziomy */
    /*align-items: center;
    justify-content: flex-end;
    gap: 6px;
}*/

.actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 🔥 pozwala zawijać przyciski */
    justify-content: flex-end; /* 🔥 wyrównanie do prawej */
    align-items: center;
    gap: 6px;
    /*max-width: 140px;  🔥 opcjonalne: ogranicza szerokość strefy akcji */
}


.actions button {
    width: 42px;
    height: 32px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

/* Kolory akcji */
.actions button.approve {
    color: #2ecc71;
}

.actions button.reject {
    color: #e74c3c;
}

.actions button.reserve {
    color: #f1c40f;
}

.actions button.lock {
    color: #7f8c8d;
}

.actions button.restart {
    color: #3498db;
}

.actions button.arrow {
    color: #3498db; /* ten sam niebieski co restart */
}

/* Hover states */
.actions button.approve:hover {
    background: rgba(46, 204, 113, 0.1);
}

.actions button.reject:hover {
    background: rgba(231, 76, 60, 0.1);
}

.actions button.reserve:hover {
    background: rgba(204, 159, 46, 0.10);
}

.actions button.lock:hover {
    background: rgba(127, 140, 141, 0.15);
}

.actions button.restart:hover {
    background: rgba(46, 170, 204, 0.1);
}

.actions button.arrow:hover {
    background: rgba(46, 170, 204, 0.1);
}