/* CORES VERDADEIRAS */

:root {
  --background: #090d15;
  --foreground: #f7f9fb;

  --card: #101622;
  --card-foreground: #f7f9fb;

  --popover: #101622;
  --popover-foreground: #f7f9fb;

  --primary: #21c45d;
  --primary-foreground: #ffffff;

  --secondary: #1a2231;
  --secondary-foreground: #f7f9fb;

  --muted: #222a39;
  --muted-foreground: #93a2b7;

  --accent: #222a39;
  --accent-foreground: #f7f9fb;

  --destructive: #dc2828;
  --destructive-foreground: #ffffff;

  --success: #21c45d;
  --success-foreground: #ffffff;

  --warning: #f49e0a;
  --warning-foreground: #000000;

  --info: #0da2e7;
  --info-foreground: #ffffff;

  --border: #1e2533;
  --input: #1e2533;

  --ring: #21c45d;

  --radius: .5rem;

  --sidebar-background: #0a0f18;
  --sidebar-foreground: #d1d7e0;

  --sidebar-primary: #21c45d;
  --sidebar-primary-foreground: #ffffff;

  --sidebar-accent: #151b27;
  --sidebar-accent-foreground: #f7f9fb;

  --sidebar-border: #1a202c;
  --sidebar-ring: #21c45d;

  --topbar-background: #090d15;
  --topbar-border: #1a202c;
}

:root {
  --hsl-background: 220 40% 6%;
    --hsl-foreground: 210 40% 98%;
    --hsl-card: 220 35% 10%;
    --hsl-card-foreground: 210 40% 98%;
    --hsl-popover: 220 35% 10%;
    --hsl-popover-foreground: 210 40% 98%;
    --hsl-primary: 142 71% 45%;
    --hsl-primary-foreground: 0 0% 100%;
    --hsl-secondary: 220 30% 15%;
    --hsl-secondary-foreground: 210 40% 98%;
    --hsl-muted: 220 25% 18%;
    --hsl-muted-foreground: 215 20% 65%;
    --hsl-accent: 220 25% 18%;
    --hsl-accent-foreground: 210 40% 98%;
    --hsl-destructive: 0 72% 51%;
    --hsl-destructive-foreground: 0 0% 100%;
    --hsl-success: 142 71% 45%;
    --hsl-success-foreground: 0 0% 100%;
    --hsl-warning: 38 92% 50%;
    --hsl-warning-foreground: 0 0% 0%;
    --hsl-info: 199 89% 48%;
    --hsl-info-foreground: 0 0% 100%;
    --hsl-border: 220 25% 16%;
    --hsl-input: 220 25% 16%;
    --hsl-ring: 142 71% 45%;
    --hsl-radius: .5rem;
    --hsl-sidebar-background: 220 40% 7%;
    --hsl-sidebar-foreground: 215 20% 85%;
    --hsl-sidebar-primary: 142 71% 45%;
    --hsl-sidebar-primary-foreground: 0 0% 100%;
    --hsl-sidebar-accent: 220 30% 12%;
    --hsl-sidebar-accent-foreground: 210 40% 98%;
    --hsl-sidebar-border: 220 25% 14%;
    --hsl-sidebar-ring: 142 71% 45%;
    --hsl-topbar-background: 220 40% 6%;
    --hsl-topbar-border: 220 25% 14%;
}

* {
    border-color: hsl(var(--hsl-border));
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--foreground);
}


/* =====================================
   BASE
===================================== */

html,
body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background: var(--background);
  color: var(--foreground);
}

.logoIconContainer {
  display: flex;
  width: 2rem;
  height: 2rem;
  background: var(--primary);
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.logoIconContainer span {
  color: black;
  font-weight: bold;
}

/* SIDEBAR */
.metismenu .parent-icon i {
  color: #fff;
}

.metismenu > li.mm-active {
    position: relative;
}

.metismenu > li.mm-active::before {
    content: '';
  background: linear-gradient(
    90deg,
    rgba(33,196,93,.22),
    rgba(33,196,93,.06)
  );

  opacity: 1;

  transform: scale(1);
  height: 100%;
  width: 100%;
  inset: 0;
}

/* Submenu ativo */
.metismenu ul li.active > a {
  background: linear-gradient(
    90deg,
    rgba(34,197,94,0.25),
    rgba(34,197,94,0.08)
  );

  color: hsl(var(--hsl-primary));

  /* font-weight: 600; */

  border-radius: 8px;

  box-shadow: inset 3px 0 0 hsl(var(--hsl-primary));

  padding-left: 14px;
}

/* Ícone do ativo */
.metismenu ul li.active > a i {
  color: hsl(var(--hsl-primary));
}

.metismenu ul li > a:hover {
  background: rgba(255,255,255,.05);
}

.metismenu ul li.active > a:hover {
  background: rgba(34,197,94,0.3);
}



/* =====================================
   INPUTS / SELECT / TEXTAREA
===================================== */

[class^="col-md-"] .btn {
    margin-top: .5rem;
}

.input-group .input-group-prepend .btn,
.input-group .input-group-append .btn {
    margin-top: .5rem;
}

.form-control,
.form-select,
textarea {
  background: var(--secondary); /* era bg-input */
  border: 2px solid var(--border); /* era border-default */
  color: var(--foreground); /* era text-primary */
  border-radius: var(--radius);
}

/* INPUT DATE - ÍCONE DARK THEME */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.7);
    cursor: pointer;
}

/* Hover */
input[type="date"]:hover::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.1);
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
    color: var(--muted-foreground) !important;
}

/* =====================================
   INPUTS / SELECT / TEXTAREA - DISABLED
===================================== */

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
textarea:disabled {
  background: hsl(var(--hsl-muted) / .6);
  border: 2px solid hsl(var(--hsl-border) / .6);
  color: var(--muted-foreground);

  cursor: not-allowed;
  opacity: 0.75;

  /* Remove estilo nativo */
  -webkit-text-fill-color: var(--muted-foreground);
  box-shadow: none;
}


/* Placeholder quando disabled */
.form-control:disabled::placeholder,
textarea:disabled::placeholder {
  color: hsl(var(--hsl-muted-foreground) / .7);
}


.form-select {
      /* Seta custom */
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}

.select2,
input,
select,
textarea {
    margin-top: .5rem;
}

label {
    color: hsl(var(--hsl-muted-foreground));
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.form-control::placeholder,
textarea::placeholder {
  color: var(--muted-foreground); /* era text-secondary */
}


.form-control:focus,
.form-select:focus,
textarea:focus {
    background: var(--secondary);
    border: 2px solid;
    border-color: var(--primary);
    color: var(--foreground);
    border-radius: var(--radius);
    box-shadow: none !important;
    outline: none;
}

.form-select:focus option {
    background: #1a202c;
}

/* Apenas checkbox custom (exceto Bootstrap) */
input[type="checkbox"]:not(.form-check-input) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid #2c2c2c;
  background-color: transparent;
  cursor: pointer;

  display: inline-grid;
  place-content: center;

  transition: all 0.2s ease;
}

/* Ícone */
input[type="checkbox"]:not(.form-check-input)::before {
  content: "✔";
  color: white;
  font-size: 12px;
  opacity: 0;
  transition: opacity ease .25s;
}

/* Estado marcado */
input[type="checkbox"]:not(.form-check-input):checked {
  background-color: #22c55e;
  border-color: #22c55e;
}

/* Check visível */
input[type="checkbox"]:not(.form-check-input):checked::before {
  opacity: 1;
}

/*  */

/* =====================================
   BOTÕES
===================================== */

.btn {
  font-weight: 500;
  border-radius: var(--radius);
}


/* Primary / Success */

.btn.btn-sm.btn-secondary.dropdown-toggle {
    color: hsl(var(--hsl-foreground)) !important;
    font-weight: 500;
    --tw-ring-offset-color: hsl(var(--hsl-background));
    background-color: hsl(var(--hsl-muted));
    border-radius: calc(var(--radius) - 2px);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border: none;
}

.btn-primary,
.btn-success {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  transition: background .2s ease;
}

.btn-primary:hover,
.btn-success:hover {
  background: #1ba852;
  border-color: #1ba852;
}


/* Danger */

.btn-danger {
  background: hsl(var(--hsl-background));
  border-color: hsl(var(--hsl-destructive) / .5);
  color: hsl(var(--hsl-destructive));

  transition: background ease .25s, color ease .25s;
}

.btn-danger:hover {
  background: hsl(var(--hsl-destructive) / .1);
  color: hsl(var(--hsl-accent-foreground));
}


/* =====================================
   CARDS
===================================== */

.card {
  background: var(--card); /* era bg-surface */
  /* border: 1px solid var(--border); */
  border-radius: var(--radius);
  color: var(--card-foreground);
  box-shadow: none;
}

/* =====================================
   TABLES
===================================== */
/* Firefox */
.table-responsive,
.table {
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd transparent;
}

/* Chrome, Edge, Safari */
.table-responsive::-webkit-scrollbar,
.table::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
.table::-webkit-scrollbar-track {
  background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb,
.table::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
  border-radius: 10px;
  transition: background 0.3s;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.table::-webkit-scrollbar-thumb:hover {
  background-color: #9e9e9e;
}


.table {
  color: var(--foreground);
  /* border-color: hsl(var(--hsl-border)) */
}

.table tbody th {
  color: hsl(var(--hsl-muted-foreground)) !important;
}

.table tbody tr {
    border-color: hsl(var(--hsl-border)) !important;
}

.table thead {

}

.table .text-white {
  color: white !important;
}

.table td {
  color: hsl(var(--hsl-muted-foreground)) !important;
}

.table .btn i {
  margin-right: 0;
}

.table thead th {
  color: var(--muted-foreground) !important; /* era text-secondary */
font-weight: 500;
/* padding-left: 1rem; */
    /* padding-right: 1rem; */
  /* background: var(--secondary); */
}


/* Hover */

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}


/* =====================================
   SIDEBAR / TOPBAR / FOOTER
===================================== */

/* Synadmin força branco em tudo */

.sidebar-wrapper {
  background: var(--sidebar-background);
  color: var(--sidebar-foreground);
}

.topbar {
  background: var(--topbar-background);
  border-bottom: 1px solid var(--topbar-border);
}

.page-footer {
  background: var(--card);
  border-top: 1px solid var(--border);
}

/* TEXTOS */
.text-primary {
    color: var(--primary);
}

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

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

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

.font-semibold {
    font-weight: 600;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

/* FIM TEXTOS */

.dropdown-menu {
    background: var(--popover);
    background-color: var(--popover);
    border-radius: calc(var(--radius) - 2px);
}

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

.dropdown-menu .dropdown-item:hover {
    background-color: var(--muted);
}


/* SELECT 2 */
/* =====================================
   SELECT2 - BASE
===================================== */

.select2-container {
  width: 100% !important;
  font-size: 14px;
}


/* =====================================
   SINGLE SELECT
===================================== */

.select2-container--default .select2-selection--single {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 38px;

  display: flex;
  align-items: center;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
  color: var(--foreground);
  padding-left: 12px;
  line-height: normal;
}

.select2-container--default
.select2-selection--single
.select2-selection__arrow {
  height: 100%;
  right: 8px;
}


/* =====================================
   MULTI SELECT
===================================== */

.select2-container--default .select2-selection--multiple {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 38px;
  padding: 4px 6px;
}

.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
  background: var(--accent);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 999px;
  padding: 2px 8px;
}

.select2-selection__choice__remove {
  color: var(--muted-foreground);
  margin-right: 4px;
}

.select2-selection__choice__remove:hover {
  color: var(--muted);
}


/* =====================================
   DROPDOWN
===================================== */

.select2-dropdown {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}


/* =====================================
   SEARCH
===================================== */

.select2-search--dropdown .select2-search__field {
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 6px 8px;
}

.select2-search__field::placeholder {
  color: var(--muted-foreground);
}


/* =====================================
   OPTIONS
===================================== */

.select2-results__option {
  background: transparent;
  color: var(--foreground);
  padding: 8px 12px;
  transition: all .15s ease;
}


/* Hover */

.select2-results__option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}


/* Selected */

.select2-results__option[aria-selected="true"] {
  background: rgba(33, 196, 93, 0.15) !important;
  color: var(--primary) !important;
}


/* =====================================
   FOCUS / OPEN
===================================== */

.select2-container--open
.select2-selection--single,
.select2-container--focus
.select2-selection--single,
.select2-container--open
.select2-selection--multiple,
.select2-container--focus
.select2-selection--multiple {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(33, 196, 93, 0.15);
}


/* =====================================
   DISABLED
===================================== */

.select2-container--disabled .select2-selection {
  background: var(--muted);
  opacity: .6;
  cursor: not-allowed;
}

/* =====================================
   SELECT2 - ITEM ATIVO / SELECIONADO
===================================== */

/* Item selecionado (quando abre o dropdown) */
.select2-results__option--selected {
  background: rgba(33, 196, 93, 0.15) !important;
  color: var(--primary) !important;
  font-weight: 500;
}

/* Item ativo via teclado / mouse */
.select2-results__option--highlighted[aria-selected] {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Remove fundo bugado */
.select2-results__option {
  background: transparent !important;
}

/* =====================================
   SELECT2 - OVERRIDE DEFINITIVO
===================================== */

/* Container principal */
.select2-container--default .select2-selection--single {
  background: var(--secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius) !important;
}

/* Texto selecionado */
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
  color: var(--foreground) !important;
}

/* Multi */
.select2-container--default .select2-selection--multiple {
  background: var(--secondary) !important;
  border: 1px solid var(--border) !important;
}

/* Dropdown */
.select2-dropdown {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

/* Campo de busca */
.select2-search__field {
  background: var(--secondary) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

/* Itens */
.select2-results__option {
  background: transparent !important;
  color: var(--foreground) !important;
}

/* Hover */
.select2-results__option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

/* Selecionado */
.select2-results__option--selected {
  background: rgba(33, 196, 93, 0.15) !important;
  color: var(--primary) !important;
}

/* Disabled */
.select2-container--disabled .select2-selection {
  background: var(--muted) !important;
  opacity: .6;
}

/* Força tema escuro no select2 */
.select2-container * {
  background-color: transparent !important;
}

.select2-selection.select2-selection--single { /* O QUE REALMENTE ALTERA */
background: var(--secondary) !important;
  border: 2px solid hsl(var(--hsl-border)) !important;
  color: var(--foreground) !important;
  transition: border .4s ease;
  border-radius: .5rem;
}

.select2-container--open .select2-selection.select2-selection--single { /* O QUE REALMENTE ALTERA */
    border: 2px solid hsl(var(--hsl-primary)) !important;
  transition: border .4s ease;

}

.select2-container--default .select2-selection {
  background: var(--secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
}

.select2-selection__rendered {
  color: var(--foreground) !important;
}

.select2-dropdown {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

.select2-results__option {
  color: var(--foreground) !important;
}

.select2-results__option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

/* MODAL SWAL */
/* =====================================
   SWEETALERT - TEMA DARK PADRÃO DO SISTEMA
===================================== */

/* Overlay */
.swal-overlay {
  background: rgba(9, 13, 21, 0.85);
  /* backdrop-filter: blur(4px); */
}


/* Modal */
.swal-modal {
  background: var(--card);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  width: 420px;
  max-width: 90%;

  padding: 24px;

  color: var(--card-foreground);

  box-shadow:
    0 20px 40px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.02);

  animation: swalIn .25s ease;
}


/* Título */
.swal-title {
  color: var(--foreground);

  font-size: 1rem;
  font-weight: 600;

  margin-bottom: 6px;
}


/* Texto */
.swal-text {
  color: var(--muted-foreground);

  font-size: .875rem;
  line-height: 1.5;
}


/* Footer / Botões */
.swal-footer {
  margin-top: 20px;

  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* Botão base */
.swal-button {
  background: var(--secondary);
  color: var(--foreground);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  padding: 7px 14px;

  font-size: .875rem;
  font-weight: 500;

  transition: all .2s ease;

  box-shadow: none;
}


/* Hover geral */
.swal-button:hover {
  background: var(--accent);
}


/* Confirmar */
.swal-button--confirm {
  background: var(--primary);
  color: var(--primary-foreground);

  border-color: var(--primary);
}


/* Hover confirmar */
.swal-button--confirm:hover {
  filter: brightness(1.1);
}


/* Cancelar */
.swal-button--cancel {
  background: transparent;

  color: var(--muted-foreground);

  border-color: var(--border);
}


/* Hover cancelar */
.swal-button--cancel:hover {
  background: var(--muted);
  color: var(--foreground);
}


/* Ícones (success / error / warning / info) */
/* ============================= */
/* CORREÇÃO ÍCONES SWEETALERT */
/* ============================= */
/* ===============================
   REMOVE FUNDO BRANCO DOS ÍCONES
   SWEETALERT (TRANSPARENTE REAL)
================================ */

/* Base */
.swal-icon,
.swal-icon::before,
.swal-icon::after {
  background: transparent !important;
}

/* SUCCESS */
.swal-icon--success {
  background: transparent !important;
}

.swal-icon--success__ring {
  background: transparent !important;
  border: 3px solid var(--primary);
}

.swal-icon--success__hide-corners {
  background: transparent !important;
}

.swal-icon--success__line {
  background-color: var(--primary);
}

/* ERROR */
.swal-icon--error {
  background: transparent !important;
  border-color: var(--destructive);
}

.swal-icon--error__line {
  background-color: var(--destructive);
}

/* WARNING */
.swal-icon--warning {
  background: transparent !important;
  border-color: var(--warning);
  color: var(--warning);
}

/* INFO */
.swal-icon--info {
  background: transparent !important;
  border-color: var(--info);
  color: var(--info);
}



/* Animação */
@keyframes swalIn {
  from {
    opacity: 0;
    transform: scale(.95) translateY(8px);
  }

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

/* FIM MODAL SWAL */

.remessaNfe.btn-success {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--primary) !important;
    border-color: hsl(var(--hsl-primary) / .3);
    background-color: hsl(var(--hsl-primary) / .2);
    
}

.remessaNfe.btn-danger {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--destructive) !important;
    border-color: hsl(var(--hsl-destructive) / .3);
    background-color: hsl(var(--hsl-destructive) / .2);
}

.remessaNfe.btn-warning {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--warning) !important;
    border-color: hsl(var(--hsl-warning) / .3);
    background-color: hsl(var(--hsl-warning) / .2);
}

.remessaNfe.btn.btn-sm.btn-info {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--info) !important;
    border-color: hsl(var(--hsl-info) / .3);
    background-color: hsl(var(--hsl-info) / .2);
}

.nfse.btn-primary {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--info) !important;
    border-color: hsl(var(--hsl-info) / .3);
    background-color: hsl(var(--hsl-info) / .2);
    
}

.nfse.btn-success {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--success) !important;
    border-color: hsl(var(--hsl-success) / .3);
    background-color: hsl(var(--hsl-success) / .2);
    
}

.nfse.btn-danger {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--destructive) !important;
    border-color: hsl(var(--hsl-destructive) / .3);
    background-color: hsl(var(--hsl-destructive) / .2);
}

.nfse.btn-warning {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--warning) !important;
    border-color: hsl(var(--hsl-warning) / .3);
    background-color: hsl(var(--hsl-warning) / .2);
}

.nfse.btn.btn-sm.btn-info {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-width: 1px;
    border-radius: 9999px;

    color: var(--info) !important;
    border-color: hsl(var(--hsl-info) / .3);
    background-color: hsl(var(--hsl-info) / .2);
}

/* MODAL */
/* =====================================
   BOOTSTRAP MODAL - TEMA DO SISTEMA
===================================== */


/* Overlay */
.modal-backdrop {
  background: linear-gradient(
    rgba(9,13,21,.88),
    rgba(9,13,21,.92)
  );
  /* backdrop-filter: blur(4px); */
}


/* Container principal */
.modal-content {
  background: var(--card);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  color: var(--card-foreground);

  box-shadow:
    0 25px 50px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.02);
}


/* Header */
.modal-header {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.02),
    transparent
  );

  border-bottom: 1px solid var(--border);

  padding: 16px 20px;
}


.modal-title {
  color: var(--foreground);

  font-size: 1rem;
  font-weight: 600;
}


/* Botão fechar */
.modal-header .btn-close {
  filter: invert(1) brightness(.7);
  opacity: .6;

  transition: opacity .2s ease;
}

.modal-header .btn-close:hover {
  opacity: 1;
}


/* Body */
.modal-body {
  padding: 20px;

  color: var(--foreground);
}


/* Scroll interno */
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd transparent;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 10px;
}


/* Footer */
.modal-footer {
  border-top: 1px solid var(--border);

  padding: 14px 20px;

  background: rgba(255,255,255,.01);
}


/* =====================================
   TABELA DENTRO DO MODAL
===================================== */

.modal .table {
  color: var(--foreground);
}

.modal .table thead th {
  color: var(--muted-foreground);
  font-weight: 500;
}

.modal .table tbody tr:hover {
  background: rgba(255,255,255,.03);
}


/* =====================================
   INPUTS DENTRO DO MODAL
===================================== */

.modal .form-control,
.modal .form-select {
  background: var(--secondary);

  border: 2px solid var(--border);

  color: var(--foreground);
}

.modal .form-control:focus,
.modal .form-select:focus {
  border-color: var(--primary);
  box-shadow: none;
}


/* =====================================
   BOTÕES NO MODAL
===================================== */

.modal .btn {
  border-radius: var(--radius);
}


/* =====================================
   ANIMAÇÃO SUAVE
===================================== */

.modal.fade .modal-dialog {
  transform: scale(.96) translateY(10px);
  transition: all .25s ease;
}

.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* FIM MODAL */

/* =====================================
   TOPBAR / HEADER - ESTILO SAAS DARK
===================================== */

.topbar {
  height: 60px;

  background: linear-gradient(
    to right,
    #05080f,
    #090d15,
    #05080f
  );

  border-bottom: 1px solid var(--border);

  padding: 0 20px;

  display: flex;
  align-items: center;

  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}


/* Navbar base */
.topbar .navbar {
  width: 100%;
  padding: 0;
}


/* Blocos "pill" (Ambiente / IP / etc) */
.top-menu-left .btn,
.top-menu .btn,
.topbar .badge {
  /* background: var(--secondary); */
  background: hsl(var(--hsl-muted) / .5) !important;

  border: 1px solid var(--border);

  color: var(--foreground);

  border-radius: 999px;

  padding: 6px 14px;

  font-size: .8rem;
  font-weight: 500;

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

  transition: all .2s ease;
}


/* Hover pill */
.top-menu-left .btn:hover,
.top-menu .btn:hover {
  background: var(--accent);
}


/* PDV destaque */
.top-menu .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.top-menu .btn-primary:hover {
  filter: brightness(1.1);

  box-shadow:
    0 0 0 1px rgba(33, 196, 93, 0.4),
    0 0 12px rgba(33, 196, 93, 0.35),
    0 0 24px rgba(33, 196, 93, 0.15);
}


/* IP badge */
.btn-ip {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
}


/* Busca */
.search-bar {
  max-width: 420px;
  margin: 0 20px;
}

.search-control {
  background: var(--secondary);
  border: 1px solid var(--border);

  color: var(--foreground);

  border-radius: 999px;

  padding-left: 38px;
  padding-right: 12px;

  height: 36px;
}


/* Ícone busca */
.search-show {
  left: 14px;
  color: var(--muted-foreground);
}


/* Ícones topo */
.topbar .nav-link {
  color: var(--muted-foreground);
  font-size: 1.1rem;

  transition: color .2s ease;
}

.topbar .nav-link:hover {
  color: var(--foreground);
}


/* Sino notificação */
.topbar .bx-bell {
color: hsl(var(--hsl-muted-foreground));
  font-size: 1.3rem;
}


/* User box */
.user-box {
  margin-left: 16px;
}

.user-box > a {
  background: var(--secondary);

  border: 1px solid var(--border);
  border-radius: 999px;

  padding: 4px 10px;

  gap: 8px;

  transition: all .2s ease;
}

.user-box > a:hover {
  background: var(--accent);
}


/* Avatar */
.user-img {
  width: 32px;
  height: 32px;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid var(--primary);
}


/* Nome usuário */
.user-name {
  font-size: .8rem;
  font-weight: 500;
}

.designattion {
  font-size: .7rem;
  color: var(--muted-foreground);
}


/* Dropdown usuário */
.user-box .dropdown-menu {
  background: var(--popover);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  margin-top: 10px;

  padding: 6px;
}

.user-box .dropdown-item {
  color: var(--foreground);

  border-radius: calc(var(--radius) - 2px);

  padding: 8px 10px;

  font-size: .85rem;
}

.user-box .dropdown-item:hover {
  background: var(--muted);
}


/* Badge notificação */
.alert-count {
  position: absolute;

  top: 2px;
  right: 2px;

  width: 8px;
  height: 8px;

  background: var(--destructive);

  border-radius: 50%;
}

/* =====================================
   NOTIFICAÇÕES - TOPBAR
===================================== */


/* Botão do sino */
.topbar .bx-bell {
  font-size: 1.3rem;
}

.topbar .nav-link.dropdown-toggle {
  position: relative;

  /* background: var(--secondary); */

  /* border: 1px solid var(--border); */
  border-radius: 999px;

  padding: 6px 10px;

  transition: all .2s ease;
}

.topbar .nav-link.dropdown-toggle:hover {
  background: var(--accent);
}


/* Badge contador */
.alert-count {
  position: absolute;

  top: -3px;
  right: -3px;

  min-width: 16px;
  height: 16px;

  background: var(--destructive);
  color: #fff;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 600;

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

  border: 2px solid var(--background);

  box-shadow: 0 0 8px rgba(220,40,40,.6);
}


/* Ping animado */
.alert-count::after {
  content: "";

  position: absolute;
  inset: -3px;

  border-radius: 50%;

  background: rgba(220,40,40,.4);

  animation: notifyPing 1.5s infinite;
}


@keyframes notifyPing {
  0% {
    transform: scale(.8);
    opacity: .8;
  }

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


/* =====================================
   DROPDOWN
===================================== */

.dropdown-menu {
  background: var(--popover);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  min-width: 320px;

  padding: 0;

  margin-top: 12px;

  box-shadow: 0 15px 40px rgba(0,0,0,.6);
}

/* Header */
.msg-header {
  padding: 12px 16px !important;

  border-bottom: 1px solid var(--border) !important;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    transparent
  ) !important;
}

.msg-header .msg-header-title {
    color: white !important;
}

.msg-header-title {
  margin: 0;

  font-size: .9rem;
  font-weight: 600;

  color: var(--foreground);
}


/* Lista */
.header-notifications-list {
  max-height: 340px;
  overflow-y: auto;
}


/* Scroll */
.header-notifications-list::-webkit-scrollbar {
  width: 6px;
}

.header-notifications-list::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 10px;
}


/* Item */
.alert-item {
  padding: 12px 16px;

  border-bottom: 1px solid var(--border) !important;

  transition: all .2s ease;
}

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

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


/* Ícone lateral */
.notify {
  width: 36px;
  height: 36px;

  border-radius: 50%;

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

  font-size: 1.1rem;

  margin-right: 12px;
}


/* Variações */
.bg-light-success {
  background: rgba(33,196,93,.15) !important;
}

.text-success {
  color: var(--success) !important;
}


/* Conteúdo */
.msg-name {
  margin: 0;

  font-size: .85rem;
  font-weight: 600;

  color: var(--foreground);
}

.alert-item small {
  color: var(--muted-foreground);
  font-size: .75rem;
}

.msg-info {
  margin: 2px 0 0;

  font-size: .8rem;
  font-weight: 500;

  color: var(--primary);
}


/* =====================================
   ANIMAÇÃO DROPDOWN
===================================== */

.dropdown-menu.show {
  animation: dropdownIn .2s ease;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.98);
  }

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


/* BOTÕES */

/* =====================================
   NFE TOOLBAR
===================================== */

.nfe-toolbar .btn-action {
  width: 38px;
  height: 38px;
  padding: 0;

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

  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);

  color: var(--muted-foreground);

  transition: all .15s ease;
}


/* Hover */

.nfe-toolbar .btn-action:hover {
  background: var(--accent);
  color: var(--foreground);
  border-color: var(--accent);
}


/* Focus */

.nfe-toolbar .btn-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(33,196,93,.25);
}


/* Primary */

.nfe-toolbar .btn-action.is-primary {
  color: var(--primary);
  border-color: rgba(33,196,93,.4);
}

.nfe-toolbar .btn-action.is-primary:hover {
  background: rgba(33,196,93,.15);
}


/* Danger */

.nfe-toolbar .btn-action.is-danger {
  color: var(--destructive);
  border-color: rgba(220,40,40,.4);
}

.nfe-toolbar .btn-action.is-danger:hover {
  background: rgba(220,40,40,.15);
}


/* Disabled */

.nfe-toolbar .btn-action:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* PDV */

/* =====================================
   PDV / FRONTBOX - TEMA DARK PADRÃO
===================================== */

/* Container principal PDV */
.card-custom,
.frontbox,
.dark-theme {
  background: var(--background) !important;
  color: var(--foreground);
}

/* Cards internos */
.frontbox .card,
.card-custom .card {
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Remove fundos claros antigos */
.frontbox [style*="background-color"],
.card [style*="background-color"] {
  background: var(--card) !important;
  color: var(--foreground) !important;
}

/* =====================================
   BARRA SUPERIOR PDV
===================================== */

.frontbox .row-cols-auto {
  gap: .5rem;
}

.frontbox .btn-sm {
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.frontbox .btn-sm:hover {
  background: var(--accent);
}


/* =====================================
   LEITOR / CÓDIGO DE BARRAS
===================================== */

#focus-codigo {
  background: var(--secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#focus-codigo .mousetrap {
    background: var(--background);
    margin-top: 0;
}

#focus-codigo input {
  background: transparent;
  color: var(--foreground);
}

#focus-codigo:focus-within {
  border-color: var(--primary);
}


/* =====================================
   FORM PRODUTO / CAMPOS
===================================== */

.frontbox .form-control,
.frontbox .form-select {
  background: var(--secondary);
  border: 2px solid var(--border);
  color: var(--foreground);
}

.frontbox .form-control:focus,
.frontbox .form-select:focus {
  border-color: var(--primary);
}


/* =====================================
   TABELA ITENS PDV
===================================== */

.table-pdv {
  background: transparent;
}

.table-pdv thead th {
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}

.table-pdv tbody tr {
  border-bottom: 1px solid var(--border);
}

.table-pdv tbody tr:hover {
  background: rgba(255,255,255,.03);
}


/* =====================================
   CARD DESCONTO / ACRÉSCIMO
===================================== */

.frontbox .class_desconto,
.frontbox .class_acrescimo {
  color: var(--primary);
  font-weight: 600;
}

.btn-desconto,
.btn-acrescimo {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--warning);
}

.btn-desconto:hover,
.btn-acrescimo:hover {
  background: rgba(245,158,11,.15);
}


/* =====================================
   COLUNA DIREITA (TOTAL / PAGAMENTO)
===================================== */

.frontbox .col-lg-4 .card {
  background: var(--card);
  border: 1px solid var(--border);
}

/* TOTAL */
.frontbox .total-venda {
  color: var(--primary);
  font-weight: 700;
  font-size: 2rem;
}

/* Troco */
.frontbox .div-toco {
  background: var(--secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}


/* =====================================
   BOTÕES LATERAIS PDV
===================================== */

.btns-pdv .btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btns-pdv .btn:hover {
  background: var(--accent);
  color: var(--foreground);
}

/* Destaques */
.btns-pdv .btn-info {
  color: var(--info);
}

.btns-pdv .btn-primary {
  color: var(--primary);
}

.btns-pdv .btn-warning {
  color: var(--warning);
}


/* =====================================
   FINALIZAR VENDA
===================================== */

#salvar_venda {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);

  font-size: 1rem;
  font-weight: 600;

  border-radius: var(--radius);
}

#salvar_venda:hover {
  filter: brightness(1.1);
}

#salvar_venda:disabled {
  opacity: .4;
}


/* =====================================
   RESPONSIVO MOBILE
===================================== */

@media (max-width: 992px) {

  /* Stack geral */
  .frontbox .row.dark-theme {
    flex-direction: column;
  }

  /* Lado direito vira embaixo */
  .frontbox .col-lg-4 {
    margin-top: 1rem;
  }

  /* Botões topo quebram linha */
  .frontbox .row-cols-auto {
    flex-wrap: wrap;
  }

  /* Inputs ocupam tudo */
  .frontbox .col-md-6,
  .frontbox .col-md-2,
  .frontbox .col-md-1 {
    width: 100%;
  }

  /* Botão adicionar */
  .btn-add-item {
    width: 100%;
  }

  /* Tabela menor */
  .table-responsive {
    max-height: 300px !important;
  }

  /* Finalizar sempre visível */
  #salvar_venda {
    position: sticky;
    bottom: 10px;
    width: 100% !important;
    z-index: 10;
  }
}


/* =====================================
   RESPONSIVO MOBILE PEQUENO
===================================== */

@media (max-width: 576px) {

  .frontbox .total-venda {
    font-size: 1.6rem;
  }

  .btns-pdv .btn {
    font-size: .8rem;
    padding: 6px;
  }

}

/* =====================================
   PDV RESPONSIVO - LAYOUT APP
===================================== */

.frontbox {
  height: 100vh;
  overflow: hidden;
}

/* Container principal */
.frontbox > .card-custom {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Área central */
.frontbox .row.dark-theme {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Coluna esquerda (produtos) */
.frontbox .col-lg-8 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Área da tabela */
.frontbox .table-responsive {
  flex: 1;
  overflow-y: auto !important;
  max-height: none !important;
}

/* Remove alturas fixas inline */
.frontbox [style*="height:"] {
  height: auto !important;
}

/* Coluna direita (pagamento) */
.frontbox .col-lg-4 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card pagamento fixo */
.frontbox .col-lg-4 > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Área interna pagamento */
.frontbox .col-lg-4 .card > .row {
  flex: 1;
  overflow-y: auto;
}

/* Finalizar fixo embaixo */
#salvar_venda {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  width: 100% !important;
  z-index: 20;
}

/* Remove margin-top gigante */
#salvar_venda[style*="margin-top"] {
  margin-top: 10px !important;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 992px) {

  .frontbox {
    height: 100dvh;
  }

  /* Colunas empilham */
  .frontbox .row.dark-theme {
    flex-direction: column;
  }

  /* Esquerda */
  .frontbox .col-lg-8 {
    height: 55vh;
  }

  /* Direita */
  .frontbox .col-lg-4 {
    height: 45vh;
  }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 576px) {

  /* Header compacto */
  .frontbox .row-cols-auto {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  /* Campos produto */
  .frontbox .row.mt-2 {
    gap: .5rem;
  }

  /* Produto / qtd / valor stack */
  .frontbox .col-md-6,
  .frontbox .col-md-2,
  .frontbox .col-md-1 {
    width: 100%;
  }

  /* Área produto menor */
  .frontbox .col-lg-8 {
    height: 50vh;
  }

  /* Pagamento maior */
  .frontbox .col-lg-4 {
    height: 50vh;
  }

  /* Botões laterais grid */
  .btns-pdv {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
  }

  /* Total menor */
  .frontbox .total-venda {
    font-size: 1.4rem;
  }

}

/* LOGIN */
.authBody {
  background: hsl(var(--hsl-background)) !important;
}

/* ================= CARD USUÁRIO PREMIUM ================= */

.card-user {
  position: relative;

  background: linear-gradient(
    145deg,
    var(--card),
    var(--secondary)
  );

  border: 1px solid var(--border);
  border-radius: 20px;

  padding: 28px 22px;

  transition: all .3s ease;
  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* Glow verde suave */
.card-user::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at top,
    hsl(var(--hsl-primary) / .18),
    transparent 60%
  );

  opacity: 0;
  transition: .3s;
}

/* Hover */
.card-user:hover {
  transform: translateY(-6px);
  border-color: hsl(var(--hsl-primary));
  box-shadow:
    0 20px 40px rgba(0,0,0,.6),
    0 0 30px hsl(var(--hsl-primary) / .25);
}

.card-user:hover::before {
  opacity: 1;
}

/* ================= AVATAR ================= */

.user-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;

  object-fit: cover;

  border: 3px solid hsl(var(--hsl-primary));
  box-shadow:
    0 0 0 6px rgba(33,196,93,.12),
    0 12px 25px rgba(0,0,0,.6);

  transition: .3s;
}

.card-user:hover .user-avatar {
  transform: scale(1.05);
}

/* ================= NOME ================= */

.card-user h5 {
  color: var(--foreground);
  font-weight: 600;
  margin-top: 20px;
}

.card-user p {
  color: var(--muted-foreground);
  font-size: 14px;
}

/* ================= BADGES ================= */

.user-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin: 4px 4px 0 0;
}

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

.badge-inactive {
  background: rgba(255,0,0,.15);
  color: #ff4d4d;
}

.badge-adm {
  background: rgba(59,130,246,.15);
  color: #3b82f6;
}

/* ================= AÇÕES ================= */

.user-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  position: relative;
  z-index: 20;
}

.user-actions a {
  width: 38px;
  height: 38px;

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

  border-radius: 12px;

  background: var(--secondary);
  color: var(--foreground);

  transition: .25s;
}

.user-actions .btn-edit:hover {
  background: hsl(var(--hsl-warning));
  color: var(--warning-foreground);
  transform: translateY(-3px);
}

.user-actions .btn-delete:hover {
  background: hsl(var(--hsl-destructive));
  color: var(--destructive-foreground);
  transform: translateY(-3px);
}

.user-actions a:hover {
  background: hsl(var(--hsl-primary));
  color: var(--primary-foreground);
  transform: translateY(-3px);
}

.user-actions .btn-check:hover {
  background: hsl(var(--hsl-primary));
  color: var(--primary-foreground);
  transform: translateY(-3px);
}

/* ================= INFO ================= */

.user-info-card {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.user-info-card span {
  display: block;
  margin-top: 4px;
}

/* ================================
   PAGINATION - DESIGN SYSTEM
================================ */

/* ================================
   PAGINATION - DESIGN SYSTEM
================================ */

.pagination {
  gap: 8px !important;
}

/* Remove fundo padrão */
.pagination .page-item {
  background: transparent !important;
  border: none !important;
}

/* ================= BASE ================= */

.pagination .page-item .page-link {

  background: var(--secondary) !important;
  color: var(--muted-foreground) !important;

  border: 1px solid var(--border) !important;
  border-radius: 10px !important;

  padding: 6px 12px !important;

  font-weight: 500 !important;
  font-size: 14px !important;

  min-width: 38px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: all .2s ease !important;

  box-shadow: none !important;
}

/* ================= HOVER ================= */

.pagination .page-item:not(.active):not(.disabled) .page-link:hover {

  background: var(--secondary) !important;

  color: var(--foreground) !important;

  border-color: var(--primary) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}

/* ================= ACTIVE ================= */

.pagination .page-item.active .page-link {

  background: linear-gradient(
    135deg,
    var(--primary),
    #1ea865
  ) !important;

  color: var(--primary-foreground) !important;

  border: none !important;

  box-shadow:
    0 0 0 1px rgba(33,196,93,.25),
    0 6px 16px rgba(33,196,93,.45) !important;

  transform: translateY(-1px);
}

/* ================= DISABLED ================= */

.pagination .page-item.disabled .page-link {

  background: var(--card) !important;

  color: var(--muted-foreground) !important;

  opacity: .4 !important;

  cursor: not-allowed !important;
}

/* ================= REMOVE BOOTSTRAP FOCUS ================= */

.pagination .page-link:focus {

  outline: none !important;

  box-shadow: none !important;
}