/* ============================================
   Mystery Trader - Dark Theme
   Color palette extracted from mysterytrader.jpg:
   - Primary dark: #0a0a0f (near black)
   - Dark teal: #1a3a3a
   - Accent teal: #2d5a5a
   - Light teal: #4a8080
   - Text: #e8e8e8
   ============================================ */

:root {
  /* Dark theme colors */
  --mt-bg-primary: #0a0a0f;
  --mt-bg-secondary: #12141a;
  --mt-bg-tertiary: #1a1d24;
  --mt-bg-card: #1e2128;
  --mt-bg-elevated: #252830;
  
  /* Teal accent colors from logo */
  --mt-teal-dark: #1a3a3a;
  --mt-teal: #2d5a5a;
  --mt-teal-light: #4a8080;
  --mt-teal-bright: #5fa0a0;
  
  /* Accent colors */
  --mt-accent: #4a9090;
  --mt-accent-hover: #5db0b0;
  --mt-accent-active: #3a7878;
  
  /* Text colors */
  --mt-text-primary: #e8e8e8;
  --mt-text-secondary: #a8a8b0;
  --mt-text-muted: #6a6a75;
  --mt-text-inverse: #0a0a0f;
  
  /* Border colors */
  --mt-border: #2a2d35;
  --mt-border-light: #3a3d45;
  
  /* Status colors */
  --mt-success: #3d9970;
  --mt-warning: #d4a017;
  --mt-danger: #c9302c;
  --mt-info: #4a9090;
  
  /* Focus ring */
  --mt-focus-ring: rgba(74, 144, 144, 0.5);
}

/* Base styles */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--mt-bg-primary);
  color: var(--mt-text-primary);
}

/* Focus styles */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--mt-bg-primary), 0 0 0 0.25rem var(--mt-focus-ring);
}

/* Form placeholder styles */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--mt-text-muted);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================
   Navigation
   ============================================ */

.navbar {
  background-color: var(--mt-bg-secondary) !important;
  border-bottom: 1px solid var(--mt-border) !important;
}

.navbar-brand {
  color: var(--mt-text-primary) !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand img {
  height: 32px;
  width: 32px;
  border-radius: 4px;
}

.navbar-brand:hover {
  color: var(--mt-teal-bright) !important;
}

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

.nav-link:hover, .nav-link:focus {
  color: var(--mt-teal-light) !important;
}

.nav-link.active {
  color: var(--mt-teal-bright) !important;
}

.navbar-toggler {
  border-color: var(--mt-border-light);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 232, 232, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--mt-bg-elevated);
  border: 1px solid var(--mt-border);
}

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

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--mt-teal-dark);
  color: var(--mt-text-primary);
}

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

/* ============================================
   Cards
   ============================================ */

.card {
  background-color: var(--mt-bg-card);
  border: 1px solid var(--mt-border);
  border-radius: 8px;
}

.card-header {
  background-color: var(--mt-bg-tertiary);
  border-bottom: 1px solid var(--mt-border);
  color: var(--mt-text-primary);
}

.card-footer {
  background-color: var(--mt-bg-tertiary);
  border-top: 1px solid var(--mt-border);
}

.card-title {
  color: var(--mt-text-primary);
}

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

/* ============================================
   Buttons
   ============================================ */

.btn-primary {
  background-color: var(--mt-teal);
  border-color: var(--mt-teal);
  color: var(--mt-text-primary);
}

.btn-primary:hover {
  background-color: var(--mt-teal-light);
  border-color: var(--mt-teal-light);
  color: var(--mt-text-primary);
}

.btn-primary:active, .btn-primary.active {
  background-color: var(--mt-teal-dark);
  border-color: var(--mt-teal-dark);
}

.btn-secondary {
  background-color: var(--mt-bg-elevated);
  border-color: var(--mt-border);
  color: var(--mt-text-primary);
}

.btn-secondary:hover {
  background-color: var(--mt-bg-tertiary);
  border-color: var(--mt-border-light);
  color: var(--mt-text-primary);
}

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

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

.btn-outline-secondary {
  border-color: var(--mt-border);
  color: var(--mt-text-secondary);
}

.btn-outline-secondary:hover {
  background-color: var(--mt-bg-elevated);
  border-color: var(--mt-border-light);
  color: var(--mt-text-primary);
}

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

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

.btn-warning {
  background-color: var(--mt-warning);
  border-color: var(--mt-warning);
  color: var(--mt-text-inverse);
}

.btn-link {
  color: var(--mt-teal-light);
}

.btn-link:hover {
  color: var(--mt-teal-bright);
}

/* ============================================
   Forms
   ============================================ */

.form-control, .form-select {
  background-color: var(--mt-bg-tertiary);
  border: 1px solid var(--mt-border);
  color: var(--mt-text-primary);
}

.form-control:focus, .form-select:focus {
  background-color: var(--mt-bg-elevated);
  border-color: var(--mt-teal);
  color: var(--mt-text-primary);
  box-shadow: 0 0 0 0.25rem var(--mt-focus-ring);
}

.form-control::placeholder {
  color: var(--mt-text-muted);
}

.form-control:disabled, .form-select:disabled {
  background-color: var(--mt-bg-secondary);
  color: var(--mt-text-muted);
}

.form-label {
  color: var(--mt-text-secondary);
}

.form-text {
  color: var(--mt-text-muted);
}

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

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

.form-floating > label {
  color: var(--mt-text-muted);
}

.input-group-text {
  background-color: var(--mt-bg-elevated);
  border-color: var(--mt-border);
  color: var(--mt-text-secondary);
}

/* Validation states */
.is-invalid {
  border-color: var(--mt-danger) !important;
}

.invalid-feedback, .text-danger {
  color: #ff6b6b;
}

.is-valid {
  border-color: var(--mt-success) !important;
}

.valid-feedback {
  color: var(--mt-success);
}

/* ============================================
   Tables
   ============================================ */

.table {
  color: var(--mt-text-primary);
  --bs-table-bg: var(--mt-bg-card);
  --bs-table-border-color: var(--mt-border);
}

.table > thead {
  background-color: var(--mt-bg-tertiary);
}

.table > thead th {
  color: var(--mt-text-secondary);
  border-bottom: 2px solid var(--mt-border);
}

.table > tbody > tr:hover {
  --bs-table-hover-bg: var(--mt-bg-elevated);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-striped-bg: var(--mt-bg-tertiary);
}

/* ============================================
   Alerts
   ============================================ */

.alert {
  border: 1px solid;
}

.alert-primary {
  background-color: rgba(45, 90, 90, 0.2);
  border-color: var(--mt-teal);
  color: var(--mt-teal-bright);
}

.alert-secondary {
  background-color: var(--mt-bg-elevated);
  border-color: var(--mt-border);
  color: var(--mt-text-secondary);
}

.alert-success {
  background-color: rgba(61, 153, 112, 0.2);
  border-color: var(--mt-success);
  color: #6dd5a5;
}

.alert-danger {
  background-color: rgba(201, 48, 44, 0.2);
  border-color: var(--mt-danger);
  color: #ff6b6b;
}

.alert-warning {
  background-color: rgba(212, 160, 23, 0.2);
  border-color: var(--mt-warning);
  color: #f0c040;
}

.alert-info {
  background-color: rgba(74, 144, 144, 0.2);
  border-color: var(--mt-info);
  color: var(--mt-teal-bright);
}

/* ============================================
   Badges
   ============================================ */

.badge {
  font-weight: 500;
}

.badge.bg-primary, .bg-primary {
  background-color: var(--mt-teal) !important;
}

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

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

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

.badge.bg-warning, .bg-warning {
  background-color: var(--mt-warning) !important;
  color: var(--mt-text-inverse) !important;
}

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

/* ============================================
   Modals
   ============================================ */

.modal-content {
  background-color: var(--mt-bg-card);
  border: 1px solid var(--mt-border);
}

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

.modal-header .btn-close {
  filter: invert(1);
}

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

.modal-title {
  color: var(--mt-text-primary);
}

/* ============================================
   List Groups
   ============================================ */

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

.list-group-item:hover {
  background-color: var(--mt-bg-elevated);
}

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

.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--mt-bg-elevated);
  color: var(--mt-text-primary);
}

/* ============================================
   Pagination
   ============================================ */

.page-link {
  background-color: var(--mt-bg-card);
  border-color: var(--mt-border);
  color: var(--mt-teal-light);
}

.page-link:hover {
  background-color: var(--mt-bg-elevated);
  border-color: var(--mt-border-light);
  color: var(--mt-teal-bright);
}

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

.page-item.disabled .page-link {
  background-color: var(--mt-bg-secondary);
  border-color: var(--mt-border);
  color: var(--mt-text-muted);
}

/* ============================================
   Breadcrumbs
   ============================================ */

.breadcrumb {
  background-color: var(--mt-bg-tertiary);
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.breadcrumb-item a {
  color: var(--mt-teal-light);
}

.breadcrumb-item a:hover {
  color: var(--mt-teal-bright);
}

.breadcrumb-item.active {
  color: var(--mt-text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--mt-text-muted);
}

/* ============================================
   Footer
   ============================================ */

.footer {
  background-color: var(--mt-bg-secondary);
  border-top: 1px solid var(--mt-border) !important;
  color: var(--mt-text-muted);
}

.footer a {
  color: var(--mt-teal-light);
}

.footer a:hover {
  color: var(--mt-teal-bright);
}

/* ============================================
   Links
   ============================================ */

a {
  color: var(--mt-teal-light);
  text-decoration: none;
}

a:hover {
  color: var(--mt-teal-bright);
  text-decoration: underline;
}

/* ============================================
   Text utilities
   ============================================ */

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

.text-body {
  color: var(--mt-text-primary) !important;
}

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

/* ============================================
   Collectible Cards (custom)
   ============================================ */

.collectible-card {
  transition: box-shadow 0.2s ease;
}

.collectible-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Only apply transform when dropdown is not open */
.collectible-card:hover:not(:has(.dropdown-open)) {
  transform: translateY(-4px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collectible-card .card {
  display: flex;
  flex-direction: column;
}

.collectible-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
}

/* Push action buttons to bottom of card */
.collectible-card .card-body > .d-flex:last-child {
  margin-top: auto;
  padding-top: 1rem;
}

.collectible-card img {
  border-radius: 6px 6px 0 0;
}

/* Rarity badges */
.badge-rare {
  background-color: #8b5cf6 !important;
  color: white;
}

.badge-uncommon {
  background-color: #3b82f6 !important;
  color: white;
}

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

/* Trade status badges */
.badge-pending {
  background-color: var(--mt-warning) !important;
  color: var(--mt-text-inverse);
}

.badge-accepted {
  background-color: var(--mt-success) !important;
}

.badge-declined {
  background-color: var(--mt-danger) !important;
}

.badge-completed {
  background-color: var(--mt-teal) !important;
}

/* ============================================
   Scrollbar styling
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--mt-border-light);
}

/* ============================================
   Selection styling
   ============================================ */

::selection {
  background-color: var(--mt-teal);
  color: var(--mt-text-primary);
}

/* ============================================
   Responsive adjustments
   ============================================ */

@media (max-width: 576px) {
  .card {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}