/* =========================================================================
   Coque commune du dashboard (menu latéral) — maquette « 1 · קו ישר » choisie le 22/10/2026
   Fichier autonome : classes préfixées sh-, couleurs tirées des variables du dashboard
   (mode sombre compris). Rendu par js/shell.js.
   ========================================================================= */
.sh-app, .sh-side, .sh-tabbar, .sh-sheet, .set-list {
    --sh-accent: var(--primary, #2563eb);
    --sh-accent-soft: rgba(37, 99, 235, .10);
}
.sh-app {
    --sh-side: 260px;
    display: grid;
    grid-template-columns: var(--sh-side) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bg-secondary, #f8fafc);
}
.sh-app > #app { min-width: 0; }

.sh-side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    border-inline-end: 1px solid var(--border-color, #e2e8f0);
    padding: 18px 14px 14px;
}
.sh-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 8px 16px;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text-primary, #0f172a);
    text-decoration: none;
}
.sh-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--sh-accent);
    color: #fff;
    font-size: 17px;
}
.sh-compose {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0 0 6px;
    border-radius: 10px;
    background: var(--sh-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.sh-compose:hover { filter: brightness(.94); }
.sh-nav {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
}
.sh-group {
    padding: 16px 10px 6px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}
.sh-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #475569);
    font: inherit;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sh-link:hover { background: var(--bg-tertiary, #f1f5f9); }
.sh-link.on { background: var(--sh-accent-soft); color: var(--sh-accent); }
.sh-link .sh-e { width: 22px; text-align: center; font-size: 17px; }
.sh-link:focus-visible,
.sh-compose:focus-visible,
.sh-tab:focus-visible { outline: 2.5px solid var(--sh-accent); outline-offset: 2px; }

.sh-me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
}
.sh-av {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sh-accent-soft);
    color: var(--sh-accent);
    font-weight: 600;
    font-size: .92rem;
}
.sh-who { flex: 1; min-width: 0; line-height: 1.25; }
.sh-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
}
.sh-tel { display: block; font-size: .86rem; color: var(--text-muted, #64748b); direction: ltr; text-align: start; }
.sh-out {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 16px;
}
.sh-out:hover { background: var(--bg-tertiary, #f1f5f9); color: var(--text-primary, #0f172a); }

/* La barre de retour devient inutile : le menu est toujours là. */
.sh-app .settings-header .back-btn { display: none; }

/* Mobile : barre d'onglets en bas + feuille « עוד » */
.sh-tabbar, .sh-sheet, .sh-scrim { display: none; }
@media (max-width: 860px) {
    .sh-app { display: block; padding-bottom: 84px; }
    .sh-side { display: none; }
    .sh-tabbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 200;
        background: var(--bg-primary, #fff);
        border-top: 1px solid var(--border-color, #e2e8f0);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    }
    .sh-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        min-height: 48px;
        padding: 5px 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--text-muted, #64748b);
        font: inherit;
        font-size: .74rem;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
    }
    .sh-tab .sh-e { font-size: 20px; line-height: 1.2; }
    .sh-tab.on { background: var(--sh-accent-soft); color: var(--sh-accent); }
    .sh-scrim { position: fixed; inset: 0; z-index: 210; background: rgba(15, 23, 42, .4); }
    .sh-scrim.open { display: block; }
    .sh-sheet {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 220;
        padding: 14px 16px calc(84px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        background: var(--bg-primary, #fff);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
    }
    .sh-sheet.open { display: block; }
    .sh-sheet .sh-link { min-height: 50px; color: var(--text-primary, #0f172a); }
}
@media (prefers-reduced-motion: reduce) { .sh-link { transition: none; } }

/* ===== Liste des rubriques + détail (maquette 1), page Réglages ===== */
.set-md { display: block; }
@media (min-width: 981px) {
    .set-md {
        display: grid;
        grid-template-columns: 310px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
        padding: 20px 24px 60px;
    }
    .set-md > .settings-container { max-width: 920px; margin: 0; padding: 0; }
    .set-md .key-crumb-back { display: none; }
    .set-list {
        position: sticky;
        top: 76px;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        padding: 10px;
        background: var(--bg-primary, #fff);
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 16px;
    }
}
@media (max-width: 980px) { .set-list { display: none; } }
.set-list-group {
    padding: 14px 10px 5px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}
.set-list-group:first-child { padding-top: 6px; }
.set-list-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text-primary, #0f172a);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background .15s;
}
.set-list-item:hover { background: var(--bg-tertiary, #f1f5f9); }
.set-list-item.on { background: var(--sh-accent-soft, rgba(37, 99, 235, .1)); color: var(--sh-accent, #2563eb); }
.set-list-item:focus-visible { outline: 2.5px solid var(--sh-accent, #2563eb); outline-offset: 2px; }
.set-list-icon { width: 26px; text-align: center; font-size: 19px; flex: none; }
.set-list-title { flex: 1; min-width: 0; font-weight: 500; }
.set-list-key {
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #475569);
    font-size: .78rem;
    font-weight: 500;
    unicode-bidi: isolate;
}

/* ===== Page index.html : le menu est un enfant du conteneur flex .dashboard ===== */
.sh-cnt {
    margin-inline-start: auto;
    min-width: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--sh-accent, #2563eb);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}
.sh-tab .sh-cnt { position: absolute; margin: 0; transform: translate(14px, -6px); min-width: 18px; line-height: 18px; padding: 0 5px; font-size: .68rem; }
.sh-tab { position: relative; }
.dashboard > .sh-side { flex: none; width: 260px; }
.dashboard > .main-content, [dir="ltr"] .dashboard > .main-content { margin-right: 0; margin-left: 0; min-width: 0; }
body.has-shell .mobile-menu-btn { display: none !important; }
@media (max-width: 860px) {
    .dashboard > .sh-side { display: none; }
    body.has-shell .dashboard { padding-bottom: 84px; }
}

/* ===== Contenu aligné contre le menu (maquette 1), au lieu de flotter au centre ===== */
body.has-shell .main-content .view-pane,
body.has-shell .main-content .mail-list { margin-inline: 24px auto; width: calc(100% - 48px); }
body.has-shell .header-compose { display: none; }
@media (max-width: 860px) {
    body.has-shell .main-content .view-pane,
    body.has-shell .main-content .mail-list { margin-inline: 12px; width: auto; }
}

/* Ligne de fichier : la grille implicite prenait la largeur du plus long nom (nowrap) et
   débordait sur téléphone (mesure 22/10 : 250 px de défilement horizontal à 390 px). */
.cloud-files { grid-template-columns: minmax(0, 1fr); }