:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --text: #1f2937;
  --muted: #6b7280;
  --border-color: #e5e7eb;
  --table-head-bg: #f3f4f6;
  --table-head-text: #374151;
  --table-row-border: #eef2f7;
  --table-row-hover: #f9fafb;
  --input-bg: #ffffff;
  --dropdown-surface: #ffffff;
  --dropdown-surface-hover: #f4f6f9;
  --navbar-chip-bg: rgba(17, 24, 39, 0.03);
  --navbar-chip-bg-hover: rgba(17, 24, 39, 0.07);
  --navbar-chip-border: rgba(17, 24, 39, 0.14);
  --navbar-chip-border-hover: rgba(17, 24, 39, 0.18);
  --navbar-chip-text: #111827;
  --modal-overlay: rgba(15, 23, 42, 0.45);

  /* cor de destaque (pode trocar depois) */
  --brand: #d6001c;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.06);
  --theme-transition-duration: 280ms;
  --theme-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --theme-reveal-duration: 540ms;
  --theme-transition-x: 50vw;
  --theme-transition-y: 50vh;
  --theme-transition-radius: 150vmax;
}

/* =========================
   NORMALIZACAO FINAL DE BOTOES
   ========================= */

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--wine-hover, #520a13) !important;
  border-color: var(--wine-hover, #520a13) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus-visible {
  background: rgba(17, 24, 39, 0.06) !important;
  border-color: rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: rgba(17, 24, 39, 0.09) !important;
  border-color: rgba(17, 24, 39, 0.18) !important;
  color: #111827 !important;
}

.btn-danger,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:focus-visible,
.btn-info,
.btn-info:focus,
.btn-info:active,
.btn-info:focus-visible {
  color: #fff !important;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:focus-visible {
  color: #111827 !important;
}

html[data-theme='dark'] .btn-secondary,
html[data-theme='dark'] .btn-secondary:focus,
html[data-theme='dark'] .btn-secondary:active,
html[data-theme='dark'] .btn-secondary:focus-visible,
html[data-theme='dark'] .btn-outline-secondary,
html[data-theme='dark'] .btn-outline-dark,
html[data-theme='dark'] .btn-outline-info {
  background: var(--surface-soft) !important;
  border-color: var(--border-color) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .btn-secondary:hover,
html[data-theme='dark'] .btn-outline-secondary:hover,
html[data-theme='dark'] .btn-outline-dark:hover,
html[data-theme='dark'] .btn-outline-info:hover {
  background: #223149 !important;
  border-color: #4b5f7a !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .btn-primary,
html[data-theme='dark'] .btn-primary:focus,
html[data-theme='dark'] .btn-primary:active,
html[data-theme='dark'] .btn-primary:focus-visible {
  background: #e11d36 !important;
  border-color: #e11d36 !important;
  color: #fff !important;
}

html[data-theme='dark'] .btn-primary:hover {
  background: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #fff !important;
}

html[data-theme='dark'] .btn-danger,
html[data-theme='dark'] .btn-danger:focus,
html[data-theme='dark'] .btn-danger:active,
html[data-theme='dark'] .btn-danger:focus-visible {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

html[data-theme='dark'] .btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

html[data-theme='dark'] .btn-info,
html[data-theme='dark'] .btn-info:focus,
html[data-theme='dark'] .btn-info:active,
html[data-theme='dark'] .btn-info:focus-visible {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

html[data-theme='dark'] .btn-info:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html[data-theme='dark'] {
  --bg: #111827;
  --surface: #18212f;
  --surface-soft: #1f2937;
  --text: #e5eefb;
  --muted: #94a3b8;
  --border-color: #334155;
  --table-head-bg: #233044;
  --table-head-text: #dce7f7;
  --table-row-border: #2c3c52;
  --table-row-hover: #1f2b3d;
  --input-bg: #111827;
  --dropdown-surface: #18212f;
  --dropdown-surface-hover: #243247;
  --navbar-chip-bg: rgba(148, 163, 184, 0.12);
  --navbar-chip-bg-hover: rgba(148, 163, 184, 0.2);
  --navbar-chip-border: rgba(148, 163, 184, 0.28);
  --navbar-chip-border-hover: rgba(148, 163, 184, 0.4);
  --navbar-chip-text: #f8fafc;
  --modal-overlay: rgba(2, 6, 23, 0.72);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.26);
}

/* Base */
body {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

html,
body,
.container,
.card,
.soft-card,
.table,
.table thead th,
.table tbody td,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.dropdown-item,
.alert,
.specs-clean-shell,
.specs-clean-block,
.specs-clean-item,
.specs-detail-panel,
.specs-legacy-box,
.app-navbar-brand-logo,
.app-navbar-home,
.app-navbar-user-btn,
.app-navbar-theme-btn,
.theme-floating-btn,
.btn-back,
.btn-verpcs {
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    color var(--theme-transition-duration) var(--theme-transition-easing),
    border-color var(--theme-transition-duration) var(--theme-transition-easing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-easing),
    fill var(--theme-transition-duration) var(--theme-transition-easing),
    stroke var(--theme-transition-duration) var(--theme-transition-easing);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-reveal-duration);
  animation-timing-function: var(--theme-transition-easing);
}

html.theme-transition-active::view-transition-old(root) {
  animation: none;
}

html.theme-transition-active::view-transition-new(root) {
  animation: theme-circular-reveal var(--theme-reveal-duration) var(--theme-transition-easing) both;
  clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
}

@keyframes theme-circular-reveal {
  from {
    clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
  }
  to {
    clip-path: circle(var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .container,
  .card,
  .soft-card,
  .table,
  .table thead th,
  .table tbody td,
  .modal-content,
  .modal-header,
  .modal-body,
  .modal-footer,
  .form-control,
  .form-select,
  .btn,
  .dropdown-menu,
  .dropdown-item,
  .alert,
  .specs-clean-shell,
  .specs-clean-block,
  .specs-clean-item,
  .specs-detail-panel,
  .specs-legacy-box,
  .app-navbar-brand-logo,
  .app-navbar-home,
  .app-navbar-user-btn,
  .app-navbar-theme-btn,
  .theme-floating-btn,
  .btn-back,
  .btn-verpcs {
    transition: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

.text-muted,
small.text-muted {
  color: var(--muted) !important;
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  background: var(--input-bg);
  color: var(--text);
  border-color: rgba(214, 0, 28, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(214, 0, 28, 0.12);
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
  border-color: var(--border-color) !important;
}

.theme-floating-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1080;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--navbar-chip-border);
  background: var(--navbar-chip-bg);
  color: var(--navbar-chip-text);
  box-shadow: var(--shadow-soft);
}

.theme-floating-btn:hover {
  background: var(--navbar-chip-bg-hover);
  color: var(--navbar-chip-text);
}

.table {
  color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: color-mix(in srgb, var(--surface) 88%, var(--surface-soft) 12%);
}

.modal-backdrop.show {
  background: var(--modal-overlay);
  opacity: 1;
}

.modal-content,
.modal-header,
.modal-body,
.modal-footer {
  background: var(--surface);
  color: var(--text);
}

.modal-header,
.modal-footer {
  border-color: var(--border-color);
}

.dropdown-menu {
  background: var(--dropdown-surface);
  border-color: var(--border-color);
  color: var(--text);
}

.dropdown-item {
  color: var(--text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--dropdown-surface-hover);
  color: var(--text);
}

.dropdown-divider {
  border-top-color: var(--border-color);
}

.btn-close {
  filter: none;
}

html[data-theme='dark'] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme='dark'] .btn-outline-secondary,
html[data-theme='dark'] .btn-outline-dark,
html[data-theme='dark'] .btn-outline-info {
  color: #dbe7f6;
  border-color: var(--border-color);
}

html[data-theme='dark'] .btn-outline-secondary:hover,
html[data-theme='dark'] .btn-outline-dark:hover,
html[data-theme='dark'] .btn-outline-info:hover {
  background: var(--surface-soft);
  color: #ffffff;
  border-color: #4b5f7a;
}

html[data-theme='dark'] .btn-info {
  background: #2a5d8f;
  border-color: #2a5d8f;
  color: #fff;
}

html[data-theme='dark'] .btn-warning {
  color: #111827;
}

html[data-theme='dark'] .alert-warning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fde68a;
}

html[data-theme='dark'] .alert-info {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.28);
  color: #bfdbfe;
}

html[data-theme='dark'] .alert-success {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.28);
  color: #a7f3d0;
}

html[data-theme='dark'] .alert-danger {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fecaca;
}

html[data-theme='dark'] hr {
  border-color: var(--border-color);
  opacity: 1;
}

html[data-theme='dark'] .container {
  background: var(--surface);
}

html[data-theme='dark'] .btn-back {
  border-color: var(--navbar-chip-border);
  background: var(--navbar-chip-bg);
  color: var(--navbar-chip-text);
}

html[data-theme='dark'] .btn-back:hover {
  background: var(--navbar-chip-bg-hover);
}

html[data-theme='dark'] .table .btn-group .btn,
html[data-theme='dark'] .btn-verpcs,
html[data-theme='dark'] .maintenance-page .maintenance-nav .btn,
html[data-theme='dark'] .maintenance-page .maintenance-actions .btn,
html[data-theme='dark'] .container button.btn.btn-secondary[data-bs-toggle='modal'],
html[data-theme='dark'] .btn-add-computador,
html[data-theme='dark'] .btn-importcsv {
  background: var(--surface-soft) !important;
  border-color: var(--border-color) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .table .btn-group .btn:hover,
html[data-theme='dark'] .btn-verpcs:hover,
html[data-theme='dark'] .maintenance-page .maintenance-nav .btn:hover,
html[data-theme='dark'] .maintenance-page .maintenance-actions .btn:hover,
html[data-theme='dark'] .container button.btn.btn-secondary[data-bs-toggle='modal']:hover,
html[data-theme='dark'] .btn-add-computador:hover,
html[data-theme='dark'] .btn-importcsv:hover {
  background: #223149 !important;
  border-color: #4b5f7a !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .table .btn-group .btn-edit {
  background: rgba(214, 0, 28, 0.18) !important;
  border-color: rgba(214, 0, 28, 0.34) !important;
  color: #fecdd3 !important;
}

html[data-theme='dark'] .table .btn-group .btn-edit:hover {
  background: rgba(214, 0, 28, 0.26) !important;
}

html[data-theme='dark'] .table .btn-group .btn-info {
  background: rgba(96, 165, 250, 0.16) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #dbeafe !important;
}

html[data-theme='dark'] .table .btn-group .btn-info:hover {
  background: rgba(96, 165, 250, 0.24) !important;
}

html[data-theme='dark'] .home-menu-card,
html[data-theme='dark'] .home-panel,
html[data-theme='dark'] .home-filter-card,
html[data-theme='dark'] .home-filter-option,
html[data-theme='dark'] .home-subpanel,
html[data-theme='dark'] .soft-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme='dark'] .home-menu-card {
  background: linear-gradient(180deg, #1b2534 0%, #161f2d 100%) !important;
}

html[data-theme='dark'] .home-menu-card:hover {
  background: #1f2b3d !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .home-subpanel {
  background: linear-gradient(180deg, #1b2534 0%, #16202d 100%) !important;
}

html[data-theme='dark'] .home-type-row,
html[data-theme='dark'] .home-chart-nav {
  border-color: var(--border-color) !important;
}

html[data-theme='dark'] .home-chart-arrow,
html[data-theme='dark'] .home-filter-btn {
  background: var(--surface-soft);
  color: var(--text);
  border-color: var(--border-color);
}

html[data-theme='dark'] .home-chart-arrow:hover,
html[data-theme='dark'] .home-filter-btn:hover {
  background: #223149;
  color: #fff;
}

html[data-theme='dark'] .maintenance-page .maint-finalizada {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.34);
  color: #a7f3d0;
}

html[data-theme='dark'] .maintenance-page .maint-finalizada i {
  color: #34d399;
}

html[data-theme='dark'] .maintenance-page .btn-info,
html[data-theme='dark'] .maintenance-page .btn-info:focus,
html[data-theme='dark'] .maintenance-page .btn-info:active {
  color: #fff !important;
}

html[data-theme='dark'] .badge.bg-secondary {
  background: #334155 !important;
}

html[data-theme='dark'] .badge.bg-danger {
  background: #7f1d1d !important;
}

html[data-theme='dark'] .badge.bg-success {
  background: #065f46 !important;
}

html[data-theme='dark'] .alert-light {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.24);
  color: var(--text);
}

a {
  text-decoration: none;
}

img {
  max-width: 75%;
  height: auto;
}

/* Navbar (usa Bootstrap, a gente só dá “um toque”) */
.navbar {
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft);
}

.navbar .btn {
  border-radius: 10px;
}

/* Containers das páginas (vocês usam .container bastante) */
.container {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: 18px;
  margin-bottom: 24px;

  /* tira o “tudo centralizado” que está nos inline styles */
  text-align: left;
}

/* Títulos */
h1 {
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 14px;
}

.lead {
  color: var(--muted);
}

/* Botões */
.btn {
  border-radius: 12px;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.btn-outline-info,
.btn-info {
  border-radius: 12px;
}

/* Forms */
.form-control,
.form-select {
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border-color);
}

label.form-label {
  font-weight: 600;
  color: var(--muted);
}

/* Tabelas */
.table {
  margin-top: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 12px;
}

.table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  padding: 12px;
}

.table tbody td,
.table tbody th {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--table-row-border);
  color: var(--text);
}

.table tbody tr:hover {
  background: var(--table-row-hover);
}

/* Colunas ordenáveis (vocês usam data-sort-col) */
th[data-sort-col] {
  user-select: none;
}

th[data-sort-col]:hover {
  background: var(--table-row-hover);
}

/* Badges (ex: PC CONDENADO) */
.badge {
  border-radius: 999px;
  padding: 0.5em 0.8em;
  letter-spacing: 0.2px;
}

/* Cards (home) */
.card {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
  color: var(--text);
}

.card .card-title {
  font-weight: 800;
}

/* Ajuste fino do contador (computadores) */
#totalComputadores {
  color: var(--muted);
}

/* =========================
   HOME (src/views/pages/home.ejs)
   Botões mais profissionais
   ========================= */

.btn-group-vertical {
  gap: 10px;
  /* espaçamento moderno entre botões */
}

.btn-group-vertical .btn {
  /* layout */
  width: 100%;
  border-radius: 14px !important;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* tipografia */
  font-weight: 700;
  letter-spacing: 0.2px;

  /* visual */
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);

  /* interação */
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

.btn-group-vertical .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  filter: brightness(0.98);
}

.btn-group-vertical .btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* deixa o texto do warning mais legível (Bootstrap warning às vezes fica claro) */
.btn-group-vertical .btn.btn-warning {
  color: #111;
}

/* =========================
   NAVBAR - Ícone do Home menor
   (src/views/partials/header.ejs)
   Funciona se tiver <i class="fas fa-home ...">
   ========================= */

.navbar .btn-outline-dark {
  border-radius: 12px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Se você usou fa-2x/fa-3x, isso aqui “domina” e reduz */
.navbar .btn-outline-dark i,
.navbar .btn-outline-dark .fa,
.navbar .btn-outline-dark .fas,
.navbar .btn-outline-dark .far,
.navbar .btn-outline-dark .fab {
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

/* (Opcional) Se o ícone estiver grande por causa de padding/altura */
.navbar .btn-outline-dark svg,
.navbar .btn-outline-dark img {
  width: 18px;
  height: 18px;
}

/* =========================
   NAVBAR - Botão Home mais fluido/“chip”
   (src/views/partials/header.ejs)
   ========================= */

.navbar .btn-outline-dark.me-2 {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: rgba(17, 24, 39, 0.03);
  color: #111827;

  font-weight: 650;
  letter-spacing: 0.2px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.navbar .btn-outline-dark.me-2:hover {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.18);
  transform: translateY(-1px);
}

.navbar .btn-outline-dark.me-2:active {
  transform: translateY(0);
}

/* Se você colocou ícone no Home, isso reduz o tamanho dele */
.navbar .btn-outline-dark.me-2 i,
.navbar .btn-outline-dark.me-2 .fa,
.navbar .btn-outline-dark.me-2 .fas,
.navbar .btn-outline-dark.me-2 .far,
.navbar .btn-outline-dark.me-2 .fab {
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

/* =========================
   COMPUTADORES - botões Editar/Ver mais clean
   (src/views/pages/computadores.ejs)
   ========================= */

/* Base da “barra” de ações */
.table .btn-group .btn {
  border-radius: 12px !important;
  padding: 7px 10px;
  font-weight: 650;
  letter-spacing: 0.15px;

  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #fff;
  color: #111827;

  box-shadow: none;
  transition:
    background 0.12s ease,
    transform 0.12s ease,
    border-color 0.12s ease;
}

.table .btn-group .btn:hover {
  background: #f3f4f6;
  border-color: rgba(17, 24, 39, 0.16);
  transform: translateY(-1px);
}

.table .btn-group .btn:active {
  transform: translateY(0);
}

/* Editar (tem classe .btn-edit no seu HTML) */
.table .btn-group .btn-edit {
  background: rgba(214, 0, 28, 0.08);
  /* usa seu --brand, mas “soft” */
  border-color: rgba(214, 0, 28, 0.22);
  color: #b00016;
}

.table .btn-group .btn-edit:hover {
  background: rgba(214, 0, 28, 0.12);
}

/* Ver (no seu HTML está como .btn-info) — tira aquele azul chamativo */
.table .btn-group .btn-info {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.14);
  color: #111827;
}

.table .btn-group .btn-info:hover {
  background: rgba(17, 24, 39, 0.09);
}

/* Ícones mais proporcionais nos botões da tabela */
.table .btn-group .btn i {
  font-size: 0.95em;
}

/* =========================
   MODAIS - visual mais moderno e limpo
   (src/views/partials/modals/*.ejs)
   ========================= */

.modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
}

/* =========================
   HOME DASHBOARD
   ========================= */

.home-shell {
  padding: 18px 20px 22px;
}

.home-menu {
  display: grid;
  gap: 14px;
}

.home-menu-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #fbfbfb 0%, #f1f1f1 100%);
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  min-height: 90px;
  padding: 18px 18px;
  color: #111827;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.home-menu-card:hover {
  transform: translateY(-1px);
  background: #fcfcfc;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  color: #111827;
}

.home-menu-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.home-menu-icon-blue {
  background: rgba(47, 128, 237, 0.12);
  color: #2f80ed;
}

.home-menu-icon-cyan {
  background: rgba(86, 204, 242, 0.16);
  color: #1daecf;
}

.home-menu-icon-gold {
  background: rgba(242, 201, 76, 0.18);
  color: #b98500;
}

.home-menu-icon-amber {
  background: rgba(242, 153, 74, 0.18);
  color: #d97a11;
}

.home-panel {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.home-overview-panel .home-stat-block:last-of-type {
  margin-bottom: 12px;
}

.home-panel-title {
  text-align: center;
  font-size: 1.55rem;
  font-weight: 800;
  margin-bottom: 24px;
}

.home-stat-block {
  text-align: center;
  margin-bottom: 22px;
}

.home-stat-label {
  display: block;
  font-size: 1rem;
  margin-bottom: 6px;
}

.home-stat-value {
  display: block;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 800;
}

.home-subpanel {
  margin-top: 28px;
  background: linear-gradient(180deg, #fafafa 0%, #f5f6f8 100%);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 18px;
}

.home-subpanel-title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.home-type-list {
  display: grid;
  gap: 10px;
}

.home-type-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid #eceff3;
  padding-bottom: 8px;
}

.home-type-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.home-empty {
  text-align: center;
  color: var(--muted);
}

.home-chart-wrap {
  position: relative;
  min-height: 440px;
  padding-top: 8px;
}

.home-chart-card-inner {
  transform-origin: center center;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.home-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  width: 38px;
  height: 38px;
  padding: 0;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  flex: 0 0 auto;
}

.home-filter-btn:hover {
  transform: translateY(-1px);
  background: #fafafa;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.home-chart-card-inner.is-flipping {
  transform: rotateY(90deg);
  opacity: 0.15;
}

.home-chart-nav {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #eceff3;
}

.home-chart-nav-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.home-chart-arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #fff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.home-chart-arrow:hover {
  transform: translateY(-1px);
  background: #f9fafb;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.home-chart-caption {
  min-width: 70px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

.home-filter-card {
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, #fcfcfc 0%, #f8fafc 100%);
  height: 100%;
}

.home-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.home-filter-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-filter-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.home-filter-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 0;
  align-items: start;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

.home-filter-option span {
  font-weight: 700;
  color: var(--text);
}

.home-filter-option small {
  grid-column: 2;
  color: var(--muted);
}

.page-shell-sm {
  max-width: 760px;
}

.soft-card {
  border: 1px solid #ececec;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

@media (max-width: 991.98px) {
  .home-panel-title {
    font-size: 1.45rem;
  }

  .home-stat-value {
    font-size: 2rem;
  }

  .home-chart-wrap {
    min-height: 340px;
  }
}

@media (max-width: 1199.98px) {
  .home-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-menu-card {
    min-height: 78px;
    padding: 14px 16px;
  }

  .home-overview-panel {
    padding: 16px 16px 14px;
  }

  .home-overview-panel .home-panel-title {
    font-size: 1.2rem;
    margin-bottom: 14px;
  }

  .home-overview-panel .home-stat-block {
    margin-bottom: 14px;
  }

  .home-overview-panel .home-stat-label {
    font-size: 0.92rem;
    margin-bottom: 2px;
  }

  .home-overview-panel .home-stat-value {
    font-size: 1.75rem;
  }

  .home-overview-panel .home-subpanel {
    margin-top: 16px;
    padding: 12px 14px;
  }

  .home-overview-panel .home-subpanel-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .home-overview-panel .home-type-row {
    font-size: 0.92rem;
    padding-bottom: 6px;
  }

  .home-chart-wrap {
    min-height: 420px;
  }
}

@media (max-width: 767.98px) {
  .home-menu {
    grid-template-columns: 1fr;
  }
}

.modal-body {
  padding: 18px 18px 22px;
}

/* Os seus modais têm um card dentro — tira “cara de card dentro de card” */
.modal .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* Traz os botões do modal pra mesma “linguagem” clean */
.modal .btn {
  border-radius: 12px;
}

/* Variantes “soft” só dentro de modal (não mexe na Home) */
.modal .btn-success {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.22);
  color: #065f46;
}

.modal .btn-warning {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.24);
  color: #92400e;
}

.modal .btn-danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.22);
  color: #991b1b;
}

/* Botão voltar do form (classe existe no seu register_computer_form.ejs) */
.btn-back {
  border-radius: 999px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(17, 24, 39, 0.12);
  background: rgba(17, 24, 39, 0.04);
  color: #111827;
}

.btn-back:hover {
  background: rgba(17, 24, 39, 0.07);
}

/* =========================
   FIX: fundo igual no site todo
   (porque vários EJS forçam #f0f0f0)
   ========================= */

html,
body {
  background: var(--bg) !important;
}

/* Alguns arquivos usam .headerComponent com fundo branco e padding
   (ex: src/views/pages/computadores.ejs) — deixa ele “sumir” no fundo */
.headerComponent {
  background: transparent !important;
  padding: 0 !important;
}

/* =========================
   HEADER/NAVBAR mais proporcional
   (src/views/partials/header.ejs)
   ========================= */

header {
  background: transparent !important;
  padding: 18px 0;
  /* dá um respiro igual ao resto */
}

/* tira a barra branca full-width e transforma em “card” central */
.navbar.navbar-light.bg-light {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* o card do header (logo + botão) */
.navbar.navbar-light.bg-light > .container {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 16px 18px !important;

  display: flex;
  align-items: center;
  justify-content: space-between;

  /* IMPORTANTE: evita o estilo antigo da .container do <style> interno */
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Botão Home ainda mais fluido e proporcional */
.navbar .btn-outline-dark.me-2 {
  border-radius: 999px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  background: rgba(17, 24, 39, 0.03) !important;
  color: #111827 !important;
  font-weight: 650 !important;
  letter-spacing: 0.2px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.navbar .btn-outline-dark.me-2:hover {
  background: rgba(17, 24, 39, 0.06) !important;
  border-color: rgba(17, 24, 39, 0.18) !important;
  transform: translateY(-1px);
}

/* =========================
   CTA: Adicionar Computador / Registrar Manutenção
   (src/views/pages/computadores.ejs e manutencoes.ejs)
   ========================= */

/* Pega exatamente os botões que abrem modal */
.container button.btn.btn-secondary[data-bs-toggle='modal'] {
  font-size: 0.85rem !important;
  /* sobrescreve o inline style .75rem */
  border-radius: 999px !important;
  padding: 10px 16px !important;

  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;

  font-weight: 700 !important;
  letter-spacing: 0.15px;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.btn-add-computador {
  font-size: 0.85rem !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;
  font-weight: 700 !important;
  letter-spacing: 0.15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.btn-add-computador i {
  font-size: 0.9rem;
}

.btn-importcsv {
  font-size: 0.85rem !important;
  /* sobrescreve o inline style .75rem */
  border-radius: 999px !important;
  padding: 10px 16px !important;

  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;

  font-weight: 700 !important;
  letter-spacing: 0.15px;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.container button.btn.btn-secondary[data-bs-toggle='modal']:hover {
  background: rgba(17, 24, 39, 0.09) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

.btn-add-computador:hover {
  color: #111827 !important;
  background: rgba(17, 24, 39, 0.09) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

.container button.btn.btn-secondary[data-bs-toggle='modal']:active {
  transform: translateY(0);
}

.btn-add-computador:active {
  transform: translateY(0);
}

/* Se quiser que esses CTAs fiquem “centralizados” mesmo com texto alinhado,
   isso ajuda sem mexer no HTML */
.container > button.btn.btn-secondary[data-bs-toggle='modal'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   FIX CENTRALIZAÇÃO (Listagens)
   ========================= */

/* garante que o card principal (conteúdo) fique consistente */
body > .container,
header + .container,
.headerComponent + .container {
  max-width: 1100px;
  /* deixa tudo “proporcional” */
  margin-left: auto;
  margin-right: auto;
}

/* centraliza só o TÍTULO das listas */
header + .container > h1,
.headerComponent + .container > h1 {
  text-align: center;
  margin-top: 6px;
  /* dá um respiro */
}

/* centraliza o botão "Adicionar/Registrar" (abre modal) */
header + .container > button.btn[data-bs-toggle='modal'],
.headerComponent + .container > button.btn[data-bs-toggle='modal'] {
  display: block;
  /* permite margin auto centralizar */
  width: fit-content;
  margin: 10px auto 14px !important;
}

/* centraliza o contador (Computadores exibidos...) */
header + .container #totalComputadores,
.headerComponent + .container #totalComputadores {
  display: block;
  text-align: center;
  margin-top: 6px;
}

/* Home (container-fluid) às vezes dá sensação de “desalinhado” com o resto */
.container-fluid.bg-light {
  background: transparent !important;
  /* deixa o fundo igual ao site todo */
  padding-top: 0 !important;
}

.pc-title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* ====== VER MANUTENÇÃO ====== */
.maintenance-page .meta-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 2px;
}

.maintenance-page .meta-value {
  font-weight: 750;
  color: var(--text);
}

.maintenance-page .maintenance-nav,
.maintenance-page .maintenance-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.maintenance-page .maintenance-nav .btn,
.maintenance-page .maintenance-actions .btn {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 750;
  letter-spacing: 0.15px;
  min-width: 230px;
}

.btn-verpcs {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 750;
  letter-spacing: 0.15px;
  min-width: 230px;
}

@media (max-width: 576px) {
  .maintenance-page .maintenance-nav .btn,
  .maintenance-page .maintenance-actions .btn {
    width: 100%;
    min-width: unset;
  }
}

.maintenance-page .maintenance-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: rgba(17, 24, 39, 0.04);
  color: var(--muted);
  font-weight: 750;
}

/* =========================
   Botão que fica azul no hover (na tela manutenção) -> vinho
   ========================= */

:root {
  --wine: #6d0f1b;
  /* vinho */
  --wine-hover: #721622;
  /* vinho mais escuro */
}

/* Caso o botão seja btn-info (azul do Bootstrap) */
.maintenance-page .btn-info,
.maintenance-page .btn-info:focus,
.maintenance-page .btn-info:active {
  background: var(--wine) !important;
  border-color: var(--wine) !important;
  color: #fff !important;
}

.maintenance-page .btn-info:hover {
  background: var(--wine-hover) !important;
  border-color: var(--wine-hover) !important;
  color: #fff !important;
}

.btn-group-vertical .btn-primary {
  color: black !important;
}

.btn-group-vertical .btn-primary:hover {
  background: #2b80ff !important;
  border-color: #0d6efd !important;
  color: black !important;
}

/* Caso o botão seja btn-primary mas algum CSS esteja deixando azul no hover */
.btn-primary:hover {
  background: var(--wine-hover) !important;
  border-color: var(--wine-hover) !important;
}

/* =========================
   Ver PC -> Tabela "Histórico de Manutenções"
   Botão do olhinho: hover/fade vinho
   (gerado no computador.ejs como btn btn-primary btn-sm)
   ========================= */

:root {
  --wine: #b00016;
  --wine-hover: #520a13;
  --wine-glow: rgba(109, 15, 27, 0.35);
}

/* mira especificamente a tabela criada no computador.ejs */
#tabela-manutencoes .btn.btn-primary {
  background: var(--wine) !important;
  border-color: var(--wine) !important;
  color: #fff !important;

  /* deixa o botão redondinho e proporcional ao ícone */
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* HOVER (o "fade" que estava azul) */
#tabela-manutencoes .btn.btn-primary:hover {
  background: var(--wine-hover) !important;
  border-color: var(--wine-hover) !important;
}

/* foco/click (tira aquele glow azul do bootstrap) */
#tabela-manutencoes .btn.btn-primary:focus,
#tabela-manutencoes .btn.btn-primary:active,
#tabela-manutencoes .btn.btn-primary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem var(--wine-glow) !important;
}

/* =========================================================
   FIX NECESSÁRIO:
   "Fechar manutenção" é <a>, então não pegava o estilo do CTA
   que hoje só mira em button[data-bs-toggle="modal"].
   Este bloco faz o <a class="btn btn-secondary"> ficar igual.
   ========================================================= */

.maintenance-page .maintenance-actions a.btn.btn-secondary {
  font-size: 0.85rem !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;

  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;

  font-weight: 700 !important;
  letter-spacing: 0.15px;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.maintenance-page .maintenance-actions a.btn.btn-secondary:hover {
  background: rgba(17, 24, 39, 0.09) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

.maintenance-page .maintenance-actions a.btn.btn-secondary:active {
  transform: translateY(0);
}

/* =========================
   Manutenção: status FINALIZADA verdinho ao lado oposto do título
   ========================= */

.maintenance-page .maint-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.maintenance-page .maint-finalizada {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(16, 185, 129, 0.14);
  /* verdinho soft */
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #065f46;

  font-weight: 800;
  letter-spacing: 0.15px;
}

.maintenance-page .maint-finalizada i {
  color: #10b981;
  /* ícone verdinho */
}

.maintenance-page .maintenance-description-card {
  max-width: 860px;
  padding: 1.25rem 1.4rem;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(214, 0, 28, 0.08), transparent 38%),
    color-mix(in srgb, var(--surface-soft) 84%, #ffffff 16%);
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, rgba(214, 0, 28, 0.14) 20%);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.maintenance-page .maintenance-description-text {
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.75;
  font-weight: 600;
  white-space: pre-line;
}

.maintenance-page .specs-clean-item {
  border: 0;
  background: transparent;
  padding: 0.2rem 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme='dark'] .maintenance-page .maintenance-description-card {
  background:
    radial-gradient(circle at top left, rgba(225, 29, 72, 0.16), transparent 42%),
    color-mix(in srgb, var(--surface) 90%, #0f172a 10%);
  border-color: color-mix(in srgb, var(--border-color) 76%, rgba(251, 113, 133, 0.2) 24%);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.34);
}

/* Em telas pequenas, status vai pra linha de baixo (ainda alinhado) */
@media (max-width: 576px) {
  .maintenance-page .maint-finalizada {
    width: fit-content;
  }
}

/* =========================
   COMPUTADORES (Tabela) — Botões "Editar" e "Ver" iguais (pílulas idênticas)
   ========================= */

.table .btn-group {
  display: inline-flex;
  gap: 10px;
}

/* força os dois botões da coluna Ações a ficarem do mesmo tamanho */
.table .btn-group .btn {
  min-width: 86px;
  /* mesma largura */
  height: 44px;
  /* mesma altura */
  padding: 0 14px !important;
  /* padding consistente */
  border-radius: 14px !important;
  /* “pílula” */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-weight: 800;
  line-height: 1;
}

/* ícones com tamanho consistente */
.table .btn-group .btn i {
  font-size: 0.95em;
}

/* Ver: tira o azul chamativo e deixa clean */
.table .btn-group .btn.btn-outline-info,
.table .btn-group .btn.btn-info {
  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;
}

.table .btn-group .btn.btn-outline-info:hover,
.table .btn-group .btn.btn-info:hover {
  background: rgba(17, 24, 39, 0.09) !important;
  border-color: rgba(17, 24, 39, 0.18) !important;
}

/* =========================
   MODAL EDITAR PC (modalEditPc)
   - Enviar: vermelho igual "Ver manutenção" + hover vinho
   - Adicionar Manutenção / Transferir Unidade: padrão clean (tipo Adicionar procedimento)
   ========================= */

/* garante que o modal certo seja atingido */
#modalEditPc .btn {
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 750 !important;
  letter-spacing: 0.15px;
}

/* 1) ENVIAR (hoje é btn-success no edit_pc_form.ejs) -> vermelho + hover vinho */
#modalEditPc .btn.btn-success {
  background: var(--brand) !important;
  /* seu vermelho padrão */
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* hover vinho */
#modalEditPc .btn.btn-success:hover {
  background: var(--wine-hover) !important;
  border-color: var(--wine-hover) !important;
}

/* tira o “glow” azul/verde de foco e coloca vinho */
#modalEditPc .btn.btn-success:focus,
#modalEditPc .btn.btn-success:active,
#modalEditPc .btn.btn-success:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem var(--wine-glow) !important;
}

/* 2) Adicionar Manutenção + Transferir Unidade -> padrão clean e igual */
#modalEditPc #btnAddManutencaoFromEdit,
#modalEditPc #btnTransferirFromEdit {
  background: rgba(17, 24, 39, 0.06) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  color: #111827 !important;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

/* hover igual “clean” */
#modalEditPc #btnAddManutencaoFromEdit:hover,
#modalEditPc #btnTransferirFromEdit:hover {
  background: rgba(17, 24, 39, 0.09) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

#modalEditPc #btnAddManutencaoFromEdit:active,
#modalEditPc #btnTransferirFromEdit:active {
  transform: translateY(0);
}

/* foco sem azul */
#modalEditPc #btnAddManutencaoFromEdit:focus,
#modalEditPc #btnTransferirFromEdit:focus,
#modalEditPc #btnAddManutencaoFromEdit:focus-visible,
#modalEditPc #btnTransferirFromEdit:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem rgba(17, 24, 39, 0.15) !important;
}

/* =========================
   MODAIS DE REGISTRO — "Enviar" vermelho + hover vinho
   (PC / Empresa / Manutenção)
   ========================= */

/* base: garante a “pílula” igual ao resto do seu padrão */
#modalRegisterPc .btn.btn-primary,
#modalRegisterEmpresa .btn.btn-primary,
#modalRegisterManutencao .btn.btn-primary {
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 750 !important;
  letter-spacing: 0.15px;

  /* vermelho padrão do seu site */
  background: var(--brand, #d6001c) !important;
  border-color: var(--brand, #d6001c) !important;
  color: #fff !important;
}

/* hover vinho (tira o hover “azulado / brightness” e força vinho) */
#modalRegisterPc .btn.btn-primary:hover,
#modalRegisterEmpresa .btn.btn-primary:hover,
#modalRegisterManutencao .btn.btn-primary:hover {
  background: var(--wine-hover, #520a13) !important;
  border-color: var(--wine-hover, #520a13) !important;
  color: #fff !important;
}

/* foco/click sem glow azul do bootstrap */
#modalRegisterPc .btn.btn-primary:focus,
#modalRegisterPc .btn.btn-primary:active,
#modalRegisterPc .btn.btn-primary:focus-visible,
#modalRegisterEmpresa .btn.btn-primary:focus,
#modalRegisterEmpresa .btn.btn-primary:active,
#modalRegisterEmpresa .btn.btn-primary:focus-visible,
#modalRegisterManutencao .btn.btn-primary:focus,
#modalRegisterManutencao .btn.btn-primary:active,
#modalRegisterManutencao .btn.btn-primary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem var(--wine-glow, rgba(109, 15, 27, 0.35)) !important;
}

.editar-pcs .btn-edit {
  background: rgba(214, 0, 28, 0.08) !important;
  /* usa seu --brand, mas “soft” */
  border-color: rgba(214, 0, 28, 0.22) !important;
  color: #b00016 !important;
}

.login-brand-shell {
  width: min(100%, 340px);
  margin: 0 auto;
  padding: 16px 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 22% 24%, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0) 36%),
    radial-gradient(circle at 82% 20%, rgba(96, 165, 250, 0.06) 0%, rgba(96, 165, 250, 0) 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--surface-soft) 88%, #ffffff 12%) 100%);
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, #ffffff 16%);
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-brand-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-brand-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -14px -20px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.16) 28%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse at 34% 50%, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0.09) 24%, rgba(96, 165, 250, 0) 56%);
  transition:
    opacity var(--theme-transition-duration) var(--theme-transition-easing),
    transform var(--theme-transition-duration) var(--theme-transition-easing);
}

.login-brand-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
}

html[data-theme='dark'] .login-brand-shell {
  background:
    radial-gradient(circle at 18% 22%, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 34%),
    radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.14) 0%, rgba(125, 211, 252, 0) 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, #1e3a5f 10%) 0%, color-mix(in srgb, var(--surface-soft) 82%, #0f172a 18%) 52%, color-mix(in srgb, var(--surface) 88%, #1b2a41 12%) 100%);
  border-color: color-mix(in srgb, var(--border-color) 72%, #93c5fd 12%);
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

html[data-theme='dark'] .login-brand-logo-wrap::before {
  opacity: 1;
  transform: scale(1.05);
}

/* =========================
   POLIMENTO FINAL DE MODAIS E SPECS ESTRUTURADAS
   ========================= */

.modal-content {
  border: 1px solid var(--border-color) !important;
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: var(--shadow) !important;
}

.modal .modal-header {
  padding: 1rem 1.35rem;
}

.modal .modal-body {
  padding: 1.3rem 1.35rem 1.4rem;
}

.modal .modal-footer {
  padding: 1rem 1.35rem 1.3rem;
  gap: 0.75rem;
}

.modal .card,
.modal .card-body {
  background: transparent !important;
}

.modal .card-body {
  padding: 0 !important;
}

.modal .modal-title,
.modal .card-title {
  color: var(--text) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.modal .form-label,
.modal label,
.modal strong {
  color: var(--text) !important;
}

.modal .form-label,
.modal label {
  font-weight: 700;
}

.modal p,
.modal .small,
.modal small,
.modal .text-muted {
  color: var(--muted) !important;
}

.modal .alert {
  border-radius: 16px;
}

.modal .alert-light {
  background: color-mix(in srgb, var(--surface-soft) 78%, #ffffff 22%) !important;
  border-color: var(--border-color) !important;
  color: var(--text) !important;
}

.modal .import-download-alert {
  background: linear-gradient(135deg, rgba(214, 0, 28, 0.08), rgba(214, 0, 28, 0.02)) !important;
  border: 1px solid rgba(214, 0, 28, 0.18) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 24px rgba(214, 0, 28, 0.08);
}

.modal .import-download-alert strong {
  color: var(--text) !important;
}

.modal .import-download-alert small {
  color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%) !important;
}

html[data-theme='dark'] .modal .alert-light {
  background: rgba(51, 65, 85, 0.52) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: var(--text) !important;
}

html[data-theme='dark'] .modal .import-download-alert {
  background: linear-gradient(135deg, rgba(225, 29, 54, 0.18), rgba(30, 41, 59, 0.72)) !important;
  border-color: rgba(244, 63, 94, 0.28) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

html[data-theme='dark'] .modal .import-download-alert strong,
html[data-theme='dark'] .modal .import-download-alert small {
  color: var(--text) !important;
}

.modal .btn {
  min-height: 42px;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

.modal .modal-footer .btn,
.modal .text-center > .btn,
.modal .text-center button[type='submit'],
.modal form .d-flex.justify-content-between .btn {
  min-width: 132px;
}

.modal .modal-footer .btn.btn-outline-secondary,
.modal .d-flex.justify-content-between .btn.btn-outline-secondary,
.modal .text-center .btn.btn-outline-secondary {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: var(--text) !important;
}

.modal .modal-footer .btn.btn-outline-secondary:hover,
.modal .d-flex.justify-content-between .btn.btn-outline-secondary:hover,
.modal .text-center .btn.btn-outline-secondary:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}

.modal .modal-footer .btn.btn-primary,
.modal .text-center .btn.btn-primary,
.modal .d-flex.justify-content-between .btn.btn-primary,
.modal .btn.btn-success {
  box-shadow: 0 14px 28px rgba(214, 0, 28, 0.18) !important;
}

.modal .btn.btn-danger {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

.modal .btn.btn-danger:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  color: #9f1239 !important;
}

.modal .btn.btn-success {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.modal .btn.btn-success:hover {
  background: var(--wine-hover, #520a13) !important;
  border-color: var(--wine-hover, #520a13) !important;
}

html[data-theme='dark'] .modal .modal-footer .btn.btn-outline-secondary,
html[data-theme='dark'] .modal .d-flex.justify-content-between .btn.btn-outline-secondary,
html[data-theme='dark'] .modal .text-center .btn.btn-outline-secondary {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: var(--text) !important;
}

html[data-theme='dark'] .modal .modal-footer .btn.btn-outline-secondary:hover,
html[data-theme='dark'] .modal .d-flex.justify-content-between .btn.btn-outline-secondary:hover,
html[data-theme='dark'] .modal .text-center .btn.btn-outline-secondary:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
}

html[data-theme='dark'] .modal .btn.btn-danger {
  background: rgba(127, 29, 29, 0.36) !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
  color: #fecaca !important;
}

html[data-theme='dark'] .modal .btn.btn-danger:hover {
  background: rgba(153, 27, 27, 0.52) !important;
  border-color: rgba(252, 165, 165, 0.48) !important;
  color: #fff1f2 !important;
}

.specs-clean-shell {
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 82%, #ffffff 18%);
  padding: 18px;
}

.specs-clean-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.specs-clean-title {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 800;
}

.specs-clean-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(214, 0, 28, 0.08);
  border: 1px solid rgba(214, 0, 28, 0.16);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.specs-clean-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.specs-clean-block {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px;
}

.specs-clean-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.specs-clean-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.specs-clean-item,
.specs-detail-panel,
.specs-legacy-box {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  white-space: pre-line;
}

.specs-clean-item {
  padding: 10px 12px;
}

.specs-detail-panel,
.specs-legacy-box {
  padding: 14px 16px;
}

.specs-detail-panel {
  min-height: 104px;
}

.specs-detail-panel-compact {
  min-height: 84px;
}

html[data-theme='dark'] .specs-clean-shell {
  background: rgba(30, 41, 59, 0.68);
}

html[data-theme='dark'] .specs-clean-badge {
  background: rgba(225, 29, 72, 0.18);
  border-color: rgba(251, 113, 133, 0.24);
  color: #fda4af;
}

/* =========================
   REFORCO FINAL: MODAL EDITAR PC E BOTOES DE MODAL
   ========================= */

#modalEditPc textarea.form-control.d-none {
  display: none !important;
}

#modalEditPc .specs-detail-panel,
#modalEditPc .specs-detail-panel.text-start,
.modal .specs-detail-panel,
.modal .specs-legacy-box {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

html[data-theme='dark'] #modalEditPc .specs-detail-panel,
html[data-theme='dark'] #modalEditPc .specs-detail-panel.text-start,
html[data-theme='dark'] .modal .specs-detail-panel,
html[data-theme='dark'] .modal .specs-legacy-box {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5eefb !important;
}

.modal .btn.btn-secondary,
.modal .btn.btn-warning,
.modal .btn.btn-outline-secondary,
.modal .btn.btn-outline-dark,
.modal .btn.btn-outline-info {
  box-shadow: none !important;
}

.modal .btn.btn-secondary {
  background: #eef2f7 !important;
  border-color: #d8e0eb !important;
  color: #1f2937 !important;
}

.modal .btn.btn-secondary:hover {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

.modal .btn.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #111827 !important;
}

.modal .btn.btn-warning:hover {
  background: #fbbf24 !important;
  border-color: #fbbf24 !important;
  color: #111827 !important;
}

.modal .btn.btn-primary,
.modal .btn.btn-success {
  color: #ffffff !important;
}

html[data-theme='dark'] .modal .btn.btn-secondary {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .modal .btn.btn-secondary:hover {
  background: #475569 !important;
  border-color: #64748b !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .modal .btn.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #111827 !important;
}

html[data-theme='dark'] .modal .btn.btn-warning:hover {
  background: #fbbf24 !important;
  border-color: #fbbf24 !important;
  color: #111827 !important;
}

html[data-theme='dark'] .modal .btn.btn-primary,
html[data-theme='dark'] .modal .btn.btn-success {
  background: #e11d36 !important;
  border-color: #e11d36 !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .modal .btn.btn-primary:hover,
html[data-theme='dark'] .modal .btn.btn-success:hover {
  background: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}

/* Inputs readonly dos modais seguem o mesmo padrão visual dos outros campos */
.modal .form-control[readonly],
.modal .form-control:read-only {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border-color) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.modal .form-control[readonly]:focus,
.modal .form-control:read-only:focus {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: rgba(214, 0, 28, 0.45) !important;
  box-shadow: 0 0 0 0.2rem rgba(214, 0, 28, 0.12) !important;
}

/* Modal Editar PC: botões inferiores iguais aos do Ver PC */
#modalEditPc #btnAddManutencaoFromEdit,
#modalEditPc #btnTransferirFromEdit {
  min-width: 230px;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 750 !important;
  letter-spacing: 0.15px;
  box-shadow: none !important;
}

html[data-theme='dark'] #modalEditPc #btnAddManutencaoFromEdit,
html[data-theme='dark'] #modalEditPc #btnTransferirFromEdit {
  background: var(--surface-soft) !important;
  border-color: var(--border-color) !important;
  color: var(--text) !important;
}

html[data-theme='dark'] #modalEditPc #btnAddManutencaoFromEdit:hover,
html[data-theme='dark'] #modalEditPc #btnTransferirFromEdit:hover {
  background: #223149 !important;
  border-color: #4b5f7a !important;
  color: #ffffff !important;
  transform: none !important;
}

html[data-theme='dark'] #modalEditPc #btnAddManutencaoFromEdit:focus,
html[data-theme='dark'] #modalEditPc #btnTransferirFromEdit:focus,
html[data-theme='dark'] #modalEditPc #btnAddManutencaoFromEdit:active,
html[data-theme='dark'] #modalEditPc #btnTransferirFromEdit:active,
html[data-theme='dark'] #modalEditPc #btnAddManutencaoFromEdit:focus-visible,
html[data-theme='dark'] #modalEditPc #btnTransferirFromEdit:focus-visible {
  background: #223149 !important;
  border-color: #4b5f7a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(75, 95, 122, 0.22) !important;
}

/* =========================
   CAMADA FINAL DE CONSISTENCIA PARA MODAIS
   ========================= */

.modal .modal-content {
  background: var(--surface) !important;
}

.modal .modal-header,
.modal .modal-footer {
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%) !important;
  border-color: var(--border-color) !important;
}

html[data-theme='dark'] .modal .modal-header,
html[data-theme='dark'] .modal .modal-footer {
  background: color-mix(in srgb, var(--surface) 88%, #0f172a 12%) !important;
}

.modal .modal-body {
  background: transparent !important;
}

.modal-form-shell {
  width: 100%;
  text-align: center;
}

.modal-form-shell > .d-flex:first-child,
.modal-form-shell > .alert:first-child {
  margin-top: 0.15rem;
}

.modal-form-shell .form-group {
  margin-bottom: 1rem;
  text-align: left;
}

.modal-form-shell .row {
  text-align: left;
}

.modal-form-shell .card-title,
.modal-form-shell .modal-title {
  color: var(--text) !important;
}

.modal-form-shell hr {
  border-color: var(--border-color);
  opacity: 1;
}

.modal-form-shell .btn-importcsv {
  min-height: 44px;
}

html[data-theme='dark'] .modal-form-shell .text-muted,
html[data-theme='dark'] .modal-form-shell small.text-muted {
  color: var(--muted) !important;
}

.manutencao-autocomplete-shell {
  margin-top: 0.2rem;
}

.manutencao-autocomplete-input {
  border-radius: 14px;
  padding-right: 2.5rem;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface) 90%, var(--surface-soft) 10%) 0%,
    var(--surface) 100%
  );
}

.manutencao-autocomplete-menu {
  margin-top: 0.45rem;
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden;
}

.manutencao-autocomplete-menu .list-group-item {
  border: 0;
  border-radius: 12px !important;
  margin: 0;
  padding: 0.72rem 0.9rem;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    transform 0.12s ease;
}

.manutencao-autocomplete-menu .list-group-item + .list-group-item {
  margin-top: 0.2rem;
}

.manutencao-autocomplete-menu .list-group-item:hover,
.manutencao-autocomplete-menu .list-group-item:focus {
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%);
  color: var(--text);
  transform: translateY(-1px);
}

.manutencao-autocomplete-menu .list-group-item.active {
  background: linear-gradient(135deg, var(--primary) 0%, #ef4444 100%);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html[data-theme='dark'] .manutencao-autocomplete-input {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface) 86%, #0f172a 14%) 0%,
    var(--surface) 100%
  );
}

html[data-theme='dark'] .manutencao-autocomplete-menu {
  background: color-mix(in srgb, var(--surface) 94%, #111827 6%);
  border-color: var(--border-color);
  box-shadow: 0 20px 42px rgba(2, 6, 23, 0.42) !important;
}

html[data-theme='dark'] .manutencao-autocomplete-menu .list-group-item {
  color: var(--text);
}

html[data-theme='dark'] .manutencao-autocomplete-menu .list-group-item:hover,
html[data-theme='dark'] .manutencao-autocomplete-menu .list-group-item:focus {
  background: color-mix(in srgb, #223149 78%, var(--surface) 22%);
  color: #ffffff;
}

/* =========================
   REFINO GLOBAL DE BOTOES
   ========================= */

.btn:not(.btn-back):not(.theme-floating-btn):not(.app-navbar-home):not(.app-navbar-user-btn):not(.app-navbar-theme-btn) {
  border-radius: 12px;
  min-height: 38px;
  padding: 0.58rem 1rem;
  font-weight: 650;
  letter-spacing: 0.12px;
  border-width: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.btn:not(.btn-back):not(.theme-floating-btn):not(.app-navbar-home):not(.app-navbar-user-btn):not(.app-navbar-theme-btn):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.1);
}

.btn:not(.btn-back):not(.theme-floating-btn):not(.app-navbar-home):not(.app-navbar-user-btn):not(.app-navbar-theme-btn):active {
  transform: translateY(0);
}

.btn:not(.btn-back):not(.theme-floating-btn):not(.app-navbar-home):not(.app-navbar-user-btn):not(.app-navbar-theme-btn):focus-visible {
  box-shadow:
    0 0 0 0.22rem rgba(214, 0, 28, 0.14),
    0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.btn-sm:not(.btn-back) {
  min-height: 32px;
  padding: 0.4rem 0.72rem;
  border-radius: 10px;
  gap: 0.35rem;
}

.btn-lg:not(.btn-back) {
  min-height: 44px;
  padding: 0.72rem 1.2rem;
  border-radius: 14px;
}

.btn i,
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab {
  line-height: 1;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(214, 0, 28, 0.18) !important;
}

.btn-primary:hover {
  background: var(--wine-hover, #520a13) !important;
  border-color: var(--wine-hover, #520a13) !important;
  color: #ffffff !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus-visible,
.btn-outline-secondary,
.btn-outline-dark {
  background: rgba(17, 24, 39, 0.05) !important;
  border-color: rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background: rgba(17, 24, 39, 0.09) !important;
  border-color: rgba(17, 24, 39, 0.18) !important;
  color: #111827 !important;
}

.btn-outline-primary {
  background: rgba(214, 0, 28, 0.04) !important;
  border-color: rgba(214, 0, 28, 0.22) !important;
  color: #b00016 !important;
}

.btn-outline-primary:hover {
  background: rgba(214, 0, 28, 0.1) !important;
  border-color: rgba(214, 0, 28, 0.32) !important;
  color: #8c0012 !important;
}

.btn-info,
.btn-info:focus,
.btn-info:active,
.btn-info:focus-visible {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16) !important;
}

.btn-info:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.btn-outline-info {
  background: rgba(37, 99, 235, 0.04) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
}

.btn-outline-info:hover {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.32) !important;
  color: #1e40af !important;
}

.btn-success,
.btn-success:focus,
.btn-success:active,
.btn-success:focus-visible {
  background: #0f9f6e !important;
  border-color: #0f9f6e !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 159, 110, 0.16) !important;
}

.btn-success:hover {
  background: #0b7f58 !important;
  border-color: #0b7f58 !important;
  color: #ffffff !important;
}

.btn-danger,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:focus-visible {
  background: #c62828 !important;
  border-color: #c62828 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(198, 40, 40, 0.16) !important;
}

.btn-danger:hover {
  background: #a61f1f !important;
  border-color: #a61f1f !important;
  color: #ffffff !important;
}

.btn-warning,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:focus-visible {
  background: #f3b63f !important;
  border-color: #f3b63f !important;
  color: #111827 !important;
  box-shadow: 0 10px 22px rgba(243, 182, 63, 0.16) !important;
}

.btn-warning:hover {
  background: #e5a526 !important;
  border-color: #e5a526 !important;
  color: #111827 !important;
}

.btn-link {
  min-height: auto;
  padding: 0.08rem 0.12rem;
  border: 0 !important;
  background: transparent !important;
  color: var(--brand) !important;
  box-shadow: none !important;
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus-visible {
  color: var(--wine-hover, #520a13) !important;
  text-decoration: underline;
  transform: none;
}

html[data-theme='dark'] .btn:not(.btn-back):not(.theme-floating-btn):not(.app-navbar-home):not(.app-navbar-user-btn):not(.app-navbar-theme-btn) {
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
}

html[data-theme='dark'] .btn-secondary,
html[data-theme='dark'] .btn-secondary:focus,
html[data-theme='dark'] .btn-secondary:active,
html[data-theme='dark'] .btn-secondary:focus-visible,
html[data-theme='dark'] .btn-outline-secondary,
html[data-theme='dark'] .btn-outline-dark {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #e5eefb !important;
}

html[data-theme='dark'] .btn-secondary:hover,
html[data-theme='dark'] .btn-outline-secondary:hover,
html[data-theme='dark'] .btn-outline-dark:hover {
  background: #223149 !important;
  border-color: #4b5f7a !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .btn-outline-primary {
  background: rgba(225, 29, 54, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
  color: #fda4af !important;
}

html[data-theme='dark'] .btn-outline-primary:hover {
  background: rgba(225, 29, 54, 0.2) !important;
  border-color: rgba(251, 113, 133, 0.38) !important;
  color: #ffe4e6 !important;
}

html[data-theme='dark'] .btn-outline-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(96, 165, 250, 0.24) !important;
  color: #bfdbfe !important;
}

html[data-theme='dark'] .btn-outline-info:hover {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(96, 165, 250, 0.34) !important;
  color: #eff6ff !important;
}

html[data-theme='dark'] .btn-link {
  color: #fda4af !important;
}

html[data-theme='dark'] .btn-link:hover,
html[data-theme='dark'] .btn-link:focus-visible {
  color: #ffe4e6 !important;
}

.btn-dark,
.btn-dark:focus,
.btn-dark:active,
.btn-dark:focus-visible {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.16) !important;
}

.btn-dark:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}

.btn-outline-danger {
  background: rgba(198, 40, 40, 0.04) !important;
  border-color: rgba(198, 40, 40, 0.2) !important;
  color: #b42318 !important;
}

.btn-outline-danger:hover {
  background: rgba(198, 40, 40, 0.1) !important;
  border-color: rgba(198, 40, 40, 0.3) !important;
  color: #991b1b !important;
}

.home-filter-btn,
.home-chart-arrow {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}

.home-filter-btn:focus-visible,
.home-chart-arrow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.22rem rgba(214, 0, 28, 0.14),
    0 10px 24px rgba(15, 23, 42, 0.08);
}

.home-filter-btn:hover,
.home-chart-arrow:hover {
  border-color: rgba(17, 24, 39, 0.18);
}

html[data-theme='dark'] .btn-dark,
html[data-theme='dark'] .btn-dark:focus,
html[data-theme='dark'] .btn-dark:active,
html[data-theme='dark'] .btn-dark:focus-visible {
  background: #dbe4f0 !important;
  border-color: #dbe4f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.24) !important;
}

html[data-theme='dark'] .btn-dark:hover {
  background: #f8fafc !important;
  border-color: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme='dark'] .btn-outline-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.24) !important;
  color: #fecaca !important;
}

html[data-theme='dark'] .btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
  color: #fee2e2 !important;
}

html[data-theme='dark'] .home-filter-btn,
html[data-theme='dark'] .home-chart-arrow {
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
}