/* =========================================================
   KPI WIDGET GRID
   ========================================================= */
.widgit-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 25px;
}

.widgit-card {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.widgit-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}

.widgit-label {
  color: var(--text-sub);
  font-size: 12px;
  text-transform: uppercase;
}

.widgit-value {
  font-size: 20px;
  font-weight: bold;
}

.widgit-sub {
  color: var(--text-sub);
  font-size: 12px;
}

/* =========================================================
   DASHBOARD CARD GRID
   ========================================================= */
.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background: var(--card-bg);
  border-left: 8px solid #0078d4;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: 22px;
  position: relative;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}

.card h2 {
  align-items: center;
  color: #0078d4;
  display: flex;
  font-size: 20px;
  gap: 10px;
  margin: 0;
}

[data-theme="dark"] .card h2 {
  color: #60a5fa;
}

.card p {
  color: var(--text-sub);
  font-size: 14px;
  margin: 0;
}

.card .stat {
  align-items: center;
  color: var(--text-sub);
  display: flex;
  font-size: 13px;
  gap: 6px;
  margin-top: 6px;
}

/* =========================================================
   CARD ACCENT ANIMATION
   ========================================================= */
.card::after {
  background: radial-gradient(circle at center, rgba(148, 163, 184, 0.25), transparent 60%);
  content: "";
  height: 100px;
  opacity: 0;
  position: absolute;
  right: -40px;
  top: -40px;
  transition: opacity 0.2s ease;
  width: 100px;
}

.card:hover::after {
  opacity: 1;
}

/* =========================================================
   BADGES
   ========================================================= */
.badge {
  color: var(--text-main);
  font-size: 11px;
  font-weight: bold;
}

/* =========================================================
   COLOUR STRIP VARIANTS
   ========================================================= */
.colour1 { border-left-color: #3b82f6; }  /* Blue */
.colour2 { border-left-color: #a855f7; }  /* Purple */
.colour3 { border-left-color: #f59e0b; }  /* Amber */
.colour4 { border-left-color: #6366f1; }  /* Indigo */
.colour5 { border-left-color: #14b8a6; }  /* Teal */
.colour6 { border-left-color: #ef4444; }  /* Red */
.colour7 { border-left-color: #22c55e; }  /* Green */
.colour8 { border-left-color: #ec4899; }  /* Pink */
.colour9 { border-left-color: #0ea5e9; }  /* Sky Blue */
.colour10 { border-left-color: #f97316; } /* Orange */
.colour11 { border-left-color: #10b981; } /* Emerald */
.colour12 { border-left-color: #8b5cf6; } /* Violet */
.colour13 { border-left-color: #eab308; } /* Yellow */
.colour14 { border-left-color: #475569; } /* Slate */
.colour15 { border-left-color: #d946ef; } /* Fuchsia */

/* =========================================================
   UNIVERSAL TABLE STYLES
   ========================================================= */
table {
  background: var(--card-bg);
  border-collapse: collapse;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  width: 100%;
}

table th,
table td {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  padding: 12px 14px;
  text-align: left;
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: #374151;
}

table thead th {
  background: var(--card-bg);
  font-weight: bold;
}

table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

table tbody tr:hover {
  background: #f5f5f5;
}

[data-theme="dark"] table tbody tr:hover {
  background: #2d3748;
}

th i {
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.6;
}

.table th a:hover {
  text-decoration: none;
}

.table th a {
  display: inline-block;
  padding: 2px 4px;
  color: inherit;
}

/* =========================================================
   MULTI SELECT TRANSFER (IMPROVED)
   ========================================================= */
.transfer-container {
  display: flex;
  gap: 20px;
  align-items: stretch;
  /* lists fill vertically */
  justify-content: center;
  margin-top: 10px;
}

/* Left + Right lists */
.transfer-list {
  width: 320px;
  height: 420px;
  /* taller for better visibility */
  min-height: 350px;
  padding: 6px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  overflow-y: auto;
}

/* Middle button column */
.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* center vertically */
  gap: 12px;
}

.transfer-buttons button {
  width: 60px;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #888;
  border-radius: 4px;
  background: #f5f5f5;
  transition: background 0.2s;
}

.transfer-buttons button:hover {
  background: #e0e0e0;
}