/* e-Captain Brand Overrides for Roundcube Webmail */

/* 1. Top Colored Strip — 45px paars + 4px oranje (hoofdvenster, niet in iframes/login) */
:root {
    --brand-topstrip-height: 49px;
}

html:not(.iframe) body:not(.task-login)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--brand-topstrip-height);
    background: linear-gradient(to bottom, #65043b 0 45px, #f7981c 45px 100%);
    z-index: 99999;
}

/* Elastic uses height:100% + body overflow:hidden — shrink layout so strip does not cover UI */
html:not(.iframe) body:not(.task-login) #layout {
    margin-top: var(--brand-topstrip-height) !important;
    height: calc(100% - var(--brand-topstrip-height)) !important;
}

/* 2. Primary Brand Colors (Light Mode) */
:root {
    --brand-burgundy: #65043b;
    --brand-burgundy-hover: #50032e;
    --brand-orange: #f7981c;
    --brand-orange-hover: #d57d10;
    --brand-yellow: #ffd452;
}

/* 3. Task Menu (Left Sidebar) Overrides — light mode */
html:not(.dark-mode) #layout-menu {
    background-color: #f4f4f4 !important;
}

html:not(.dark-mode) #layout-menu .popover-header {
    background-color: #f4f4f4 !important;
}

html:not(.dark-mode) #taskmenu {
    background-color: #f4f4f4 !important;
    border-right: 1px solid #e2e2e2 !important;
}

html:not(.dark-mode) #taskmenu .special-buttons {
    background-color: #f4f4f4 !important;
}

html:not(.dark-mode) #taskmenu a {
    color: var(--brand-burgundy) !important;
    transition: background-color 0.2s, color 0.2s;
}

html:not(.dark-mode) #taskmenu a:before {
    color: var(--brand-burgundy) !important;
}

html:not(.dark-mode) #taskmenu a:hover {
    color: var(--brand-burgundy) !important;
    background-color: #e2e2e2 !important;
}

html:not(.dark-mode) #taskmenu a.selected {
    color: #ffffff !important;
    background-color: var(--brand-burgundy) !important;
}

html:not(.dark-mode) #taskmenu a.selected:before {
    color: #ffffff !important;
}

html:not(.dark-mode) #taskmenu a.selected:hover {
    color: #ffffff !important;
    background-color: var(--brand-burgundy-hover) !important;
}

html:not(.dark-mode) #taskmenu a.logout {
    color: #ff5552 !important;
}

html:not(.dark-mode) #taskmenu a.logout:before {
    color: #ff5552 !important;
}

html:not(.dark-mode) #taskmenu a.logout:hover {
    background-color: #ffebeb !important;
}

/* 4. Column headers — light mode (#f4f4f4, doorlopend met sidebar/searchbar) */
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #layout-content > .header {
    background-color: #f4f4f4 !important;
    color: #2c2c2c !important;
    border-bottom: 1px solid #e2e2e2 !important;
}

html:not(.dark-mode) #layout-sidebar > .header a.button,
html:not(.dark-mode) #layout-list > .header a.button,
html:not(.dark-mode) #layout-content > .header a.button,
html:not(.dark-mode) #layout-list > .header .header-title,
html:not(.dark-mode) #layout-content > .header .header-title {
    color: var(--brand-burgundy) !important;
}

html:not(.dark-mode) #layout-sidebar > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-sidebar > .header a.button:not(.disabled):focus,
html:not(.dark-mode) #layout-list > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-list > .header a.button:not(.disabled):focus,
html:not(.dark-mode) #layout-content > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-content > .header a.button:not(.disabled):focus {
    background-color: #e2e2e2 !important;
    color: var(--brand-burgundy-hover) !important;
}

/* Folder panel search — light background in light mode */
html:not(.dark-mode) .searchbar {
    background-color: #f4f4f4 !important;
    border-bottom: 1px solid #e2e2e2 !important;
}

html:not(.dark-mode) .searchbar form:before {
    color: var(--brand-burgundy) !important;
}

html:not(.dark-mode) .searchbar a,
html:not(.dark-mode) .searchbar a:before {
    color: var(--brand-burgundy) !important;
}

html:not(.dark-mode) .searchbar a:hover,
html:not(.dark-mode) .searchbar a:hover:before {
    color: var(--brand-burgundy-hover) !important;
}

html:not(.dark-mode) .searchbar input {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #2c2c2c !important;
}

html:not(.dark-mode) .searchbar input::placeholder {
    color: #888 !important;
}

#layout-menu .popover-header {
    background-color: transparent !important;
    border-bottom: none !important;
}

#layout-menu #logo {
    max-height: 2.5rem;
    width: auto;
}

/* 5. Primary Buttons */
.btn-primary, 
.ui-button.ui-state-active,
.ui-dialog .ui-dialog-buttonpane button.ui-button-primary {
    background-color: var(--brand-burgundy) !important;
    border-color: var(--brand-burgundy) !important;
    color: #ffffff !important;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active,
.ui-button.ui-state-active:hover,
.ui-dialog .ui-dialog-buttonpane button.ui-button-primary:hover {
    background-color: var(--brand-burgundy-hover) !important;
    border-color: var(--brand-burgundy-hover) !important;
    color: #ffffff !important;
}

/* 6. Links and General Accents — light mode */
html:not(.dark-mode) a {
    color: var(--brand-burgundy);
}

html:not(.dark-mode) a:hover {
    color: var(--brand-orange);
    text-decoration: none;
}

/* Selected list items and other primary highlights (not nav-tabs) */
.list-group-item.active,
.ui-menu .ui-menu-item.ui-state-focus,
.ui-menu .ui-menu-item.ui-state-active {
    background-color: var(--brand-burgundy) !important;
    border-color: var(--brand-burgundy) !important;
    color: #ffffff !important;
}

.list-group-item.active a {
    color: #ffffff !important;
}

/* Classic folder-style nav-tabs (light mode) */
html:not(.dark-mode) .nav-tabs {
    border-bottom: 1px solid #e2e2e2 !important;
}

html:not(.dark-mode) .nav-tabs .nav-link {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
    color: var(--brand-burgundy) !important;
    margin-bottom: -1px;
}

html:not(.dark-mode) .nav-tabs .nav-link:hover,
html:not(.dark-mode) .nav-tabs .nav-link:focus {
    background-color: #f7e6f0 !important;
    border-color: #e2e2e2 #e2e2e2 transparent !important;
    color: var(--brand-orange) !important;
}

html:not(.dark-mode) .nav-tabs .nav-item.show .nav-link,
html:not(.dark-mode) .nav-tabs .nav-link.active {
    background-color: #ffffff !important;
    border-color: #e2e2e2 #e2e2e2 transparent !important;
    color: var(--brand-burgundy) !important;
}

html:not(.dark-mode) .nav-tabs .nav-link.active a {
    color: var(--brand-burgundy) !important;
}

/* Selected row in message list */
tr.selected td, 
.messagelist tr.selected td,
.contactlist tr.selected td {
    background-color: #f7e6f0 !important; /* very light burgundy tint */
}

/* Badges */
.badge-primary,
.badge-main,
.badge-unread {
    background-color: var(--brand-burgundy) !important;
    color: #ffffff !important;
}

/* Quota indicator */
.quota-widget .quota-value {
    background-color: var(--brand-burgundy) !important;
}

/* 7. Login Screen */
.task-login #logo {
    top: 12vh !important;
    max-height: 120px !important;
}

html:not(.dark-mode) .task-login {
    background-color: #f8f9fa !important;
}

html:not(.dark-mode) .task-login #login-form {
    top: 15vh !important;
    border: 1px solid #e2e2e2 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    padding: 2rem !important;
}

/* Input focus ring */
.form-control:focus {
    border-color: var(--brand-burgundy) !important;
    box-shadow: 0 0 0 0.2rem rgba(101, 4, 59, 0.25) !important;
}

/* 8. Dark Mode Support */
html.dark-mode {
    --brand-burgundy: #9e1c5c;
    --brand-burgundy-hover: #b52b71;
    scrollbar-color: #c5d1d3 #293539;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track {
    background-color: #293539;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
    background-color: #c5d1d3;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header {
    background-color: #161b1d !important;
}

html.dark-mode #taskmenu {
    background-color: #161b1d !important;
    border-right: 1px solid #2c373a !important;
}

html.dark-mode #taskmenu .special-buttons {
    background-color: #161b1d !important;
}

html.dark-mode #taskmenu a {
    color: #c5d1d3 !important;
}

html.dark-mode #taskmenu a:hover {
    color: #ffffff !important;
    background-color: #2c373a !important;
}

html.dark-mode #taskmenu a.selected {
    color: #ffffff !important;
    background-color: var(--brand-burgundy) !important;
}

html.dark-mode #taskmenu a.logout:hover {
    background-color: #3d1a1a !important;
}

html.dark-mode #layout > div > .header,
html.dark-mode .header {
    background-color: #161b1d !important;
    border-bottom-color: #2c373a !important;
    color: #c5d1d3 !important;
}

html.dark-mode #layout > div > .header a,
html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .header .header-title,
html.dark-mode .header a.button {
    color: #c5d1d3 !important;
}

html.dark-mode #layout > div > .header a.button:not(.disabled):hover,
html.dark-mode #layout > div > .header a.button:not(.disabled):focus,
html.dark-mode .header a.button:not(.disabled):hover,
html.dark-mode .header a.button:not(.disabled):focus {
    background-color: #2c373a !important;
    color: #ffffff !important;
}

html.dark-mode .searchbar form:before,
html.dark-mode .searchbar a,
html.dark-mode .searchbar a:before {
    color: #c5d1d3 !important;
}

html.dark-mode .searchbar {
    background-color: #161b1d !important;
}

html.dark-mode .searchbar input {
    background-color: #21292c !important;
    color: #c5d1d3 !important;
    border-color: #2c373a !important;
}

html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-list > .header {
    background-color: #161b1d !important;
    color: #c5d1d3 !important;
    border-bottom-color: #2c373a !important;
}

html.dark-mode #layout-sidebar > .header a.button,
html.dark-mode #layout-list > .header a.button {
    color: #c5d1d3 !important;
}

html.dark-mode #logo {
    opacity: 1 !important;
}

html.dark-mode .task-login {
    background-color: #21292c !important;
}

html.dark-mode .task-login #login-form {
    top: 15vh !important;
    border: 1px solid #2c373a !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    background: #161b1d !important;
    padding: 2rem !important;
    color: #c5d1d3 !important;
}

html.dark-mode .task-login #login-footer {
    color: #7c949c !important;
}

html.dark-mode tr.selected td,
html.dark-mode .messagelist tr.selected td,
html.dark-mode .contactlist tr.selected td {
    background-color: #3d1a2d !important; /* dark burgundy tint */
}

/* 9. Dark Mode Links and Elastic Accent Overrides (#37beff → brand orange) */
html.dark-mode a {
    color: var(--brand-orange);
}

html.dark-mode a:hover {
    color: var(--brand-yellow);
    text-decoration: none;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr.selected td.subject a,
html.dark-mode .messagelist tr.selected td.subject span.msgicon.status,
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode .tox-dialog__body-nav-item--active,
html.dark-mode .tox-collection__item--enabled,
html.dark-mode .ui-datepicker .ui-state-active,
html.dark-mode .ui-datepicker-days-cell-over a {
    color: var(--brand-orange) !important;
}

html.dark-mode .form-control:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(247, 152, 28, 0.25) !important;
}

/* Classic folder-style nav-tabs (dark mode) */
html.dark-mode .nav-tabs {
    border-bottom: 1px solid #2c373a !important;
}

html.dark-mode .nav-tabs .nav-link {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
    color: #c5d1d3 !important;
    margin-bottom: -1px;
}

html.dark-mode .nav-tabs .nav-link:hover,
html.dark-mode .nav-tabs .nav-link:focus {
    background-color: #3d1a2d !important;
    border-color: #2c373a #2c373a transparent !important;
    color: var(--brand-orange) !important;
}

html.dark-mode .nav-tabs .nav-item.show .nav-link,
html.dark-mode .nav-tabs .nav-link.active {
    background-color: #161b1d !important;
    border-color: #2c373a #2c373a transparent !important;
    color: #ffffff !important;
}

html.dark-mode .nav-tabs .nav-link.active a {
    color: #ffffff !important;
}