/* =====================================================
   HupHulp Mail - Custom Theme for Roundcube Elastic
   Brand: #E53E30 (red) → #FF6B35 (orange)
   ===================================================== */

/* ==================== SYSTEM FONT ==================== */
html, body, input, textarea, select, button,
.ui-widget, .ui-dialog, #layout * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
        Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
body { background: #f5f6f8 !important; }

/* ==================== LEFT MENU PANEL (always dark) ==================== */
#layout-menu {
    background: linear-gradient(180deg, #1e242c 0%, #262d37 100%) !important;
    border-right: none !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08) !important;
    width: 220px !important;
    min-width: 220px !important;
}

/* ==================== LOGO ==================== */
/* Logo in the left menu bar */
#layout-menu #logo,
#layout-menu a#logo img {
    display: block !important;
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
    max-width: 180px !important;
    margin: 18px auto 10px !important;
    object-fit: contain !important;
}

/* Logo on login page */
.task-login #logo,
.task-login #layout-content #logo {
    display: block !important;
    height: 90px !important;
    width: auto !important;
    max-height: 90px !important;
    max-width: 240px !important;
    top: 12vh !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* ==================== TASKMENU (navigation) ==================== */
/* Remove the fake ::before/::after logo elements */
#taskmenu::before,
#taskmenu::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#taskmenu {
    display: flex !important;
    flex-direction: column !important;
    padding: 4px 8px !important;
    padding-bottom: 150px !important;
    gap: 2px !important;
}

/* Menu links - horizontal icon + label layout */
#taskmenu a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.85) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: nowrap !important;
    float: none !important;
    position: relative !important;
}

/* Icon - inline, not floated */
#taskmenu a::before {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    float: none !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
}

/* Label text - ALWAYS visible on desktop */
#taskmenu span.inner {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    color: inherit !important;
}

/* Hover */
#taskmenu a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* Selected state */
#taskmenu a.selected {
    background: rgba(229,62,48,0.18) !important;
    color: #fff !important;
}
#taskmenu a.selected::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #E53E30, #FF6B35) !important;
    display: block !important;
    height: auto !important;
}

/* Compose / action buttons */
#taskmenu .action-buttons {
    display: block !important;
    width: 100% !important;
}
#taskmenu .action-buttons a {
    color: #FF6B35 !important;
}
#taskmenu .action-buttons a:hover {
    background: rgba(255,107,53,0.15) !important;
}

/* Logout */
#taskmenu a.logout { color: rgba(255,85,82,0.8) !important; }
#taskmenu a.logout:hover { color: #ff5552 !important; background: rgba(255,85,82,0.12) !important; }

/* Special buttons (about, darkmode, logout) - absolute at bottom, full width */
#taskmenu .special-buttons {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    padding: 6px 8px 10px !important;
    background: #1e242c !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
#taskmenu .special-buttons a {
    width: 100% !important;
}

/* ==================== HEADERS ==================== */
.header,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header {
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
}
.header a.button,
.header .toolbar a {
    border-radius: 8px !important;
    transition: all 0.12s ease !important;
}
.header a.button:hover,
.header .toolbar a:hover {
    background: rgba(229,62,48,0.07) !important;
    color: #E53E30 !important;
}

/* ==================== SIDEBAR (Folder list) ==================== */
#layout-sidebar {
    background: #fff !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
    min-width: 200px !important;
}
#mailboxlist li a {
    border-radius: 8px !important;
    margin: 1px 6px !important;
    padding: 7px 10px !important;
    transition: all 0.12s ease !important;
    font-size: 13.5px !important;
    font-weight: 450 !important;
    color: #333 !important;
}
#mailboxlist li a:hover { background: rgba(0,0,0,0.03) !important; }
#mailboxlist li.selected > a,
#mailboxlist li a.focused {
    background: rgba(229,62,48,0.06) !important;
    color: #c0352a !important;
    font-weight: 600 !important;
}
.folderlist li a:before {
    color: #888 !important;
}
#mailboxlist li.selected > a:before,
#mailboxlist li a.focused:before {
    color: #c0352a !important;
}

/* Unread badges */
.unreadcount,
#mailboxlist .unreadcount {
    background: linear-gradient(135deg, #E53E30, #FF6B35) !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    min-width: 20px !important;
    text-align: center !important;
    border: none !important;
}

/* ==================== MESSAGE LIST ==================== */
#layout-list {
    background: #fff !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
}
.messagelist tr { border-bottom: 1px solid rgba(0,0,0,0.04) !important; }
.messagelist tr:hover { background: rgba(0,0,0,0.015) !important; }
.messagelist tr.selected td { background: rgba(229,62,48,0.05) !important; }
.messagelist tr.unread td { font-weight: 600 !important; }
.messagelist td.subject span { font-size: 13.5px !important; }

/* ==================== BUTTONS ==================== */
.btn-primary, button.btn-primary, a.btn-primary,
input.btn-primary, #rcmloginsubmit {
    background: linear-gradient(135deg, #E53E30, #FF6B35) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(229,62,48,0.2) !important;
    transition: all 0.2s ease !important;
    color: #fff !important;
}
.btn-primary:hover, button.btn-primary:hover,
a.btn-primary:hover, #rcmloginsubmit:hover {
    background: linear-gradient(135deg, #d13528, #e85e2e) !important;
    box-shadow: 0 4px 14px rgba(229,62,48,0.3) !important;
}
.btn-secondary, button.btn-secondary {
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

/* ==================== INPUT FIELDS ==================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
textarea, select, .form-control {
    border-radius: 8px !important;
    border: 1.5px solid rgba(0,0,0,0.12) !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    background: #fff !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: #E53E30 !important;
    box-shadow: 0 0 0 3px rgba(229,62,48,0.1) !important;
    outline: none !important;
}

/* ==================== LOGIN PAGE ==================== */
#login-form {
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    max-width: 420px !important;
}
#login-form .box-inner {
    padding: 32px !important;
    border: none !important;
    box-shadow: none !important;
}
#login-form #rcmloginsubmit,
#login-form .btn-primary {
    width: 100% !important;
    padding: 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    margin-top: 8px !important;
}
#login-body, body.task-login { background: #f5f6f8 !important; }
.task-login .voice { display: none !important; }

/* ==================== CONTENT AREA ==================== */
#layout-content { background: #fafbfc !important; }

/* ==================== DROPDOWNS ==================== */
.popupmenu, .dropdown-menu, .ui-dialog {
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
    padding: 5px !important;
    overflow: hidden !important;
}
.dropdown-menu a:hover, .popupmenu li a:hover {
    background: rgba(229,62,48,0.06) !important;
    color: #E53E30 !important;
}

/* ==================== SCROLLBARS ==================== */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18) !important; }

/* ==================== MISC UI ==================== */
.loading::after {
    border-color: rgba(229,62,48,0.15) !important;
    border-top-color: #E53E30 !important;
}
::selection { background: rgba(229,62,48,0.12) !important; color: inherit !important; }
.searchbar { border-radius: 8px !important; }
.searchbar:focus-within { box-shadow: 0 0 0 3px rgba(229,62,48,0.08) !important; }

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, #E53E30, #FF6B35) !important;
    border-color: #E53E30 !important;
}
input[type="checkbox"]:checked { accent-color: #E53E30 !important; }

/* Alerts */
.boxwarning { border-radius: 10px !important; border: none !important; background: rgba(255,212,82,0.12) !important; color: #8a6914 !important; }
.boxerror { border-radius: 10px !important; border: none !important; background: rgba(229,62,48,0.08) !important; color: #c0392b !important; }
.boxconfirmation { border-radius: 10px !important; border: none !important; background: rgba(65,184,73,0.08) !important; color: #27ae60 !important; }
.boxinformation { border-radius: 10px !important; border: none !important; background: rgba(55,190,255,0.08) !important; color: #2980b9 !important; }

/* Content links */
#layout-content a:not(.button):not(.btn):not(.toolbar a) { color: #E53E30 !important; }
/* Navigation inherits its own color - don't override */
.messagelist a, .messagelist td,
#mailboxlist a, .folderlist a,
.toolbar a, .header a { color: inherit !important; }


/* ================================================================
   DARK MODE
   ================================================================ */
html.dark-mode body,
html.dark-mode { background: #1a1d23 !important; }

/* Dark headers */
html.dark-mode .header,
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
    background: #22262e !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Dark panels */
html.dark-mode #layout-sidebar { background: #1e2128 !important; border-right-color: rgba(255,255,255,0.06) !important; }
html.dark-mode #layout-list { background: #1e2128 !important; border-right-color: rgba(255,255,255,0.06) !important; }
html.dark-mode #layout-content { background: #1a1d23 !important; }

/* Dark left menu - darker gradient */
html.dark-mode #layout-menu {
    background: linear-gradient(180deg, #141720 0%, #1a1e28 100%) !important;
}
html.dark-mode #taskmenu .special-buttons {
    background: #141720 !important;
}

/* Dark mode text for sidebar / list / content */
html.dark-mode #layout-sidebar,
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-sidebar .header *,
html.dark-mode #layout-sidebar .footer,
html.dark-mode #layout-sidebar .footer * { color: #d8d8d8 !important; }

html.dark-mode #layout-list,
html.dark-mode #layout-list .header,
html.dark-mode #layout-list .header *,
html.dark-mode #layout-list .footer,
html.dark-mode #layout-list .footer * { color: #d8d8d8 !important; }

html.dark-mode #layout-content .header,
html.dark-mode #layout-content .header * { color: #d8d8d8 !important; }

html.dark-mode #mailboxlist li a { color: #c8c8c8 !important; }
html.dark-mode .folderlist li a:before { color: #999 !important; }
html.dark-mode .messagelist td,
html.dark-mode .messagelist td a,
html.dark-mode .messagelist td.subject span { color: #d0d0d0 !important; }

/* Dark mode bold for unread */
html.dark-mode .messagelist tr.unread td,
html.dark-mode .messagelist tr.unread td span,
html.dark-mode .messagelist tr.unread td a { color: #fff !important; }

/* Dark mode list borders */
html.dark-mode .messagelist tr { border-bottom-color: rgba(255,255,255,0.05) !important; }
html.dark-mode .messagelist tr:hover { background: rgba(255,255,255,0.03) !important; }
html.dark-mode .messagelist tr.selected td { background: rgba(229,62,48,0.1) !important; }

/* Dark mailbox selected */
html.dark-mode #mailboxlist li.selected > a { background: rgba(229,62,48,0.12) !important; color: #ff8a7a !important; }
html.dark-mode #mailboxlist li.selected > a:before { color: #ff8a7a !important; }

/* Dark unread badge */
html.dark-mode .folderlist li.mailbox .unreadcount { background: rgba(229,62,48,0.85) !important; color: #fff !important; }

/* Dark mode inputs */
html.dark-mode input[type="text"], html.dark-mode input[type="email"],
html.dark-mode input[type="password"], html.dark-mode input[type="search"],
html.dark-mode textarea, html.dark-mode select, html.dark-mode .form-control {
    background: #2a2e38 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e0 !important;
}
html.dark-mode input:focus, html.dark-mode textarea:focus,
html.dark-mode select:focus, html.dark-mode .form-control:focus {
    background: #2e323e !important;
    border-color: #E53E30 !important;
    box-shadow: 0 0 0 3px rgba(229,62,48,0.15) !important;
}

/* Dark dropdowns */
html.dark-mode .popupmenu, html.dark-mode .dropdown-menu {
    background: #2a2e38 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .popupmenu li a,
html.dark-mode .dropdown-menu a { color: #d8d8d8 !important; }
html.dark-mode .dropdown-menu a:hover,
html.dark-mode .popupmenu li a:hover { background: rgba(229,62,48,0.12) !important; color: #ff8a7a !important; }

/* Dark scrollbars */
html.dark-mode ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1) !important; }

/* Dark login */
html.dark-mode #login-form { background: #22262e !important; border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode #login-form * { color: #d8d8d8 !important; }
html.dark-mode .task-login, html.dark-mode body.task-login { background: #1a1d23 !important; }

/* Dark alerts */
html.dark-mode .boxinformation { background: rgba(55,190,255,0.06) !important; color: #6cb8e6 !important; }
html.dark-mode .boxwarning { background: rgba(255,212,82,0.06) !important; color: #d4ad3a !important; }
html.dark-mode .boxerror { background: rgba(229,62,48,0.08) !important; color: #ff7b7b !important; }
html.dark-mode .boxconfirmation { background: rgba(65,184,73,0.06) !important; color: #6ad674 !important; }

/* Dark buttons */
html.dark-mode .btn-primary, html.dark-mode .btn-primary *,
html.dark-mode #rcmloginsubmit { color: #fff !important; }
html.dark-mode .btn-secondary, html.dark-mode button.btn-secondary {
    background: #2a2e38 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0e0e0 !important;
}

/* Dark cards & containers */
html.dark-mode .box-inner, html.dark-mode .formcontainer,
html.dark-mode .propform, html.dark-mode .contentbox {
    background: #22262e !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Dark footer */
html.dark-mode .footer,
html.dark-mode #layout-sidebar .footer,
html.dark-mode #layout-list .footer {
    background: #1e2128 !important;
    border-top-color: rgba(255,255,255,0.06) !important;
}

/* Dark listing */
html.dark-mode .listing li, html.dark-mode .listing li ul,
html.dark-mode .listing tbody td { border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .listing li a, html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a { color: #d0d0d0 !important; }
html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td { background-color: rgba(229,62,48,0.1) !important; color: #ff8a7a !important; }

/* Dark mode misc */
html.dark-mode .searchbar { border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .searchbar input,
html.dark-mode .searchbar a,
html.dark-mode .searchbar form:before { color: #d0d0d0 !important; }

/* Tab navigation in dark */
html.dark-mode .nav-tabs { border-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .nav-tabs .nav-link { color: #bbb !important; }
html.dark-mode .nav-tabs .nav-link.active { color: #fff !important; border-color: rgba(255,255,255,0.08) !important; background: #22262e !important; }


/* ================================================================
   RESPONSIVE
   ================================================================ */
/* Tablet: icons only */
@media screen and (max-width: 1024px) {
    #layout-menu {
        width: 60px !important;
        min-width: 60px !important;
    }
    #taskmenu {
        padding: 4px !important;
        padding-bottom: 130px !important;
    }
    #taskmenu a {
        padding: 10px !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    #taskmenu span.inner {
        display: none !important;
    }
    #taskmenu a::before {
        margin: 0 !important;
    }
    #layout-menu #logo,
    #layout-menu a#logo img {
        height: 30px !important;
        max-height: 30px !important;
        margin: 10px auto 4px !important;
    }
    #taskmenu .special-buttons {
        padding: 4px !important;
    }
}

/* Mobile: full-width slide-out menu */
@media screen and (max-width: 480px) {
    #layout-menu {
        width: auto !important;
        min-width: auto !important;
    }
    #taskmenu {
        padding: 0 !important;
        padding-bottom: 0 !important;
    }
    #taskmenu a {
        padding: 0 .5em !important;
        text-align: left !important;
        line-height: 47px !important;
        height: 47px !important;
        border-radius: 0 !important;
        gap: 8px !important;
        color: #2c363a !important;
        font-size: 1.2rem !important;
    }
    #taskmenu a:before {
        float: left !important;
        width: 1.2em !important;
        margin-right: .5rem !important;
    }
    #taskmenu span.inner {
        display: inline !important;
        font-size: 100% !important;
    }
    #taskmenu .special-buttons {
        position: relative !important;
        width: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        background: transparent !important;
        border-top: none !important;
        padding: 0 !important;
    }
    html.dark-mode #taskmenu a { color: #d8d8d8 !important; }
}