/**
 * Dark Theme - Inspired by Cursor/VS Code
 * Gerhana Hotspot Dashboard
 */

:root {
  /* Background Colors */
  --dark-bg-primary: #0d1117;
  --dark-bg-secondary: #161b22;
  --dark-bg-tertiary: #1c2128;
  --dark-bg-elevated: #21262d;
  --dark-bg-overlay: #2d333b;
  
  /* Text Colors */
  --dark-text-primary: #e6edf3;
  --dark-text-secondary: #8b949e;
  --dark-text-muted: #6e7681;
  --dark-text-disabled: #484f58;
  
  /* Border Colors */
  --dark-border-default: #30363d;
  --dark-border-muted: #21262d;
  --dark-border-subtle: #1c2128;
  
  /* Accent Colors */
  --dark-accent-primary: #58a6ff;
  --dark-accent-success: #3fb950;
  --dark-accent-warning: #d29922;
  --dark-accent-danger: #f85149;
  --dark-accent-info: #79c0ff;
  
  /* Component Colors */
  --dark-btn-primary-bg: #238636;
  --dark-btn-primary-hover: #2ea043;
  --dark-btn-secondary-bg: #21262d;
  --dark-btn-secondary-hover: #30363d;
  --dark-input-bg: #0d1117;
  --dark-input-border: #30363d;
}

/* Global Overrides */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
.dark-mode {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

/* Header */
.navbar.bg-dark {
  background-color: var(--dark-bg-secondary) !important;
  border-bottom: 1px solid var(--dark-border-default);
}

.navbar-brand {
  color: var(--dark-text-primary) !important;
}

/* Sidebar */
.sidebar,
.bg-body-tertiary {
  background-color: var(--dark-bg-secondary) !important;
  border-right: 1px solid var(--dark-border-default) !important;
}

.sidebar .nav-link {
  color: var(--dark-text-secondary) !important;
  transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-tertiary) !important;
}

.sidebar .nav-link.active {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-elevated) !important;
  border-left: 3px solid var(--dark-accent-primary);
}

.sidebar .nav-link svg {
  fill: currentColor;
}

/* Main Content */
main {
  background-color: var(--dark-bg-primary) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--dark-text-primary) !important;
}

/* Borders */
.border-bottom {
  border-bottom-color: var(--dark-border-default) !important;
}

.border,
.border-top,
.border-start,
.border-end {
  border-color: var(--dark-border-default) !important;
}

/* Cards & Panels */
.card,
.table-wrapper,
.file-list-wrapper,
.file-content-wrapper {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-default) !important;
  color: var(--dark-text-primary) !important;
}

.card-header {
  background-color: var(--dark-bg-tertiary) !important;
  border-bottom-color: var(--dark-border-default) !important;
  color: var(--dark-text-primary) !important;
}

.card-body {
  background-color: var(--dark-bg-secondary) !important;
}

/* Tables */
.table {
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-default) !important;
}

.table thead th {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border-default) !important;
  color: var(--dark-text-primary) !important;
}

.table tbody tr {
  border-color: var(--dark-border-muted) !important;
}

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

.table-hover > tbody > tr:hover > * {
  background-color: var(--dark-bg-elevated) !important;
}

.table td, .table th {
  border-color: var(--dark-border-muted) !important;
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--dark-input-bg) !important;
  border-color: var(--dark-input-border) !important;
  color: var(--dark-text-primary) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-accent-primary) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.25) !important;
}

.form-control::placeholder {
  color: var(--dark-text-muted) !important;
}

.input-group-text {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-input-border) !important;
  color: var(--dark-text-secondary) !important;
}

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

.form-check-input {
  background-color: var(--dark-input-bg) !important;
  border-color: var(--dark-input-border) !important;
}

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

/* Buttons */
.btn-primary {
  background-color: var(--dark-btn-primary-bg) !important;
  border-color: var(--dark-btn-primary-bg) !important;
  color: white !important;
}

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

.btn-secondary {
  background-color: var(--dark-btn-secondary-bg) !important;
  border-color: var(--dark-input-border) !important;
  color: var(--dark-text-primary) !important;
}

.btn-secondary:hover {
  background-color: var(--dark-btn-secondary-hover) !important;
  border-color: var(--dark-border-default) !important;
}

.btn-outline-secondary {
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-input-border) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border-default) !important;
  color: var(--dark-text-primary) !important;
}

.btn-outline-primary {
  color: var(--dark-accent-primary) !important;
  border-color: var(--dark-accent-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--dark-accent-primary) !important;
  color: white !important;
}

.btn-outline-success {
  color: var(--dark-accent-success) !important;
  border-color: var(--dark-accent-success) !important;
}

.btn-outline-success:hover {
  background-color: var(--dark-accent-success) !important;
  color: white !important;
}

.btn-outline-danger {
  color: var(--dark-accent-danger) !important;
  border-color: var(--dark-accent-danger) !important;
}

.btn-outline-danger:hover {
  background-color: var(--dark-accent-danger) !important;
  color: white !important;
}

.btn-outline-warning {
  color: var(--dark-accent-warning) !important;
  border-color: var(--dark-accent-warning) !important;
}

.btn-outline-warning:hover {
  background-color: var(--dark-accent-warning) !important;
  color: white !important;
}

.btn-success {
  background-color: var(--dark-accent-success) !important;
  border-color: var(--dark-accent-success) !important;
}

.btn-danger {
  background-color: var(--dark-accent-danger) !important;
  border-color: var(--dark-accent-danger) !important;
}

.btn-warning {
  background-color: var(--dark-accent-warning) !important;
  border-color: var(--dark-accent-warning) !important;
}

.btn-info {
  background-color: var(--dark-accent-info) !important;
  border-color: var(--dark-accent-info) !important;
  color: var(--dark-bg-primary) !important;
}

/* Badges */
.badge {
  color: white !important;
}

.badge.bg-primary {
  background-color: var(--dark-accent-primary) !important;
}

.badge.bg-success {
  background-color: var(--dark-accent-success) !important;
}

.badge.bg-danger {
  background-color: var(--dark-accent-danger) !important;
}

.badge.bg-warning {
  background-color: var(--dark-accent-warning) !important;
}

.badge.bg-info {
  background-color: var(--dark-accent-info) !important;
}

.badge.bg-secondary {
  background-color: var(--dark-bg-elevated) !important;
}

.badge.bg-light {
  background-color: var(--dark-bg-overlay) !important;
  color: var(--dark-text-primary) !important;
}

/* Alerts */
.alert {
  border-color: var(--dark-border-default) !important;
}

.alert-info {
  background-color: rgba(121, 192, 255, 0.1) !important;
  border-color: rgba(121, 192, 255, 0.3) !important;
  color: var(--dark-accent-info) !important;
}

.alert-success {
  background-color: rgba(63, 185, 80, 0.1) !important;
  border-color: rgba(63, 185, 80, 0.3) !important;
  color: var(--dark-accent-success) !important;
}

.alert-warning {
  background-color: rgba(210, 153, 34, 0.1) !important;
  border-color: rgba(210, 153, 34, 0.3) !important;
  color: var(--dark-accent-warning) !important;
}

.alert-danger {
  background-color: rgba(248, 81, 73, 0.1) !important;
  border-color: rgba(248, 81, 73, 0.3) !important;
  color: var(--dark-accent-danger) !important;
}

/* Modals */
.modal-content {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-default) !important;
}

.modal-header {
  border-bottom-color: var(--dark-border-default) !important;
  background-color: var(--dark-bg-tertiary) !important;
}

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

.modal-title {
  color: var(--dark-text-primary) !important;
}

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

/* Pagination */
.pagination .page-link {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-default) !important;
  color: var(--dark-text-primary) !important;
}

.pagination .page-link:hover {
  background-color: var(--dark-bg-elevated) !important;
  border-color: var(--dark-border-default) !important;
}

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

.pagination .page-item.disabled .page-link {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-disabled) !important;
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--dark-bg-overlay) !important;
  border-color: var(--dark-border-default) !important;
}

.dropdown-item {
  color: var(--dark-text-primary) !important;
}

.dropdown-item:hover {
  background-color: var(--dark-bg-elevated) !important;
}

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

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

.text-success {
  color: var(--dark-accent-success) !important;
}

.text-danger {
  color: var(--dark-accent-danger) !important;
}

.text-warning {
  color: var(--dark-accent-warning) !important;
}

.text-info {
  color: var(--dark-accent-info) !important;
}

.text-primary {
  color: var(--dark-accent-primary) !important;
}

/* Log container (for monitor page) */
#log-container {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-default) !important;
}

.log-line {
  border-bottom-color: var(--dark-border-subtle) !important;
}

/* File list specific */
.file-item {
  border-bottom-color: var(--dark-border-muted) !important;
}

.file-item:hover {
  background-color: var(--dark-bg-tertiary) !important;
}

.file-item.active {
  background-color: var(--dark-bg-elevated) !important;
  border-left-color: var(--dark-accent-primary) !important;
}

.file-code {
  color: var(--dark-text-primary) !important;
}

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

.content-header {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border-default) !important;
}

.content-textarea {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-default) !important;
}

.empty-state {
  border-color: var(--dark-border-default) !important;
  color: var(--dark-text-muted) !important;
}

/* Code blocks */
code {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-accent-info) !important;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

/* HR */
hr {
  border-color: var(--dark-border-default) !important;
  opacity: 0.3;
}

/* Spinner */
.spinner-border {
  border-color: var(--dark-border-default);
  border-right-color: var(--dark-accent-primary);
}

/* Offcanvas */
.offcanvas {
  background-color: var(--dark-bg-secondary) !important;
}

.offcanvas-title {
  color: var(--dark-text-primary) !important;
}

/* Progress bar */
.progress {
  background-color: var(--dark-bg-tertiary) !important;
}

.progress-bar {
  background-color: var(--dark-accent-primary) !important;
}

.progress-bar.bg-success {
  background-color: var(--dark-accent-success) !important;
}

/* Select arrows - fix visibility */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--dark-bg-elevated);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dark-bg-overlay);
}

/* Link colors */
a {
  color: var(--dark-accent-primary) !important;
}

a:hover {
  color: var(--dark-accent-info) !important;
}

/* Small text */
small,
.small {
  color: var(--dark-text-secondary) !important;
}