/* ==============================================================
   Mail — Gmail, règles d'automatisation, tri automatique
   Extrait de style_forms.css.
   ============================================================== */

/* ── Mail controls ─────────────────────────────────────────────────────────── */
.mail-label-select {
    background-color: transparent;
    padding: 10px 40px 10px 14px;
    border-radius: var(--radius-btn);
    font-size: 14px;
    outline: none;
    transition: border-color 0.25s, background-color 0.25s;
    background-position: right 12px center;
    background-size: 18px;
}

/* Fond et couleur des options : voir « Options des listes déroulantes »
   dans style_tokens.css */

.mail-label-select:hover,
.mail-label-select:focus {
    border-color: var(--color-primary);
    background-color: rgba(var(--rgb-primary-btn), 0.15);
}

.mail-search-input {
    background-color: transparent;
    transition: border-color 0.25s, background-color 0.25s;
}

.mail-search-input::placeholder {
    color: rgba(var(--rgb-white), 0.45);
}

.mail-search-input:focus {
    border-color: var(--color-primary);
    background-color: rgba(var(--rgb-primary-btn), 0.1);
}

/* ==================== AUTOMATISATION PANEL ==================== */

.gmail-automatisation {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1rem 0;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.automatisation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.automatisation-header h2 {
    color: var(--color-text);
    font-size: 1.1rem;
    margin: 0;
}

.automatisation-desc {
    color: rgba(var(--rgb-white), 0.55);
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
}

/* Fond, bordure, curseur : .btn-icon dans style_tokens.css */
.auto-close-btn {
    color: rgba(var(--rgb-white), 0.6);
    font-size: 1.1rem;
    padding: 0.2rem 0.5rem;
}

.auto-close-btn:hover {
    color: var(--color-text);
}

.auto-rules-list {
    margin-bottom: 1.25rem;
}

.auto-no-rules {
    color: rgba(var(--rgb-white), 0.4);
    font-size: 0.85rem;
    margin: 0;
}

.auto-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--rgb-primary-btn), 0.1);
    border: 1px solid rgba(var(--rgb-primary-btn), 0.35);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.5rem;
}

.auto-rule-desc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: rgba(var(--rgb-white), 0.85);
    font-size: 0.85rem;
}

.auto-rule-cond,
.auto-rule-action { color: rgba(var(--rgb-white), 0.75); }
.auto-rule-arrow { color: rgba(var(--rgb-primary-btn), 0.9); font-weight: bold; }

.auto-rule-delete {
    background: transparent;
    border: 1px solid rgba(var(--rgb-danger), 0.5);
    border-radius: var(--radius-sm);
    color: rgba(var(--rgb-danger), 0.8);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.auto-rule-delete:hover {
    background: rgba(var(--rgb-danger), 0.15);
    color: var(--color-danger-light);
    border-color: var(--color-danger-light);
}

.auto-rule-form {
    border-top: 1px solid rgba(var(--rgb-primary-btn), 0.3);
    padding-top: 1rem;
}

/* Casse et couleur : .section-label dans style_tokens.css */
.auto-rule-form h3 {
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
    font-weight: normal;
}

.auto-rule-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.auto-rule-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 160px;
}

/* Casse et couleur : .section-label dans style_tokens.css */
.auto-rule-field label {
    font-size: 0.75rem;
}

/* Mail items matching an automation rule highlighted */
.mail-auto-matched {
    border-left: 3px solid rgba(var(--rgb-primary-btn), 0.8) !important;
}

/* Apply rules bar */
.auto-apply-bar {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-top: 1px solid rgba(var(--rgb-primary-btn), 0.3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.auto-apply-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auto-apply-result {
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    flex: 1;
    min-width: 200px;
}

.auto-apply-ok {
    background: rgba(var(--rgb-success), 0.12);
    border: 1px solid rgba(var(--rgb-success), 0.4);
    color: var(--color-success);
}

.auto-apply-info {
    background: rgba(var(--rgb-primary-btn), 0.1);
    border: 1px solid rgba(var(--rgb-primary-btn), 0.35);
    color: rgba(var(--rgb-white), 0.7);
}

.auto-apply-warn {
    background: rgba(var(--rgb-warning), 0.1);
    border: 1px solid rgba(var(--rgb-warning), 0.35);
    color: var(--color-warning);
}

.auto-apply-error {
    background: rgba(var(--rgb-danger), 0.1);
    border: 1px solid rgba(var(--rgb-danger), 0.35);
    color: var(--color-danger);
}

.auto-apply-result a {
    color: var(--color-info-light);
    text-decoration: underline;
}

/* Gmail */

.mail-header, div#mail-list {
    width: 100%;
    background-color: var(--color-bg);
    padding: 15px;
    color: var(--color-text);
}

.mail-item-top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--color-text-muted);
}

.mail-item.mail-unread {
    border-bottom: 1px solid var(--color-text);
    margin-bottom: 15px;
}

.mail-snippet {
    margin-bottom: 15px;
}

.mail-subject {
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}

/* Toggle "Récents" */
.mail-recent-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--color-border-medium);
}
/* Toggle compact — piste, pouce, couleurs et état activé : voir
   « Interrupteur » dans style_tokens.css. Seules les dimensions
   restent ici. */
.mail-recent-toggle-track {
    position: relative;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
}
.mail-recent-toggle-thumb {
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
}
.mail-recent-toggle-label input:checked + .mail-recent-toggle-track .mail-recent-toggle-thumb {
    left: 18px;
}

select#mail-label-select,
select#mail-provider-select {
    width: 200px;
}

input#mail-search-input {
    width: 175px;
}

/* ==================== TRI AUTOMATIQUE (MODAL) ==================== */

/* Position et centrage : .modal-overlay dans style_tokens.css */
.auto-sort-modal {
    background: var(--color-overlay);
    display: flex;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.auto-sort-inner {
    background: var(--color-bg);
    border: 1px solid rgba(var(--rgb-primary-btn), 0.6);
    border-radius: var(--radius-modal);
    padding: 1.75rem 2rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideDown 0.2s ease;
    box-shadow: 0 8px 32px rgba(var(--rgb-black), 0.5);
}

.auto-sort-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.auto-sort-header h2 {
    color: var(--color-text);
    font-size: 1.15rem;
    margin: 0;
}

.auto-sort-options {
    background: rgba(var(--rgb-primary-btn), 0.08);
    border: 1px solid rgba(var(--rgb-primary-btn), 0.25);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Casse et couleur : .section-label dans style_tokens.css */
.auto-sort-options label {
    font-size: 0.78rem;
}

.auto-sort-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}

.auto-sort-number-input {
    background: var(--color-white-08);
    border: 1px solid rgba(var(--rgb-primary-btn), 0.5);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.95rem;
    padding: 5px 10px;
    width: 70px;
    text-align: center;
    outline: none;
}

.auto-sort-number-input:focus {
    border-color: var(--color-primary);
}

.auto-sort-option-desc {
    color: var(--color-white-50);
    font-size: 0.82rem;
}

.auto-sort-result {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

div#auto-sort-result {
    margin-top: 10px;
}

.auto-sort-rows {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 220px;
    overflow-y: auto;
}

.auto-sort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: var(--color-white-05);
    border-radius: var(--radius-small);
    gap: 1rem;
    font-size: 0.82rem;
}

/* Troncature : .text-ellipsis dans style_tokens.css */
.auto-sort-sender {
    color: rgba(var(--rgb-white), 0.8);
    flex: 1;
}

.auto-sort-count {
    color: rgba(var(--rgb-white), 0.55);
    white-space: nowrap;
    flex-shrink: 0;
}

.auto-sort-count em {
    color: var(--color-info-light);
    font-style: normal;
}

.auto-sort-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(var(--rgb-white), 0.75);
    font-size: 0.88rem;
    cursor: pointer;
    margin: 0.75rem 0 0.6rem 0;
    user-select: none;
}

/* Taille, curseur et accent : .checkbox-std dans style_tokens.css */

.auto-sort-btn-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

@media screen and (max-width: 600px) {
    .auto-sort-inner {
        margin: 1rem;
        padding: 1.25rem;
    }
}

div#mail-unauthorized {
    margin-top: 15px;
}