/* ======================================================
   MDB-STYLE VIBRANT BUTTONS (SMALL, PILL, GRADIENT)
   Works with your existing .btn-hrm base.
   No white — all colorful. Uniform small size.
====================================================== */

/* unify small size across app */
.btn-hrm {
  height: 34px;
  padding: 0 0.9rem;
  font-size: 0.82rem;
  border-radius: 999px;
  border: 0 !important; /* kill black fallbacks */
  color: var(--btn-text, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background-size: 200% 200%;
  transition: transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-position 0.45s ease,
    filter 0.16s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.08);
}
.btn-hrm:hover {
  transform: translateY(-1px);
  background-position: 100% 0;
  filter: saturate(1.06);
}
.btn-hrm:active {
  transform: translateY(0);
}
.btn-hrm:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(18, 102, 241, 0.22),
    0 10px 22px rgba(2, 6, 23, 0.1);
}

/* icon sizing & color */
.btn-hrm .material-symbols-outlined,
.btn-hrm .material-icons,
.btn-hrm .material-icons-outlined,
.btn-hrm i,
.btn-hrm .btn-icon {
  font-size: 1.05rem;
  line-height: 1;
  color: currentColor;
}

/* icon-only size */
.btn-hrm-icon-only {
  width: 34px;
  height: 34px;
  padding: 0;
}

/* optional shine */
.btn-hrm-shine {
  position: relative;
  overflow: hidden;
}
.btn-hrm-shine::after {
  content: "";
  position: absolute;
  inset: -180% -20%;
  background: linear-gradient(
    75deg,
    transparent 45%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 55%
  );
  transform: translateX(-35%);
  transition: transform 0.6s ease;
}
.btn-hrm-shine:hover::after {
  transform: translateX(35%);
}

/* -------- MDB palette (solid/gradient) --------
   Colors mirror MDB tone: primary/secondary/success/info/warning/danger/dark
   Each uses a subtle gradient for depth and white text (except warning).
*/

/* PRIMARY (MDB blue) */
.btn-mdb-primary {
  --btn-text: #fff;
  background-image: linear-gradient(
    135deg,
    #1266f1 0%,
    #3b71ca 60%,
    #0c56d0 100%
  );
}
/* SECONDARY (purple) */
.btn-mdb-secondary {
  --btn-text: #fff;
  background-image: linear-gradient(
    135deg,
    #b23cfd 0%,
    #8e36e6 60%,
    #7a2bd3 100%
  );
}
/* SUCCESS (green) */
.btn-mdb-success {
  --btn-text: #fff;
  background-image: linear-gradient(
    135deg,
    #00b74a 0%,
    #00a042 60%,
    #00913b 100%
  );
}
/* INFO (cyan) */
.btn-mdb-info {
  --btn-text: #0b1020;
  background-image: linear-gradient(
    135deg,
    #39c0ed 0%,
    #2bb1df 60%,
    #16a3d2 100%
  );
}
/* WARNING (amber) */
.btn-mdb-warning {
  --btn-text: #0b1020;
  background-image: linear-gradient(
    135deg,
    #ffa900 0%,
    #ff8f00 60%,
    #f57c00 100%
  );
}
/* DANGER (red) */
.btn-mdb-danger {
  --btn-text: #fff;
  background-image: linear-gradient(
    135deg,
    #f93154 0%,
    #e3243f 60%,
    #c81e33 100%
  );
}
/* DARK (slate) */
.btn-mdb-dark {
  --btn-text: #fff;
  background-image: linear-gradient(
    135deg,
    #3a3a3a 0%,
    #2b2b2b 60%,
    #1f1f1f 100%
  );
}

/* Soft (tonal) pills — colorful, not white */
.btn-mdb-soft-primary {
  background: rgba(18, 102, 241, 0.18);
  color: #0c56d0;
}
.btn-mdb-soft-secondary {
  background: rgba(178, 60, 253, 0.18);
  color: #7a2bd3;
}
.btn-mdb-soft-success {
  background: rgba(0, 183, 74, 0.18);
  color: #0b7d3a;
}
.btn-mdb-soft-info {
  background: rgba(57, 192, 237, 0.2);
  color: #0c5670;
}
.btn-mdb-soft-warning {
  background: rgba(255, 169, 0, 0.24);
  color: #7a4a00;
}
.btn-mdb-soft-danger {
  background: rgba(249, 49, 84, 0.2);
  color: #8b1426;
}
.btn-mdb-soft-dark {
  background: rgba(51, 65, 85, 0.22);
  color: #1f2937;
}

/* DataTables toolbar — colorful chips (no whites) */
.dt-buttons .btn,
.dt-buttons .btn-hrm {
  border: 0 !important;
  height: 32px;
  padding: 0 0.8rem !important;
  font-size: 0.8rem !important;
  border-radius: 999px !important;
  color: #0b1020 !important;
  background: linear-gradient(
    135deg,
    #c7d2fe 0%,
    #bae6fd 100%
  ) !important; /* indigo → sky */
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.08) !important;
  background-size: 200% 200% !important;
  transition: transform 0.16s ease, background-position 0.45s ease !important;
}
.dt-buttons .btn:hover {
  transform: translateY(-1px);
  background-position: 100% 0 !important;
}

/* Pagination chips */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 0 !important;
  background: rgba(99, 102, 241, 0.12) !important;
  color: #3730a3 !important;
  border-radius: 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #1266f1 0%, #39c0ed 100%) !important;
  color: #fff !important;
}