/*
  NGSmail minimal theme override for Roundcube Elastic
  Goal: only repaint surfaces/colors, optionally add soft radii/borders.
  NO geometry changes: no width/height/padding/margin/flex/position/display rewrites.
*/

:root{
  --ngs-bg: rgb(35,35,40);
  --ngs-panel: rgba(17,22,34,0.78);
  --ngs-panel-2: rgba(11,16,26,0.56);
  --ngs-panel-3: rgba(255,255,255,0.045);
  --ngs-panel-4: rgba(255,255,255,0.065);
  --ngs-border: rgba(255,255,255,0.10);
  --ngs-border-soft: rgba(255,255,255,0.07);
  --ngs-text: #eef3ff;
  --ngs-text-soft: #a8b2c8;
  --ngs-accent: #c7e64b;
  --ngs-accent-soft: rgba(199,230,75,0.16);
  --ngs-blue: #9ec6ff;
  --ngs-danger: #ff6b7a;
  --ngs-radius-xl: 24px;
  --ngs-radius-lg: 18px;
  --ngs-radius-md: 14px;
  --ngs-radius-sm: 12px;
  --ngs-shadow: 0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
  --ngs-glass: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
}

html,
body{
  background: var(--ngs-bg) !important;
  color: var(--ngs-text) !important;
}

/* !important и dark-mode-селектор ОБЯЗАТЕЛЬНЫ: elastic в тёмной теме ставит
   html.dark-mode{scrollbar-color:#007bb7 #4d6066} (синие полосы), а при заданном
   scrollbar-color Chrome ИГНОРИРУЕТ все ::-webkit-scrollbar-правила — побеждать
   нужно именно в этом свойстве (наследуется на все скроллеры документа). */
html, html.dark-mode{
  scrollbar-color: rgba(255,255,255,.16) transparent !important;
}

html:not(.touch) ::-webkit-scrollbar-track{
  background: transparent !important;
}

html:not(.touch) ::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16) !important;
}

html:not(.touch) ::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.24) !important;
}

a{
  color: var(--ngs-blue);
}

a:hover{
  color: #cfe2ff;
}

/* Main app surfaces only */
#layout{
  background: var(--ngs-bg) !important;
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content{
  background: var(--ngs-glass)!important;;
  /* background: var(--ngs-glass), var(--ngs-panel-2) !important; */
  border-color: var(--ngs-border) !important;
  border-radius: var(--ngs-radius-xl) !important;

  /* box-shadow: var(--ngs-shadow) !important; */
  margin: 4px;
  overflow: hidden;
    border: 1px solid;
}

/* Мобильный режим (в iframe NG Sync ширина ≈ телефону): гуттер даёт #layout{padding:10px}
   выше — здесь только обнуление margin'ов панелей (иначе плюсуется) и бордер, который
   мобильный скин elastic гасил. */
@media screen and (max-width: 960px){
  #layout-list,
  #layout-content{
    margin: 0;
    border: 1px solid var(--ngs-border) !important;
  }
}

/* #layout-sidebar,
#layout-list,
#layout-content{
  background: var(--ngs-glass), var(--ngs-panel) !important;
} */

#layout>div>.header,
#layout>div>.footer,
.popup .listbox .footer,
#layout-menu .popover-header{
  /* background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), transparent !important; */
  color: var(--ngs-text) !important;
  border-color: var(--ngs-border-soft) !important;
}

#layout>div>.header .header-title,
#layout>div>.header a.button,
#layout>div>.footer a.button{
  color: var(--ngs-text) !important;
}

#layout-sidebar .scroller,
#layout-list .scroller,
#layout-content>.content,
#layout-content>.formcontent,
#mailboxlist-content,
#message-list,
#messagecontframe,
#mailview-top,
#mailview-bottom,
#mailview-right,
#composeview-bottom,
#composeview-right{
  background: transparent !important;
}

/* Lists, folders, rows */
.folderlist li a,
.treelist li a,
.listing.iconized li a,
.menu a{
  color: var(--ngs-text) !important;
}

.folderlist li a,
.treelist li a,
.listing.iconized li a,
.searchbar,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select,
.custom-select,
.form-control,
.custom-file-label,
.popover,
.ui-dialog,
.popupmenu,
.menu,
.toolbarmenu,
ul.treelist,
.compose-headers .popover,
#messagestack div,
.ui.alert,
.ui.alert.boxinformation,
div.tox.tox-tinymce{
  /* border-radius: var(--ngs-radius-md) !important; */
}

.folderlist li a:hover,
.treelist li a:hover,
.listing.iconized li a:hover,
.listing tbody tr:hover td,
.messagelist tbody tr:hover td,
.records-table tbody tr:hover td,
.table tbody tr:hover td{
  background: rgba(255,255,255,.035) !important;
}

.folderlist li.selected>a,
.treelist li.selected>a,
.menu li.selected>a{
  background: linear-gradient(180deg, rgba(199,230,75,.16), rgba(199,230,75,.10)), rgba(199,230,75,.08) !important;
  color: #f2ffd0 !important;
}

.listing tr.selected td,
.messagelist tr.selected td,
.records-table tr.selected td,
.table tr.selected td{
  background: rgba(255,255,255,.06) !important;
  color: var(--ngs-text) !important;
}

.folderlist li,
.treelist li,
.listing li,
.listing tbody td,
.messagelist tbody tr td,
.records-table tbody td,
.table tbody td,
.records-table thead td,
.records-table thead th,
.table thead th,
.table thead td,
.searchbar,
.boxfooter,
.listing-head,
.listing-info,
.pagenav,
.minimal-nav,
.listbox .footer,
.table-widget>.footer,
.table-widget,
.ui-widget,
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane,
.popover,
.popupmenu,
.menu,
.toolbarmenu,
ul.treelist,
#messagestack div,
.ui.alert,
.ui.alert.boxinformation{
  border-color: var(--ngs-border-soft) !important;
}

.listing li,
.listing tbody td,
.messagelist tbody tr td,
.records-table tbody td,
.table tbody td,
.records-table thead td,
.records-table thead th,
.table thead th,
.table thead td,
.searchbar,
.boxfooter,
.listing-head,
.listing-info,
.pagenav,
.minimal-nav,
.listbox .footer,
.table-widget>.footer{
  color: var(--ngs-text) !important;
  background-color: transparent !important;
}

.messagelist td,
.records-table td,
.table td,
.folderlist li a,
.menu a,
.popover .menu li a,
.toolbarmenu li a,
.messagelist tr td a,
.listing tbody td a{
  color: var(--ngs-text) !important;
}

.messagelist td .date,
.messagelist td .subject,
.messagelist td .fromto,
.listing span.secondary,
.quota-widget,
.hint,
.formcontent .hint,
.contactlist span.email,
.table tr.deleted td{
  color: var(--ngs-text-soft) !important;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select,
.custom-select,
.form-control,
.custom-file-label,
.input-group-text{
  background: rgba(255,255,255,.045) !important;
  color: var(--ngs-text) !important;
  border-color: rgba(255,255,255,.09) !important;
}

input::placeholder,
textarea::placeholder{
  color: var(--ngs-text-soft) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-file-input:focus~.custom-file-label,
.btn:focus{
  border-color: rgba(199,230,75,.28) !important;
  box-shadow: 0 0 0 .2rem rgba(199,230,75,.10) !important;
}

/* Buttons: colors only, no geometry */
a.button,
button.btn,
.btn,
.btn-secondary,
.btn-primary,
.btn-danger,
input[type="button"],
input[type="submit"]{
  border-radius: var(--ngs-radius-sm) !important;
}

.btn-link,
a.button,
button.btn,
.btn,
input[type="button"],
input[type="submit"]{
  color: var(--ngs-text) !important;
}

.btn-secondary{
  color: var(--ngs-text) !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.btn-secondary:hover,
.btn-secondary:focus{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.btn-primary{
  color: #f3ffd7 !important;
  background: linear-gradient(180deg, rgba(199,230,75,.18), rgba(199,230,75,.08)), rgba(199,230,75,.08) !important;
  border-color: rgba(199,230,75,.24) !important;
}

.btn-primary:hover,
.btn-primary:focus{
  color: #f6ffe6 !important;
  background: linear-gradient(180deg, rgba(199,230,75,.24), rgba(199,230,75,.12)), rgba(199,230,75,.10) !important;
  border-color: rgba(199,230,75,.30) !important;
}

.btn-danger{
  color: #fff !important;
  background: rgba(255,107,122,.90) !important;
  border-color: rgba(255,107,122,.90) !important;
}

.btn-danger:hover,
.btn-danger:focus{
  background: rgba(255,107,122,1) !important;
  border-color: rgba(255,107,122,1) !important;
}

/* Dialogs, popups, menus */
.popover,
.ui-dialog,
.popupmenu,
.menu,
.toolbarmenu,
ul.treelist,
.compose-headers .popover,
#layout-menu.popover,
.ui-menu,
.ui-widget,
.table-widget,
div.tox .tox-dialog,
div.tox .tox-toolbar,
div.tox .tox-toolbar-overlord>div,
div.tox .tox-edit-area,
div.tox.tox-tinymce{
  /* background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), rgba(20,25,38,.96) !important; */
  color: var(--ngs-text) !important;
}

.popover .menu li a:hover,
.toolbarmenu li a:hover,
.menu li a:hover,
.ui-menu .ui-state-active{
  background: rgba(255,255,255,.06) !important;
}

.ui-widget-overlay,
div.tox .tox-dialog-wrap__backdrop{
  background: rgba(6,10,18,.52) !important;
}

.ui-dialog .ui-dialog-title,
.ui-dialog .ui-dialog-titlebar-close,
div.tox .tox-dialog__title,
div.tox .tox-label,
div.tox .tox-tbtn,
div.tox .tox-button{
  color: var(--ngs-text) !important;
}

/* Misc */
.quota-widget .bar{
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.quota-widget .value,
.ui-slider .ui-slider-range{
  background-color: var(--ngs-blue) !important;
}

.quota-widget .value.warning{
  background-color: var(--ngs-danger) !important;
}

/* Login/watermark safe colors only */
#login-form,
#login-form .box-inner,
#login-form .box-bottom,
#login-footer,
#watermark,
#watermark-content,
html.iframe body,
body.watermark{
  color: var(--ngs-text) !important;
  background: transparent !important;
}

/* Hide only unwanted entries, no layout rewrites */
/* .input-group-prepend,
.about,
.theme,
#rcmbtn104,
#rcmbtn105{
  display: none !important;
} */

#layout{
    padding: 10px; /* единый гуттер платформы NG Sync (был 9px) */
}


.task-login #logo {
    top: 18vh;
}

.input-group-prepend {
    margin-right: 0;
    display: none !important;
}


/* ===== Login fields override clean ===== */

#login-form .form-control,
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: rgba(17,22,34,.85) !important; /* просто темнее */
    /* background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important; */
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    color: #eef3ff !important;
    -webkit-text-fill-color: #eef3ff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
    outline: none !important;
}

#login-form .form-control::placeholder,
#login-form input[type="text"]::placeholder,
#login-form input[type="email"]::placeholder,
#login-form input[type="password"]::placeholder {
    color: #a8b2c8 !important;
    opacity: 1 !important;
}

#login-form .form-control:focus,
#login-form input[type="text"]:focus,
#login-form input[type="email"]:focus,
#login-form input[type="password"]:focus {
    background-color: rgba(17,22,34,.85) !important; /* просто темнее */
    /* background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important; */
    border-color: rgba(199,230,75,.24) !important;
    box-shadow:
        0 0 0 2px rgba(199,230,75,.07),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: #eef3ff !important;
    -webkit-text-fill-color: #eef3ff !important;
    outline: none !important;
}

/* chrome autofill fix */
#login-form input:-webkit-autofill,
#login-form input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:focus,
#login-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #eef3ff !important;
    caret-color: #eef3ff !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    -webkit-box-shadow:
        0 0 0 1000px rgba(17,22,34,.92) inset,
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    box-shadow:
        0 0 0 1000px rgba(17,22,34,.92) inset,
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    transition: background-color 99999s ease-out 0s !important;
}

#login-form input:-webkit-autofill:focus {
    border-color: rgba(199,230,75,.24) !important;
    -webkit-box-shadow:
        0 0 0 1000px rgba(17,22,34,.96) inset,
        0 0 0 2px rgba(199,230,75,.07),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    box-shadow:
        0 0 0 1000px rgba(17,22,34,.96) inset,
        0 0 0 2px rgba(199,230,75,.07),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}



#layout-menu{
    width: auto !important;
}

#taskmenu a {
    margin: 5px;
}

/* ===== FIX taskmenu bottom buttons layout ===== */


@media screen and (min-width: 1025px) {
    #taskmenu a {
        width: 65px !important;
    }
}


@media screen and (min-width: 481px) {
    /* само меню должно резервировать место под нижний блок */
    #taskmenu {
        position: relative !important;
        box-sizing: border-box !important;
        /* padding-bottom: 220px !important; */
        height: 100%;
    }

    /* нижний блок оставляем внизу, но задаем нормальную ширину */
    #taskmenu .special-buttons {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }
}

/* только внешний вид, без ломания геометрии */
#taskmenu > a,
#taskmenu .special-buttons > a,
#taskmenu .action-buttons > a {
    border-radius: 18px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #dfe5f2 !important;
    box-shadow: none !important;
}

#taskmenu > a:hover,
#taskmenu .special-buttons > a:hover,
#taskmenu .action-buttons > a:hover {
    background: rgba(255,255,255,.035) !important;
    border-color: rgba(255,255,255,.06) !important;
    color: #eef3ff !important;
}

#taskmenu > a.selected,
#taskmenu > a[aria-disabled="true"] {
    background: linear-gradient(180deg, rgba(199,230,75,.16), rgba(199,230,75,.10)), rgba(199,230,75,.08) !important;
    border-color: rgba(199,230,75,.24) !important;
    color: #f2ffd0 !important;
}

#taskmenu .special-buttons > a.logout {
    color: #ff6b62 !important;
}

#taskmenu .special-buttons > a.logout:hover {
    background: rgba(255,90,80,.07) !important;
    border-color: rgba(255,90,80,.16) !important;
    color: #ff8d84 !important;
}








html.dark-mode .message-htmlpart {
  background-color: transparent !important;
}

.rcmBody{
  color: var(--ngs-text) !important;
}

.popover-header{
  display: none !important;
}

/* ===== Пустая панель превью: убрать вотермарк-лого Roundcube + зеленоватый фон скина ===== */
#messagecontframe,
#messagecontframe-content,
#messagepreview,
#preview-frame,
.iframe-wrapper,
#mailview-right,
#mailview-right > .content,
#layout-content > .content{
  background-image: none !important;
  background-color: transparent !important;
}

/* если вотермарк — отдельный элемент/страница с лого */
#watermark,
.watermark,
#watermark-content,
body.watermark{
  background-image: none !important;
  background-color: transparent !important;
}

#watermark img,
.watermark img,
#watermark svg,
#watermark-content img{
  display: none !important;
}