/* =========================================================
   🎛 COMPONENTS: buttons, cards, tables, tabs, badges
   ========================================================= */

/* 🔘 Buttons */
.btn{
  width:auto; height:var(--btn-height);
  padding:.75rem 2rem; /* đệm 2 bên theo yêu cầu */
  border:none; border-radius:.5rem;
  font-size:clamp(.75rem,1vw,.95rem); font-weight:600; line-height:1;
  transition:var(--transition); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  position:relative; overflow:hidden; box-shadow:0 4px 6px -1px rgba(0,0,0,.1);
  white-space:nowrap; text-align:center; min-width:80px; max-width:200px;
}
.btn:focus{ outline:2px solid var(--primary-color); outline-offset:2px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none!important; box-shadow:none!important; }

.btn-xs{ height:24px; min-width:24px!important; padding:.125rem .5rem; font-size:.7rem; border-radius:.25rem; }
.btn-sm{ height:30px; min-width:60px; padding:.25rem .75rem; font-size:.75rem; border-radius:.375rem; }
.btn-lg{ height:56px; min-width:150px; padding:1rem 2.5rem; font-size:1.1rem; }

.btn-outline{
  background:transparent; color:var(--primary-color); border:1px solid var(--primary-color); box-shadow:none;
}
.btn-outline:hover{
  background:var(--primary-color); color:#fff; transform:translateY(-2px);
  box-shadow:0 8px 25px -3px rgba(0,0,0,.15);
}

/* Icon-only base (dùng biến --btn-height) */
.btn-icon{ --btn-min-width: var(--btn-height); padding:0; border-radius:50%; }
.btn-icon .btn-text{ display:none; }

/* Icon-only utilities (Font Awesome) */
.delete-base,.edit-base,.add-base,.view-base{
  min-width:var(--btn-height); padding:0; display:inline-flex; align-items:center; justify-content:center; position:relative;
}
.delete-base .btn-text,.edit-base .btn-text,.add-base .btn-text,.view-base .btn-text{ display:none; }
.delete-base::before,.edit-base::before,.add-base::before,.view-base::before{
  font-family:"Font Awesome 5 Free"; font-weight:900; font-size:.8rem;
}
.delete-base::before{ content:"\f2ed"; } /* trash-alt */
.edit-base::before  { content:"\f044"; } /* edit */
.add-base::before   { content:"\f067"; } /* plus */
.view-base::before  { content:"\f06e"; } /* eye */
.btn-xs.delete-base::before,.btn-xs.edit-base::before,.btn-xs.add-base::before,.btn-xs.view-base::before{ font-size:.7rem; }
.btn-sm.delete-base::before,.btn-sm.edit-base::before,.btn-sm.add-base::before,.btn-sm.view-base::before{ font-size:.8rem; }
.btn-lg.delete-base::before,.btn-lg.edit-base::before,.btn-lg.add-base::before,.btn-lg.view-base::before{ font-size:1rem; }

.save-base::before{ content:"\f0c7"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.cancel-base::before{ content:"\f00d"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.search-base::before{ content:"\f002"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.download-base::before{ content:"\f019"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.upload-base::before{ content:"\f093"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.print-base::before{ content:"\f02f"; font-family:"Font Awesome 5 Free"; font-weight:900; }

/* ==============================================================
   ✨ Floating Login Button
   ============================================================== */

.btn-login-float {position: fixed; top: 30px; right: 30px; z-index: 9999;
  /* Màu nền dùng gradient từ primary → accent */
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 26px;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /* Hiệu ứng nổi & bóng đổ */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Hiệu ứng hover — sáng và “rung nhẹ” */
.btn-login-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
}
/* Khi click giữ */
.btn-login-float:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Hiệu ứng glow nhẹ (tuỳ chọn) */
.btn-login-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-login-float:hover::before {
  opacity: 0.4;
}

/* Nút nhỏ gọn trên mobile */
@media (max-width: 768px) {
  .btn-login-float {
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    font-size: 0.95rem;
  }
}

/* 🎴 Cards */
.card{
  background:#fff; border-radius:var(--border-radius);
  box-shadow:var(--shadow-md); border:1px solid rgba(0,0,0,.05);
  transition:var(--transition); margin-bottom:1rem; overflow:hidden;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card-header{
  background:rgba(30,58,138,.05);
  padding:1rem; border-bottom:1px solid rgba(0,0,0,.1);
  font-weight:600; color:var(--primary-color);
}
.card-body{ padding:1rem; }

/* 📊 Tables */
.table-wrap{ background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); border:1px solid #e2e8f0; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; background:#fff; }

thead th{
  background:var(--table-header-bg); color:#fff; font-size:var(--font-size-base); font-weight:600;
  padding:10px 8px; white-space:nowrap; border:1px solid #e2e8f0; text-align:center; vertical-align:middle;
}
tbody td{
  font-size:.95rem; padding:8px 10px; vertical-align:middle; border:1px solid #e2e8f0; transition:background .25s ease;
}

/* Zebra + Hover (giảm độ tương phản để đỡ “nặng”) */
tbody tr:nth-child(odd){ background:#fafafa; }
tbody tr:nth-child(even){ background:#f5f7fa; }
tbody tr:hover{ background:rgba(30,58,138,.08); cursor:pointer; }

.table-bordered{ border:1px solid rgba(0,0,0,.1); }
.table-bordered th,.table-bordered td{ border:1px solid rgba(0,0,0,.1); }

.table-sm th,.table-sm td{ padding:.5rem; font-size:var(--font-size-sm); }

/* 🔔 Badges */
.badge{
  display:inline-block; padding:.25rem .5rem;
  font-size:var(--font-size-xs); font-weight:600; border-radius:20px;
  background:var(--secondary-color); color:#fff;
}
.badge-primary{ background:var(--primary-color); }
.badge-success{ background:var(--success-color); }

/* 📱 Component responsives */
@media (max-width: 576px){
  /* Chỉ full-width button khi bọc trong .stack-on-mobile để không ảnh hưởng toàn site */
  .stack-on-mobile .btn{ width:100%; margin-bottom:.5rem; }
}