/* Selected message: full-width emphasis, including metadata and icon cells.
   Selection takes precedence over unread/flagged text colors for contrast. */
:root body.techvision-ui #messagelist tbody tr.selected.selected.selected > td,
:root body.techvision-ui #messagelist tbody tr.selected.selected.selected:hover > td {
    background: #174b8a !important;
    color: #ffffff !important;
    border-bottom-color: #123b70 !important;
}

:root body.techvision-ui #messagelist tbody tr.selected.selected.selected > td span,
:root body.techvision-ui #messagelist tbody tr.selected.selected.selected > td a {
    color: #ffffff !important;
}

:root body.techvision-ui #messagelist tbody tr.selected > td:first-child {
    box-shadow: inset 4px 0 0 #72d9ff !important;
}

:root body.techvision-ui #messagelist tbody tr.selected > td:last-child {
    box-shadow: inset -2px 0 0 #72d9ff !important;
}

/* Message state colors are independent of the selected accent palette. */
:root {
    --tv-mail-divider: #9aa8ba;
    --tv-mail-unread: #123b75;
    --tv-mail-flagged: #874000;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) {
    --tv-mail-divider: #748599;
    --tv-mail-unread: #91caff;
    --tv-mail-flagged: #ffd080;
}

/* Extra specificity intentionally overrides nested Elastic and dark-theme
   colors without altering column sizing, message bodies or read/flag state. */
:root body.techvision-ui #messagelist tbody tr > td {
    border-bottom: 2px solid var(--tv-mail-divider) !important;
}

:root body.techvision-ui #messagelist tbody tr.unread td.subject,
:root body.techvision-ui #messagelist tbody tr.unread td.subject span,
:root body.techvision-ui #messagelist tbody tr.unread td.subject a,
:root body.techvision-ui #messagelist tbody tr.unread td.fromto,
:root body.techvision-ui #messagelist tbody tr.unread td.fromto span {
    color: var(--tv-mail-unread) !important;
    font-weight: 700 !important;
}

/* Flagged takes color precedence; unread+flagged retains bold weight. */
:root body.techvision-ui #messagelist tbody tr.flagged td.subject,
:root body.techvision-ui #messagelist tbody tr.flagged td.subject span,
:root body.techvision-ui #messagelist tbody tr.flagged td.subject a,
:root body.techvision-ui #messagelist tbody tr.flagged td.fromto,
:root body.techvision-ui #messagelist tbody tr.flagged td.fromto span,
:root body.techvision-ui #messagelist tbody tr.flagged .flag span {
    color: var(--tv-mail-flagged) !important;
}

:root {
    --tv-primary: #0f6b8f;
    --tv-primary-dark: #0b526f;
    --tv-accent: #2e91b7;
    --tv-surface: #ffffff;
    --tv-soft: #f3f7fa;
    --tv-border: #ccd9e1;
    --tv-text: #17313f;
    --tv-muted: #627985;
    --tv-shadow: 0 8px 24px rgba(23, 49, 63, .10);
    --tv-pane-folders: #eef5f8;
    --tv-pane-list: #f8fafc;
    --tv-pane-content: #ffffff;
    --tv-pane-header: #e5eff4;
    --tv-row-one: #ffffff;
    --tv-row-two: #f2f7fa;
    --tv-row-divider: #cbd9e1;
    --tv-row-selected: #cfe8f3;
    --tv-row-hover: #e0f0f6;
    --tv-menu-start: #123846;
    --tv-menu-end: #0b2833;
    --tv-menu-text: #67d4ff;
    --tv-menu-active: #31525d;
    --tv-menu-border: #40616c;
}

:root[data-tv-theme="clean"] {
    --tv-primary: #4f46e5;
    --tv-primary-dark: #3730a3;
    --tv-accent: #7069ee;
    --tv-surface: #ffffff;
    --tv-soft: #f5f6fa;
    --tv-border: #d1d5e2;
    --tv-text: #202337;
    --tv-muted: #666b7e;
    --tv-pane-folders: #eef0f7;
    --tv-pane-list: #f8f8fc;
    --tv-pane-content: #ffffff;
    --tv-pane-header: #e5e7f1;
    --tv-row-one: #ffffff;
    --tv-row-two: #f3f3f9;
    --tv-row-divider: #d3d5e1;
    --tv-row-selected: #dddffc;
    --tv-row-hover: #e9e9fb;
    --tv-menu-start: #292b43;
    --tv-menu-end: #1e2033;
    --tv-menu-text: #c8c9ff;
    --tv-menu-active: #454865;
    --tv-menu-border: #555876;
}

:root[data-tv-theme="warm"] {
    --tv-primary: #4f7d68;
    --tv-primary-dark: #365947;
    --tv-accent: #79a58f;
    --tv-surface: #fdfefc;
    --tv-soft: #f4f7f2;
    --tv-border: #ccd8cf;
    --tv-text: #263a31;
    --tv-muted: #687a70;
    --tv-pane-folders: #edf3ee;
    --tv-pane-list: #f8faf7;
    --tv-pane-content: #fdfefc;
    --tv-pane-header: #e1ebe4;
    --tv-row-one: #fdfefc;
    --tv-row-two: #f0f5f1;
    --tv-row-divider: #cbd8cf;
    --tv-row-selected: #d2e7d9;
    --tv-row-hover: #e2eee6;
    --tv-menu-start: #294237;
    --tv-menu-end: #1d3229;
    --tv-menu-text: #c3ead5;
    --tv-menu-active: #456354;
    --tv-menu-border: #587667;
}

:root[data-tv-theme="apple"] {
    --tv-primary: #007aff;
    --tv-primary-dark: #0064d1;
    --tv-accent: #32ade6;
    --tv-surface: #ffffff;
    --tv-soft: #f5f5f7;
    --tv-border: #d2d2d7;
    --tv-text: #1d1d1f;
    --tv-muted: #6e6e73;
    --tv-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --tv-pane-folders: #f2f2f7;
    --tv-pane-list: #f9f9fb;
    --tv-pane-content: #ffffff;
    --tv-pane-header: #e9e9ee;
    --tv-row-one: #ffffff;
    --tv-row-two: #f5f5f7;
    --tv-row-divider: #d1d1d6;
    --tv-row-selected: #d8eaff;
    --tv-row-hover: #e8f2ff;
    --tv-menu-start: #f5f5f7;
    --tv-menu-end: #e7e7ec;
    --tv-menu-text: #1d1d1f;
    --tv-menu-active: #d8eaff;
    --tv-menu-border: #c7c7cc;
}

:root[data-tv-theme="graphite"] {
    --tv-primary: #636366;
    --tv-primary-dark: #48484a;
    --tv-accent: #8e8e93;
    --tv-surface: #ffffff;
    --tv-soft: #f2f2f4;
    --tv-border: #c7c7cc;
    --tv-text: #1c1c1e;
    --tv-muted: #636366;
    --tv-shadow: 0 10px 30px rgba(28, 28, 30, .12);
    --tv-pane-folders: #e9e9ed;
    --tv-pane-list: #f7f7f9;
    --tv-pane-content: #ffffff;
    --tv-pane-header: #dedee3;
    --tv-row-one: #ffffff;
    --tv-row-two: #f1f1f4;
    --tv-row-divider: #c7c7cc;
    --tv-row-selected: #d9d9de;
    --tv-row-hover: #e7e7eb;
    --tv-menu-start: #3a3a3c;
    --tv-menu-end: #2c2c2e;
    --tv-menu-text: #f2f2f7;
    --tv-menu-active: #56565a;
    --tv-menu-border: #636366;
}

:root[data-tv-theme="dark"] {
    --tv-primary: #4db6e5;
    --tv-primary-dark: #258dbb;
    --tv-accent: #65c7d0;
    --tv-surface: #17212b;
    --tv-soft: #0f171f;
    --tv-border: #3b4b59;
    --tv-text: #e6edf3;
    --tv-muted: #9fb0bd;
    --tv-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    --tv-pane-folders: #111b24;
    --tv-pane-list: #17222c;
    --tv-pane-content: #1b2630;
    --tv-pane-header: #0c141b;
    --tv-row-one: #18232d;
    --tv-row-two: #202d38;
    --tv-row-divider: #3b4b59;
    --tv-row-selected: #294a5b;
    --tv-row-hover: #243d4b;
    --tv-menu-start: #0b151e;
    --tv-menu-end: #070e14;
    --tv-menu-text: #8bdcff;
    --tv-menu-active: #243b49;
    --tv-menu-border: #395363;
}

:root[data-tv-theme="apple-dark"] {
    --tv-primary: #0a84ff;
    --tv-primary-dark: #0071e3;
    --tv-accent: #64d2ff;
    --tv-surface: #1c1c1e;
    --tv-soft: #000000;
    --tv-border: #48484a;
    --tv-text: #f5f5f7;
    --tv-muted: #aeaeb2;
    --tv-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    --tv-pane-folders: #141416;
    --tv-pane-list: #1c1c1e;
    --tv-pane-content: #242426;
    --tv-pane-header: #0d0d0f;
    --tv-row-one: #1c1c1e;
    --tv-row-two: #252527;
    --tv-row-divider: #48484a;
    --tv-row-selected: #173b60;
    --tv-row-hover: #26394d;
    --tv-menu-start: #000000;
    --tv-menu-end: #121214;
    --tv-menu-text: #f5f5f7;
    --tv-menu-active: #173b60;
    --tv-menu-border: #3a3a3c;
}

body.techvision-ui {
    color: var(--tv-text);
    background: var(--tv-soft);
}

.tv-theme-picker {
    position: fixed;
    top: .65rem;
    right: .75rem;
    z-index: 1000;
    font-size: .9rem;
}

.tv-theme-toggle,
.tv-theme-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--tv-text);
    background: var(--tv-surface);
    border: 1px solid var(--tv-border);
}

.tv-theme-toggle {
    min-height: 36px;
    padding: .4rem .75rem;
    border-radius: .65rem;
    box-shadow: var(--tv-shadow);
    cursor: pointer;
}

.tv-theme-dot,
.tv-theme-swatch {
    width: .9rem;
    height: .9rem;
    flex: 0 0 .9rem;
    border-radius: 50%;
    background: var(--tv-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tv-accent) 25%, transparent);
}

.tv-theme-menu {
    display: none;
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    width: 175px;
    padding: .35rem;
    border: 1px solid var(--tv-border);
    border-radius: .75rem;
    background: var(--tv-surface);
    box-shadow: var(--tv-shadow);
}

.tv-theme-picker.open .tv-theme-menu {
    display: block;
}

.tv-theme-option {
    width: 100%;
    padding: .55rem .65rem;
    border: 0;
    border-radius: .5rem;
    cursor: pointer;
    text-align: left;
}

.tv-theme-option:hover,
.tv-theme-option.selected {
    background: color-mix(in srgb, var(--tv-accent) 15%, var(--tv-surface));
}

.tv-theme-option.selected::after {
    content: '\2713';
    margin-left: auto;
    color: var(--tv-primary);
    font-weight: 700;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-sidebar,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-list,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-content,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .formcontent,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .scroller,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .footer,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .header,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui input,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui textarea,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui select {
    color: var(--tv-text) !important;
    background-color: var(--tv-surface) !important;
    border-color: var(--tv-border) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .listing li,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #message-header,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .message-part {
    color: var(--tv-text) !important;
    background: var(--tv-surface) !important;
    border-color: var(--tv-border) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist tr:nth-child(odd) td {
    color: var(--tv-text) !important;
    background: var(--tv-row-one) !important;
    border-color: var(--tv-row-divider) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist tr:nth-child(even) td {
    color: var(--tv-text) !important;
    background: var(--tv-row-two) !important;
    border-color: var(--tv-row-divider) !important;
}

/* Roundcube assigns colors to nested sender/subject spans. Override those
   nested values as well so dark themes always meet readable contrast. */
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist td,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist td span,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist td a,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-sidebar .listing a,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .toolbar a.button {
    color: var(--tv-text) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist .fromto,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist .date,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist .size {
    color: var(--tv-muted) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist .threads,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #messagelist .branch,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui a {
    color: var(--tv-accent) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .listing li:hover,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .messagelist tr:hover td {
    background: var(--tv-row-hover) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .listing li.selected,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui .messagelist tr.selected td {
    background: var(--tv-row-selected) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-sidebar {
    background: var(--tv-pane-folders) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-list {
    background: var(--tv-pane-list) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-content,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-content > .content,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-content > .scroller {
    background: var(--tv-pane-content) !important;
}

:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-sidebar > .header,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-list > .header,
:root:is([data-tv-theme="dark"], [data-tv-theme="apple-dark"]) body.techvision-ui #layout-content > .header {
    background: var(--tv-pane-header) !important;
}

body.techvision-ui #layout-menu {
    color: var(--tv-menu-text);
    background: linear-gradient(180deg, var(--tv-menu-start) 0%, var(--tv-menu-end) 100%);
    border-right: 1px solid var(--tv-menu-border);
    box-shadow: 4px 0 18px rgba(16, 42, 51, .16);
}

body.techvision-ui #layout-menu a,
body.techvision-ui #layout-menu a.button,
body.techvision-ui #layout-menu .inner,
body.techvision-ui #layout-menu .special-buttons a {
    color: var(--tv-menu-text) !important;
}

body.techvision-ui #layout-menu .selected,
body.techvision-ui #layout-menu a.selected,
body.techvision-ui #layout-menu .task-menu-button.selected,
body.techvision-ui #layout-menu a:hover {
    color: var(--tv-menu-text) !important;
    background-color: var(--tv-menu-active) !important;
}

body.techvision-ui #layout-menu .special-buttons {
    border-top: 1px solid var(--tv-menu-border);
}

body.techvision-ui #layout-menu a.logout {
    color: #ff5a5f !important;
}

body.techvision-ui #layout-menu .popover-header,
body.techvision-ui #layout-menu .special-buttons {
    background: transparent;
}

body.techvision-ui #layout-sidebar,
body.techvision-ui #layout-list,
body.techvision-ui #layout-content {
    border-color: var(--tv-border);
}

body.techvision-ui #layout-sidebar {
    background: var(--tv-pane-folders) !important;
}

body.techvision-ui #layout-list {
    background: var(--tv-pane-list) !important;
}

body.techvision-ui #layout-content,
body.techvision-ui #layout-content > .content,
body.techvision-ui #layout-content > .scroller {
    background: var(--tv-pane-content) !important;
}

body.techvision-ui #layout-sidebar > .header,
body.techvision-ui #layout-list > .header,
body.techvision-ui #layout-content > .header {
    background: var(--tv-pane-header) !important;
}

body.techvision-ui #layout-sidebar .listing li,
body.techvision-ui #layout-list .listing li {
    background-color: transparent;
}

/* Alternating message cards improve scanning while the themed divider keeps
   adjacent emails visually separate. */
body.techvision-ui #messagelist tr:nth-child(odd) td {
    background-color: var(--tv-row-one);
}

body.techvision-ui #messagelist tr:nth-child(even) td {
    background-color: var(--tv-row-two);
}

/* Desktop three-pane proportions. Inline widths saved by Elastic's native
   resizer take precedence over these defaults. */
@media screen and (min-width: 1025px) {
    body.techvision-conversations #layout-sidebar {
        width: 250px;
        min-width: 190px;
        max-width: 34vw;
        flex: none;
    }

    body.techvision-conversations #layout-list {
        width: 430px;
        min-width: 320px;
        max-width: 46vw;
        flex: none;
    }

    body.techvision-conversations #layout-content {
        min-width: 420px;
        flex: 1 1 auto;
    }

    body.techvision-conversations .column-resizer {
        right: -5px;
        width: 10px;
        z-index: 20;
    }

    body.techvision-conversations .column-resizer::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 3px;
        width: 4px;
        height: 46px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: #b9cbd4;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
        transition: background-color .15s ease, height .15s ease, box-shadow .15s ease;
    }

    body.techvision-conversations .column-resizer:hover::after,
    body.techvision-conversations .column-resizer.active::after {
        height: 66px;
        background: var(--tv-accent);
        box-shadow: 0 0 0 3px rgba(25, 182, 210, .18);
    }
}

body.techvision-ui .header,
body.techvision-ui .listbox .listitem.selected,
body.techvision-ui .listing li.selected,
body.techvision-ui .messagelist tr.selected td {
    background-color: var(--tv-row-selected);
}

body.techvision-ui .toolbar a.button:hover,
body.techvision-ui .menu a:hover,
body.techvision-ui .listing li:hover,
body.techvision-ui .messagelist tr:hover td {
    background-color: var(--tv-row-hover);
}

body.techvision-ui .btn-primary,
body.techvision-ui button.mainaction,
body.techvision-ui input.button.mainaction {
    background: linear-gradient(135deg, var(--tv-primary), var(--tv-accent));
    border-color: var(--tv-primary);
    box-shadow: 0 5px 14px rgba(8, 126, 164, .22);
}

body.techvision-ui .btn-primary:hover,
body.techvision-ui button.mainaction:hover,
body.techvision-ui input.button.mainaction:hover {
    background: linear-gradient(135deg, var(--tv-primary-dark), var(--tv-primary));
}

body.techvision-ui input.form-control,
body.techvision-ui textarea.form-control,
body.techvision-ui select.form-control,
body.techvision-ui .searchbar {
    border-color: var(--tv-border);
    border-radius: .65rem;
}

body.techvision-ui input.form-control:focus,
body.techvision-ui textarea.form-control:focus,
body.techvision-ui select.form-control:focus {
    border-color: var(--tv-accent);
    box-shadow: 0 0 0 .2rem rgba(25, 182, 210, .15);
}

/* Keep compose recipient suggestions readable. Roundcube's dark-mode menu
   text can otherwise be inherited while this customized layout is light. */
body.techvision-ui .ui-autocomplete.ui-menu,
body.techvision-ui .ui-autocomplete .ui-menu-item,
body.techvision-ui .ui-autocomplete .ui-menu-item-wrapper,
body.techvision-ui .ui-autocomplete .ui-menu-item-wrapper span,
body.techvision-ui .ui-autocomplete .fields,
body.techvision-ui .ui-autocomplete .field {
    color: var(--tv-text) !important;
}

body.techvision-ui .ui-autocomplete.ui-menu {
    background: #fff !important;
    border: 1px solid var(--tv-border) !important;
    box-shadow: var(--tv-shadow);
}

body.techvision-ui .ui-autocomplete .ui-state-active {
    color: #102a33 !important;
    background: #d9f1f7 !important;
}

body.techvision-conversations #messagelist tr td {
    border-bottom: 1px solid var(--tv-row-divider);
    transition: background-color .15s ease, box-shadow .15s ease;
}

body.techvision-conversations #messagelist tr.selected td:first-child {
    box-shadow: inset 4px 0 0 var(--tv-primary);
}

body.techvision-conversations #messagelist .threads,
body.techvision-conversations #messagelist .branch {
    color: var(--tv-primary);
    cursor: pointer;
}

body.techvision-ui #message-header,
body.techvision-ui .message-part,
body.techvision-ui .attachmentslist {
    border-color: var(--tv-border);
}

body.techvision-ui #message-header {
    background: linear-gradient(180deg, #fff, #f8fbfc);
}

body.techvision-ui .attachmentslist li,
body.techvision-ui .attachment span {
    border-radius: 999px;
}

body.techvision-ui .quota-widget .bar {
    background: linear-gradient(90deg, var(--tv-primary), var(--tv-accent));
}

body.task-login.techvision-ui #layout-content {
    border-radius: 1rem;
    box-shadow: var(--tv-shadow);
}

@media screen and (min-width: 769px) {
    body.techvision-ui #layout-sidebar,
    body.techvision-ui #layout-list,
    body.techvision-ui #layout-content {
        box-shadow: 0 0 0 1px rgba(220, 230, 236, .55);
    }
}

@media screen and (max-width: 768px) {
    body.techvision-ui .toolbar a.button {
        min-width: 2.75rem;
    }

    body.techvision-conversations #messagelist tr td {
        min-height: 3.3rem;
    }
}