/* Beacon Mine dashboard — copper brand theme (matches landing page) */
:root {
  --bm-copper: #D35400;
  --bm-copper-light: #E87A2E;
  --bm-copper-dark: #A04000;
  --bm-copper-glow: rgba(211, 84, 0, 0.35);
  --bm-copper-soft: rgba(211, 84, 0, 0.14);
  --bm-bg-deep: #1E1208;
  --bm-bg-dark: #2A1A0E;
  --bm-bg-surface: #352418;
  --bm-bg-elevated: #422C1C;
  --bm-text: #F0E8DF;
  --bm-text-muted: #B8A898;
  --bm-border: rgba(211, 84, 0, 0.28);
  --bm-gradient-copper: linear-gradient(135deg, var(--bm-copper-dark) 0%, var(--bm-copper) 50%, var(--bm-copper-light) 100%);
}

/* ── Copper highlight pack (overrides PayApp blue) ── */
.color-highlight,
.color-highlight-dark {
  color: var(--bm-copper) !important;
}

.color-highlight-light {
  color: var(--bm-copper-light) !important;
}

.bg-highlight,
.bg-highlight-dark {
  background-color: var(--bm-copper) !important;
  color: #fff !important;
}

.bg-highlight-light {
  background-color: var(--bm-copper-light) !important;
  color: #fff !important;
}

.border-highlight,
.border-highlight-light,
.border-highlight-dark,
.focus-highlight:focus {
  border-color: var(--bm-copper) !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, var(--bm-copper-light), var(--bm-copper)) !important;
  color: #fff !important;
}

.gradient-menu {
  background-image: linear-gradient(130deg, var(--bm-copper-light), var(--bm-copper-dark)) !important;
}

.bg-fade-highlight {
  background-color: var(--bm-copper-soft) !important;
}

.bg-fade2-highlight {
  background-color: rgba(211, 84, 0, 0.08) !important;
}

.color-icon-highlight {
  stroke: var(--bm-copper) !important;
  fill: var(--bm-copper) !important;
}

.bg-blue-dark,
.color-blue-dark {
  background-color: var(--bm-copper-dark) !important;
  color: #fff !important;
}

.color-blue-dark {
  background: transparent !important;
  color: var(--bm-copper) !important;
}

.border-blue-dark {
  border-color: var(--bm-copper-dark) !important;
}

/* ── Dark theme — warm copper browns ── */
.theme-dark {
  background-color: var(--bm-bg-deep) !important;
}

.theme-dark .bg-theme {
  background-color: var(--bm-bg-dark) !important;
}

.theme-dark .border-theme {
  border-color: var(--bm-bg-surface) !important;
}

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

.theme-dark p,
.theme-dark code {
  color: var(--bm-text-muted) !important;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark #footer-bar a i,
.theme-dark #footer-bar a span,
.theme-dark p strong {
  color: var(--bm-text) !important;
}

.theme-dark .header,
.theme-dark #footer-bar {
  background: rgba(30, 18, 8, 0.92) !important;
  border-color: var(--bm-border) !important;
}

.theme-dark .card,
.theme-dark #preloader {
  background-color: var(--bm-bg-surface) !important;
}

.theme-dark .header-bar {
  background-color: var(--bm-bg-dark) !important;
}

.theme-dark .list-group-item {
  border-color: var(--bm-border) !important;
}

.theme-dark .divider {
  background-color: var(--bm-border) !important;
}

/* ── Light theme — warm tinted surfaces ── */
.theme-light {
  background-color: #F5EDE4 !important;
}

.theme-light .bg-theme {
  background-color: #FFFBF7 !important;
}

.theme-light .color-theme {
  color: var(--bm-bg-deep) !important;
}

.theme-light .card {
  background-color: #FFFBF7 !important;
}

/* ── Footer active states ── */
.footer-bar-1 .active-nav i,
.footer-bar-1 .active-nav span {
  color: var(--bm-copper) !important;
}

#footer-bar .circle-nav-2::before,
#footer-bar .circle-nav-2::after {
  background-image: var(--bm-gradient-copper) !important;
}

/* ── Auth pages ── */
.bm-auth-page,
.page-content:has(.card-fixed) {
  background-color: var(--bm-bg-deep) !important;
}

.page-content .card-fixed .card-overlay {
  background-color: var(--bm-bg-deep) !important;
  background-image: none !important;
  opacity: 1 !important;
}

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

.bm-auth-link {
  color: var(--bm-copper-light) !important;
}

.bm-auth-link:hover {
  color: var(--bm-copper) !important;
}

/* ── Contact quick icons in sidebar ── */
.bm-contact-icons .icon {
  transition: transform 0.2s ease;
}

.bm-contact-icons .icon:hover {
  transform: translateY(-2px);
}

/* ── Tab controls (Pending / Active / Completed) ── */
.tabs-box a[aria-expanded="true"],
.tabs-pill a[aria-expanded="true"],
.tabs-links a[aria-expanded="true"] {
  background-color: var(--bm-copper) !important;
  border-color: var(--bm-copper) !important;
  color: #fff !important;
}

.tabs-icons a[aria-expanded="true"] {
  color: var(--bm-copper) !important;
}

.tabs-borders a[aria-expanded="true"] {
  color: var(--bm-copper) !important;
  border-color: var(--bm-copper) !important;
}

.tabs-cards .tab-controls a[aria-expanded="true"] {
  color: var(--bm-copper) !important;
}

.theme-dark .tabs-cards .tab-controls a[aria-expanded="true"] {
  background-color: var(--bm-bg-surface) !important;
}

/* ── Blue utility classes → copper ── */
.bg-blue-light,
.bg-blue-dark {
  background-color: var(--bm-copper) !important;
  color: #fff !important;
}

.color-blue-light,
.color-blue-dark {
  color: var(--bm-copper) !important;
}

.border-blue-light,
.border-blue-dark,
.border-fade-blue {
  border-color: var(--bm-border) !important;
}

.bg-fade-blue,
.bg-fade2-blue {
  background-color: var(--bm-copper-soft) !important;
}

.gradient-blue {
  background-image: linear-gradient(to bottom, var(--bm-copper-light), var(--bm-copper)) !important;
  color: #fff !important;
}

.focus-blue:focus {
  border-color: var(--bm-copper) !important;
}

.color-icon-blue {
  stroke: var(--bm-copper) !important;
  fill: var(--bm-copper-soft) !important;
}

.text-info {
  color: var(--bm-copper) !important;
}

/* ── Switches (dark mode toggle was blue) ── */
.switch-blue .ios-input:checked ~ .custom-control-label::before,
.switch-green .ios-input:checked ~ .custom-control-label::before {
  background-color: var(--bm-copper) !important;
}

.switch-blue .android-input:checked ~ .custom-control-label::after,
.switch-green .android-input:checked ~ .custom-control-label::after {
  background-color: var(--bm-copper) !important;
}

.switch-blue .android-input:checked ~ .custom-control-label::before,
.switch-green .android-input:checked ~ .custom-control-label::before {
  background-color: var(--bm-copper-glow) !important;
}

input[type="range"]::-webkit-slider-thumb {
  background-color: var(--bm-copper) !important;
}

/* ── Duplicate highlight rules in style.css (no !important) ── */
.color-highlight {
  color: var(--bm-copper) !important;
}

.bg-highlight {
  background-color: var(--bm-copper) !important;
}