/* ═══════════════════════════════════════════════════════════════════
   Unsuspicious.org Brand Theme for Roundcube - Clean & Legible
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --brand-primary: #3730a3;      /* Unsuspicious Purple */
    --brand-secondary: #1f2937;    /* Midnight Express */
    --brand-muted: #6b7280;        /* Raven */
    --brand-bg-main: #ffffff;      /* Pure White */
    --brand-bg-subtle: #f8fafc;    /* Dynamic Light */
    --brand-accent: #54005b;       /* Formal Purple */
    --brand-success: #10b981;      /* Success Green */
    --brand-danger: #ef4444;       /* Alert Red */
    --brand-border: #e5e7eb;       /* Border Gray */
}

/* ═══════════════════════════════════════════════════════════════════
   CORE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

body {
    --color-main: var(--brand-primary) !important;
    --color-black: var(--brand-secondary) !important;
    --color-font: var(--brand-secondary) !important; /* Darker for legibility */
    --color-link: var(--brand-primary) !important;
    --color-link-hover: var(--brand-accent) !important;
    --color-success: var(--brand-success) !important;
    --color-error: var(--brand-danger) !important;
    background: var(--brand-bg-main) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN PAGE - Clean & Sharp
   ═══════════════════════════════════════════════════════════════════ */

.task-login #layout-content {
    background: var(--brand-bg-subtle) !important; /* Flat background */
}

.task-login #login-form {
    background: var(--brand-bg-main) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important; /* Removed shadow */
    padding: 3rem !important;
    max-width: 400px !important;
}

.task-login #logo {
    max-width: 280px !important; /* Increased from 150px */
    margin: 0 auto 2rem !important;
    filter: none !important; /* Removed drop shadow */
}

.task-login h1.voice {
    color: var(--brand-secondary) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER & NAVIGATION - Solid Colors
   ═══════════════════════════════════════════════════════════════════ */

#layout > .header,
.header-title {
    background: var(--brand-primary) !important; /* Solid color, no gradient */
    color: var(--brand-bg-main) !important;
    border-bottom: 1px solid var(--brand-accent) !important;
    box-shadow: none !important;
}

#logo img {
    filter: brightness(0) invert(1);
}

.menu.toolbar a.button {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
}

.menu.toolbar a.button:hover,
.menu.toolbar a.button.selected {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS - Flat & High Contrast
   ═══════════════════════════════════════════════════════════════════ */

button.btn-primary,
.button.btn-primary,
a.button.primary,
input[type="submit"].btn-primary,
.formbuttons .button.submit {
    background: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

button.btn-primary:hover,
.button.btn-primary:hover,
a.button.primary:hover,
.formbuttons .button.submit:hover {
    background: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
}

button.btn-secondary,
.button.btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--brand-border) !important;
    color: var(--brand-secondary) !important;
    border-radius: 6px !important;
}

button.btn-secondary:hover {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR & LISTS - High Legibility
   ═══════════════════════════════════════════════════════════════════ */

#layout-sidebar,
.sidebar {
    background: var(--brand-bg-subtle) !important;
    border-right: 1px solid var(--brand-border) !important;
}

.listing li,
#mailboxlist li {
    border-radius: 6px !important;
    margin: 2px 8px !important;
}

.listing li.selected,
.listing li.selected > a,
#mailboxlist li.selected,
#mailboxlist li.selected > a {
    background: #e0e7ff !important; /* Light purple, flat */
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
}

.listing .unreadcount {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MAIL LIST - Clear Separation
   ═══════════════════════════════════════════════════════════════════ */

#messagelist tr,
.listing.messages tr {
    border-bottom: 1px solid var(--brand-border) !important;
}

#messagelist tr:hover,
.listing.messages tr:hover {
    background: var(--brand-bg-subtle) !important;
}

#messagelist tr.selected td,
.listing.messages tr.selected td {
    background: #e0e7ff !important;
    color: var(--brand-primary) !important;
}

#messagelist tr.unread .subject {
    font-weight: 700 !important;
    color: var(--brand-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS - Defined & Accessible
   ═══════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    border: 1px solid var(--brand-border) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    color: var(--brand-secondary) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    caret-color: var(--brand-secondary) !important;
}

/* Fix for compose body textarea to prevent layout issues */
#composebody {
    height: 100% !important;
    min-height: 400px !important;
    width: 100% !important;
    resize: vertical !important;
    /* Removed display: block !important to prevent conflict with TinyMCE */
    color: #1f2937 !important;
    background-color: #ffffff !important;
    caret-color: #1f2937 !important;
    padding: 15px !important; /* Added padding to prevent text overlapping top bar */
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* Ensure container allows height expansion */
#composebodycontainer {
    height: auto !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix for HTML editor if active */
.tox-tinymce {
    min-height: 400px !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 4px !important;
}

/* Ensure text inside TinyMCE iframe matches theme (this might need to be injected via JS/PHP separately, but let's try) */
.mce-content-body {
    color: #1f2937 !important;
    background-color: #ffffff !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-primary) !important;
    outline: 2px solid rgba(55, 48, 163, 0.2) !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MODALS & ALERTS - No Gradients
   ═══════════════════════════════════════════════════════════════════ */

.ui-dialog {
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.ui-dialog-titlebar {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem !important;
}

.boxinformation,
.ui-alert-info {
    background: #e0e7ff !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
}

.boxsuccess,
.ui-alert-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #10b981 !important;
}

.boxerror,
.ui-alert-error {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #ef4444 !important;
}