/* ===================================
   Alert Components
   =================================== */

.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.alert-primary {
  color: #004085;
  background-color: #cce7ff;
  border-color: #b3d9ff;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

/* Alert Dismissible */
.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1.25rem;
  background: none;
  border: none;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.alert-dismissible .btn-close:hover {
  opacity: 0.75;
}

.alert-dismissible .btn-close::before {
  content: "×";
}

/* Fade Animation */
.alert.fade {
  transition: opacity 0.15s linear;
}

.alert.fade:not(.show) {
  opacity: 0;
}

.alert.show {
  opacity: 1;
}

/* ===================================
   Card Components
   =================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

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

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: rgba(0, 0, 0, 0.02);
  font-weight: 600;
}

.card-footer {
  padding: 0.75rem 1.5rem;
  background-color: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.card-text {
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.card-img-top {
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-img-bottom {
  width: 100%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Card Variants */
.card.border-primary {
  border-color: var(--color-primary);
}

.card.border-secondary {
  border-color: var(--color-text-secondary);
}

.card.border-success {
  border-color: var(--color-success);
}

.card.border-danger {
  border-color: var(--color-error);
}

.card.border-warning {
  border-color: var(--color-warning);
}

.card.border-info {
  border-color: var(--color-primary-light);
}

/* Card Groups */
.card-group {
  display: flex;
  flex-direction: column;
}

@media (min-width: 576px) {
  .card-group {
    flex-flow: row wrap;
  }
  
  .card-group > .card {
    flex: 1 0 0%;
  }
}

/* Card with shadow variants */
.card.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.card.shadow {
  box-shadow: var(--shadow-md);
}

.card.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Admin-specific card border styles */
.border-left-primary {
  border-left: 0.25rem solid var(--color-primary) !important;
}

.border-left-success {
  border-left: 0.25rem solid var(--color-success) !important;
}

.border-left-info {
  border-left: 0.25rem solid var(--color-primary-light) !important;
}

.border-left-warning {
  border-left: 0.25rem solid var(--color-warning) !important;
}

/* Gray color utilities */
.text-gray-800 {
  color: #5a5c69;
}

.text-gray-300 {
  color: #dddfeb;
}

/* Badge Component */
.badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--radius-sm);
}

.badge.bg-primary { background-color: var(--color-primary) !important; color: white; }
.badge.bg-secondary { background-color: var(--color-text-secondary) !important; color: white; }
.badge.bg-success { background-color: var(--color-success) !important; color: white; }
.badge.bg-danger { background-color: var(--color-error) !important; color: white; }
.badge.bg-warning { background-color: var(--color-warning) !important; color: black; }
.badge.bg-info { background-color: var(--color-primary) !important; color: white; }
.badge.bg-light { background-color: #f8f9fa !important; color: #212529; }
.badge.bg-dark { background-color: #212529 !important; color: white; }

/* Table Components */
.table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid var(--color-border);
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-primary);
}

.table tbody + tbody {
  border-top: 2px solid var(--color-border);
}

.table-sm th,
.table-sm td {
  padding: 0.5rem;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
}

/* Button outline variants */
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  color: white;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

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

.btn-outline-success:hover {
  color: white;
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-outline-info {
  color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  background-color: transparent;
}

.btn-outline-info:hover {
  color: white;
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* ===================================
   List Group Components
   =================================== */

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--radius-md);
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item:hover {
  background-color: #f8f9fa;
  color: #495057;
}

.list-group-item.active {
  z-index: 2;
  color: white;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.list-group-item.disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: var(--color-surface);
}

/* List group flush */
.list-group-flush {
  border-radius: 0;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
  border-radius: 0;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}