/* =====================================================
   ROOT VARIABLES (SEMANTIC TOKENS)
===================================================== */

:root {

/* BUTTONS */
--btn-primary-bg: var(--accent-primary);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-text: var(--text-inverse);

--btn-secondary-bg: var(--glass-bg);
--btn-secondary-bg-hover: var(--hover-overlay);
--btn-secondary-text: var(--text-secondary);
--btn-secondary-border: var(--border-subtle);

--btn-danger-bg: var(--color-error-bg);
--btn-danger-bg-hover: rgba(239,68,68,0.2);
--btn-danger-text: var(--color-error);
--btn-danger-border: var(--color-error);

/* INPUTS */
--input-bg: var(--glass-bg);
--input-bg-focus: var(--hover-overlay);
--input-border: var(--border-subtle);
--input-border-focus: var(--accent-primary);
--input-text: var(--text-primary);
--input-placeholder: var(--text-muted);

/* CARDS */
--card-bg: var(--surface-1);
--card-border: var(--border-subtle);
--card-shadow: var(--shadow-md);

/* LIST */
--list-bg: rgba(255,255,255,0.02);
--list-hover-bg: var(--hover-overlay);
--list-active-bg: var(--accent-primary);
--list-active-text: var(--text-inverse);

/* ALERTS */
--alert-bg: var(--glass-bg);
--alert-border: var(--border-subtle);
--alert-text: var(--text-secondary);

--alert-warning-bg: var(--color-warning-bg);
--alert-warning-border: var(--color-warning);

--alert-danger-bg: var(--color-error-bg);
--alert-danger-border: var(--color-error);

/* TABLE */
--table-header-bg: var(--hover-overlay);
--table-row-hover: var(--hover-overlay);

/* PAGINATION */
--pagination-bg: var(--glass-bg);
--pagination-border: var(--border-subtle);
--pagination-hover-border: var(--accent-primary);
--pagination-active-bg: var(--accent-primary);
--pagination-active-text: var(--text-inverse);

/* DROPDOWN */
--dropdown-bg: var(--bg-surface);
--dropdown-hover-bg: var(--hover-overlay);

/* MODAL */
--modal-bg: var(--bg-surface);
--modal-border: var(--border-subtle);
}


/* =====================================================
   BASE LAYOUT
===================================================== */

body {
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-family-base);
}

.container {
  max-width: var(--container-width);
  padding: 0 var(--space-md);
}


/* =====================================================
   BOOTSTRAP BASE THEME (GLOBAL LOOK)
===================================================== */

/* CARDS */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
}

.card-header,
.card-footer {
  background: transparent;
  border: 1px solid var(--card-border);
  border-left: none;
  border-right: none;
}

.card-body {
  padding: var(--space-md);
}


/* BUTTONS */
.btn {
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: var(--transition-fast);
}

.btn-primary {
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

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

.btn-secondary {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}

.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-danger {
  background: var(--btn-danger-bg);
  border: 1px solid var(--btn-danger-border);
  color: var(--btn-danger-text);
}

.btn-danger:hover {
  background: var(--btn-danger-bg-hover);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* FORMS */
.form-control,
.form-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--input-text);
  font-size: var(--font-size-sm);
}

.form-control:focus,
.form-select:focus {
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder {
  color: var(--input-placeholder);
}

.form-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}


/* LIST GROUP */
.list-group-item {
  background: var(--list-bg);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.list-group-item:hover {
  background: var(--list-hover-bg) !important;
  color: var(--text-primary) !important;
}

.list-group-item.active {
  background: var(--list-active-bg);
  color: var(--list-active-text);
  border-color: var(--list-active-bg);
}


/* ALERTS */
.alert {
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  color: var(--alert-text);
  border-radius: var(--radius-sm);
}

.alert-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-text);
}

.alert-danger {
  background: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--alert-danger-text);
}


/* TABLE */
.table {
  color: var(--text-secondary);
}

.table thead {
  background: var(--table-header-bg);
}

.table tbody tr:hover {
  background: var(--table-row-hover);
}


/* PAGINATION */
.pagination .page-link {
  background: var(--pagination-bg);
  border: 1px solid var(--pagination-border);
  color: var(--pagination-text);
}

.pagination .page-link:hover {
  border-color: var(--pagination-hover-border);
  color: var(--accent-primary);
}

.pagination .active .page-link {
  background: var(--pagination-active-bg);
  border-color: var(--pagination-active-bg);
  color: var(--pagination-active-text);
}


/* DROPDOWN */
.dropdown-menu {
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--radius-sm);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover {
  background: var(--dropdown-hover-bg);
  color: var(--text-primary);
}


/* =====================================================
   BOOTSTRAP COMPONENT OVERRIDES
===================================================== */

/* DISABLED INPUT */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--bg-elevated);
}


/* MODAL */
.modal-backdrop.show {
  background: var(--bg-overlay);
}

.modal-dialog {
  max-width: 600px;
}

.modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-lg);
}

.modal-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--accent-primary);
}

.modal-header .close {
  color: var(--text-muted);
}
.modal-header .close:focus, .modal-header .close:hover {
    color: #c9c9c9;
  }

.modal-body {
  padding: var(--space-lg);
  color: var(--text-secondary);
}

.modal-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ================================
   SIZE VARIANTS
================================ */

.modal-lg {
  max-width: 900px;
}

.modal-sm {
  max-width: 400px;
}

/* ================================
   ANIMATION (SMOOTH ENTRY)
================================ */

.modal.fade .modal-dialog {
  transform: translateY(20px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.modal.show .modal-dialog {
  transform: translateY(0);
}




/* FORM CHECK */
.form-check-input {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  transition: var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.form-check-input:focus {
  box-shadow: var(--focus-ring);
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.form-check:hover .form-check-label {
  color: var(--text-primary);
}


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

.text-muted {
  color: var(--text-muted) !important;
}

.border {
  border-color: var(--border-subtle) !important;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 600px) {
  .card-body {
    padding: var(--space-sm);
  }

  .form-check-label {
    font-size: var(--font-size-xs);
  }
}