/**
 * HealthGrowth.in - Dark Mode & Theme Toggle Styles
 */

/* Theme Toggle Button */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #f1f8f5;
    color: var(--navy);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    background: #e2f4eb;
    border-color: var(--green);
    transform: scale(1.05);
}

.theme-icon-sun,
.theme-icon-moon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.theme-toggle-btn .theme-icon-sun {
    display: none;
}

.theme-toggle-btn .theme-icon-moon {
    display: inline-block;
}

.theme-toggle-btn.is-dark {
    background: #1e293b;
    border-color: #334155;
    color: #facc15;
}

.theme-toggle-btn.is-dark .theme-icon-sun {
    display: inline-block;
}

.theme-toggle-btn.is-dark .theme-icon-moon {
    display: none;
}

/* =========================================================
   DARK MODE COLOR SYSTEM & COMPONENT OVERRIDES
========================================================= */

[data-theme="dark"] {
    --green: #10b981;
    --green-dark: #059669;
    --green-light: #064e3b;
    --navy: #f8fafc;
    --text: #cbd5e1;
    --muted: #94a3b8;
    --border: #23354d;
    --white: #132238;
    --soft: #0b1320;
}

[data-theme="dark"] body {
    background-color: #0b1320 !important;
    color: #cbd5e1 !important;
}

/* Header */
[data-theme="dark"] .header,
[data-theme="dark"] .site-header {
    background: #0e1a2b !important;
    border-bottom: 1px solid #23354d !important;
}

[data-theme="dark"] .logo-text strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .logo-text strong span {
    color: #34d399 !important;
}

[data-theme="dark"] .logo-text small {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .main-nav a {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active {
    color: #34d399 !important;
}

[data-theme="dark"] .main-nav a.active:after {
    background: #34d399 !important;
}

/* Hero Section */
[data-theme="dark"] .hero {
    background: radial-gradient(circle at 90% 50%, #162c46 0, transparent 40%), linear-gradient(110deg, #0b1320, #0e1a2b) !important;
}

[data-theme="dark"] .hero-badge {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .hero h1 {
    color: #f8fafc !important;
}

[data-theme="dark"] .hero h1 span {
    color: #34d399 !important;
}

[data-theme="dark"] .hero p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .hero-search {
    background: #132238 !important;
    border-color: #2e4a6d !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .hero-search input {
    background: #132238 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .hero-point {
    color: #94a3b8 !important;
}

[data-theme="dark"] .person-circle {
    background: linear-gradient(145deg, #10263f, #18385a) !important;
    border-color: #284c73 !important;
}

[data-theme="dark"] .visual-card {
    background: #132238 !important;
    border-color: #2e4a6d !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}

/* Categories & Calculator Grid */
[data-theme="dark"] .section-heading h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .section-heading p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .all-section {
    background: #0b1320 !important;
    border-color: #1e2f47 !important;
}

[data-theme="dark"] .category-card {
    background: #132238 !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .category-card:hover {
    border-color: #10b981 !important;
    background: #182c47 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] .category-card h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .category-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .cat-pill {
    background: #132238 !important;
    border-color: #23354d !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .cat-pill.active,
[data-theme="dark"] .cat-pill:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

[data-theme="dark"] .calculator-card {
    background: #132238 !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .calculator-card:hover {
    border-color: #10b981 !important;
    background: #182c47 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] .calculator-card h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .calculator-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .calc-link {
    color: #34d399 !important;
}

/* =========================================================
   SINGLE CALCULATOR PAGE DARK MODE
========================================================= */

[data-theme="dark"] .calc-page-container {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .breadcrumbs {
    color: #94a3b8 !important;
}

[data-theme="dark"] .breadcrumbs a {
    color: #34d399 !important;
}

[data-theme="dark"] .breadcrumbs span.current {
    color: #f8fafc !important;
}

[data-theme="dark"] .calc-hero-header {
    background: linear-gradient(135deg, #10243b 0%, #0e1a2b 100%) !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .calc-hero-header h1 {
    color: #f8fafc !important;
}

[data-theme="dark"] .calc-hero-header p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .who-badge {
    background: #064e3b !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .cat-badge {
    background: #1e2f47 !important;
    color: #f8fafc !important;
}

/* Calculator Form Panel */
[data-theme="dark"] .calc-card-panel {
    background: #132238 !important;
    border-color: #23354d !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .panel-header {
    border-bottom-color: #23354d !important;
}

[data-theme="dark"] .panel-header h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .unit-switcher {
    background: #0b1320 !important;
}

[data-theme="dark"] .unit-toggle-btn {
    color: #94a3b8 !important;
}

[data-theme="dark"] .unit-toggle-btn.active {
    background: #10b981 !important;
    color: #fff !important;
}

[data-theme="dark"] .input-group label {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .input-wrapper input,
[data-theme="dark"] .input-wrapper select {
    background: #0b1320 !important;
    border-color: #2e4a6d !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .input-wrapper input:focus,
[data-theme="dark"] .input-wrapper select:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2) !important;
}

[data-theme="dark"] .input-unit {
    color: #64748b !important;
}

[data-theme="dark"] .btn-secondary-reset {
    background: #0b1320 !important;
    border-color: #2e4a6d !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-secondary-reset:hover {
    background: #16263d !important;
}

/* Result Panel */
[data-theme="dark"] .result-panel {
    background: linear-gradient(135deg, #13253d 0%, #0d192a 100%) !important;
    border-color: #234563 !important;
}

[data-theme="dark"] .result-main {
    border-bottom-color: #23354d !important;
}

[data-theme="dark"] .result-heading-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .result-big-value {
    color: #f8fafc !important;
}

[data-theme="dark"] .result-unit-label {
    color: #34d399 !important;
}

[data-theme="dark"] .result-summary-text {
    background: #0b1624 !important;
    color: #a7f3d0 !important;
}

[data-theme="dark"] .breakdown-row {
    border-bottom-color: #23354d !important;
}

[data-theme="dark"] .breakdown-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .breakdown-val {
    color: #f8fafc !important;
}

[data-theme="dark"] .copy-btn {
    background: #132238 !important;
    border-color: #2e4a6d !important;
    color: #34d399 !important;
}

[data-theme="dark"] .copy-btn:hover {
    background: #1a304e !important;
}

/* Medical Disclaimer */
[data-theme="dark"] .medical-disclaimer-box {
    background: #231604 !important;
    border-color: #78350f !important;
    border-left-color: #f59e0b !important;
}

[data-theme="dark"] .disclaimer-body strong {
    color: #fde68a !important;
}

[data-theme="dark"] .disclaimer-body p {
    color: #fcd34d !important;
}

/* SEO Article */
[data-theme="dark"] .calc-seo-article {
    background: #132238 !important;
    border-color: #23354d !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .calc-seo-article h2 {
    color: #f8fafc !important;
    border-bottom-color: #23354d !important;
}

[data-theme="dark"] .calc-seo-article h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .calc-seo-article p,
[data-theme="dark"] .calc-seo-article ul,
[data-theme="dark"] .calc-seo-article ol {
    color: #94a3b8 !important;
}

[data-theme="dark"] .formula-box {
    background: #0b1726 !important;
    border-color: #234563 !important;
}

[data-theme="dark"] .formula-title {
    color: #34d399 !important;
}

[data-theme="dark"] .formula-code code {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .clinical-table th {
    background: #0e1c2e !important;
    color: #f8fafc !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .clinical-table td {
    background: #132238 !important;
    color: #cbd5e1 !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .clinical-table tr:nth-child(even) td {
    background: #0f1c2d !important;
}

[data-theme="dark"] .worked-example {
    background: #0c233a !important;
    color: #bae6fd !important;
    border-left-color: #0284c7 !important;
}

[data-theme="dark"] .faq-item {
    background: #0e1a2b !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .faq-question {
    color: #f8fafc !important;
}

[data-theme="dark"] .faq-answer p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .editorial-box {
    background: #0e1a2b !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .editorial-content strong {
    color: #f8fafc !important;
}

[data-theme="dark"] .related-calcs-section h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .related-card {
    background: #132238 !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .related-card:hover {
    border-color: #10b981 !important;
    background: #182c47 !important;
}

[data-theme="dark"] .related-card h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .related-card p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .related-link {
    color: #34d399 !important;
}

/* Info Banner */
[data-theme="dark"] .info-banner {
    background: linear-gradient(110deg, #10243b, #0e1a2b) !important;
    border-color: #23354d !important;
}

[data-theme="dark"] .info-logo {
    background: #163326 !important;
}

[data-theme="dark"] .info-banner h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .info-banner p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .info-feature {
    color: #94a3b8 !important;
}

[data-theme="dark"] .info-feature b {
    color: #34d399 !important;
}

/* Footer */
[data-theme="dark"] .footer {
    background: #0a101d !important;
    border-top: 1px solid #1e2f47 !important;
}

[data-theme="dark"] .footer h4 {
    color: #f8fafc !important;
}

[data-theme="dark"] .footer-about,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .newsletter p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .footer-links a:hover {
    color: #34d399 !important;
}

[data-theme="dark"] .socials a {
    background: #132238 !important;
    color: #34d399 !important;
}

[data-theme="dark"] .newsletter-box {
    border-color: #2e4a6d !important;
    background: #132238 !important;
}

[data-theme="dark"] .newsletter-box input {
    background: #132238 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .footer-bottom {
    background: #055030 !important;
    color: #d1fae5 !important;
}