/*
 * ASValuation Corporate Branding for Roundcube 1.6 (elastic skin)
 * ---------------------------------------------------------------
 * Overrides the default elastic skin to match asvaluation.com identity.
 * Loaded via the asv_branding plugin — update-safe.
 *
 * Brand tokens:
 *   Primary (burgundy): #BC3227   (replaces #37beff blue)
 *   Primary hover:      #9A2A20
 *   Accent (gold):      #C4A35A
 *   Text dark:          #2D2420   (replaces #2c363a)
 *   Text muted:         #6B5E58
 *   Background cream:   #F6F5F2
 *   Sidebar bg:         #FAF9F7   (replaces #fff)
 *   Border warm:        #EDE9E4   (replaces #d4dbde)
 *   Selected bg:        #FBF0EF   (replaces #ebf9ff light blue)
 *   Nav dark:           #2D2420   (replaces #2f3a3f)
 *   Nav hover:          #3D322E   (replaces #45555c)
 *   Nav bottom:         #241C19   (replaces #2f3a3f bottom)
 */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=DM+Serif+Display&display=swap');

/* === GLOBAL FONT === */
html, body,
html.layout-normal,
html.layout-phone,
html.layout-small,
.ui-widget,
.listing td, .listing li,
input, select, textarea, button {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ============================================================
   1. LOGIN PAGE
   ============================================================ */

#layout-content.no-navbar,
.task-login #layout-content {
    background: #F6F5F2 !important;
}

.task-login #login-form {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(45, 36, 32, 0.08);
    border: 1px solid rgba(45, 36, 32, 0.06);
    max-width: 420px;
    padding: 2rem;
}

.task-login #logo {
    width: 240px !important;
    height: auto !important;
    margin: 0 auto 1.5rem auto;
    display: block;
}

.task-login .btn-primary,
.task-login .button.mainaction,
.task-login input[type="submit"] {
    background-color: #BC3227 !important;
    border-color: #BC3227 !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    font-weight: 500;
}

.task-login .btn-primary:hover,
.task-login .button.mainaction:hover,
.task-login input[type="submit"]:hover {
    background-color: #9A2A20 !important;
    border-color: #9A2A20 !important;
}

.task-login .form-control:focus,
.task-login input[type="text"]:focus,
.task-login input[type="password"]:focus {
    border-color: #BC3227 !important;
    box-shadow: 0 0 0 3px rgba(188, 50, 39, 0.12) !important;
}

/* ============================================================
   2. TASK MENU (left icon bar) — modern ASV design
   ============================================================ */

/* Main bar background with subtle gradient */
#layout-menu {
    background: linear-gradient(180deg, #2D2420 0%, #241C19 100%) !important;
    box-shadow: 2px 0 12px rgba(45, 36, 32, 0.15) !important;
}

#taskmenu {
    background-color: transparent !important;
    padding: 4px 0 !important;
}

/* Gold accent stripe at top of menu */
#layout-menu > .popover-header,
#layout-menu > div:first-child {
    background-color: transparent !important;
    border-bottom: 2px solid #C4A35A !important;
}

/* All menu links — rounded, spaced, smooth transitions */
#taskmenu a {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease !important;
    border-radius: 10px !important;
    margin: 3px 5px !important;
    position: relative;
}

/* Task menu icon styling */
#taskmenu a:before {
    transition: all 0.2s ease !important;
}

/* Selected state — burgundy pill with glow */
#taskmenu a.selected {
    color: #fff !important;
    background: #BC3227 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(188, 50, 39, 0.4) !important;
}

#taskmenu a.selected:before {
    color: #fff !important;
}

#taskmenu a.selected:hover {
    color: #fff !important;
    background: #BC3227 !important;
    box-shadow: 0 3px 14px rgba(188, 50, 39, 0.5) !important;
}

/* Hover state — lighter brown pill */
#taskmenu a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

#taskmenu a:hover:before {
    color: #fff !important;
}

/* Bottom special buttons area — subtle separator */
#taskmenu .special-buttons {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
}

/* Action buttons accent */
#taskmenu .action-buttons a {
    color: #C4A35A !important;
}

/* Logout link — red accent */
#taskmenu a.logout {
    color: rgba(188, 50, 39, 0.9) !important;
}

#taskmenu a.logout:hover {
    color: #ff6b63 !important;
    background: rgba(188, 50, 39, 0.15) !important;
}

/* Dark mode button — moon icon subtle */
#taskmenu a.darkmode,
#taskmenu a[data-command="switch-dark-mode"] {
    color: rgba(196, 163, 90, 0.6) !important;
}

#taskmenu a.darkmode:hover,
#taskmenu a[data-command="switch-dark-mode"]:hover {
    color: #C4A35A !important;
}

/* ============================================================
   3. FOLDER SIDEBAR — modern ASV design
   ============================================================ */

/* Sidebar — warm cream bg */
#layout-sidebar {
    background-color: #FAF9F7 !important;
    border-right: 1px solid #EDE9E4 !important;
}

/* Email account header — dark branded banner */
#layout-sidebar > .header {
    background: linear-gradient(135deg, #2D2420 0%, #3D322E 100%) !important;
    border-bottom: 2px solid #C4A35A !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
}

/* Email address text in header — white on dark */
#layout-sidebar > .header .header-title,
#layout-sidebar > .header span,
#layout-sidebar > .header div {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
}

/* Three-dot menu button in header */
#layout-sidebar > .header a,
#layout-sidebar > .header button {
    color: rgba(255, 255, 255, 0.7) !important;
}

#layout-sidebar > .header a:hover,
#layout-sidebar > .header button:hover {
    color: #C4A35A !important;
}

/* All borders warm */
#layout-sidebar,
#layout-list,
#layout > div > .header,
#layout > div > .footer {
    border-color: #EDE9E4 !important;
}

/* Folder list container — padding for rounded items */
#mailboxlist {
    padding: 6px 4px !important;
}

/* Folder list items — rounded, spaced, modern */
#mailboxlist li > a,
.folderlist li > a {
    color: #2D2420 !important;
    border-radius: 8px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    margin-right: 4px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    transition: all 0.15s ease !important;
}

/* Folder icons — warm muted color */
#mailboxlist li > a:before,
.folderlist li > a:before {
    color: #8B7D75 !important;
    transition: color 0.15s ease !important;
}

/* Selected folder — burgundy tint pill with left accent */
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a {
    color: #2D2420 !important;
    background-color: #FBF0EF !important;
}

.listing tr.selected td {
    color: #2D2420 !important;
    background-color: #FBF0EF !important;
}

#mailboxlist li.selected > a {
    border-left: 3px solid #BC3227 !important;
    color: #BC3227 !important;
    font-weight: 600 !important;
    background-color: #FBF0EF !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(188, 50, 39, 0.08) !important;
}

/* Selected folder icon — burgundy */
#mailboxlist li.selected > a:before {
    color: #BC3227 !important;
}

/* Folder hover — subtle warm lift */
.listing li > a:hover,
#mailboxlist li > a:hover {
    background-color: #F0EDEA !important;
    border-radius: 8px !important;
}

#mailboxlist li > a:hover:before {
    color: #6B5E58 !important;
}

/* Unread count badges — modern pill */
.unreadcount,
span.unreadcount {
    background-color: #BC3227 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* Collapse/expand arrows — subtle */
#mailboxlist li .treetoggle,
.listing li .treetoggle {
    color: #C4BBB5 !important;
    transition: color 0.15s ease !important;
}

#mailboxlist li .treetoggle:hover,
.listing li .treetoggle:hover {
    color: #BC3227 !important;
}

/* Nested subfolder indentation polish — preserve tree indent */
#mailboxlist ul ul a {
    font-size: 0.92em !important;
}

/* Ensure tree indentation is preserved */
#mailboxlist ul {
    padding-left: 0 !important;
}
#mailboxlist ul ul {
    padding-left: 6px !important;
}

/* Droptarget — burgundy highlight */
.listing li.droptarget > a,
.listing tr.droptarget > td {
    background-color: rgba(188, 50, 39, 0.12) !important;
    border-radius: 8px !important;
}

/* ============================================================
   4. MESSAGE LIST PANEL
   ============================================================ */

#layout-list {
    background-color: #FFFFFF !important;
    border-right: 1px solid #EDE9E4 !important;
}

/* List header bar */
#layout-list > .header {
    background-color: #F8F7F5 !important;
    border-bottom: 1px solid #EDE9E4 !important;
}

/* Search bar */
.searchbar {
    background-color: #F0EDEA !important;
    border-radius: 6px;
}

.searchbar:before {
    color: #6B5E58 !important;
}

/* Message row borders — warmer */
.messagelist tr td {
    border-bottom-color: #F0EDEA !important;
}

/* READ messages — light gray (default state) */
.messagelist tr td {
    background-color: #F5F4F2 !important;
    color: #8B7D75 !important;
}

.messagelist tr td.subject a {
    color: #6B5E58 !important;
    font-weight: 400 !important;
}

.messagelist tr td.fromto {
    color: #8B7D75 !important;
}

.messagelist tr td.date {
    color: #A69B94 !important;
}

/* UNREAD messages — dark, bold, prominent */
.messagelist tr.unread td {
    background-color: #FFFFFF !important;
    color: #2D2420 !important;
}

.messagelist tr.unread td.subject a {
    color: #2D2420 !important;
    font-weight: 700 !important;
}

.messagelist tr.unread td.fromto {
    color: #2D2420 !important;
    font-weight: 600 !important;
}

.messagelist tr.unread td.date {
    color: #4A3F3A !important;
    font-weight: 500 !important;
}

/* Message row hover */
.messagelist tr:hover td {
    background-color: #EDE9E4 !important;
}

.messagelist tr.unread:hover td {
    background-color: #FAF9F7 !important;
}

/* Selected message — burgundy tint */
.messagelist tr.selected td {
    background-color: #FBF0EF !important;
}

/* Focused selected message */
.messagelist tr.selected.focused td {
    background-color: #F5DCD9 !important;
}

/* Unread indicator dot — burgundy */
.messagelist td.subject span.msgicon.status:before {
    color: #BC3227 !important;
}

/* Flagged star — gold accent */
.messagelist tr span.flagged:before {
    color: #C4A35A !important;
}

/* Pagination footer */
.pagenav,
.listbox .footer {
    background-color: #F8F7F5 !important;
    border-top: 1px solid #EDE9E4 !important;
}

/* ============================================================
   5. CONTENT / MESSAGE PREVIEW PANEL
   ============================================================ */

/* Override: #layout-content{background-color:#fff} */
#layout-content {
    background-color: #FFFFFF !important;
}

/* Watermark (empty state 3D box) */
.watermark {
    background-color: #FAF9F7 !important;
}

/* Message header area */
#message-header {
    background-color: #FAF9F7 !important;
    border-bottom: 1px solid #EDE9E4 !important;
}

#message-header .subject {
    color: #2D2420 !important;
    font-weight: 600;
}

#message-header a {
    color: #BC3227 !important;
}

#message-header a:hover {
    color: #9A2A20 !important;
}

/* ============================================================
   6. TOP TOOLBAR (Reply, Forward, Delete…)
   ============================================================ */

#layout > div > .header {
    background-color: #F8F7F5 !important;
    border-bottom: 1px solid #EDE9E4 !important;
}

/* Toolbar icons */
.toolbar a.button,
a.toolbar-button {
    color: #4A3F3A !important;
}

.toolbar a.button:hover,
a.toolbar-button:hover,
.header a.button.icon:not(.disabled):focus,
.header a.button.icon:not(.disabled):hover {
    color: #BC3227 !important;
    background-color: #F0EDEA !important;
}

.toolbar a.button.disabled,
.toolbar a.button[aria-disabled="true"] {
    color: #C4BBB5 !important;
}

/* List selectors (Select, Threads, Options) */
.menu.toolbar a {
    color: #4A3F3A !important;
}

.menu.toolbar a:hover {
    color: #BC3227 !important;
}

/* Pagination nav arrows */
.menu.pagenav a:before {
    color: #6B5E58 !important;
}

/* ============================================================
   7. PRIMARY ACCENT — replace ALL #37beff with #BC3227
   ============================================================ */

/* Buttons */
.btn-primary {
    background-color: #BC3227 !important;
    background: #BC3227 !important;
    border-color: #BC3227 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #9A2A20 !important;
    border-color: #9A2A20 !important;
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.35) !important;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: #8A2219 !important;
}

.button.mainaction,
a.button.mainaction {
    background-color: #BC3227 !important;
    border-color: #BC3227 !important;
    color: #FFFFFF !important;
}

.button.mainaction:hover {
    background-color: #9A2A20 !important;
    border-color: #9A2A20 !important;
}

/* Secondary buttons */
.btn-secondary {
    color: #BC3227 !important;
    border-color: #BC3227 !important;
}

.btn-secondary:hover {
    background-color: #BC3227 !important;
    color: #FFFFFF !important;
}

/* ============================================================
   8. LINKS — burgundy instead of blue
   ============================================================ */

a {
    color: #BC3227;
}

a:hover {
    color: #9A2A20;
}

/* ============================================================
   9. FORM FOCUS STATES — burgundy rings instead of blue
   ============================================================ */

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #BC3227 !important;
    box-shadow: 0 0 0 3px rgba(188, 50, 39, 0.1) !important;
}

/* ============================================================
   10. CHECKBOXES / TOGGLES / RADIOS — burgundy
   ============================================================ */

/* Override: border-color:#37beff + background-color:#37beff */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #BC3227 !important;
    border-color: #BC3227 !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #BC3227 !important;
    background-color: #BC3227 !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #FFFFFF !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    border-color: #BC3227 !important;
    box-shadow: 0 0 0 3px rgba(188, 50, 39, 0.12) !important;
}

/* ============================================================
   11. POPOVER / DROPDOWN MENUS
   ============================================================ */

.popover {
    border: 1px solid #EDE9E4 !important;
    box-shadow: 0 4px 16px rgba(45, 36, 32, 0.1) !important;
}

.popover-header {
    background-color: #F4F2EF !important;
    border-bottom: 1px solid #EDE9E4 !important;
}

/* Override: .popupmenu .listing li.selected{background-color:#37beff} */
.popupmenu .listing li.selected {
    color: #fff !important;
    background-color: #BC3227 !important;
}

.popover .menu li a:hover,
.popupmenu li a:hover {
    background-color: #FBF0EF !important;
    color: #BC3227 !important;
}

/* ============================================================
   12. TABS (Settings, etc.)
   ============================================================ */

.nav-tabs .nav-link.active {
    color: #BC3227 !important;
    border-bottom-color: #BC3227 !important;
}

.nav-tabs .nav-link:hover {
    color: #9A2A20 !important;
}

/* ============================================================
   13. COMPOSE VIEW
   ============================================================ */

.formbuttons .btn-primary,
#compose-send-btn {
    background-color: #BC3227 !important;
    border-color: #BC3227 !important;
}

.formbuttons .btn-primary:hover,
#compose-send-btn:hover {
    background-color: #9A2A20 !important;
}

#compose-content .header,
#compose-attachments,
#composestatusbar {
    background-color: #F8F7F5 !important;
}

/* ============================================================
   14. CONTACTS VIEW
   ============================================================ */

.contact-header {
    background-color: #FAF9F7 !important;
    border-bottom: 1px solid #EDE9E4 !important;
}

/* ============================================================
   15. DIALOGS / MODALS
   ============================================================ */

.ui-dialog .ui-dialog-titlebar {
    background-color: #F8F7F5 !important;
    border-bottom: 1px solid #EDE9E4 !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus {
    background-color: rgba(188, 50, 39, 0.15) !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-button.btn-primary {
    background-color: #BC3227 !important;
    border-color: #BC3227 !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-button.btn-primary:hover {
    background-color: #9A2A20 !important;
}

/* ============================================================
   16. NOTIFICATION TOASTS — replace #37beff info color
   ============================================================ */

/* Override: #messagestack .alert-info.information{background-color:#37beff} */
#messagestack .alert-info.information {
    background-color: #BC3227 !important;
}

/* Override: #messagestack .alert-success{background-color:#37beff} */
/* Actually success is green #41b849 — keep that.
   The default Roundcube uses #37beff for the info toast. */

/* ============================================================
   17. DATEPICKER — replace #37beff highlights
   ============================================================ */

.ui-datepicker a.ui-state-active {
    background: #BC3227 !important;
}

.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-state-highlight {
    background: #FBF0EF !important;
}

/* ============================================================
   18. FLOATING ACTION BUTTON (mobile compose)
   ============================================================ */

.floating-action-buttons a.button {
    background-color: #BC3227 !important;
    color: #FFFFFF !important;
}

.floating-action-buttons a.button:hover {
    background-color: #9A2A20 !important;
}

/* ============================================================
   19. QUOTA / PROGRESS
   ============================================================ */

.quotadisplay .bar,
.quota-widget:before,
.ui-progressbar-value,
.progress-bar {
    background-color: #BC3227 !important;
}

/* ============================================================
   20. LOADING SPINNER
   ============================================================ */

.loading::after {
    border-top-color: #BC3227 !important;
}

/* ============================================================
   21. SCROLLBARS (webkit)
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #F6F5F2;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(45, 36, 32, 0.18);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(45, 36, 32, 0.3);
}

/* ============================================================
   22. SELECTION LARGE MODE — override transparent fallback
   ============================================================ */

/* Override: .listing.selection-large-only li.selected{background-color:transparent} */
.listing.selection-large-only li.selected {
    background-color: #FBF0EF !important;
}

/* ============================================================
   23. RESPONSIVE (mobile)
   ============================================================ */

@media screen and (max-width: 768px) {
    #taskmenu {
        background: linear-gradient(180deg, #2D2420 0%, #241C19 100%) !important;
    }

    #taskmenu a {
        border-radius: 10px !important;
        margin: 2px 4px !important;
    }

    #taskmenu a.selected {
        background: #BC3227 !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 10px rgba(188, 50, 39, 0.4) !important;
    }

    .floating-action-buttons a.button {
        box-shadow: 0 4px 12px rgba(188, 50, 39, 0.3) !important;
    }

    #layout-sidebar > .header {
        background: linear-gradient(135deg, #2D2420, #3D322E) !important;
    }
}

/* ============================================================
   24. PRINT (neutral)
   ============================================================ */

@media print {
    #taskmenu, .toolbar, #layout-sidebar, #layout-menu {
        background-color: transparent !important;
    }
}