/**
 * Colectivo Radio Patio - Roundcube Custom Theme Colors
 * Overrides default Elastic skin styles to match the brand palette
 */

:root {
    --brand-blue: #004CFF;
    --brand-blue-light: #4D80FF;
    --brand-orange: #FF6A00;
    --brand-pink: #F7ACC4;
    --brand-sage: #76836C;
    --brand-white: #FFFFFF;
    --brand-black: #020202;
}

/* ==========================================
   1. GLOBAL LINKS & BUTTONS
   ========================================== */
a {
    color: var(--brand-blue);
}

a:hover,
a:focus,
a:active {
    color: var(--brand-orange);
}

/* Cuerpo del correo: no imponer colores de marca; respetar estilos inline del remitente */
html.iframe a,
html.iframe a:link,
html.iframe a:visited,
html.iframe a:hover,
html.iframe a:focus,
html.iframe a:active,
#messagepreview a,
#messagepreview a:link,
#messagepreview a:visited,
#messagepreview a:hover,
#messagepreview a:focus,
#messagepreview a:active,
#messagebody a,
#messagebody a:link,
#messagebody a:visited,
#messagebody a:hover,
#messagebody a:focus,
#messagebody a:active {
    color: unset;
    text-decoration: unset;
}

.btn-primary,
.button.primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
    font-weight: bold !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.button.primary:hover,
.button.primary:focus {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
}

.btn-link {
    color: var(--brand-blue);
}

.btn-link:hover {
    color: var(--brand-orange);
}

/* Focus outline overrides */
.form-control:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 76, 255, 0.25) !important;
}

/* ==========================================
   2. LEFT MENU / TASKMENU (Ultra-sleek brand-black)
   ========================================== */
#layout-menu {
    background-color: var(--brand-black) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#layout-menu .popover-header {
    background-color: var(--brand-black) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#taskmenu a,
#taskmenu .button {
    color: rgba(255, 255, 255, 0.7) !important;
}

#taskmenu a:hover,
#taskmenu .button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--brand-white) !important;
}

/* Active item in taskmenu: brand-blue background, white text */
#taskmenu a.selected,
#taskmenu .button.selected {
    background-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
    border-left: 4px solid var(--brand-orange) !important; /* Touch of brand orange active indicator */
}

/* Special button: Compose / Redactar (brand-black background, brand-orange text, no borders) */
#taskmenu a.compose,
#taskmenu .button.compose {
    background-color: var(--brand-black) !important;
    color: var(--brand-orange) !important;
    border: none !important;
    font-weight: bold !important;
    opacity: 0.95;
}

#taskmenu a.compose:hover,
#taskmenu .button.compose:hover {
    background-color: rgba(255, 106, 0, 0.1) !important;
    color: var(--brand-orange) !important;
    opacity: 1;
}

/* FAB móvil (lapicero): Elastic usa @color-main cyan */
.floating-action-buttons a.button,
.floating-action-buttons a.button.compose {
    background-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 0 5px 5px rgba(0, 76, 255, 0.25) !important;
}

.floating-action-buttons a.button:hover,
.floating-action-buttons a.button.compose:hover {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 0 5px 5px rgba(255, 106, 0, 0.25) !important;
}

/* Special buttons at the bottom of taskmenu: brand-black background */
#taskmenu .special-buttons,
#taskmenu .special-buttons a,
#taskmenu .special-buttons .button {
    background-color: var(--brand-black) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

#taskmenu .special-buttons a:hover,
#taskmenu .special-buttons .button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--brand-white) !important;
}

/* ==========================================
   3. SELECTIONS & ACTIVE ITEMS (Folders & Messages)
   ========================================== */
/* Folder list & List groups active/selected items */
.listbox li.selected > a,
.listbox li.selected > span,
.treelist li.selected > a,
.treelist li.selected > span,
.treelist li.selected > div,
.list-group-item.active,
.list-group-item.selected {
    background-color: var(--brand-pink) !important;
    color: var(--brand-black) !important;
    border-color: var(--brand-pink) !important;
}

.listbox li.selected > a *,
.listbox li.selected > span *,
.treelist li.selected > a *,
.treelist li.selected > span *,
.treelist li.selected > div *,
.list-group-item.active * {
    color: var(--brand-black) !important;
}

/* Email list: selected email row */
.messagelist tr.selected td,
.messagelist tr.selected td a {
    background-color: var(--brand-pink) !important;
    color: var(--brand-black) !important;
}

/* Hover effects */
.listbox li:hover > a,
.listbox li:hover > span,
.treelist li:hover > a,
.treelist li:hover > span,
.treelist li:hover > div,
.list-group-item:hover {
    background-color: rgba(247, 172, 196, 0.15) !important;
}

.messagelist tr:hover td {
    background-color: rgba(247, 172, 196, 0.1) !important;
}

/* Swipe (móvil): no pelear con la fila mientras se desliza; evita saltos de color/layout */
.messagelist tr.swipe-active td,
.messagelist tr.swipe-active.selected td,
.messagelist tr.swipe-active.selected td a {
    background-color: inherit !important;
}
html.layout-phone .messagelist tr,
html.layout-small .messagelist tr {
    touch-action: pan-y;
}
html.layout-phone .messagelist tr.swipe-active,
html.layout-small .messagelist tr.swipe-active {
    touch-action: none;
}

/* Force everything in selected list rows to be black for high legibility */
.messagelist tr.selected td,
.messagelist tr.selected td a,
.messagelist tr.selected td span,
.messagelist tr.selected td.fromto,
.messagelist tr.selected td.date,
.messagelist tr.selected td.subject a,
.messagelist tr.selected td.subject span.fromto,
.messagelist tr.selected td.subject span.date,
.messagelist tr.selected td.subject span.size {
    color: var(--brand-black) !important;
}

/* ==========================================
   4. BADGES & COUNTS (Elastic: .unreadcount, no .badge)
   ========================================== */
.badge,
.unread-count,
.unreadcount,
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
.listbox li.selected > a .unread-count,
.listbox li.selected > a .unreadcount,
.treelist li.selected > a .unread-count,
.treelist li.selected > a .unreadcount {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
    font-weight: bold !important;
    border-radius: 10px !important;
}

/* Carpetas "recent": no usar el cyan de Elastic */
.folderlist li.mailbox.recent > a {
    color: var(--brand-orange) !important;
}

/* ==========================================
   4b. POPUP / CONTEXT MENUS (hover = @color-main cyan)
   ========================================== */
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.popupmenu .listing li.selected > a,
.popover-body .listing li > a:not(.disabled):hover,
.popover-body .listing li.selected,
.popover-body .listing li.selected > a {
    background-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
}

.popupmenu .listing li > a:not(.disabled):hover *,
.popupmenu .listing li.selected *,
.popupmenu .listing li.selected > a *,
.popover-body .listing li > a:not(.disabled):hover *,
.popover-body .listing li.selected *,
.popover-body .listing li.selected > a * {
    color: var(--brand-white) !important;
}

/* ==========================================
   5. TYPOGRAPHIC HIERARCHY & TEXT COLORS (Light mode)
   ========================================== */
/* Subjects: Bold and brand-black for primary readability */
.messagelist td.subject a,
.messagelist td.subject {
    color: var(--brand-black) !important;
}

.messagelist tr.unread td.subject a,
.messagelist tr.unread td.subject {
    font-weight: bold !important;
}

/* Senders, dates & sizes: Dark grey (readable but secondary to subjects) */
.messagelist td.fromto.skip-on-drag,
.messagelist td.fromto.skip-on-drag a,
.messagelist td.date.skip-on-drag,
.messagelist td.subject span.fromto,
.messagelist td.subject span.date,
.messagelist td.subject span.size {
    color: #444444 !important;
}

/* ==========================================
   6. DARK MODE OVERRIDES (Ultra-dark brand-black)
   ========================================== */
.dark-mode,
.dark-mode #layout,
.dark-mode #layout-sidebar,
.dark-mode #layout-list,
.dark-mode #layout-content,
.dark-mode .listbox,
.dark-mode .treelist,
.dark-mode .messagelist,
.dark-mode .messagelist td,
.dark-mode #messageheader,
.dark-mode #messagepreview,
.dark-mode #messagecontframe,
.dark-mode .ui-dialog,
.dark-mode .popover {
    background-color: var(--brand-black) !important;
    color: var(--brand-white) !important;
}

/* Subjects: White in dark mode */
.dark-mode .messagelist td.subject a,
.dark-mode .messagelist td.subject {
    color: var(--brand-white) !important;
}

.dark-mode .messagelist tr.unread td.subject a,
.dark-mode .messagelist tr.unread td.subject {
    font-weight: bold !important;
}

/* Senders, dates & sizes: Light grey in dark mode */
.dark-mode .messagelist td.fromto.skip-on-drag,
.dark-mode .messagelist td.fromto.skip-on-drag a,
.dark-mode .messagelist td.date.skip-on-drag,
.dark-mode .messagelist td.subject span.fromto,
.dark-mode .messagelist td.subject span.date,
.dark-mode .messagelist td.subject span.size {
    color: #cccccc !important;
}

/* Logo opacity in dark mode popover-header */
.dark-mode .popover-header img,
.dark-mode .popover-header #logo,
.dark-mode #layout-menu #logo {
    opacity: 1 !important;
    filter: none !important;
}

/* Selected states in dark mode: brand-pink background, brand-black text for high contrast */
.dark-mode .listbox li.selected > a,
.dark-mode .listbox li.selected > span,
.dark-mode .treelist li.selected > a,
.dark-mode .treelist li.selected > span,
.dark-mode .treelist li.selected > div,
.dark-mode .list-group-item.active,
.dark-mode .list-group-item.selected,
.dark-mode .messagelist tr.selected td,
.dark-mode .messagelist tr.selected td a,
.dark-mode .messagelist tr.selected td span,
.dark-mode .messagelist tr.selected td.fromto,
.dark-mode .messagelist tr.selected td.date,
.dark-mode .messagelist tr.selected td.subject a,
.dark-mode .messagelist tr.selected td.subject span.fromto,
.dark-mode .messagelist tr.selected td.subject span.date,
.dark-mode .messagelist tr.selected td.subject span.size {
    background-color: var(--brand-pink) !important;
    color: var(--brand-black) !important;
    border-color: var(--brand-pink) !important;
}

.dark-mode .listbox li.selected > a *,
.dark-mode .listbox li.selected > span *,
.dark-mode .treelist li.selected > a *,
.dark-mode .treelist li.selected > span *,
.dark-mode .treelist li.selected > div *,
.dark-mode .list-group-item.active *,
.dark-mode .messagelist tr.selected td * {
    color: var(--brand-black) !important;
}

/* Revert replied status and attachment icons to their default dark gray color when selected in dark mode */
/* This overrides the dark-mode native filter: invert(1) without introducing solid background squares */
.dark-mode .messagelist tr.selected td .msgicon,
.dark-mode .messagelist tr.selected td .attachment,
.dark-mode .messagelist tr.selected td span.msgicon {
    filter: none !important;
}

/* Badges y menús popup también en dark mode */
.dark-mode .badge,
.dark-mode .unread-count,
.dark-mode .unreadcount,
.dark-mode .folderlist li.mailbox .unreadcount,
.dark-mode .folderlist li.mailbox.recent > a > .unreadcount {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
}

.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
.dark-mode .popupmenu .listing li.selected,
.dark-mode .popupmenu .listing li.selected > a,
.dark-mode .popover-body .listing li > a:not(.disabled):hover,
.dark-mode .popover-body .listing li.selected,
.dark-mode .popover-body .listing li.selected > a {
    background-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
}