/*
 * RTL/LTR Bi-Directional Stylesheet
 * Uses CSS Logical Properties throughout so the UI mirrors correctly
 * when the document direction switches between RTL (Arabic/Kurdish) and LTR (English).
 *
 * Rules:
 *   - Layout uses margin-inline-start/end, padding-inline-start/end
 *   - Numbers, dates, math, and time-series charts always remain LTR
 *   - Directional icons (arrows, play buttons) flip via [dir=rtl] selectors
 *   - Non-directional icons (checkmarks, math operators) do NOT flip
 */

/* ─────────────────────────────────────────────
   SHARED DESIGN TOKENS
───────────────────────────────────────────── */
:root {
    --color-bg: var(--surface-page, #f4f1ea);
    --color-surface: var(--surface-card, #ffffff);
    --color-surface-2: var(--surface-card-alt, #f8fafc);
    --color-border: var(--border-light, #d8e1eb);
    --color-text: var(--text-primary, #111827);
    --color-text-muted: var(--text-muted, #64748b);
    --color-primary: var(--primary, #eab308);
    --color-primary-dark: var(--primary-hover, #ca8a04);
    --color-success: var(--success, #22c55e);
    --color-warning: var(--warning, #f59e0b);
    --color-danger: var(--danger, #ef4444);
    --color-info: var(--info, #3b82f6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --transition: 0.2s ease;
}

/* Apply tokens globally */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color var(--transition), color var(--transition);
}

/* ─────────────────────────────────────────────
   FONT STACKS PER LANGUAGE
───────────────────────────────────────────── */
body:lang(ar) {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

body:lang(ckb) {
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;
}

body:lang(en) {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────
   LAYOUT – LOGICAL PROPERTIES
   Use these instead of margin-left/right to get automatic RTL mirroring
───────────────────────────────────────────── */

/* Card surfaces */
.card,
.surface {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Sidebar / navigation spacing */
.sidebar-item {
    padding-inline-start: 1rem;
    padding-inline-end: 0.5rem;
    border-inline-start: 3px solid transparent;
}

.sidebar-item.active {
    border-inline-start-color: var(--color-primary);
}

/* Form controls */
.form-control,
.form-select {
    background-color: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text);
    text-align: start;
    /* Follows document direction */
}

/* ─────────────────────────────────────────────
   NUMBERS, DATES, MATH – ALWAYS LTR
   Critical: these must NEVER be reversed, regardless of page direction.
───────────────────────────────────────────── */
.number,
.date,
.year,
.stat-value,
[class*="count"],
[class*="score"],
[class*="percent"],
time,
.badge-number,
.citation-count,
.impact-factor {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Mathematical expressions */
.math,
.equation,
.formula {
    direction: ltr;
    unicode-bidi: embed;
    font-family: 'Cambria Math', 'Latin Modern Math', serif;
}

/* ─────────────────────────────────────────────
   CHARTS – Time-series stays LTR, categorical can mirror
───────────────────────────────────────────── */

/* Time-series charts (line / area) always stay LTR */
[dir="rtl"] .chart-timeseries,
[dir="rtl"] .chart-timeline,
[dir="rtl"] canvas.chart-line {
    direction: ltr;
}

/* Categorical / comparison charts: allow natural mirroring – no CSS override needed. */

/* ─────────────────────────────────────────────
   DIRECTIONAL ICON FLIPPING
───────────────────────────────────────────── */

/* Icons that indicate spatial direction – flip in RTL */
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-next,
[dir="rtl"] .icon-forward,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-caret-right {
    transform: scaleX(-1);
    display: inline-block;
}

[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-caret-left {
    transform: scaleX(-1);
    display: inline-block;
}

/* Icons that are universal / non-directional – NEVER flip */
.fa-check,
.fa-check-circle,
.fa-times,
.fa-plus,
.fa-minus,
.fa-star,
.fa-heart,
.fa-search,
.fa-lock,
.fa-unlock {
    direction: ltr;
    unicode-bidi: isolate;
}

/* AI Disclosure warning banner */
.ai-disclosure-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-inline-start: 4px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-block-end: 1rem;
    font-size: 0.875rem;
}

/* Human-in-the-loop approval section */
.section-approval {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-block: 1rem;
    position: relative;
}

.section-approval.approved {
    border-color: var(--color-success);
    border-style: solid;
}

.section-approval.approved::after {
    content: '✓ Approved';
    position: absolute;
    top: -10px;
    inset-inline-end: 12px;
    background: var(--color-success);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Progress bars */
.progress {
    background-color: var(--color-surface-2);
    border-radius: var(--radius-lg);
}

/* Skeleton loader for async AI tasks */
.skeleton {
    background: linear-gradient(90deg,
            var(--color-surface-2) 25%,
            var(--color-border) 50%,
            var(--color-surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-wave {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-block-end: 0.5em;
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-block-end: 1em;
}

.skeleton-para {
    height: 0.85em;
    margin-block-end: 0.4em;
}

.skeleton-para:last-child {
    width: 80%;
}

/* Responsive */
@media (max-width: 768px) {
    [dir="rtl"] .navbar-collapse {
        text-align: end;
    }
}