/* AI Mailer — global brand layer.
 *
 * Loaded on every Roundcube page via the plugin's render_page hook. Sits on
 * top of Elastic's stylesheet, overrides only what we want to re-brand. Uses
 * !important sparingly because Elastic specificity is high.
 */

:root {
    --aim-accent: #6366f1;
    --aim-accent-2: #22d3ee;
    --aim-accent-soft: #eef2ff;
    --aim-ink: #0f172a;
    --aim-muted: #64748b;
}

/* ---------- Login ---------- */

body.task-login #layout-content,
body.task-login #login-form {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

body.task-login #logo {
    width: 240px;
    height: auto;
    margin-bottom: 0.75rem;
}

body.task-login #login-form {
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

body.task-login #login-footer {
    color: var(--aim-muted);
    font-size: 0.85rem;
}

body.task-login #login-footer a.support-link {
    color: var(--aim-accent);
}

/* ---------- Top bar / taskbar ---------- */

#layout-menu,
.menu .listing,
#taskmenu {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%) !important;
}

#taskmenu a.button,
#taskmenu a {
    color: #cbd5e1 !important;
}

#taskmenu a.button:hover,
#taskmenu a.button.selected,
#taskmenu a.selected {
    color: #fff !important;
    background: rgba(99, 102, 241, 0.18) !important;
}

#taskmenu a.button.selected::before,
#taskmenu a.selected::before {
    color: var(--aim-accent-2) !important;
}

/* Logo slot in the top-left corner */
#topline #logo,
.minimal #logo,
#taskbar .logo,
#layout-menu .logo {
    background: transparent !important;
}

/* Hide "Roundcube" text labels that bleed through in some Elastic spots */
.support-link .copyright-text,
#about-content .credits .roundcube-mark {
    display: none !important;
}

/* ---------- Buttons / accents ---------- */

button.btn.btn-primary,
input.button.mainaction,
a.button.mainaction,
button.mainaction {
    background-color: var(--aim-accent) !important;
    border-color: var(--aim-accent) !important;
    color: #fff !important;
}

button.btn.btn-primary:hover,
input.button.mainaction:hover,
a.button.mainaction:hover,
button.mainaction:hover {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

a, .listing tr.selected td a {
    color: var(--aim-accent);
}

/* ---------- Selected list rows ---------- */

.listing.selectable tbody tr.selected,
.listing tr.selected,
.listing tr.focused.selected {
    background: var(--aim-accent-soft) !important;
}

.listing.selectable tbody tr.selected td,
.listing tr.selected td {
    color: var(--aim-ink);
}

/* ---------- Footer attribution (subtle) ---------- */

#layout-content::after {
    content: "";
}

/* ---------- Dark mode ---------- */

@media (prefers-color-scheme: dark) {
    :root {
        --aim-accent-soft: rgba(99, 102, 241, 0.18);
    }
    body.task-login #layout-content,
    body.task-login #login-form {
        background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
    }
}

/* ---------- Compose / message view tweaks ---------- */

#compose-content,
.compose-form .formcontent {
    border-top: 3px solid var(--aim-accent);
}

/* ---------- AI Reply integration polish (re-uses our existing classes) */

.ethia-ai-reply__bar,
.ethia-ai-reply__actions {
    border-color: var(--aim-accent-soft) !important;
}