/* Unified Embalagens Tatuí ERP Stylesheet */

/* --- global.css --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background: 215 28% 97%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 91% 97%;
  --secondary-foreground: 224 76% 48%;
  --muted: 214 32% 94%;
  --muted-foreground: 215 25% 44%;
  --accent: 217 91% 95%;
  --accent-foreground: 224 76% 40%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 214 28% 82%;
  --input: 214 32% 89%;
  --ring: 221 83% 53%;
  --sidebar: 0 0% 100%;
  --radius: 0.85rem;
  --chart-1: 221 83% 53%;
  --chart-2: 142 71% 40%;
  --chart-3: 38 92% 50%;
  --chart-4: 0 84% 60%;
  --chart-5: 217 91% 60%;
  --emitida: 217 91% 55%;
  --table-border: 214 28% 82%;
  --table-border-strong: 216 24% 72%;
  --table-header-bg: 216 30% 92%;
  --icon-border: 214 25% 84%;
  --card-shadow: 0 1px 2px rgb(15, 23, 42, 0.04), 0 2px 10px rgb(15, 23, 42, 0.06);
  --card-shadow-hover: 0 2px 4px rgb(15, 23, 42, 0.06), 0 8px 20px rgb(15, 23, 42, 0.09);
}

html.dark {
  --background: 0 0% 4.5%;
  --foreground: 0 0% 97%;
  --card: 0 0% 7%;
  --card-foreground: 0 0% 97%;
  --popover: 0 0% 7%;
  --popover-foreground: 0 0% 97%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 13%;
  --secondary-foreground: 0 0% 97%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 58%;
  --accent: 0 0% 15%;
  --accent-foreground: 0 0% 97%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 16%;
  --ring: 217 91% 60%;
  --sidebar: 0 0% 3.5%;
  --chart-1: 217 91% 60%;
  --chart-2: 142 65% 48%;
  --chart-3: 38 92% 55%;
  --chart-4: 0 80% 62%;
  --chart-5: 262 83% 68%;
  --emitida: 217 91% 62%;
  --table-border: 0 0% 22%;
  --table-border-strong: 0 0% 30%;
  --table-header-bg: 0 0% 11%;
  --icon-border: 0 0% 24%;
  --card-shadow: none;
  --card-shadow-hover: none;
}

/* Flat, low-noise surfaces on true black — shadows read as smudges on
   pure black, so dark mode leans on hairline borders instead. */
html.dark .card,
html.dark .stat-card,
html.dark .month-group-card,
html.dark .mcard,
html.dark .table-wrap,
html.dark .form-section-card,
html.dark .pagination-wrap,
html.dark .btn-default,
html.dark .logo-mark,
html.dark .avatar {
  box-shadow: none;
}

html.dark .modal {
  box-shadow: 0 20px 60px rgb(0, 0, 0, 0.6);
}

html.dark .toast {
  box-shadow: 0 10px 30px rgb(0, 0, 0, 0.5);
}

/* Neutral, monochrome active nav state instead of a solid blue fill —
   color stays reserved for the small icon accents, per the reference. */
html.dark .nav-item.active {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

html.dark .nav-item.active svg {
  stroke: hsl(var(--foreground));
}

html.dark .avatar {
  background: hsl(0 0% 97%);
  color: hsl(0 0% 8%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: background-color .2s ease, color .2s ease;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: hsl(var(--foreground) / 0.15);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 99px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 4px;
}

/* App Layout Structure */
#app {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: hsl(var(--sidebar));
  border-right: 1.5px solid hsl(var(--border));
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  transition: width .25s cubic-bezier(0.16, 1, 0.3, 1), transform .25s ease;
}

.sidebar.collapsed {
  width: 70px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid hsl(var(--border));
  height: 60px;
  padding: 14px 16px;
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.12);
}

.logo-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-foot span {
  display: none;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
}

.nav-group-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: hsl(var(--muted-foreground));
  padding: 16px 10px 6px;
  font-weight: 600;
}

.sidebar.collapsed .nav-group-label {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
  border-radius: 8px;
  padding: 9px 10px;
  margin-bottom: 3px;
  font-size: 13px;
}

.nav-item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.nav-item:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.nav-item.active {
  font-weight: 600;
  background: hsl(var(--primary));
  color: #fff;
}

.sidebar-foot {
  padding: 12px;
  border-top: 1.5px solid hsl(var(--border));
}

.collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 500;
}

.collapse-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.main-wrap {
  flex: 1;
  margin-left: 250px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: calc(100% - 250px);
  transition: margin-left .25s ease, width .25s ease;
}

.sidebar.collapsed~.main-wrap {
  margin-left: 70px;
  width: calc(100% - 70px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  cursor: pointer;
  width: 300px;
  background: hsl(var(--muted) / 0.4);
  transition: border-color .15s, background-color .15s;
}

.searchbox:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent) / 0.5);
}

.searchbox kbd {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: 2px 5px;
  color: hsl(var(--muted-foreground));
}

.bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.alert-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: hsl(0 84% 60%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid hsl(var(--card));
  line-height: 1;
  pointer-events: none;
  z-index: 5;
}

.alert-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.alert-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.alert-dropdown-head {
  padding: 12px 14px;
  border-bottom: 1px solid hsl(var(--border));
  font-weight: 700;
  font-size: 13px;
}

.alert-dropdown-item {
  padding: 10px 14px;
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.alert-dropdown-item:hover {
  background: hsl(var(--muted)/0.4);
}

.alert-dropdown-item:last-child {
  border-bottom: none;
}

.alert-dropdown-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
}

@media (max-width: 480px) {
  .alert-dropdown {
    position: fixed;
    top: 60px;
    right: 10px;
    left: 10px;
    width: auto;
  }
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  position: relative;
  transition: background-color .15s, border-color .15s, transform .15s;
}

.icon-btn:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--ring) / 0.3);
}

.icon-btn:active {
  transform: scale(0.96);
}

.badge-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  background: hsl(var(--destructive));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 2px 4px rgb(0, 0, 0, 0.2);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 99px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.content {
  flex: 1;
  padding: 24px;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

/* Page Header */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1.5px solid hsl(var(--border));
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

.page-header p {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-top: 3px;
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (width <=820px) {
  .page-header {
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .page-header h1 {
    font-size: 17px;
  }

  .page-header p {
    font-size: 12px;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Buttons System */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 15px;
  height: 15px;
}

.btn-default {
  background: hsl(var(--primary));
  color: #fff;
  border-color: hsl(var(--primary));
  box-shadow: 0 1px 3px rgb(37, 99, 235, 0.2);
}

.btn-default:hover {
  opacity: .88;
  box-shadow: 0 2px 8px rgb(37, 99, 235, 0.3);
}

.btn-outline {
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
  border-width: 1.5px;
  background: hsl(var(--card));
}

.btn-outline:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--ring) / 0.3);
}

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}

.btn-ghost:hover {
  background: hsl(var(--accent));
}

.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.btn-destructive:hover {
  opacity: .9;
}

.btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-icon-only {
  width: 32px;
  padding: 0;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Cards & Layout Grid */
.grid {
  display: grid;
  gap: 16px;
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.card-tight {
  padding: 14px;
}

/* Forms */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.field .hint {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: hsl(var(--foreground));
  font-size: 13px;
  width: 100%;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

textarea {
  height: auto;
  padding: 10px 12px;
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
  background: hsl(var(--card));
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ============================================================
   COMBOBOX — input pesquisável para selects de cadastro
   (Empresa, Cliente, Fornecedor, Banco etc.)
============================================================ */
.combo-wrap {
  position: relative;
  width: 100%;
}

.combo-input {
  padding-right: 60px !important;
  cursor: text;
}

/* Destaque visual de campo obrigatório não preenchido. Usado em vários
   formulários (Novo Pagamento, Nota Fiscal) via classList.add('field-error')
   — antes só existia a regra para o combobox, então nos demais campos
   (número, valor, datas) o erro era adicionado na classe mas ficava
   visualmente invisível para o usuário. */
input.field-error,
select.field-error,
textarea.field-error {
  border-color: hsl(var(--destructive)) !important;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.12) !important;
}

.combo-input.field-error {
  border-color: hsl(var(--destructive)) !important;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.12) !important;
}

.combo-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  display: flex;
  transition: transform .15s ease;
}

.combo-wrap.open .combo-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.combo-clear {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  border: none;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0;
  transition: background-color .15s, color .15s;
}

.combo-clear:hover {
  background: hsl(var(--destructive) / 0.15);
  color: hsl(var(--destructive));
}

.combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(0, 0, 0, 0.18);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  padding: 4px;
}

.combo-wrap.open .combo-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.combo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  color: hsl(var(--foreground));
}

.combo-item:hover,
.combo-item.active {
  background: hsl(var(--muted));
}

.combo-item-sub {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.combo-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
}

.combo-menu::-webkit-scrollbar {
  width: 6px;
}

.combo-menu::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 99px;
}

@media (width <=640px) {
  .combo-menu {
    max-height: 200px;
  }
}

/* Modals & Overlays */
.overlay {
  position: fixed;
  inset: 0;
  background: rgb(0, 0, 0, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgb(0, 0, 0, 0.25);
  transform: translateY(12px) scale(.98);
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  contain: layout paint style;
}

/* O modal ja tem a propria transicao de entrada: a animacao fadeIn extra
   competia pelo mesmo transform e causava travadinha ao abrir. */
.modal.fade-in {
  animation: none;
}

.overlay.open .modal {
  transform: translateY(0) scale(1);
}

.modal-lg {
  max-width: 760px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  z-index: 2;
  flex-shrink: 0;
}

.modal-head h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: hsl(var(--card));
  flex-shrink: 0;
}

/* Toast Notifications */
#toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

.toast {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgb(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Command Palette (⌘K) */
.cmdk-modal {
  max-width: 560px;
  padding: 0;
}

.cmdk-input {
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 18px;
  font-size: 14.5px;
  background: transparent;
  color: hsl(var(--foreground));
}

.cmdk-input:focus {
  outline: none;
  box-shadow: none;
}

.cmdk-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}

.cmdk-group {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 8px 10px 4px;
  letter-spacing: 0.05em;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: hsl(var(--foreground));
}

.cmdk-item:hover {
  background: hsl(var(--accent));
}

.cmdk-item svg {
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
}

/* Animations & Utilities */
.fade-in {
  animation: fadeIn .3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger>* {
  animation: fadeIn .3s ease both;
}

.section-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.divider {
  height: 1px;
  background: hsl(var(--border));
  margin: 16px 0;
}

.hidden {
  display: none !important;
}

.text-muted {
  color: hsl(var(--muted-foreground));
}

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

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  text-align: center;
  color: hsl(var(--muted-foreground));
  padding: 52px 24px;
  border: 1.5px dashed hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.2);
}

.empty-state svg {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  opacity: .5;
}

.empty-state h3 {
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 12.5px;
}

/* Smart Pagination Engine - Sleek & Non-Cluttered */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid hsl(var(--border) / 0.6);
  flex-wrap: wrap;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.6);
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-top: 14px;
}

.pagination-wrap.minimal {
  justify-content: flex-end;
  padding: 6px 10px;
  border: none;
  margin-top: 14px;
}

.pagination-info {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-size-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled) {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
}

.page-btn.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.35);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-size-select {
  padding: 3px 6px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
}

/* Monthly Group Cards & Headers */
.month-group-card,
.notas-flat-table {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.04);
}

.month-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid hsl(var(--border));
  user-select: none;
  padding: 10px 16px;
  background: hsl(var(--muted) / 0.35);
}

.month-group-title {
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: capitalize;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.month-group-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

/* Filter Grid & Preset Bar */

/* Fixed 3-column layout on desktop so labels like "Empresa Emissora
   (Todas)" always have room and never get clipped. Falls back to
   fewer columns on smaller screens (see responsive rules below). */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  margin-top: 8px;
}

.filter-grid select,
.filter-grid input {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

@media (width <=900px) {
  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <=560px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
}

.filter-preset-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.filter-preset-chip {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.5);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-preset-chip:hover,
.filter-preset-chip.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* --- responsive.css --- */

/* ============================================================
   RESPONSIVE & MOBILE-FIRST STYLES (Strict 0-overflow)
   Mobile (<820px): Floating Pill Bottom Bar & Step Wizard
============================================================ */

.mobile-topbar-toggle {
  display: none !important;
}

.bottom-nav {
  display: none;
}

.bn-sheet {
  display: none;
}

.mobile-cards {
  display: none;
}

.filter-toggle-btn {
  display: flex;
  margin-bottom: 16px;
}

.filter-toggle-btn button {
  width: auto;
  min-width: 200px;
  padding: 0 18px;
}

/* Filter bars are always accessed via the "Filtrar Resultados" button + modal
   (see .filter-toggle-btn), on both desktop and mobile. The inline bar itself
   is never shown directly. */
.filter-bar {
  display: none !important;
}

@media (width <=820px) {
  .filter-toggle-btn {
    width: 100%;
  }

  .filter-toggle-btn button {
    width: 100%;
  }
}

/* Dashboard responsive chart grid helper */
.dashboard-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (width <=1024px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (width <=1100px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <=820px) {


  /* Sidebar: handled via transform in the refactor patch below */

  /* Sidebar head still shown in mobile drawer */
  /* Enforce zero horizontal overflow */
  html,
  body,
  #app,
  .main-wrap,
  .content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
  }

  .content {
    padding: 14px 12px;
    padding-bottom: 100px;

    /* spacing for floating pill bottom bar */
  }

  /* Table -> Mobile Cards transition */
  .table-wrap {
    display: none !important;
  }

  .mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .field-row {
    grid-template-columns: 1fr !important;
  }

  /* Hide bottom bar on login / auth screen (inline display:none is overridden by !important below) */
  body.auth-mode .bottom-nav {
    display: none !important;
  }

  /* Floating Capsule Mobile Bottom Bar (Image 1 Style) */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 14px;
    right: 14px;
    z-index: 100;
    height: 62px;
    background: #0b1120;

    /* High contrast dark pill */
    backdrop-filter: blur(24px);
    border: 1px solid rgb(255, 255, 255, 0.12);
    border-radius: 999px;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    box-shadow: 0 12px 36px rgb(0, 0, 0, 0.45), 0 2px 10px rgb(37, 99, 235, 0.25);
  }

  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    color: rgb(255, 255, 255, 0.65);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
    user-select: none;

  }

  .bn-item svg {
    width: 20px;
    height: 20px;
    transition: stroke .2s ease, transform .2s ease;
  }

  .bn-item span {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .bn-item.active {
    color: #fff;
    font-weight: 700;
  }

  .bn-item.active svg {
    color: #3b82f6;

    /* Corporate blue accent */
    filter: drop-shadow(0 0 6px rgb(59, 130, 246, 0.6));
    transform: translateY(-1px);
  }

  /* Central Elevated Action Button (+) */
  .bn-center-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    height: 100%;
  }

  .bn-center-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: #0b1120;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;

    /* Elevates above bottom bar */
    border: 4px solid #0b1120;
    box-shadow: 0 6px 20px rgb(0, 0, 0, 0.35), 0 2px 6px rgb(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), background-color .15s ease;
  }

  .bn-center-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
  }

  .bn-center-btn:active {
    transform: scale(0.92) translateY(-2px);
    background: #eff6ff;
  }

  /* Modal Adaptations for Mobile */
  .modal,
  .modal-bottom-sheet {
    position: relative;
    max-height: 92vh;
    border-radius: 16px;
    margin: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #toast-wrap {
    max-width: none;
    bottom: 80px;
    left: 12px;
    right: 12px;
  }
}

@media (width >=821px) {
  .sidebar {
    display: flex !important;
    transform: none !important;
  }

  /* On Desktop: NO step wizard bar, all form section cards displayed at once */
  .stepper-bar {
    display: none !important;
  }

  .form-section-card {
    display: block !important;
  }

  #btn_step_prev,
  #btn_step_next {
    display: none !important;
  }

  #btn_step_save {
    display: inline-flex !important;
  }
}

/* Form Multi-Step Wizard Styling */
.stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 16px;
  background: hsl(var(--secondary) / 0.5);
  border-bottom: 1px solid hsl(var(--border));
  overflow-x: auto;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .2s ease, color .2s ease;
}

.step-indicator.active {
  opacity: 1;
  font-weight: 700;
  color: hsl(var(--primary));
}

.step-indicator.completed {
  opacity: 0.9;
  color: hsl(142 71% 40%);
}

.step-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-indicator.active .step-badge {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 0 10px hsl(var(--primary) / 0.4);
}

.step-indicator.completed .step-badge {
  background: hsl(142 71% 40%);
  color: #fff;
}

.step-title {
  font-size: 12px;
  white-space: nowrap;
}

.step-connector {
  height: 2px;
  flex: 0 0 12px;
  background: hsl(var(--border));
}

/* Form Section Header (Desktop) */
.form-section-card {
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
}

.form-section-title {
  font-size: 13.5px;
  font-weight: 700;
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: hsl(var(--primary) / 0.05);
  border-left: 3.5px solid hsl(var(--primary));
  border-radius: 0 8px 8px 0;
}

/* --- dashboard.css --- */

/* Dashboard Styles */

.stat-card {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  padding: 18px 20px;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.stat-card:hover {
  border-color: hsl(var(--ring) / 0.5);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

/* Icon sits on its own row, above the label and value — matches the
   reference's stacked order instead of a label/icon header row. */
.stat-top {
  display: flex;
  margin-bottom: 14px;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  flex-shrink: 0;
}

.stat-icon svg {
  width: 18px;
  height: 18px;
}

.stat-label {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--muted-foreground));
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stat-foot {
  color: hsl(var(--muted-foreground));
  padding-top: 10px;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-top: 4px;
}

.stat-foot:empty {
  display: none;
}

.chart-box {
  min-height: 200px;
  position: relative;
  height: 240px;
  width: 100%;
  overflow: hidden;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  padding: 10px 4px 2px;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.chart-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.chart-legend-item b {
  color: hsl(var(--foreground));
  font-weight: 700;
}



.chart-box canvas {
  max-width: 100%;
  max-height: 100%;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ============================================================
   KPI GRADIENT CARDS + SALES OVERVIEW (Dashboard hero section)
   ============================================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  padding: 18px 20px 16px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  display: flex;
  flex-direction: column;
  min-height: 128px;
  transition: transform .18s ease, border-color .18s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
}

.kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  letter-spacing: -0.01em;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.3;
}

.kpi-trend.up {
  color: hsl(142 71% 32%);
  background: hsl(142 71% 40% / 0.14);
}

.kpi-trend.down {
  color: hsl(0 72% 46%);
  background: hsl(0 72% 55% / 0.14);
}

.kpi-value {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: hsl(var(--card-foreground));
  position: relative;
  z-index: 2;
}

.kpi-sub {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 5px;
  position: relative;
  z-index: 2;
}

.kpi-sub.up {
  color: hsl(142 71% 38%);
}

.kpi-sub.down {
  color: hsl(0 72% 50%);
}

.kpi-spark {
  position: relative;
  height: 34px;
  margin-top: auto;
  padding-top: 10px;
}

.kpi-spark canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* --- Light theme gradients: soft tinted surfaces, dark text --- */
.kpi-card.kpi-blue {
  background: linear-gradient(160deg, hsl(217 91% 96%) 0%, hsl(217 85% 92%) 100%);
  border-color: hsl(217 60% 85%);
}

.kpi-card.kpi-orange {
  background: linear-gradient(160deg, hsl(28 100% 96%) 0%, hsl(28 90% 91%) 100%);
  border-color: hsl(28 60% 84%);
}

.kpi-card.kpi-purple {
  background: linear-gradient(160deg, hsl(262 90% 97%) 0%, hsl(262 80% 93%) 100%);
  border-color: hsl(262 55% 87%);
}

.kpi-card.kpi-green {
  background: linear-gradient(160deg, hsl(152 75% 95%) 0%, hsl(152 65% 90%) 100%);
  border-color: hsl(152 50% 82%);
}

/* --- Dark theme gradients: deep saturated hue, glowing at the base --- */
html.dark .kpi-card.kpi-blue {
  background:
    radial-gradient(120% 100% at 85% 115%, hsl(217 91% 45% / 0.35) 0%, transparent 60%),
    linear-gradient(160deg, hsl(217 55% 15%) 0%, hsl(220 55% 9%) 55%, hsl(224 45% 6%) 100%);
  border-color: hsl(217 70% 30% / 0.5);
}

html.dark .kpi-card.kpi-orange {
  background:
    radial-gradient(120% 100% at 85% 115%, hsl(28 95% 45% / 0.35) 0%, transparent 60%),
    linear-gradient(160deg, hsl(28 60% 15%) 0%, hsl(24 55% 9%) 55%, hsl(20 45% 6%) 100%);
  border-color: hsl(28 75% 32% / 0.5);
}

html.dark .kpi-card.kpi-purple {
  background:
    radial-gradient(120% 100% at 85% 115%, hsl(262 83% 50% / 0.35) 0%, transparent 60%),
    linear-gradient(160deg, hsl(262 50% 17%) 0%, hsl(266 50% 10%) 55%, hsl(270 45% 7%) 100%);
  border-color: hsl(262 65% 35% / 0.5);
}

html.dark .kpi-card.kpi-green {
  background:
    radial-gradient(120% 100% at 85% 115%, hsl(152 71% 40% / 0.35) 0%, transparent 60%),
    linear-gradient(160deg, hsl(152 55% 13%) 0%, hsl(156 55% 8%) 55%, hsl(160 45% 5%) 100%);
  border-color: hsl(152 65% 28% / 0.5);
}

html.dark .kpi-card .kpi-label {
  color: hsl(0 0% 100% / 0.55);
}

html.dark .kpi-card .kpi-value {
  color: hsl(0 0% 100% / 0.96);
}

html.dark .kpi-card .kpi-trend.up {
  color: hsl(142 76% 62%);
  background: hsl(142 76% 45% / 0.18);
}

html.dark .kpi-card .kpi-trend.down {
  color: hsl(0 90% 72%);
  background: hsl(0 84% 60% / 0.18);
}

html.dark .kpi-card .kpi-sub.up {
  color: hsl(142 76% 62%);
}

html.dark .kpi-card .kpi-sub.down {
  color: hsl(0 90% 72%);
}

@media (width <=1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <=640px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <=420px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Sales Overview panel header / legend --- */
.overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.overview-title-group .section-title {
  margin: 0 0 2px 0;
}

.overview-subtitle {
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
}

.overview-range-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.5);
  color: hsl(var(--foreground));
  white-space: nowrap;
}

.overview-legend {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}

.overview-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  flex-shrink: 0;
}

.overview-legend-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.overview-legend-label {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.overview-legend-value {
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
}

/* --- Recent activity list (matches reference's colored icon rows) --- */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-radius: 12px;
  transition: background .12s ease;
}

.activity-row:hover {
  background: hsl(var(--secondary) / 0.5);
}

.activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-sub {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-amount {
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--foreground));
  flex-shrink: 0;
  text-align: right;
}

.recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color .15s ease;
}

.recent-item:last-child {
  border-bottom: none;
}

/* --- invoices.css --- */

/* Invoices & ERP Table Styles */

.table-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 1px 4px rgb(0, 0, 0, 0.04);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: clamp(9.5px, 0.95vw, 13px);
}

th,
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

thead {
  background: hsl(var(--muted) / 0.5);
}

th {
  text-align: left;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease;
  padding: 12px 14px;
  font-size: 10.5px;
  letter-spacing: .07em;
  background: hsl(var(--muted) / 0.6);
  border-bottom: 1.5px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

th:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

td {
  padding: 12px 14px;
  vertical-align: middle;
  white-space: nowrap;
  border-top: 1px solid hsl(var(--border) / 0.7);
}

tbody tr {
  transition: background-color .15s ease;
}

tbody tr:hover {
  background: hsl(var(--accent) / 0.4);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  white-space: nowrap;
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
}

.st-em_analise .dot {
  background: #64748b;
}

.st-em_analise {
  color: #475569 !important;
  background: hsl(220 14% 96%) !important;
  border-color: hsl(220 13% 82%) !important;
}

html.dark .st-em_analise {
  color: #94a3b8 !important;
  background: hsl(215 28% 16% / 0.6) !important;
  border-color: hsl(215 20% 32%) !important;
}

html.dark .st-em_analise .dot {
  background: #94a3b8;
}


.st-aberta .dot {
  background: hsl(217 91% 60%);
}

.st-aberta {
  color: hsl(217 91% 45%);
}

.st-aprovada .dot {
  background: hsl(262 83% 60%);
}

.st-aprovada {
  color: hsl(262 83% 48%);
}

.st-paga .dot {
  background: hsl(142 71% 40%);
}

.st-paga {
  color: hsl(142 71% 32%);
}

.st-fechada .dot {
  background: hsl(0 0% 40%);
}

.st-fechada {
  color: hsl(0 0% 35%);
}

.st-cancelada .dot {
  background: hsl(0 84% 60%);
}

.st-cancelada {
  color: hsl(0 84% 45%);
}

.st-vencida .dot {
  background: hsl(38 92% 50%);
}

.st-vencida {
  color: hsl(28 92% 42%);
}

html.dark .badge {
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.7);
}

/* Mobile Cards */
.mcard {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgb(0, 0, 0, 0.05);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.mcard-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.mcard-top>div:first-child {
  min-width: 0;
  overflow: hidden;
}

.mcard-top select.badge {
  flex: 0 0 auto;
  width: auto;
  max-width: 42vw;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 99px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  text-overflow: ellipsis;
}


.mcard-title,
.mcard-sub {
  overflow-wrap: break-word;
  /* em vez de "anywhere", evita quebra letra a letra */
  word-break: normal;
}

.mcard-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: hsl(var(--muted-foreground));
  padding: 5px 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  font-size: 12.5px;
  gap: 12px;
  min-width: 0;
}

.mcard-row span {
  flex-shrink: 0;
  font-size: 12px;
}

.mcard-row b {
  color: hsl(var(--foreground));
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: right;
  min-width: 0;
  flex: 1;
}

/* Upload Dropzone */
.upload-box {
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: hsl(var(--muted) / 0.2);
  transition: border-color .15s ease, background-color .15s ease;
}

.upload-box.dragover,
.upload-box:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent) / 0.4);
}

.upload-box svg {
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  color: hsl(var(--muted-foreground));
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  margin-top: 12px;
  background: hsl(var(--card));
}

.filter-bar {
  display: flex;
  align-items: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.chip {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}

.chip:hover,
.chip.active {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border-color: hsl(var(--foreground));
}

/* --- calendar.css --- */

/* Calendar Module Styles */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.cal-day {
  min-height: 84px;
  border: 1.5px solid hsl(var(--border));
  border-radius: 10px;
  padding: 6px;
  font-size: 11.5px;
  position: relative;
  cursor: pointer;
  background: hsl(var(--card));
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}

.cal-day:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent) / 0.4);
}

.cal-day:active {
  transform: scale(0.98);
}

.cal-day.out {
  opacity: .3;
  cursor: default;
  pointer-events: none;
  background: transparent;
}

.cal-day.cal-today {
  border: 1.5px solid hsl(var(--foreground));
}

.cal-daynum {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.cal-daynum>span:first-child {
  flex-shrink: 0;
}

.cal-day.cal-today .cal-daynum>span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 11px;
  flex-shrink: 0;
}

.cal-day.has-events {
  background: hsl(var(--muted) / 0.3);
}

/* ============================================================
   CÉLULA DO DIA — DESIGN EM "PONTOS-CONTADOR"
   ------------------------------------------------------------
   Substitui as antigas linhas de texto (.cal-evt), que truncavam
   em telas estreitas (ex.: "VENCTO", "Vence NF..." cortados).
   Agora cada dia mostra no máximo 5 pastilhas numéricas — uma por
   tipo de evento (combo, vencimento, emissão, pagamento,
   cancelamento) — sempre no formato "N", nunca corta texto, e o
   detalhe completo fica disponível no modal ao clicar no dia.
============================================================ */

/* Badge com o total de notas do dia, ao lado do número do dia */
.cal-day-total {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.cal-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.cal-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.cal-count-pill.cal-count-venc {
  background: hsl(38 92% 50% / 0.18);
  color: hsl(28 92% 38%);
}

.cal-count-pill.cal-count-emit {
  background: hsl(var(--emitida) / 0.18);
  color: hsl(var(--emitida));
}

.cal-count-pill.cal-count-pago {
  background: hsl(142 71% 40% / 0.18);
  color: hsl(142 71% 30%);
}

.cal-count-pill.cal-count-canc {
  background: hsl(0 84% 60% / 0.18);
  color: hsl(0 84% 45%);
}

.cal-count-pill.cal-count-combo {
  color: #fff;
  background: linear-gradient(90deg, hsl(var(--emitida)) 0%, hsl(142 71% 40%) 100%);
}

html.dark .cal-count-pill.cal-count-venc {
  color: hsl(38 92% 65%);
}

html.dark .cal-count-pill.cal-count-pago {
  color: hsl(142 70% 55%);
}

html.dark .cal-count-pill.cal-count-canc {
  color: hsl(0 84% 70%);
}

@media (width <=640px) {
  .cal-day {
    min-height: 52px;
    padding: 4px;
    font-size: 10px;
  }

  .cal-daynum {
    margin-bottom: 0;
  }

  .cal-day-total {
    min-width: 14px;
    height: 14px;
    font-size: 9px;
  }

  .cal-day-dots {
    gap: 2px;
    margin-top: 3px;
  }

  .cal-count-pill {
    min-width: 13px;
    height: 13px;
    font-size: 8.5px;
    padding: 0 3px;
  }
}

/* ============================================================
   REFINAMENTOS — Responsivo, Mobile, Dark Mode e Estados Extras
   (overrides duplicados de tabelas/botoes/cards foram unificados
   nas secoes originais acima durante a limpeza do CSS)
============================================================ */

/* ---- Improved Filter Bar ---- */

.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar select {
  height: 34px;
  font-size: 12.5px;
  border-radius: 7px;
  background: hsl(var(--background));
}

.filter-bar input[type="text"] {
  min-width: 0;
  /* was 200px — caused horizontal scroll on narrow screens */
  max-width: 280px;
  flex: 1;
}

.filter-bar select {
  min-width: 0;
  /* allows select to shrink on mobile */
  max-width: 230px;
  text-overflow: ellipsis;
}

@media (width <=820px) {
  .filter-bar select {
    max-width: 100%;
    width: 100%;
  }
}

/* ---- Better Table Styling ---- */

tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Row Actions Improved ---- */

.row-actions .icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}

tbody tr:hover .row-actions .icon-btn {
  opacity: 1;
}

.row-actions .icon-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* ---- Better Button Styles ---- */

.btn-sm.btn-icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
}

/* ---- Status Select inside tables ---- */
td select.badge {
  font-size: 10.5px;
  font-weight: 600;
  height: 24px;
  padding: 0 6px;
  border-radius: 99px;
  cursor: pointer;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  min-width: 78px;
  max-width: 110px;
  width: auto;
}

/* ---- View Mode Toggle ---- */
.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.view-mode-toggle .btn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
}

/* ---- Improved Mobile Cards ---- */

.mcard-row:last-of-type {
  border-bottom: none;
}

/* Always sits clearly below the table/cards, never glued to them */

/* ---- Filter active chips ---- */
.filter-chip-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.25);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}

.filter-chip-active:hover {
  background: hsl(var(--primary) / 0.2);
}

/* ---- Search box in filter bar ---- */
.filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  /* was 180px — caused overflow on very narrow screens */
  max-width: 320px;
}

@media (width <=820px) {
  .filter-search-wrap {
    max-width: 100%;
  }
}

.filter-search-wrap input {
  padding-left: 34px !important;
  width: 100%;
}

.filter-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* ---- Notas filter container ---- */
.notas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ---- Filter toggle button (opens the filters modal) — desktop + mobile ---- */
.filter-toggle-btn button {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  color: hsl(var(--foreground));
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.06);
  cursor: pointer;
}

.filter-toggle-btn button:hover {
  background: hsl(var(--accent));
}

@media (width <=820px) {
  .page-header h1 {
    font-size: 18px;
  }

  .stat-value {
    font-size: 18px;
  }

  .notas-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .notas-toolbar .view-mode-toggle {
    width: 100%;
    justify-content: center;
  }

  /* Make month group cards work on mobile */
  .month-group-card .table-wrap {
    display: none !important;
  }

  .month-group-card .mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
}

/* ---- Dashboard charts grid mobile ---- */
@media (width <=820px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr !important;
  }

  .chart-box {
    height: 200px;
  }
}

/* ---- Topbar search on mobile ---- */
@media (width <=820px) {
  .searchbox {
    width: auto;
    flex: 1;
  }

  .searchbox .sb-label {
    display: none;
  }

  .searchbox kbd {
    display: none;
  }
}

/* ---- Auditoria table on mobile ---- */
@media (width <=820px) {
  .auditoria-table-wrap {
    display: none;
  }
}

/* ---- Dark mode table improvements ---- */
html.dark thead {
  background: hsl(var(--muted) / 0.4);
}

html.dark tbody tr:hover {
  background: hsl(var(--accent) / 0.5);
}

/* ---- Badge improvements for dark mode ---- */

html.dark .st-paga {
  color: hsl(142 70% 55%);
}

html.dark .st-paga .dot {
  background: hsl(142 70% 55%);
}

html.dark .st-aberta {
  color: hsl(217 91% 70%);
}

html.dark .st-aberta .dot {
  background: hsl(217 91% 70%);
}

html.dark .st-vencida {
  color: hsl(38 92% 65%);
}

html.dark .st-vencida .dot {
  background: hsl(38 92% 65%);
}

html.dark .st-cancelada {
  color: hsl(0 84% 70%);
}

html.dark .st-cancelada .dot {
  background: hsl(0 84% 70%);
}

html.dark .st-aprovada {
  color: hsl(262 83% 75%);
}

html.dark .st-aprovada .dot {
  background: hsl(262 83% 75%);
}

/* ---- Improved sidebar ---- */

.nav-item.active svg {
  stroke: #fff;
}

.nav-item:hover:not(.active) {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

/* ---- Filter bar date inputs ---- */
.filter-bar input[type="date"] {
  min-width: 130px;
  max-width: 150px;
  cursor: pointer;
}

/* ============================================================
   MASKED DATE INPUT (dd/mm/aaaa) — usado em todos os filtros
   de data (Notas, Relatórios, Calendário, modal mobile).
   Substitui o <input type="date"> nativo, que causava o filtro
   de datas a "atualizar sozinho" com dado incompleto no mobile.
============================================================ */
.masked-date-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-align: left;
  cursor: text;
}

.masked-date-input.input-error {
  border-color: hsl(0 84% 60%) !important;
  box-shadow: 0 0 0 3px hsl(0 84% 60% / 0.12) !important;
}

/* Agrupamento visual "De / Até" para os filtros de data, com rótulo
   compartilhado — deixa claro que os dois campos formam um intervalo
   e organiza melhor o bloco de filtros em vez de dois inputs soltos. */
.date-range-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  padding: 0 4px 0 10px;
  height: 36px;
}

.date-range-group .date-range-icon {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  display: flex;
}

.date-range-group .masked-date-input {
  border: none;
  background: transparent;
  height: 34px;
  padding: 0 4px;
  width: 92px;
  min-width: 0;
  max-width: none;
}

.date-range-group .masked-date-input:focus {
  box-shadow: none;
  background: transparent;
}

.date-range-group .date-range-sep {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  flex-shrink: 0;
}

@media (width <=560px) {
  .date-range-group {
    width: 100%;
  }

  .date-range-group .masked-date-input {
    width: 100%;
    flex: 1;
  }
}

/* Botão "Limpar filtros" — estilo consistente em todas as telas
   (Notas, Relatórios, Calendário e modal mobile de filtros) */
.btn-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* Seletor "Filtrar por" (Emissão / Pagamento) usado nos filtros de
   data para deixar explícito qual data está sendo filtrada, evitando
   confusão entre data de emissão e data de pagamento. */
.date-field-toggle {
  display: inline-flex;
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  overflow: hidden;
  height: 36px;
  flex-shrink: 0;
}

.date-field-toggle button {
  border: none;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}

.date-field-toggle button.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.date-field-toggle button:not(.active):hover {
  background: hsl(var(--accent));
}

/* ============================================================
   PERIOD CONTROL & CALENDAR REDESIGN STYLES
============================================================ */

/* Radio Card Selection Engine in Settings */
.radio-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 10px;
  margin-bottom: 16px;
}

.radio-card {
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 16px;
  background: hsl(var(--card));
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--accent) / 0.3);
}

.radio-card.active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
  box-shadow: 0 0 0 1px hsl(var(--primary));
}

html.dark .radio-card.active {
  background: hsl(var(--primary) / 0.12);
}

.radio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.radio-card-title {
  font-weight: 700;
  font-size: 14px;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.radio-card.active .radio-dot {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
}

.radio-card.active .radio-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.radio-card-desc {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  line-height: 1.45;
}

.radio-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.radio-card.active .radio-card-badge {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

/* Period Explanatory Box */
.period-info-box {
  background: hsl(var(--accent) / 0.5);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-left: 4px solid hsl(var(--primary));
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: hsl(var(--foreground));
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Topbar Period Pill Selector */
.topbar-period-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: 99px;
  padding: 3px 14px 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 8px;
  /* Prevent the pill from collapsing, but allow shrinking gracefully */
  flex-shrink: 1;
  min-width: 0;
}

.topbar-period-pill:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--primary) / 0.5);
}

.topbar-period-pill select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding-right: 4px;
}

/* Fix the injected period dropdown menu: anchor right on narrow screens so it
   doesn't clip off the left edge of the viewport. */
@media (width <=640px) {
  .period-dd-menu {
    left: auto !important;
    right: 0 !important;
    min-width: 220px !important;
    max-height: 260px !important;
  }
}

/* CRITICAL FIX: The period label must never wrap — it wrecks the topbar height.
   core.js injects its own <style id="periodDdStyles"> for .period-dd-trigger AFTER
   this stylesheet, so plain selectors here lose the cascade (same specificity,
   later in source order wins). Everything below uses !important specifically to
   beat that injected block regardless of load order, and .topbar-period-pill's
   own min-width:0/flex-shrink:1 (further down this file) is what actually lets
   the pill shrink — max-width alone on the span does nothing if the flex parent
   won't shrink below its content size. */
.period-dd {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

.period-dd-trigger {
  white-space: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.period-dd-trigger>span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  max-width: 200px;
  min-width: 0 !important;
  vertical-align: middle;
}

/* On tablet: tighten label */
@media (width <=900px) {
  .period-dd-trigger>span {
    max-width: 150px !important;
  }
}

/* On small mobile: truncate label further */
@media (width <=640px) {
  .topbar-period-pill {
    padding: 3px 10px 3px 10px;
    gap: 6px;
    margin-right: 4px;
  }

  .period-dd-trigger>span {
    max-width: 90px !important;
  }

  .period-dd-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* On very small phones: hide the text label entirely, keep icon + mode badge only */
@media (width <=420px) {
  .period-dd-trigger>span {
    display: none !important;
  }

  /* Hide the chevron too — the whole pill becomes the tap target */
  .period-dd-chevron {
    display: none !important;
  }

  .topbar-period-pill {
    gap: 4px;
    padding: 3px 8px;
    margin-right: 0;
  }

  /* Badge text ("Acumulado"/"Mensal") is the longest remaining piece at this
     width — shrink its font/padding so the pill stays compact next to the
     search box and bell/theme icons instead of pushing them off-screen. */
  .topbar-period-pill .badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }
}

/* Below 360px even the shrunk pill competes with the search box and topbar
   icons for space — the safety-net rule further down this file already hides
   .topbar-period-pill entirely at that width, which is the right call here. */

/* Calendar Modal Redesign & Blue Dividers */
.cal-modal-card {
  border: 1.5px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.04);
  transition: all 0.18s ease;
  overflow: hidden;
}

.cal-modal-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
}

.cal-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--primary));
  margin: 18px 0 12px 0;
  padding: 8px 14px;
  background: hsl(var(--primary) / 0.06);
  border-left: 3.5px solid hsl(var(--primary));
  border-radius: 0 8px 8px 0;
}

.cal-section-divider .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 580px) {
  .cal-detail-grid {
    grid-template-columns: 1fr;
  }
}

.cal-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  min-width: 0;
  transition: border-color 0.15s ease;
}

.cal-detail-item:hover {
  border-color: hsl(var(--primary) / 0.35);
}

.cal-detail-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border) / 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cal-detail-item-label {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 2px;
  line-height: 1.2;
}

.cal-detail-item-value {
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cal-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid hsl(var(--border));
}

/* ==========================================
   ENTITY CARDS — Empresas & Clientes CRUD
   ========================================== */

.entity-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.entity-stat-mini {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--card-shadow);
}

.entity-stat-mini .esi {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.entity-stat-mini .esv {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.entity-stat-mini .esl {
  font-size: 11.5px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-top: 1px;
}

/* Entity Card */
.entity-card {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  position: relative;
}

.entity-card:hover {
  box-shadow: 0 8px 28px hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary) / 0.25);
  transform: translateY(-2px);
}

.entity-card-header {
  padding: 16px 18px 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.entity-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
}

.entity-card-info {
  flex: 1;
  min-width: 0;
}

.entity-card-name {
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.15s;
}

.entity-card-name:hover {
  color: hsl(var(--primary));
}

.entity-card-doc {
  font-size: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

.entity-card-body {
  padding: 0 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.entity-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
}

.entity-detail-row svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.entity-detail-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action Footer */
.entity-card-actions {
  display: flex;
  border-top: 1.5px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
}

.entity-card-actions .eca-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid hsl(var(--border));
}

.entity-card-actions .eca-btn:last-child {
  border-right: none;
}

.entity-card-actions .eca-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--primary));
}

.entity-card-actions .eca-btn.eca-danger:hover {
  background: hsl(var(--destructive) / 0.08);
  color: hsl(var(--destructive));
}

/* View toggle */
.view-toggle {
  display: inline-flex;
  background: hsl(var(--muted));
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.view-toggle button {
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}

.view-toggle button.active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.08);
}

@media (width <=768px) {
  .entity-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .entity-stat-mini {
    padding: 10px 12px;
  }

  .entity-stat-mini .esv {
    font-size: 16px;
  }
}

/* ======================================================================
   AUTH SCREEN — Login / Configuração Inicial (tipos de conta)
====================================================================== */
.boot-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: hsl(var(--background));
  position: relative;
  z-index: 80;
}

.boot-loader-card {
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  font-weight: 500;
}

.auth-screen-wrap {
  display: none;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: hsl(var(--background));
  background-image: url('../assets/login.png');
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}

/* ---- Efeito cinematográfico: vinheta escura nas bordas ---- */
.auth-screen-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 46%, transparent 40%, hsl(220 45% 6% / 0.55) 100%),
    linear-gradient(180deg, hsl(220 45% 4% / 0.55) 0%, transparent 20%, transparent 78%, hsl(220 45% 4% / 0.6) 100%),
    linear-gradient(90deg, hsl(220 45% 4% / 0.35) 0%, transparent 16%, transparent 84%, hsl(220 45% 4% / 0.35) 100%);
}

/* uma única tela sem costura: nada de fundos separados por coluna */
.auth-split {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 24px;
}

/* ---- Texto institucional removido — só a foto e o card aparecem ---- */
.auth-visual-content {
  display: none;
}

/* ---- Card de login, centralizado na tela, translúcido sobre a foto ---- */
.auth-form-side {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: hsl(var(--card) / 0.34);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  border: 1px solid hsl(0 0% 100% / 0.4);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  padding: 32px 28px 28px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 22px;
}

.auth-brand h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 2px 0 2px;
}

.auth-error {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  margin-top: 10px;
  font-weight: 600;
}

html.dark .auth-card {
  background: hsl(220 25% 10% / 0.34);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
}

.auth-card input[type="password"]:-webkit-autofill,
.auth-card input[type="password"]:-webkit-autofill:hover,
.auth-card input[type="password"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill,
input[type="password"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  caret-color: hsl(var(--foreground));
  transition: background-color 9999s ease-out 0s;
}

@media (width <=900px) {
  .auth-screen-wrap {
    background-position: 22% 60%;
  }

  .auth-split {
    padding: 20px;
    align-items: center;
  }
}

@media (width <=600px) {
  .auth-screen-wrap {
    background-position: 12% 58%;
    background-attachment: scroll;
  }

  .auth-split {
    min-height: 100dvh;
    padding: 16px;
  }

  .auth-card {
    max-width: 100%;
    padding: 24px 18px 20px;
  }
}

@media (width <=480px) {
  .auth-screen-wrap {
    background-position: 4% 58%;
  }

  .auth-card {
    padding: 22px 16px 18px;
  }

  .auth-brand .logo-mark {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .auth-brand h3 {
    font-size: 15.5px;
  }
}

/* ============================================================
   MELHORIAS — TABELAS COM BORDAS FORTES + ÍCONES REFINADOS
   (Bloco adicionado para reforçar divisórias, espaçamentos e
   consistência visual dos ícones em todo o sistema)
============================================================ */

/* ---- Tabelas: moldura externa mais forte com faixa azul padronizada ---- */
.table-wrap {
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.06);
}

.month-group-card .table-wrap,
#modalBox .table-wrap {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html.dark .table-wrap {
  box-shadow: 0 2px 10px rgb(0, 0, 0, 0.35);
}

/* ---- Cabeçalho com divisórias verticais nítidas ---- */
table thead th {
  background: hsl(var(--table-header-bg));
  border-bottom: 2px solid hsl(var(--table-border-strong));
  border-right: 1px solid hsl(var(--table-border));
  padding: 13px 15px;
  font-size: 10.5px;
  letter-spacing: .08em;
}

table thead th:last-child {
  border-right: none;
}

/* ---- Corpo da tabela: divisórias verticais e horizontais em todas as células ---- */
table tbody td {
  padding: 13px 15px;
  border-top: 1px solid hsl(var(--table-border));
  border-right: 1px solid hsl(var(--table-border) / 0.7);
}

table tbody td:last-child {
  border-right: none;
}

table tbody tr:last-child td {
  border-bottom: none;
}

/* Linha zebrada sutil para reforçar a leitura das divisões */
table tbody tr:nth-child(even) {
  background: hsl(var(--muted) / 0.28);
}

table tbody tr:hover {
  background: hsl(var(--accent) / 0.55) !important;
}

html.dark table tbody tr:nth-child(even) {
  background: hsl(0 0% 100% / 0.025);
}

html.dark table thead th {
  border-right: 1px solid hsl(var(--table-border));
  border-bottom: 2px solid hsl(var(--table-border-strong));
}

html.dark table tbody td {
  border-top: 1px solid hsl(var(--table-border));
  border-right: 1px solid hsl(var(--table-border) / 0.6);
}

/* ---- Tabela de Auditoria (mesma lógica de bordas fortes) ---- */
.auditoria-table-wrap table thead th,
.auditoria-table-wrap table tbody td {
  border-right: 1px solid hsl(var(--table-border));
}

/* ---- Cards de mês (agrupamento) também recebem moldura reforçada ---- */
.month-group-card .table-wrap {
  border: 2px solid hsl(var(--table-border-strong));
}

/* ============================================================
   ÍCONES — TAMANHO, ESPAÇAMENTO E CONSISTÊNCIA VISUAL
============================================================ */

/* ---- Botões de ícone padrão (topbar, cabeçalhos, filtros) ---- */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid hsl(var(--icon-border));
  box-shadow: 0 1px 2px rgb(0, 0, 0, 0.04);
}

.icon-btn svg,
.icon-btn i {
  font-size: 15px;
  width: 16px;
  height: 16px;
}

.icon-btn:hover {
  border-color: hsl(var(--ring) / 0.45);
  box-shadow: 0 2px 6px rgb(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.95) translateY(0);
}

/* Espaçamento entre grupos de ícones no topo */
.topbar-actions {
  gap: 18px;
}

/* ---- Ícones de ação dentro das tabelas (editar, excluir, ver) ---- */
.row-actions {
  gap: 6px;
}

.row-actions .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid hsl(var(--icon-border) / 0.6);
  background: hsl(var(--muted) / 0.4);
  opacity: 0.75;
}

.row-actions .icon-btn svg,
.row-actions .icon-btn i {
  font-size: 13px;
}

tbody tr:hover .row-actions .icon-btn {
  opacity: 1;
}

.row-actions .icon-btn:hover {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
  transform: translateY(-1px);
}

/* Em telas de toque (mobile/tablet) os ícones de ação ficam sempre visíveis,
   já que não existe estado de hover confiável */
@media (hover: none) {
  .row-actions .icon-btn {
    opacity: 0.9;
  }
}

/* ---- Ícones de estatística (dashboard) com moldura sutil ---- */
.stat-icon {
  border: 1px solid hsl(var(--icon-border) / 0.5);
  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.05);
}

/* ---- Ícones de atividade recente ---- */
.activity-icon {
  border: 1px solid hsl(var(--icon-border) / 0.4);
}

.activity-row {
  border-bottom: 1px solid hsl(var(--table-border) / 0.5);
  border-radius: 0;
  padding: 12px 6px;
}

.activity-row:last-child {
  border-bottom: none;
}

/* ---- Botões pequenos apenas com ícone (usados em toolbars) ---- */
.btn-sm.btn-icon-only {
  border: 1px solid hsl(var(--icon-border));
}

/* ---- Espaçamento geral extra entre seções de filtro acima das tabelas ---- */
.filter-bar {
  margin-bottom: 14px;
  gap: 10px;
}

/* ---- Responsivo: mantém divisórias visíveis mesmo com scroll horizontal ---- */
@media (width <=820px) {
  .table-wrap {
    border-width: 1.5px;
  }
}

/* ============================================================
   ÍCONES — CORREÇÃO GLOBAL (traço fraco em TODO o sistema)
   Os ícones são SVGs inline gerados via JS com stroke-width="2".
   O atributo de apresentação do SVG tem prioridade menor que CSS,
   então a regra abaixo reforça o traço de TODOS os ícones do app
   (menu, botões, tabelas, cards, badges, estados vazios etc.)
   sem precisar alterar cada chamada individualmente.
============================================================ */
svg[stroke="currentColor"] {
  stroke-width: 2.35;
  vertical-align: middle;
  display: block;
  flex-shrink: 0;
}

/* Botões: ícone um pouco maior e melhor alinhado ao texto */
.btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}

/* Navegação lateral: ícones mais nítidos */
.nav-item svg,
.bn-item svg {
  stroke-width: 2.2;
}

/* ---- Ícone do estado vazio: agora com fundo circular colorido
   em vez de um traço solto e apagado no meio do card ---- */
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.18);
}

.empty-state-icon svg {
  stroke-width: 2.1;
  opacity: 1;
}

/* remove o estilo antigo (svg solto, opaco) caso ainda apareça sem o wrapper */
.empty-state>svg {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  opacity: .7;
  color: hsl(var(--primary));
}

/* ============================================================
   REDESIGN — CARDS MÓVEIS, CALENDÁRIO E VÍNCULO EMISSÃO/PAGAMENTO
   (bordas mais fortes em .mcard e .cal-day, nova cor "emitida"
   separada de "paga", e badge combinado quando os dois eventos
   caem no mesmo dia)
============================================================ */

/* ---- Cards mobile (mcard): moldura e sombra reforçadas ---- */
.mcard {
  border: 2px solid hsl(var(--table-border-strong));
  box-shadow: var(--card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mcard:active {
  border-color: hsl(var(--ring) / 0.5);
}

/* ---- Dias do calendário: moldura mais forte e hover mais nítido ---- */
.cal-day {
  border: 2px solid hsl(var(--table-border-strong));
}

.cal-day:hover {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.cal-day.cal-today {
  border: 2px solid hsl(var(--foreground));
}

.cal-day.has-events {
  border-color: hsl(var(--table-border-strong));
}

/* (pílulas de contagem por dia agora ficam em .cal-count-pill, ver acima) */

/* ---- Divisor de seção "Emissões" no modal do dia (mesma linguagem
   visual dos outros divisores: Vencimentos, Pagamentos, Cancelamentos) ---- */
.cal-section-divider .dot.dot-emit {
  background: hsl(var(--emitida));
}

/* ---- Selo "Emitida e paga no mesmo dia" dentro do card de nota do modal ---- */
.nf-vinculo-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(90deg, hsl(var(--emitida)) 0%, hsl(142 71% 40%) 100%);
  box-shadow: 0 1px 4px hsl(var(--emitida) / 0.3);
  white-space: nowrap;
}

/* ---- Coluna "Emissão" em tabelas de notas ---- */
.col-emissao {
  color: hsl(var(--emitida));
  font-weight: 500;
}

/* ============================================================
   CALENDAR LEGEND — linha única compacta, quebra em telas
   pequenas. Reorganizado para não competir por espaço com o
   filtro de status no topo do calendário.
============================================================ */
.cal-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  padding-top: 8px;
  border-top: 1px solid hsl(var(--border));
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.cal-legend-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

@media (width <=640px) {
  .cal-legend {
    gap: 10px;
    font-size: 11px;
  }
}

/* ============================================================
   REFACTOR PATCH — novos elementos do index.html reestruturado
   e melhorias gerais de layout, responsividade e acessibilidade
   (Adicionado na revisão estrutural de 2026-08-12)
============================================================ */

/* ---- Boot loader logo mark variant ---- */
.logo-mark--boot {
  width: 52px;
  height: 52px;
  font-size: 20px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
  font-weight: 800;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Sidebar logo variants ---- */
.sidebar-head .logo-mark {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.logo-text {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}

.logo-text-sub {
  font-size: 10px;
  text-transform: uppercase;
  color: #2563eb;
  display: block;
  margin-top: -2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- Topbar layout: left group (hamburger + search) ---- */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.topbar-period-wrap {
  display: flex;
  align-items: center;
  margin-right: 6px;
  min-width: 0;
  /* allows the pill inside to shrink below its natural width */
  flex-shrink: 1;
}

/* ---- Searchbox: FA icon instead of inline SVG ---- */
.searchbox-icon {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* ---- Mobile hamburger — hidden on desktop ---- */
.mobile-menu-btn {
  display: none;
  flex-shrink: 0;
}

/* ---- FontAwesome icon sizing in icon-btns ---- */
.icon-btn i,
.icon-btn .fa-solid,
.icon-btn .fa-regular {
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Collapse button: FA icon ---- */
.collapse-btn-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* ---- Sidebar overlay: restore z-index and background ---- */
#sidebarOverlay {
  z-index: 39;
  background: rgba(0, 0, 0, 0.45);
}

/* ---- FA icons in buttons ---- */
.btn i,
.btn .fa-solid,
.btn .fa-regular {
  font-size: 13px;
  flex-shrink: 0;
}

.btn-sm i,
.btn-sm .fa-solid {
  font-size: 12px;
}

/* ---- Nav items: support both SVG and FA icons ---- */
.nav-item i,
.nav-item .fa-solid {
  font-size: 16px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   MOBILE RESPONSIVE — sidebar as drawer with overlay
   (replaces the hard display:none on mobile with a slide-in)
============================================================ */

@media (width <=820px) {

  /* Hide hamburger button & sidebar drawer — mobile relies strictly on bottom-nav */
  .mobile-menu-btn {
    display: none !important;
  }

  .sidebar {
    display: none !important;
  }

  #sidebarOverlay {
    display: none !important;
  }

  /* Topbar: tighter padding on mobile */
  .topbar {
    padding: 0 14px;
    gap: 8px;
  }

  /* Searchbox shrinks on mobile */
  .searchbox {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  /* topbar-left allows inner items to shrink */
  .topbar-left {
    min-width: 0;
    flex-shrink: 1;
  }
}

/* On screens too narrow for the full searchbox, turn it into an icon-only button */
@media (width <=480px) {
  .searchbox {
    width: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
  }

  /* Hide the placeholder text and kbd shortcut hint on very small screens */
  .searchbox>span,
  .searchbox kbd,
  .searchbox>svg+span {
    display: none;
  }

  /* Center the search icon */
  .searchbox svg,
  .searchbox .searchbox-icon {
    margin: 0;
    flex-shrink: 0;
  }

  .topbar {
    padding: 0 12px;
    gap: 6px;
  }
}

/* Extra safety net: if topbar still overflows at any width, clamp the actions */
@media (width <=360px) {
  .topbar-actions {
    gap: 10px;
  }

  .topbar-period-pill {
    display: none;
  }
}

/* ============================================================
   ACCESSIBILITY — focus-visible improvements
============================================================ */

/* Make focused interactive elements more visible */
.nav-item:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.collapse-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ============================================================
   PERFORMANCE — reduce motion for users who prefer it
============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   DARK MODE — sidebar drawer on mobile
============================================================ */
html.dark .sidebar.mobile-open {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   PRINT — hide chrome, show content only
============================================================ */
@media print {

  .sidebar,
  .topbar,
  .bottom-nav,
  #toast-wrap,
  .page-actions,
  .filter-bar,
  .pagination-wrap {
    display: none !important;
  }

  .main-wrap {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .content {
    padding: 0 !important;
  }
}

/* ============================================================
   CALENDAR — View Mode Filter Chips
============================================================ */
.filter-preset-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.filter-preset-chip:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  border-color: hsl(var(--primary)/0.4);
}

.filter-preset-chip.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  box-shadow: 0 2px 8px hsl(var(--primary)/0.3);
}

/* ============================================================
   TOPBAR — Bell / Notification Badge spacing fix
============================================================ */
.bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-bell-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(45%, -45%);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 99px;
  background: hsl(0 84% 60%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid hsl(var(--card));
  pointer-events: none;
  z-index: 5;
  line-height: 1;
}

/* O badge fica fora dos limites do botão: garante que nada o recorte */
.bell-wrap,
.bell-wrap > button,
#alertBellBtn {
  overflow: visible;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

/* ============================================================
   CALENDAR DAY PILLS — Updated dot colours for Baixas
============================================================ */
.cal-count-baixa {
  background: hsl(172 60% 42%);
  color: #fff;
}

/* ============================================================
   Boot Loader
============================================================ */
.boot-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: hsl(var(--background));
}

.boot-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

.logo-mark--boot {
  width: 56px;
  height: 56px;
  font-size: 22px;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* ============================================================
   MODAIS MAIORES, DESIGN ARREDONDADO E LISTAGENS COM TOGGLE
============================================================ */

/* ---- Modais: mais largos, mais altos e mais arredondados ---- */
.modal {
  max-width: 720px;
  max-height: 92vh;
  border-radius: 22px;
}

.modal-lg {
  max-width: 1040px;
}

.modal-head {
  padding: 18px 24px;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.modal-body {
  padding: 22px 24px;
  min-height: 120px;
}

.modal-foot {
  padding: 16px 24px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

@media (min-width: 900px) {
  .modal-body {
    min-height: 180px;
  }
}

@media (max-width: 720px) {
  .modal,
  .modal-lg,
  .modal-xl,
  #modalBox {
    max-width: 100% !important;
    border-radius: 16px !important;
    margin: auto !important;
  }
}

/* ---- Conteúdo das abas: aparência arredondada e suave ---- */
.card,
.table-wrap,
.month-group-card,
.cal-modal-card,
.mcard,
.filters,
.stat-card,
.chart-card {
  border-radius: 20px;
}

.card {
  padding: 22px;
}

.table-wrap {
  overflow: hidden;
  width: 100%;
}

.month-group-card .table-wrap {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* ---- Listagens colapsáveis (toggle) ---- */
details.month-group-card>summary,
details.nf-toggle-card>summary {
  cursor: pointer;
  list-style: none;
}

details.month-group-card>summary::-webkit-details-marker,
details.nf-toggle-card>summary::-webkit-details-marker {
  display: none;
}

.month-group-head {
  border-radius: 20px 20px 0 0;
}

details.month-group-card:not([open])>.month-group-head {
  border-bottom: none;
  border-radius: 20px;
}

.nf-toggle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: transform .2s ease;
}

details[open]>summary .nf-toggle-chevron {
  transform: rotate(180deg);
}

/* ---- Cartões de NF com toggle ---- */
.nf-toggle-card {
  padding: 0;
  overflow: hidden;
}

.nf-toggle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
}

.nf-toggle-card[open] .nf-toggle-summary {
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.28);
}

.nf-toggle-content {
  padding: 16px 18px 18px;
}

.nf-toggle-content>div:last-child {
  margin-bottom: 0;
}

/* ---- Filtros: layout mais respirado ---- */
.filters {
  padding: 16px 18px;
  gap: 12px;
}

/* ============================================================
   TABELAS COMPACTAS E ORGANIZADAS — SEM CORTAR INFORMAÇÕES
============================================================ */
.table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: auto !important;
}

table thead th {
  padding: 7px 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground));
  border-bottom: 1.5px solid hsl(var(--border));
  white-space: nowrap !important;
}

table tbody td {
  padding: 6px 10px !important;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  vertical-align: middle;
  white-space: nowrap !important;
  font-size: 11.5px !important;
}

table tbody tr:hover {
  background: hsl(var(--accent) / 0.4);
}

.sidebar:not(.collapsed)~.main-wrap table {
  font-size: 11px !important;
}

.sidebar:not(.collapsed)~.main-wrap table thead th,
.sidebar:not(.collapsed)~.main-wrap table tbody td {
  padding: 5px 8px !important;
}

/* ============================================================
    NF DETAIL CARD — card de nota fiscal organizado em três
    linhas: título, dados e ações. Usado no preview modal,
    no modal do calendário e nos cards mobile.
============================================================ */

.nf-detail-card {
  background: hsl(var(--card));
  border: 2px solid hsl(var(--table-border-strong));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nf-detail-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.nf-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
}

.nf-detail-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.nf-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: hsl(var(--accent));
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nf-detail-title-group {
  min-width: 0;
}

.nf-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nf-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
}

.nf-detail-series {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.8);
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid hsl(var(--border));
}

.nf-detail-subtitle {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nf-detail-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nf-detail-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

.nf-detail-status {
  flex-shrink: 0;
}

.nf-detail-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: transform .2s ease;
}

.nf-detail-card[open] .nf-detail-chevron {
  transform: rotate(180deg);
}

.nf-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid hsl(var(--border));
}

.nf-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.nf-detail-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nf-detail-item-icon.emitida {
  color: hsl(var(--emitida));
  border-color: hsl(var(--emitida) / 0.3);
}

.nf-detail-item-icon.paga {
  color: hsl(142 71% 40%);
  border-color: hsl(142 71% 40% / 0.3);
}

.nf-detail-item-label {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  line-height: 1.3;
}

.nf-detail-item-value {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.35;
  word-break: break-word;
}

.nf-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  flex-wrap: wrap;
}

.nf-detail-actions .btn {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
}

.nf-detail-actions .btn-destructive {
  padding: 8px 12px;
}

/* ---- Variante compacta para mobile cards ---- */
.mcard .nf-detail-grid {
  grid-template-columns: repeat(2, 1fr);
  padding: 14px 16px;
  border-bottom: 1px solid hsl(var(--border));
}

.mcard .nf-detail-actions {
  padding: 12px 16px;
}

/* ---- Modais de preview mais confortáveis ---- */
.modal.modal-lg .nf-detail-card {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.modal.modal-lg .nf-detail-head {
  border-radius: 16px;
  margin-bottom: 16px;
  border: 2px solid hsl(var(--table-border-strong));
}

.modal.modal-lg .nf-detail-grid {
  border: none;
  padding: 0 0 16px;
}

.modal.modal-lg .nf-detail-actions {
  padding: 16px 0 0;
  border-top: 1px solid hsl(var(--border));
}

@media (max-width: 900px) {
  .nf-detail-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .nf-detail-head-right {
    width: 100%;
    justify-content: space-between;
  }

  .nf-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .nf-detail-grid {
    grid-template-columns: 1fr;
  }

  .nf-detail-actions {
    justify-content: stretch;
  }

  .nf-detail-actions .btn {
    flex: 1;
  }
}

/* ============================================================
   CORREÇÃO GLOBAL DE TABELAS (IMAGEM 1 - ESTRUTURA SEM ESTOURAR)
   ============================================================ */
.table-wrap table {
  width: 100%;
  table-layout: auto !important;
  border-collapse: collapse;
}

.table-wrap td,
.table-wrap th {
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.table-wrap td.mono,
.table-wrap td .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: -0.02em;
}

.table-wrap td select.badge,
.table-wrap td select {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.table-wrap td input,
.table-wrap td .badge {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ============================================================
   CARTÃO OFICIAL DE NOTA FISCAL CORPORATIVO (EMBALAGENS TATUÍ)
   ============================================================ */
/* ============================================================
   CARTÃO OFICIAL DE NOTA FISCAL CORPORATIVO - LIGHT THEME (IMAGEM 2)
   ============================================================ */
.nf-official-card-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.nf-official-card {
  position: relative;
  z-index: 2;
  width: 100%;
  background: linear-gradient(145deg,
      rgba(219, 234, 254, 0.55) 0%,
      rgba(191, 219, 254, 0.38) 50%,
      rgba(147, 197, 253, 0.22) 100%);
  border-radius: 20px;
  padding: 20px 22px 16px;
  color: hsl(var(--foreground));
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(37, 99, 235, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 215px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html.dark .nf-official-card {
  background: linear-gradient(145deg,
      rgba(30, 58, 138, 0.28) 0%,
      rgba(29, 78, 216, 0.18) 50%,
      rgba(37, 99, 235, 0.10) 100%);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
}

.nf-official-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(37, 99, 235, 0.45);
}

.nf-official-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.nf-official-brand-box {
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.nf-official-brand-box img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.nf-official-status {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nf-official-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 12px;
}

.nf-official-info-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.nf-official-doc-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2563eb;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nf-official-number {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  margin: 1px 0;
}

.nf-official-value {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #1e3a8a;
  margin: 2px 0 4px;
}

html.dark .nf-official-value {
  color: #60a5fa;
}

.nf-official-meta-row {
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-official-meta-row b {
  color: hsl(var(--foreground));
}

.nf-official-icon-wrapper {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
  flex-shrink: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.nf-official-card:hover .nf-official-icon-wrapper {
  transform: scale(1.05);
}

.nf-3d-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  transform: scale(1.24);
  /* Trims out outer black border to show ONLY the blue squircle icon */
}

.nf-official-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid hsl(var(--border));
  margin-top: 2px;
}

.nf-card-nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nf-card-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nf-card-nav-btn:hover {
  background: hsl(var(--accent));
  border-color: #2563eb;
  color: #2563eb;
}

.nf-card-counter {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.nf-card-history-link {
  font-size: 11.5px;
  font-weight: 700;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.nf-card-history-link:hover {
  color: #1d4ed8;
}

/* Modal Expandido para Histórico */
.modal.modal-xl {
  max-width: 1100px !important;
  width: 94vw !important;
}

.nf-history-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

.nf-history-table-wrap table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.nf-history-table-wrap th,
.nf-history-table-wrap td {
  padding: 12px 16px !important;
  white-space: nowrap !important;
}

/* ============================================================
   KPI CARDS & DASHBOARD COHESIVE THEME (CORES HARMONIZADAS)
   ============================================================ */
.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 18px 20px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

.kpi-card.kpi-blue {
  border-top: 3px solid #2563eb;
  background: linear-gradient(135deg, hsl(var(--card)) 0%, rgba(37, 99, 235, 0.06) 100%);
}

.kpi-card.kpi-green {
  border-top: 3px solid #16a34a;
  background: linear-gradient(135deg, hsl(var(--card)) 0%, rgba(22, 163, 74, 0.06) 100%);
}

.kpi-card.kpi-purple {
  border-top: 3px solid #9333ea;
  background: linear-gradient(135deg, hsl(var(--card)) 0%, rgba(147, 51, 234, 0.06) 100%);
}

.kpi-card.kpi-orange {
  border-top: 3px solid #ea580c;
  background: linear-gradient(135deg, hsl(var(--card)) 0%, rgba(234, 88, 12, 0.06) 100%);
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kpi-icon-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.kpi-label {
  font-size: 13px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.kpi-trend {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
}

.kpi-trend.up {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.kpi-trend.down {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.kpi-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  margin-top: 10px;
}

.kpi-sub {
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
  font-weight: 500;
}

/* ======================================================================
   TABELAS COMPACTAS E INTELIGENTES (2026-08-18)
   Aplica-se apenas às tabelas da interface (#content e modais).
   O gerador de PDF (.tcpdf-*) NÃO é afetado.
====================================================================== */
#content .table-wrap,
#modalBox .table-wrap {
  border: 1.5px solid hsl(var(--table-border-strong));
  border-radius: 10px;
  overflow: auto;
}

#content .table-wrap table:not(.tcpdf-table),
#modalBox .table-wrap table:not(.tcpdf-table) {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 11.5px;
  line-height: 1.25;
}

/* --- Cabeçalho: menor, denso e com borda forte --- */
#content .table-wrap table:not(.tcpdf-table) thead th,
#modalBox .table-wrap table:not(.tcpdf-table) thead th {
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  background: hsl(var(--table-header-bg));
  border-bottom: 2px solid hsl(var(--table-border-strong));
  border-right: 1px solid hsl(var(--table-border-strong));
}

#content .table-wrap table:not(.tcpdf-table) thead th:last-child,
#modalBox .table-wrap table:not(.tcpdf-table) thead th:last-child {
  border-right: 0;
}

/* --- Corpo: linhas mais baixas, fonte menor, grades visíveis --- */
#content .table-wrap table:not(.tcpdf-table) tbody td,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td {
  padding: 5px 8px;
  height: auto;
  font-size: 11.5px;
  line-height: 1.25;
  vertical-align: middle;
  border-bottom: 1px solid hsl(var(--table-border-strong));
  border-right: 1px solid hsl(var(--table-border));
  /* quebra inteligente: só quebra quando não há espaço */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

#content .table-wrap table:not(.tcpdf-table) tbody td:last-child,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td:last-child {
  border-right: 0;
}

#content .table-wrap table:not(.tcpdf-table) tbody tr:last-child td,
#modalBox .table-wrap table:not(.tcpdf-table) tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Colunas que nunca devem quebrar (valores, datas, códigos, ações) --- */
#content .table-wrap table:not(.tcpdf-table) td .mono,
#content .table-wrap table:not(.tcpdf-table) td.mono,
#content .table-wrap table:not(.tcpdf-table) td .money,
#content .table-wrap table:not(.tcpdf-table) td .badge,
#content .table-wrap table:not(.tcpdf-table) td .row-actions,
#modalBox .table-wrap table:not(.tcpdf-table) td .mono {
  white-space: nowrap;
  overflow-wrap: normal;
}

#content .table-wrap table:not(.tcpdf-table) td .mono,
#content .table-wrap table:not(.tcpdf-table) td.mono {
  font-size: 11px;
}

#content .table-wrap table:not(.tcpdf-table) td .badge,
#content .table-wrap table:not(.tcpdf-table) td select.badge {
  font-size: 10px;
  padding: 2px 6px;
  line-height: 1.2;
}

/* --- Nome/descrição: limita largura e reticencia em 2 linhas --- */
#content .table-wrap table:not(.tcpdf-table) tbody td .cell-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Botões de ação menores para acompanhar a altura reduzida --- */
#content .table-wrap table:not(.tcpdf-table) td .row-actions .icon-btn,
#content .table-wrap table:not(.tcpdf-table) td .icon-btn.btn-sm {
  width: 26px;
  height: 26px;
  padding: 0;
}

#content .table-wrap table:not(.tcpdf-table) td .row-actions {
  gap: 4px;
}

/* --- Zebra sutil ajuda a leitura em linhas baixas --- */
#content .table-wrap table:not(.tcpdf-table) tbody tr:nth-child(even) {
  background: hsl(var(--muted) / 0.35);
}

/* --- Telas menores: mais compacto ainda --- */
@media (max-width: 768px) {
  #content .table-wrap table:not(.tcpdf-table) {
    font-size: 11px;
  }

  #content .table-wrap table:not(.tcpdf-table) thead th {
    font-size: 9.5px;
    padding: 5px 6px;
  }

  #content .table-wrap table:not(.tcpdf-table) tbody td {
    padding: 4px 6px;
    font-size: 11px;
  }
}

/* ======================================================================
   TABELAS: AJUSTE FINAL (2026-08-18) — SEM ROLAGEM HORIZONTAL
   Objetivo: ver a tabela inteira na tela.
   - quebra de texto em qualquer célula (nada de nowrap)
   - table-layout: fixed  -> larguras calculadas dentro dos 100%
   - linhas mais baixas, fonte menor, bordas mais fortes
   Este bloco vem por ULTIMO de proposito: ele vence os !important antigos.
   O gerador de PDF (.tcpdf-*) NAO é afetado.
====================================================================== */
#content .table-wrap,
#modalBox .table-wrap,
.month-group-card .table-wrap,
.nf-history-table-wrap {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 2px solid hsl(var(--table-border-strong)) !important;
  border-radius: 12px;
  background: hsl(var(--card));
}

#content .table-wrap table:not(.tcpdf-table),
#modalBox .table-wrap table:not(.tcpdf-table),
.month-group-card .table-wrap table:not(.tcpdf-table),
.nf-history-table-wrap table:not(.tcpdf-table) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: var(--tbl-font, 11px) !important;
  line-height: 1.2 !important;
}

/* --- Cabeçalho compacto, quebra de texto e borda forte --- */
#content .table-wrap table:not(.tcpdf-table) thead th,
#modalBox .table-wrap table:not(.tcpdf-table) thead th,
.month-group-card .table-wrap table:not(.tcpdf-table) thead th,
.nf-history-table-wrap table:not(.tcpdf-table) thead th {
  padding: 5px 6px !important;
  font-size: calc(var(--tbl-font, 11px) - 1.5px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto;
  text-overflow: clip !important;
  overflow: hidden !important;
  max-width: none !important;
  background: hsl(var(--table-header-bg));
  border-bottom: 2px solid hsl(var(--table-border-strong)) !important;
  border-right: 1.5px solid hsl(var(--table-border-strong)) !important;
}

/* --- Corpo: altura de linha reduzida + quebra de texto --- */
#content .table-wrap table:not(.tcpdf-table) tbody td,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td,
.month-group-card .table-wrap table:not(.tcpdf-table) tbody td,
.nf-history-table-wrap table:not(.tcpdf-table) tbody td {
  padding: 3px 6px !important;
  height: auto !important;
  font-size: var(--tbl-font, 11px) !important;
  line-height: 1.2 !important;
  vertical-align: middle;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto;
  text-overflow: clip !important;
  overflow: hidden !important;
  max-width: none !important;
  border-bottom: 1.5px solid hsl(var(--table-border-strong)) !important;
  border-right: 1.5px solid hsl(var(--table-border-strong)) !important;
}

#content .table-wrap table:not(.tcpdf-table) thead th:last-child,
#content .table-wrap table:not(.tcpdf-table) tbody td:last-child,
#modalBox .table-wrap table:not(.tcpdf-table) thead th:last-child,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td:last-child,
.month-group-card .table-wrap table:not(.tcpdf-table) thead th:last-child,
.month-group-card .table-wrap table:not(.tcpdf-table) tbody td:last-child,
.nf-history-table-wrap table:not(.tcpdf-table) thead th:last-child,
.nf-history-table-wrap table:not(.tcpdf-table) tbody td:last-child {
  border-right: 0 !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody tr:last-child td,
#modalBox .table-wrap table:not(.tcpdf-table) tbody tr:last-child td,
.month-group-card .table-wrap table:not(.tcpdf-table) tbody tr:last-child td,
.nf-history-table-wrap table:not(.tcpdf-table) tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Nada dentro da célula pode forçar largura mínima */
#content .table-wrap table:not(.tcpdf-table) td>*,
#modalBox .table-wrap table:not(.tcpdf-table) td>* {
  max-width: 100% !important;
  min-width: 0 !important;
}

#content .table-wrap table:not(.tcpdf-table) td select:not(.badge),
#content .table-wrap table:not(.tcpdf-table) td input,
#modalBox .table-wrap table:not(.tcpdf-table) td select:not(.badge) {
  width: 100% !important;
  min-width: 0 !important;
  font-size: calc(var(--tbl-font, 11px) - 1px) !important;
  padding: 2px 4px !important;
}

#content .table-wrap table:not(.tcpdf-table) td .badge,
#content .table-wrap table:not(.tcpdf-table) td select.badge,
#modalBox .table-wrap table:not(.tcpdf-table) td .badge,
#modalBox .table-wrap table:not(.tcpdf-table) td select.badge {
  font-size: 10px !important;
  padding: 1px 6px !important;
  line-height: 1.15 !important;
  width: auto !important;
  min-width: 65px !important;
  max-width: 80px !important;
  height: 21px !important;
  text-align: center !important;
  text-align-last: center !important;
  margin: 0 auto !important;
  display: inline-block !important;
}

/* Valores, datas e ações continuam em uma linha só (curtos) */
#content .table-wrap table:not(.tcpdf-table) td .mono,
#content .table-wrap table:not(.tcpdf-table) td.mono,
#content .table-wrap table:not(.tcpdf-table) td .money,
#content .table-wrap table:not(.tcpdf-table) td .row-actions {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  font-size: calc(var(--tbl-font, 11px) - 0.5px) !important;
}

#content .table-wrap table:not(.tcpdf-table) td .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
}

#content .table-wrap table:not(.tcpdf-table) td .row-actions .icon-btn,
#content .table-wrap table:not(.tcpdf-table) td .icon-btn.btn-sm {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
}

/* Zebra sutil para leitura em linhas baixas */
#content .table-wrap table:not(.tcpdf-table) tbody tr:nth-child(even) {
  background: hsl(var(--muted) / 0.32);
}

/* O clamp de 2 linhas deixaria info escondida — some com ele */
#content .table-wrap table:not(.tcpdf-table) tbody td .cell-clamp {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Telas pequenas: ainda mais compacto */
@media (max-width: 900px) {
  #content .table-wrap table:not(.tcpdf-table) thead th {
    padding: 4px 4px !important;
  }

  #content .table-wrap table:not(.tcpdf-table) tbody td {
    padding: 3px 4px !important;
  }
}

/* ======================================================================
   TABELAS: ORGANIZAÇÃO FINAL (2026-08-18 v2)
   - títulos SEM quebra no meio da palavra (nada de "AGENDAMEN TO")
   - títulos centralizados
   - fonte e altura de linha ainda menores
   Este bloco é o ultimo do arquivo: vence os !important anteriores.
   O gerador de PDF (.tcpdf-*) NAO é afetado.
====================================================================== */
#content .table-wrap table:not(.tcpdf-table),
#modalBox .table-wrap table:not(.tcpdf-table),
.month-group-card .table-wrap table:not(.tcpdf-table),
.nf-history-table-wrap table:not(.tcpdf-table) {
  font-size: var(--tbl-font, 10px) !important;
  line-height: 1.15 !important;
}

/* --- Cabeçalho: centralizado, compacto, sem quebrar palavra no meio --- */
#content .table-wrap table:not(.tcpdf-table) thead th,
#modalBox .table-wrap table:not(.tcpdf-table) thead th,
.month-group-card .table-wrap table:not(.tcpdf-table) thead th,
.nf-history-table-wrap table:not(.tcpdf-table) thead th {
  padding: 4px 4px !important;
  font-size: var(--tbl-head-font, 9.5px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-overflow: clip !important;
}

/* o conteúdo interno do th também fica centralizado e inteiro */
#content .table-wrap table:not(.tcpdf-table) thead th>*,
#modalBox .table-wrap table:not(.tcpdf-table) thead th>*,
.month-group-card .table-wrap table:not(.tcpdf-table) thead th>*,
.nf-history-table-wrap table:not(.tcpdf-table) thead th>* {
  justify-content: center !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Corpo: linhas bem mais baixas --- */
#content .table-wrap table:not(.tcpdf-table) tbody td,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td,
.month-group-card .table-wrap table:not(.tcpdf-table) tbody td,
.nf-history-table-wrap table:not(.tcpdf-table) tbody td {
  padding: 2px 4px !important;
  font-size: var(--tbl-font, 10px) !important;
  line-height: 1.15 !important;
  vertical-align: middle !important;
}

/* colunas curtas (datas, valores, status) centralizadas para leitura limpa */
#content .table-wrap table:not(.tcpdf-table) tbody td.center,
#content .table-wrap table:not(.tcpdf-table) tbody td.mono,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td.center {
  text-align: center !important;
}

/* elementos internos: nada de altura extra */
#content .table-wrap table:not(.tcpdf-table) tbody td .badge,
#content .table-wrap table:not(.tcpdf-table) tbody td select.badge,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td .badge {
  font-size: calc(var(--tbl-font, 10px) - 1px) !important;
  padding: 1px 4px !important;
  line-height: 1.1 !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody td select,
#content .table-wrap table:not(.tcpdf-table) tbody td input,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td select,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td input {
  font-size: calc(var(--tbl-font, 10px) - 0.5px) !important;
  padding: 1px 3px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.15 !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody td .row-actions,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td .row-actions {
  gap: 2px !important;
  align-items: center !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody td .row-actions .btn,
#content .table-wrap table:not(.tcpdf-table) tbody td .row-actions button,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td .row-actions .btn {
  font-size: calc(var(--tbl-font, 10px) - 1px) !important;
  padding: 2px 6px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.15 !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody td .row-actions .icon-btn,
#content .table-wrap table:not(.tcpdf-table) tbody td .icon-btn,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td .icon-btn {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody td svg,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td svg {
  width: 13px !important;
  height: 13px !important;
}

#content .table-wrap table:not(.tcpdf-table) tbody tr,
#modalBox .table-wrap table:not(.tcpdf-table) tbody tr,
.month-group-card .table-wrap table:not(.tcpdf-table) tbody tr,
.nf-history-table-wrap table:not(.tcpdf-table) tbody tr {
  height: auto !important;
}

@media (max-width: 1100px) {
  #content .table-wrap table:not(.tcpdf-table) thead th {
    padding: 3px 3px !important;
  }

  #content .table-wrap table:not(.tcpdf-table) tbody td {
    padding: 2px 3px !important;
  }
}

/* ============================================================
   MELHORIAS GLOBAIS DE TABELAS, BACKUP E GRÁFICOS — 2026-08
============================================================ */

/* ---- Tabela: truncamento de texto garantido em todas as colunas ---- */
.table-wrap table th,
.table-wrap table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tabela de Auditoria — larguras de colunas ---- */
.auditoria-table-wrap table {
  table-layout: fixed;
}

.auditoria-table-wrap table th:nth-child(1),
.auditoria-table-wrap table td:nth-child(1) {
  width: 7%;
}

.auditoria-table-wrap table th:nth-child(2),
.auditoria-table-wrap table td:nth-child(2) {
  width: 9%;
}

.auditoria-table-wrap table th:nth-child(3),
.auditoria-table-wrap table td:nth-child(3) {
  width: 12%;
}

.auditoria-table-wrap table th:nth-child(4),
.auditoria-table-wrap table td:nth-child(4) {
  width: 42%;
}

.auditoria-table-wrap table th:nth-child(5),
.auditoria-table-wrap table td:nth-child(5) {
  width: 16%;
}

.auditoria-table-wrap table th:nth-child(6),
.auditoria-table-wrap table td:nth-child(6) {
  width: 14%;
}

/* força truncamento mesmo com white-space:normal inline */
.auditoria-table-wrap table td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---- Tabela de Pendentes (Conta 2) — layout compacto com 9 colunas ---- */
.pendentes-table-wrap table {
  table-layout: fixed;
}

.pendentes-table-wrap table th:nth-child(1),
.pendentes-table-wrap table td:nth-child(1) {
  width: 9%;
}

/* Número */
.pendentes-table-wrap table th:nth-child(2),
.pendentes-table-wrap table td:nth-child(2) {
  width: 13%;
}

/* Fornecedor */
.pendentes-table-wrap table th:nth-child(3),
.pendentes-table-wrap table td:nth-child(3) {
  width: 13%;
}

/* Cliente */
.pendentes-table-wrap table th:nth-child(4),
.pendentes-table-wrap table td:nth-child(4) {
  width: 13%;
}

/* Empresa */
.pendentes-table-wrap table th:nth-child(5),
.pendentes-table-wrap table td:nth-child(5) {
  width: 9%;
}

/* Banco */
.pendentes-table-wrap table th:nth-child(6),
.pendentes-table-wrap table td:nth-child(6) {
  width: 9%;
}

/* Valor */
.pendentes-table-wrap table th:nth-child(7),
.pendentes-table-wrap table td:nth-child(7) {
  width: 10%;
}

/* Vencimento */
.pendentes-table-wrap table th:nth-child(8),
.pendentes-table-wrap table td:nth-child(8) {
  width: 10%;
}

/* Status */
.pendentes-table-wrap table th:nth-child(9),
.pendentes-table-wrap table td:nth-child(9) {
  width: 14%;
}

/* Ações */

.pendentes-table-wrap table td,
.pendentes-table-wrap table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pendentes-table-wrap table thead th {
  padding: 10px 10px;
}

.pendentes-table-wrap table tbody td {
  padding: 9px 10px;
}

.pendentes-table-wrap td select.badge,
.pendentes-table-wrap td .badge {
  min-width: 68px !important;
  max-width: 95px !important;
  font-size: 10px !important;
  padding: 0 5px !important;
  height: 22px !important;
}

/* ---- Backup: cabeçalho estruturado ---- */
.backup-card-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.backup-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.backup-card-desc {
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  margin: 0;
}

.backup-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.backup-history-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 12.5px;
}

.backup-history-item:last-child {
  border-bottom: none;
}

/* ---- Gráfico "Principais Empresas" — impede overflow de labels ---- */
.chart-box {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

#chartTop {
  max-width: 100%;
}

/* ---- Tooltip em células truncadas ---- */
td[title] {
  cursor: default;
}

/* ============================================================
   MELHORIAS DE GRÁFICOS, MODAIS, CARDS E TABELAS — 2026-08
============================================================ */

/* ---- 1. Gráficos: altura padronizada e sem espaços em branco ---- */
.dashboard-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}

.dashboard-charts-grid>.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 0;
}

.chart-box {
  position: relative;
  width: 100%;
  height: 210px !important;
  min-height: 170px;
  max-height: 230px;
  overflow: hidden;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-box-flow {
  height: 240px !important;
  max-height: 240px;
}

.chart-box canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Distribuição e Top Empresas alinhados */
.grid.grid-2>.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid.grid-2>.card .chart-box {
  height: 190px !important;
  max-height: 190px !important;
}

/* ---- 2. Botões de Ações da Tabela Sempre Visíveis e Alinhados ---- */
.row-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

.row-actions .icon-btn {
  opacity: 1 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: hsl(var(--muted) / 0.4) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.row-actions .icon-btn:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary) / 0.4) !important;
}

.row-actions .icon-btn:last-child:hover,
.row-actions .icon-btn[title*="lixeira"]:hover,
.row-actions .icon-btn[title*="Estornar"]:hover {
  background: hsl(var(--destructive) / 0.1) !important;
  color: hsl(var(--destructive)) !important;
  border-color: hsl(var(--destructive) / 0.4) !important;
}

/* ---- 3. Cards de Clientes e Empresas Modernizados ---- */
.entity-card {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.entity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary) / 0.3);
}

.entity-card-header {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.entity-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entity-card-info {
  flex: 1;
  min-width: 0;
}

.entity-card-name {
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.entity-card-doc {
  font-size: 11.5px;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-card-body {
  padding: 8px 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entity-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.entity-detail-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-card-actions {
  display: flex;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.25);
}

.entity-card-actions .eca-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  cursor: pointer;
  border-right: 1px solid hsl(var(--border));
  transition: all 0.15s ease;
}

.entity-card-actions .eca-btn:last-child {
  border-right: none;
}

.entity-card-actions .eca-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--primary));
}

.entity-card-actions .eca-btn.eca-danger:hover {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

/* ---- 4. Modais Padronizados & Elegantes com Divisórias Azuis ---- */
.modal {
  border-radius: 18px;
  border: 1px solid hsl(var(--border));
  border-top: 4px solid hsl(var(--primary));
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.18);
  background: hsl(var(--card));
  overflow: hidden;
}

.modal-head {
  padding: 16px 20px;
  border-bottom: 1.5px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / 0.25));
}

.modal-head h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: hsl(var(--foreground));
}

.modal-body {
  padding: 18px 20px;
  max-height: calc(85vh - 130px);
  overflow-y: auto;
}

.modal-foot {
  padding: 14px 20px;
  border-top: 1.5px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.25);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Seção interna dos modais com molduras leves e divisória azul */
.modal-section-box {
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.03);
}

.modal-section-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
  padding: 6px 12px;
  background: hsl(var(--primary) / 0.06);
  border-left: 3.5px solid hsl(var(--primary));
  border-radius: 0 6px 6px 0;
}

/* Linhas de dados em modais (como Baixa, Logs, etc.) */
.mcard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  font-size: 12.5px;
  gap: 12px;
}

.mcard-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mcard-row>span {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  flex-shrink: 0;
}

.mcard-row>b {
  color: hsl(var(--foreground));
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Modal Detalhes da Nota Fiscal */
.nf-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  margin: 14px 0;
}

@media (max-width: 600px) {
  .nf-detail-grid {
    grid-template-columns: 1fr;
  }
}

.nf-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: hsl(var(--muted) / 0.25);
  border: 1px solid hsl(var(--border) / 0.8);
  border-radius: 10px;
  min-width: 0;
}

.nf-detail-item-value {
  font-size: 12.5px;
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: hsl(var(--foreground));
  line-height: 1.35;
}

/* ============================================================
   LARGURAS E ALINHAMENTO PROPORCIONAL DE TODAS AS TABELAS
============================================================ */

/* Modal Expandido e Grande */
#modalBox.modal.modal-xl,
.modal.modal-xl {
  max-width: 1180px !important;
  width: 95vw !important;
}

#modalBox.modal.modal-lg,
.modal.modal-lg {
  max-width: 1040px !important;
  width: 92vw !important;
}

/* 1. Tabela de Pagamentos Pendentes (Conta 2 - 9 colunas) */
.pendentes-table-wrap table {
  table-layout: fixed !important;
  width: 100% !important;
}

.pendentes-table-wrap table th:nth-child(1),
.pendentes-table-wrap table td:nth-child(1) {
  width: 7.5% !important;
  text-align: center !important;
}

/* Número */

.pendentes-table-wrap table th:nth-child(2),
.pendentes-table-wrap table td:nth-child(2) {
  width: 18.5% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fornecedor (AMPLIADO) */

.pendentes-table-wrap table th:nth-child(3),
.pendentes-table-wrap table td:nth-child(3) {
  width: 18% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Cliente (AMPLIADO) */

.pendentes-table-wrap table th:nth-child(4),
.pendentes-table-wrap table td:nth-child(4) {
  width: 18% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Empresa (AMPLIADO) */

.pendentes-table-wrap table th:nth-child(5),
.pendentes-table-wrap table td:nth-child(5) {
  width: 11% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Banco */

.pendentes-table-wrap table th:nth-child(6),
.pendentes-table-wrap table td:nth-child(6) {
  width: 8.5% !important;
  text-align: right !important;
}

/* Valor */

.pendentes-table-wrap table th:nth-child(7),
.pendentes-table-wrap table td:nth-child(7) {
  width: 9% !important;
  min-width: 86px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Vencimento (NÃO CORTA MAIS) */

.pendentes-table-wrap table th:nth-child(8),
.pendentes-table-wrap table td:nth-child(8) {
  width: 5% !important;
  text-align: center !important;
}

/* Status (COMPACTO) */

.pendentes-table-wrap table th:nth-child(9),
.pendentes-table-wrap table td:nth-child(9) {
  width: 4.5% !important;
  text-align: center !important;
}

/* Ações (EXATO) */


/* 2. Tabela de Notas Fiscais (Modo Agrupado por Mês - 8 colunas) */
.notas-table-wrap:not(.notas-flat-table) table {
  table-layout: fixed !important;
  width: 100% !important;
}

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(1),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(1) {
  width: 12% !important;
  text-align: center !important;
}
/* Número/Série */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(2),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(2) {
  width: 22% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Empresa Emissora */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(3),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(3) {
  width: 20% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Cliente Destinatário */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(4),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(4) {
  width: 9% !important;
  text-align: center !important;
}
/* Categoria */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(5),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(5) {
  width: 11% !important;
  text-align: right !important;
}
/* Valor Bruto */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(6),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(6) {
  width: 10% !important;
  min-width: 92px !important;
  text-align: center !important;
}
/* Status */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(7),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(7) {
  width: 9% !important;
  min-width: 90px !important;
  text-align: center !important;
}
/* Vencimento */

.notas-table-wrap:not(.notas-flat-table) table th:nth-child(8),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(8) {
  width: 7% !important;
  min-width: 76px !important;
  text-align: center !important;
}
/* Ações */


/* 3. Tabela de Notas Fiscais (Modo Flat / Lista corrida - 9 colunas) */
.notas-flat-table table {
  table-layout: fixed !important;
  width: 100% !important;
}

.notas-flat-table table th:nth-child(1),
.notas-flat-table table td:nth-child(1) {
  width: 11% !important;
  text-align: center !important;
}
/* Número/Série */

.notas-flat-table table th:nth-child(2),
.notas-flat-table table td:nth-child(2) {
  width: 20% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Empresa Emissora */

.notas-flat-table table th:nth-child(3),
.notas-flat-table table td:nth-child(3) {
  width: 19% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Cliente Destinatário */

.notas-flat-table table th:nth-child(4),
.notas-flat-table table td:nth-child(4) {
  width: 8% !important;
  text-align: center !important;
}
/* Categoria */

.notas-flat-table table th:nth-child(5),
.notas-flat-table table td:nth-child(5) {
  width: 10% !important;
  text-align: right !important;
}
/* Valor Bruto */

.notas-flat-table table th:nth-child(6),
.notas-flat-table table td:nth-child(6) {
  width: 9% !important;
  min-width: 92px !important;
  text-align: center !important;
}
/* Status */

.notas-flat-table table th:nth-child(7),
.notas-flat-table table td:nth-child(7) {
  width: 8% !important;
  min-width: 80px !important;
  text-align: center !important;
}
/* Emissão */

.notas-flat-table table th:nth-child(8),
.notas-flat-table table td:nth-child(8) {
  width: 5% !important;
  text-align: center !important;
}

/* Vencimento */

.notas-flat-table table th:nth-child(9),
.notas-flat-table table td:nth-child(9) {
  width: 3.5% !important;
  text-align: center !important;
}

/* Ações (EXATO) */


/* 4. Tabela de Relatórios - Tipo 1 (7 colunas) */
.rel-tipo-1-table-wrap table {
  table-layout: fixed !important;
  width: 100% !important;
}

.rel-tipo-1-table-wrap table th:nth-child(1),
.rel-tipo-1-table-wrap table td:nth-child(1) {
  width: 8% !important;
  text-align: center !important;
}

/* Número */

.rel-tipo-1-table-wrap table th:nth-child(2),
.rel-tipo-1-table-wrap table td:nth-child(2) {
  width: 8.5% !important;
  text-align: center !important;
}

/* Agendamento */

.rel-tipo-1-table-wrap table th:nth-child(3),
.rel-tipo-1-table-wrap table td:nth-child(3) {
  width: 8.5% !important;
  text-align: center !important;
}

/* Vencimento */

.rel-tipo-1-table-wrap table th:nth-child(4),
.rel-tipo-1-table-wrap table td:nth-child(4) {
  width: 44% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fornecedor / Empresa (MÁXIMO) */

.rel-tipo-1-table-wrap table th:nth-child(5),
.rel-tipo-1-table-wrap table td:nth-child(5) {
  width: 6% !important;
  text-align: center !important;
}

/* Parcela */

.rel-tipo-1-table-wrap table th:nth-child(6),
.rel-tipo-1-table-wrap table td:nth-child(6) {
  width: 14% !important;
  text-align: right !important;
}

/* Valor Vencimento */

.rel-tipo-1-table-wrap table th:nth-child(7),
.rel-tipo-1-table-wrap table td:nth-child(7) {
  width: 11% !important;
  text-align: center !important;
}

/* Status */


/* 5. Tabela de Relatórios - Tipo 2 (9 colunas) */
.rel-tipo-2-table-wrap table {
  table-layout: fixed !important;
  width: 100% !important;
}

.rel-tipo-2-table-wrap table th:nth-child(1),
.rel-tipo-2-table-wrap table td:nth-child(1) {
  width: 8% !important;
  text-align: center !important;
}

/* Número */

.rel-tipo-2-table-wrap table th:nth-child(2),
.rel-tipo-2-table-wrap table td:nth-child(2) {
  width: 7.5% !important;
  text-align: center !important;
}

/* Agendamento */

.rel-tipo-2-table-wrap table th:nth-child(3),
.rel-tipo-2-table-wrap table td:nth-child(3) {
  width: 7.5% !important;
  text-align: center !important;
}

/* Vencimento */

.rel-tipo-2-table-wrap table th:nth-child(4),
.rel-tipo-2-table-wrap table td:nth-child(4) {
  width: 33% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fornecedor / Empresa */

.rel-tipo-2-table-wrap table th:nth-child(5),
.rel-tipo-2-table-wrap table td:nth-child(5) {
  width: 5.5% !important;
  text-align: center !important;
}

/* Parcela */

.rel-tipo-2-table-wrap table th:nth-child(6),
.rel-tipo-2-table-wrap table td:nth-child(6) {
  width: 11% !important;
  text-align: right !important;
}

/* Valor Vencimento */

.rel-tipo-2-table-wrap table th:nth-child(7),
.rel-tipo-2-table-wrap table td:nth-child(7) {
  width: 8% !important;
  text-align: center !important;
}

/* Data Pagamento */

.rel-tipo-2-table-wrap table th:nth-child(8),
.rel-tipo-2-table-wrap table td:nth-child(8) {
  width: 11.5% !important;
  text-align: left !important;
}

/* Banco da Baixa */

.rel-tipo-2-table-wrap table th:nth-child(9),
.rel-tipo-2-table-wrap table td:nth-child(9) {
  width: 8% !important;
  text-align: center !important;
}

/* Status */


/* 6. Tabela de Meus Registros (9 colunas) */
.meus-registros-table-wrap table {
  table-layout: fixed !important;
  width: 100% !important;
}

.meus-registros-table-wrap table th:nth-child(1),
.meus-registros-table-wrap table td:nth-child(1) {
  width: 7.5% !important;
  text-align: center !important;
}

/* Nº */

.meus-registros-table-wrap table th:nth-child(2),
.meus-registros-table-wrap table td:nth-child(2) {
  width: 25% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fornecedor */

.meus-registros-table-wrap table th:nth-child(3),
.meus-registros-table-wrap table td:nth-child(3) {
  width: 25% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Empresa */

.meus-registros-table-wrap table th:nth-child(4),
.meus-registros-table-wrap table td:nth-child(4) {
  width: 7% !important;
  text-align: center !important;
}

/* Agend. */

.meus-registros-table-wrap table th:nth-child(5),
.meus-registros-table-wrap table td:nth-child(5) {
  width: 7% !important;
  text-align: center !important;
}

/* Emissão */

.meus-registros-table-wrap table th:nth-child(6),
.meus-registros-table-wrap table td:nth-child(6) {
  width: 7% !important;
  text-align: center !important;
}

/* Venc. */

.meus-registros-table-wrap table th:nth-child(7),
.meus-registros-table-wrap table td:nth-child(7) {
  width: 9% !important;
  text-align: right !important;
}

/* Valor */

.meus-registros-table-wrap table th:nth-child(8),
.meus-registros-table-wrap table td:nth-child(8) {
  width: 6.5% !important;
  text-align: center !important;
}

/* Status */

.meus-registros-table-wrap table th:nth-child(9),
.meus-registros-table-wrap table td:nth-child(9) {
  width: 6% !important;
  text-align: center !important;
}

/* Ações */


/* 7. Tabela de Minhas Baixas (11 colunas) */
.minhas-baixas-table-wrap table {
  table-layout: fixed !important;
  width: 100% !important;
}

.minhas-baixas-table-wrap table th:nth-child(1),
.minhas-baixas-table-wrap table td:nth-child(1) {
  width: 6.5% !important;
  text-align: center !important;
}

/* Nº */

.minhas-baixas-table-wrap table th:nth-child(2),
.minhas-baixas-table-wrap table td:nth-child(2) {
  width: 17% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Fornecedor */

.minhas-baixas-table-wrap table th:nth-child(3),
.minhas-baixas-table-wrap table td:nth-child(3) {
  width: 17% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Empresa */

.minhas-baixas-table-wrap table th:nth-child(4),
.minhas-baixas-table-wrap table td:nth-child(4) {
  width: 16% !important;
  text-align: left !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Cliente */

.minhas-baixas-table-wrap table th:nth-child(5),
.minhas-baixas-table-wrap table td:nth-child(5) {
  width: 8% !important;
  text-align: right !important;
}

/* Valor */

.minhas-baixas-table-wrap table th:nth-child(6),
.minhas-baixas-table-wrap table td:nth-child(6) {
  width: 6.5% !important;
  text-align: center !important;
}

/* Emissão */

.minhas-baixas-table-wrap table th:nth-child(7),
.minhas-baixas-table-wrap table td:nth-child(7) {
  width: 10% !important;
  text-align: left !important;
}

/* Banco */

.minhas-baixas-table-wrap table th:nth-child(8),
.minhas-baixas-table-wrap table td:nth-child(8) {
  width: 6.5% !important;
  text-align: center !important;
}

/* Pagamento */

.minhas-baixas-table-wrap table th:nth-child(9),
.minhas-baixas-table-wrap table td:nth-child(9) {
  width: 12% !important;
  text-align: left !important;
}

/* Obs. */

.minhas-baixas-table-wrap table th:nth-child(10),
.minhas-baixas-table-wrap table td:nth-child(10) {
  width: 6% !important;
  text-align: center !important;
}

/* Ações */


/* ============================================================
   CENTRALIZAÇÃO UNIVERSAL E COMPACTAÇÃO DE STATUS & AÇÕES
============================================================ */

/* Centraliza todas as células de cabeçalho e dados de todas as tabelas */
#content .table-wrap table:not(.tcpdf-table) thead th,
#content .table-wrap table:not(.tcpdf-table) tbody td,
#modalBox .table-wrap table:not(.tcpdf-table) thead th,
#modalBox .table-wrap table:not(.tcpdf-table) tbody td,
.table-wrap table thead th,
.table-wrap table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* ---- Estilização Perfeita do Select de Status do Admin ---- */
#modalBox .table-wrap table:not(.tcpdf-table)td select.badge,
#content .table-wrap table td select.badge,
.table-wrap table td select.badge {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: 112px !important;
  height: 24px !important;
  padding: 0 20px 0 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  border: 1px solid hsl(var(--border)) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-align-last: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 9px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Badges e Status em Células Perfeitamente Centralizados */
#content .table-wrap table:not(.tcpdf-table) td .badge,
.table-wrap td .badge {
  display: inline-block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Alinhamento de Botões de Ação sem Sobrar Espaço */
.row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.row-actions .icon-btn {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-action-compact {
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
}





/* ============================================================
   AJUSTES FINAIS — STATUS COMPACTO, DASHBOARD, CALENDÁRIO,
   CONFIGURAÇÕES E DESEMPENHO EM APARELHOS FRACOS
============================================================ */

/* --- 1. Coluna de status do tamanho do conteúdo --- */
.notas-table-wrap:not(.notas-flat-table) table th:nth-child(6),
.notas-table-wrap:not(.notas-flat-table) table td:nth-child(6),
.notas-flat-table table th:nth-child(6),
.notas-flat-table table td:nth-child(6) {
  width: 1% !important;
  white-space: nowrap !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Garante que a coluna de Vencimento e Ações não fiquem esmagadas */
.notas-table-wrap table th:nth-last-child(2),
.notas-table-wrap table td:nth-last-child(2) {
  min-width: 90px !important;
  text-align: center !important;
}

.notas-table-wrap table th:last-child,
.notas-table-wrap table td:last-child {
  min-width: 72px !important;
  text-align: center !important;
}

/* --- 2. Métricas extras acima do gráfico (dados diferentes dos cards) --- */
.overview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 2px 0 12px;
}

.overview-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid hsl(var(--primary) / 0.18);
  border-left: 3px solid hsl(var(--primary) / 0.55);
  background: hsl(var(--primary) / 0.05);
}

.overview-metric-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.overview-metric-value {
  font-size: 15px;
  font-weight: 800;
  color: hsl(var(--foreground));
}

/* Linha divisória azul entre as métricas e o gráfico */
.dashboard-charts-grid>.card .overview-metrics {
  border-bottom: 1px solid hsl(var(--primary) / 0.18);
  padding-bottom: 12px;
}

/* --- 3. Badge do período (Notas / Calendário) --- */
.period-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 11px;
  border-radius: 99px;
  padding: 3px 10px !important;
  background: hsl(var(--primary) / 0.12) !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary) / 0.22) !important;
  white-space: nowrap;
}

/* --- 4. Calendário: destaque do período selecionado --- */
.cal-day.cal-in-period {
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.22);
}

.cal-day.cal-out-period {
  opacity: 0.42;
  filter: saturate(0.6);
}

.cal-day.cal-out-period.cal-today {
  opacity: 0.75;
}

/* --- 5. Configurações: layout mais organizado --- */
.config-grid,
#content .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

#content .card .form-row,
#content .card .form-grid {
  gap: 12px;
}

@media (max-width: 720px) {

  .config-grid,
  #content .settings-grid {
    grid-template-columns: 1fr;
  }

  .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 6. Desempenho em aparelhos fracos: nada é removido, apenas
       efeitos caros (blur/sombras grandes/animações) são simplificados --- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px),
(max-height: 620px) {

  .card,
  .kpi-card,
  .modal-box {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  }

  .backdrop-blur,
  .modal-backdrop,
  .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cal-day {
    transition: none !important;
  }
}

/* Evita repaint de tabelas longas em aparelhos fracos */
.table-wrap table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 38px;
}

/* ======================================================================
   HELPERS DE LAYOUT & HYDRATION FIX
====================================================================== */
.logo-mark--clean {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px;
  overflow: hidden;
}

.logo-mark--boot-clean {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 16px;
  overflow: hidden;
}

.logo-img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.avatar--clickable {
  cursor: pointer;
}

.kpi-trend.neutral,
.kpi-sub.neutral {
  color: hsl(var(--muted-foreground)) !important;
}

/* ======================================================================
   MODAIS MOBILE: RESPONSIVIDADE, CENTRALIZAÇÃO E PREVENÇÃO DE OVERFLOW
====================================================================== */
@media (max-width: 768px) {
  .overlay,
  #modalOverlay,
  #cmdkOverlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .modal,
  #modalBox,
  .modal.modal-lg,
  .modal.modal-xl,
  #modalBox.modal.modal-lg,
  #modalBox.modal.modal-xl,
  .cmdk-modal,
  .modal-bottom-sheet {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 92vh !important;
    margin: auto !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .modal-head {
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
  }

  .modal-head h2 {
    font-size: 15px !important;
  }

  .modal-body {
    padding: 14px 12px !important;
    max-height: calc(92vh - 125px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  .modal-foot {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
  }

  .modal-foot .btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    justify-content: center !important;
  }

  .modal .grid-2,
  .modal .grid-3,
  .modal .grid-4,
  .modal .form-row,
  .modal .field-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .modal .form-group,
  .modal .input-group,
  .modal .field-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .modal input,
  .modal select,
  .modal textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .modal .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }
}
/* ======================================================================
   MELHORIAS 2026 — Ações icon-only, cards azuis, toolbar de Notas,
   sininho de alertas, sidebar/rota ativa e performance de tabelas.
   (Bloco final: sobrescreve com segurança sem remover regras anteriores)
====================================================================== */

/* --- 1. COLUNA DE AÇÕES: SOMENTE ÍCONES, CENTRALIZADA --- */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

td.col-actions,
th.col-actions {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}

.row-actions .icon-btn,
.mcard-actions .icon-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.row-actions .icon-btn:hover,
.mcard-actions .icon-btn:hover {
  background: hsl(var(--primary) / 0.10);
  border-color: hsl(var(--primary) / 0.55);
  color: hsl(var(--primary));
}

.row-actions .icon-btn:focus-visible,
.mcard-actions .icon-btn:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 1px;
}

.icon-btn.icon-btn-danger:hover {
  background: hsl(0 84% 60% / 0.12);
  border-color: hsl(0 84% 60% / 0.55);
  color: hsl(0 84% 52%);
}

.icon-btn.icon-btn-primary {
  border-color: hsl(var(--primary) / 0.45);
  color: hsl(var(--primary));
}

.icon-btn.icon-btn-primary:hover {
  background: hsl(var(--primary));
  color: #fff;
  border-color: hsl(var(--primary));
}

.mcard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid hsl(var(--border));
  padding-top: 10px;
}

/* --- 3. USUÁRIOS: TIPO DE CONTA EM TEXTO LIMPO --- */
.col-tipo-conta {
  width: 18%;
  min-width: 130px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.mcard-account-type {
  font-size: 12.5px;
  font-weight: 700;
  color: hsl(var(--primary));
  white-space: nowrap;
}

/* --- 4. CARDS DE REGISTROS COM FAIXA AZUL CORPORATIVA --- */
.mcard.mcard-accent-blue {
  position: relative;
  border: 2px solid hsl(var(--border));
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  padding: 14px 14px 12px;
  background: hsl(var(--card));
  box-shadow: var(--card-shadow);
}

.mcard.mcard-accent-blue.mcard-accent-danger {
  border-left-color: hsl(0 84% 55%);
}

.mcard.mcard-accent-blue .mcard-top {
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 6px;
}

.mcard.mcard-accent-blue .mcard-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}

.mcard.mcard-accent-blue .mcard-sub {
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
}

.mcard.mcard-accent-blue .mcard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 6px;
  border-radius: 6px;
}

.mcard.mcard-accent-blue .mcard-row:nth-child(odd) {
  background: hsl(var(--muted) / 0.45);
}

/* --- 5. TOOLBAR DAS NOTAS FISCAIS + TOGGLE "SEM DATAS" --- */
.admin-nf-toolbar {
  display: none !important;
}

.admin-nf-toolbar .filter-bar {
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-toggle-sem-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-toggle-sem-data:hover {
  border-color: hsl(var(--primary) / 0.55);
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
}

.btn-toggle-sem-data.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.date-range-group.is-disabled {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.4);
}

@media (max-width: 720px) {
  .admin-nf-toolbar { padding: 10px; border-radius: 12px; }
  .btn-toggle-sem-data { width: 100%; justify-content: center; }
}

/* --- 6. SININHO DE NOTIFICAÇÕES --- */
.bell-wrap,
#bellWrap {
  position: relative;
  z-index: 9999;
}

.alert-dropdown,
#alertDropdown {
  z-index: 10000 !important;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 24px);
  border: 1.5px solid hsl(var(--border));
  border-top: 3px solid #2563eb;
  border-radius: 12px;
  background: hsl(var(--popover));
  box-shadow: 0 12px 34px rgb(15 23 42 / 0.18);
  max-height: min(75vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .alert-dropdown,
  #alertDropdown {
    position: fixed !important;
    top: 58px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* --- GARANTIA: FAIXA AZUL PADRÃO EM TODAS AS TABELAS E CARDS --- */
.table-wrap,
.card,
.month-group-card,
.nf-history-table-wrap,
.auditoria-table-wrap,
.lixeira-table-wrap,
.empresas-table-wrap,
.clientes-table-wrap,
.fornecedores-table-wrap,
.bancos-table-wrap,
.usuarios-table-wrap,
.pendentes-table-wrap,
.meus-registros-table-wrap,
.minhas-baixas-table-wrap {
  border-top: 3px solid #2563eb !important;
}

/* --- 7/9. IDENTIDADE VISUAL: ABA ATIVA AZUL PERSISTENTE --- */
.nav-item.active,
.nav-item.active:hover {
  background: #2563eb !important;
  color: #fff !important;
  border-radius: 10px;
}

.nav-item.active svg,
.nav-item.active .nav-label {
  color: #fff !important;
  stroke: currentColor;
}

.bn-item.active,
.bn-item.active svg {
  color: #2563eb !important;
}

/* --- 10. TABELAS E CARDS — SCROLL 100% FLUIDO SEM TRAVAMENTO --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}

.mobile-cards .mcard {
  /* Mantém renderização natural sem saltos de scroll */
}

/* ======================================================================
   PERFORMANCE — Modais, Dropdowns e Scroll (60 FPS)
   Bloco final: sobrescreve o necessario sem alterar o design.
====================================================================== */

/* Animacoes 100% na GPU: apenas opacity + transform (nunca top/height/filter) */
#modalOverlay {
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#modalBox,
#modalBox.modal,
#modalBox.modal-bottom-sheet {
  will-change: transform, opacity;
  transform: translateY(0) translateZ(0);
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

#modalOverlay:not(.open) #modalBox {
  opacity: 0;
  transform: translateY(8px) translateZ(0);
}

#modalOverlay.open #modalBox {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  transition: opacity .18s ease-out, transform .18s ease-out;
}

/* Scroll suave dentro de modais e dropdowns (sem prender scroll das tabelas da página) */
.modal-body,
#modalBox .modal-body,
.alert-dropdown {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#modalBox .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#modalBox .table-wrap table:not(.tcpdf-table) {
  width: 100%;
}

/* Blur pesado somente onde ha GPU sobrando */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  #modalOverlay,
  .alert-dropdown,
  .cmdk-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Dropdown do sino: abre/fecha na GPU e fica realmente clicavel quando aberto */
.alert-dropdown {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) translateZ(0);
  transition: opacity .15s ease-out, transform .15s ease-out;
  will-change: opacity, transform;
}

.alert-dropdown.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateZ(0);
}

#alertBellBtn {
  position: relative;
  z-index: 1;
  touch-action: manipulation;
}

#alertBellBtn * {
  pointer-events: none;
  /* cliques no SVG/path sempre chegam ao botao */
}

@media (prefers-reduced-motion: reduce) {
  #modalOverlay.open #modalBox,
  .alert-dropdown {
    transition: none !important;
  }
}

/* ======================================================================
   FIX FINAL — Badge do sininho (número sobrepondo/estourando o botão)
   Mantém o contador encaixado no canto do sino, sem invadir os botões
   vizinhos e sem ser recortado pelo container.
====================================================================== */
.topbar-actions,
.bell-wrap,
.bell-wrap > button,
.bell-wrap > .icon-btn,
#alertBellBtn {
  overflow: visible;
}

.bell-wrap,
#bellWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.alert-bell-badge,
#alertBellBadge {
  position: absolute;
  top: -5px;
  right: -5px;
  transform: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 99px;
  background: hsl(0 84% 60%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid hsl(var(--card));
  box-shadow: 0 0 0 1px hsl(0 84% 60% / 0.25);
  pointer-events: none;
  z-index: 10002 !important;
}

html.dark .alert-bell-badge,
html.dark #alertBellBadge {
  border-color: hsl(var(--card));
}