/* VDR Tech — a skin that extends Elastic rather than patching it.
 *
 * Roundcube has no "load an extra stylesheet" setting; the supported way to restyle is
 * a skin with `"extends": "elastic"` in meta.json, which inherits every template and
 * image and lets this file override what it needs. That is what makes the branding
 * survive a Roundcube upgrade — nothing here depends on Elastic's markup, only on the
 * CSS variables it already exposes.
 *
 * Colours are the brand's five, from Branding Kit/LOGO/user-manual_logo_VDRtech.pdf
 * page 9 — the same ones the intranet uses, so the two sites look like one company.
 */

/* The parent skin, compiled. Relative to skins/vdr/styles/. */
@import url("../../elastic/styles/styles.min.css");

:root {
    --vdr-navy:  #1a4684;
    --vdr-navy-light: #2b5da6;
    --vdr-navy-deep: #123566;
    --vdr-green: #7cc244;
    --vdr-green-dark: #5c9e2a;
    --vdr-grey:  #d1d3d4;

    --color-main: var(--vdr-navy);
    --color-main-dark: var(--vdr-navy-deep);
    --color-link: var(--vdr-navy);
    --color-link-hover: var(--vdr-navy-light);
    --color-success: var(--vdr-green-dark);
    --color-font-link: var(--vdr-navy);
}

/* ── the task bar, the one piece of chrome on every screen ───────────────── */
#taskmenu {
    background: var(--vdr-navy);
}
#taskmenu a {
    color: rgba(255, 255, 255, .70);
}
#taskmenu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}
#taskmenu a.selected {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 3px 0 0 var(--vdr-green);   /* green marks where you are */
}
#taskmenu a.selected::before { color: var(--vdr-green); }
#taskmenu #logo { max-height: 30px; width: auto; padding: .4rem 0; }

/* ── actions are green, as they are on the intranet ──────────────────────── */
.btn.btn-primary,
button.btn.btn-primary,
a.btn.btn-primary {
    background-color: var(--vdr-green);
    border-color: var(--vdr-green);
    color: #fff;
    font-weight: 600;
}
.btn.btn-primary:hover,
button.btn.btn-primary:hover,
a.btn.btn-primary:hover {
    background-color: var(--vdr-green-dark);
    border-color: var(--vdr-green-dark);
}
a.button.btn-primary.create,
#layout-list .header a.button:hover { color: var(--vdr-green-dark); }

/* Unread is the number people actually look for. */
span.badge, .unreadcount {
    background-color: var(--vdr-green) !important;
    color: #10300f !important;
    font-weight: 700;
}

/* ── the login page is the first impression ──────────────────────────────── */
#layout-content.login,
body.task-login #layout {
    background: linear-gradient(165deg, #f4f6f8 0%, #e6edf9 100%);
}
body.task-login #layout-content {
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: .75rem;
    box-shadow: 0 6px 28px rgba(26, 70, 132, .13);
}
body.task-login #logo {
    max-height: 46px;
    width: auto;
    margin-bottom: .4rem;
}
body.task-login #login-form .input-group-prepend .input-group-text {
    border-color: #e3e7eb;
    color: var(--vdr-navy);
    background: #f4f6f8;
}
body.task-login #login-form input.form-control {
    border-color: #e3e7eb;
}
body.task-login #login-form input.form-control:focus {
    border-color: var(--vdr-green);
    box-shadow: 0 0 0 .2rem rgba(124, 194, 68, .22);
}
body.task-login #rcmloginsubmit {
    background: var(--vdr-green);
    border-color: var(--vdr-green);
    font-weight: 700;
    letter-spacing: .02em;
}
body.task-login #rcmloginsubmit:hover {
    background: var(--vdr-green-dark);
    border-color: var(--vdr-green-dark);
}
body.task-login #layout-content .boxtitle,
body.task-login #product-name {
    color: var(--vdr-navy);
    font-weight: 700;
}

/* ── lists and selection ─────────────────────────────────────────────────── */
#messagelist tr.selected > td,
.listing li.selected,
.listing tr.selected > td {
    background-color: #eaf1fb;
    color: var(--vdr-navy);
}
#messagelist tr.unread td.subject { font-weight: 700; color: var(--vdr-navy); }

/* Elastic's dark mode: keep the brand legible rather than letting it invert. */
html.dark-mode #taskmenu { background: var(--vdr-navy-deep); }
html.dark-mode #messagelist tr.selected > td { background-color: #16294a; }