/* =============================================================================
   ECLIPSEFAN THEME - COMPONENTS (Dialogs & Overlays)
   =============================================================================
   Dark/Astro theme overrides for modal dialogs, eclipse calculator panel,
   and help system.
   Depends on: design-tokens.css
   ============================================================================= */

/* --- Dark mode: Modal dialogs --- */
[data-theme="dark"] .modal-dialog {
    background: var(--color-bg-elevated);
}

[data-theme="dark"] .modal-header {
    border-color: var(--color-border);
}

[data-theme="dark"] .modal-header h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .modal-close {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .modal-close:hover {
    color: var(--color-text-primary);
}

[data-theme="dark"] .modal-field label {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .modal-field input {
    background: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text-primary);
}

[data-theme="dark"] .modal-field .field-hint {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}

[data-theme="dark"] .modal-btn-cancel {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .modal-btn-cancel:hover {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .modal-loading {
    color: var(--color-text-secondary);
}

/* --- Astro mode: Modal dialogs --- */
[data-theme="astro"] .modal-dialog {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .modal-header {
    border-color: var(--color-border);
}

[data-theme="astro"] .modal-header h3 {
    color: var(--color-text-primary);
}

[data-theme="astro"] .modal-close {
    color: var(--color-text-tertiary);
}

[data-theme="astro"] .modal-close:hover {
    color: var(--color-text-primary);
}

[data-theme="astro"] .modal-field label {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .modal-field input {
    background: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text-primary);
}

[data-theme="astro"] .modal-field input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(170, 34, 34, 0.2);
}

[data-theme="astro"] .modal-field .field-hint {
    color: var(--color-text-tertiary);
}

[data-theme="astro"] .modal-footer {
    border-color: var(--color-border);
}

[data-theme="astro"] .modal-btn-cancel {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="astro"] .modal-btn-cancel:hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .modal-btn-ok {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}

[data-theme="astro"] .modal-btn-ok:hover {
    background: var(--color-accent-hover);
}

[data-theme="astro"] .modal-loading {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .modal-loading .spinner {
    border-color: var(--color-border);
    border-top-color: var(--color-accent);
}

/* --- Dark/Astro mode: Eclipse calc box (if visible) --- */
[data-theme="dark"] .eclipse-calc-box {
    background: var(--color-bg-elevated);
}

[data-theme="dark"] .eclipse-calc-box .eclipse-calc-header {
    border-color: var(--color-border);
}

[data-theme="dark"] .eclipse-calc-box .eclipse-calc-header:hover {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .eclipse-calc-box .eclipse-calc-header h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .eclipse-calc-box .calc-label {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .eclipse-calc-box .calc-value {
    color: var(--color-text-primary);
}

[data-theme="dark"] .eclipse-calc-box .calc-section {
    border-color: var(--color-border);
}

[data-theme="dark"] .eclipse-calc-box .calc-section-title {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .eclipse-calc-box .crosshair-info {
    color: var(--color-text-tertiary);
}

[data-theme="astro"] .eclipse-calc-box {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}

[data-theme="astro"] .eclipse-calc-box .eclipse-calc-header {
    border-color: var(--color-border);
}

[data-theme="astro"] .eclipse-calc-box .eclipse-calc-header:hover {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .eclipse-calc-box .eclipse-calc-header h3 {
    color: var(--color-text-primary);
}

[data-theme="astro"] .eclipse-calc-box .calc-label {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .eclipse-calc-box .calc-value {
    color: var(--color-text-primary);
}

[data-theme="astro"] .eclipse-calc-box .calc-section {
    border-color: var(--color-border);
}

[data-theme="astro"] .eclipse-calc-box .calc-section-title {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .eclipse-calc-box .duration-highlight {
    color: var(--color-accent);
}

[data-theme="astro"] .eclipse-calc-box .crosshair-info {
    color: var(--color-text-tertiary);
}

/* --- Dark/Astro mode: Help system --- */
[data-theme="dark"] {
    --help-bg: var(--color-bg-elevated);
    --help-text: var(--color-text-primary);
    --help-text-light: var(--color-text-secondary);
    --help-border: var(--color-border);
}

[data-theme="dark"] .help-modal-header {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .help-content {
    color: var(--color-text-primary);
}

[data-theme="dark"] .help-content h1,
[data-theme="dark"] .help-content h2,
[data-theme="dark"] .help-content h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .help-content code {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .help-content table {
    border-color: var(--color-border);
}

[data-theme="dark"] .help-content th {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .help-content td {
    border-color: var(--color-border);
}

[data-theme="dark"] .help-content blockquote {
    background: var(--color-bg-secondary);
    border-left-color: var(--color-accent);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .inline-help {
    border-color: var(--color-border);
}

[data-theme="dark"] .inline-help-toggle {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .inline-help-toggle:hover {
    color: var(--color-text-primary);
}

[data-theme="astro"] {
    --help-primary: var(--color-accent);
    --help-primary-light: var(--color-accent-hover);
    --help-bg: var(--color-bg-elevated);
    --help-text: var(--color-text-primary);
    --help-text-light: var(--color-text-secondary);
    --help-border: var(--color-border);
}

[data-theme="astro"] .help-modal-header {
    background: var(--color-bg-secondary);
}

[data-theme="astro"] .help-content {
    color: var(--color-text-primary);
}

[data-theme="astro"] .help-content h1,
[data-theme="astro"] .help-content h2,
[data-theme="astro"] .help-content h3 {
    color: var(--color-text-primary);
}

[data-theme="astro"] .help-content a {
    color: var(--color-accent);
}

[data-theme="astro"] .help-content code {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

[data-theme="astro"] .help-content table {
    border-color: var(--color-border);
}

[data-theme="astro"] .help-content th {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-theme="astro"] .help-content td {
    border-color: var(--color-border);
}

[data-theme="astro"] .help-content blockquote {
    background: var(--color-bg-secondary);
    border-left-color: var(--color-accent);
    color: var(--color-text-secondary);
}

[data-theme="astro"] .inline-help {
    border-color: var(--color-border);
}

[data-theme="astro"] .inline-help-toggle {
    color: var(--color-text-secondary);
}

[data-theme="astro"] .inline-help-toggle:hover {
    color: var(--color-text-primary);
}