/* Catppuccin Mocha Theme for Roundcube Elastic Skin */
:root {
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-lavender: #b4befe;
  --ctp-blue: #89b4fa;
  --ctp-sapphire: #74c7ec;
  --ctp-sky: #89dceb;
  --ctp-teal: #94e2d5;
  --ctp-green: #a6e3a1;
  --ctp-yellow: #f9e2af;
  --ctp-peach: #fab387;
  --ctp-maroon: #eba0ac;
  --ctp-red: #f38ba8;
  --ctp-mauve: #cba6f7;
  --ctp-pink: #f5c2e7;
  --ctp-flamingo: #f2cdcd;
  --ctp-rosewater: #f5e0dc;
}

/* Main background - cover everything */
body, #layout, #layout > div, .content, .listbox, .scroller, 
#layout-content, #layout-list, .content-frame, .contentbox,
#messagelist, #messagelistfooter, .boxcontent, .uibox,
html.dark-mode > body, html.dark-mode {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
}

/* Toolbar and header */
.toolbar, #layout-sidebar, .header, .menu, #taskmenu, 
#messageheader, .pagenav, .footer {
  background-color: var(--ctp-crust) !important;
  border-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
}

/* Sidebar */
#layout-sidebar .sidebar, #layout-sidebar, .sidebar, 
#folderlist-content, .folderlist {
  background-color: var(--ctp-crust) !important;
  color: var(--ctp-text) !important;
}

/* Content frames - the right panel */
#messagecontframe, #messageframe, #messagecontframe > iframe,
.iframe-wrapper, .content-frame-wrapper, .iframe-loader,
#messagepartcontainer, .message-part, .message-htmlpart,
#message-content, .message-content {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
}

/* Empty state messages */
.boxcontent .emptystate, .emptystate, .alert-info {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-subtext1) !important;
  border-color: var(--ctp-surface1) !important;
}

/* List items */
.listing tbody tr, .listing li, .treelist li, .records-table tr,
#messagelist tbody tr, .contactlist li, .attachmentslist li {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface0) !important;
}

.listing tbody tr:hover, .listing li:hover, .treelist li:hover,
#messagelist tbody tr:hover {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
}

.listing tbody tr.selected, .listing li.selected, .treelist li.selected,
#messagelist tbody tr.selected, .contactlist li.selected {
  background-color: var(--ctp-surface1) !important;
  color: var(--ctp-lavender) !important;
}

/* Table headers */
.listing thead, .listing thead tr, .listing thead th,
#messagelist thead, #messagelist thead th {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface1) !important;
}

button:hover, .button:hover, a.button:hover, .btn:hover {
  background-color: var(--ctp-sapphire) !important;
  color: var(--ctp-crust) !important;
}

button.btn-secondary, .button.secondary, .btn-secondary {
  background-color: var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface2) !important;
}

/* Disabled buttons */
button:disabled, .button:disabled, .btn:disabled {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-overlay0) !important;
  opacity: 0.5 !important;
}

/* Input fields */
input[type="text"], input[type="password"], input[type="email"], 
textarea, select, .form-control {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface1) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ctp-blue) !important;
  outline-color: var(--ctp-blue) !important;
}

/* Message content */
.mail-content, #messagebody, .message-part, #message-content,
.message-htmlpart iframe, .message-htmlpart, #messagecontframe,
.mail-bodycontent, .message-partheaders {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
}

/* All panels and boxes */
.ui-widget-content, .ui-widget, .panel, .card, .box,
.popover-body, .modal-body, .formcontent, .propform,
#preferences-frame, #identities-table, .form-group,
.input-group, #upload-form, .ui-dialog {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface0) !important;
}

/* Splitters and borders */
.splitter, #layout > div > div, .column, .sidebar-content,
.border, hr, .divider {
  border-color: var(--ctp-surface0) !important;
  background-color: var(--ctp-mantle) !important;
}

/* Make column resizer overlay barely visible when active */
.column-resizer.active {
  opacity: 0.1 !important;
}

/* Popups and modals */
.popup, .popover, .modal-content, .dropdown-menu {
  background-color: var(--ctp-crust) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface0) !important;
}

.dropdown-item:hover {
  background-color: var(--ctp-surface0) !important;
}

/* Menu items */
.menu li a, .toolbarmenu li a, #taskmenu a {
  color: var(--ctp-text) !important;
}

.menu li a:hover, .toolbarmenu li a:hover, #taskmenu a:hover {
  background-color: var(--ctp-surface0) !important;
}

.menu li.selected a, #taskmenu a.selected {
  background-color: var(--ctp-surface1) !important;
  color: var(--ctp-lavender) !important;
}

/* Folders */
.folderlist li a, .listing.folderlist li {
  color: var(--ctp-text) !important;
}

.folderlist li.selected a, .folderlist li.selected {
  background-color: var(--ctp-surface1) !important;
  color: var(--ctp-mauve) !important;
}

/* Icons - when not in buttons */
.toolbar a:not(.button), svg, i.icon {
  color: var(--ctp-blue) !important;
}

/* Icons inside buttons should be light colored */
button .icon, .button .icon, a.button .icon,
.toolbar a.button, button.icon {
  color: var(--ctp-blue) !important;
}

/* Unread badge */
.badge, .countbadge {
  background-color: var(--ctp-red) !important;
  color: var(--ctp-crust) !important;
}

/* Search bar */
#quicksearchbar, .searchbar {
  background-color: var(--ctp-surface0) !important;
}

/* Status messages */
.voice-status.loading {
  background-color: var(--ctp-blue) !important;
}

.voice-status.success {
  background-color: var(--ctp-green) !important;
}

.voice-status.error {
  background-color: var(--ctp-red) !important;
}

/* Links */
a {
  color: var(--ctp-blue) !important;
}

a:hover {
  color: var(--ctp-sapphire) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  background-color: var(--ctp-mantle);
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--ctp-surface1);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ctp-surface2);
}

/* Login page */
#login-form, .task-login #layout-content, .task-login #layout,
.task-login body {
  background-color: var(--ctp-crust) !important;
}

#login-form .input-group, #login-form input {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface1) !important;
}

/* Override any remaining teal/cyan backgrounds */
div[style*="background"], div[style*="teal"], 
div[style*="cyan"], div[style*="#008"], 
div[style*="#007"], div[style*="rgb(0"] {
  background-color: var(--ctp-mantle) !important;
}

/* Special buttons in dark mode */
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background: none !important;
  color: var(--ctp-text) !important;
}

html.dark-mode #layout-menu .special-buttons a:hover {
  background: var(--ctp-surface1) !important;
}

/* Quota bar */
html.dark-mode .quota-widget .bar {
  border-color: var(--ctp-surface1) !important;
  background-color: var(--ctp-surface1) !important;
}

html.dark-mode .quota-widget .value {
  background-color: var(--ctp-blue) !important;
}

html.dark-mode .listing li, html.dark-mode .listing li ul, html.dark-mode .listing tbody td {
  background-color: var(--ctp-mantle) !important;
  color: var(--ctp-text) !important;
  border-color: var(--ctp-surface0) !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date, html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto, html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
  color: var(--ctp-subtext1) !important;
}