/* ═══════════════════════════════════════════════════════════════
   سیناپس — Design System (shared with landing)
   Primary #0EA5E9 · CTA #F97316 · BG #F0F9FF · Text #0C4A6E
   ═══════════════════════════════════════════════════════════════ */

:root {
    --syn-primary: #0ea5e9;
    --syn-primary-dark: #0284c7;
    --syn-primary-darker: #0369a1;
    --syn-primary-light: #38bdf8;
    --syn-primary-soft: #e0f2fe;
    --syn-cta: #f97316;
    --syn-cta-dark: #ea580c;
    --syn-text: #0c4a6e;
    --syn-text-muted: #475569;
    --syn-text-faded: #64748b;
    --syn-bg: #f0f9ff;
    --syn-bg-alt: #e0f2fe;
    --syn-surface: #ffffff;
    --syn-border: #bae6fd;
    --syn-border-light: #e0f2fe;
    --syn-radius: 16px;
    --syn-radius-sm: 10px;
    --syn-radius-md: 12px;
    --syn-radius-lg: 24px;
    --syn-shadow: 0 24px 64px rgba(14, 165, 233, 0.12);
    --syn-shadow-soft: 0 8px 32px rgba(12, 74, 110, 0.08);
    --syn-shadow-card: 0 2px 12px rgba(14, 165, 233, 0.08);
    --syn-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.35);
    --syn-sidebar-bg: linear-gradient(180deg, #0c4a6e 0%, #075985 55%, #0369a1 100%);
    --syn-sidebar-hover: rgba(255, 255, 255, 0.1);
    --syn-sidebar-active: #0ea5e9;

    /* Bootstrap 5.3 tokens */
    --bs-primary: #0ea5e9;
    --bs-primary-rgb: 14, 165, 233;
    --bs-link-color: #0284c7;
    --bs-link-hover-color: #0369a1;
    --bs-body-color: #0c4a6e;
    --bs-body-bg: #f0f9ff;
    --bs-border-color: #bae6fd;
    --bs-focus-ring-color: rgba(14, 165, 233, 0.35);
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
}

/* ── Global base ── */
body.dashboard-body,
body.patient-portal-body {
    color: var(--syn-text);
    background-color: var(--syn-bg);
}

/* ── Bootstrap components ── */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-bg: var(--syn-primary);
    --bs-btn-border-color: var(--syn-primary);
    --bs-btn-hover-bg: var(--syn-primary-dark);
    --bs-btn-hover-border-color: var(--syn-primary-dark);
    --bs-btn-active-bg: var(--syn-primary-darker);
    --bs-btn-active-border-color: var(--syn-primary-darker);
    --bs-btn-disabled-bg: var(--syn-primary);
    --bs-btn-disabled-border-color: var(--syn-primary);
    border-radius: var(--syn-radius-sm);
    font-weight: 600;
    color: #ffffff;
}

.btn-outline-primary {
    --bs-btn-color: var(--syn-primary-dark);
    --bs-btn-border-color: var(--syn-primary);
    --bs-btn-hover-bg: var(--syn-primary);
    --bs-btn-hover-border-color: var(--syn-primary);
    --bs-btn-active-bg: var(--syn-primary-dark);
    --bs-btn-active-border-color: var(--syn-primary-dark);
    border-radius: var(--syn-radius-sm);
    font-weight: 600;
}

.btn-success {
    border-radius: var(--syn-radius-sm);
    font-weight: 600;
}

.btn-warning,
.btn-danger,
.btn-info,
.btn-secondary {
    border-radius: var(--syn-radius-sm);
    font-weight: 600;
}

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: var(--syn-focus-ring) !important;
    border-color: var(--syn-primary-light);
}

.form-control,
.form-select {
    border-color: var(--syn-border);
    border-radius: var(--syn-radius-sm);
    color: var(--syn-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--syn-primary);
}

.form-control-sm,
.form-select-sm {
    border-radius: 8px;
}

.card {
    border: 1px solid var(--syn-border-light);
    border-radius: var(--syn-radius-md);
    box-shadow: var(--syn-shadow-card);
}

.card-header {
    background: var(--syn-bg);
    border-bottom-color: var(--syn-border-light);
    color: var(--syn-text);
    font-weight: 600;
}

.table {
    --bs-table-color: var(--syn-text);
    --bs-table-border-color: var(--syn-border-light);
}

.table-light,
.table thead th {
    background-color: var(--syn-bg) !important;
    color: var(--syn-text-muted);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--syn-bg-alt);
}

.badge.text-bg-primary,
.bg-primary {
    background-color: var(--syn-primary) !important;
}

.text-primary {
    color: var(--syn-primary-dark) !important;
}

.border-primary {
    border-color: var(--syn-primary) !important;
}

.alert-success {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
    border-radius: var(--syn-radius-sm);
}

.alert-danger {
    border-radius: var(--syn-radius-sm);
}

.alert-warning {
    border-radius: var(--syn-radius-sm);
}

.alert-info {
    background-color: var(--syn-bg-alt);
    border-color: var(--syn-border);
    color: var(--syn-text);
    border-radius: var(--syn-radius-sm);
}

.nav-tabs .nav-link {
    color: var(--syn-text-muted);
    border-radius: var(--syn-radius-sm) var(--syn-radius-sm) 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--syn-primary-dark);
    border-color: var(--syn-border) var(--syn-border) var(--syn-surface);
    font-weight: 600;
}

.nav-pills .nav-link.active {
    background-color: var(--syn-primary);
}

.pagination .page-link {
    color: var(--syn-primary-dark);
    border-color: var(--syn-border-light);
    border-radius: 8px;
}

.pagination .page-item.active .page-link {
    background-color: var(--syn-primary);
    border-color: var(--syn-primary);
}

.modal-content {
    border: none;
    border-radius: var(--syn-radius-md);
    box-shadow: var(--syn-shadow);
}

.modal-header {
    border-bottom-color: var(--syn-border-light);
    background: var(--syn-bg);
}

.modal-footer {
    border-top-color: var(--syn-border-light);
    background: var(--syn-bg);
}

.dropdown-menu {
    border: 1px solid var(--syn-border-light);
    border-radius: var(--syn-radius-sm);
    box-shadow: var(--syn-shadow-soft);
}

.dropdown-item:active {
    background-color: var(--syn-primary);
}

.list-group-item {
    border-color: var(--syn-border-light);
    color: var(--syn-text);
}

.list-group-item.active {
    background-color: var(--syn-primary);
    border-color: var(--syn-primary);
}

.accordion-button:not(.collapsed) {
    background-color: var(--syn-bg-alt);
    color: var(--syn-primary-dark);
}

.accordion-button:focus {
    box-shadow: var(--syn-focus-ring);
}

.progress-bar {
    background-color: var(--syn-primary);
}

.spinner-border.text-primary {
    color: var(--syn-primary) !important;
}

/* ── Dashboard shell — sidebar styles in dashboard.css ── */
.patient-sidebar,
.admin-sidebar {
    /* inherits .sidebar--modern light theme */
}

.top-header {
    background: var(--syn-surface);
    border-bottom: 1px solid var(--syn-border-light);
    box-shadow: var(--syn-shadow-card);
}

.page-title {
    color: var(--syn-text);
}

.doctor-info {
    background: var(--syn-bg-alt);
    border: 1px solid var(--syn-border-light);
    color: var(--syn-text-muted);
    border-radius: 999px;
}

/* ── Dashboard components ── */
.stat-card,
.panel-card,
.table-card,
.form-card,
.detail-card {
    border: 1px solid var(--syn-border-light);
    border-radius: var(--syn-radius-md);
    box-shadow: var(--syn-shadow-card);
}

.stat-icon.blue { background: var(--syn-bg-alt); color: var(--syn-primary-dark); }
.stat-icon.cyan { background: #cffafe; color: #0891b2; }

.stat-value,
.patient-name,
.panel-header h5,
.detail-value {
    color: var(--syn-text);
}

.form-section-title {
    color: var(--syn-primary-dark);
    border-bottom-color: var(--syn-border);
}

.table-card .table th {
    background: var(--syn-bg);
    color: var(--syn-text-muted);
    border-bottom-color: var(--syn-border-light);
}

.action-card--lab {
    background: linear-gradient(135deg, var(--syn-primary-light) 0%, var(--syn-primary) 50%, var(--syn-primary-dark) 100%);
    border-color: var(--syn-primary-light);
}

.lab-modal-header--register {
    background: linear-gradient(135deg, var(--syn-primary-light) 0%, var(--syn-primary) 50%, var(--syn-primary-dark) 100%);
}

.lab-history-item .accordion-button:not(.collapsed) {
    background: var(--syn-bg-alt);
    color: var(--syn-primary-dark);
}

/* ── Page-specific accent harmonization ── */
.academic-topic-card__input:checked + .academic-topic-card__body {
    border-color: var(--syn-primary);
    background: var(--syn-bg-alt);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

.academic-topic-card:hover .academic-topic-card__body {
    border-color: var(--syn-primary-light);
}

.form-builder-palette__btn:hover,
.form-builder-field-row.is-selected {
    border-color: var(--syn-primary-light);
}

.form-builder-field-row.is-selected {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}

.report-section__header {
    background: linear-gradient(135deg, var(--syn-bg-alt) 0%, var(--syn-bg) 100%);
}

.report-section__title {
    color: var(--syn-text);
}

.work-calendar__cell--today {
    background: var(--syn-primary) !important;
    color: #fff !important;
}

.work-calendar__cell--selected {
    border-color: var(--syn-primary) !important;
    background: var(--syn-bg-alt) !important;
}

.legend-dot--today {
    background: var(--syn-primary-light) !important;
}

/* ── Default layout (Privacy etc.) ── */
.navbar-light.bg-white {
    background: var(--syn-surface) !important;
    border-bottom: 1px solid var(--syn-border-light) !important;
}

.navbar-brand {
    color: var(--syn-text) !important;
    font-weight: 700;
}

.navbar .nav-link {
    color: var(--syn-text-muted) !important;
}

.navbar .nav-link:hover {
    color: var(--syn-primary-dark) !important;
}

/* ── Search & quick actions ── */
.search-form .form-control {
    border-color: var(--syn-border);
    background: var(--syn-bg);
}

.search-form .form-control:focus {
    background: var(--syn-surface);
}

.quick-actions .btn {
    border-radius: var(--syn-radius-sm);
    font-weight: 600;
}

.content-area {
    background: transparent;
}

/* ── Wizard & forms ── */
.wizard-card {
    border: 1px solid var(--syn-border-light);
    box-shadow: var(--syn-shadow-soft);
}

.form-card,
.detail-card,
.table-card {
    background: var(--syn-surface);
}

/* ── Viewer shell ── */
.viewer-page-body {
    background: #0c4a6e;
}

.viewer-toolbar {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%) !important;
}

/* ── CTA accent (landing orange) ── */
.btn-warning,
.badge.bg-warning {
    --bs-warning: #f97316;
}

a:not(.btn):not(.sidebar-link):not(.nav-link):not(.dropdown-item) {
    color: var(--syn-primary-dark);
}

a:not(.btn):not(.sidebar-link):not(.nav-link):not(.dropdown-item):hover {
    color: var(--syn-primary-darker);
}