/* HYVE Mail — Editorial Dark Theme
 * Paleta: black #1A1A17, cream #FBFCF3, orange #E85D24
 * Estratégia: dark mode global. Não é override de detalhes — é theme completo.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

/* ─── Bulma 1.x scheme override → dark HYVE ─── */
:root {
  /* HYVE colors (hex) */
  --hyve-orange: #E85D24;
  --hyve-orange-bright: #FF7B45;
  --hyve-orange-deep: #C94A18;
  --hyve-black: #1A1A17;
  --hyve-black-soft: #25241F;
  --hyve-black-paper: #2E2C27;
  --hyve-black-card: #1F1E1A;
  --hyve-cream: #FBFCF3;
  --hyve-cream-warm: #F5F2E7;
  --hyve-rule: rgba(251, 252, 243, 0.10);
  --hyve-rule-strong: rgba(251, 252, 243, 0.20);

  /* Bulma scheme variables — força dark mode */
  --bulma-scheme-h: 40deg;
  --bulma-scheme-s: 12%;
  --bulma-scheme-main: var(--hyve-black);
  --bulma-scheme-main-bis: var(--hyve-black-soft);
  --bulma-scheme-main-ter: var(--hyve-black-paper);
  --bulma-background: var(--hyve-black-soft);
  --bulma-background-hover: var(--hyve-black-paper);

  --bulma-body-background-color: var(--hyve-black);
  --bulma-body-color: var(--hyve-cream);
  --bulma-text: var(--hyve-cream);
  --bulma-text-strong: var(--hyve-cream);
  --bulma-text-light: rgba(251, 252, 243, 0.65);
  --bulma-text-weak: rgba(251, 252, 243, 0.55);
  --bulma-text-invert: var(--hyve-black);

  --bulma-border: var(--hyve-rule);
  --bulma-border-hover: var(--hyve-rule-strong);
  --bulma-border-weak: rgba(251, 252, 243, 0.06);

  --bulma-primary-h: 16deg;
  --bulma-primary-s: 80%;
  --bulma-primary-l: 53%;
  --bulma-link-h: 16deg;
  --bulma-link-s: 80%;
  --bulma-link-l: 53%;

  --bulma-family-primary: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bulma-family-secondary: 'Geist', system-ui, sans-serif;
  --bulma-family-code: 'Geist Mono', 'SF Mono', Menlo, monospace;

  --bulma-input-background-color: var(--hyve-black-paper);
  --bulma-input-color: var(--hyve-cream);
  --bulma-input-placeholder-color: rgba(251, 252, 243, 0.4);
  --bulma-input-border-color: var(--hyve-rule-strong);
  --bulma-input-focus-border-color: var(--hyve-orange);
  --bulma-input-focus-shadow-rgba: rgba(232, 93, 36, 0.25);

  --bulma-card-background-color: var(--hyve-black-card);
  --bulma-card-color: var(--hyve-cream);
  --bulma-card-header-background-color: var(--hyve-black-soft);

  --bulma-table-background-color: transparent;
  --bulma-table-color: var(--hyve-cream);
  --bulma-table-cell-border-color: var(--hyve-rule);
  --bulma-table-head-cell-color: var(--hyve-cream);
  --bulma-table-head-background-color: var(--hyve-black);
  --bulma-table-row-hover-background-color: rgba(232, 93, 36, 0.06);

  --bulma-modal-card-head-background-color: var(--hyve-black);
  --bulma-modal-card-body-background-color: var(--hyve-black-soft);
}

/* ─── Body global ─── */
html, body {
  font-family: 'Geist', -apple-system, system-ui, sans-serif !important;
  background: var(--hyve-black) !important;
  color: var(--hyve-cream) !important;
}

body {
  background-color: var(--hyve-black) !important;
}

/* ─── Layout principal: containers, sections ─── */
html body .container,
html body .section,
html body main,
html body #app,
html body .columns,
html body .wrapper,
html body .has-background-light,
html body .has-background-white,
html body .has-background-white-ter,
html body .has-background-white-bis {
  background-color: transparent !important;
  color: var(--hyve-cream) !important;
}

/* CRÍTICO: o div principal de conteúdo tem bg=white por padrão */
html body .main,
html body div.main,
html body .main-content,
html body .content-wrap {
  background-color: var(--hyve-black) !important;
  color: var(--hyve-cream) !important;
}

/* ─── Navbar topo (header com logo + user dropdown) ─── */
html body nav.navbar,
html body .navbar,
html body .navbar.is-fixed-top {
  background: var(--hyve-black) !important;
  border-bottom: 1px solid var(--hyve-rule-strong) !important;
}

html body .navbar-item,
html body .navbar-link {
  color: var(--hyve-cream) !important;
}

html body .navbar-dropdown {
  background: var(--hyve-black-soft) !important;
  border: 1px solid var(--hyve-rule-strong);
}

html body .navbar-dropdown a.navbar-item:hover {
  background: rgba(232, 93, 36, 0.10) !important;
  color: var(--hyve-orange) !important;
}

/* ─── Logo no navbar (substitui listmonk embedded) ─── */
html body .navbar-brand .logo img,
html body .navbar .logo img,
html body nav .logo img {
  display: none !important;
}

html body .navbar-brand .logo a,
html body .navbar .logo a {
  display: inline-block !important;
  width: 180px;
  height: 40px;
  background-image: url('/public/static/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  background-color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
  /* Logo já é cream + laranja — sem filtro */
}

/* ─── Sidebar / menu lateral ─── */
html body aside.menu-bar,
html body aside.menu,
html body .menu-bar,
html body .b-sidebar .sidebar-content,
html body .menu {
  background: var(--hyve-black) !important;
  color: var(--hyve-cream) !important;
  border-right: 1px solid var(--hyve-rule-strong) !important;
}

html body .menu-list a,
html body .menu-bar .menu-list a,
html body aside .menu-list a,
html body aside a {
  color: rgba(251, 252, 243, 0.75) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-weight: 500;
  padding: 0.75em 1em !important;
  border-left: 3px solid transparent;
}

html body .menu-list a:hover,
html body .menu-bar .menu-list a:hover,
html body aside .menu-list a:hover {
  background: rgba(232, 93, 36, 0.08) !important;
  color: var(--hyve-orange) !important;
  border-left-color: rgba(232, 93, 36, 0.4);
}

html body .menu-list a.is-active,
html body .menu-bar .menu-list a.is-active,
html body .menu-list a.router-link-active,
html body aside .menu-list a.is-active {
  background: rgba(232, 93, 36, 0.14) !important;
  color: var(--hyve-orange) !important;
  border-left: 3px solid var(--hyve-orange) !important;
}

html body .menu-label,
html body aside .menu-label {
  color: rgba(251, 252, 243, 0.45) !important;
  font-family: 'Geist Mono', monospace !important;
  font-weight: 600;
  font-size: 0.65em !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ─── Cards / boxes ─── */
html body .card,
html body .box,
html body .modal-card-body {
  background-color: var(--hyve-black-card) !important;
  color: var(--hyve-cream) !important;
  border: 1px solid var(--hyve-rule) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html body .card-header {
  background: var(--hyve-black-soft) !important;
  color: var(--hyve-cream) !important;
  border-bottom: 1px solid var(--hyve-rule) !important;
  border-radius: 4px 4px 0 0 !important;
}

html body .card-header-title {
  color: var(--hyve-cream) !important;
  font-weight: 700;
}

/* ─── Headings / typography ─── */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .title, html body .subtitle {
  color: var(--hyve-cream) !important;
  font-family: 'Geist', sans-serif !important;
}

html body .title {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

html body .subtitle {
  color: rgba(251, 252, 243, 0.65) !important;
}

html body p,
html body span,
html body div:not([class*="background"]):not([class*="bg"]),
html body label {
  color: inherit;
}

html body label.label {
  color: rgba(251, 252, 243, 0.85) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 0.7em !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500;
}

html body .help {
  color: rgba(251, 252, 243, 0.55) !important;
}

/* ─── Inputs ─── */
html body .input,
html body .textarea,
html body .select select,
html body input.input,
html body textarea.textarea {
  background-color: var(--hyve-black-paper) !important;
  color: var(--hyve-cream) !important;
  border: 1px solid var(--hyve-rule-strong) !important;
  border-radius: 4px !important;
  font-family: 'Geist', sans-serif !important;
  box-shadow: none !important;
}

html body .input:focus,
html body .textarea:focus,
html body .select select:focus {
  border-color: var(--hyve-orange) !important;
  box-shadow: 0 0 0 2px rgba(232, 93, 36, 0.2) !important;
}

html body .input::placeholder,
html body .textarea::placeholder {
  color: rgba(251, 252, 243, 0.35) !important;
}

/* ─── Botões ─── */
html body .button {
  font-family: 'Geist', sans-serif !important;
  font-weight: 500;
  border-radius: 4px !important;
}

html body .button.is-primary,
html body a.button.is-primary,
html body button.is-primary {
  background-color: var(--hyve-orange) !important;
  border-color: var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85em;
}

html body .button.is-primary:hover,
html body a.button.is-primary:hover,
html body button.is-primary:hover {
  background-color: var(--hyve-orange-bright) !important;
  border-color: var(--hyve-orange-bright) !important;
  color: var(--hyve-black) !important;
}

html body .button.is-link,
html body button.is-link,
html body section.login button[type="submit"] {
  background-color: var(--hyve-orange) !important;
  border-color: var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

html body .button.is-link:hover {
  background-color: var(--hyve-orange-bright) !important;
  border-color: var(--hyve-orange-bright) !important;
}

html body .button.is-info {
  background-color: var(--hyve-black-soft) !important;
  border-color: var(--hyve-rule-strong) !important;
  color: var(--hyve-cream) !important;
}

html body .button.is-danger {
  background-color: var(--hyve-orange-deep) !important;
  border-color: var(--hyve-orange-deep) !important;
  color: var(--hyve-cream) !important;
}

/* Default button (não-categorized) — usa :where() pra zerar especificidade
   e permitir overrides específicos (login, etc) ganhar sem brigar. */
:where(html body .button):not(.is-primary):not(.is-link):not(.is-danger):not(.is-info) {
  background-color: var(--hyve-black-paper);
  border-color: var(--hyve-rule-strong);
  color: var(--hyve-cream);
}

:where(html body .button):not(.is-primary):not(.is-link):not(.is-danger):not(.is-info):hover {
  background-color: var(--hyve-black-soft);
  border-color: var(--hyve-orange);
  color: var(--hyve-orange);
}

/* ─── Tags ─── */
html body .tag {
  font-family: 'Geist Mono', monospace !important;
  font-size: 0.7em !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 600;
  border-radius: 2px !important;
  background: var(--hyve-black-paper) !important;
  color: var(--hyve-cream) !important;
}

html body .tag.is-primary,
html body .tag.is-link {
  background-color: var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
}

html body .tag.is-success {
  background-color: var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
}

html body .tag.is-warning {
  background-color: rgba(232, 93, 36, 0.25) !important;
  color: var(--hyve-orange-bright) !important;
}

/* ─── Tables ─── */
html body .table {
  background-color: transparent !important;
  color: var(--hyve-cream) !important;
}

html body .table thead th,
html body .table thead td {
  background-color: var(--hyve-black) !important;
  color: rgba(251, 252, 243, 0.85) !important;
  font-family: 'Geist Mono', monospace !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7em;
  border-bottom: 1px solid var(--hyve-rule-strong) !important;
}

html body .table tbody tr {
  background-color: var(--hyve-black-card) !important;
  color: var(--hyve-cream) !important;
}

html body .table tbody tr:hover {
  background-color: rgba(232, 93, 36, 0.06) !important;
}

html body .table td {
  border-bottom: 1px solid var(--hyve-rule) !important;
  color: var(--hyve-cream) !important;
}

html body .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--hyve-black-soft) !important;
}

/* ─── Tabs ─── */
html body .tabs ul {
  border-bottom: 1px solid var(--hyve-rule-strong) !important;
}

html body .tabs li a {
  color: rgba(251, 252, 243, 0.65) !important;
  border-bottom-color: transparent !important;
}

html body .tabs li a:hover {
  color: var(--hyve-cream) !important;
}

html body .tabs li.is-active a {
  border-bottom: 2px solid var(--hyve-orange) !important;
  color: var(--hyve-orange) !important;
  font-weight: 600;
}

html body .b-tabs .tab-content {
  background: transparent !important;
}

/* ─── Toggles / switches Bulma .switch.is-rounded ─── */
/* Estrutura: <label class="switch is-rounded"><input checked><span></span></label> */
html body label.switch input[type="checkbox"]:checked + .check,
html body label.switch input[type="checkbox"]:checked ~ span,
html body label.switch input[type="checkbox"]:checked + span,
html body .switch.is-rounded input[type="checkbox"]:checked + span {
  background: var(--hyve-orange) !important;
  border-color: var(--hyve-orange) !important;
}

/* Bulma switch state via :before pseudo */
html body .switch input[type="checkbox"]:checked + .check::before,
html body .switch input[type="checkbox"]:checked + span::before {
  background: var(--hyve-cream) !important;
}

/* Switch Bulma 1.x — usa CSS variable */
html body .switch[checked],
html body .switch input:checked + label,
html body label.switch[type="checkbox"]:checked,
html body input[type="checkbox"].switch:checked + .check,
html body input[type="checkbox"]:checked + .check {
  background: var(--hyve-orange) !important;
  --bulma-switch-background: var(--hyve-orange) !important;
}

/* Bulma switch parent label - força laranja em qualquer color que tenha azul Bulma default */
html body .b-checkbox.switch input:checked + .check,
html body .checkbox.switch input:checked + .check,
html body label.b-checkbox.switch input:checked + .check {
  background-color: var(--hyve-orange) !important;
  border-color: var(--hyve-orange) !important;
}

html body input[type="checkbox"]:checked,
html body input[type="radio"]:checked {
  accent-color: var(--hyve-orange);
}

/* ─── Pagination ─── */
html body .pagination-link,
html body .pagination-previous,
html body .pagination-next {
  background-color: var(--hyve-black-paper) !important;
  border-color: var(--hyve-rule-strong) !important;
  color: var(--hyve-cream) !important;
}

html body .pagination-link.is-current {
  background-color: var(--hyve-orange) !important;
  border-color: var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
}

/* ─── Modal ─── */
html body .modal-card-head {
  background: var(--hyve-black) !important;
  border-bottom: 1px solid var(--hyve-rule-strong) !important;
}

html body .modal-card-title {
  color: var(--hyve-cream) !important;
  font-weight: 700;
}

html body .modal-card-body {
  background: var(--hyve-black-soft) !important;
  color: var(--hyve-cream) !important;
}

html body .modal-card-foot {
  background: var(--hyve-black-soft) !important;
  border-top: 1px solid var(--hyve-rule) !important;
}

/* ─── Dropdown ─── */
html body .dropdown-content {
  background: var(--hyve-black-soft) !important;
  border: 1px solid var(--hyve-rule-strong) !important;
  border-radius: 4px !important;
}

html body .dropdown-item {
  color: var(--hyve-cream) !important;
}

html body .dropdown-item:hover,
html body .dropdown-item.is-active {
  background: rgba(232, 93, 36, 0.10) !important;
  color: var(--hyve-orange) !important;
}

/* ─── Notifications ─── */
html body .notification {
  background: var(--hyve-black-soft) !important;
  color: var(--hyve-cream) !important;
  border-left: 4px solid var(--hyve-orange) !important;
  border-radius: 4px !important;
}

html body .notification.is-success {
  border-left-color: var(--hyve-orange) !important;
}

html body .notification.is-primary {
  background: var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
}

/* ─── Links ─── */
html body a:not(.button):not(.navbar-item):not([class*="menu"]):not(.dropdown-item) {
  color: var(--hyve-orange) !important;
}

html body a:hover:not(.button) {
  color: var(--hyve-orange-bright) !important;
}

html body a.has-text-link,
html body a.is-link,
html body .has-text-link {
  color: var(--hyve-orange) !important;
}

/* ─── Login page (Go template, fora SPA) ─── */
html body section.login {
  background: var(--hyve-black) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

html body section.login .container {
  max-width: 420px;
}

html body section.login .form,
html body section.login form {
  background: var(--hyve-black-soft) !important;
  border: 1px solid var(--hyve-rule-strong) !important;
  padding: 2.5rem !important;
  border-radius: 4px !important;
}

html body section.login h2,
html body section.login h1 {
  color: var(--hyve-cream) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

html body section.login p {
  color: rgba(251, 252, 243, 0.65) !important;
}

html body section.login label {
  color: rgba(251, 252, 243, 0.65) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 0.7em !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500;
}

html body section.login input {
  background: var(--hyve-black-paper) !important;
  color: var(--hyve-cream) !important;
  border: 1px solid var(--hyve-rule-strong) !important;
  border-radius: 4px !important;
}

html body section.login input:focus {
  border-color: var(--hyve-orange) !important;
  box-shadow: 0 0 0 2px rgba(232, 93, 36, 0.25) !important;
}

html body section.login a {
  color: var(--hyve-orange) !important;
}

/* Login page: botão submit força laranja com altíssima especificidade.
   ATENÇÃO: vence "default button override" acima. */
html body section.login p.submit button,
html body section.login p.submit .button,
html body section.login button.button[type="submit"],
html body section.login form button[type="submit"],
html body section.login button[type="submit"].button,
html body section.login .button[type="submit"] {
  background-color: var(--hyve-orange) !important;
  border: 1px solid var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.9em !important;
  padding: 0.85rem 1.5rem !important;
  width: 100% !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}

html body section.login button:hover,
html body section.login form button:hover {
  background-color: var(--hyve-orange-bright) !important;
  border-color: var(--hyve-orange-bright) !important;
  color: var(--hyve-black) !important;
}

/* Login: header com logo no topo, sem deslocamento */
html body section.login .header {
  display: block !important;
  text-align: center;
  padding: 0 0 1.5rem 0;
  margin: 0 0 1.5rem 0;
  border-bottom: 1px solid var(--hyve-rule-strong);
}

html body section.login .header .logo a {
  /* Logo no login: tamanho maior */
  width: 220px !important;
  height: 50px !important;
}

/* Title "Login" sem flutuar */
html body section.login h2,
html body section.login .login-title,
html body section.login > h2 {
  position: static !important;
  text-align: left;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hyve-cream) !important;
}

/* Esconder "Powered by Listmonk" no rodapé do login */
html body section.login + div,
html body section.login + p,
html body section.login ~ * a[href*="listmonk"],
html body body > footer:has(a[href*="listmonk"]),
html body body > p:has(a[href*="listmonk"]) {
  display: none !important;
}

/* Generic Powered by hide */
html body p:has(a[href*="listmonk"]) {
  display: none !important;
}

/* Footer Powered by — específico do template Go login */
html body > footer,
html body footer:not(.modal-card-foot):not(.card-footer) {
  display: none !important;
}

/* Login: h2 "Login" alinhado dentro do form */
html body section.login h2 {
  position: static !important;
  text-align: left;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--hyve-cream) !important;
  font-family: 'Geist', sans-serif !important;
  display: block !important;
}

/* Login: garantir que h2 está dentro do form (não fora) */
html body section.login {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4rem 1rem !important;
  min-height: 100vh !important;
}

html body section.login .container,
html body section.login > div,
html body section.login .form,
html body section.login form {
  max-width: 460px !important;
  width: 100% !important;
}

/* Botão login: especificidade máxima pra vencer "default button" */
html body section.login button.button,
html body section.login p button.button,
html body section.login p.submit button.button,
html body section.login form button.button[type="submit"] {
  background-color: var(--hyve-orange) !important;
  border: 1px solid var(--hyve-orange) !important;
  color: var(--hyve-black) !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.9em !important;
  padding: 0.85rem 1.5rem !important;
  width: 100% !important;
  border-radius: 4px !important;
}

html body section.login button.button:hover {
  background-color: var(--hyve-orange-bright) !important;
  border-color: var(--hyve-orange-bright) !important;
  color: var(--hyve-black) !important;
}

/* ─── Code editor (CodeMirror) — usado nos custom CSS/JS ─── */
html body .CodeMirror {
  background: var(--hyve-black-paper) !important;
  color: var(--hyve-cream) !important;
  border: 1px solid var(--hyve-rule) !important;
  border-radius: 4px !important;
  font-family: 'Geist Mono', monospace !important;
}

html body .CodeMirror-gutters {
  background: var(--hyve-black-soft) !important;
  border-right: 1px solid var(--hyve-rule) !important;
}

html body .CodeMirror-linenumber {
  color: rgba(251, 252, 243, 0.35) !important;
}

html body .CodeMirror-cursor {
  border-color: var(--hyve-orange) !important;
}

/* ─── Stats / Dashboard tile numbers ─── */
html body .dashboard .num,
html body .tile .num,
html body .stat-item .num,
html body .level-item .title {
  font-family: 'Geist', sans-serif !important;
  font-weight: 800 !important;
  color: var(--hyve-orange) !important;
  letter-spacing: -0.02em;
}

/* ─── Charts (svg paths/text) ─── */
html body svg text {
  fill: var(--hyve-cream) !important;
}

/* ─── Hide Listmonk references ─── */
html body footer a[href*="listmonk.app"],
html body footer a[href*="github.com/knadh"],
html body .footer-listmonk,
html body .powered-by,
html body [class*="listmonk-credit"],
html body section.login footer,
html body noscript {
  display: none !important;
}

/* ─── HR dividers ─── */
html body hr {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--hyve-rule-strong) !important;
  margin: 1.5rem 0 !important;
  height: auto !important;
}

/* ─── Scrollbar (cosmetic) ─── */
html body ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: var(--hyve-black);
}

html body ::-webkit-scrollbar-thumb {
  background: var(--hyve-rule-strong);
  border-radius: 0;
  border: 3px solid var(--hyve-black);
}

html body ::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 93, 36, 0.5);
}

/* ─── Icons (mdi/Material Design) — herdar cor do parent ─── */
html body i.mdi {
  color: inherit;
}

/* ─── Search inputs (subscriber list, campaign list) ─── */
html body input[type="search"] {
  background: var(--hyve-black-paper) !important;
  color: var(--hyve-cream) !important;
  border-color: var(--hyve-rule-strong) !important;
}