/* ============================================================
   LUCKY TEC — Design System
   Tema claro + dark mode refinado
   ============================================================ */

:root {
  /* Cores base */
  --blue:       #2563EB;
  --blue-dark:  #1D4ED8;
  --blue-lt:    #EFF6FF;
  --blue-mid:   #DBEAFE;

  /* Superfícies (light) */
  --bg:         #F1F5F9;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --border:     #E2E8F0;
  --border-2:   #CBD5E1;

  /* Texto (light) */
  --tx:         #0F172A;
  --tx-2:       #475569;
  --tx-3:       #94A3B8;

  /* Sidebar */
  --sb-bg:      #0F172A;
  --sb-border:  rgba(255,255,255,.07);
  --sb-tx:      rgba(255,255,255,.6);
  --sb-active:  rgba(255,255,255,.1);

  /* Raios e sombras */
  --r:          8px;
  --r2:         12px;
  --r3:         16px;
  --sh:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh2:        0 4px 12px rgba(0,0,0,.08);

  /* Sidebar width */
  --sw:         240px;
}

/* ── DARK MODE ──────────────────────────────────────────── */
.dark {
  --blue:       #3B82F6;
  --blue-dark:  #2563EB;
  --blue-lt:    rgba(59,130,246,.12);
  --blue-mid:   rgba(59,130,246,.18);

  --bg:         #0B1120;
  --surface:    #111827;
  --surface-2:  #1a2336;
  --border:     rgba(255,255,255,.07);
  --border-2:   rgba(255,255,255,.12);

  --tx:         #F1F5F9;
  --tx-2:       #94A3B8;
  --tx-3:       #4B5563;

  --sb-bg:      #070D1A;
  --sb-border:  rgba(255,255,255,.06);
  --sh:         0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --sh2:        0 4px 16px rgba(0,0,0,.4);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--tx);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background .2s, color .2s;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── LAYOUT ─────────────────────────────────────────────── */
.wrapper { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sw);
  background: var(--sb-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .25s;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sb-brand {
  padding: 20px 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sb-border);
}
.sb-brand-icon {
  width: 36px; height: 36px;
  background: var(--blue);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-brand-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-brand-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.sb-brand-name span { color: var(--blue); }

.sb-nav { flex: 1; padding: 10px 0; }

.sb-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.25);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 18px 5px;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  color: var(--sb-tx);
  font-size: 13px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: all .15s;
  cursor: pointer;
  position: relative;
}
.sb-link:hover {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9);
}
.sb-link.active {
  background: var(--sb-active);
  color: #fff;
  border-left-color: var(--blue);
}
.sb-link svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; opacity: .8;
}
.sb-link.active svg { opacity: 1; }

.sb-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sb-user { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.sb-avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), #7C3AED);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sb-name { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-role { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 1px; }
.btn-out {
  color: rgba(255,255,255,.3);
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: .15s; flex-shrink: 0;
}
.btn-out:hover { color: #fff; background: rgba(255,255,255,.08); }
.btn-out svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── MAIN ────────────────────────────────────────────────── */
.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 22px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  transition: background .2s;
}
.top-title {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  color: var(--tx);
  letter-spacing: -.2px;
}
.top-right { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--tx-2);
  transition: .15s;
  position: relative;
}
.icon-btn:hover { background: var(--border); color: var(--tx); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alerta-dot {
  width: 7px; height: 7px;
  background: #EF4444;
  border-radius: 50%;
  position: absolute;
  top: 5px; right: 5px;
  border: 1.5px solid var(--surface);
}

.btn-menu { background: none; border: none; cursor: pointer; padding: 6px; color: var(--tx-2); display: none; }
.btn-menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ── PAGE BODY ───────────────────────────────────────────── */
.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

/* ── CARD ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--sh);
  transition: background .2s, border-color .2s;
}
.card-hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  color: var(--tx);
  gap: 10px;
}
.card-bd { padding: 18px; }
.card-flush { }

/* ── STAT CARD ───────────────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--sh);
  transition: all .15s;
}
.stat-card:hover { box-shadow: var(--sh2); transform: translateY(-1px); }

.stat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ic-blue   { background: #EFF6FF; color: #2563EB; }
.ic-green  { background: #F0FDF4; color: #16A34A; }
.ic-orange { background: #FFF7ED; color: #EA580C; }
.ic-purple { background: #FAF5FF; color: #7C3AED; }
.ic-red    { background: #FEF2F2; color: #DC2626; }
.ic-teal   { background: #F0FDFA; color: #0D9488; }
.ic-amber  { background: #FFFBEB; color: #D97706; }

.dark .ic-blue   { background: rgba(37,99,235,.15); color: #60A5FA; }
.dark .ic-green  { background: rgba(22,163,74,.15);  color: #4ADE80; }
.dark .ic-orange { background: rgba(234,88,12,.15);  color: #FB923C; }
.dark .ic-purple { background: rgba(124,58,237,.15); color: #A78BFA; }
.dark .ic-red    { background: rgba(220,38,38,.15);  color: #F87171; }
.dark .ic-teal   { background: rgba(13,148,136,.15); color: #2DD4BF; }
.dark .ic-amber  { background: rgba(217,119,6,.15);  color: #FCD34D; }

.stat-val  { font-size: 22px; font-weight: 800; color: var(--tx); letter-spacing: -.5px; line-height: 1; }
.stat-lbl  { font-size: 11px; color: var(--tx-2); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.stat-sub  { font-size: 11px; font-weight: 600; }
.stat-sub.up   { color: #16A34A; }
.stat-sub.down { color: #DC2626; }

/* ── TABLE ───────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--tx-3);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: var(--surface-2);
  white-space: nowrap;
}
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--tx);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover td { background: var(--surface-2); }

/* ── BADGE ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.bg-success { background: #DCFCE7; color: #15803D; }
.bg-warning { background: #FEF3C7; color: #B45309; }
.bg-info    { background: #DBEAFE; color: #1D4ED8; }
.bg-danger  { background: #FEE2E2; color: #B91C1C; }
.bg-purple  { background: #EDE9FE; color: #6D28D9; }
.bg-gray    { background: #F1F5F9; color: #475569; }
.bg-teal    { background: #CCFBF1; color: #0F766E; }
.bg-orange  { background: #FFEDD5; color: #C2410C; }

.dark .bg-success { background: rgba(21,128,61,.2);   color: #4ADE80; }
.dark .bg-warning { background: rgba(180,83,9,.2);    color: #FCD34D; }
.dark .bg-info    { background: rgba(29,78,216,.2);   color: #93C5FD; }
.dark .bg-danger  { background: rgba(185,28,28,.2);   color: #FCA5A5; }
.dark .bg-purple  { background: rgba(109,40,217,.2);  color: #C4B5FD; }
.dark .bg-gray    { background: rgba(71,85,105,.2);   color: #94A3B8; }
.dark .bg-teal    { background: rgba(15,118,110,.2);  color: #5EEAD4; }
.dark .bg-orange  { background: rgba(194,65,12,.2);   color: #FB923C; }

/* ── ALERT BAR ───────────────────────────────────────────── */
.alert-bar {
  padding: 10px 16px;
  border-radius: var(--r);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid;
  font-weight: 500;
}
.alert-bar svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.alert-success { background: #F0FDF4; color: #15803D; border-left-color: #22C55E; }
.alert-danger  { background: #FEF2F2; color: #B91C1C; border-left-color: #EF4444; }
.alert-warning { background: #FFFBEB; color: #B45309; border-left-color: #F59E0B; }
.alert-info    { background: #EFF6FF; color: #1D4ED8; border-left-color: #3B82F6; }
.dark .alert-success { background: rgba(21,128,61,.12); color: #4ADE80; }
.dark .alert-danger  { background: rgba(185,28,28,.12); color: #FCA5A5; }
.dark .alert-warning { background: rgba(180,83,9,.12);  color: #FCD34D; }
.dark .alert-info    { background: rgba(29,78,216,.12); color: #93C5FD; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
  display: block;
}
.form-control, .form-select {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--tx) !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
  background: var(--surface) !important;
  color: var(--tx) !important;
}
.form-control::placeholder { color: var(--tx-3) !important; }
.dark .form-control, .dark .form-select {
  background: var(--surface-2) !important;
  color: var(--tx) !important;
}
.dark .form-select option { background: #1a2336; color: var(--tx); }

/* ── BOTÕES BOOTSTRAP OVERRIDE ───────────────────────────── */
.btn { border-radius: var(--r) !important; font-weight: 600 !important; font-size: 13px !important; }
.btn-primary { background: var(--blue) !important; border-color: var(--blue) !important; }
.btn-primary:hover { background: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
.btn-outline-primary { color: var(--blue) !important; border-color: var(--blue) !important; }
.btn-outline-primary:hover { background: var(--blue) !important; color: #fff !important; }
.dark .btn-outline-secondary { color: var(--tx-2) !important; border-color: var(--border-2) !important; }
.dark .btn-outline-secondary:hover { background: var(--surface-2) !important; color: var(--tx) !important; }
.dark .btn-outline-danger { color: #F87171 !important; border-color: rgba(248,113,113,.4) !important; }
.dark .btn-outline-success { color: #4ADE80 !important; border-color: rgba(74,222,128,.4) !important; }

/* ── ACTIONS ─────────────────────────────────────────────── */
.actions { display: flex; gap: 4px; flex-wrap: nowrap; }

/* ── VAL BOX ─────────────────────────────────────────────── */
.val-box {
  background: var(--blue-lt);
  border: 1px solid var(--blue-mid);
  border-radius: var(--r);
  padding: 12px 16px;
  text-align: center;
}
.val-box .val { font-size: 22px; font-weight: 800; color: var(--blue); }

/* ── KANBAN ──────────────────────────────────────────────── */
.kb-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px;
  min-height: 80px;
}
.kb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--sh);
}
.kb-card:hover { box-shadow: var(--sh2); transform: translateY(-1px); border-color: var(--blue); }

/* ── PDV ─────────────────────────────────────────────────── */
.pdv-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 12px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  box-shadow: var(--sh);
}
.pdv-item:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1), var(--sh2);
  transform: translateY(-1px);
}

/* ── PAGINATION ──────────────────────────────────────────── */
.dark .page-link { background: var(--surface) !important; border-color: var(--border) !important; color: var(--tx-2) !important; }
.dark .page-item.active .page-link { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }

/* ── SCROLLBAR (dark) ────────────────────────────────────── */
.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
.dark ::-webkit-scrollbar-track { background: var(--bg); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar { position: fixed; z-index: 1000; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,.3); }
  .main-wrap { width: 100%; }
  .btn-menu { display: flex; }
}

/* ── UTILITIES ───────────────────────────────────────────── */
.text-muted { color: var(--tx-2) !important; }
.border-bottom { border-color: var(--border) !important; }
.input-group-text { background: var(--surface-2) !important; border-color: var(--border-2) !important; color: var(--tx-2) !important; }
.dark .modal-content { background: var(--surface) !important; border-color: var(--border) !important; color: var(--tx) !important; }
.dark .modal-header { border-color: var(--border) !important; }
.dark .modal-footer { border-color: var(--border) !important; }

/* ═══════════════════════════════════════════
   DARK MODE — VERSÃO MAIS CLARA E LEGÍVEL
═══════════════════════════════════════════ */
.dark {
  --blue:       #60A5FA;
  --blue-dark:  #3B82F6;
  --blue-lt:    rgba(96,165,250,.12);
  --blue-mid:   rgba(96,165,250,.2);

  /* Superfícies mais claras — mais fácil de ver */
  --bg:         #1C2333;
  --surface:    #242F44;
  --surface-2:  #2A3755;
  --border:     rgba(255,255,255,.1);
  --border-2:   rgba(255,255,255,.16);

  /* Texto mais contrastado */
  --tx:         #F0F4FF;
  --tx-2:       #A8B8D0;
  --tx-3:       #5A7090;

  --sh:         0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
  --sh2:        0 4px 16px rgba(0,0,0,.35);
}

/* Cards mais visíveis no dark */
.dark .card        { background: #242F44; border-color: rgba(255,255,255,.09); }
.dark .stat-card   { background: #242F44; border-color: rgba(255,255,255,.09); }
.dark .kb-col      { background: #1C2333; border-color: rgba(255,255,255,.07); }
.dark .kb-card     { background: #242F44; border-color: rgba(255,255,255,.09); }
.dark .pdv-item    { background: #242F44; border-color: rgba(255,255,255,.09); }
.dark .topbar      { background: #242F44; border-color: rgba(255,255,255,.08); }
.dark .icon-btn    { background: #2A3755; border-color: rgba(255,255,255,.1); }
.dark .tbl th      { background: #1C2333; color: #7A90B0; }
.dark .tbl td      { border-color: rgba(255,255,255,.06); }
.dark .tbl tbody tr:hover td { background: rgba(255,255,255,.04); }

/* Form inputs mais visíveis */
.dark .form-control,
.dark .form-select {
  background: #1C2333 !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #F0F4FF !important;
}
.dark .form-control:focus,
.dark .form-select:focus {
  border-color: #60A5FA !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.15) !important;
  background: #1C2333 !important;
}
.dark .input-group-text {
  background: #2A3755 !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #A8B8D0 !important;
}

/* Badges mais vibrantes no dark */
.dark .bg-success { background: rgba(74,222,128,.15); color: #6EE7B7; border: 1px solid rgba(74,222,128,.25); }
.dark .bg-warning { background: rgba(251,191,36,.15);  color: #FDE68A; border: 1px solid rgba(251,191,36,.25); }
.dark .bg-info    { background: rgba(96,165,250,.15);  color: #93C5FD; border: 1px solid rgba(96,165,250,.25); }
.dark .bg-danger  { background: rgba(248,113,113,.15); color: #FCA5A5; border: 1px solid rgba(248,113,113,.25); }
.dark .bg-purple  { background: rgba(167,139,250,.15); color: #C4B5FD; border: 1px solid rgba(167,139,250,.25); }
.dark .bg-teal    { background: rgba(45,212,191,.15);  color: #99F6E4;  border: 1px solid rgba(45,212,191,.25); }
.dark .bg-gray    { background: rgba(148,163,184,.12); color: #CBD5E1; border: 1px solid rgba(148,163,184,.2); }

/* Alert bars no dark */
.dark .alert-success { background: rgba(74,222,128,.1);  color: #6EE7B7; border-left-color: #4ADE80; }
.dark .alert-danger  { background: rgba(248,113,113,.1); color: #FCA5A5; border-left-color: #F87171; }
.dark .alert-warning { background: rgba(251,191,36,.1);  color: #FDE68A; border-left-color: #FCD34D; }
.dark .alert-info    { background: rgba(96,165,250,.1);  color: #93C5FD; border-left-color: #60A5FA; }

/* Stat icons no dark */
.dark .ic-blue   { background: rgba(96,165,250,.15);  color: #93C5FD; }
.dark .ic-green  { background: rgba(74,222,128,.15);  color: #6EE7B7; }
.dark .ic-orange { background: rgba(251,146,60,.15);  color: #FDBA74; }
.dark .ic-purple { background: rgba(167,139,250,.15); color: #C4B5FD; }
.dark .ic-red    { background: rgba(248,113,113,.15); color: #FCA5A5; }
.dark .ic-teal   { background: rgba(45,212,191,.15);  color: #5EEAD4; }
.dark .ic-amber  { background: rgba(251,191,36,.15);  color: #FDE68A; }

/* val-box no dark */
.dark .val-box { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.2); }
.dark .val-box .val { color: #93C5FD; }

/* Scrollbar bonita no dark */
.dark * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.dark ::-webkit-scrollbar       { width: 5px; height: 5px; }
.dark ::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* Modal no dark */
.dark .modal-content  { background: #242F44 !important; border-color: rgba(255,255,255,.1) !important; color: #F0F4FF !important; }
.dark .modal-header,
.dark .modal-footer   { border-color: rgba(255,255,255,.08) !important; }

/* Paginação no dark */
.dark .page-link       { background: #242F44 !important; border-color: rgba(255,255,255,.1) !important; color: #A8B8D0 !important; }
.dark .page-item.active .page-link { background: #3B82F6 !important; border-color: #3B82F6 !important; color: #fff !important; }