/* ================================================
   Roundcube Modern Theme v4 - Multi-Brand
   Roundcube 1.6.6 / Elastic Skin
   Supports BOTH light & dark mode
   Sidebar always dark (brand colored)
   ================================================ */

:root {
  --bp: #7c3aed;
  --bp-dark: #6d28d9;
  --bp-light: #8b5cf6;
  --bp-glow: rgba(124,58,237,.2);
  --bs: #1e1b4b;
  --bs-hover: #312e81;
  --bs-text: #e2e8f0;
  --bs-border: rgba(255,255,255,.08);
}

/* =====================================================
   A. LOGIN PAGE
   ===================================================== */

/* A1. Background gradient */
body.task-login {
  background: linear-gradient(135deg, #0f0a2e 0%, var(--bp-dark) 60%, var(--bp) 100%) !important;
}
html.dark-mode body.task-login {
  background: linear-gradient(135deg, #0a0a1a 0%, #12102e 50%, var(--bp-dark) 100%) !important;
}

/* A2. Center layout */
body.task-login #layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
}

/* A3. Card */
.task-login #layout-content,
html.dark-mode .task-login #layout-content {
  background: rgba(255,255,255,.97) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 80px rgba(0,0,0,.35) !important;
  max-width: 380px !important;
  width: 90vw !important;
  padding: 44px 36px 32px !important;
  text-align: center !important;
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  flex: none !important;
  overflow: visible !important;
}
html.dark-mode .task-login #layout-content {
  background: rgba(15,12,40,.97) !important;
  border: 1px solid rgba(139,92,246,.12) !important;
}

/* A4. Login form - KILL elastic's position:relative + top:20vh */
#login-form,
body.task-login #login-form {
  position: static !important;
  top: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* A5. Logo - hidden until JS swaps src (prevents Roundcube logo flash) */
.task-login #logo,
html.dark-mode .task-login #logo {
  display: block !important;
  position: static !important;
  top: auto !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 180px !important;
  margin: 0 auto 28px !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}

/* A6. Hide h1 and noscript */
body.task-login h1.voice,
body.task-login noscript { display: none !important; }

/* A7. Table rows → stacked blocks */
#login-form table,
#login-form tbody { display: block !important; width: 100% !important; }
#login-form table tr { display: block !important; margin-bottom: 12px !important; }

/* A8. Input-group styling (elastic JS creates .input-group wrapper)
   Structure after JS: <td class="input-group input-group-lg">
     <span class="input-group-prepend"><i class="input-group-text icon user/pass"></span>
     <input class="form-control">
   </td>
*/
body.task-login .input-group {
  display: flex !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 2px solid #e2e8f0 !important;
  background: #f9fafb !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body.task-login .input-group:focus-within {
  border-color: var(--bp) !important;
  box-shadow: 0 0 0 4px var(--bp-glow) !important;
  background: #fff !important;
}
html.dark-mode body.task-login .input-group {
  background: rgba(30,27,75,.5) !important;
  border-color: rgba(139,92,246,.2) !important;
}
html.dark-mode body.task-login .input-group:focus-within {
  border-color: var(--bp-light) !important;
  background: rgba(40,35,90,.6) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.15) !important;
}

/* A9. Input-group prepend (icon container) */
body.task-login .input-group-prepend {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 14px !important;
  min-width: auto !important;
  width: auto !important;
}
body.task-login .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 1.1em !important;
  padding: 0 !important;
}
html.dark-mode body.task-login .input-group-text {
  color: rgba(139,92,246,.6) !important;
}

/* A10. Input fields inside input-group */
body.task-login .input-group .form-control,
html.dark-mode body.task-login .input-group .form-control {
  border: none !important;
  background: transparent !important;
  padding: 14px 16px 14px 12px !important;
  font-size: 14px !important;
  color: #1f2937 !important;
  box-shadow: none !important;
  height: auto !important;
  outline: none !important;
}
html.dark-mode body.task-login .input-group .form-control {
  color: #e2e8f0 !important;
}

/* A11. Submit button - WHITE on brand gradient bg for contrast */
body.task-login #rcmloginsubmit,
body.task-login .button.mainaction,
html.dark-mode body.task-login #rcmloginsubmit {
  width: 100% !important;
  background: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--bp-dark) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.15) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  line-height: 1.4 !important;
  height: auto !important;
  margin-top: 4px !important;
}
body.task-login #rcmloginsubmit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.2) !important;
}
html.dark-mode body.task-login #rcmloginsubmit {
  background: var(--bp) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px var(--bp-glow) !important;
}
html.dark-mode body.task-login #rcmloginsubmit:hover {
  box-shadow: 0 6px 24px rgba(124,58,237,.4) !important;
}

/* A12. Login footer */
body.task-login #login-footer {
  margin-top: 16px !important;
  opacity: .3 !important;
  font-size: 11px !important;
}

/* A13. Floating theme toggle (top-right corner of login page) */
.login-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  font-size: 16px;
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  outline: none;
  padding: 0;
  line-height: 1;
}
.login-theme-toggle:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  transform: scale(1.08);
}

/* =====================================================
   B. TASK MENU (left icon bar) - Always dark
   ===================================================== */

#layout-menu,
html.dark-mode #layout-menu {
  background: var(--bs) !important;
  border-right: 1px solid var(--bs-border) !important;
}

#taskmenu a,
html.dark-mode #taskmenu a {
  color: var(--bs-text) !important;
  opacity: .6 !important;
  border-color: transparent !important;
  transition: all .15s !important;
}
#taskmenu a:hover,
html.dark-mode #taskmenu a:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,.08) !important;
}
#taskmenu a.selected,
html.dark-mode #taskmenu a.selected {
  opacity: 1 !important;
  color: var(--bp-light) !important;
  background: rgba(255,255,255,.1) !important;
}
#taskmenu .action-buttons a,
html.dark-mode #taskmenu .action-buttons a {
  color: var(--bp-light) !important;
  opacity: 1 !important;
}

/* Special buttons (dark mode toggle, about, logout) */
#layout-menu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
  background: transparent !important;
}
#layout-menu .special-buttons a,
html.dark-mode #layout-menu .special-buttons a {
  color: var(--bs-text) !important;
  opacity: .5 !important;
}
#layout-menu .special-buttons a:hover,
html.dark-mode #layout-menu .special-buttons a:hover {
  opacity: .8 !important;
}

/* =====================================================
   C. SIDEBAR (folder list) - Always dark
   ===================================================== */

#layout-sidebar,
html.dark-mode #layout-sidebar {
  background: var(--bs) !important;
  background-color: var(--bs) !important;
  border-right: 1px solid var(--bs-border) !important;
  border-color: var(--bs-border) !important;
}

/* Sidebar header */
#layout-sidebar > .header,
html.dark-mode #layout-sidebar > .header {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--bs-border) !important;
  border-color: var(--bs-border) !important;
}
#layout-sidebar .header .header-title,
html.dark-mode #layout-sidebar .header .header-title {
  color: var(--bs-text) !important;
  font-weight: 600 !important;
}
#layout-sidebar .header a.button,
html.dark-mode #layout-sidebar .header a.button,
#layout-sidebar > .header a.button {
  color: var(--bs-text) !important;
  opacity: .6 !important;
}

/* Folder items */
#mailboxlist li a,
html.dark-mode #mailboxlist li a {
  color: var(--bs-text) !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 7px 12px !important;
  transition: background .12s !important;
}
#mailboxlist li a::before,
html.dark-mode #mailboxlist li a::before {
  color: var(--bs-text) !important;
  opacity: .6 !important;
}
#mailboxlist li a:hover,
html.dark-mode #mailboxlist li a:hover {
  background: var(--bs-hover) !important;
}

/* Selected folder - very important specificity match */
.listing li.selected > a,
.listing li.selected,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a {
  background: var(--bp) !important;
  background-color: var(--bp) !important;
  color: #fff !important;
}
.listing li.selected > a::before,
html.dark-mode .listing li.selected > a::before {
  color: #fff !important;
  opacity: 1 !important;
}

/* Unread count badge */
#mailboxlist .unreadcount,
html.dark-mode .folderlist li.mailbox .unreadcount {
  background: var(--bp-light) !important;
  background-color: var(--bp-light) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* Sidebar footer */
#layout-sidebar > .footer,
html.dark-mode #layout-sidebar > .footer,
html.dark-mode #layout > div > .footer {
  background: transparent !important;
  border-top: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
  opacity: .5 !important;
}

/* Quota widget in sidebar */
#layout-sidebar .quota-widget,
html.dark-mode #layout-sidebar .quota-widget {
  color: var(--bs-text) !important;
}

/* Searchbar in sidebar */
#layout-sidebar .searchbar,
html.dark-mode #layout-sidebar .searchbar {
  border-color: var(--bs-border) !important;
}
#layout-sidebar .searchbar input,
#layout-sidebar .searchbar a,
html.dark-mode #layout-sidebar .searchbar input,
html.dark-mode #layout-sidebar .searchbar a {
  color: var(--bs-text) !important;
}

/* =====================================================
   D. MESSAGE LIST PANEL - Elastic defaults + brand accents
   ===================================================== */

/* LIGHT: let elastic handle bg (#fff), just override accents */
/* DARK: let elastic handle bg (transparent on #21292c body) */

/* List header toolbar - match elastic but add brand accent on hover */
.toolbar a.button:hover:not(.disabled) {
  background: rgba(124,58,237,.08) !important;
}
html.dark-mode .toolbar a.button:hover:not(.disabled),
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):hover {
  background: rgba(124,58,237,.12) !important;
}

/* Selected messages */
.listing tr.selected td,
#messagelist tr.selected td {
  background-color: rgba(124,58,237,.08) !important;
}
html.dark-mode .listing tr.selected td,
html.dark-mode #messagelist tr.selected td {
  background-color: rgba(124,58,237,.15) !important;
}
#messagelist tr:hover td {
  background: rgba(124,58,237,.04) !important;
}
html.dark-mode #messagelist tr:hover td {
  background: rgba(124,58,237,.08) !important;
}

/* Unread bold */
#messagelist tr.unread td.subject span.subject a {
  font-weight: 700 !important;
}

/* =====================================================
   E. CONTENT PANEL (right side - message view)
   ===================================================== */

/* LIGHT: elastic default #fff is fine */
/* DARK: elastic default transparent is fine */

/* Message header accents */
html.dark-mode #message-header {
  border-bottom-color: rgba(124,58,237,.1) !important;
}

/* =====================================================
   F. COMPOSE
   ===================================================== */

.toolbar a.send,
html.dark-mode .toolbar a.send {
  background: linear-gradient(135deg, var(--bp), var(--bp-dark)) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* =====================================================
   G. GENERAL OVERRIDES
   ===================================================== */

/* Primary buttons everywhere */
.btn-primary,
html.dark-mode .btn-primary {
  background-color: var(--bp) !important;
  border-color: var(--bp) !important;
  border-radius: 8px !important;
}
.btn-primary:hover,
html.dark-mode .btn-primary:hover {
  background-color: var(--bp-dark) !important;
  border-color: var(--bp-dark) !important;
}

/* Links accent */
a:not(.button):not(.btn):hover {
  color: var(--bp) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.4); }

/* Popups - dark mode */
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover {
  background: rgba(124,58,237,.15) !important;
}

/* Brand logo in sidebar */
.brand-logo-wrap {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px 4px !important;
}
.brand-logo-wrap img {
  max-height: 24px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: .85 !important;
}

/* Watermark subtle */
.watermark { opacity: .03 !important; }


/* =====================================================
   H. FIXES v4.1
   ===================================================== */

/* H1. Hide elastic default logo in layout-menu popover-header */
#layout-menu .popover-header #logo,
#layout-menu > .popover-header > img#logo {
  display: none !important;
}

/* H2. LIGHT MODE: Toolbar/header panels - subtle brand tint */
#layout > div > .header,
#layout-list > .header,
#layout-content > .header {
  background-color: var(--panel-header, #f0f0f2) !important;
  border-bottom-color: var(--panel-border, #d8dde0) !important;
}

/* H3. LIGHT MODE: Message list + content bg */
#layout-list {
  background-color: var(--panel-list, #fafbfc) !important;
}
#layout-content {
  background-color: var(--panel-content, #f5f7f9) !important;
}

/* H4. DARK MODE: Panels match sidebar family */
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-color: var(--panel-dark, #101318) !important;
}
html.dark-mode #layout > div > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header {
  background-color: rgba(255,255,255,.03) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

/* H5. Dark mode body bg */
html.dark-mode body {
  background-color: var(--panel-dark-body, #0a0c10) !important;
  color: #c5d1d3 !important;
}

/* H6. Dark mode message view area */
html.dark-mode .message-part,
html.dark-mode #message-objects,
html.dark-mode .watermark {
  background-color: transparent !important;
}

/* H7. Dark mode searchbar */
html.dark-mode .searchbar {
  background-color: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* H8. Dark mode notifications - dark themed */
html.dark-mode #messagestack div {
  background-color: #1a1a1a !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}
html.dark-mode #messagestack div > i.icon:before {
  color: #e2e8f0 !important;
}
html.dark-mode #messagestack .alert-info.information,
html.dark-mode #messagestack .alert-info {
  background-color: #1a1a1a !important;
}
html.dark-mode #messagestack .loading {
  background-color: #2a2a2a !important;
}
html.dark-mode #messagestack .alert-success {
  background-color: #1a1a1a !important;
  border-left: 3px solid #10b981 !important;
}
html.dark-mode #messagestack .alert-danger {
  background-color: #1a1a1a !important;
  border-left: 3px solid #ef4444 !important;
}
html.dark-mode #messagestack .alert-warning {
  background-color: #1a1a1a !important;
  border-left: 3px solid #f59e0b !important;
}

/* H9. Special buttons (dark mode toggle, about, logout) - match sidebar */
#taskmenu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
  background: var(--bs) !important;
  background-color: var(--bs) !important;
}
html.dark-mode #layout-menu .special-buttons a:not(:focus),
#layout-menu .special-buttons a:not(:focus) {
  background: var(--bs) !important;
}

/* =====================================================
   I. LIGHT MODE MATCHING FIXES
   ===================================================== */

/* I1. Light mode notifications - white card style */
#messagestack div {
  background-color: #fff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
}
#messagestack div > i.icon:before {
  color: #374151 !important;
}
#messagestack .alert-info.information,
#messagestack .alert-info {
  background-color: #fff !important;
  border-left: 3px solid var(--bp) !important;
}
#messagestack .loading {
  background-color: #f9fafb !important;
}
#messagestack .alert-success {
  background-color: #fff !important;
  border-left: 3px solid #10b981 !important;
}
#messagestack .alert-danger {
  background-color: #fff !important;
  border-left: 3px solid #ef4444 !important;
}
#messagestack .alert-warning {
  background-color: #fff !important;
  border-left: 3px solid #f59e0b !important;
}

/* I2. Light mode searchbar - match panel header */
.searchbar {
  background-color: var(--panel-header, #f0f0f2) !important;
  border-color: var(--panel-border, #d8dde0) !important;
}
.searchbar input,
.searchbar a,
.searchbar form:before {
  color: #374151 !important;
}

/* I3. Light mode footer (pagination bar) - match panel */
#layout > div > .footer {
  background-color: var(--panel-header, #f0f0f2) !important;
  border-top-color: var(--panel-border, #d8dde0) !important;
}
html.dark-mode #layout > div > .footer {
  background-color: transparent !important;
  border-top-color: rgba(255,255,255,.06) !important;
}

/* I4. Light mode sidebar footer - match sidebar dark bg */
#layout-sidebar > .footer {
  background-color: var(--bs) !important;
  border-top: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
}

/* I5. Light mode message list border between sidebar */
#layout-sidebar {
  border-right: none !important;
}
#layout-list {
  border-right-color: var(--panel-border, #d8dde0) !important;
}
html.dark-mode #layout-list {
  border-right-color: rgba(255,255,255,.06) !important;
}

/* I6. Light mode message view watermark area bg */
#layout-content {
  background-color: var(--panel-content, #f5f7f9) !important;
}

/* I7. Light mode toolbar button hover - brand tint */
.toolbar a.button:hover:not(.disabled),
.header a.button.icon:not(.disabled):hover,
.menu a:not(.disabled):hover {
  background: var(--bp-glow, rgba(124,58,237,.08)) !important;
}

/* I8. Light mode selected message row */
.listing tr.selected td,
#messagelist tr.selected td {
  background-color: var(--bp-glow, rgba(124,58,237,.08)) !important;
}
#messagelist tr:hover td {
  background: rgba(0,0,0,.02) !important;
}

/* I9. Light mode links - brand color */
#layout-list a:hover,
#layout-content a:hover {
  color: var(--bp) !important;
}

/* =====================================================
   J. LIGHT MODE - SIDEBAR & MENU OVERHAUL
   Sidebar/menu should be LIGHT in light mode
   ===================================================== */

/* J1. Task menu - light mode: white bg */
html:not(.dark-mode) #layout-menu {
  background: #fff !important;
  background-color: #fff !important;
  border-right: 1px solid var(--panel-border, #e5e7eb) !important;
}

/* J2. Task menu buttons - light mode: dark text */
html:not(.dark-mode) #taskmenu a {
  color: #4b5563 !important;
  opacity: 1 !important;
  border-color: transparent !important;
}
html:not(.dark-mode) #taskmenu a:hover {
  background: var(--bp-glow, rgba(124,58,237,.08)) !important;
  color: var(--bp) !important;
}
html:not(.dark-mode) #taskmenu a.selected {
  color: var(--bp) !important;
  background: var(--bp-glow, rgba(124,58,237,.08)) !important;
}
html:not(.dark-mode) #taskmenu .action-buttons a {
  color: var(--bp) !important;
}

/* J3. Special buttons - light mode: white bg */
html:not(.dark-mode) #taskmenu .special-buttons {
  background: #fff !important;
  background-color: #fff !important;
}
html:not(.dark-mode) #layout-menu .special-buttons a:not(:focus),
html:not(.dark-mode) #taskmenu .special-buttons a {
  background: #fff !important;
  color: #6b7280 !important;
}
html:not(.dark-mode) #taskmenu .special-buttons a:hover {
  color: var(--bp) !important;
  background: var(--bp-glow, rgba(124,58,237,.08)) !important;
}

/* J4. Sidebar - light mode: white bg */
html:not(.dark-mode) #layout-sidebar {
  background: #fff !important;
  background-color: #fff !important;
  border-right: 1px solid var(--panel-border, #e5e7eb) !important;
}

/* J5. Sidebar header - light mode */
html:not(.dark-mode) #layout-sidebar > .header {
  background: #fff !important;
  background-color: #fff !important;
  border-bottom: 1px solid var(--panel-border, #e5e7eb) !important;
}
html:not(.dark-mode) #layout-sidebar .header .header-title {
  color: #1f2937 !important;
}
html:not(.dark-mode) #layout-sidebar .header a.button {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* J6. Folder list items - light mode */
html:not(.dark-mode) #mailboxlist li a {
  color: #374151 !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 7px 12px !important;
}
html:not(.dark-mode) #mailboxlist li a::before {
  color: #6b7280 !important;
  opacity: 1 !important;
}
html:not(.dark-mode) #mailboxlist li a:hover {
  background: var(--bp-glow, rgba(124,58,237,.06)) !important;
}

/* J7. Selected folder - light mode: brand bg */
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing li.selected {
  background: var(--bp) !important;
  background-color: var(--bp) !important;
  color: #fff !important;
}
html:not(.dark-mode) .listing li.selected > a::before {
  color: #fff !important;
  opacity: 1 !important;
}

/* J8. Unread badge - light mode */
html:not(.dark-mode) #mailboxlist .unreadcount {
  background: var(--bp) !important;
  background-color: var(--bp) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* J9. Sidebar footer - light mode */
html:not(.dark-mode) #layout-sidebar > .footer {
  background: #fff !important;
  background-color: #fff !important;
  border-top: 1px solid var(--panel-border, #e5e7eb) !important;
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* J10. Brand logo in sidebar - light mode: no invert filter */
html:not(.dark-mode) .brand-logo-wrap img {
  filter: none !important;
  opacity: 1 !important;
}

/* J11. Layout-menu popover header - light mode */
html:not(.dark-mode) #layout-menu .popover-header {
  background: #fff !important;
  border-bottom: 1px solid var(--panel-border, #e5e7eb) !important;
}

/* J12. Sidebar searchbar - light mode */
html:not(.dark-mode) #layout-sidebar .searchbar {
  border-color: var(--panel-border, #e5e7eb) !important;
  background: #f9fafb !important;
}
html:not(.dark-mode) #layout-sidebar .searchbar input,
html:not(.dark-mode) #layout-sidebar .searchbar a {
  color: #374151 !important;
}