:root {
  --dark-bg: #1e1e2d;
  --darker-bg: #151521;
  --card-bg: #2b2b40;
  --border-color: #323248;
  --text-color: #cdcdde;
  --text-muted: #9899ac;
  --primary: #3699ff;
  --primary-dark: #1f7bdc;
  --danger: #f1416c;
  --danger-dark: #d4124a;
  --success: #50cd89;
  --warning: #ffc700;
  --info: #7239ea;
}

/* Global styles */
body {
  background-color: var(--dark-bg);
  color: var(--text-color);
}

/* Navbar styling */
.navbar {
  background-color: var(--darker-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: var(--text-color);
}

.dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  z-index: 1050 !important; /* ADDED: Ensure dropdowns appear above sticky elements */
}

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

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
}

.dropdown-divider {
  border-top-color: var(--border-color);
}

/* ADDED: Z-index fix to prevent table headers from covering dropdown menus */
.file-table-display thead,
.file-table-container thead,
.sticky-top {
  z-index: 1 !important;
}

.file-table-container,
.table-responsive {
  position: relative;
  z-index: auto;
}

/* Cards styling */
.card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.card-header {
  background-color: var(--card-bg);
  border-bottom-color: var(--border-color);
}

/* Buttons */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover, 
.btn-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

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

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

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-danger:hover, 
.btn-danger:focus {
  background-color: var(--danger-dark);
  border-color: var(--danger-dark);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
}

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

/* Forms */
.form-control, 
.form-select {
  background-color: var(--darker-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.form-control:focus, 
.form-select:focus {
  background-color: var(--darker-bg);
  border-color: var(--primary);
  color: var(--text-color);
  box-shadow: 0 0 0 0.25rem rgba(54, 153, 255, 0.25);
}

.input-group-text {
  background-color: var(--darker-bg);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* Table styling */
.table {
  color: var(--text-color);
}

.table th {
  color: var(--text-muted);
  border-bottom-color: var(--border-color);
  background-color: var(--darker-bg);
}

.table td {
  border-bottom-color: var(--border-color);
  color: var(--text-color);
}

.table tbody tr {
  background-color: var(--card-bg);
}

.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Ensure all text in table is visible */
.table-striped>tbody>tr:nth-of-type(odd) td,
.table-striped>tbody>tr:nth-of-type(even) td,
.table-hover tbody tr td {
  color: var(--text-color);
}

/* Badge styling */
.badge.bg-danger {
  background-color: rgba(241, 65, 108, 0.7) !important;
}

.badge.bg-warning {
  background-color: rgba(255, 199, 0, 0.7) !important;
  color: #000;
}

.badge.bg-info {
  background-color: rgba(114, 57, 234, 0.7) !important;
}

/* Pagination */
.pagination .page-link {
  background-color: var(--darker-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

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

/* Modal styling */
.modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.modal-header {
  border-bottom-color: var(--border-color);
}

.modal-footer {
  border-top-color: var(--border-color);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Links */
a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-dark);
}

/* Action buttons */
.action-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Needed for Tabulator support */
.tabulator {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

.tabulator-header {
  background-color: var(--darker-bg);
  border-bottom: 1px solid var(--border-color);
}

.tabulator-col {
  background-color: var(--darker-bg);
  border-right: 1px solid var(--border-color);
}

.tabulator-cell {
  border-right: 1px solid var(--border-color);
}

.tabulator-row {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.tabulator-row.tabulator-row-even {
  background-color: rgba(255, 255, 255, 0.02);
}


/* Bootstrap Text Colors */
.text-muted {
  color: var(--text-muted) !important;
}

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

/* For validation errors */
.text-danger {
  color: var(--danger) !important;
}

/* Overwrite datepicker styles */
.datepicker-dropdown {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

/* Dark modal styling to match dark theme */
.dark-modal .modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark-modal .modal-header {
  border-bottom-color: var(--border-color);
}

.dark-modal .modal-footer {
  border-top-color: var(--border-color);
}

.dark-modal .alert-info {
  background-color: var(--darker-bg);
  border-color: var(--primary);
  color: var(--text-color);
}

.dark-modal .table {
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark-modal .table th {
  background-color: var(--darker-bg);
}

.dark-modal .accordion-item,
.dark-modal .accordion-button {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark-modal .accordion-button:not(.collapsed) {
  background-color: var(--darker-bg);
  color: var(--primary);
}

/* This ensures the position-relative container works properly */
.position-relative {
  position: relative !important;
}

/* ADDED: Fix for Bootstrap modal backdrop persistence issue */
body {
  padding-right: 0 !important;
  overflow: auto !important;
}

html.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}