/* ===================================================
   BRO NETWORK theme for Roundcube elastic skin
   Palette: #0d0e14 / #13141c / #1a1b26 / #c44569
   =================================================== */

/* ── CSS custom property overrides (dark mode) ── */
html.dark-mode {
    --color-background-body:        #0d0e14;
    --color-background-page:        #0d0e14;
    --color-background-input:       #13141c;
    --color-background-hover:       #1a1b26;
    --color-background-selected:    rgba(196,69,105,.15);
    --color-background-information: #1a1b26;
    --color-background-notice:      #1a1b26;
    --color-background-badge:       rgba(196,69,105,.25);
    --color-background-darker:      #0a0b10;

    --color-border:       #2a2b3d;
    --color-border-input: #2a2b3d;

    --color-font:           #c0c4e0;
    --color-font-secondary: #8b90b8;

    --color-link:  #c44569;
    --color-main:  #c44569;
    --color-email: #c44569;

    --color-toolbar-button:       #8b90b8;
    --color-toolbar-button-hover: #e2e4f0;
    --color-toolbar-button-background-hover: rgba(196,69,105,.12);

    --color-scrollbar: rgba(196,69,105,.3);

    --color-success:     #4caf50;
    --color-error:       #e53935;
    --color-warning:     #ffa000;
    --color-information: #1a1b26;
}

/* ── Body & page background ── */
html.dark-mode body,
html.dark-mode #messageframe,
html.dark-mode #layout {
    background: #0d0e14 !important;
    color: #c0c4e0 !important;
}

/* ── Header / toolbar strips ── */
html.dark-mode #header,
html.dark-mode .header,
html.dark-mode #toolbar,
html.dark-mode .toolbar,
html.dark-mode #topnav {
    background: #13141c !important;
    border-bottom-color: #2a2b3d !important;
}

/* ── Sidebar / list pane ── */
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode #folderlist-content,
html.dark-mode .scroller,
html.dark-mode .listarea {
    background: #13141c !important;
    border-right-color: #2a2b3d !important;
}

/* ── Content / reading pane ── */
html.dark-mode #layout-content,
html.dark-mode #messagecontent,
html.dark-mode #messagecontainer {
    background: #0d0e14 !important;
}

/* ── Message list rows ── */
html.dark-mode table.listing tbody tr,
html.dark-mode .listbox ul li,
html.dark-mode #messagelist tbody tr {
    border-bottom-color: #2a2b3d !important;
}
html.dark-mode table.listing tbody tr:hover,
html.dark-mode .listbox ul li:hover {
    background: #1a1b26 !important;
}
html.dark-mode table.listing tbody tr.selected,
html.dark-mode .listbox ul li.selected {
    background: rgba(196,69,105,.18) !important;
    color: #e2e4f0 !important;
}
html.dark-mode table.listing tbody tr.unread td {
    color: #e2e4f0 !important;
}

/* ── Input fields & selects ── */
html.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .input-group > .form-control {
    background: #13141c !important;
    border-color: #2a2b3d !important;
    color: #c0c4e0 !important;
}
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    border-color: #c44569 !important;
    box-shadow: 0 0 0 2px rgba(196,69,105,.2) !important;
}

/* ── Buttons ── */
html.dark-mode .button.mainaction,
html.dark-mode input[type="submit"].button,
html.dark-mode a.button.mainaction,
html.dark-mode .btn-primary,
html.dark-mode #rcmloginsubmit {
    background: #c44569 !important;
    border-color: #c44569 !important;
    color: #fff !important;
}
html.dark-mode .button.mainaction:hover,
html.dark-mode .btn-primary:hover,
html.dark-mode #rcmloginsubmit:hover {
    background: #a83252 !important;
    border-color: #a83252 !important;
}
html.dark-mode .button,
html.dark-mode a.button {
    color: #8b90b8 !important;
}
html.dark-mode .button:hover,
html.dark-mode a.button:hover {
    color: #e2e4f0 !important;
    background: #1a1b26 !important;
}
html.dark-mode .button.disabled,
html.dark-mode .button:disabled {
    color: #5a5f7d !important;
}

/* ── Folder list ── */
html.dark-mode #folderlist li a,
html.dark-mode #folderlist li span {
    color: #c0c4e0 !important;
}
html.dark-mode #folderlist li.selected > a,
html.dark-mode #folderlist li.selected > span {
    background: rgba(196,69,105,.18) !important;
    color: #e2e4f0 !important;
    border-left: 3px solid #c44569 !important;
}
html.dark-mode #folderlist li a:hover {
    background: #1a1b26 !important;
}
html.dark-mode #folderlist .unreadcount {
    background: #c44569 !important;
    color: #fff !important;
}

/* ── Links ── */
html.dark-mode a {
    color: #c44569 !important;
}
html.dark-mode a:hover {
    color: #e05070 !important;
}

/* ── Compose window ── */
html.dark-mode #compose-content,
html.dark-mode #compose-headers,
html.dark-mode .compose-headers {
    background: #0d0e14 !important;
    border-color: #2a2b3d !important;
}
html.dark-mode .compose-header-row {
    border-bottom-color: #2a2b3d !important;
}

/* ── Popup menus / dialogs ── */
html.dark-mode .popupmenu,
html.dark-mode .dropdown-menu,
html.dark-mode #popupmenu {
    background: #13141c !important;
    border-color: #2a2b3d !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.6) !important;
}
html.dark-mode .popupmenu li a,
html.dark-mode .dropdown-menu li a {
    color: #c0c4e0 !important;
}
html.dark-mode .popupmenu li a:hover,
html.dark-mode .dropdown-menu li a:hover {
    background: #1a1b26 !important;
    color: #e2e4f0 !important;
}

/* ── Modal dialogs ── */
html.dark-mode .modal-content,
html.dark-mode #dialog-overlay .popup {
    background: #13141c !important;
    border-color: #2a2b3d !important;
    color: #c0c4e0 !important;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    background: #1a1b26 !important;
    border-color: #2a2b3d !important;
}

/* ── Login page layout ── */
html.dark-mode #layout-content {
    background: #0d0e14 !important;
}
html.dark-mode #login-form {
    background: transparent !important;
}
html.dark-mode #login-form table td {
    color: #c0c4e0 !important;
}

/* ── Logo: login page (большой, 70% ширины формы) ── */
html.dark-mode body.task-login #logo,
html.dark-mode #login-logo {
    width: 66.5vw !important;
    max-width: 224px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 28px !important;
}

/* ── Logo: sidebar menu (маленький, вписывается в 78×58px ячейку) ── */
html.dark-mode #layout-menu .popover-header #logo {
    width: auto !important;
    max-width: 54px !important;
    height: auto !important;
    max-height: 34px !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 6px 4px !important;
}

/* ── Statusbar ── */
html.dark-mode #statusbar,
html.dark-mode .statusbar {
    background: #13141c !important;
    border-top-color: #2a2b3d !important;
    color: #8b90b8 !important;
}

/* ── Scrollbars ── */
html.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark-mode ::-webkit-scrollbar-track { background: #0d0e14; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #2a2b3d; border-radius: 3px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #c44569; }

/* ── Unread badge / counts ── */
html.dark-mode .unreadcount,
html.dark-mode .badge {
    background: #c44569 !important;
    color: #fff !important;
}

/* ── Все уведомления (messagestack + inline boxinfo + ui.alert) ── */
html.dark-mode .ui.alert,
html.dark-mode .boxinformation,
html.dark-mode .boxwarning,
html.dark-mode .boxerror {
    background: #13141c !important;
    border: 1px solid #2a2b3d !important;
    color: #c0c4e0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}

/* info / information — розовый акцент */
html.dark-mode .ui.alert.alert-info,
html.dark-mode .ui.alert.alert-info.information,
html.dark-mode .boxinformation {
    background: rgba(196,69,105,.18) !important;
    border-color: #c44569 !important;
    color: #f0d0da !important;
}
html.dark-mode .ui.alert.alert-info > i.icon:before,
html.dark-mode .ui.alert.alert-info.information > i.icon:before {
    color: #c44569 !important;
}

/* success — зелёный */
html.dark-mode .ui.alert.alert-success {
    background: rgba(76,175,80,.15) !important;
    border-color: #4caf50 !important;
    color: #c8e6c9 !important;
}
html.dark-mode .ui.alert.alert-success > i.icon:before {
    color: #4caf50 !important;
}

/* warning — янтарный */
html.dark-mode .ui.alert.alert-warning,
html.dark-mode .boxwarning {
    background: rgba(255,160,0,.15) !important;
    border-color: #ffa000 !important;
    color: #ffe082 !important;
}
html.dark-mode .ui.alert.alert-warning > i.icon:before {
    color: #ffa000 !important;
}

/* error / danger — красный */
html.dark-mode .ui.alert.alert-danger,
html.dark-mode .boxerror {
    background: rgba(229,57,53,.15) !important;
    border-color: #e53935 !important;
    color: #ffcdd2 !important;
}
html.dark-mode .ui.alert.alert-danger > i.icon:before {
    color: #e53935 !important;
}

/* ── Quota bar ── */
html.dark-mode #quotadisplay .bar { background: #2a2b3d !important; }
html.dark-mode #quotadisplay .bar .value { background: #c44569 !important; }

/* ── Table headers ── */
html.dark-mode table.listing thead th,
html.dark-mode .listhead {
    background: #13141c !important;
    border-bottom-color: #2a2b3d !important;
    color: #8b90b8 !important;
}

/* ── Message view header ── */
html.dark-mode #messageheader,
html.dark-mode .message-header {
    background: #13141c !important;
    border-bottom-color: #2a2b3d !important;
}

/* ── Attachment area ── */
html.dark-mode #attachment-list li,
html.dark-mode .attachmentlinks li {
    background: #1a1b26 !important;
    border-color: #2a2b3d !important;
    color: #c0c4e0 !important;
}

/* ── Preferences tabs ── */
html.dark-mode #preftabslist li a,
html.dark-mode .tabsbar li a {
    background: #13141c !important;
    border-color: #2a2b3d !important;
    color: #8b90b8 !important;
}
html.dark-mode #preftabslist li.selected a,
html.dark-mode .tabsbar li.selected a {
    background: #1a1b26 !important;
    color: #c44569 !important;
    border-bottom-color: #c44569 !important;
}

/* ── Section headers ── */
html.dark-mode .sectionhead,
html.dark-mode .section-title {
    color: #c44569 !important;
}

/* ── Language selector (injected by bro_lang.js) ── */
#bro-lang-wrap {
    margin: 16px 0 0;
}
#bro-lang-wrap label {
    display: block;
    font-size: 11px;
    color: #5a5f7d;
    margin-bottom: 5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
#bro-lang-select {
    width: 100%;
    background: #13141c !important;
    border: 1px solid #2a2b3d !important;
    color: #c0c4e0 !important;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}
#bro-lang-select:focus {
    border-color: #c44569 !important;
    box-shadow: 0 0 0 2px rgba(196,69,105,.2) !important;
}