/* MEH Studios — Custom Overrides */

/* ══════════════════════════════════════════════════════════════
   LOGOS
══════════════════════════════════════════════════════════════ */
#layout-menu .popover-header img {
    content: url('../images/favicon.svg');
    max-height: 58px; max-width: 150px; padding: .25rem;
}
#logo { content: url('../images/favicon.svg'); height: 40px; width: auto; }
.task-login #logo { height: 80px; width: auto; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — #21292c → #151517
══════════════════════════════════════════════════════════════ */
html.dark-mode body                                          { background-color: #151517 !important; }
html.dark-mode #layout-menu .special-buttons a:not(:focus)  { background: #151517; }
html.dark-mode .listing li.selected ul                       { background-color: #151517; }
html.dark-mode .custom-file-label,
html.dark-mode .form-control                                 { background-color: #151517; color: #c5d1d3; }
html.dark-mode .formcontent.raweditor .CodeMirror            { background-color: #151517; }
html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-dialog__body,
html.dark-mode .tox .tox-dialog__footer,
html.dark-mode .tox .tox-dialog__header                      { background-color: #151517; }
html.dark-mode .message-part blockquote                      { background-color: #151517; }
html.dark-mode .message-part blockquote span.blockquote-link { background: #151517; }
html.dark-mode .ui-widget-content,
html.dark-mode .ui-widget-header                             { background-color: #151517; }
html.dark-mode .nav-tabs .nav-link:hover,
html.dark-mode .nav-tabs .nav-link.active                    { background: #151517; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — selected states
   Override both the <li> AND the <a> child (Roundcube puts the
   background on the <a>, not the <li>)
══════════════════════════════════════════════════════════════ */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .table-widget table.options-table tr.selected td,
html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected                      { background-color: #1e1e21 !important; }

/* Hover/focus → one step brighter */
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus    { background-color: #252528 !important; }

/* Form focus background */
html.dark-mode .form-control:focus,
html.dark-mode .custom-select:focus                          { background-color: #1e1e21 !important; }

/* Compose — recipient chips & input row */
html.dark-mode .recipient-input                              { background-color: #151517 !important; }
html.dark-mode .recipient-input .recipient                   { background-color: #1e1e21 !important; }

/* Compose — TinyMCE editor shell */
html.dark-mode .tox,
html.dark-mode .tox .tox-toolbar__primary,
html.dark-mode .tox .tox-toolbar-overlord,
html.dark-mode .tox .tox-sidebar-wrap,
html.dark-mode .tox .tox-statusbar                          { background-color: #151517 !important; border-color: #2a2a2d !important; }
html.dark-mode .tox .tox-editor-header,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-toolbar__overflow                  { background: #1a1a1c !important; }
html.dark-mode .tox .tox-toolbar__group                     { border-color: #2a2a2d !important; }
html.dark-mode .tox .tox-mbtn                               { color: #c5d1d3 !important; }
html.dark-mode .tox .tox-mbtn:hover:not(:disabled)          { background-color: #1e1e21 !important; }

/* Toolbar / header bar */
html.dark-mode .header                                       { background-color: #1a1a1c !important; border-color: #2a2a2d !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — sidebar & selected states
   #layout-menu gets background-color:#2f3a3f for 481px+ screens
   in Roundcube's own CSS; override it here for light mode.
   Also override the <a> child where Roundcube puts the highlight.
══════════════════════════════════════════════════════════════ */
html:not(.dark-mode) #layout-menu                            { background-color: #fff !important; }
html:not(.dark-mode) #layout-menu .popover-header             { background-color: #fff !important; }

/* Icon text is #fff in 481px+ breakpoint — flip to dark on white bg */
html:not(.dark-mode) #taskmenu a,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a:hover                       { color: #2c363a !important; }

/* Selected state */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing li.selected > div > a,
html:not(.dark-mode) ul.treelist li.selected > a,
html:not(.dark-mode) ul.treelist li.selected > div > a,
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) .table-widget table.options-table tr.selected td,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) .menu.toolbar a.selected                { background-color: #e8e8eb !important; color: #2c363a !important; }

/* Hover/focus */
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus,
html:not(.dark-mode) .header a.button.icon:not(.disabled):hover,
html:not(.dark-mode) .header a.button.icon:not(.disabled):focus { background-color: #f0f0f2 !important; }

/* Sidebar special-buttons area */
html:not(.dark-mode) #taskmenu .special-buttons              { background-color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — dark mode
══════════════════════════════════════════════════════════════ */
html.dark-mode #taskmenu,
html.dark-mode #taskmenu .special-buttons                    { background-color: #151517 !important; }

/* ══════════════════════════════════════════════════════════════
   POPOVERS — fix always-dark .popover in light mode
══════════════════════════════════════════════════════════════ */
.popover                                  { background-color: #fff;     border-color: rgba(0,0,0,.15); }
.popover .menu li.separator               { background-color: #f1f3f4; }
html.dark-mode .popover                   { background-color: #1c1c1e; border-color: #3a3a3c; }
html.dark-mode .popover .menu li.separator { background-color: transparent; }

/* ══════════════════════════════════════════════════════════════
   SEPARATORS — subtle row dividers + breathing room
══════════════════════════════════════════════════════════════ */
html.dark-mode table.messages tbody tr,
html.dark-mode .listing li,
html.dark-mode .listing td                                   { border-color: rgba(255,255,255,0.05) !important; }

html:not(.dark-mode) table.messages tbody tr,
html:not(.dark-mode) .listing li,
html:not(.dark-mode) .listing td                             { border-color: rgba(0,0,0,0.07) !important; }

/* More breathing room between email rows */
table.messages tbody tr.message td                           { padding-top: 6px !important; padding-bottom: 6px !important; }

/* Date / thread group sticky headers */
html.dark-mode .listing tr.thead td,
html.dark-mode .listing li.thead                             { background-color: #111113 !important; border-color: rgba(255,255,255,0.05) !important; }
html:not(.dark-mode) .listing tr.thead td,
html:not(.dark-mode) .listing li.thead                      { background-color: #f5f5f7 !important; }

/* ══════════════════════════════════════════════════════════════
   ROUNDED CORNERS — global
══════════════════════════════════════════════════════════════ */

/* Dialogs */
.ui-dialog                                              { border-radius: 16px !important; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar                          { border-radius: 16px 16px 0 0 !important; }
.ui-dialog .ui-dialog-buttonpane                        { border-radius: 0 0 16px 16px !important; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn { border-radius: 8px !important; }

/* Alert / notice boxes */
.ui.alert                                               { border-radius: 10px !important; }

/* All buttons */
.btn,
a.button.icon                                           { border-radius: 8px !important; }

/* Form inputs — standalone */
.form-control,
.custom-select                                          { border-radius: 8px !important; }

/* Input groups — keep connected edges flat */
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .custom-select:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.input-group > .form-control:first-child:not(:last-child),
.input-group > .custom-select:first-child:not(:last-child)       { border-radius: 8px 0 0 8px !important; }
.input-group > .form-control:last-child:not(:first-child),
.input-group > .custom-select:last-child:not(:first-child)       { border-radius: 0 8px 8px 0 !important; }
.input-group-prepend .input-group-text                           { border-radius: 8px 0 0 8px !important; }
.input-group-append  .input-group-text                           { border-radius: 0 8px 8px 0 !important; }
.input-group-text                                                { border-radius: 8px !important; }

/* Popovers & menus */
.popover                                                { border-radius: 14px !important; }
.popover-header                                         { border-radius: 14px 14px 0 0 !important; }
.menu                                                   { border-radius: 10px !important; overflow: hidden; }

/* TinyMCE container */
.tox                                                    { border-radius: 8px !important; overflow: hidden; }

/* Recipient chips */
.recipient-input li.recipient                           { border-radius: 6px !important; }

/* Unread badges */
.folderlist li .unreadcount                             { border-radius: 6px !important; }

/* Search bar */
.searchbar                                              { border-radius: 8px !important; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE — modern centered card
══════════════════════════════════════════════════════════════ */
.task-login #layout {
    display: flex !important; align-items: center; justify-content: center;
    min-height: 100vh;
    background: linear-gradient(145deg, #0d0d0f 0%, #151517 70%, #0d1520 100%);
}
.task-login #layout-content {
    position: static;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .7), 0 0 0 1px rgba(55, 190, 255, .05);
    width: 90%; max-width: 400px; text-align: center;
}
.task-login #logo          { position: static !important; top: auto !important; margin: 0 auto 1.5rem; display: block; }
#login-form                { position: static !important; top: auto !important; max-width: 100%; width: 100%; margin: 0; }
.task-login .form-control  { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: #e0e0e0 !important; }
.task-login .form-control:focus { background: rgba(255, 255, 255, .08) !important; border-color: #37beff !important; box-shadow: 0 0 0 .15rem rgba(55, 190, 255, .25) !important; color: #fff !important; }
.task-login .input-group-text { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .4) !important; }
.task-login .formbuttons .btn,
.task-login #rcmloginsubmit { background: linear-gradient(135deg, #37beff, #0099dd) !important; border: none !important; width: 100%; font-weight: 600 !important; color: #fff !important; padding: .6rem 1rem; margin-top: .5rem; }
.task-login .formbuttons .btn:hover,
.task-login #rcmloginsubmit:hover { opacity: .9; box-shadow: 0 4px 20px rgba(55, 190, 255, .4); }
#login-footer > div { background: transparent !important; padding: 0; border: none; }
#login-footer       { margin-top: 1.5rem; font-size: .85rem; color: rgba(255, 255, 255, .3); }
.support-link       { color: #37beff !important; text-decoration: none; }
.support-link:hover { color: #7dd4ff !important; }