/* ================================================================
   iServ Mail — Complete Dark Theme for Roundcube Elastic
   Pixel-perfect match with iServ Panel (panel.iserv.ge)
   ================================================================ */

/* ═══════════════════════════════════════════
   §1  CUSTOM FONTS
   ═══════════════════════════════════════════ */
@font-face {
  font-family: 'NormalText';
  src: url('../fonts/iserv/normalText.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BigText';
  src: url('../fonts/iserv/bigText.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LogoText';
  src: url('../fonts/iserv/logoText.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LongText';
  src: url('../fonts/iserv/longText.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   §2  CSS VARIABLES (matches panel :root)
   ═══════════════════════════════════════════ */
:root {
  --iserv-bg-primary:    #0f172a;
  --iserv-bg-secondary:  #1e293b;
  --iserv-bg-tertiary:   #334155;
  --iserv-bg-card:       #1e293b;
  --iserv-text-primary:  #f1f5f9;
  --iserv-text-secondary:#94a3b8;
  --iserv-text-muted:    #64748b;
  --iserv-accent:        #3b82f6;
  --iserv-accent-hover:  #2563eb;
  --iserv-accent-glow:   rgba(59, 130, 246, 0.15);
  --iserv-success:       #22c55e;
  --iserv-warning:       #f59e0b;
  --iserv-danger:        #ef4444;
  --iserv-border:        #334155;
  --iserv-border-subtle: rgba(51, 65, 85, 0.5);
  --iserv-gradient:      linear-gradient(135deg, #3b82f6, #8b5cf6);
  --iserv-shadow:        0 4px 24px rgba(0, 0, 0, 0.25);
  --iserv-shadow-lg:     0 10px 40px rgba(0, 0, 0, 0.4);
  --iserv-radius-sm:     6px;
  --iserv-radius:        8px;
  --iserv-radius-lg:     12px;
  --iserv-radius-xl:     16px;
  --iserv-transition:    0.2s ease;
  --iserv-font:          'NormalText', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --iserv-font-big:      'BigText', 'NormalText', sans-serif;
  --iserv-font-logo:     'LogoText', 'BigText', sans-serif;
  --iserv-font-long:     'LongText', 'NormalText', sans-serif;
}

/* ═══════════════════════════════════════════
   §3  GLOBAL RESETS & DARK MODE FORCE
   ═══════════════════════════════════════════ */
html {
  color-scheme: dark !important;
}

html.dark-mode,
html:not(.dark-mode) {
  color-scheme: dark !important;
}

body,
html,
.ui-widget,
.popover,
.modal-dialog,
select,
input,
optgroup,
textarea,
button,
.content,
.toolbar,
#layout-sidebar,
#layout-list,
#layout-content,
.formcontent,
.scroller,
table,
pre {
  font-family: var(--iserv-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.header-title,
#layout-sidebar .header > .header-title,
.voice.header-title,
.ui-dialog .ui-dialog-title {
  font-family: var(--iserv-font-big) !important;
}

/* ═══════════════════════════════════════════
   §4  BODY & MAIN LAYOUT
   ═══════════════════════════════════════════ */
body,
#layout,
html.iframe body,
.content.frame-loading::after {
  background-color: var(--iserv-bg-primary) !important;
  color: var(--iserv-text-primary) !important;
}

#layout {
  border: none !important;
}

#layout > .content,
.content.selected {
  animation: iserv-fadeIn 0.3s ease;
}

#layout > div {
  border-color: var(--iserv-border) !important;
}

/* Sidebar panel */
#layout-sidebar,
.sidebar {
  background-color: #111827 !important;
  border-right: 1px solid rgba(51, 65, 85, 0.4) !important;
}

#layout-sidebar .scroller {
  background-color: transparent !important;
  border-right: none !important;
}

/* Sidebar header (email/username display) */
#layout-sidebar > .header {
  background-color: rgba(17, 24, 39, 0.95) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35) !important;
  padding: 0 12px !important;
  min-height: 52px !important;
}

#layout-sidebar > .header .header-title {
  font-size: 0.82rem !important;
  color: var(--iserv-text-secondary) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}

#layout-sidebar > .header .header-title.username {
  color: var(--iserv-accent) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
}

/* Sidebar footer */
#layout-sidebar > .footer {
  background-color: transparent !important;
  border-top: 1px solid rgba(51, 65, 85, 0.25) !important;
}

/* List panel */
#layout-list {
  background-color: var(--iserv-bg-primary) !important;
  border-right: 1px solid rgba(51, 65, 85, 0.4) !important;
}

#layout-list .scroller {
  background-color: transparent !important;
  border-right: none !important;
}

/* List header */
#layout-list > .header,
#messagelist-header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.4) !important;
  min-height: 52px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Content panel */
#layout-content,
#layout-content > .content,
#layout-content .scroller,
.formcontent,
html.iframe #layout-content {
  background-color: var(--iserv-bg-primary) !important;
}

/* Content header (toolbar area) */
#layout-content > .header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35) !important;
  min-height: 52px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Toolbar buttons in content */
#layout-content .toolbar a:not(.disabled):hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

#layout-content .toolbar a:not(.disabled):hover::before {
  color: var(--iserv-accent) !important;
}

/* iframe wrapper */
#layout-content .iframe-wrapper,
#layout-content .iframe-wrapper iframe {
  background-color: var(--iserv-bg-primary) !important;
  border: none !important;
}

/* Watermark (empty content area) */
.watermark,
#layout > .content > .watermark,
#layout-content > .content.watermark {
  background-color: var(--iserv-bg-primary) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════
   §5  TASK MENU (Left Navigation Bar)
   ═══════════════════════════════════════════ */

/* --- First column container --- */
#layout-menu {
  background-color: #080c19 !important;
  border-right: 1px solid rgba(51, 65, 85, 0.35) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

/* --- Logo / popover-header --- */
#layout-menu .popover-header {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.3) !important;
  padding: 10px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
}

#layout-menu .popover-header img {
  max-height: 42px !important;
  max-width: 42px !important;
  padding: 2px !important;
  filter: none !important;
  opacity: 0.85;
  transition: all 0.3s ease;
}

#layout-menu .popover-header img:hover {
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4));
}

/* --- Task menu bar --- */
#taskmenu {
  background-color: transparent !important;
  border-right: none !important;
  padding: 8px 0 !important;
}

#taskmenu a {
  color: var(--iserv-text-muted) !important;
  border-radius: var(--iserv-radius) !important;
  transition: all 0.2s ease !important;
  margin: 2px 6px !important;
  position: relative;
}

#taskmenu a::before {
  transition: all 0.2s ease !important;
  font-size: 1.15em !important;
}

#taskmenu a .inner {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

#taskmenu a:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--iserv-text-primary) !important;
}

#taskmenu a:hover::before {
  color: var(--iserv-accent) !important;
}

#taskmenu a:hover .inner {
  opacity: 1;
}

#taskmenu a.selected {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

#taskmenu a.selected::before {
  color: #fff !important;
}

#taskmenu a.selected .inner {
  opacity: 1;
}

/* --- Compose button (FAB) --- */
#taskmenu a.compose {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25) !important;
  margin-bottom: 8px !important;
}

#taskmenu a.compose::before {
  color: #fff !important;
}

#taskmenu a.compose:hover {
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-1px);
}

/* --- Special buttons area --- */
#taskmenu .special-buttons {
  border-top: 1px solid rgba(51, 65, 85, 0.4) !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* --- Logout button --- */
#taskmenu a.logout {
  color: var(--iserv-text-muted) !important;
}

#taskmenu a.logout:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--iserv-danger) !important;
}

#taskmenu a.logout:hover::before {
  color: var(--iserv-danger) !important;
}

/* --- Dark/light mode toggle --- */
#taskmenu a.theme {
  color: var(--iserv-text-muted) !important;
}

#taskmenu a.theme:hover {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: var(--iserv-accent) !important;
}

/* --- About link --- */
#taskmenu a.about {
  color: var(--iserv-text-muted) !important;
}

#taskmenu a.about:hover {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: var(--iserv-text-primary) !important;
}

/* ═══════════════════════════════════════════
   §6  HEADERS & TOOLBARS
   ═══════════════════════════════════════════ */
.header,
#layout > div > .header,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header,
.content > .header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35) !important;
  color: var(--iserv-text-primary) !important;
  min-height: 52px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header > .header-title,
.header a,
.voice.header-title,
span.header-title {
  color: var(--iserv-text-primary) !important;
}

/* Toolbar */
.toolbar,
.toolbar.menu {
  background-color: transparent !important;
  border-bottom: none !important;
}

.toolbar a,
.toolbar a.button {
  color: var(--iserv-text-secondary) !important;
  border-radius: var(--iserv-radius) !important;
  transition: all 0.2s ease !important;
  padding: 6px 8px !important;
}

.toolbar a::before {
  color: var(--iserv-text-secondary) !important;
  transition: color var(--iserv-transition) !important;
}

.toolbar a:hover:not(.disabled),
.toolbar a.active {
  color: var(--iserv-text-primary) !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}

.toolbar a:hover:not(.disabled)::before,
.toolbar a.active::before {
  color: var(--iserv-accent) !important;
}

.toolbar a.disabled,
.toolbar a.disabled::before {
  color: var(--iserv-text-muted) !important;
  opacity: 0.5;
}

/* Floating action buttons (mobile compose) */
.floating-action-buttons a.button {
  background: var(--iserv-gradient) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

.floating-action-buttons a.button::before {
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   §7  SEARCHBAR
   ═══════════════════════════════════════════ */
.searchbar {
  background-color: transparent !important;
  border: none !important;
}

.searchbar form {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.4) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.searchbar form:focus-within {
  border-color: var(--iserv-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  background-color: rgba(15, 23, 42, 0.8) !important;
}

.searchbar input {
  background-color: transparent !important;
  border: none !important;
  color: var(--iserv-text-primary) !important;
}

.searchbar input::placeholder {
  color: var(--iserv-text-muted) !important;
}

.searchbar a,
.searchbar a::before,
#searchmenulink::before,
.searchbar form::before {
  color: var(--iserv-text-muted) !important;
}

.searchbar a:hover,
.searchbar a:hover::before {
  color: var(--iserv-text-primary) !important;
}

/* ═══════════════════════════════════════════
   §8  MESSAGE LIST (Inbox / Mail)
   ═══════════════════════════════════════════ */
.messagelist {
  background-color: var(--iserv-bg-primary) !important;
}

.messagelist tr {
  border-bottom: 1px solid var(--iserv-border-subtle) !important;
  transition: background-color var(--iserv-transition) !important;
}

.messagelist tr td {
  color: var(--iserv-text-primary) !important;
  padding: 12px 10px !important;
  font-size: 0.88rem !important;
}

.messagelist tr td span {
  color: var(--iserv-text-primary) !important;
}

.messagelist tr td.subject span.date,
.messagelist tr td.date,
.messagelist .listing-info {
  color: var(--iserv-text-muted) !important;
  font-size: 0.82rem !important;
}

.messagelist tr td.fromto,
.messagelist tr td span.from,
.messagelist span.secondary {
  color: var(--iserv-text-secondary) !important;
}

/* Unread messages */
.messagelist tr.unread td,
.messagelist tr.unread td span,
.messagelist tr.unread td.subject a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.messagelist tr.unread td.subject span.date {
  color: var(--iserv-accent) !important;
  font-weight: 500 !important;
}

/* Message icons */
.messagelist td.subject span.msgicon::before {
  color: var(--iserv-text-muted) !important;
}

.messagelist tr.unread td.subject span.msgicon::before,
.messagelist td.subject span.msgicon.status::before {
  color: var(--iserv-accent) !important;
}

.messagelist td.subject span.msgicon.status.replied::before {
  color: var(--iserv-success) !important;
}

.messagelist td.subject span.msgicon.status.forwarded::before {
  color: var(--iserv-warning) !important;
}

/* Flagged / starred */
.messagelist span.flagged::before {
  color: var(--iserv-warning) !important;
}

.messagelist span.unflagged::before {
  color: var(--iserv-text-muted) !important;
}

.messagelist tr:hover span.unflagged::before,
.messagelist tr.flaggedroot:not(:hover) span.unflagged::before {
  color: var(--iserv-text-muted) !important;
  opacity: 0.6;
}

/* Attachment indicator */
.messagelist span.attachment span {
  color: var(--iserv-text-muted) !important;
}

/* Thread toggles */
.messagelist tr.thread td.threads div::before {
  color: var(--iserv-text-muted) !important;
}

/* Hover state */
.messagelist tr:hover {
  background-color: rgba(59, 130, 246, 0.06) !important;
}

/* Selected state */
.messagelist tr.selected,
.messagelist tr.focused {
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-left: 3px solid var(--iserv-accent) !important;
}

.messagelist tr.selected td,
.messagelist tr.selected td span,
.messagelist tr.focused td {
  color: #ffffff !important;
}

.messagelist tr.selected td:first-child {
  padding-left: 7px !important;
}

/* Focus indicator (left border on focused row) */
.focus-indicator {
  border-left-color: var(--iserv-accent) !important;
}

/* Checkbox column */
.messagelist th.checkbox-cell::before,
table.listing th.checkbox-cell::before {
  color: var(--iserv-text-muted) !important;
}

/* Drag layer */
#rcmdraglayer {
  background-color: var(--iserv-accent) !important;
  color: #fff !important;
  border-radius: var(--iserv-radius) !important;
  box-shadow: var(--iserv-shadow) !important;
}

/* ═══════════════════════════════════════════
   §9  FOLDER LIST (Sidebar Tree)
   ═══════════════════════════════════════════ */
.folderlist li,
.treelist li,
.listing.iconized li {
  transition: background-color var(--iserv-transition) !important;
}

.folderlist li a,
.treelist li a,
.listing.iconized li a {
  color: var(--iserv-text-secondary) !important;
  border-radius: var(--iserv-radius) !important;
  transition: all 0.2s ease !important;
  padding: 8px 12px !important;
  margin: 1px 8px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

.folderlist li a::before,
.treelist li a::before,
.listing.iconized li a::before,
.listing.iconized li > i::before {
  color: var(--iserv-text-muted) !important;
  transition: all 0.2s ease !important;
  font-size: 1.05em !important;
}

/* Hover */
.folderlist li a:hover,
.treelist li a:hover,
.listing.iconized li a:hover {
  background-color: rgba(59, 130, 246, 0.08) !important;
  color: var(--iserv-text-primary) !important;
}

.folderlist li a:hover::before,
.treelist li a:hover::before {
  color: var(--iserv-accent) !important;
}

/* Selected / active folder */
.folderlist li.selected > a,
.treelist li.selected > a,
.listing.iconized li.selected > a {
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.08)) !important;
  color: var(--iserv-text-primary) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--iserv-accent) !important;
}

.folderlist li.selected > a::before,
.treelist li.selected > a::before,
.listing.iconized li.selected > a::before {
  color: var(--iserv-accent) !important;
}

/* Unread count badge */
.folderlist .unreadcount,
.treelist .unreadcount,
.listing .unreadcount {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  text-align: center !important;
  padding: 0 6px !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
  letter-spacing: 0.3px;
}

/* Tree toggle arrow */
ul.treelist li div.treetoggle::before {
  color: var(--iserv-text-muted) !important;
}

ul.treelist li div.treetoggle:hover::before {
  color: var(--iserv-text-primary) !important;
}

/* ═══════════════════════════════════════════
   §10  CONTACT LIST (Address Book)
   ═══════════════════════════════════════════ */
.contactlist {
  background-color: var(--iserv-bg-primary) !important;
}

.contactlist td,
.contactlist li a {
  color: var(--iserv-text-primary) !important;
  border-bottom-color: var(--iserv-border-subtle) !important;
}

.contactlist td.contact::before,
.contactlist td.contactgroup::before,
.contactlist li a::before {
  color: var(--iserv-text-muted) !important;
}

.contactlist span.email {
  color: var(--iserv-text-muted) !important;
}

.contactlist tr:hover {
  background-color: rgba(51, 65, 85, 0.4) !important;
}

.contactlist tr.selected {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

/* Contact photo placeholder */
img.contactphoto,
#contactpic {
  border: 2px solid var(--iserv-border) !important;
  border-radius: 50% !important;
  background-color: var(--iserv-bg-tertiary) !important;
}

/* Contact header */
#contacthead {
  background-color: var(--iserv-bg-secondary) !important;
  border-bottom: 1px solid var(--iserv-border) !important;
}

#contacthead .source.row {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §11  BUTTONS
   ═══════════════════════════════════════════ */
.btn,
button.btn {
  border-radius: var(--iserv-radius) !important;
  font-family: var(--iserv-font) !important;
  font-weight: 500 !important;
  transition: all var(--iserv-transition) !important;
  border: 1px solid transparent !important;
}

.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25) !important;
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px);
}

.btn-primary:focus:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.btn-secondary,
.btn-outline-secondary,
a.btn-secondary {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
  background-color: #475569 !important;
  color: #fff !important;
}

.btn-danger,
a.btn-danger {
  background-color: var(--iserv-danger) !important;
  border-color: var(--iserv-danger) !important;
  color: #fff !important;
}

.btn-danger:hover:not(:disabled) {
  background-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.btn-success,
a.btn-success {
  background-color: var(--iserv-success) !important;
  border-color: var(--iserv-success) !important;
  color: #fff !important;
}

.btn-link {
  color: var(--iserv-accent) !important;
  background: transparent !important;
  border: none !important;
}

.btn-link:hover {
  color: var(--iserv-accent-hover) !important;
}

.btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Action links (listing buttons) */
.listing td.action a::before {
  color: var(--iserv-text-muted) !important;
}

.listing td.action a:hover::before {
  color: var(--iserv-accent) !important;
}

/* ═══════════════════════════════════════════
   §12  FORMS & INPUTS
   ═══════════════════════════════════════════ */
.form-control,
.custom-file-label,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select.form-control,
select.custom-select,
.custom-select,
textarea {
  background-color: var(--iserv-bg-primary) !important;
  border: 1.5px solid var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius) !important;
  transition: all var(--iserv-transition) !important;
  font-family: var(--iserv-font) !important;
}

.form-control:focus,
.custom-file-label:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--iserv-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  background-color: var(--iserv-bg-primary) !important;
  outline: none !important;
}

.form-control:not(.is-invalid):focus,
.custom-file-label:not(.is-invalid):focus {
  border-color: var(--iserv-accent) !important;
}

::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder {
  color: var(--iserv-text-muted) !important;
  opacity: 0.7 !important;
}

.form-group label,
label,
.propform td.title {
  color: var(--iserv-text-secondary) !important;
  font-size: 0.85rem;
  font-weight: 500;
}

.input-group-text,
.input-group-addon {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-secondary) !important;
}

.input-group .icon::before {
  color: var(--iserv-text-muted) !important;
}

.custom-file-label::after {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

/* Disabled inputs */
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--iserv-bg-secondary) !important;
  color: var(--iserv-text-muted) !important;
  opacity: 0.6 !important;
}

.form-control-plaintext {
  color: var(--iserv-text-primary) !important;
}

/* Multi-input (tags) */
.multi-input > .content {
  background-color: var(--iserv-bg-primary) !important;
  border-color: var(--iserv-border) !important;
}

.multi-input > .content.focused,
.multi-input:not(.is-invalid) > .content.focused {
  border-color: var(--iserv-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.multi-input a.icon.reset::before {
  color: var(--iserv-text-muted) !important;
}

/* Tag edit elements */
.tagedit-list li.tagedit-listelement-old {
  background-color: var(--iserv-accent-glow) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: var(--iserv-radius-sm) !important;
  color: var(--iserv-accent) !important;
}

.tagedit-list li.tagedit-listelement-old a::before {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §13  CARDS & FIELDSETS
   ═══════════════════════════════════════════ */
.card,
fieldset.card,
.propform fieldset,
.boxcontent {
  background-color: var(--iserv-bg-card) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius-lg) !important;
  color: var(--iserv-text-primary) !important;
  transition: border-color 0.2s ease !important;
  animation: iserv-fadeIn 0.4s ease;
}

.card:hover,
fieldset.card:hover,
.propform fieldset:hover,
.boxcontent:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.propform fieldset {
  margin-bottom: 16px !important;
  padding: 16px !important;
}

.card-header,
fieldset legend,
fieldset.card legend {
  background-color: transparent !important;
  border-bottom: 1px solid var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
  font-family: var(--iserv-font-big) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

fieldset.advanced > legend::after {
  color: var(--iserv-text-muted) !important;
}

/* Hint text in forms */
.formcontent .hint,
.hint {
  color: var(--iserv-text-muted) !important;
  font-size: 0.82rem !important;
}

/* ═══════════════════════════════════════════
   §14  MAIL PREVIEW / MESSAGE VIEW
   ═══════════════════════════════════════════ */
#message-header {
  background-color: rgba(30, 41, 59, 0.6) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35) !important;
  color: var(--iserv-text-primary) !important;
  padding: 16px 20px !important;
  animation: iserv-fadeIn 0.3s ease;
}

#message-header .header-headers .header-title {
  color: var(--iserv-text-muted) !important;
  font-size: 0.82rem !important;
}

#message-header span.header-title,
#message-header > .subject {
  color: var(--iserv-text-primary) !important;
  font-family: var(--iserv-font-big) !important;
}

#message-header td.header-title {
  color: var(--iserv-text-muted) !important;
}

#message-header td.header {
  color: var(--iserv-text-primary) !important;
}

#message-header .header-links a,
#message-header .header-links a::before {
  color: var(--iserv-accent) !important;
}

#message-header > .subject a.extwin::before {
  color: var(--iserv-text-muted) !important;
}

/* Flagged subject indicator */
body.status-flagged #message-header > .subject::before {
  color: var(--iserv-warning) !important;
}

/* Message body */
.message-part,
.message-htmlpart {
  background-color: var(--iserv-bg-secondary) !important;
  color: var(--iserv-text-primary) !important;
}

.message-htmlpart {
  border-radius: var(--iserv-radius) !important;
}

/* Message part frame */
#messagepartframe {
  background-color: var(--iserv-bg-secondary) !important;
  border: none !important;
}

/* Blockquotes in messages */
.message-part blockquote,
.message-htmlpart blockquote {
  border-left: 3px solid var(--iserv-accent) !important;
  background-color: rgba(59, 130, 246, 0.05) !important;
  color: var(--iserv-text-secondary) !important;
  border-radius: 0 var(--iserv-radius-sm) var(--iserv-radius-sm) 0 !important;
  margin: 8px 0 !important;
  padding: 8px 12px !important;
}

.message-part blockquote blockquote,
.message-htmlpart blockquote blockquote {
  border-left-color: #8b5cf6 !important;
  background-color: rgba(139, 92, 246, 0.05) !important;
}

.message-part blockquote blockquote blockquote,
.message-htmlpart blockquote blockquote blockquote {
  border-left-color: var(--iserv-success) !important;
  background-color: rgba(34, 197, 94, 0.05) !important;
}

.message-part blockquote span.blockquote-link,
.message-htmlpart blockquote span.blockquote-link {
  color: var(--iserv-accent) !important;
}

.message-part blockquote span.blockquote-link::after,
.message-htmlpart blockquote span.blockquote-link::after {
  color: var(--iserv-accent) !important;
}

/* Signature */
.message-part span.sig {
  color: var(--iserv-text-muted) !important;
}

/* Message part headers (forwarded/attached) */
.message-partheaders {
  background-color: var(--iserv-bg-primary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

.message-partheaders table.headers-table,
.message-partheaders table.headers-table * {
  color: var(--iserv-text-secondary) !important;
}

/* Image attachments */
p.image-attachment {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

p.image-attachment span {
  color: var(--iserv-text-secondary) !important;
}

p.image-attachment .attachment-links a::before {
  color: var(--iserv-accent) !important;
}

fieldset.image-attachment legend {
  color: var(--iserv-text-primary) !important;
  background-color: var(--iserv-bg-secondary) !important;
}

/* ═══════════════════════════════════════════
   §15  ATTACHMENTS
   ═══════════════════════════════════════════ */
.attachmentslist {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

.attachmentslist li {
  color: var(--iserv-text-primary) !important;
  border-bottom-color: var(--iserv-border-subtle) !important;
}

.attachmentslist li::before {
  color: var(--iserv-text-muted) !important;
}

.attachmentslist li a {
  color: var(--iserv-accent) !important;
}

.attachmentslist li a.cancelupload::before,
.attachmentslist li a.delete::before {
  color: var(--iserv-danger) !important;
}

/* File upload drop area */
.file-upload {
  background-color: var(--iserv-bg-primary) !important;
  border: 2px dashed var(--iserv-border) !important;
  border-radius: var(--iserv-radius-lg) !important;
  color: var(--iserv-text-secondary) !important;
  transition: all var(--iserv-transition) !important;
}

.file-upload::after {
  color: var(--iserv-text-muted) !important;
}

.file-upload .hint {
  color: var(--iserv-text-muted) !important;
}

.file-upload.droptarget.active {
  border-color: var(--iserv-accent) !important;
  background-color: rgba(59, 130, 246, 0.05) !important;
}

.file-upload.droptarget.hover {
  border-color: var(--iserv-accent) !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15) !important;
}

.file-upload .attachmentslist {
  border: none !important;
}

/* Image upload */
.image-upload {
  background-color: var(--iserv-bg-primary) !important;
  border-color: var(--iserv-border) !important;
}

.image-upload a.button {
  color: var(--iserv-text-secondary) !important;
}

/* ═══════════════════════════════════════════
   §16  COMPOSE VIEW
   ═══════════════════════════════════════════ */
.compose-headers {
  background-color: var(--iserv-bg-secondary) !important;
  border-bottom: 1px solid var(--iserv-border) !important;
}

.compose-headers td,
.compose-headers label {
  color: var(--iserv-text-secondary) !important;
}

/* Recipient input */
.recipient-input {
  background-color: var(--iserv-bg-primary) !important;
  border-color: var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

.recipient-input.focus {
  border-color: var(--iserv-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.recipient-input a.button.icon,
.recipient-input input {
  color: var(--iserv-text-primary) !important;
  background: transparent !important;
}

.recipient-input .recipient {
  background-color: var(--iserv-accent-glow) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: var(--iserv-accent) !important;
  border-radius: var(--iserv-radius-sm) !important;
}

/* Priority / options */
.compose-headers select {
  background-color: var(--iserv-bg-primary) !important;
}

/* ═══════════════════════════════════════════
   §17  HTML EDITOR (TinyMCE)
   ═══════════════════════════════════════════ */
.html-editor .editor-toolbar {
  background-color: var(--iserv-bg-secondary) !important;
  border-bottom: 1px solid var(--iserv-border) !important;
}

.html-editor .editor-toolbar .mce-i-html {
  color: var(--iserv-text-secondary) !important;
}

.html-editor .editor-toolbar .mce-i-html:hover,
.html-editor .editor-toolbar .mce-i-html:focus {
  color: var(--iserv-text-primary) !important;
  background-color: var(--iserv-bg-tertiary) !important;
}

.tox.tox-tinymce {
  border-color: var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar-overlord {
  background-color: var(--iserv-bg-secondary) !important;
  border-bottom: 1px solid var(--iserv-border) !important;
}

.tox .tox-toolbar-overlord > div {
  background-color: var(--iserv-bg-secondary) !important;
}

.tox .tox-toolbar__group:not(:last-of-type) {
  border-right-color: var(--iserv-border) !important;
}

.tox .tox-tbtn,
.tox .tox-split-button,
.tox .tox-swatches__picker-btn {
  color: var(--iserv-text-secondary) !important;
}

.tox .tox-tbtn svg,
.tox .tox-split-button svg,
.tox .tox-swatches__picker-btn svg {
  fill: var(--iserv-text-secondary) !important;
}

.tox .tox-tbtn:hover,
.tox .tox-split-button:hover,
.tox .tox-swatches__picker-btn:hover,
.tox .tox-tbtn:focus,
.tox .tox-split-button:focus {
  background-color: var(--iserv-bg-tertiary) !important;
  color: var(--iserv-text-primary) !important;
  border-color: transparent !important;
}

.tox .tox-tbtn--enabled {
  background-color: var(--iserv-accent-glow) !important;
}

.tox .tox-button--naked:focus:not(:disabled),
.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
  background-color: var(--iserv-bg-tertiary) !important;
  color: var(--iserv-text-primary) !important;
  border-color: transparent !important;
}

.tox .tox-button--naked:disabled {
  color: var(--iserv-text-muted) !important;
}

.tox .tox-selectfield select {
  background-color: var(--iserv-bg-primary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.tox .tox-selectfield svg {
  fill: var(--iserv-text-secondary) !important;
}

.tox .tox-color-input span::before {
  border-color: var(--iserv-border) !important;
}

/* TinyMCE Dialogs */
.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__body,
.tox .tox-dialog__footer,
.tox .tox-dialog__title {
  background-color: var(--iserv-bg-secondary) !important;
  color: var(--iserv-text-primary) !important;
  border-color: var(--iserv-border) !important;
}

.tox .tox-dialog {
  border-radius: var(--iserv-radius-lg) !important;
}

.tox .tox-textfield,
.tox .tox-color-input > input {
  background-color: var(--iserv-bg-primary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.tox .tox-label,
.tox .tox-dialog__body-nav-item,
.tox .tox-button--naked,
.tox .tox-dialog__header .tox-button,
.tox .tox-insert-table-picker__label {
  color: var(--iserv-text-primary) !important;
}

.tox .tox-dialog__header .tox-button--naked:hover,
.tox .tox-dialog__header .tox-button:hover {
  background-color: var(--iserv-bg-tertiary) !important;
}

.tox .tox-dialog__footer .tox-button {
  background-color: var(--iserv-accent) !important;
  border-color: var(--iserv-accent) !important;
  color: #fff !important;
  border-radius: var(--iserv-radius) !important;
}

.tox .tox-dialog__footer .tox-button:disabled {
  opacity: 0.45 !important;
}

.tox .tox-dialog__footer .tox-button:focus:not(:disabled),
.tox .tox-dialog__footer .tox-button:hover:not(:disabled) {
  background-color: var(--iserv-accent-hover) !important;
}

.tox .tox-dialog__footer .tox-button.tox-button--secondary {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover:not(:disabled) {
  background-color: #475569 !important;
}

.tox .tox-dialog__body-nav-item--active {
  border-bottom-color: var(--iserv-accent) !important;
  color: var(--iserv-accent) !important;
}

.tox .tox-dialog-wrap__backdrop {
  background-color: rgba(15, 23, 42, 0.75) !important;
}

.tox .tox-dialog__body-nav,
.tox .tox-collection__group {
  border-color: var(--iserv-border) !important;
}

/* TinyMCE Menus */
.tox .tox-menu {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
}

.tox .tox-collection__item-caret svg {
  fill: var(--iserv-text-secondary) !important;
}

.tox .tox-collection__item {
  color: var(--iserv-text-primary) !important;
}

.tox .tox-collection__item:not(:last-child) {
  border-bottom-color: var(--iserv-border-subtle) !important;
}

.tox .tox-collection__item--active,
.tox .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
  background-color: var(--iserv-accent-glow) !important;
  color: var(--iserv-accent) !important;
}

.tox .tox-collection__item--enabled {
  background-color: var(--iserv-accent-glow) !important;
  color: var(--iserv-accent) !important;
}

.tox .tox-collection--grid .tox-collection__item {
  border-color: var(--iserv-border-subtle) !important;
}

/* TinyMCE popup */
.tox .tox-pop.tox-pop--top::before,
.tox .tox-pop.tox-pop--top::after {
  border-bottom-color: var(--iserv-bg-secondary) !important;
}

.tox .tox-pop__dialog {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

/* ═══════════════════════════════════════════
   §18  SETTINGS PAGES
   ═══════════════════════════════════════════ */

/* Settings menu */
.menu a::before,
.listing.iconized tr td::before {
  color: var(--iserv-text-muted) !important;
}

/* Identity / filter / response tables */
#identities-table td.mail::before,
#responses-table td.name::before,
#filterslist td.name::before,
#filtersetslist td.name::before {
  color: var(--iserv-text-muted) !important;
}

/* propform row buttons */
.propform td.rowbuttons a::before {
  color: var(--iserv-text-muted) !important;
}

.propform td.rowbuttons a:hover::before {
  color: var(--iserv-accent) !important;
}

/* Skin selection thumbnails */
.skinselection .skinthumbnail {
  border-color: var(--iserv-border) !important;
  background-color: var(--iserv-bg-tertiary) !important;
  border-radius: var(--iserv-radius) !important;
}

/* CodeMirror (raw editor in settings) */
.formcontent.raweditor .CodeMirror {
  background-color: var(--iserv-bg-primary) !important;
  border: 1px solid var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius) !important;
}

.formcontent.raweditor .CodeMirror-focused {
  border-color: var(--iserv-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.CodeMirror-selected,
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background: rgba(59, 130, 246, 0.2) !important;
}

.CodeMirror-gutters {
  background-color: var(--iserv-bg-secondary) !important;
  border-right-color: var(--iserv-border) !important;
  color: var(--iserv-text-muted) !important;
}

.CodeMirror-activeline-background {
  background-color: rgba(59, 130, 246, 0.06) !important;
}

/* ═══════════════════════════════════════════
   §19  DIALOGS / MODALS / POPOVERS
   ═══════════════════════════════════════════ */
.modal-content,
.ui-dialog,
.ui-widget,
.ui-widget-content {
  background-color: var(--iserv-bg-secondary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.ui-dialog {
  border-radius: var(--iserv-radius-xl) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
  overflow: hidden !important;
}

.modal-content {
  border-radius: var(--iserv-radius-xl) !important;
  border-color: var(--iserv-border) !important;
  animation: iserv-scaleIn 0.2s ease;
}

.ui-dialog {
  animation: iserv-scaleIn 0.2s ease;
}

.modal-header,
.ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar {
  background-color: var(--iserv-bg-secondary) !important;
  border-bottom: 1px solid var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.ui-dialog .ui-dialog-title {
  color: var(--iserv-text-primary) !important;
}

.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close::before {
  color: var(--iserv-text-secondary) !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background-color: var(--iserv-bg-tertiary) !important;
  border-radius: var(--iserv-radius-sm) !important;
}

.modal-footer {
  border-top: 1px solid var(--iserv-border) !important;
  background-color: var(--iserv-bg-secondary) !important;
}

.modal-body {
  color: var(--iserv-text-primary) !important;
}

.ui-dialog-overlay,
.modal-backdrop,
.ui-widget-overlay {
  background-color: rgba(15, 23, 42, 0.75) !important;
}

/* Dialog button pane */
.ui-dialog .ui-dialog-buttonpane {
  border-top-color: var(--iserv-border) !important;
  background-color: var(--iserv-bg-secondary) !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
  color: var(--iserv-text-secondary) !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  border-radius: var(--iserv-radius) !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options::before {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §20  POPOVERS & POPUPS
   ═══════════════════════════════════════════ */
.popover {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius-lg) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
  color: var(--iserv-text-primary) !important;
}

.popover-body {
  color: var(--iserv-text-primary) !important;
}

/* Popover arrows */
.bs-popover-auto[x-placement^="right"] > .arrow::after,
.bs-popover-right > .arrow::after {
  border-right-color: var(--iserv-bg-secondary) !important;
}

.bs-popover-auto[x-placement^="left"] > .arrow::after,
.bs-popover-left > .arrow::after {
  border-left-color: var(--iserv-bg-secondary) !important;
}

.bs-popover-auto[x-placement^="top"] > .arrow::after,
.bs-popover-top > .arrow::after {
  border-top-color: var(--iserv-bg-secondary) !important;
}

.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
.bs-popover-bottom > .arrow::after {
  border-bottom-color: var(--iserv-bg-secondary) !important;
}

/* Popover menus */
.popover .menu li {
  border-bottom-color: var(--iserv-border-subtle) !important;
}

.popover .menu li.separator {
  border-bottom-color: var(--iserv-border) !important;
  background: transparent !important;
}

.popover .menu ul + li.separator {
  border-top-color: var(--iserv-border) !important;
}

.popover .menu a,
.popover .menu li a {
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius-sm) !important;
  transition: all var(--iserv-transition) !important;
}

.popover .menu a::before {
  color: var(--iserv-text-muted) !important;
}

.popover .menu a:hover {
  background-color: var(--iserv-accent-glow) !important;
  color: var(--iserv-accent) !important;
}

.popover .menu a:hover::before {
  color: var(--iserv-accent) !important;
}

.popover .menu li a[aria-haspopup]::after {
  color: var(--iserv-text-muted) !important;
}

/* Layout menu popover (mobile) */
#layout-menu.popover {
  background-color: #0a0f1e !important;
  border-color: rgba(51, 65, 85, 0.5) !important;
}

/* ═══════════════════════════════════════════
   §21  DROPDOWN MENUS
   ═══════════════════════════════════════════ */
.dropdown-menu,
.popupmenu {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
  padding: 4px !important;
}

.dropdown-menu a,
.dropdown-item,
.popupmenu a {
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius-sm) !important;
  transition: all var(--iserv-transition) !important;
}

.dropdown-menu a:hover,
.dropdown-item:hover,
.popupmenu a:hover {
  background-color: var(--iserv-accent-glow) !important;
  color: var(--iserv-accent) !important;
}

.dropdown-divider {
  border-color: var(--iserv-border) !important;
}

/* ═══════════════════════════════════════════
   §22  TABLES & LISTINGS
   ═══════════════════════════════════════════ */
table.listing,
.table {
  border-color: var(--iserv-border) !important;
}

table.listing td,
table.listing th,
.table td,
.table th,
.table thead th {
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

table.listing th,
.table thead th {
  background-color: rgba(30, 41, 59, 0.6) !important;
  color: var(--iserv-text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

table.listing th a,
table.listing th a.sortcol {
  color: var(--iserv-text-muted) !important;
  transition: color 0.2s ease !important;
}

table.listing th a:hover,
table.listing th a.sortcol:hover {
  color: var(--iserv-accent) !important;
}

table.listing tr:hover,
.table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

table.listing tr.selected td,
.table tbody tr.selected td {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

/* Table widget */
.table-widget {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
  overflow: hidden !important;
}

.table-widget > .footer {
  background-color: var(--iserv-bg-secondary) !important;
  border-top-color: var(--iserv-border) !important;
}

.table-widget table.options-table tr:last-child td {
  border-bottom: none !important;
}

.table-widget table.options-table tr.selected td {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

/* ═══════════════════════════════════════════
   §23  NAVIGATION TABS
   ═══════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 1px solid var(--iserv-border) !important;
}

.nav-tabs .nav-link {
  color: var(--iserv-text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all var(--iserv-transition) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--iserv-text-primary) !important;
  border-bottom-color: var(--iserv-text-muted) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active {
  color: var(--iserv-accent) !important;
  border-bottom-color: var(--iserv-accent) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════
   §24  QUOTA BAR
   ═══════════════════════════════════════════ */
.quota-widget {
  background-color: var(--iserv-bg-secondary) !important;
}

.quota-widget::before {
  color: var(--iserv-text-muted) !important;
}

.quota-widget .bar {
  background-color: var(--iserv-bg-tertiary) !important;
  border-radius: 4px !important;
  overflow: hidden;
  height: 8px !important;
}

.quota-widget .bar .value {
  background: var(--iserv-gradient) !important;
  border-radius: 4px !important;
  transition: width 0.3s ease !important;
}

.quota-widget .text,
.quota-info,
.quota-info .root {
  color: var(--iserv-text-secondary) !important;
}

/* ═══════════════════════════════════════════
   §25  NOTIFICATIONS / MESSAGE STACK
   ═══════════════════════════════════════════ */
.ui.alert,
.notice,
.boxinformation,
.boxwarning,
.boxerror,
#messagestack div {
  border-radius: var(--iserv-radius) !important;
  font-family: var(--iserv-font) !important;
  box-shadow: var(--iserv-shadow) !important;
  border: none !important;
}

.ui.alert > i.icon::before {
  margin-right: 8px;
}

#messagestack div {
  padding: 12px 18px !important;
  margin-bottom: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  animation: iserv-fadeIn 0.3s ease;
}

#messagestack div.notice,
#messagestack div.confirmation {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: var(--iserv-success) !important;
  border-left: 4px solid var(--iserv-success) !important;
}

#messagestack div.error {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border-left: 4px solid var(--iserv-danger) !important;
}

#messagestack div.warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: var(--iserv-warning) !important;
  border-left: 4px solid var(--iserv-warning) !important;
}

#messagestack div.loading {
  background-color: rgba(59, 130, 246, 0.12) !important;
  color: var(--iserv-accent) !important;
  border-left: 4px solid var(--iserv-accent) !important;
}

/* Box information banners */
.boxinformation {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--iserv-accent) !important;
  border-left: 4px solid var(--iserv-accent) !important;
}

.boxwarning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: var(--iserv-warning) !important;
  border-left: 4px solid var(--iserv-warning) !important;
}

.boxerror {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important;
  border-left: 4px solid var(--iserv-danger) !important;
}

/* ═══════════════════════════════════════════
   §26  SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--iserv-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--iserv-bg-tertiary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--iserv-text-muted);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--iserv-bg-tertiary) var(--iserv-bg-primary);
}

/* ═══════════════════════════════════════════
   §27  LINKS & SELECTION
   ═══════════════════════════════════════════ */
a {
  color: var(--iserv-accent) !important;
  transition: color var(--iserv-transition) !important;
}

a:hover {
  color: var(--iserv-accent-hover) !important;
}

a.disabled,
a.disabled:not(.btn) {
  color: var(--iserv-text-muted) !important;
  opacity: 0.5;
}

::selection {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #fff !important;
}

::-moz-selection {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   §28  CHECKBOX / TOGGLE SWITCHES
   ═══════════════════════════════════════════ */
.custom-switch .custom-control-label::before {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  transition: all var(--iserv-transition) !important;
}

.custom-switch .custom-control-label::after {
  background-color: var(--iserv-text-muted) !important;
  transition: all var(--iserv-transition) !important;
}

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

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff !important;
}

.custom-switch .custom-control-input:disabled ~ .custom-control-label {
  opacity: 0.5 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--iserv-accent) !important;
  border-color: var(--iserv-accent) !important;
}

/* ═══════════════════════════════════════════
   §29  DATEPICKER
   ═══════════════════════════════════════════ */
.ui-datepicker {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius-lg) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
}

.ui-datepicker .ui-datepicker-header {
  background-color: var(--iserv-bg-secondary) !important;
  border-bottom: 1px solid var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

.ui-datepicker th {
  color: var(--iserv-text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  color: var(--iserv-text-secondary) !important;
}

.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  color: var(--iserv-text-secondary) !important;
}

.ui-datepicker .ui-state-default,
.ui-datepicker.ui-widget-content .ui-state-default {
  color: var(--iserv-text-primary) !important;
  background: transparent !important;
  border-radius: var(--iserv-radius-sm) !important;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
  background-color: var(--iserv-accent-glow) !important;
  color: var(--iserv-accent) !important;
  font-weight: 600 !important;
}

.ui-datepicker .ui-datepicker-days-cell-over a {
  background-color: var(--iserv-bg-tertiary) !important;
}

/* ═══════════════════════════════════════════
   §30  AUTOCOMPLETE / UI-MENU
   ═══════════════════════════════════════════ */
.ui-menu {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
  padding: 4px !important;
}

.ui-menu .ui-menu-item {
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius-sm) !important;
}

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

/* ═══════════════════════════════════════════
   §31  MINICOLORS (Color Picker)
   ═══════════════════════════════════════════ */
.minicolors-panel {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
  box-shadow: var(--iserv-shadow-lg) !important;
}

/* ═══════════════════════════════════════════
   §32  PGP KEY IMPORT
   ═══════════════════════════════════════════ */
.pgpkeyimport div.key {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
}

.pgpkeyimport div.key.revoked,
.pgpkeyimport div.key.disabled {
  opacity: 0.5 !important;
}

.pgpkeyimport div.key label.keyid + a::before {
  color: var(--iserv-accent) !important;
}

.pgpkeyimport li.uid::before {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §33  FOOTER & PAGINATION
   ═══════════════════════════════════════════ */
.footer,
#layout > div > .footer,
#layout-content .footer {
  background-color: var(--iserv-bg-secondary) !important;
  border-top: 1px solid var(--iserv-border) !important;
  color: var(--iserv-text-muted) !important;
}

.footer.small {
  font-size: 0.75rem !important;
}

/* Pagination */
.pagenav {
  color: var(--iserv-text-muted) !important;
}

.pagenav a {
  color: var(--iserv-text-secondary) !important;
  transition: color var(--iserv-transition) !important;
}

.pagenav a:hover {
  color: var(--iserv-accent) !important;
}

.pagenav .current-page {
  color: var(--iserv-text-primary) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════
   §34  SPINNER / LOADING
   ═══════════════════════════════════════════ */
.spinner {
  animation: iserv-spin 1s linear infinite;
}

.spinner circle {
  stroke: var(--iserv-border) !important;
}

.spinner circle:first-child {
  stroke: var(--iserv-accent) !important;
}

@keyframes iserv-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Content loading overlay */
.content.frame-loading::after {
  border-radius: var(--iserv-radius) !important;
}

/* ═══════════════════════════════════════════
   §35  LOGIN PAGE (Panel Redirect)
   ═══════════════════════════════════════════ */
#login-form {
  background: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius-xl) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

#login-form .box-inner {
  background: transparent !important;
}

#login-form .input-group {
  margin-bottom: 12px;
}

#login-form input {
  background-color: var(--iserv-bg-primary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius) !important;
  height: 44px !important;
  font-size: 14px !important;
}

#login-form input:focus {
  border-color: var(--iserv-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

#login-form .btn-primary,
#rcmloginsubmit {
  background: var(--iserv-gradient) !important;
  border: none !important;
  border-radius: var(--iserv-radius) !important;
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: all 0.3s ease !important;
}

#login-form .btn-primary:hover,
#rcmloginsubmit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

#login-form #logo {
  margin-bottom: 24px;
}

#login-form .brand,
#login-form .product-name {
  font-family: var(--iserv-font-logo) !important;
  background: var(--iserv-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem !important;
  letter-spacing: -0.5px;
}

#login-footer {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §36  ABOUT PAGE
   ═══════════════════════════════════════════ */
#aboutframe {
  background-color: var(--iserv-bg-primary) !important;
}

/* ═══════════════════════════════════════════
   §37  PRINT OVERRIDES (hide in print)
   ═══════════════════════════════════════════ */
@media print {
  body,
  #layout,
  #layout-content,
  .message-part,
  .message-htmlpart,
  #message-header {
    background-color: #fff !important;
    color: #000 !important;
  }

  #taskmenu,
  #layout-sidebar,
  .toolbar,
  .header,
  .footer,
  .searchbar,
  .floating-action-buttons {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════
   §38  RESPONSIVE / MOBILE
   ═══════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  .header,
  #layout-sidebar .header,
  #layout-list .header,
  #layout-content .header {
    background-color: var(--iserv-bg-secondary) !important;
  }

  #taskmenu {
    background-color: var(--iserv-bg-secondary) !important;
    border-top: 1px solid var(--iserv-border) !important;
    border-right: none !important;
  }

  #taskmenu a {
    margin: 0 !important;
    border-radius: 0 !important;
  }

  #taskmenu a.selected {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--iserv-accent) !important;
    background: transparent !important;
    color: var(--iserv-accent) !important;
  }

  #taskmenu a.selected::before {
    color: var(--iserv-accent) !important;
  }

  /* Mobile back button */
  .header a.back-sidebar-button,
  .header a.back-list-button {
    color: var(--iserv-text-primary) !important;
  }

  /* Mobile popover menus fill width */
  .popover {
    border-radius: var(--iserv-radius-lg) var(--iserv-radius-lg) 0 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .toolbar a span.inner {
    display: none !important;
  }

  .header > .header-title {
    font-size: 1rem !important;
  }
}

/* ═══════════════════════════════════════════
   §39  SMOOTH TRANSITIONS (Global)
   ═══════════════════════════════════════════ */
#taskmenu a,
.btn,
.nav-link,
.toolbar a,
.messagelist tr,
.treelist li a,
.folderlist li a,
.contactlist tr,
input,
select,
textarea,
.form-control,
.listing td.action a,
.popover .menu a,
.dropdown-menu a,
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
  transition: all var(--iserv-transition) !important;
}

/* Hover transform for interactive elements */
.btn-primary:hover:not(:disabled),
.floating-action-buttons a.button:hover {
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   §40  GOOGLE SPELL CHECK WIDGET
   ═══════════════════════════════════════════ */
.googie_list {
  background-color: var(--iserv-bg-secondary) !important;
  border: 1px solid var(--iserv-border) !important;
  border-radius: var(--iserv-radius) !important;
  box-shadow: var(--iserv-shadow) !important;
}

.googie_list li .googie_list_revert::before,
.googie_list li .googie_add_to_dict::before {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §41  KEY LIST (PGP/Encryption)
   ═══════════════════════════════════════════ */
.keylist li::before {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §42  CUSTOM LOGO STYLING
   ═══════════════════════════════════════════ */
#logo-img,
.logo {
  filter: none !important;
}

/* ═══════════════════════════════════════════
   §43  ACCESSIBILITY - FOCUS RINGS
   ═══════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--iserv-accent) !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--iserv-accent) !important;
  outline-offset: 2px !important;
}

/* Remove outline when not focus-visible */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* ═══════════════════════════════════════════
   §44  CONTENT AREA DETAILS
   ═══════════════════════════════════════════ */

/* About page content */
#settings-right .formcontent,
#settings-right .scroller {
  background-color: var(--iserv-bg-primary) !important;
}

/* Identity / Filter / Response pages */
#identities-table,
#responses-table,
#filterslist,
#filtersetslist {
  background-color: var(--iserv-bg-primary) !important;
}

/* Folder management */
#folderslist {
  background-color: var(--iserv-bg-primary) !important;
}

/* Splitter / resize handle between panes */
.ui-resizable-handle {
  background-color: var(--iserv-border) !important;
  opacity: 0.5;
  transition: opacity var(--iserv-transition) !important;
}

.ui-resizable-handle:hover {
  opacity: 1;
  background-color: var(--iserv-accent) !important;
}

/* ═══════════════════════════════════════════
   §45  DARK MODE OVERRIDE (Force dark always)
   Every html.dark-mode selector is now
   redundant since we force dark, but we
   still set them for completeness
   ═══════════════════════════════════════════ */
html.dark-mode .btn {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

html.dark-mode .btn:focus,
html.dark-mode .btn:hover {
  background-color: #475569 !important;
}

html.dark-mode .btn:disabled {
  opacity: 0.45 !important;
}

html.dark-mode .btn-primary {
  background-color: var(--iserv-accent) !important;
  border-color: var(--iserv-accent) !important;
  color: #fff !important;
}

html.dark-mode .btn-primary:hover:not(:disabled) {
  background-color: var(--iserv-accent-hover) !important;
}

html.dark-mode .btn-secondary {
  background-color: var(--iserv-bg-tertiary) !important;
  border-color: var(--iserv-border) !important;
  color: var(--iserv-text-primary) !important;
}

html.dark-mode .btn-secondary:hover:not(:disabled) {
  background-color: #475569 !important;
}

html.dark-mode .btn-danger {
  background-color: var(--iserv-danger) !important;
  border-color: var(--iserv-danger) !important;
  color: #fff !important;
}

html.dark-mode .btn-danger:hover:not(:disabled) {
  background-color: #dc2626 !important;
}

/* ═══════════════════════════════════════════
   §46  LISTING INFO & SECONDARY TEXT
   ═══════════════════════════════════════════ */
.listing-info,
.listing span.secondary,
.file-upload .hint,
.contactlist span.email,
#contacthead.readonly .source.row,
.formcontent .hint {
  color: var(--iserv-text-muted) !important;
}

/* ═══════════════════════════════════════════
   §47  BODY TASK-SPECIFIC ADJUSTMENTS
   ═══════════════════════════════════════════ */

/* Mail compose: ensure compose area is dark */
body[class*="task-mail"][class*="action-compose"] #layout-content {
  background-color: var(--iserv-bg-primary) !important;
}

/* Settings: ensure clean background */
body[class*="task-settings"] #layout-content {
  background-color: var(--iserv-bg-primary) !important;
}

/* Addressbook */
body[class*="task-addressbook"] #layout-content {
  background-color: var(--iserv-bg-primary) !important;
}

/* ═══════════════════════════════════════════
   §48  SCROLLBAR CORNER
   ═══════════════════════════════════════════ */
::-webkit-scrollbar-corner {
  background: var(--iserv-bg-primary);
}

/* ═══════════════════════════════════════════
   §49  SCROLLER & EMPTY STATES
   ═══════════════════════════════════════════ */
.scroller {
  background-color: transparent !important;
}

/* Empty mailbox / contact list placeholder */
.listing + .listing-info,
.content > .listing-info {
  color: var(--iserv-text-muted) !important;
  text-align: center;
  padding: 60px 20px;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Pagination bar */
.pagenav.footer {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-top: 1px solid rgba(51, 65, 85, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 6px 12px !important;
}

.pagenav a {
  color: var(--iserv-text-muted) !important;
  transition: all 0.2s ease !important;
}

.pagenav a:hover:not(.disabled) {
  color: var(--iserv-accent) !important;
}

.pagenav .pagenav-text {
  color: var(--iserv-text-secondary) !important;
  font-size: 0.8rem !important;
}

/* ═══════════════════════════════════════════
   §50  TOOLBAR MENU POPOVER (Mobile more menu)
   ═══════════════════════════════════════════ */
a.toolbar-list-button::before,
a.toolbar-menu-button::before {
  color: var(--iserv-text-secondary) !important;
}

a.toolbar-list-button:hover::before,
a.toolbar-menu-button:hover::before {
  color: var(--iserv-text-primary) !important;
}

/* ═══════════════════════════════════════════
   §51  SPLITTER BETWEEN PANELS
   ═══════════════════════════════════════════ */
.splitter {
  background-color: rgba(51, 65, 85, 0.3) !important;
  width: 3px !important;
  transition: background-color 0.2s ease !important;
}

.splitter:hover {
  background-color: var(--iserv-accent) !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
}

/* ═══════════════════════════════════════════
   §52  MISC OVERRIDES / POLISH
   ═══════════════════════════════════════════ */

/* Tooltip */
.tooltip-inner {
  background-color: var(--iserv-bg-tertiary) !important;
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius-sm) !important;
  font-family: var(--iserv-font) !important;
  font-size: 0.82rem !important;
  padding: 6px 10px !important;
}

.tooltip .arrow::before {
  border-color: transparent !important;
}

.bs-tooltip-top .arrow::before {
  border-top-color: var(--iserv-bg-tertiary) !important;
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--iserv-bg-tertiary) !important;
}

.bs-tooltip-left .arrow::before {
  border-left-color: var(--iserv-bg-tertiary) !important;
}

.bs-tooltip-right .arrow::before {
  border-right-color: var(--iserv-bg-tertiary) !important;
}

/* Badge / pill */
.badge {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
}

.badge-primary {
  background-color: var(--iserv-accent) !important;
}

.badge-danger {
  background-color: var(--iserv-danger) !important;
}

.badge-success {
  background-color: var(--iserv-success) !important;
}

.badge-warning {
  background-color: var(--iserv-warning) !important;
}

/* Pre / code blocks */
pre, code {
  background-color: var(--iserv-bg-primary) !important;
  color: var(--iserv-text-primary) !important;
  border-radius: var(--iserv-radius-sm) !important;
  border: 1px solid var(--iserv-border) !important;
}

/* HR */
hr {
  border-color: var(--iserv-border) !important;
}

/* Fieldset legend border when advanced toggle */
fieldset.advanced {
  border-color: var(--iserv-border) !important;
}

/* Progress bars (general) */
.progress {
  background-color: var(--iserv-bg-tertiary) !important;
  border-radius: 4px !important;
  height: 8px !important;
}

.progress-bar {
  background: var(--iserv-gradient) !important;
  border-radius: 4px !important;
}

/* Alert close button */
.alert .close,
#messagestack .close {
  color: inherit !important;
  opacity: 0.7;
}

.alert .close:hover,
#messagestack .close:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   §53  PANEL HEADER BAR
   ═══════════════════════════════════════════ */
.iserv-panel-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background-color: #080c19;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35);
  position: relative;
  z-index: 10000;
  flex-shrink: 0;
  font-family: var(--iserv-font);
  animation: iserv-fadeIn 0.3s ease;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

.iserv-panel-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--iserv-text-secondary) !important;
  text-decoration: none !important;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--iserv-radius);
  transition: all var(--iserv-transition);
}

.iserv-panel-back:hover {
  color: var(--iserv-text-primary) !important;
  background-color: var(--iserv-bg-tertiary);
}

.iserv-panel-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.iserv-panel-logo {
  font-family: var(--iserv-font-logo);
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.iserv-panel-divider {
  color: var(--iserv-border);
  font-size: 1.1rem;
  font-weight: 300;
}

.iserv-panel-title {
  color: var(--iserv-text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.iserv-panel-spacer {
  flex: 1;
}

/* Hide panel bar in iframes, print, and login */
html.iframe .iserv-panel-bar,
.task-login .iserv-panel-bar {
  display: none !important;
}

/* Push layout down when panel bar is visible */
body:not(.task-login) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:not(.task-login) #layout {
  flex: 1;
}

/* ═══════════════════════════════════════════
   §54  KEYFRAME ANIMATIONS (Panel-matching)
   ═══════════════════════════════════════════ */
@keyframes iserv-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes iserv-scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes iserv-slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes iserv-gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════
   §55  FOLDER LIST ENTRY ANIMATION
   ═══════════════════════════════════════════ */
.folderlist li,
.treelist li {
  animation: iserv-slideIn 0.3s ease;
}

/* ═══════════════════════════════════════════
   §56  SELECTED FOLDER GRADIENT (matches active nav)
   ═══════════════════════════════════════════ */
/* (Moved to §9 - Folder List) */

/* ═══════════════════════════════════════════
   END OF iServ Mail Custom Theme
   ═══════════════════════════════════════════ */