/**
 * Orthopedic Appointments - Frontend Neutral Theme
 * Replaces the blue/purple palette with a black/gray palette.
 *
 * Notes:
 * - This file MUST be enqueued only on frontend pages that render Ortho shortcodes.
 * - Kept intentionally minimal to avoid conflicts with Astra (global theme CSS).
 */

/* ==========================================================================
   Core neutral palette (shared variables)
   ========================================================================== */
:root {
    /* Admin-style.css variables */
    --ortho-primary: #111827;
    --ortho-primary-dark: #0b1220;
    --ortho-secondary: #6b7280;
    --ortho-info: #9ca3af;
    --ortho-border: #e5e7eb;
    --ortho-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.06);

    /* Frontend-style.css variables */
    --ortho-primary-2: #374151;
    --ortho-accent: #6b7280;
    --ortho-text: #111827;
    --ortho-muted: #6b7280;
    --ortho-surface: #ffffff;
    --ortho-surface-soft: #f3f4f6;
    --ortho-shadow: 0 10px 35px rgba(17, 24, 39, 0.10);

    /* Medical-history.css variables */
    --mh-primary: #111827;
    --mh-primary-dark: #0b1220;
    --mh-dark: #111827;
    --mh-gray: #6b7280;
    --mh-light: #f9fafb;
    --mh-border: #e5e7eb;
    --mh-shadow: 0 0.5rem 1rem rgba(17, 24, 39, 0.10);
}

/* Dark mode variables (dokme-shab-va-rooz: standard mode) */
html[data-od-theme="dark"][data-od-theme-mode="standard"] {
    /* Keep accents neutral, but ensure readable surfaces/text */
    --ortho-light: #070a0f;
    --ortho-white: #0b1220;
    --ortho-dark: #e5e7eb;
    --ortho-secondary: #9ca3af;
    --ortho-border: rgba(148, 163, 184, 0.22);
    --ortho-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);

    --ortho-text: #e5e7eb;
    --ortho-muted: #9ca3af;
    --ortho-surface: #0b1220;
    --ortho-surface-soft: #070a0f;
    --ortho-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);

    --mh-dark: #e5e7eb;
    --mh-gray: #9ca3af;
    --mh-light: rgba(148, 163, 184, 0.08);
    --mh-white: #0b1220;
    --mh-border: rgba(148, 163, 184, 0.22);
    --mh-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   Jalali datepicker (neutralize purple/blue accents)
   ========================================================================== */
.jalali-header {
    border-bottom-color: #111827;
}

.jalali-selected-info {
    background: #f9fafb;
}

.jalali-day-name {
    color: #374151;
}

.jalali-nav {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
}

.jalali-nav:hover {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25);
}

.jalali-day:hover:not(.jalali-empty):not(.jalali-disabled) {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.22);
}

.jalali-day.jalali-selected {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.22);
}

.jalali-day.jalali-today {
    background: #f3f4f6;
    color: #111827;
    border-color: #111827;
}

/* Dark mode tweaks for jalali controls (keep consistent neutral) */
html[data-od-theme="dark"][data-od-theme-mode="standard"] .jalali-nav {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
}

/* ==========================================================================
   Medical history (neutralize blue hover/selection)
   ========================================================================== */
.checkbox-item:hover {
    background: #f3f4f6;
    border-color: rgba(17, 24, 39, 0.25);
}

.checkbox-item:has(input:checked) {
    background: rgba(17, 24, 39, 0.06);
    border-color: rgba(17, 24, 39, 0.28);
}

/* Radio items (light mode) */
.radio-item:hover {
    background: #f3f4f6;
}

.radio-item:has(input:checked) {
    background: rgba(17, 24, 39, 0.06);
    border-color: rgba(17, 24, 39, 0.28);
}

/* Modal: section titles + checkbox items (light mode) */
.modal-section-title {
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.06), transparent);
}

.modal-checkbox-item:hover {
    background: #f3f4f6;
}

.modal-checkbox-item:has(input:checked) {
    background: rgba(17, 24, 39, 0.06);
    border-color: rgba(17, 24, 39, 0.28);
}

/* Keep checked label readable (uses --mh-primary) */
.checkbox-item input[type="checkbox"]:checked + .checkbox-label {
    color: var(--mh-dark);
}

/* Dark mode: remove blue-tinted hover/selection backgrounds */
html[data-od-theme="dark"][data-od-theme-mode="standard"] .checkbox-item:hover {
    background: rgba(148, 163, 184, 0.10);
    border-color: rgba(148, 163, 184, 0.28);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .checkbox-item:has(input:checked) {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.32);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .radio-item:hover {
    background: rgba(148, 163, 184, 0.08);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .radio-item:has(input:checked) {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.32);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .modal-section-title {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.14), transparent);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .modal-checkbox-item:hover {
    background: rgba(148, 163, 184, 0.08);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .modal-checkbox-item:has(input:checked) {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.32);
}