/* FS Elastic v2 – child skin for Roundcube Elastic
   die.frisurenschmiede branding
   Keeps Roundcube's layout/functions and overrides only presentation. */

:root {
  --fs-accent: #b96835;
  --fs-accent-hover: #9f552d;
  --fs-accent-soft: #f7eee8;
  --fs-accent-soft-2: #fbf6f2;
  --fs-text: #30241f;
  --fs-muted: #6f625c;
  --fs-cream: #fbf8f4;
  --fs-border: #e8ddd4;
  --fs-menu: #30241f;
  --fs-menu-hover: #46342c;
  --fs-menu-muted: #d9c9bf;
}

body {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  color: var(--fs-text);
}

a,
.btn-link {
  color: var(--fs-accent);
}

a:hover,
.btn-link:hover {
  color: var(--fs-accent-hover);
}

/* Primary actions */
.btn-primary,
button.btn-primary,
a.btn-primary,
div.tox .tox-dialog__footer .tox-button {
  background-color: var(--fs-accent) !important;
  border-color: var(--fs-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
div.tox .tox-dialog__footer .tox-button:hover,
div.tox .tox-dialog__footer .tox-button:focus {
  background-color: var(--fs-accent-hover) !important;
  border-color: var(--fs-accent-hover) !important;
}

/* Focus rings and controls */
.form-control:focus,
.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before,
.btn:focus {
  border-color: var(--fs-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(185, 104, 53, .18) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch-input:checked + .custom-switch-btn {
  background-color: var(--fs-accent) !important;
  border-color: var(--fs-accent) !important;
}

/* ---------------------------------------------------------
   MAIN TASK MENU – remove the default Roundcube cyan/blue
   --------------------------------------------------------- */
#layout-menu,
#taskmenu .special-buttons {
  background-color: var(--fs-menu) !important;
}

@media screen and (min-width: 481px) {
  #layout-menu .popover-header {
    background-color: var(--fs-menu) !important;
  }

  #taskmenu a {
    color: #fff !important;
  }

  #taskmenu a.selected,
  #taskmenu a.selected:hover,
  #taskmenu a:hover,
  #taskmenu a:focus {
    color: #fff !important;
    background-color: var(--fs-menu-hover) !important;
  }

  /* Schreiben / action icons were cyan in Elastic */
  #taskmenu .action-buttons a,
  #taskmenu .action-buttons a:before {
    color: #d99160 !important;
  }

  #taskmenu .action-buttons a:hover,
  #taskmenu .action-buttons a:focus,
  #taskmenu .action-buttons a:hover:before,
  #taskmenu .action-buttons a:focus:before {
    color: #efb185 !important;
    background-color: var(--fs-menu-hover) !important;
  }

  #taskmenu a.logout,
  #taskmenu a.logout:hover,
  #taskmenu a.logout:before {
    color: #dc766b !important;
  }

  /* Brand logo in the menu header */
  #layout-menu .popover-header img {
    max-width: 52px;
    max-height: 52px;
    padding: 3px;
    object-fit: contain;
  }
}

/* Mobile task menu keeps a light background, but uses brand accent */
@media screen and (max-width: 480px) {
  #taskmenu a.selected,
  #taskmenu a:hover {
    color: var(--fs-accent) !important;
    background: var(--fs-accent-soft) !important;
  }
}

/* ---------------------------------------------------------
   HEADERS / TOOLBARS
   --------------------------------------------------------- */
#layout > div > .header,
.listbox > .header,
#layout-content > .header,
#layout-list > .header,
#layout-sidebar > .header {
  background-color: #f8f4f1;
  border-color: var(--fs-border);
  color: var(--fs-text);
}

#layout > div > .header a.button,
.toolbar a.button,
.toolbar .button,
.menu.toolbar a,
#messagetoolbar a.button {
  color: var(--fs-muted);
}

#layout > div > .header a.button:hover,
.toolbar a.button:hover,
.toolbar .button:hover,
#messagetoolbar a.button:hover {
  color: var(--fs-accent);
}

/* Make the mailbox/account header quieter */
#layout-sidebar > .header .username {
  color: var(--fs-text);
  font-weight: 600;
}

/* ---------------------------------------------------------
   LISTS / FOLDERS / BADGES
   --------------------------------------------------------- */
.listing li.selected,
.listing tr.selected > td,
#mailboxlist li.selected > a,
#mailboxlist li.droptarget > a,
.folderlist li.selected > a {
  background-color: var(--fs-accent-soft) !important;
  color: var(--fs-text) !important;
}

#mailboxlist li > a:hover,
.listing li > a:hover {
  background-color: var(--fs-accent-soft-2);
}

.badge,
.folderlist .unreadcount,
.listing .unreadcount {
  background-color: var(--fs-accent) !important;
  color: #fff !important;
}

/* Roundcube's blue links/icons inside common listings */
.listing a,
.treelist a {
  color: inherit;
}

/* Search / active controls */
.searchbar a.button:hover,
.searchbar a.button:focus,
.searchbar .button:hover {
  color: var(--fs-accent) !important;
}

/* Menus/dialogs */
.ui-dialog,
.popover,
.menu.pagenav {
  border-color: var(--fs-border);
}

.ui-menu .ui-state-active {
  background-color: var(--fs-accent) !important;
  border-color: var(--fs-accent) !important;
}

/* ---------------------------------------------------------
   LOGIN
   --------------------------------------------------------- */
.task-login {
  background: var(--fs-cream);
}

.task-login #logo {
  max-height: 128px;
  top: 9vh;
}

.task-login #login-form {
  top: 12vh;
  max-width: 350px;
  padding: 24px 26px 22px;
  background: #fff;
  border: 1px solid var(--fs-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(48, 36, 31, .09);
}

.task-login #login-footer {
  color: var(--fs-muted);
}

.task-login #login-footer > div {
  background: transparent;
  padding: .65rem;
}

@media screen and (max-width: 480px) {
  .task-login #logo {
    max-height: 96px;
    top: 7vh;
  }

  .task-login #login-form {
    top: 9vh;
    width: calc(100% - 28px);
    padding: 20px 18px;
    border-radius: 10px;
  }
}

/* ---------------------------------------------------------
   DARK MODE – brand accent only, preserve Elastic usability
   --------------------------------------------------------- */
html.dark-mode a,
html.dark-mode .btn-link {
  color: #d79566;
}

html.dark-mode #layout-menu,
html.dark-mode #taskmenu .special-buttons,
html.dark-mode #layout-menu .popover-header {
  background-color: #261f1b !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
  background-color: #44342c !important;
}

html.dark-mode .btn-primary,
html.dark-mode button.btn-primary,
html.dark-mode a.btn-primary {
  background-color: #a85d32 !important;
  border-color: #a85d32 !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected > td,
html.dark-mode #mailboxlist li.selected > a {
  background-color: #49362e !important;
}

html.dark-mode .task-login {
  background: #211b18;
}

html.dark-mode .task-login #login-form {
  background: #2a2421;
  border-color: #4a3d36;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

/* ---------------------------------------------------------
   V3 – dark-mode contrast refinements
   --------------------------------------------------------- */
html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-sidebar > .header .username,
html.dark-mode #layout-sidebar > .header a,
html.dark-mode #layout-sidebar > .header .button {
  color: #f3e8e0 !important;
}

html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .folderlist li.selected > a {
  background-color: #3d2d27 !important;
  color: #f5ece7 !important;
}

/* ---------------------------------------------------------
   V4 – use warmer dark-mode surfaces instead of blue-gray
   --------------------------------------------------------- */
html.dark-mode,
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-menu,
html.dark-mode .contentframe,
html.dark-mode .listbox,
html.dark-mode .scroller,
html.dark-mode .iframebox,
html.dark-mode .boxpagenav,
html.dark-mode .minwidth,
html.dark-mode .listing,
html.dark-mode .records-table,
html.dark-mode .listing tbody tr,
html.dark-mode .listing li,
html.dark-mode .listing li a,
html.dark-mode .folderlist li a,
html.dark-mode #mailboxlist li a,
html.dark-mode #messagelist,
html.dark-mode #messagelist-container,
html.dark-mode #messageframe,
html.dark-mode #messagecontent {
  background-color: #211b18 !important;
  color: #f3e8e0 !important;
}

html.dark-mode #layout > div > .header,
html.dark-mode .listbox > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode .toolbar,
html.dark-mode .header,
html.dark-mode .searchbar {
  background-color: #2b231f !important;
  border-color: #4a3b34 !important;
  color: #f3e8e0 !important;
}

html.dark-mode .listing tbody tr:hover > td,
html.dark-mode .listing li:hover,
html.dark-mode #mailboxlist li a:hover,
html.dark-mode .folderlist li a:hover {
  background-color: #312722 !important;
}

html.dark-mode .listing tr.selected > td,
html.dark-mode .listing li.selected,
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .folderlist li.selected > a {
  background-color: #4b372e !important;
  color: #fff6f0 !important;
}

html.dark-mode .searchbar input,
html.dark-mode .form-control,
html.dark-mode .custom-select,
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: #1b1614 !important;
  border-color: #4a3b34 !important;
  color: #f3e8e0 !important;
}

html.dark-mode #layout-content .watermark,
html.dark-mode .watermark {
  opacity: .14;
}

/* ---------------------------------------------------------
   V6 – message preview/watermark follows FS dark palette
   --------------------------------------------------------- */
html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #layout-content iframe#messagecontframe {
  background-color: #211b18 !important;
}

/* ---------------------------------------------------------
   V7 – force warm preview canvas; blankpage file is versioned
   --------------------------------------------------------- */
html.dark-mode #layout-content,
html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #layout-content iframe#messagecontframe {
  background: #211b18 !important;
}
html:not(.dark-mode) #layout-content .iframe-wrapper,
html:not(.dark-mode) #layout-content iframe#messagecontframe {
  background: #fbf8f4 !important;
}