/*
 * Webmail — barvy přes Bootstrap CSS proměnné, ať fungují i v tmavém
 * režimu (dřívější natvrdo #f8f9fa/#e8f4fd tmavý režim rozbíjely).
 */

.folder-list {
    min-height: 300px;
}

.folder-list .list-group-item {
    cursor: pointer;
}

.folder-list .list-group-item:hover:not(.active) {
    background-color: var(--bs-tertiary-bg);
}

.folder-list .list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* akční ikonky složek jen při najetí (na dotykovém zařízení stále klikací) */
.folder-list .list-group-item .btn {
    opacity: 0;
    transition: opacity 0.15s;
}

.folder-list .list-group-item:hover .btn,
.folder-list .list-group-item:focus-within .btn {
    opacity: 0.6;
}

@media (pointer: coarse) {
    .folder-list .list-group-item .btn {
        opacity: 0.5;
    }
}

.message-list .list-group-item {
    cursor: pointer;
}

.message-list .list-group-item:hover:not(.active) {
    background-color: var(--bs-tertiary-bg);
}

/* nepřečtená = jen tučně s tečkou (podbarvení si nechává VYBRANÁ zpráva,
   aby se ty dva stavy nepletly) */
.message-list .unread {
    font-weight: bold;
}

.message-list .unread > a::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.message-list .list-group-item {
    position: relative;
}

/* otevřená zpráva */
.message-list .selected {
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.message-preview {
    min-height: 400px;
}

/* na mobilu ať panely nezabírají zbytečnou výšku */
@media (max-width: 767.98px) {
    .folder-list {
        min-height: 0;
        margin-bottom: 1rem;
    }

    .message-preview {
        min-height: 0;
        margin-top: 1rem;
    }
}