/* =========================
   COLOR VARIABLES (Optional but clean)
========================= */
:root {
  --mb-primary: #0d6efd;
  --mb-secondary: #6c757d;
  --mb-success: #198754;
  --mb-danger: #dc3545;
  --mb-warning: #ffc107;
  --mb-info: #0dcaf0;
  --mb-dark: #212529;
}

/* =========================
   SOLID BUTTONS
========================= */

.btn-secondary {
  background: var(--mb-secondary);
  color: #fff;
}

.btn-success {
  background: var(--mb-success);
  color: #fff;
}

.btn-danger {
  background: var(--mb-danger);
  color: #fff;
}

.btn-warning {
  background: var(--mb-warning);
  color: #000;
}

.btn-info {
  background: var(--mb-info);
  color: #000;
}

.btn-dark {
  background: var(--mb-dark);
  color: #fff;
}

/* Hover Effects */
.btn-secondary:hover { filter: brightness(0.9); }
.btn-success:hover { filter: brightness(0.9); }
.btn-danger:hover { filter: brightness(0.9); }
.btn-warning:hover { filter: brightness(0.95); }
.btn-info:hover { filter: brightness(0.9); }
.btn-dark:hover { filter: brightness(0.9); }

/* =========================
   OUTLINE BUTTONS
========================= */

.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--mb-secondary);
  color: var(--mb-secondary);
}

.btn-outline-success {
  background: transparent;
  border: 1px solid var(--mb-success);
  color: var(--mb-success);
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid var(--mb-danger);
  color: var(--mb-danger);
}

.btn-outline-warning {
  background: transparent;
  border: 1px solid var(--mb-warning);
  color: var(--mb-warning);
}

.btn-outline-info {
  background: transparent;
  border: 1px solid var(--mb-info);
  color: var(--mb-info);
}

.btn-outline-dark {
  background: transparent;
  border: 1px solid var(--mb-dark);
  color: var(--mb-dark);
}

/* Outline Hover */
.btn-outline-secondary:hover {
  background: var(--mb-secondary);
  color: #fff;
}

.btn-outline-success:hover {
  background: var(--mb-success);
  color: #fff;
}

.btn-outline-danger:hover {
  background: var(--mb-danger);
  color: #fff;
}

.btn-outline-warning:hover {
  background: var(--mb-warning);
  color: #000;
}

.btn-outline-info:hover {
  background: var(--mb-info);
  color: #000;
}

.btn-outline-dark:hover {
  background: var(--mb-dark);
  color: #fff;
}

/* =========================
   GRID (Flexbox)
========================= */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

/* =========================
   BUTTONS
========================= */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  transition: 0.2s ease;
}

.btn-primary {
  background: #0d6efd;
  color: #fff;
}

.btn-primary:hover {
  background: #0b5ed7;
}

.btn-outline {
  background: transparent;
  border: 1px solid #0d6efd;
  color: #0d6efd;
}

.btn-outline:hover {
  background: #0d6efd;
  color: #fff;
}

.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.25rem; }
.btn-block { display: block; width: 100%; }

/* =========================
   IMAGE
========================= */
.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   UTILITIES
========================= */


.w-100 { width: 100%; }

/* ======================================
   BASE TABLE
====================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.table th,
.table td {
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  text-align: left;
}

.table thead {
  background-color: #f8f9fa;
  font-weight: 600;
}

/* ======================================
   STRIPED
====================================== */
.table-striped tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* ======================================
   BORDERED
====================================== */
.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

/* ======================================
   TABLE BACKGROUND VARIANTS
====================================== */

.table-primary {
  background-color: #cfe2ff;
}

.table-secondary {
  background-color: #e2e3e5;
}

.table-success {
  background-color: #d1e7dd;
}

.table-danger {
  background-color: #f8d7da;
}

.table-warning {
  background-color: #fff3cd;
}

.table-info {
  background-color: #cff4fc;
}

.table-light {
  background-color: #f8f9fa;
}

.table-dark {
  background-color: #212529;
  color: #fff;
}

/* Ensure dark table text contrast */
.table-dark th,
.table-dark td {
  border-color: #32383e;
}

/* ======================================
   RESPONSIVE WRAPPER
====================================== */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}