/* SHKeeper - Custom Dark Theme (Tabler overrides) */
/* Very dark/black color palette */

:root,
[data-bs-theme="dark"] {
  /* Background colors - very dark/black */
  --tblr-body-bg: #0a0a0f;
  --tblr-bg-surface: #0f0f14;
  --tblr-bg-surface-secondary: #141419;
  --tblr-bg-surface-tertiary: #1a1a21;
  
  /* Card backgrounds */
  --tblr-card-bg: #0f0f14;
  --tblr-card-bg-hover: #141419;
  
  /* Border colors */
  --tblr-border-color: #2a2a35;
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.08);
  
  /* Text colors */
  --tblr-body-color: #e1e1e6;
  --tblr-secondary-color: #8b8b94;
  --tblr-muted: #6c6c75;
  
  /* Primary/Accent color - cyan/teal */
  --tblr-primary: #50add7;
  --tblr-primary-rgb: 80, 173, 215;
  --tblr-primary-fg: #ffffff;
  
  /* Success color - teal */
  --tblr-success: #2cbca5;
  --tblr-success-rgb: 44, 188, 165;
  
  /* Warning color */
  --tblr-warning: #f59f00;
  --tblr-warning-rgb: 245, 159, 0;
  
  /* Danger color - magenta/pink */
  --tblr-danger: #c742f7;
  --tblr-danger-rgb: 199, 66, 247;
  
  /* Info color */
  --tblr-info: #4dabf7;
  --tblr-info-rgb: 77, 171, 247;
  
  /* Navbar */
  --tblr-navbar-bg: #0a0a0f;
  --tblr-navbar-border-color: #1a1a21;
  
  /* Sidebar */
  --tblr-sidebar-bg: #0a0a0f;
  
  /* Input/Form */
  --tblr-input-bg: #141419;
  --tblr-input-border-color: #2a2a35;
  --tblr-input-placeholder-color: #6c6c75;
  
  /* Code */
  --tblr-code-bg: #141419;
  --tblr-code-color: #50add7;
}

/* Body */
body {
  background-color: var(--tblr-body-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Page wrapper */
.page-wrapper {
  background-color: var(--tblr-body-bg);
}

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

.navbar-dark,
.navbar[data-bs-theme="dark"] {
  --tblr-navbar-color: var(--tblr-body-color);
  --tblr-navbar-hover-color: var(--tblr-primary);
  --tblr-navbar-active-color: var(--tblr-primary);
  --tblr-navbar-brand-color: var(--tblr-body-color);
}

/* Sidebar / Navbar vertical */
.navbar-vertical {
  background-color: var(--tblr-sidebar-bg) !important;
  border-right: 1px solid var(--tblr-border-color);
}

.navbar-vertical .navbar-nav .nav-link {
  color: var(--tblr-secondary-color);
  border-radius: 6px;
  margin: 2px 8px;
  padding: 10px 12px;
  transition: all 0.2s ease;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  color: var(--tblr-body-color);
  background-color: var(--tblr-bg-surface-tertiary);
}

.navbar-vertical .navbar-nav .nav-link.active {
  color: var(--tblr-primary);
  background-color: rgba(80, 173, 215, 0.1);
}

.navbar-vertical .navbar-nav .nav-link .nav-link-icon {
  color: var(--tblr-muted);
}

.navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon {
  color: var(--tblr-primary);
}

/* Cards */
.card {
  background-color: var(--tblr-card-bg);
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.card:hover {
  border-color: var(--tblr-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--tblr-border-color);
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--tblr-border-color);
}

/* Buttons */
.btn {
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}

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

.btn-primary:hover {
  background-color: #3d9ac4;
  border-color: #3d9ac4;
}

.btn-ghost-primary {
  color: var(--tblr-primary);
}

.btn-ghost-primary:hover {
  background-color: rgba(80, 173, 215, 0.1);
  color: var(--tblr-primary);
}

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

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

/* Success buttons */
.btn-success {
  background-color: var(--tblr-success);
  border-color: var(--tblr-success);
}

/* Danger buttons */
.btn-danger {
  background-color: var(--tblr-danger);
  border-color: var(--tblr-danger);
}

/* Form controls */
.form-control,
.form-select {
  background-color: var(--tblr-input-bg);
  border-color: var(--tblr-input-border-color);
  color: var(--tblr-body-color);
  border-radius: 6px;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--tblr-input-bg);
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 2px rgba(80, 173, 215, 0.15);
  color: var(--tblr-body-color);
}

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

.form-label {
  color: var(--tblr-secondary-color);
  font-weight: 500;
  font-size: 0.875rem;
}

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

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

/* Tables */
.table {
  --tblr-table-bg: transparent;
  --tblr-table-striped-bg: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
}

.table > thead {
  border-bottom: 2px solid var(--tblr-border-color);
}

.table > thead th {
  color: var(--tblr-secondary-color);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--tblr-bg-surface);
}

.table > tbody > tr {
  border-bottom: 1px solid var(--tblr-border-color);
}

.table > tbody > tr:hover {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

.table-responsive {
  border-radius: 8px;
  border: 1px solid var(--tblr-border-color);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
  color: var(--tblr-body-color);
  border-radius: 4px;
  margin: 2px 4px;
  padding: 8px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--tblr-bg-surface-tertiary);
  color: var(--tblr-body-color);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--tblr-primary);
  color: white;
}

/* Modals */
.modal-content {
  background-color: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 12px;
}

.modal-header {
  border-bottom: 1px solid var(--tblr-border-color);
}

.modal-footer {
  border-top: 1px solid var(--tblr-border-color);
}

/* Alerts */
.alert {
  border-radius: 8px;
  border: none;
}

.alert-success {
  background-color: rgba(44, 188, 165, 0.15);
  color: var(--tblr-success);
}

.alert-warning {
  background-color: rgba(245, 159, 0, 0.15);
  color: var(--tblr-warning);
}

.alert-danger {
  background-color: rgba(199, 66, 247, 0.15);
  color: var(--tblr-danger);
}

.alert-info {
  background-color: rgba(77, 171, 247, 0.15);
  color: var(--tblr-info);
}

/* Badges */
.badge {
  font-weight: 500;
  border-radius: 4px;
  padding: 4px 8px;
}

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

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

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

/* Status indicators */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-green .status-dot { background-color: var(--tblr-success); }
.status-red .status-dot { background-color: var(--tblr-danger); }
.status-yellow .status-dot { background-color: var(--tblr-warning); }
.status-blue .status-dot { background-color: var(--tblr-info); }

/* Avatar / crypto icons placeholder */
.avatar {
  background-color: var(--tblr-bg-surface-tertiary);
  border: 1px solid var(--tblr-border-color);
}

/* Page header */
.page-header {
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  margin: 0;
}

.page-subtitle {
  color: var(--tblr-secondary-color);
  margin-top: 0.25rem;
}

/* Stats / metric cards */
.stat-card {
  padding: 1.25rem;
}

.stat-label {
  color: var(--tblr-secondary-color);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tblr-body-color);
}

.stat-value-sm {
  font-size: 1rem;
}

/* Text utilities */
.text-primary { color: var(--tblr-primary) !important; }
.text-success { color: var(--tblr-success) !important; }
.text-danger { color: var(--tblr-danger) !important; }
.text-warning { color: var(--tblr-warning) !important; }
.text-muted { color: var(--tblr-muted) !important; }
.text-secondary { color: var(--tblr-secondary-color) !important; }

/* Background utilities */
.bg-dark-subtle { background-color: var(--tblr-bg-surface) !important; }

/* Pagination */
.pagination {
  gap: 4px;
}

.page-link {
  background-color: transparent;
  border: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  border-radius: 6px;
}

.page-link:hover {
  background-color: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

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

.page-item.disabled .page-link {
  background-color: transparent;
  color: var(--tblr-muted);
}

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

::-webkit-scrollbar-track {
  background: var(--tblr-bg-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--tblr-border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tblr-muted);
}

/* Crypto wallet card specific */
.crypto-card {
  transition: all 0.2s ease;
}

.crypto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.crypto-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--tblr-bg-surface-tertiary);
  border: 1px solid var(--tblr-border-color);
}

/* HTMX loading indicator */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Empty state */
.empty {
  padding: 3rem;
}

.empty-icon {
  color: var(--tblr-muted);
}

.empty-title {
  color: var(--tblr-body-color);
}

.empty-subtitle {
  color: var(--tblr-secondary-color);
}

/* Logo styling */
.navbar-brand-image {
  height: 32px;
}

/* Sidebar footer */
.navbar-vertical .navbar-collapse {
  display: flex;
  flex-direction: column;
}

/* Ribbon for card status */
.ribbon {
  font-size: 0.625rem;
}

/* Animation for status changes */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-animated .status-dot {
  animation: pulse 2s infinite;
}

/* Toast notifications */
.toast {
  background-color: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
}

/* Progress bars */
.progress {
  background-color: var(--tblr-bg-surface-tertiary);
  border-radius: 4px;
}

.progress-bar {
  background-color: var(--tblr-primary);
}