/* =============================================
   FILE: cards-and-widgets.css
   PURPOSE: Reusable Card Components, Badges, Tags, Alert Boxes, General UI Widgets
   ============================================= */

/* --- GENERIC CARD --- */
.card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* --- BADGE --- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge-primary { background: rgba(21,101,192,0.12); color: var(--color-primary); }
.badge-success { background: rgba(46,125,50,0.12); color: var(--color-success); }
.badge-warning { background: rgba(245,127,23,0.12); color: var(--color-warning); }
.badge-danger  { background: rgba(198,40,40,0.12);  color: var(--color-danger); }

/* --- TAG --- */
.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-body);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* --- HORIZONTAL RULE --- */
.hr { border: none; height: 1px; background: var(--border-color); margin: 1.5rem 0; }

/* --- INFO BOX --- */
.info-box {
  border-radius: var(--border-radius);
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.6;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.info-box.info { background: #e3f2fd; border-left: 4px solid var(--color-primary); color: #0d47a1; }
.info-box.success { background: #e8f5e9; border-left: 4px solid var(--color-success); color: #1b5e20; }
.info-box.warning { background: #fff8e1; border-left: 4px solid var(--color-warning); color: #e65100; }
.info-box.error { background: #ffebee; border-left: 4px solid var(--color-danger); color: #b71c1c; }

/* --- TOOLTIP --- */
[data-tooltip] { position: relative; cursor: pointer; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-dark);
  color: #fff;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  pointer-events: none;
}
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }

/* --- SKELETON LOADER --- */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- LOADING SPINNER --- */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- PAGINATION --- */
.pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.page-btn {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}
.page-btn:hover, .page-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- TABLE --- */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.styled-table th {
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
}
.styled-table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-color); }
.styled-table tr:hover td { background: rgba(21,101,192,0.04); }