body { font-family: 'Arial', sans-serif; }
.card { border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* ===== Dystay Button Theme (override Bootstrap) ===== */
:root{
  --dys-bg: #0b1220;         /* deep navy (logo icon) */
  --dys-text: #ffffff;
  --dys-muted: #c9d2e1;

  --dys-green: #00f07a;      /* brand neon */
   --dys-green-200: #02d971; 
  --dys-green-600: #00d96e;
  --dys-green-700: #00c463;

  --dys-red: #ff4d4f;        /* danger */
  --dys-red-700: #e64547;

  --dys-amber: #ffc857;      /* warning */
  --dys-amber-700: #e6b34e;

  --dys-cyan: #31d2f2;       /* info */
  --dys-cyan-700: #29bedd;

  --dys-gray: #2a3140;       /* default/secondary */
  --dys-gray-700: #232938;
}

/* Base btn look */
.btn{
  --btn-bg: var(--dys-gray);
  --btn-bg-hover: var(--dys-gray-700);
  --btn-color: var(--dys-text);
  --btn-ring: rgba(0,240,122,.35); /* neon ring */
  border: 0;
  color: var(--btn-color);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 92%, #ffffff 8%), var(--btn-bg));
  border-radius: 6px;               /* modern but not too round */
  padding: 5px 14px;             /* comfortable hit area */
  font-weight: normal;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.btn:hover{
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-bg-hover) 90%, #ffffff 10%), var(--btn-bg-hover));
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,.3);
}
.btn:active{
  transform: translateY(0);
  filter: saturate(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.25) inset, 0 4px 12px rgba(0,0,0,.25);
}
.btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--btn-ring);
}
.btn:disabled, .btn.disabled{
  opacity: .65;
  transform: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Variants */
.btn-success{
  --btn-bg: var(--dys-green);
  --btn-bg-hover: var(--dys-green-600);
  --btn-ring: rgba(0,240,122,.45);
  color: #00140a; /* better contrast on neon */
}
.btn-success:hover{
  color: #00140a; /* better contrast on neon */
}
.btn-danger{
  --btn-bg: var(--dys-red);
  --btn-bg-hover: var(--dys-red-700);
  --btn-ring: rgba(255,77,79,.35);
}
.btn-warning{
  --btn-bg: var(--dys-amber);
  --btn-bg-hover: var(--dys-amber-700);
  --btn-ring: rgba(255,200,87,.35);
  color: #1a1200;
}
.btn-info{
  --btn-bg: var(--dys-cyan);
  --btn-bg-hover: var(--dys-cyan-700);
  --btn-ring: rgba(49,210,242,.35);
  color: #03121a;
}
.btn-secondary, .btn-default{     /* treat .btn-default as alias */
  --btn-bg: var(--dys-gray);
  --btn-bg-hover: var(--dys-gray-700);
  --btn-ring: rgba(255,255,255,.18);
}

/* Optional outline styles (if you use .btn-outline-*) */
.btn-outline-success{
  color: var(--dys-green);
  border: 2px solid var(--dys-green);
  background: transparent;
}
.btn-outline-success:hover{
  background: rgba(0,240,122,.08);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}

/* Nice on dark UI backgrounds */
/* body{ background-color: var(--dys-bg); color: var(--dys-text); } */
.bg-dark {
  background-color: var(--dys-bg)!important;
}

.text-muted {
  color:#bdbdbd!important;
}
.text-success {
  color:#00d96e!important;
}

button.showPassBtn {
  background: #f0f0f0!important;
  color:#b2b2b2!important;
}
#footer-text {
  color: #5f6061 !important;
}

a {
  text-decoration: none!important;
}

  .pulse {
    animation: pulse 1.6s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.12); }
  }

/* ===== DYStay Pagination (Bootstrap) ===== */
.pagination {
  gap: .35rem;               /* a touch of breathing room */
  margin: .75rem 0 0;
}

.pagination .page-link {
  background: linear-gradient(
               180deg,
               color-mix(in srgb, var(--dys-gray) 92%, #ffffff 8%),
               var(--dys-gray)
             );
  border: 1px solid var(--dys-gray-700);
  color: var(--dys-muted);
  padding: .45rem .75rem;
  line-height: 1.1;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pagination .page-link:hover {
  background: linear-gradient(
               180deg,
               color-mix(in srgb, var(--dys-gray-700) 90%, #ffffff 10%),
               var(--dys-gray-700)
             );
  color: #ffffff;
  border-color: var(--dys-gray-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,.3);
  text-decoration: none;
}

.pagination .page-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0,240,122,.35); /* matches --btn-ring */
}

.pagination .page-item.active .page-link,
.pagination .page-link[aria-current="page"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dys-green) 92%, #ffffff 8%), var(--dys-green));
  border-color: var(--dys-green-600);
  color: #00140a; /* contrast on neon */
  box-shadow: 0 6px 14px rgba(0,240,122,.28);
  transform: translateY(-1px);
}

.pagination .page-item.disabled .page-link {
  background: linear-gradient(
               180deg,
               color-mix(in srgb, var(--dys-gray) 96%, #ffffff 4%),
               var(--dys-gray)
             );
  border-color: var(--dys-gray-700);
  color: #7b8496;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Size variants to match your button rhythm */
.pagination.pagination-sm .page-link {
  padding: .3rem .55rem;
  border-radius: 6px;
  font-size: .9rem;
}
.pagination.pagination-lg .page-link {
  padding: .6rem .95rem;
  border-radius: 8px;
  font-size: 1.05rem;
}

/* Optional compact utility for tight tables */
.pager-compact .pagination { gap: .25rem; }
.pager-compact .page-link { padding: .35rem .6rem; }

/* Center on dark backgrounds nicely */
.bg-dark .pagination .page-link { color: var(--dys-muted); }

/* ===== DYStay Page Jump (Select) ===== */
.page-jump {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.page-jump-label {
  color: var(--dys-gray-700);
  font-size: .9rem;
}
.page-jump-select {
  min-width: 88px;
  height: 36px;
  background: #ffffff;
  color: var(--dys-gray-700);
  border-radius: 6px;
  padding: .25rem .5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.page-jump-select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0,240,122,.35);
  border-color: var(--dys-gray-700);
}
.page-jump-total {
  color: var(--dys-muted);
  font-size: .9rem;
}

/* Compact variant */
.pager-compact .page-jump-select { min-width: 70px; height: 32px; }