/* 
 * Gold Rates & Currency Converter - Dark Theme
 */

/* Dark theme CSS variables for consistent styling */
:root.dark-theme, body.dark-theme {
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #252525;
    --dark-bg-elevated: #2a2a2a;
    --dark-bg-hover: #333333;
    --dark-border-light: #444444;
    --dark-border-medium: #555555;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #e0e0e0;
    --dark-text-muted: #b0b0b0;
    --dark-gold-primary: #f1b933;
    --dark-gold-secondary: #f8d87c;
    --dark-gold-hover: #e5a926;
    --dark-success: #4caf50;
    --dark-danger: #f44336;
    --dark-shadow: rgba(0, 0, 0, 0.3);
}

body.dark-theme {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Dark theme for custom header */
body.dark-theme .custom-header {
    background-color: var(--dark-bg-secondary);
    box-shadow: 0 2px 10px var(--dark-shadow);
}

body.dark-theme .logo-text .silver-text {
    color: var(--dark-text-secondary);
}

body.dark-theme .premium-text {
    color: var(--dark-text-muted);
}

body.dark-theme .nav-link {
    color: var(--dark-text-primary);
    font-weight: 500;
}

body.dark-theme .nav-link:hover, 
body.dark-theme .nav-link.active {
    background-color: rgba(241, 185, 51, 0.2);
    color: var(--dark-gold-primary);
}

body.dark-theme .lang-btn,
body.dark-theme .theme-btn {
    background: var(--dark-bg-elevated);
    border: 1px solid var(--dark-border-medium);
    color: var(--dark-text-primary);
}

body.dark-theme .lang-btn:hover,
body.dark-theme .theme-btn:hover {
    background-color: var(--dark-bg-hover);
}

body.dark-theme .lang-dropdown {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border-medium);
    box-shadow: 0 2px 10px var(--dark-shadow);
}

body.dark-theme .lang-option {
    color: var(--dark-text-primary);
}

body.dark-theme .lang-option:hover {
    background-color: var(--dark-bg-hover);
    color: var(--dark-gold-primary);
}

/* General UI elements in dark mode */
body.dark-theme .card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.dark-theme .card-header {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light);
}

body.dark-theme .list-group-item {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-light);
}

body.dark-theme .table {
    color: var(--dark-text-primary);
}

body.dark-theme .table th,
body.dark-theme .table td {
    border-color: var(--dark-border-light);
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .form-control,
body.dark-theme .form-select {
    background-color: var(--dark-bg-elevated);
    border-color: var(--dark-border-medium);
    color: var(--dark-text-primary);
}

body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus {
    border-color: var(--dark-gold-primary);
    box-shadow: 0 0 0 0.25rem rgba(241, 185, 51, 0.25);
    background-color: var(--dark-bg-hover);
}

body.dark-theme .btn-outline-secondary {
    color: var(--dark-text-secondary);
    border-color: var(--dark-border-medium);
    background-color: var(--dark-bg-elevated);
}

body.dark-theme .btn-outline-secondary:hover {
    background-color: var(--dark-bg-hover);
    border-color: var(--dark-border-medium);
    color: var(--dark-text-primary);
}

body.dark-theme .dropdown-menu {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-light);
}

body.dark-theme .dropdown-item {
    color: var(--dark-text-primary);
}

body.dark-theme .dropdown-item:hover {
    background-color: var(--dark-bg-hover);
    color: var(--dark-text-primary);
}

body.dark-theme .footer {
    background-color: #1a1a1a;
    border-top: 1px solid var(--dark-border-light);
}

body.dark-theme hr {
    border-color: var(--dark-border-light);
}

/* Navbar styling */
.dark-theme .navbar {
    background-color: var(--dark-bg-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-theme .navbar-brand {
    color: var(--dark-gold-primary);
}

.dark-theme .nav-link:hover,
.dark-theme .nav-link.active {
    color: var(--dark-gold-primary);
}

/* Table styling */
.dark-theme .table-rates {
    background-color: var(--dark-bg-secondary);
}

.dark-theme .table-rates thead {
    background-color: var(--dark-bg-tertiary);
}

.dark-theme .table-rates th {
    color: var(--dark-gold-primary);
}

.dark-theme .table-rates tr {
    border-color: var(--dark-border-light);
}

.dark-theme .table-rates tr:nth-child(even) {
    background-color: var(--dark-bg-tertiary);
}

/* Form controls */
.dark-theme .form-control:focus,
.dark-theme .form-select:focus {
    background-color: var(--dark-bg-hover);
    border-color: var(--dark-gold-primary);
    box-shadow: 0 0 0 0.25rem rgba(241, 185, 51, 0.25);
}

/* Hero section */
.dark-theme .hero-section {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Hero content text */
.dark-theme .hero-content h1 {
    color: var(--dark-text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-theme .hero-content p {
    color: var(--dark-text-secondary);
}

/* Footer */
.dark-theme .footer a {
    color: var(--dark-gold-primary);
}

.dark-theme .footer a:hover {
    color: var(--dark-gold-secondary);
}

.dark-theme .footer h5 {
    color: var(--dark-text-primary);
    font-weight: 600;
}

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

/* Links */
.dark-theme a {
    color: var(--dark-gold-primary);
    text-decoration: none;
}

.dark-theme a:hover {
    color: var(--dark-gold-secondary);
    text-decoration: underline;
}

/* Chart styling */
.dark-theme .chart-container {
    background-color: var(--dark-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--dark-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Chart text and labels */
.dark-theme .chart-container text {
    fill: var(--dark-text-primary) !important;
}

.dark-theme .chart-container .apexcharts-legend-text {
    color: var(--dark-text-primary) !important;
}

.dark-theme .chart-container .apexcharts-tooltip {
    background: var(--dark-bg-hover) !important;
    border: 1px solid var(--dark-border-medium) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.dark-theme .chart-container .apexcharts-tooltip-title {
    background: var(--dark-border-light) !important;
    border-bottom: 1px solid var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .chart-container .apexcharts-xaxistooltip {
    background: var(--dark-bg-hover) !important;
    border: 1px solid var(--dark-border-medium) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .chart-container .apexcharts-grid line {
    stroke: var(--dark-border-light) !important;
}

.dark-theme .chart-container .apexcharts-yaxis-label,
.dark-theme .chart-container .apexcharts-xaxis-label {
    fill: var(--dark-text-secondary) !important;
}

/* Converter card */
.dark-theme .converter-card {
    background-color: var(--dark-bg-primary);
    border: 1px solid var(--dark-border-medium);
}

body.dark-theme .converter-card .card-body {
    background-color: var(--dark-bg-primary);
}

body.dark-theme .converter-card h3 {
    color: var(--dark-text-primary);
}

body.dark-theme .converter-card .form-label {
    color: var(--dark-text-secondary);
}

body.dark-theme .converter-card .form-control,
body.dark-theme .converter-card .form-select {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-medium);
}

body.dark-theme .converter-card .form-control:focus,
body.dark-theme .converter-card .form-select:focus {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-gold-primary);
    box-shadow: 0 0 0 0.25rem rgba(241, 185, 51, 0.25);
}

body.dark-theme .converter-card .input-group-text {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-secondary);
    border: 1px solid var(--dark-border-medium);
}

/* Dropdown menus */
.dark-theme .dropdown-item {
    color: var(--dark-text-primary);
}

.dark-theme .dropdown-item:hover {
    background-color: var(--dark-bg-hover);
    color: var(--dark-gold-primary);
}

/* Buttons */
.dark-theme .btn-outline-light {
    border-color: var(--dark-gold-primary);
    color: var(--dark-gold-primary);
}

.dark-theme .btn-outline-light:hover {
    background-color: var(--dark-gold-primary);
    color: #212529;
}

/* Gold button in dark mode */
body.dark-theme .btn-gold {
    background-color: var(--dark-gold-primary);
    color: #000;
    border: none;
}

body.dark-theme .btn-gold:hover {
    background-color: #e5a926;
    color: #ffffff;
}

/* Price trends section */
body.dark-theme .price-trends h2,
body.dark-theme .global-rates h2,
body.dark-theme .historical-trends h2 {
    color: var(--dark-gold-primary);
}

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

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

/* Heading with gold gradient */
body.dark-theme .heading-gold {
    background: linear-gradient(135deg, var(--dark-gold-primary) 0%, var(--dark-gold-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* Price change indicators with better contrast */
body.dark-theme .price-up {
    color: var(--dark-success);
}

body.dark-theme .price-down {
    color: var(--dark-danger);
}

/* Table headings */
body.dark-theme #global-rates-table thead th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-gold-primary);
    border-color: var(--dark-border-light);
}

/* Table rows */
body.dark-theme #global-rates-table tbody tr {
    border-color: var(--dark-border-light);
}

body.dark-theme #global-rates-table tbody tr:hover {
    background-color: var(--dark-bg-elevated);
}

/* Market status bar */
body.dark-theme .market-status-bar {
    background-color: var(--dark-gold-primary);
    color: #212529;
}

body.dark-theme .market-status-bar h5 {
    color: #212529;
    font-weight: 600;
}

body.dark-theme .market-status-bar .status-text {
    color: #212529;
}

/* Improve form input placeholders */
body.dark-theme ::placeholder {
    color: #999 !important;
    opacity: 1;
}

/* Improve select option readability */
body.dark-theme option {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
}

/* Button group improvements */
body.dark-theme .btn-group .btn {
    border-color: var(--dark-border-medium);
    color: var(--dark-text-primary);
    background-color: var(--dark-bg-elevated);
}

body.dark-theme .btn-group .btn.active {
    background-color: var(--dark-gold-primary);
    color: #212529;
    border-color: var(--dark-gold-primary);
}

body.dark-theme .btn-group .btn:hover:not(.active) {
    background-color: var(--dark-bg-hover);
}

/* Nav tabs improvements */
body.dark-theme .nav-tabs {
    border-color: var(--dark-border-light);
}

body.dark-theme .nav-tabs .nav-link {
    color: var(--dark-text-secondary);
    border-color: transparent;
}

body.dark-theme .nav-tabs .nav-link.active {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-gold-primary);
    border-color: var(--dark-border-light) var(--dark-border-light) var(--dark-bg-tertiary);
}

body.dark-theme .nav-tabs .nav-link:hover:not(.active) {
    border-color: var(--dark-bg-hover);
    background-color: var(--dark-bg-elevated);
}

/* Metal cards */
body.dark-theme .metal-card {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border-light);
}

body.dark-theme .metal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Metal prices */
body.dark-theme .gold-text {
    color: var(--dark-gold-primary) !important;
}

body.dark-theme .silver-text {
    color: #e0e0e0 !important;
}

body.dark-theme .platinum-text {
    color: #ffffff !important;
}

/* Metal icons */
body.dark-theme .metal-icon-container {
    background-color: rgba(241, 185, 51, 0.1);
}

/* Weight selectors */
body.dark-theme .weight-unit-selector .form-select {
    background-color: var(--dark-bg-elevated);
    border-color: var(--dark-border-medium);
    color: var(--dark-text-primary);
}

body.dark-theme .custom-weight-input-container {
    background-color: var(--dark-bg-elevated);
    border-color: var(--dark-border-medium);
}

body.dark-theme .weight-slider-container small {
    color: var(--dark-text-muted);
}

body.dark-theme .form-range::-webkit-slider-thumb {
    background-color: var(--dark-gold-primary);
}

body.dark-theme .form-range::-moz-range-thumb {
    background-color: var(--dark-gold-primary);
}

/* Country selector dropdown - improved */
body.dark-theme .country-selector-container {
    background-color: transparent !important;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
}

body.dark-theme #country-selector {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-medium);
    padding-right: 40px;
    appearance: auto;
    height: 48px;
    width: 100%;
    border-radius: 4px;
}

body.dark-theme .country-flag-selector {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    border-radius: 2px;
}

/* Fix for the select dropdown arrow */
body.dark-theme select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f1b933' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Country code badges */
body.dark-theme .country-code {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-medium);
}

/* Badges */
body.dark-theme .badge.bg-success {
    background-color: var(--dark-success) !important;
    color: #fff;
}

/* Social links */
body.dark-theme .social-links a {
    background-color: var(--dark-bg-elevated);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-medium);
}

body.dark-theme .social-links a:hover {
    background-color: var(--dark-gold-primary);
    color: #212529;
    border-color: var(--dark-gold-primary);
}

/* Conversion result container */
body.dark-theme #conversion-result .result-container {
    background-color: rgba(255, 248, 225, 0.05);
    border: 1px solid var(--dark-border-light);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

body.dark-theme #conversion-result .result-container p {
    color: var(--dark-text-secondary);
    margin-bottom: 5px;
}

body.dark-theme #conversion-result .result-container h2 {
    color: var(--dark-gold-primary);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

body.dark-theme #conversion-result .result-container .text-muted {
    color: var(--dark-text-muted) !important;
}

body.dark-theme #conversion-result .result-container .text-warning {
    color: var(--dark-warning) !important;
}

/* Fix for the Live Rates badge and spinner */
body.dark-theme .badge .fa-sync-alt {
    color: #fff;
}

/* Fix for the last updated text */
body.dark-theme #rates-last-updated {
    color: var(--dark-text-secondary) !important;
}

/* Ensure dropdown options are visible */
body.dark-theme .country-select option,
body.dark-theme .form-select option {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    padding: 8px;
}

/* Search inputs */
body.dark-theme .search-container .form-control {
    background-color: var(--dark-bg-elevated) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-primary);
}

body.dark-theme .search-container .input-group-text {
    background-color: var(--dark-bg-elevated) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--dark-text-muted);
}