/*
 * 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;
    }
}

/* Seznam má vlastní posuvník, ať složky i detail zůstanou na očích.
   Na mobilu ne — tam je panel sám na obrazovce a vnořený posuvník by
   jen bránil došmýkat na stránkovač (mobilní větev níž). */
.message-list {
    max-height: 600px;
    overflow-y: auto;
}

.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;
}

/* dlouhá adresa schránky se na úzké obrazovce zalomí, ne přeteče */
.webmail-title {
    overflow-wrap: anywhere;
}

/* ── Mobil: tři panely vedle sebe se nevejdou ─────────────────────────────
   Pod 768 px je vidět právě JEDEN panel (složky / seznam / zpráva)
   a střídá je výběr — týž vzor jako okno ourChatu (`body.chat-otevreno`).
   Do 9/2026 se panely jen poskládaly pod sebe: otevřená zpráva skončila
   pod celým seznamem, mimo obrazovku, a vypadalo to, že se klik neudál.
   Atribut `data-pane` drží controller webmail--app; nad 768 px se
   neuplatní, tam platí mřížka col-md-*. */
@media (max-width: 767.98px) {
    .folder-list {
        min-height: 0;
        margin-bottom: 1rem;
    }

    .message-preview {
        min-height: 0;
    }

    /* celou stránkou, ne vnořeným posuvníkem */
    .message-list {
        max-height: none;
        overflow-y: visible;
    }

    .webmail-title {
        font-size: 1.25rem;
    }

    [data-pane='list'] .webmail-pane-folders,
    [data-pane='list'] .webmail-pane-message,
    [data-pane='folders'] .webmail-pane-list,
    [data-pane='folders'] .webmail-pane-message,
    [data-pane='message'] .webmail-pane-folders,
    [data-pane='message'] .webmail-pane-list {
        display: none;
    }
}