/* templates/style.css */

/* --- 1. LIGHT MODE (Default) --- */
:root {
    --brand-color: #00d1b2;
}

.mail-item {
    border: 1px solid #ccc;
    margin: 15px 0;
    border-radius: 8px;
    background: #f9f9f9;
    overflow: hidden; /* Keeps the hover effect inside rounded corners */
}

/* The clickable title bar */
.mail-summary {
    padding: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.mail-summary:hover {
    background: #f0f0f0;
    border-bottom: 1px solid #eee;
}

.mail-header strong {
    color: #333;
    font-size: 1.1em;
}

.mail-body {
    display: none;
    padding: 15px; /* Padding inside the body area */
    white-space: pre-wrap;
    font-family: monospace;
    cursor: text;
    user-select: text;
    background: #fff; /* Slight contrast for the reading area */
}

.mail-item.expanded .mail-body {
    display: block;
}

/* --- 2. AUTO DARK MODE (System Trigger) --- */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

    h1, h2, h3, p, span, small {
        color: #ffffff !important;
    }

    .mail-item {
        background: #1a1a1a !important;
        border-color: #333 !important;
    }

    .mail-summary:hover {
        background: #252525 !important;
    }

    .mail-header strong {
        color: var(--brand-color) !important;
    }

    .mail-body {
        background: #1a1a1a !important;
        border-top: 1px solid #333 !important;
        color: #cfcfcf !important;
    }
}

/* Add to the bottom of style.css */
button {
    background-color: var(--brand-color) !important;
    color: #fff !important;
    cursor: pointer !important;
    border: none !important;
    padding: 10px 20px !important;
}

button:hover {
    filter: brightness(1.1);
}

input[type="text"] {
    background: #fff;
    color: #000;
    border: 1px solid #ccc !important;
}

@media (prefers-color-scheme: dark) {
    input[type="text"] {
        background: #222 !important;
        color: #fff !important;
        border: 1px solid #444 !important;
    }
}