/**
 * GTS Webmail theme – Gmail-style (Material) look on top of the Elastic skin.
 *
 * Layout: light page background, a borderless rail with pill highlights,
 * folder list with right-rounded pills, and the message list / reading pane
 * as rounded white cards.
 *
 * Selectors start with "html:not(._)" so they outrank Elastic's own
 * "html.dark-mode ..." rules in both light and dark mode; colors then come
 * from the variables below.
 */

:root {
    --gts-bg: #f6f6fc;
    --gts-surface: #ffffff;
    --gts-surface-read: #f4f3fc;
    --gts-border: #e1e5ea;
    --gts-divider: rgba(100, 121, 143, .14);
    --gts-text: #1f1f1f;
    --gts-text-muted: #5f6368;
    --gts-icon: #444746;
    --gts-hover: rgba(68, 71, 70, .08);

    --gts-primary: #6247cc;
    --gts-primary-hover: #5338b0;
    --gts-on-primary: #ffffff;
    --gts-focus-ring: rgba(98, 71, 204, .25);
    --gts-gradient: linear-gradient(90deg, #3498db, #8e44ad);

    --gts-nav-active: #e6e1fb;
    --gts-nav-active-text: #2b1f6b;
    --gts-row-selected: #dcd5fa;
    --gts-compose: #e6e1fb;
    --gts-compose-hover: #d9d2f8;
    --gts-compose-text: #2b1f6b;
    --gts-search: #eeecfa;

    --gts-danger: #b3261e;
    --gts-radius: 8px;
    --gts-radius-card: 16px;
    --gts-radius-pill: 999px;
    --gts-shadow-row: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    --gts-shadow-raised: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    --gts-shadow-lg: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
    --gts-login-card: #f0f0f0;
    --gts-login-line: #adadad;
    --gts-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html.dark-mode {
    --gts-login-card: #1e1f22;
    --gts-login-line: #5f6368;
    --gts-bg: #111214;
    --gts-surface: #1e1f20;
    --gts-surface-read: #1a1b1c;
    --gts-border: #303134;
    --gts-divider: rgba(255, 255, 255, .08);
    --gts-text: #e3e3e3;
    --gts-text-muted: #a8abaf;
    --gts-icon: #c4c7c5;
    --gts-hover: rgba(227, 227, 227, .08);

    --gts-primary: #b9adf6;
    --gts-primary-hover: #d6cefb;
    --gts-on-primary: #241a5c;
    --gts-focus-ring: rgba(185, 173, 246, .3);

    --gts-nav-active: #3b3172;
    --gts-nav-active-text: #e4dffd;
    --gts-row-selected: #2e2856;
    --gts-compose: #3b3172;
    --gts-compose-hover: #463b85;
    --gts-compose-text: #e4dffd;
    --gts-search: #282a2c;

    --gts-danger: #f2b8b5;
    --gts-shadow-row: inset 1px 0 0 #3c4043, inset -1px 0 0 #3c4043, 0 1px 3px 0 rgba(0, 0, 0, .6);
    --gts-shadow-raised: 0 1px 3px 0 rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .3);
    --gts-shadow-lg: 0 4px 8px 3px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .6);
}

html:not(._) body {
    font-family: var(--gts-font);
    color: var(--gts-text);
    background: var(--gts-bg);
    -webkit-font-smoothing: antialiased;
}

/* Framed pages (message preview, settings forms) sit inside a white card. */
html:not(._).iframe body {
    background: var(--gts-surface);
}

/* ------------------------------------------------------------------ */
/* Login                                                              */
/* ------------------------------------------------------------------ */
/*
 * A single card on a slowly shifting blue → purple gradient, with underline
 * inputs and a gradient button. Same look as the admin panel's login.
 */

@keyframes gts-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gts-rise-in {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes gts-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -40px); }
}

html:not(._) body.task-login {
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(120deg, #3498db, #5b6fd6, #8e44ad, #5b6fd6, #3498db);
    background-size: 300% 300%;
    animation: gts-gradient-shift 18s ease-in-out infinite;
}

/* Two soft light blobs drifting behind the card. */
html:not(._) body.task-login::before,
html:not(._) body.task-login::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    filter: blur(60px);
    pointer-events: none;
    animation: gts-float 14s ease-in-out infinite;
}

html:not(._) body.task-login::before {
    top: -8rem;
    left: -6rem;
}

html:not(._) body.task-login::after {
    right: -8rem;
    bottom: -10rem;
    animation-delay: -7s;
}

html:not(._) .task-login #layout {
    position: relative;
    z-index: 1;
}

html:not(._) .task-login #layout-content {
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 100vh;
    padding: 2rem 1rem 4.5rem;
}

/* Company credit at the bottom of the page (added by gts_theme.php). */
html:not(._) .gts-login-copyright {
    margin: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    color: rgba(255, 255, 255, .8);
    font-size: .8rem;
    letter-spacing: .03em;
    text-align: center;
}

html:not(._) #logo {
    opacity: 1;
}

html:not(._) .task-login #logo {
    top: 0;
    max-height: 56px;
    margin-bottom: 1.75rem;
    animation: gts-rise-in .6s ease-out both;
}

html:not(._) #login-form {
    top: 0;
    width: 100%;
    max-width: 450px;
    padding: 3.25rem 3rem 2.5rem;
    background: var(--gts-login-card);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(30, 20, 80, .45);
    animation: gts-rise-in .7s .1s cubic-bezier(.2, .8, .2, 1) both;
}

html:not(._) .gts-login-heading {
    margin-bottom: 2.25rem;
    text-align: center;
}

html:not(._) .gts-login-heading h1 {
    margin: 0;
    color: var(--gts-text);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

html:not(._) .gts-login-heading p {
    margin: .4rem 0 0;
    color: var(--gts-text-muted);
    font-size: .9rem;
}

html:not(._) #login-form td.title {
    display: none;
}

/* Underline inputs: grey line, a blue → purple line grows in on focus. */
html:not(._) #login-form .input-group {
    margin-bottom: 1.6rem;
}

html:not(._) #login-form .input-group-text {
    display: none;
}

html:not(._) #login-form .form-control {
    height: 3rem;
    padding: .5rem .4rem;
    border: 0;
    border-bottom: 2px solid var(--gts-login-line);
    border-radius: 0;
    background:
        linear-gradient(90deg, #3498db, #8e44ad) no-repeat bottom left / 0 2px,
        transparent;
    color: var(--gts-text);
    font-size: 1.05rem;
    transition: background-size .35s ease, border-color .35s ease;
}

html:not(._) #login-form .form-control::placeholder {
    color: var(--gts-text-muted);
    opacity: .8;
}

html:not(._) #login-form .form-control:focus {
    border-bottom-color: transparent;
    background-size: 100% 2px, auto;
    box-shadow: none;
}

html:not(._) #login-form .formbuttons {
    margin-top: 2rem;
}

html:not(._) #rcmloginsubmit {
    width: 100%;
    height: 3.25rem;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #3498db, #8e44ad, #3498db);
    background-size: 200% 100%;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    text-transform: none;
    box-shadow: 0 10px 22px -10px rgba(91, 70, 190, .7);
    transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}

html:not(._) #rcmloginsubmit:hover,
html:not(._) #rcmloginsubmit:focus {
    background-position: 100% 0;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(91, 70, 190, .8);
}

html:not(._) #rcmloginsubmit:active {
    transform: translateY(0);
}

html:not(._) #login-footer {
    margin-top: 1.75rem;
    color: var(--gts-text-muted);
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 480px) {
    html:not(._) #login-form {
        padding: 2.5rem 1.5rem 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(._) body.task-login,
    html:not(._) body.task-login::before,
    html:not(._) body.task-login::after,
    html:not(._) .task-login #logo,
    html:not(._) #login-form {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Buttons & form controls                                            */
/* ------------------------------------------------------------------ */

html:not(._) .btn-primary,
html:not(._) .btn.mainaction,
html:not(._) .ui-dialog .ui-dialog-buttonpane .ui-button.mainaction {
    background-color: var(--gts-primary);
    border-color: var(--gts-primary);
    color: var(--gts-on-primary);
    border-radius: var(--gts-radius-pill);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s, box-shadow .15s;
}

html:not(._) .btn-primary:hover,
html:not(._) .btn-primary:focus,
html:not(._) .btn.mainaction:hover,
html:not(._) .ui-dialog .ui-dialog-buttonpane .ui-button.mainaction:hover {
    background-color: var(--gts-primary-hover);
    border-color: var(--gts-primary-hover);
    color: var(--gts-on-primary);
    box-shadow: var(--gts-shadow-raised);
}

html:not(._) .btn,
html:not(._) .ui-button {
    border-radius: var(--gts-radius-pill);
}

html:not(._) .form-control,
html:not(._) .custom-select {
    border-radius: var(--gts-radius);
}

html:not(._) .form-control:focus,
html:not(._) .custom-select:focus {
    border-color: var(--gts-primary);
    box-shadow: 0 0 0 1px var(--gts-primary);
}

html:not(._) input[type="checkbox"].form-check-input:checked,
html:not(._) .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--gts-primary);
    border-color: var(--gts-primary);
}

/* ------------------------------------------------------------------ */
/* Task rail (left menu)                                              */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 481px) {
    html:not(._) #layout-menu,
    html:not(._) #layout-menu .popover-header,
    html:not(._) #taskmenu .special-buttons {
        background-color: var(--gts-bg) !important;
    }

    html:not(._) #layout-menu {
        border-right: 0;
    }

    html:not(._) #taskmenu a,
    html:not(._) #taskmenu a:hover,
    html:not(._) #taskmenu a:focus,
    html:not(._) #taskmenu a.selected,
    html:not(._) #taskmenu a.selected:hover,
    html:not(._) #layout-menu #taskmenu .special-buttons a {
        margin: 2px auto;
        color: var(--gts-icon);
        background: transparent;
        box-shadow: none;
    }

    /* The highlight is a pill behind the icon only, as in Material 3. */
    html:not(._) #taskmenu a::before {
        border-radius: var(--gts-radius-pill);
        transition: background-color .15s;
    }

    html:not(._) #taskmenu a:hover::before,
    html:not(._) #taskmenu a:focus::before {
        background: var(--gts-hover);
    }

    html:not(._) #taskmenu a.selected,
    html:not(._) #taskmenu a.selected:hover {
        color: var(--gts-text);
        font-weight: 600;
    }

    html:not(._) #taskmenu a.selected::before {
        color: var(--gts-nav-active-text);
        background: var(--gts-nav-active);
    }

    /* Compose: the big rounded "Tulis" button at the top of the rail. */
    html:not(._) #taskmenu .action-buttons a,
    html:not(._) #taskmenu .action-buttons a:hover,
    html:not(._) #taskmenu .action-buttons a.selected {
        color: var(--gts-compose-text);
        background: var(--gts-compose);
        border-radius: var(--gts-radius-card);
        margin: 8px auto 14px;
        transition: box-shadow .15s, background-color .15s;
    }

    html:not(._) #taskmenu .action-buttons a:hover {
        background-color: var(--gts-compose-hover);
        box-shadow: var(--gts-shadow-raised);
    }

    html:not(._) #taskmenu .action-buttons a::before,
    html:not(._) #taskmenu .action-buttons a:hover::before {
        background: transparent;
    }

    html:not(._) #taskmenu a.logout,
    html:not(._) #taskmenu a.logout:hover {
        color: var(--gts-danger) !important;
    }
}

@media screen and (min-width: 1025px) {
    /* Same width as Elastic's rail, so the bottom buttons are not truncated. */
    html:not(._) #taskmenu .special-buttons {
        width: 78px;
    }

    html:not(._) #taskmenu a {
        width: 100%;
        height: auto;
        font-size: .72rem;
        padding: .35rem 2px .55rem;
    }

    /* "!important" because Elastic's ".menu.toolbar a:before" uses it too. */
    html:not(._) #taskmenu a::before {
        display: block;
        width: 56px !important;
        height: 32px !important;
        line-height: 32px;
        margin: 0 auto .25rem !important;
        font-size: 1.1rem;
    }

    /* Let long labels ("Informasi program") wrap instead of being cut off. */
    html:not(._) #taskmenu a span.inner {
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
        padding: 0 2px;
    }

    html:not(._) #taskmenu .action-buttons a {
        width: 62px;
        padding: .7rem 2px .6rem;
        font-weight: 600;
    }

    html:not(._) #taskmenu .action-buttons a::before {
        width: auto !important;
        height: 24px !important;
        line-height: 24px;
        font-size: 1.25rem;
    }
}

/* The sidebar "Tulis" button replaces the rail one where the sidebar shows. */
html:not(._).layout-large.gts-sidebar-compose #taskmenu .action-buttons {
    display: none;
}

html:not(._):not(.layout-large) #layout-sidebar > a.gts-compose {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Sidebar "Tulis" (compose) button                                   */
/* ------------------------------------------------------------------ */

html:not(._) #layout-sidebar > a.gts-compose {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .85rem;
    height: 56px;
    min-width: 140px;
    margin: 4px 0 12px 8px;
    padding: 0 1.5rem 0 1.25rem;
    border-radius: var(--gts-radius-card);
    background: var(--gts-compose);
    color: var(--gts-compose-text);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow .15s, background-color .15s;
}

html:not(._) #layout-sidebar > a.gts-compose::before {
    content: "\f303";
    font-family: 'Icons';
    font-weight: 900;
    font-size: 1.15rem;
}

html:not(._) #layout-sidebar > a.gts-compose:hover,
html:not(._) #layout-sidebar > a.gts-compose:focus {
    background-color: var(--gts-compose-hover);
    box-shadow: var(--gts-shadow-raised);
    outline: 0;
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
    html:not(._) #taskmenu a {
        width: 36px;
        height: 36px;
        border-radius: var(--gts-radius-pill);
    }

    html:not(._) #taskmenu a::before {
        line-height: 36px;
    }

    html:not(._) #taskmenu a.selected,
    html:not(._) #taskmenu a.selected:hover {
        background: var(--gts-nav-active);
    }

    html:not(._) #taskmenu a.selected::before {
        background: transparent;
    }

    html:not(._) #taskmenu .action-buttons a,
    html:not(._) #taskmenu .action-buttons a:hover {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    html:not(._) #taskmenu .action-buttons a::before {
        line-height: 40px;
    }
}

/* ------------------------------------------------------------------ */
/* Panels: sidebar on the page background, list & content as cards  */
/* ------------------------------------------------------------------ */

html:not(._) #layout-sidebar {
    background-color: var(--gts-bg);
    border-right: 0;
}

html:not(._) #layout-list,
html:not(._) #layout-content {
    background-color: var(--gts-surface);
    border-right: 0;
}

@media screen and (min-width: 769px) {
    html:not(._) body:not(.task-login) #layout-list,
    html:not(._) body:not(.task-login) #layout-content {
        margin: 8px 8px 16px 0;
        border-radius: var(--gts-radius-card);
        overflow: hidden;
    }

    /* List and reading pane read as one card with a thin divider. */
    html:not(._) body:not(.task-login) #layout-list + #layout-content {
        margin-left: -8px;
        border-left: 1px solid var(--gts-border);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    html:not(._) body:not(.task-login) #layout-list:has(+ #layout-content) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

html:not(._) #layout > div > .header,
html:not(._) #layout-content > .header {
    background-color: var(--gts-surface);
    border-bottom: 1px solid var(--gts-divider);
    color: var(--gts-text);
}

html:not(._) #layout-sidebar > .header,
html:not(._) #layout-sidebar > .footer {
    background-color: var(--gts-bg);
    border-color: transparent;
}

html:not(._) #layout > div > .header .header-title {
    font-weight: 500;
    font-size: 1rem;
}

html:not(._) #layout > div > .footer {
    background-color: transparent;
    border-top: 1px solid var(--gts-divider);
}

/* Toolbar buttons (Reply, Forward, Delete, ...) */
html:not(._) #layout > div > .header .toolbar a.button,
html:not(._) #layout > div > .header .toolbar > a,
html:not(._) #layout > div > .header > a.button {
    color: var(--gts-icon);
    border-radius: var(--gts-radius-pill);
    transition: background-color .15s, color .15s;
}

html:not(._) #layout > div > .header .toolbar a.button:not(.disabled):hover,
html:not(._) #layout > div > .header .toolbar > a:not(.disabled):hover,
html:not(._) #layout > div > .header > a.button:not(.disabled):hover {
    color: var(--gts-text);
    background-color: var(--gts-hover);
}

html:not(._) #layout > div > .header .toolbar a.disabled {
    opacity: .38;
}

html:not(._) #layout > div > .header .toolbar .inner,
html:not(._) #layout > div > .header .toolbar a.button {
    font-weight: 400;
    font-size: .78rem;
}

/*
 * Large screens: Gmail-style toolbars – round, icon-only buttons aligned
 * left. Each button keeps its title attribute as a tooltip, and the label
 * stays in the DOM for screen readers.
 */
@media screen and (min-width: 1025px) {
    html:not(._) #layout-list > .header,
    html:not(._) #layout-content > .header {
        justify-content: flex-start;
        align-items: center;
        padding: 0 .5rem;
    }

    html:not(._) #layout-list > .header > .header-title,
    html:not(._) body.task-mail #layout-content > .header > .header-title {
        display: none;
    }

    html:not(._) #layout > div > .header .toolbar {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
    }

    html:not(._) #layout > div > .header .toolbar a,
    html:not(._) #layout > div > .header > a.toolbar-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 40px;
        margin: 0 2px;
        padding: 0;
        border-radius: 50%;
        line-height: 40px;
    }

    html:not(._) #layout > div > .header .toolbar a::before,
    html:not(._) #layout > div > .header > a.toolbar-button::before {
        height: auto !important;
        width: auto !important;
        margin: 0 !important;
        line-height: 1 !important;
        font-size: 1.05rem;
    }

    html:not(._) #layout > div > .header .toolbar a span.inner,
    html:not(._) #layout > div > .header > a.toolbar-button span.inner {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Small caret next to "Reply all" / "Forward". */
    html:not(._) #layout > div > .header .toolbar .dropbutton {
        display: inline-flex;
        align-items: center;
    }

    html:not(._) #layout > div > .header .toolbar .dropbutton a.dropdown {
        width: 18px;
        min-width: 18px;
        margin-left: -6px;
        border-radius: var(--gts-radius);
    }

    html:not(._) #layout > div > .header .toolbar .dropbutton a.dropdown::before {
        font-size: .75rem;
    }

    html:not(._) #layout > div > .header .toolbar .spacer {
        display: inline-block;
        width: 1px;
        height: 20px;
        margin: 0 .5rem;
        background: var(--gts-border);
    }
}

/* ------------------------------------------------------------------ */
/* Folder list                                                        */
/* ------------------------------------------------------------------ */

html:not(._) #layout-sidebar .listing,
html:not(._) #layout-sidebar .treelist {
    padding: .25rem 0 0;
}

html:not(._) #layout-sidebar .listing li,
html:not(._) #layout-sidebar .treelist li {
    border-bottom: 0;
    background: transparent;
}

html:not(._) #layout-sidebar .listing li > a,
html:not(._) #layout-sidebar .treelist li > a {
    margin-right: 12px;
    border-radius: 0 var(--gts-radius-pill) var(--gts-radius-pill) 0;
    color: var(--gts-text);
    transition: background-color .12s;
}

html:not(._) #layout-sidebar .listing li > a::before {
    color: var(--gts-icon);
}

html:not(._) #layout-sidebar .listing li > a:hover {
    background-color: var(--gts-hover);
}

html:not(._) #layout-sidebar .listing li.selected,
html:not(._) #layout-sidebar .treelist li.selected {
    background: transparent;
}

html:not(._) #layout-sidebar .listing li.selected > a,
html:not(._) #layout-sidebar .treelist li.selected > a,
html:not(._) #layout-sidebar .listing li.selected > a:hover {
    color: var(--gts-nav-active-text);
    background-color: var(--gts-nav-active);
    font-weight: 700;
}

html:not(._) #layout-sidebar .listing li.selected > a::before {
    color: var(--gts-nav-active-text);
}

/* Unread folders: bold name, plain bold count (no badge). */
html:not(._) .folderlist li.mailbox.unread > a {
    font-weight: 700;
}

html:not(._) .folderlist li.mailbox .unreadcount {
    background: transparent;
    color: inherit;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 0;
    padding-right: .25rem;
}

/* Quota bar */
html:not(._) .quota-widget .bar {
    border-radius: var(--gts-radius-pill);
    border-color: var(--gts-border);
    background: var(--gts-surface);
}

html:not(._) .quota-widget .bar .value {
    background-color: var(--gts-primary);
    border-radius: var(--gts-radius-pill);
}

html:not(._) .quota-widget .count {
    color: var(--gts-text-muted);
}

/* ------------------------------------------------------------------ */
/* Search bar                                                         */
/* ------------------------------------------------------------------ */

html:not(._) #layout-list > .searchbar,
html:not(._) #layout-sidebar > .searchbar {
    margin: .6rem .75rem;
    border: 0;
    border-radius: var(--gts-radius-pill);
    background-color: var(--gts-search);
    transition: background-color .15s, box-shadow .15s;
}

html:not(._) #layout-list > .searchbar:focus-within,
html:not(._) #layout-sidebar > .searchbar:focus-within {
    background-color: var(--gts-surface);
    box-shadow: var(--gts-shadow-raised);
}

html:not(._) .searchbar input,
html:not(._) .searchbar input:focus {
    color: var(--gts-text);
    background: transparent;
}

html:not(._) .searchbar a.button {
    color: var(--gts-icon);
}

/* ------------------------------------------------------------------ */
/* Message & contact lists                                            */
/* ------------------------------------------------------------------ */

html:not(._) #layout-list .listing tbody td,
html:not(._) #layout-list .listing li {
    border-bottom-color: var(--gts-divider);
    color: var(--gts-text);
}

/* Read messages get a faint tint; unread ones stay white and bold. */
html:not(._) .messagelist tbody tr td {
    background-color: var(--gts-surface-read);
}

html:not(._) .messagelist tbody tr.unread td {
    background-color: var(--gts-surface);
}

html:not(._) #layout-list .listing tbody tr:hover,
html:not(._) #layout-list .listing li:hover {
    position: relative;
    z-index: 1;
    box-shadow: var(--gts-shadow-row);
}

html:not(._) #layout-list .listing li:hover {
    background-color: var(--gts-surface);
}

html:not(._) #layout-list .listing tr.selected td,
html:not(._) #layout-list .listing li.selected,
html:not(._) #layout-list .listing tr.focused.selected td {
    color: var(--gts-text);
    background-color: var(--gts-row-selected);
}

html:not(._) #layout-list .listing tr.selected td a,
html:not(._) #layout-list .listing tr.selected td span,
html:not(._) #layout-list .listing li.selected a {
    color: var(--gts-text);
}

html:not(._) .messagelist td.subject span.subject a {
    color: var(--gts-text);
    font-weight: 400;
}

html:not(._) .messagelist td.subject span.fromto {
    color: var(--gts-text);
    font-size: .93rem;
}

/* tbody + :not(.deleted) outrank Elastic's dark-mode "tr:not(.flagged):not(.deleted)". */
html:not(._) .messagelist tbody tr.unread:not(.deleted) td.subject span.subject a,
html:not(._) .messagelist tbody tr.unread:not(.deleted) td.subject span.fromto,
html:not(._) .messagelist tbody tr.unread:not(.deleted) td.subject span.date {
    color: var(--gts-text);
    font-weight: 700;
}

html:not(._) .messagelist td.subject span.date,
html:not(._) .messagelist td.subject span.size {
    color: var(--gts-text-muted);
    font-size: .8rem;
}

html:not(._) .messagelist td.subject span.msgicon.status::before {
    color: var(--gts-primary);
}

/* Read messages have no dot; it shows on hover so it can still be clicked. */
html:not(._) .messagelist td.subject span.msgicon.status:not(.unread):not(.unreadchildren):not(.replied):not(.forwarded)::before {
    opacity: 0;
}

html:not(._) .messagelist tr:hover td.subject span.msgicon.status:not(.unread):not(.unreadchildren):not(.replied):not(.forwarded)::before {
    opacity: .5;
}

/* Flagged = starred: amber star instead of a red row. */
html:not(._) .messagelist tr.flagged td,
html:not(._) .messagelist tr.flagged td.subject span.subject a,
html:not(._) .messagelist tr.flagged td.subject span.fromto,
html:not(._) .messagelist tr.flagged td.subject span.date {
    color: var(--gts-text);
}

html:not(._) .messagelist tr.flagged td.subject span.date {
    color: var(--gts-text-muted);
}

html:not(._) .messagelist span.flagged::before {
    content: "\f005";
    color: #f4b400;
}

/* Empty outline star on hover, so a message can be starred with one click. */
html:not(._) .messagelist tr:hover td.flags span.unflagged::before,
html:not(._) .messagelist tr.flaggedroot:not(:hover) span.unflagged::before {
    content: "\f005";
    font-family: 'Icons';
    font-weight: 400;
    font-size: 1.25em;
    display: block;
    float: left;
    width: 1.18em;
    height: 1em;
    margin: 0 .25rem 0 0;
    color: var(--gts-text-muted);
}

html:not(._) .messagelist td.subject span.fromto .rcmContactAddress {
    color: inherit;
}

html:not(._) .messagelist span.attachment span,
html:not(._) .messagelist tr.flagged td.flags span.attachment span {
    color: var(--gts-icon);
}

html:not(._) .listing-info,
html:not(._) .listing-info span {
    color: var(--gts-text-muted);
    font-weight: 400;
}

/* Pagination footer */
html:not(._) #layout-list .footer a.button {
    color: var(--gts-icon);
    border-radius: var(--gts-radius-pill);
}

html:not(._) #layout-list .footer a.button:not(.disabled):hover {
    color: var(--gts-text);
    background: var(--gts-hover);
}

html:not(._) #layout-list .footer .pagenav-text {
    color: var(--gts-text-muted);
    font-weight: 400;
}

html:not(._) .pagenav input.form-control {
    border-radius: var(--gts-radius);
}

/* ------------------------------------------------------------------ */
/* Message view                                                       */
/* ------------------------------------------------------------------ */

html:not(._) #message-header {
    border-bottom: 0;
}

html:not(._) #message-header h2.subject {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--gts-text);
    line-height: 1.35;
}

html:not(._) #message-header .contactphoto {
    border-radius: 50%;
}

html:not(._) #message-header .header-summary .sender,
html:not(._) #message-header .header-summary .adr .rcmContactAddress {
    font-weight: 600;
    color: var(--gts-text);
}

html:not(._) #message-header .header-links a {
    color: var(--gts-primary);
}

/* Attachments as rounded chips */
html:not(._) .attachmentslist li {
    border-radius: var(--gts-radius);
    border-color: var(--gts-border);
}

html:not(._) .watermark {
    opacity: .3;
}

html:not(._) #layout-content .formcontent .formcontainer fieldset,
html:not(._) .propform fieldset {
    border-radius: var(--gts-radius);
}

/* ------------------------------------------------------------------ */
/* Popovers, menus & dialogs                                          */
/* ------------------------------------------------------------------ */

html:not(._) .popover {
    border: 0;
    border-radius: var(--gts-radius);
    box-shadow: var(--gts-shadow-lg);
}

html:not(._) .popover .listing li a:hover,
html:not(._) .popupmenu .listing li a.active:hover {
    background-color: var(--gts-hover);
    color: var(--gts-text);
}

html:not(._) .ui-dialog {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--gts-shadow-lg);
}

/* Toast messages, bottom-left like Material snackbars */
html:not(._) #messagestack div {
    border-radius: var(--gts-radius);
    box-shadow: var(--gts-shadow-lg);
}

/* Thin, unobtrusive scrollbars */
html:not(._) .scroller,
html:not(._) .content {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .35) transparent;
}

/* ------------------------------------------------------------------ */
/* Brand gradient (blue → purple) on the main actions                 */
/* ------------------------------------------------------------------ */

html:not(._) .btn-primary,
html:not(._) .btn.mainaction,
html:not(._) .ui-dialog .ui-dialog-buttonpane .ui-button.mainaction,
html:not(._) #layout-sidebar > a.gts-compose {
    background-image: linear-gradient(90deg, #3498db, #8e44ad, #3498db);
    background-size: 200% 100%;
    background-position: 0 0;
    border-color: transparent;
    color: #fff;
    transition: background-position .5s ease, box-shadow .2s ease, transform .2s ease;
}

html:not(._) .btn-primary:hover,
html:not(._) .btn-primary:focus,
html:not(._) .btn.mainaction:hover,
html:not(._) .ui-dialog .ui-dialog-buttonpane .ui-button.mainaction:hover,
html:not(._) #layout-sidebar > a.gts-compose:hover,
html:not(._) #layout-sidebar > a.gts-compose:focus {
    background-position: 100% 0;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(91, 70, 190, .7);
}

html:not(._) #layout-sidebar > a.gts-compose:hover {
    transform: translateY(-1px);
}

/* The rail's compose button (tablet-sized screens). */
@media screen and (min-width: 481px) {
    html:not(._) #taskmenu .action-buttons a,
    html:not(._) #taskmenu .action-buttons a.selected,
    html:not(._) #taskmenu .action-buttons a:hover {
        background-image: var(--gts-gradient);
        color: #fff;
    }

    html:not(._) #taskmenu .action-buttons a::before,
    html:not(._) #taskmenu .action-buttons a:hover::before {
        color: #fff;
    }
}

html:not(._) .quota-widget .bar .value {
    background-image: var(--gts-gradient);
}

@media (prefers-reduced-motion: reduce) {
    html:not(._) #layout-sidebar > a.gts-compose:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------ */
/* No Roundcube branding: the "About" entry shows its logo and version */
/* ------------------------------------------------------------------ */

html:not(._) #taskmenu a.about {
    display: none !important;
}