/* ==========================================================================
   ديوان الكُتَّاب الذكي — رموز التصميم الموحّدة (Intelligent Kuttab Dewan tokens)
   AR: المصدر الوحيد لكل لون/خط/زاوية/ظل في المنصة (حزمة الهوية 2026-10-24، م٠).
       `--ikd-*` هي الرموز الأصلية من الحزمة، و`--brand-*` هي الأسماء التي يستهلكها
       quran-center.css القديم — تُشتق هنا من `--ikd-*` فلا يبقى لون مكتوبًا يدويًا في
       أكثر من مكان. تخصيص المؤسسة (InstitutionBrandSetting) يُحقن في layouts/app.blade.php
       كـ :root بعد هذا الملف فيغلب الافتراضي عند الحاجة.
   EN: The single source for every colour/font/radius/shadow (brand kit 2026-10-24, M0).
       `--ikd-*` are the kit's own tokens; `--brand-*` are the names the legacy
       quran-center.css consumes — derived here from `--ikd-*` so no colour is hand-written
       twice. Institution customisation (InstitutionBrandSetting) is injected in
       layouts/app.blade.php as a later :root block and overrides these defaults.
   ========================================================================== */
:root {
    /* Ivory / paper */
    --ikd-bg: #FAF7F0;
    --ikd-bg-2: #F4EFE4;
    --ikd-surface: #FFFDF8;
    --ikd-field: #FFFFFF;
    --ikd-beige: #EDE3CF;
    --ikd-line: #E6DED0;
    --ikd-line-strong: #D5CBB8;
    /* Muted green (primary) */
    --ikd-green-900: #1F4337;
    --ikd-green-700: #2E5E4E;
    --ikd-green-500: #4F7D6B;
    --ikd-green-200: #C9DACF;
    --ikd-green-50: #EBF2EC;
    /* Calm gold (accent) */
    --ikd-gold-700: #A97E45;
    --ikd-gold-500: #C49A5E;
    --ikd-gold-300: #D9B47E;
    --ikd-gold-50: #F8EFDD;
    /* Ink */
    --ikd-ink: #2A2B26;
    --ikd-ink-2: #5E5D55;
    --ikd-ink-3: #8C887C;
    /* States */
    --ikd-danger: #A8574B;
    --ikd-danger-bg: #F6E7E3;
    --ikd-info: #4C6B78;
    --ikd-info-bg: #E7EEF0;
    --ikd-archived: #8C887C;
    --ikd-archived-bg: #F1EEE7;
    /* Shape */
    --ikd-radius-sm: 8px;
    --ikd-radius: 12px;
    --ikd-radius-lg: 16px;
    --ikd-shadow: 0 1px 2px rgba(60, 50, 30, .04), 0 4px 14px rgba(60, 50, 30, .05);
    --ikd-shadow-hover: 0 2px 4px rgba(60, 50, 30, .05), 0 10px 24px rgba(60, 50, 30, .08);
    --ikd-shadow-soft: var(--ikd-shadow); /* legacy alias used by quran-center.css */
    /* Type */
    --ikd-font-head: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
    --ikd-font-body: 'IBM Plex Sans Arabic', sans-serif;
    --ikd-font-latin-mark: 'Marcellus', serif;
    --ikd-ease: cubic-bezier(.2, .7, .2, 1);
    /* Charts (chart-theme.json) */
    --ikd-chart-1: #2E5E4E;
    --ikd-chart-2: #C49A5E;
    --ikd-chart-3: #CFCAC0;
    --ikd-chart-4: #4F7D6B;
    --ikd-chart-5: #4C6B78;
    --ikd-chart-grid: #ECE5D8;

    /* ── Legacy bridge: --brand-* consumed by quran-center.css ── */
    --brand-primary: var(--ikd-green-700);
    --brand-primary-dark: var(--ikd-green-900);
    --brand-primary-light: var(--ikd-green-50);
    --brand-secondary: var(--ikd-gold-500);
    --brand-secondary-dark: var(--ikd-gold-700);
    --brand-secondary-light: var(--ikd-gold-50);
    --brand-accent: var(--ikd-gold-700);
    --brand-bg: var(--ikd-bg);
    --brand-bg-soft: var(--ikd-bg-2);
    --brand-surface: var(--ikd-surface);
    --brand-surface-muted: var(--ikd-bg-2);
    --brand-text: var(--ikd-ink);
    --brand-text-muted: var(--ikd-ink-2);
    --brand-border: var(--ikd-line);
    --brand-success: var(--ikd-green-500);
    --brand-warning: var(--ikd-gold-700);
    --brand-danger: var(--ikd-danger);
    --brand-info: var(--ikd-info);
    --brand-font-heading: var(--ikd-font-head);
    --brand-font-body: var(--ikd-font-body);
    --brand-radius-card: var(--ikd-radius);
    --brand-radius-control: var(--ikd-radius-sm);
}

/* ── Icons: 24px line icons from assets/brand/kit/icons/_sprite.svg (stroke = currentColor) ── */
.ikd-icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.25em;
}

.ikd-icon--sm { width: 1em; height: 1em; }
.ikd-icon--lg { width: 1.6em; height: 1.6em; }

/* ── Sidebar areas (config/navigation_areas.php, M1): SVG symbol inside the icon tile ── */
.ikd-redesign .sidebar-link__icon {
    display: grid;
    place-items: center;
    color: var(--brand-primary-dark);
}

.ikd-redesign .sidebar-link__icon .ikd-icon {
    width: 20px;
    height: 20px;
}

.ikd-redesign .sidebar-link.active .sidebar-link__icon {
    background: var(--ikd-green-50);
    color: var(--ikd-green-700);
}

.ikd-redesign .sidebar-group__toggle {
    font-family: var(--ikd-font-head);
    letter-spacing: 0;
    text-transform: none;
    font-size: .8rem;
}

/* ── Loaders (kit assets/loader/loader.css, tokenised) ── */
.ikd-loader {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--ikd-chart-grid);
    border-top-color: var(--ikd-green-700);
    animation: ikd-spin 1s linear infinite;
}

.ikd-loader--sm { width: 20px; height: 20px; border-width: 3px; }

.ikd-skeleton {
    background: linear-gradient(90deg, #F1EEE7 25%, #F8F5EE 50%, #F1EEE7 75%);
    background-size: 200% 100%;
    animation: ikd-shimmer 1.4s ease infinite;
    border-radius: var(--ikd-radius-sm);
}

@keyframes ikd-spin { to { transform: rotate(360deg); } }
@keyframes ikd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Empty states (kit assets/illustrations, 240×190) ── */
.ikd-empty-state {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ikd-ink-2);
}

.ikd-empty-state__art { width: min(240px, 70%); height: auto; margin-bottom: .6rem; }
.ikd-empty-state__title { margin: 0; font-family: var(--ikd-font-head); font-weight: 600; color: var(--ikd-ink); }
.ikd-empty-state__text { margin: 0; max-width: 36ch; font-size: .95rem; }
.ikd-empty-state__action { margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
    .ikd-loader,
    .ikd-skeleton { animation: none; }
}