/*
 * SOGo Custom Modern Grayscale Theme
 * Replaces green colors with modern white and gray scheme
 * Futuristic and professional design
 */

/* Main accent colors - from green to modern gray */
.md-button.md-default-theme.md-accent, .md-button.md-accent {
    color: rgb(100, 100, 100) !important;
}

.md-button.md-default-theme.md-accent.md-fab, .md-button.md-accent.md-fab,
.md-button.md-default-theme.md-accent.md-raised, .md-button.md-accent.md-raised {
    background-color: rgb(120, 120, 120) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.md-button.md-default-theme.md-accent.md-fab:not([disabled]) md-icon, .md-button.md-accent.md-fab:not([disabled]) md-icon,
.md-button.md-default-theme.md-accent.md-raised:not([disabled]) md-icon, .md-button.md-accent.md-raised:not([disabled]) md-icon {
    color: rgba(255, 255, 255, 0.87) !important;
}

.md-button.md-default-theme.md-accent.md-fab:not([disabled]).md-focused, .md-button.md-accent.md-fab:not([disabled]).md-focused,
.md-button.md-default-theme.md-accent.md-fab:not([disabled]):hover, .md-button.md-accent.md-fab:not([disabled]):hover,
.md-button.md-default-theme.md-accent.md-raised:not([disabled]).md-focused, .md-button.md-accent.md-raised:not([disabled]).md-focused,
.md-button.md-default-theme.md-accent.md-raised:not([disabled]):hover, .md-button.md-accent.md-raised:not([disabled]):hover {
    background-color: rgb(140, 140, 140) !important;
}

/* Input focus colors */
md-autocomplete.md-default-theme.md-accent md-input-container.md-input-focused .md-input, 
md-autocomplete.md-accent md-input-container.md-input-focused .md-input {
    border-color: rgb(120, 120, 120) !important;
}

/* Fondo con Gradiente Institucional - Tonos Dorados y Terracota */
.view.md-default-theme.md-background.md-hue-1.md-bg {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 30%, #E3DAC9 60%, #D4AF37 100%) !important;
    position: relative !important;
}

.view.md-default-theme.md-background.md-hue-1.md-bg::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
        radial-gradient(circle at 20% 50%, rgba(173, 87, 64, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(196, 149, 106, 0.3) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Logo Superior Centrado sobre Gradiente */
.sg-logo-top {
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Logo para Desktop */
.sg-logo-desktop {
    max-width: 340px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)) !important;
}

/* Texto para Móvil - Oculto por defecto */
.sg-logo-mobile-text {
    display: none !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 15px !important;
    line-height: 1.4 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.3px !important;
}

/* Panel Login Centrado */
.sg-login {
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Logo en móvil - Mostrar texto, ocultar imagen */
@media screen and (max-width: 768px) {
    .sg-logo-top {
        padding: 20px 15px !important;
    }
    
    .sg-logo-desktop {
        display: none !important;
    }
    
    .sg-logo-mobile-text {
        display: block !important;
        font-size: 15px !important;
    }
}

@media screen and (max-width: 480px) {
    .sg-logo-top {
        padding: 15px 10px !important;
    }
    
    .sg-logo-mobile-text {
        font-size: 13px !important;
        padding: 0 10px !important;
    }
}

/* Login Moderno - Estilo Glassmorphism con Fondo Blur */
.sg-login-content-modern {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
    padding: 45px 50px !important;
    max-width: 540px !important;
    width: 90% !important;
    margin: 0 auto !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Panel Derecho - Fondo Transparente */
.sg-login.md-default-theme.md-bg.md-accent {
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Icono Decorativo del Login con Efectos */
.sg-login-icon {
    text-align: center !important;
    margin-bottom: 25px !important;
    position: relative !important;
}

.sg-icon-mail {
    font-size: 56px !important;
    width: 56px !important;
    height: 56px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #AD5740 0%, #D4AF37 100%) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 8px 24px rgba(173, 87, 64, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
    position: relative !important;
    z-index: 1 !important;
}

.sg-icon-mail::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%) !important;
    border-radius: 24px !important;
    z-index: -1 !important;
}

/* Mensaje de Bienvenida - Estilo Institucional */
.sg-welcome-message {
    text-align: center !important;
    margin-bottom: 35px !important;
    padding: 0 !important;
}

.sg-welcome-title {
    color: #AD5740 !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0.5px !important;
}

.sg-welcome-subtitle {
    color: #C4956A !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Inputs Modernos con Bordes Redondeados */
.sg-login-content-modern md-input-container {
    margin-bottom: 22px !important;
}

.sg-login-content-modern md-input-container .md-input {
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(196, 149, 106, 0.4) !important;
    font-size: 15px !important;
    color: #2d3748 !important;
}

.sg-login-content-modern md-input-container.md-input-focused .md-input {
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25) !important;
    border-color: #D4AF37 !important;
}

.sg-login-content-modern md-input-container label {
    color: #AD5740 !important;
    font-size: 14px !important;
}

/* Botón de Login - Estilo Moderno Minimalista */
.sg-btn-login {
    border-radius: 12px !important;
    width: 100% !important;
    min-width: auto !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #AD5740 0%, #D4AF37 100%) !important;
    box-shadow: 0 4px 15px rgba(173, 87, 64, 0.3) !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
    margin-top: 15px !important;
    text-transform: none !important;
    border: none !important;
}

.sg-btn-login:hover {
    box-shadow: 0 6px 20px rgba(173, 87, 64, 0.4) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #D4AF37 0%, #AD5740 100%) !important;
}

.sg-btn-login:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(173, 87, 64, 0.3) !important;
}

.sg-btn-login:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Iconos de los inputs */
.sg-login-content-modern md-input-container md-icon {
    color: #AD5740 !important;
}

/* Responsive para login moderno */
@media screen and (max-width: 960px) {
    .sg-login-content-modern {
        max-width: 500px !important;
        padding: 40px 45px !important;
    }
    
    .sg-logo-responsive {
        max-width: 240px !important;
    }
}

@media screen and (max-width: 768px) {
    .sg-login-content-modern {
        max-width: 90% !important;
        padding: 35px 35px !important;
        border-radius: 20px !important;
    }
    
    .sg-icon-mail {
        font-size: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .sg-welcome-title {
        font-size: 24px !important;
    }
    
    .sg-logo-responsive {
        max-width: 200px !important;
    }
}

@media screen and (max-width: 480px) {
    .sg-login-content-modern {
        max-width: 95% !important;
        padding: 30px 25px !important;
    }
    
    .sg-icon-mail {
        font-size: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }
    
    .sg-welcome-title {
        font-size: 22px !important;
    }
    
    .sg-logo-responsive {
        max-width: 160px !important;
    }
}

/* Header del Ministerio - Panel Izquierdo */
.sg-header-ministerio {
    background: linear-gradient(135deg, #787878 0%, #606060 100%) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 12px 20px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 0 8px 8px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sg-header-text {
    max-width: 800px !important;
    line-height: 1.4 !important;
}

/* Responsive para header del ministerio */
@media screen and (max-width: 768px) {
    .sg-header-ministerio {
        padding: 10px 15px !important;
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }
}

@media screen and (max-width: 480px) {
    .sg-header-ministerio {
        padding: 8px 10px !important;
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }
}

md-autocomplete.md-default-theme.md-accent md-input-container.md-input-focused label, 
md-autocomplete.md-accent md-input-container.md-input-focused label,
md-autocomplete.md-default-theme.md-accent md-input-container.md-input-focused md-icon, 
md-autocomplete.md-accent md-input-container.md-input-focused md-icon {
    color: rgb(120, 120, 120) !important;
}

md-autocomplete.md-default-theme.md-accent md-progress-linear .md-container, 
md-autocomplete.md-accent md-progress-linear .md-container {
    background-color: rgb(245, 245, 245) !important;
}

md-autocomplete.md-default-theme.md-accent md-progress-linear .md-bar, 
md-autocomplete.md-accent md-progress-linear .md-bar {
    background-color: rgb(120, 120, 120) !important;
}

/* FAB buttons */
.md-button.md-default-theme.md-fab, .md-button.md-fab {
    background-color: rgb(120, 120, 120) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

.md-button.md-default-theme.md-fab md-icon, .md-button.md-fab md-icon {
    color: rgba(255, 255, 255, 0.87) !important;
}

.md-button.md-default-theme.md-fab:not([disabled]).md-focused, .md-button.md-fab:not([disabled]).md-focused,
.md-button.md-default-theme.md-fab:not([disabled]):hover, .md-button.md-fab:not([disabled]):hover {
    background-color: rgb(140, 140, 140) !important;
}

/* Login form specific styling */
.sg-login {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.sg-login-content {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 30px !important;
}

/* Modern input styling */
md-input-container.md-default-theme.md-input-focused .md-input, 
md-input-container.md-input-focused .md-input {
    border-color: rgb(120, 120, 120) !important;
}

md-input-container.md-default-theme.md-input-focused label, 
md-input-container.md-input-focused label,
md-input-container.md-default-theme.md-input-focused md-icon, 
md-input-container.md-input-focused md-icon {
    color: rgb(120, 120, 120) !important;
}

/* Switch styling */
md-switch.md-default-theme.md-accent .md-bar, md-switch.md-accent .md-bar {
    background-color: rgba(120, 120, 120, 0.5) !important;
}

md-switch.md-default-theme.md-accent .md-thumb, md-switch.md-accent .md-thumb {
    background-color: rgb(120, 120, 120) !important;
}

md-switch.md-default-theme.md-accent[checked] .md-bar, md-switch.md-accent[checked] .md-bar {
    background-color: rgba(120, 120, 120, 0.5) !important;
}

md-switch.md-default-theme.md-accent[checked] .md-thumb, md-switch.md-accent[checked] .md-thumb {
    background-color: rgb(120, 120, 120) !important;
}

/* Select dropdown styling */
md-select.md-default-theme.md-input-focused:not([disabled]).md-accent .md-select-value, 
md-select.md-input-focused:not([disabled]).md-accent .md-select-value {
    border-color: rgb(120, 120, 120) !important;
    color: rgb(120, 120, 120) !important;
}

md-select.md-default-theme:not([disabled]).md-accent .md-select-value, 
md-select:not([disabled]).md-accent .md-select-value {
    color: rgb(120, 120, 120) !important;
}

md-select-menu.md-default-theme md-option.md-accent[selected], 
md-select-menu md-option.md-accent[selected] {
    color: rgb(120, 120, 120) !important;
}

md-select-menu.md-default-theme md-option.md-accent[selected]:focus, 
md-select-menu md-option.md-accent[selected]:focus {
    color: rgb(120, 120, 120) !important;
    background-color: rgba(120, 120, 120, 0.1) !important;
}

/* Ripple effects */
sg-ripple.md-default-theme.md-accent.md-bg, sg-ripple.md-accent.md-bg {
    background-color: rgb(120, 120, 120) !important;
}

sg-ripple.md-default-theme.md-accent.md-bg.md-warn, sg-ripple.md-accent.md-bg.md-warn {
    background-color: rgb(180, 180, 180) !important;
}

/* Toolbar and navigation */
md-toolbar.md-default-theme:not(.md-menu-toolbar).md-accent, 
md-toolbar:not(.md-menu-toolbar).md-accent {
    background-color: rgb(100, 100, 100) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Progress indicators */
md-progress-circular.md-default-theme.md-accent .md-inner-circle, 
md-progress-circular.md-accent .md-inner-circle {
    border-color: rgb(120, 120, 120) !important;
}

/* Checkbox and radio styling */
md-checkbox.md-default-theme.md-accent[checked] .md-icon, 
md-checkbox.md-accent[checked] .md-icon {
    background-color: rgb(120, 120, 120) !important;
}

md-radio-button.md-default-theme.md-accent[checked] .md-on, 
md-radio-button.md-accent[checked] .md-on {
    background-color: rgb(120, 120, 120) !important;
}

/* Slider styling */
md-slider.md-default-theme.md-accent .md-track.md-track-fill, 
md-slider.md-accent .md-track.md-track-fill {
    background-color: rgb(120, 120, 120) !important;
}

md-slider.md-default-theme.md-accent .md-thumb:after, 
md-slider.md-accent .md-thumb:after {
    background-color: rgb(120, 120, 120) !important;
    border-color: rgb(120, 120, 120) !important;
}

/* Tabs styling */
md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar, 
md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar {
    background: rgb(120, 120, 120) !important;
    color: rgb(120, 120, 120) !important;
}

/* List styling */
md-list-item.md-default-theme.md-accent > .md-no-style, 
md-list-item.md-accent > .md-no-style {
    color: rgb(120, 120, 120) !important;
}

/* Card styling */
md-card.md-default-theme.md-accent, md-card.md-accent {
    border-color: rgb(120, 120, 120) !important;
}

/* Subheader styling */
md-subheader.md-default-theme.md-accent, md-subheader.md-accent {
    color: rgb(120, 120, 120) !important;
}

/* Divider styling */
md-divider.md-default-theme.md-accent, md-divider.md-accent {
    border-top-color: rgb(120, 120, 120) !important;
}

/* Icon styling */
md-icon.md-default-theme.md-accent, md-icon.md-accent {
    color: rgb(120, 120, 120) !important;
}

/* Modern background for the entire login page */
.view.md-default-theme.md-background.md-hue-1.md-bg {
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 50%, #e5e5e5 100%) !important;
    min-height: 100vh !important;
}

/* Enhanced logo container */
.sg-logo {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 15px 0 0 15px !important;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.05) !important;
}

.sg-logo img {
    filter: grayscale(20%) brightness(1.1) !important;
    transition: transform 0.3s ease !important;
}

.sg-logo img:hover {
    transform: scale(1.05) !important;
}

/* Futuristic form enhancements */
#loginContent {
    background: transparent !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Modern input field styling */
md-input-container .md-input {
    border-radius: 8px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

md-input-container .md-input:focus {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 15px rgba(120, 120, 120, 0.2) !important;
}

/* Enhanced button styling */
.md-button.md-fab {
    border-radius: 50% !important;
    box-shadow: 0 6px 20px rgba(120, 120, 120, 0.3) !important;
    transition: all 0.3s ease !important;
}

.md-button.md-fab:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(120, 120, 120, 0.4) !important;
}

/* Language selector modernization */
md-select {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

md-select:focus {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 15px rgba(120, 120, 120, 0.2) !important;
}

/* Error states with modern gray */
md-input-container.md-input-invalid .md-input {
    border-color: rgb(150, 150, 150) !important;
}

md-input-container.md-input-invalid label, 
md-input-container.md-input-invalid md-icon {
    color: rgb(150, 150, 150) !important;
}

/* Success states */
md-input-container.md-input-valid .md-input {
    border-color: rgb(130, 130, 130) !important;
}

/* Loading animation modernization */
md-progress-circular {
    border-color: rgb(120, 120, 120) !important;
}

/* Responsive design adjustments */
@media (max-width: 960px) {
    .sg-login {
        border-radius: 15px 15px 0 0 !important;
    }
    
    .sg-logo {
        border-radius: 15px 15px 0 0 !important;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05) !important;
    }
}

/* Dark mode support for modern theme */
@media (prefers-color-scheme: dark) {
    .view.md-default-theme.md-background.md-hue-1.md-bg {
        background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 50%, #141414 100%) !important;
    }
    
    .sg-login {
        background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%) !important;
    }
    
    .sg-login-content {
        background: rgba(40, 40, 40, 0.95) !important;
        color: #ffffff !important;
    }
    
    md-input-container .md-input {
        background: rgba(60, 60, 60, 0.8) !important;
        color: #ffffff !important;
    }
    
    md-input-container .md-input:focus {
        background: rgba(80, 80, 80, 1) !important;
    }
}

/* Mobile-specific fixes for Android */
@media screen and (max-width: 768px) {
    /* Force override green colors on mobile */
    .md-button.md-accent,
    .md-button.md-default-theme.md-accent,
    .md-button.md-primary,
    .md-button.md-default-theme.md-primary {
        background-color: rgb(120, 120, 120) !important;
        color: rgba(255, 255, 255, 0.87) !important;
        border-color: rgb(120, 120, 120) !important;
    }
    
    .md-button.md-accent.md-fab,
    .md-button.md-default-theme.md-accent.md-fab,
    .md-button.md-primary.md-fab,
    .md-button.md-default-theme.md-primary.md-fab {
        background-color: rgb(120, 120, 120) !important;
        color: rgba(255, 255, 255, 0.87) !important;
    }
    
    /* Override any remaining green elements */
    [class*="accent"],
    [class*="primary"] {
        background-color: rgb(120, 120, 120) !important;
        border-color: rgb(120, 120, 120) !important;
        color: rgba(255, 255, 255, 0.87) !important;
    }
    
    /* Input elements on mobile */
    md-input-container.md-input-focused .md-input,
    md-input-container.md-input-focused label,
    md-input-container.md-input-focused md-icon {
        border-color: rgb(120, 120, 120) !important;
        color: rgb(120, 120, 120) !important;
    }
    
    /* Switch elements on mobile */
    md-switch.md-accent .md-thumb,
    md-switch.md-default-theme.md-accent .md-thumb {
        background-color: rgb(120, 120, 120) !important;
    }
    
    md-switch.md-accent[checked] .md-bar,
    md-switch.md-default-theme.md-accent[checked] .md-bar {
        background-color: rgba(120, 120, 120, 0.5) !important;
    }
    
    /* Select dropdown on mobile */
    md-select.md-accent .md-select-value,
    md-select.md-default-theme.md-accent .md-select-value {
        border-color: rgb(120, 120, 120) !important;
        color: rgb(120, 120, 120) !important;
    }
    
    /* Progress indicators on mobile */
    md-progress-circular.md-accent .md-inner-circle,
    md-progress-circular.md-default-theme.md-accent .md-inner-circle {
        border-color: rgb(120, 120, 120) !important;
    }
    
    /* Checkbox and radio on mobile */
    md-checkbox.md-accent[checked] .md-icon,
    md-checkbox.md-default-theme.md-accent[checked] .md-icon {
        background-color: rgb(120, 120, 120) !important;
    }
    
    md-radio-button.md-accent[checked] .md-on,
    md-radio-button.md-default-theme.md-accent[checked] .md-on {
        background-color: rgb(120, 120, 120) !important;
    }
    
    /* Force login form colors on mobile */
    .sg-login,
    .sg-login-content {
        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
    }
    
    /* Android WebView specific fixes */
    @supports (-webkit-touch-callout: none) {
        .md-button.md-accent,
        .md-button.md-default-theme.md-accent {
            background-color: rgb(120, 120, 120) !important;
            color: rgba(255, 255, 255, 0.87) !important;
        }
        
        md-input-container.md-input-focused .md-input {
            border-color: rgb(120, 120, 120) !important;
        }
    }
}

/* Additional Android-specific overrides */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .md-button.md-accent,
    .md-button.md-default-theme.md-accent {
        background-color: rgb(120, 120, 120) !important;
        color: rgba(255, 255, 255, 0.87) !important;
    }
    
    md-input-container.md-input-focused .md-input {
        border-color: rgb(120, 120, 120) !important;
    }
    
    .sg-login {
        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
    }
}

/* Force override any remaining green with higher specificity */
.view.md-default-theme.md-background.md-hue-1.md-bg main .sg-login .md-button.md-accent,
.view.md-default-theme.md-background.md-hue-1.md-bg main .sg-login .md-button.md-default-theme.md-accent,
.view.md-default-theme.md-background.md-hue-1.md-bg main .sg-login .md-button.md-primary,
.view.md-default-theme.md-background.md-hue-1.md-bg main .sg-login .md-button.md-default-theme.md-primary {
    background-color: rgb(120, 120, 120) !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border-color: rgb(120, 120, 120) !important;
}

/* ============================================
   INTERFAZ INTERNA DE SOGo - COLORES INSTITUCIONALES
   Sidebar, Toolbar, Mail List, etc.
   ============================================ */

/* Sidebar izquierdo - Panel de navegación */
md-sidenav.md-default-theme.md-accent,
md-sidenav.md-accent,
.sg-sidenav,
.md-sidenav-left,
md-sidenav {
    background: linear-gradient(180deg, #AD5740 0%, #C4956A 100%) !important;
    color: #fff !important;
}

/* Toolbar superior del sidebar (usuario y email) */
md-toolbar.sg-padded.md-hue-2.md-tall,
md-toolbar.md-default-theme.md-accent.sg-padded,
md-toolbar.md-accent.sg-padded {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 100%) !important;
    color: #fff !important;
}

/* Toolbar superior principal (Bandeja de entrada) */
md-toolbar.md-default-theme:not(.md-menu-toolbar).md-accent,
md-toolbar:not(.md-menu-toolbar).md-accent,
md-toolbar.md-default-theme.md-primary,
md-toolbar.md-primary {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 100%) !important;
    color: #fff !important;
}

/* Texto en sidebar y toolbar */
md-toolbar .sg-md-title,
md-toolbar p,
md-toolbar .md-caption,
md-sidenav p,
md-sidenav .sg-md-title {
    color: #fff !important;
}

/* Iconos en sidebar y toolbar */
md-toolbar md-icon,
md-sidenav md-icon {
    color: #fff !important;
}

/* Botones en sidebar y toolbar */
md-toolbar .md-icon-button,
md-sidenav .md-icon-button {
    color: #fff !important;
}

md-toolbar .md-icon-button:hover,
md-sidenav .md-icon-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Lista de carpetas en sidebar */
md-list-item.md-default-theme.md-accent,
md-list-item.md-accent,
md-list-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

md-list-item.md-default-theme.md-accent:hover,
md-list-item.md-accent:hover,
md-list-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Carpeta seleccionada en sidebar */
md-list-item.md-default-theme.md-accent.md-selected,
md-list-item.md-accent.md-selected,
md-list-item.md-selected {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Iconos de carpetas en sidebar */
md-list-item md-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Área de contenido principal (lista de correos) */
md-content.md-default-theme,
md-content {
    background-color: #E3DAC9 !important;
}

/* Fondo de la lista de correos */
.sg-mail-list,
.mail-list,
md-list {
    background-color: #E3DAC9 !important;
}

/* Items de la lista de correos */
md-list-item.md-default-theme:not(.md-accent),
md-list-item:not(.md-accent) {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(196, 149, 106, 0.3) !important;
}

md-list-item.md-default-theme:not(.md-accent):hover,
md-list-item:not(.md-accent):hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Mensaje seleccionado en lista de correos - Sobrescribir verde */
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2,
md-list-item.md-accent.md-bg.md-hue-2,
md-list-item.md-bg.md-hue-2,
.view-list md-list-item.md-default-theme.md-accent.md-bg.md-hue-2,
.view-list md-list-item.md-accent.md-bg.md-hue-2 {
    background: linear-gradient(135deg, rgba(173, 87, 64, 0.15) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
    border-left: 3px solid #AD5740 !important;
}

md-list-item.md-default-theme.md-accent.md-bg.md-hue-2:hover,
md-list-item.md-accent.md-bg.md-hue-2:hover {
    background: linear-gradient(135deg, rgba(173, 87, 64, 0.25) 0%, rgba(212, 175, 55, 0.25) 100%) !important;
}

/* Texto en mensaje seleccionado */
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .md-subhead,
md-list-item.md-accent.md-bg.md-hue-2 .md-subhead,
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .subject,
md-list-item.md-accent.md-bg.md-hue-2 .subject {
    color: #AD5740 !important;
    font-weight: 600 !important;
}

md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .md-body-1,
md-list-item.md-accent.md-bg.md-hue-2 .md-body-1,
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .sender,
md-list-item.md-accent.md-bg.md-hue-2 .sender {
    color: #2d3748 !important;
}

md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .md-caption,
md-list-item.md-accent.md-bg.md-hue-2 .md-caption,
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .date,
md-list-item.md-accent.md-bg.md-hue-2 .date {
    color: #C4956A !important;
}

md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 md-icon,
md-list-item.md-accent.md-bg.md-hue-2 md-icon {
    color: #AD5740 !important;
}

/* Texto en lista de correos */
md-list-item .md-list-item-text,
md-list-item p,
md-list-item span {
    color: #2d3748 !important;
}

/* Asunto del correo */
md-list-item .md-subhead,
md-list-item .subject {
    color: #AD5740 !important;
    font-weight: 500 !important;
}

/* Remitente del correo */
md-list-item .md-body-1,
md-list-item .sender {
    color: #2d3748 !important;
}

/* Fecha del correo */
md-list-item .md-caption,
md-list-item .date {
    color: #C4956A !important;
}

/* Separadores en lista de correos */
md-divider {
    border-top-color: rgba(196, 149, 106, 0.3) !important;
}

/* Barra de búsqueda */
md-toolbar .md-input,
md-toolbar input {
    color: #fff !important;
}

md-toolbar .md-input::placeholder,
md-toolbar input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Botones de acción en toolbar */
md-toolbar .md-button,
md-toolbar md-button {
    color: #fff !important;
}

md-toolbar .md-button:hover,
md-toolbar md-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   CORRECCIONES - Iconos, texto y toolbar verde
   ============================================ */

/* 1. Toolbar superior - Eliminar verde persistente */
md-toolbar.md-default-theme:not(.md-menu-toolbar).md-accent,
md-toolbar:not(.md-menu-toolbar).md-accent,
md-toolbar.md-default-theme.md-primary,
md-toolbar.md-primary,
md-toolbar.md-default-theme.md-accent.md-hue-2,
md-toolbar.md-accent.md-hue-2,
.view-list-header md-toolbar,
.view-list-header md-toolbar.md-default-theme,
.view-list-header md-toolbar.md-accent {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 100%) !important;
}

/* 2. Iconos de correos/links - Hacer visibles */
.view-list md-list-item md-icon,
.view-list md-list-item .md-icon,
md-list-item.md-default-theme:not(.md-accent) md-icon,
md-list-item:not(.md-accent) md-icon {
    color: #AD5740 !important;
    opacity: 1 !important;
}

md-list-item.md-default-theme:not(.md-accent) md-icon:hover,
md-list-item:not(.md-accent) md-icon:hover {
    color: #C4956A !important;
}

/* Icono de avatar en lista de correos */
.view-list md-list-item .sg-avatar,
.view-list md-list-item .sg-avatar md-icon,
md-list-item .sg-avatar md-icon {
    color: #AD5740 !important;
    opacity: 1 !important;
}

/* Iconos de acciones (estrella, adjunto, etc.) */
md-list-item .sg-star,
md-list-item .sg-attachment,
md-list-item .sg-unread-indicator {
    color: #D4AF37 !important;
    opacity: 1 !important;
}

/* 3. Texto del asunto - Mejorar visibilidad */
.view-list md-list-item .md-subhead,
.view-list md-list-item .subject,
.view-list md-list-item .md-list-item-text h3,
.view-list md-list-item .md-list-item-text .md-subhead {
    color: #AD5740 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Remitente en lista de correos */
.view-list md-list-item .md-body-1,
.view-list md-list-item .sender,
.view-list md-list-item .md-list-item-text .md-body-1 {
    color: #2d3748 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* Preview del correo (texto debajo del asunto) */
.view-list md-list-item .md-body-2,
.view-list md-list-item .preview,
.view-list md-list-item .md-list-item-text p {
    color: #4a5568 !important;
    opacity: 1 !important;
}

/* Fecha del correo */
.view-list md-list-item .md-caption,
.view-list md-list-item .date,
.view-list md-list-item .md-list-item-text .md-caption {
    color: #C4956A !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* Tamaño del correo */
.view-list md-list-item .size,
.view-list md-list-item .md-caption.size {
    color: #8b7355 !important;
    opacity: 1 !important;
}

/* Correos no leídos - texto más visible */
.view-list md-list-item.sg-unread .md-subhead,
.view-list md-list-item.sg-unread .subject,
md-list-item.sg-unread .md-subhead,
md-list-item.sg-unread .subject {
    color: #AD5740 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.view-list md-list-item.sg-unread .md-body-1,
.view-list md-list-item.sg-unread .sender,
md-list-item.sg-unread .md-body-1,
md-list-item.sg-unread .sender {
    color: #1a202c !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Avatar del usuario */
sg-avatar-image,
.sg-avatar {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Tooltip y menús desplegables */
md-menu-content,
.md-menu-content {
    background-color: #fff !important;
}

md-menu-content md-menu-item,
.md-menu-content md-menu-item {
    color: #2d3748 !important;
}

md-menu-content md-menu-item:hover,
.md-menu-content md-menu-item:hover {
    background: rgba(173, 87, 64, 0.1) !important;
}

/* Scrollbar personalizado para sidebar */
md-sidenav::-webkit-scrollbar,
.sg-sidenav::-webkit-scrollbar {
    width: 6px !important;
}

md-sidenav::-webkit-scrollbar-track,
.sg-sidenav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

md-sidenav::-webkit-scrollbar-thumb,
.sg-sidenav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
}

/* Contador de mensajes */
.sg-badge,
.md-badge {
    background: #D4AF37 !important;
    color: #fff !important;
}

/* Área de lectura de correo */
.sg-mail-content,
.mail-content,
md-content.md-default-theme.md-bg {
    background-color: #E3DAC9 !important;
}

/* Encabezado del correo abierto */
.sg-mail-header,
.mail-header {
    background: linear-gradient(135deg, rgba(173, 87, 64, 0.1) 0%, rgba(196, 149, 106, 0.1) 100%) !important;
    border-bottom: 2px solid #AD5740 !important;
}

/* Botones de acción del correo (responder, reenviar, etc.) */
.sg-mail-actions .md-button,
.mail-actions .md-button {
    background: linear-gradient(135deg, #AD5740 0%, #D4AF37 100%) !important;
    color: #fff !important;
}

.sg-mail-actions .md-button:hover,
.mail-actions .md-button:hover {
    background: linear-gradient(135deg, #D4AF37 0%, #AD5740 100%) !important;
}

/* Subheaders en la interfaz */
md-subheader.md-default-theme,
md-subheader {
    background-color: rgba(173, 87, 64, 0.1) !important;
    color: #AD5740 !important;
}

/* Chips y tags */
md-chip.md-default-theme,
md-chip {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 100%) !important;
    color: #fff !important;
}

/* FAB buttons (botones flotantes) */
md-fab-speed-dial .md-fab,
.md-fab {
    background: linear-gradient(135deg, #AD5740 0%, #D4AF37 100%) !important;
}

md-fab-speed-dial .md-fab:hover,
.md-fab:hover {
    background: linear-gradient(135deg, #D4AF37 0%, #AD5740 100%) !important;
}

/* Tabs en la interfaz */
md-tabs.md-default-theme md-tabs-wrapper,
md-tabs md-tabs-wrapper {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 100%) !important;
}

md-tabs.md-default-theme .md-tab,
md-tabs .md-tab {
    color: rgba(255, 255, 255, 0.7) !important;
}

md-tabs.md-default-theme .md-tab.md-active,
md-tabs .md-tab.md-active {
    color: #fff !important;
}

md-tabs.md-default-theme md-ink-bar,
md-tabs md-ink-bar {
    background: #D4AF37 !important;
    color: #D4AF37 !important;
}

/* Dialogs y modales */
md-dialog.md-default-theme,
md-dialog {
    background: #fff !important;
}

md-dialog md-toolbar {
    background: linear-gradient(135deg, #AD5740 0%, #C4956A 100%) !important;
    color: #fff !important;
}

/* Switches y toggles */
md-switch.md-default-theme.md-checked .md-thumb,
md-switch.md-checked .md-thumb {
    background: #AD5740 !important;
}

md-switch.md-default-theme.md-checked .md-bar,
md-switch.md-checked .md-bar {
    background: rgba(173, 87, 64, 0.5) !important;
}

/* Inputs dentro de la interfaz */
md-input-container.md-default-theme .md-input,
md-input-container .md-input {
    color: #2d3748 !important;
}

md-input-container.md-default-theme label,
md-input-container label {
    color: #AD5740 !important;
}

md-input-container.md-default-theme.md-input-focused .md-input,
md-input-container.md-input-focused .md-input {
    border-color: #D4AF37 !important;
}

/* Selects */
md-select.md-default-theme .md-select-value,
md-select .md-select-value {
    color: #2d3748 !important;
    border-bottom-color: rgba(196, 149, 106, 0.5) !important;
}

md-select.md-default-theme.md-focused .md-select-value,
md-select.md-focused .md-select-value {
    border-bottom-color: #D4AF37 !important;
}

/* Producción: sombra fuerte solo en asunto de lista (texto claro sobre fondo claro). */
body .view-list md-list-item:not(.sg-unread) .subject,
body .view-list md-list-item:not(.sg-unread) .md-subhead,
body .view-list md-list-item:not(.sg-unread) .md-list-item-text h3,
body .view-list md-list-item:not(.sg-unread) .md-list-item-text .md-subhead,
body md-list-item:not(.sg-unread) .subject,
body md-list-item:not(.sg-unread) .md-subhead,
body md-list-item:not(.sg-unread) .md-list-item-text h3,
body md-list-item:not(.sg-unread) .md-list-item-text .md-subhead,
.view-list md-list-item:not(.sg-unread) .subject,
.view-list md-list-item:not(.sg-unread) .md-subhead,
.view-list md-list-item:not(.sg-unread) .md-list-item-text h3,
.view-list md-list-item:not(.sg-unread) .md-list-item-text .md-subhead,
md-list-item:not(.sg-unread) .subject,
md-list-item:not(.sg-unread) .md-subhead,
md-list-item:not(.sg-unread) .md-list-item-text h3,
md-list-item:not(.sg-unread) .md-list-item-text .md-subhead {
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.35),
        1px -1px 0 rgba(0, 0, 0, 0.35),
        -1px 1px 0 rgba(0, 0, 0, 0.35),
        1px 1px 0 rgba(0, 0, 0, 0.35),
        0 0 6px rgba(0, 0, 0, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

body .view-list md-list-item.sg-unread .subject,
body .view-list md-list-item.sg-unread .md-subhead,
body .view-list md-list-item.sg-unread .md-list-item-text h3,
body .view-list md-list-item.sg-unread .md-list-item-text .md-subhead,
body md-list-item.sg-unread .subject,
body md-list-item.sg-unread .md-subhead,
body md-list-item.sg-unread .md-list-item-text h3,
body md-list-item.sg-unread .md-list-item-text .md-subhead,
.view-list md-list-item.sg-unread .subject,
.view-list md-list-item.sg-unread .md-subhead,
.view-list md-list-item.sg-unread .md-list-item-text h3,
.view-list md-list-item.sg-unread .md-list-item-text .md-subhead,
md-list-item.sg-unread .subject,
md-list-item.sg-unread .md-subhead,
md-list-item.sg-unread .md-list-item-text h3,
md-list-item.sg-unread .md-list-item-text .md-subhead {
    text-shadow:
        -1px -1px 0 rgba(40, 24, 18, 0.45),
        1px -1px 0 rgba(40, 24, 18, 0.45),
        -1px 1px 0 rgba(40, 24, 18, 0.45),
        1px 1px 0 rgba(40, 24, 18, 0.45),
        0 0 4px rgba(255, 255, 255, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Fila seleccionada en lista: solo asunto */
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .md-subhead,
md-list-item.md-accent.md-bg.md-hue-2 .md-subhead,
md-list-item.md-default-theme.md-accent.md-bg.md-hue-2 .subject,
md-list-item.md-accent.md-bg.md-hue-2 .subject {
    text-shadow:
        -1px -1px 0 rgba(40, 24, 18, 0.4),
        1px -1px 0 rgba(40, 24, 18, 0.4),
        -1px 1px 0 rgba(40, 24, 18, 0.4),
        1px 1px 0 rgba(40, 24, 18, 0.4),
        0 0 5px rgba(255, 255, 255, 0.6),
        0 2px 5px rgba(0, 0, 0, 0.28) !important;
}

/* Vista lectura mensaje (Mail/view): solo título de asunto — UIxMailViewTemplate h5.sg-md-headline */
.sg-face .sg-md-headline,
.sg-face h5.sg-md-headline {
    color: #2a1d14 !important;
    -webkit-text-fill-color: #2a1d14 !important;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.4),
        1px -1px 0 rgba(0, 0, 0, 0.4),
        -1px 1px 0 rgba(0, 0, 0, 0.4),
        1px 1px 0 rgba(0, 0, 0, 0.4),
        0 0 8px rgba(255, 255, 255, 0.95),
        0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* ---------------------------------------------------------------------------
   Bandeja de entrada (lista izquierda): sgMessageListItemMain usa .sg-tile-*
   (no .subject). Clase no leído = .unread (no .sg-unread). Solo esta lista.
   --------------------------------------------------------------------------- */
.sg-section-list md-list-item.sg-message-list-item .sg-tile-subject,
.sg-section-list md-list-item.sg-message-list-item .sg-tile-date,
.sg-section-list md-list-item.sg-message-list-item .sg-tile-size,
#messagesList md-list-item.sg-message-list-item .sg-tile-subject,
#messagesList md-list-item.sg-message-list-item .sg-tile-date,
#messagesList md-list-item.sg-message-list-item .sg-tile-size {
    color: #2a1d14 !important;
    -webkit-text-fill-color: #2a1d14 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.35),
        -1px 0 1px rgba(0, 0, 0, 0.15),
        1px 0 1px rgba(0, 0, 0, 0.15) !important;
}

.sg-section-list md-list-item.sg-message-list-item.unread .sg-tile-subject,
#messagesList md-list-item.sg-message-list-item.unread .sg-tile-subject {
    color: #8b2e1a !important;
    -webkit-text-fill-color: #8b2e1a !important;
    font-weight: 700 !important;
}

.sg-section-list md-list-item.sg-message-list-item.unread .sg-tile-date,
.sg-section-list md-list-item.sg-message-list-item.unread .sg-tile-size,
#messagesList md-list-item.sg-message-list-item.unread .sg-tile-date,
#messagesList md-list-item.sg-message-list-item.unread .sg-tile-size {
    color: #4a3428 !important;
    -webkit-text-fill-color: #4a3428 !important;
    font-weight: 600 !important;
}

/* Fila seleccionada (md-accent): mantener asunto/fecha/tamaño legibles sobre fondo claro */
.sg-section-list md-list-item.sg-message-list-item.md-accent.md-bg .sg-tile-subject,
.sg-section-list md-list-item.sg-message-list-item.md-accent.md-bg .sg-tile-date,
.sg-section-list md-list-item.sg-message-list-item.md-accent.md-bg .sg-tile-size,
#messagesList md-list-item.sg-message-list-item.md-accent.md-bg .sg-tile-subject,
#messagesList md-list-item.sg-message-list-item.md-accent.md-bg .sg-tile-date,
#messagesList md-list-item.sg-message-list-item.md-accent.md-bg .sg-tile-size {
    color: #1f140e !important;
    -webkit-text-fill-color: #1f140e !important;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.95),
        0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Mensajes no leídos (nuevos): resalte en bandeja — borde dorado + velo suave */
.sg-section-list md-list-item.sg-message-list-item.unread:not(.md-accent),
#messagesList md-list-item.sg-message-list-item.unread:not(.md-accent) {
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.22) 0%,
        rgba(227, 218, 201, 0.42) 14%,
        rgba(227, 218, 201, 0.12) 55%,
        transparent 100%
    ) !important;
    border-left: 4px solid #D4AF37 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.sg-section-list md-list-item.sg-message-list-item.unread:not(.md-accent):hover,
#messagesList md-list-item.sg-message-list-item.unread:not(.md-accent):hover {
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.32) 0%,
        rgba(255, 252, 245, 0.65) 18%,
        rgba(227, 218, 201, 0.35) 100%
    ) !important;
}

/* No leído y seleccionado: mantener indicador sin chocar con el gradiente de selección */
.sg-section-list md-list-item.sg-message-list-item.unread.md-accent.md-bg,
#messagesList md-list-item.sg-message-list-item.unread.md-accent.md-bg {
    border-left: 4px solid rgba(255, 230, 160, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(173, 87, 64, 0.2) !important;
}