/**
 * ================================================================
 * المصحح الذكي - أكاديمية جدير (Jadeer Standalone Smart Grader)
 * Modern Design System & Component Styles
 * ================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');
@import 'tokens.css';
@import 'modals.css';
@import 'dropdowns.css';

:root,
[data-theme="light"] {
  /* ================================================================
     MASTER DESIGN TOKENS (LIGHT THEME - ORGANIC EYE-COMFORT SPEC)
     ================================================================ */

  /* 1. Canvas & Surface Hierarchy (خلفيات مريحة للعين وتدرج طبقي هادئ) */
  --bg-app: #f1f5f9;                   /* Soothing Slate Porcelain canvas - zero glare, high card contrast */
  --bg-card: #ffffff;                  /* Crisp pure white elevated surface for content cards */
  --bg-secondary: #e2e8f0;             /* Cool slate for toolbars, search bars, pill containers */
  --bg-tertiary: #cbd5e1;              /* Calm soft neutral for borders, dividers, inactive states */
  --bg-subtle: #f8fafc;                /* Subtle blending surface */
  --bg-hover: #e2e8f0;                 /* Gentle hover feedback */
  --bg-active: #cbd5e1;                /* Active state background */

  --surface-glass: rgba(255, 255, 255, 0.96);
  --surface-glass-border: rgba(203, 213, 225, 0.85);
  --surface-elevated: #ffffff;
  --surface-elevated-hover: #f8fafc;
  --surface-rail: #ffffff;

  /* Executive Layout Ergonomics (Laptop High-Density Calibration) */
  --header-height: 40px;
  --sidebar-width: 172px;
  --nav-group-header-height: 28px;
  --nav-item-height: 25px;
  --nav-box-height: clamp(65px, 16vh, 125px);

  /* 2. Hairline Soft Borders (فواصل وحدود نظيفة هادئة) */
  --border-subtle: #e2e8f0;            /* Delicate hairline division */
  --border-medium: #cbd5e1;            /* Defined soft edge for inputs and cards */
  --border-strong: #94a3b8;            /* High emphasis border */
  --border-hover: #059669;
  --border-focus: #059669;
  --border-glass: rgba(226, 232, 240, 0.95);
  --border-glass-glow: rgba(5, 150, 105, 0.25);

  /* 3. Eyestrain-Free Text Colors (نصوص متدرجة ومريحة دون حدة السواد الفاحم) */
  --text-primary: #0f172a;             /* Deep Slate 900 - maximum clarity, zero eye fatigue */
  --text-main: #0f172a;                /* Unified alias */
  --text-secondary: #334155;           /* Slate 700 - rich readable neutral for secondary text */
  --text-muted: #64748b;               /* Slate 500 - calm, balanced for metadata and hints */
  --text-subtle: #94a3b8;              /* Slate 400 - delicate placeholder & disabled label */
  --text-inverse: #ffffff;

  /* 4. Harmonious Brand & Status Accents (ألوان حالات ونظام متناسق) */
  /* Emerald (الأخضر الزمردي الأكاديمي المعتمد) */
  --accent-emerald: #059669;
  --accent-emerald-hover: #047857;
  --accent-emerald-light: rgba(5, 150, 105, 0.09);
  --accent-emerald-border: rgba(5, 150, 105, 0.25);
  --accent-emerald-gradient: linear-gradient(135deg, #059669 0%, #0d9488 100%);
  --accent-emerald-glow: 0 2px 10px rgba(5, 150, 105, 0.20);

  /* Sapphire Blue (الأزرق العلمي للبيانات والمقررات) */
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-blue-light: rgba(37, 99, 235, 0.09);
  --accent-blue-border: rgba(37, 99, 235, 0.25);
  --accent-blue-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --accent-blue-glow: 0 2px 10px rgba(37, 99, 235, 0.20);

  /* Warm Amber Gold (الذهبي العنبري للتنبيهات والأعمال المعلقة) */
  --accent-amber: #d97706;
  --accent-amber-hover: #b45309;
  --accent-amber-light: rgba(217, 119, 6, 0.09);
  --accent-amber-border: rgba(217, 119, 6, 0.25);
  --accent-amber-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  --accent-amber-glow: 0 2px 10px rgba(217, 119, 6, 0.20);

  /* Crimson Rose (القرمزي للتحذيرات والحرمان والطعون) */
  --accent-rose: #e11d48;
  --accent-rose-hover: #be123c;
  --accent-rose-light: rgba(225, 29, 72, 0.09);
  --accent-rose-border: rgba(225, 29, 72, 0.25);
  --accent-rose-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  --accent-rose-glow: 0 2px 10px rgba(225, 29, 72, 0.20);

  /* Amethyst Purple (البنفسجي الملكي للشهادات وبنك الأسئلة) */
  --accent-purple: #7c3aed;
  --accent-purple-hover: #6d28d9;
  --accent-purple-light: rgba(124, 58, 237, 0.09);
  --accent-purple-border: rgba(124, 58, 237, 0.25);
  --accent-purple-gradient: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  --accent-purple-glow: 0 2px 10px rgba(124, 58, 237, 0.20);

  /* 5. Inputs & Form Controls (المدخلات وحقول الاختيار المريحة) */
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-border-hover: #94a3b8;
  --input-focus-border: #059669;
  --input-focus-ring: 0 0 0 3.5px rgba(5, 150, 105, 0.14);
  --input-placeholder: #94a3b8;

  /* 6. Multi-Layer Natural Ambient Shadows (ظلال هوائية ناعمة مريحة تمنح عمقاً حقيقياً) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 20px -3px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 30px -5px rgba(15, 23, 42, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(226, 232, 240, 0.95);
  --shadow-card-hover: 0 8px 24px -4px rgba(15, 23, 42, 0.12), 0 2px 6px -1px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(5, 150, 105, 0.45);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-luxury-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-luxury-md: 0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-luxury-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-luxury-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);


  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Typography Scale */
  --font-sans: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Outfit', 'Cairo', sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.80rem;
  --text-base: 0.88rem;
  --text-md: 0.95rem;
  --text-lg: 1.10rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.50rem;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* Legacy & ANS Compatibility Aliases */
  --ans-bg: var(--bg-app);
  --ans-surface: var(--bg-card);
  --ans-surface-subtle: var(--bg-secondary);
  --ans-surface-elevated: var(--bg-card);
  --ans-card-bg: var(--bg-card);
  --ans-card-bg-subtle: var(--bg-secondary);
  --ans-border: var(--border-subtle);
  --ans-border-subtle: var(--border-subtle);
  --ans-border-hover: var(--border-medium);
  --ans-primary: var(--accent-emerald);
  --ans-primary-hover: var(--accent-emerald-hover);
  --ans-primary-soft: var(--accent-emerald-light);
  --ans-primary-border: var(--accent-emerald-border);
  --ans-primary-gradient: var(--accent-emerald-gradient);
  --ans-primary-glow: var(--accent-emerald-glow);
  --ans-blue: var(--accent-blue);
  --ans-blue-soft: var(--accent-blue-light);
  --ans-blue-border: var(--accent-blue-border);
  --ans-blue-glow: var(--accent-blue-glow);
  --ans-amber: var(--accent-amber);
  --ans-amber-soft: var(--accent-amber-light);
  --ans-amber-border: var(--accent-amber-border);
  --ans-rose: var(--accent-rose);
  --ans-rose-soft: var(--accent-rose-light);
  --ans-rose-border: var(--accent-rose-border);
  --ans-purple: var(--accent-purple);
  --ans-purple-soft: var(--accent-purple-light);
  --ans-purple-border: var(--accent-purple-border);
  --ans-shadow-card: var(--shadow-sm);
  --ans-shadow-elevated: var(--shadow-md);
  --ans-shadow-float: var(--shadow-xl);
  --ans-radius-sm: var(--radius-sm);
  --ans-radius-md: var(--radius-md);
  --ans-radius-lg: var(--radius-lg);
  --ans-radius-xl: var(--radius-xl);

  /* ================================================================
     7. COMPREHENSIVE DESIGN TOKEN SUITE: BUTTONS, SCALES & WINDOWS
     ================================================================ */
  /* --- Button Sizing & Ergonomic Scales (أبعاد ومقاسات الأزرار الموحدة) --- */
  --btn-size-xs-h: 24px;
  --btn-size-xs-px: 8px;
  --btn-size-xs-py: 2px;
  --btn-size-xs-font: 0.70rem;
  --btn-size-xs-radius: 6px;
  --btn-size-xs-gap: 4px;
  --btn-size-xs-icon: 12px;

  --btn-size-sm-h: 30px;
  --btn-size-sm-px: 11px;
  --btn-size-sm-py: 4px;
  --btn-size-sm-font: 0.76rem;
  --btn-size-sm-radius: 7px;
  --btn-size-sm-gap: 5px;
  --btn-size-sm-icon: 14px;

  --btn-size-md-h: 36px;
  --btn-size-md-px: 15px;
  --btn-size-md-py: 6px;
  --btn-size-md-font: 0.84rem;
  --btn-size-md-radius: 8px;
  --btn-size-md-gap: 6px;
  --btn-size-md-icon: 16px;

  --btn-size-lg-h: 42px;
  --btn-size-lg-px: 19px;
  --btn-size-lg-py: 9px;
  --btn-size-lg-font: 0.92rem;
  --btn-size-lg-radius: 10px;
  --btn-size-lg-gap: 8px;
  --btn-size-lg-icon: 18px;

  --btn-size-xl-h: 48px;
  --btn-size-xl-px: 24px;
  --btn-size-xl-py: 12px;
  --btn-size-xl-font: 1.00rem;
  --btn-size-xl-radius: 12px;
  --btn-size-xl-gap: 10px;
  --btn-size-xl-icon: 20px;

  --btn-radius-pill: 9999px;
  --btn-border-width: 1px;
  --btn-border-style: solid;
  --btn-transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --btn-hover-transform: translateY(-1px);
  --btn-active-transform: translateY(1px) scale(0.985);

  /* --- Button Variants & Color Hierarchy (Light) --- */
  /* Primary (Emerald / الهوية الأكاديمية) */
  --btn-primary-bg: #059669;
  --btn-primary-hover-bg: #047857;
  --btn-primary-active-bg: #065f46;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #059669;
  --btn-primary-hover-border: #047857;
  --btn-primary-shadow: 0 2px 6px -1px rgba(5, 150, 105, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-primary-hover-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.42);
  --btn-primary-ring: 0 0 0 3px rgba(5, 150, 105, 0.22);

  /* Secondary (Slate / الحيادي النظيف) */
  --btn-secondary-bg: #ffffff;
  --btn-secondary-hover-bg: #f8fafc;
  --btn-secondary-active-bg: #e2e8f0;
  --btn-secondary-text: #334155;
  --btn-secondary-border: #cbd5e1;
  --btn-secondary-hover-border: #059669;
  --btn-secondary-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --btn-secondary-hover-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);

  /* Blue / Sapphire (البيانات والمقررات والتوجيه) */
  --btn-blue-bg: #2563eb;
  --btn-blue-hover-bg: #1d4ed8;
  --btn-blue-active-bg: #1e40af;
  --btn-blue-text: #ffffff;
  --btn-blue-border: #2563eb;
  --btn-blue-hover-border: #1d4ed8;
  --btn-blue-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-blue-hover-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.42);
  --btn-blue-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* Amber / Gold (الإنذارات والأعمال المعلقة) */
  --btn-amber-bg: #d97706;
  --btn-amber-hover-bg: #b45309;
  --btn-amber-active-bg: #92400e;
  --btn-amber-text: #ffffff;
  --btn-amber-border: #d97706;
  --btn-amber-hover-border: #b45309;
  --btn-amber-shadow: 0 2px 6px -1px rgba(217, 119, 6, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-amber-hover-shadow: 0 4px 12px -2px rgba(217, 119, 6, 0.42);
  --btn-amber-ring: 0 0 0 3px rgba(217, 119, 6, 0.22);

  /* Rose / Danger (الحذف، إعادة التعيين، الطعون) */
  --btn-danger-bg: #e11d48;
  --btn-danger-hover-bg: #be123c;
  --btn-danger-active-bg: #9f1239;
  --btn-danger-text: #ffffff;
  --btn-danger-border: #e11d48;
  --btn-danger-hover-border: #be123c;
  --btn-danger-shadow: 0 2px 6px -1px rgba(225, 29, 72, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-danger-hover-shadow: 0 4px 12px -2px rgba(225, 29, 72, 0.42);
  --btn-danger-ring: 0 0 0 3px rgba(225, 29, 72, 0.22);

  /* Purple / Royalty (الشهادات وبنك الأسئلة) */
  --btn-purple-bg: #7c3aed;
  --btn-purple-hover-bg: #6d28d9;
  --btn-purple-active-bg: #5b21b6;
  --btn-purple-text: #ffffff;
  --btn-purple-border: #7c3aed;
  --btn-purple-hover-border: #6d28d9;
  --btn-purple-shadow: 0 2px 6px -1px rgba(124, 58, 237, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-purple-hover-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.42);
  --btn-purple-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);

  /* Ghost / Minimal Soft */
  --btn-ghost-bg: transparent;
  --btn-ghost-hover-bg: rgba(15, 23, 42, 0.06);
  --btn-ghost-active-bg: rgba(15, 23, 42, 0.10);
  --btn-ghost-text: var(--text-primary);
  --btn-ghost-border: transparent;
  --btn-ghost-hover-border: var(--border-medium);

  /* Legacy Luxury Button Aliases for Backward Compatibility */
  --btn-luxury-primary-bg: var(--accent-emerald-gradient);
  --btn-luxury-primary-hover: linear-gradient(135deg, #047857 0%, #0f766e 100%);
  --btn-luxury-primary-shadow: var(--btn-primary-shadow);
  --btn-luxury-primary-glow: 0 0 14px rgba(16, 185, 129, 0.28);
  --btn-luxury-indigo-bg: var(--accent-blue-gradient);
  --btn-luxury-indigo-hover: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  --btn-luxury-indigo-shadow: var(--btn-blue-shadow);
  --btn-luxury-indigo-glow: 0 0 14px rgba(37, 99, 235, 0.28);
  --btn-luxury-amber-bg: var(--accent-amber-gradient);
  --btn-luxury-amber-hover: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  --btn-luxury-amber-shadow: var(--btn-amber-shadow);
  --btn-luxury-amber-glow: 0 0 14px rgba(245, 158, 11, 0.28);
  --btn-luxury-rose-bg: var(--accent-rose-gradient);
  --btn-luxury-rose-hover: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
  --btn-luxury-rose-shadow: var(--btn-danger-shadow);
  --btn-luxury-rose-glow: 0 0 14px rgba(244, 63, 94, 0.28);
  --btn-luxury-secondary-bg: var(--btn-secondary-bg);
  --btn-luxury-secondary-border: var(--btn-secondary-border);
  --btn-luxury-secondary-text: var(--btn-secondary-text);
  --btn-luxury-secondary-hover: var(--btn-secondary-hover-bg);
  --btn-luxury-secondary-hover-border: var(--btn-secondary-hover-border);

  /* --- Window & Modal Design Tokens (نظام النوافذ والمودالات الشامل) --- */
  --modal-backdrop-bg: rgba(15, 23, 42, 0.52);
  --modal-backdrop-blur: 8px;
  --modal-surface-bg: var(--bg-card);
  --modal-header-bg: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
  --modal-footer-bg: var(--bg-secondary);
  --modal-border: 1px solid var(--border-medium);
  --modal-border-subtle: 1px solid var(--border-subtle);
  --modal-radius-sm: 10px;
  --modal-radius-md: 14px;
  --modal-radius-lg: 18px;
  --modal-radius-xl: 22px;
  --modal-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
  --modal-header-h: 54px;
  --modal-header-px: 20px;
  --modal-header-py: 14px;
  --modal-body-p: 22px;
  --modal-footer-p: 14px 20px;
  --modal-close-size: 30px;
  --modal-close-radius: 7px;
  --modal-close-bg: transparent;
  --modal-close-hover-bg: rgba(225, 29, 72, 0.10);
  --modal-close-hover-color: var(--accent-rose);

  /* 8. Category & Badge Design Tokens (شارة الأقسام والوسوم) */
  --token-cat-dash-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.14));
  --token-cat-dash-color: #d97706;
  --token-cat-dash-border: rgba(245, 158, 11, 0.24);
  --token-cat-dash-glow: 0 2px 8px rgba(245, 158, 11, 0.18);

  --token-cat-learning-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.14));
  --token-cat-learning-color: #059669;
  --token-cat-learning-border: rgba(16, 185, 129, 0.24);
  --token-cat-learning-glow: 0 2px 8px rgba(16, 185, 129, 0.18);

  --token-cat-students-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(37, 99, 235, 0.14));
  --token-cat-students-color: #2563eb;
  --token-cat-students-border: rgba(59, 130, 246, 0.24);
  --token-cat-students-glow: 0 2px 8px rgba(59, 130, 246, 0.18);

  --token-cat-finance-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(124, 58, 237, 0.14));
  --token-cat-finance-color: #7c3aed;
  --token-cat-finance-border: rgba(168, 85, 247, 0.24);
  --token-cat-finance-glow: 0 2px 8px rgba(168, 85, 247, 0.18);

  --token-cat-content-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(2, 132, 199, 0.14));
  --token-cat-content-color: #0284c7;
  --token-cat-content-border: rgba(14, 165, 233, 0.24);
  --token-cat-content-glow: 0 2px 8px rgba(14, 165, 233, 0.18);

  /* Color-Coded Module Icon Chip Tokens (Light Mode - Calm & Eye-Friendly) */
  --chip-emerald-bg: rgba(16, 185, 129, 0.08);
  --chip-emerald-border: rgba(16, 185, 129, 0.22);
  --chip-emerald-color: #059669;

  --chip-teal-bg: rgba(20, 184, 166, 0.08);
  --chip-teal-border: rgba(20, 184, 166, 0.22);
  --chip-teal-color: #0d9488;

  --chip-amber-bg: rgba(245, 158, 11, 0.08);
  --chip-amber-border: rgba(245, 158, 11, 0.22);
  --chip-amber-color: #d97706;

  --chip-indigo-bg: rgba(99, 102, 241, 0.08);
  --chip-indigo-border: rgba(99, 102, 241, 0.22);
  --chip-indigo-color: #4f46e5;

  --chip-sky-bg: rgba(14, 165, 233, 0.08);
  --chip-sky-border: rgba(14, 165, 233, 0.22);
  --chip-sky-color: #0284c7;

  --chip-violet-bg: rgba(139, 92, 246, 0.08);
  --chip-violet-border: rgba(139, 92, 246, 0.22);
  --chip-violet-color: #7c3aed;

  --chip-rose-bg: rgba(244, 63, 94, 0.08);
  --chip-rose-border: rgba(244, 63, 94, 0.22);
  --chip-rose-color: #e11d48;

  --chip-blue-bg: rgba(59, 130, 246, 0.08);
  --chip-blue-border: rgba(59, 130, 246, 0.22);
  --chip-blue-color: #2563eb;

  --chip-fuchsia-bg: rgba(217, 70, 239, 0.08);
  --chip-fuchsia-border: rgba(217, 70, 239, 0.22);
  --chip-fuchsia-color: #c026d3;

  --chip-gold-bg: rgba(234, 179, 8, 0.08);
  --chip-gold-border: rgba(234, 179, 8, 0.24);
  --chip-gold-color: #ca8a04;

  /* 9. Component-Specific Semantic Design Tokens (رموز تصميم مريحة وشاملة للمكونات) */
  --card-bg: var(--bg-card);
  --card-border: var(--border-subtle);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  --table-header-bg: var(--bg-secondary);
  --table-header-text: var(--text-secondary);
  --table-row-hover: #f0fdf9;
  --table-row-border: var(--border-subtle);

  --modal-backdrop-bg: rgba(15, 23, 42, 0.45);
  --modal-bg: var(--bg-card);
  --modal-border: var(--border-subtle);
  --modal-shadow: var(--shadow-xl);

  --tab-container-bg: var(--bg-secondary);
  --tab-container-border: var(--border-medium);
  --tab-inactive-text: var(--text-muted);
  --tab-inactive-hover-bg: rgba(15, 23, 42, 0.04);
  --tab-active-bg: var(--bg-card);
  --tab-active-text: var(--accent-emerald);
  --tab-active-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);

  --tooltip-bg: #0f172a;
  --tooltip-text: #ffffff;

  --code-bg: #f1f5f9;
  --code-text: #0f172a;
  --code-border: #cbd5e1;
}

[data-theme="dark"] {
  /* ================= SOLARIZED DARK — 3-COLOR BALANCED PALETTE =================
     Surface Base:  #111a2e (warm navy, not pure black)
     Primary:       #10b981 (emerald)
     Functional:    #3b82f6 (sapphire blue)
     Philosophy:    Professional, not extreme. Warm undertones. 3 colors only.
     ================= */
  --bg-app: #0c1322;
  --bg-card: #111a2e;
  --bg-secondary: #182338;
  --bg-tertiary: #243044;
  --bg-subtle: #141e32;

  --border-subtle: #1c2a42;
  --border-medium: #283a54;
  --border-strong: #3a4f6e;

  --text-primary: #e8edf5;
  --text-main: #e8edf5; /* Unified Alias */
  --text-secondary: #9caabd;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --accent-emerald: #10b981;
  --accent-emerald-hover: #059669;
  --accent-emerald-light: rgba(16, 185, 129, 0.16);
  --accent-emerald-border: rgba(16, 185, 129, 0.35);

  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-blue-light: rgba(59, 130, 246, 0.16);
  --accent-blue-border: rgba(59, 130, 246, 0.35);

  --accent-amber: #f59e0b;
  --accent-amber-hover: #d97706;
  --accent-amber-light: rgba(245, 158, 11, 0.16);
  --accent-amber-border: rgba(245, 158, 11, 0.35);

  --accent-rose: #f43f5e;
  --accent-rose-hover: #e11d48;
  --accent-rose-light: rgba(244, 63, 94, 0.16);
  --accent-rose-border: rgba(244, 63, 94, 0.35);

  --accent-purple: #a855f7;
  --accent-purple-light: rgba(168, 85, 247, 0.16);
  --accent-purple-border: rgba(168, 85, 247, 0.35);

  --input-bg: #141e32;
  --input-border: #243044;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45);

  /* Legacy & ANS Compatibility Aliases */
  --ans-bg: var(--bg-app);
  --ans-surface: var(--bg-card);
  --ans-surface-subtle: var(--bg-secondary);
  --ans-surface-elevated: var(--bg-secondary);
  --ans-card-bg: var(--bg-card);
  --ans-card-bg-subtle: var(--bg-secondary);
  --ans-border: var(--border-medium);
  --ans-border-subtle: var(--border-subtle);
  --ans-border-hover: var(--border-strong);
  --ans-primary: var(--accent-emerald);
  --ans-primary-hover: var(--accent-emerald-hover);
  --ans-primary-soft: var(--accent-emerald-light);
  --ans-primary-border: var(--accent-emerald-border);
  --ans-primary-gradient: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  --ans-primary-glow: 0 4px 20px rgba(16, 185, 129, 0.3);
  --ans-blue: var(--accent-blue);
  --ans-blue-soft: var(--accent-blue-light);
  --ans-blue-border: var(--accent-blue-border);
  --ans-blue-glow: 0 4px 20px rgba(59, 130, 246, 0.25);
  --ans-amber: var(--accent-amber);
  --ans-amber-soft: var(--accent-amber-light);
  --ans-amber-border: var(--accent-amber-border);
  --ans-rose: var(--accent-rose);
  --ans-rose-soft: var(--accent-rose-light);
  --ans-rose-border: var(--accent-rose-border);
  --ans-purple: var(--accent-purple);
  --ans-purple-soft: var(--accent-purple-light);
  --ans-purple-border: var(--accent-purple-border);
  --ans-shadow-card: var(--shadow-md);
  --ans-shadow-elevated: var(--shadow-lg);
  --ans-shadow-float: var(--shadow-xl);

  /* ================= LUXURY USER EXPERIENCE TOKENS (DARK) ================= */
  --surface-glass: rgba(17, 26, 46, 0.88);
  --surface-glass-border: rgba(255, 255, 255, 0.06);
  --surface-elevated: #141e32;
  --surface-elevated-hover: #182338;
  --surface-rail: #0a1020;

  --border-glass: rgba(40, 58, 84, 0.7);
  --border-glass-glow: rgba(16, 185, 129, 0.35);

  --shadow-luxury-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-luxury-md: 0 6px 18px -2px rgba(0, 0, 0, 0.32), 0 2px 6px -1px rgba(0, 0, 0, 0.18);
  --shadow-luxury-lg: 0 14px 30px -4px rgba(0, 0, 0, 0.42), 0 6px 12px -2px rgba(0, 0, 0, 0.22);
  --shadow-luxury-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ================================================================
     ENTERPRISE DESIGN TOKEN SUITE: BUTTONS, SCALES & WINDOWS (DARK)
     ================================================================ */
  /* Primary (Emerald / الأخضر الزمردي الليلي) */
  --btn-primary-bg: #10b981;
  --btn-primary-hover-bg: #059669;
  --btn-primary-active-bg: #047857;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #10b981;
  --btn-primary-hover-border: #059669;
  --btn-primary-shadow: 0 3px 10px -1px rgba(16, 185, 129, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --btn-primary-hover-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.50);
  --btn-primary-ring: 0 0 0 3px rgba(16, 185, 129, 0.30);

  /* Secondary (Slate / الرمادي الليلي النظيف) */
  --btn-secondary-bg: #141f36;
  --btn-secondary-hover-bg: #1e293b;
  --btn-secondary-active-bg: #0f172a;
  --btn-secondary-text: #f8fafc;
  --btn-secondary-border: #283756;
  --btn-secondary-hover-border: #10b981;
  --btn-secondary-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --btn-secondary-hover-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);

  /* Blue / Sapphire (الأزرق الليلي المضيء) */
  --btn-blue-bg: #3b82f6;
  --btn-blue-hover-bg: #2563eb;
  --btn-blue-active-bg: #1d4ed8;
  --btn-blue-text: #ffffff;
  --btn-blue-border: #3b82f6;
  --btn-blue-hover-border: #2563eb;
  --btn-blue-shadow: 0 3px 10px -1px rgba(59, 130, 246, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --btn-blue-hover-shadow: 0 6px 16px -2px rgba(59, 130, 246, 0.50);
  --btn-blue-ring: 0 0 0 3px rgba(59, 130, 246, 0.30);

  /* Amber / Gold (الذهبي الليلي المضيء) */
  --btn-amber-bg: #f59e0b;
  --btn-amber-hover-bg: #d97706;
  --btn-amber-active-bg: #b45309;
  --btn-amber-text: #ffffff;
  --btn-amber-border: #f59e0b;
  --btn-amber-hover-border: #d97706;
  --btn-amber-shadow: 0 3px 10px -1px rgba(245, 158, 11, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --btn-amber-hover-shadow: 0 6px 16px -2px rgba(245, 158, 11, 0.50);
  --btn-amber-ring: 0 0 0 3px rgba(245, 158, 11, 0.30);

  /* Rose / Danger (القرمزي الليلي المضيء) */
  --btn-danger-bg: #f43f5e;
  --btn-danger-hover-bg: #e11d48;
  --btn-danger-active-bg: #be123c;
  --btn-danger-text: #ffffff;
  --btn-danger-border: #f43f5e;
  --btn-danger-hover-border: #e11d48;
  --btn-danger-shadow: 0 3px 10px -1px rgba(244, 63, 94, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --btn-danger-hover-shadow: 0 6px 16px -2px rgba(244, 63, 94, 0.50);
  --btn-danger-ring: 0 0 0 3px rgba(244, 63, 94, 0.30);

  /* Purple / Royalty (البنفسجي الليلي المضيء) */
  --btn-purple-bg: #a855f7;
  --btn-purple-hover-bg: #9333ea;
  --btn-purple-active-bg: #7e22ce;
  --btn-purple-text: #ffffff;
  --btn-purple-border: #a855f7;
  --btn-purple-hover-border: #9333ea;
  --btn-purple-shadow: 0 3px 10px -1px rgba(168, 85, 247, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --btn-purple-hover-shadow: 0 6px 16px -2px rgba(168, 85, 247, 0.50);
  --btn-purple-ring: 0 0 0 3px rgba(168, 85, 247, 0.30);

  /* Ghost / Minimal Soft (Dark) */
  --btn-ghost-bg: transparent;
  --btn-ghost-hover-bg: rgba(255, 255, 255, 0.08);
  --btn-ghost-active-bg: rgba(255, 255, 255, 0.12);
  --btn-ghost-text: var(--text-primary);
  --btn-ghost-border: transparent;
  --btn-ghost-hover-border: var(--border-medium);

  /* Legacy Luxury Button Aliases (Dark) */
  --btn-luxury-primary-bg: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  --btn-luxury-primary-hover: linear-gradient(135deg, #059669 0%, #0f766e 100%);
  --btn-luxury-primary-shadow: var(--btn-primary-shadow);
  --btn-luxury-primary-glow: 0 0 22px rgba(16, 185, 129, 0.5);
  --btn-luxury-indigo-bg: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  --btn-luxury-indigo-hover: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  --btn-luxury-indigo-shadow: var(--btn-blue-shadow);
  --btn-luxury-indigo-glow: 0 0 22px rgba(99, 102, 241, 0.5);
  --btn-luxury-amber-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --btn-luxury-amber-hover: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --btn-luxury-amber-shadow: var(--btn-amber-shadow);
  --btn-luxury-amber-glow: 0 0 22px rgba(245, 158, 11, 0.5);
  --btn-luxury-rose-bg: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --btn-luxury-rose-hover: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  --btn-luxury-rose-shadow: var(--btn-danger-shadow);
  --btn-luxury-rose-glow: 0 0 22px rgba(244, 63, 94, 0.5);
  --btn-luxury-secondary-bg: var(--btn-secondary-bg);
  --btn-luxury-secondary-border: var(--btn-secondary-border);
  --btn-luxury-secondary-text: var(--btn-secondary-text);
  --btn-luxury-secondary-hover: var(--btn-secondary-hover-bg);

  /* --- Window & Modal Design Tokens (Dark) --- */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.76);
  --modal-backdrop-blur: 10px;
  --modal-surface-bg: #0f172a;
  --modal-header-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --modal-footer-bg: #1e293b;
  --modal-border: 1px solid #334155;
  --modal-border-subtle: 1px solid #1e293b;
  --modal-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px #334155;
  --modal-close-bg: transparent;
  --modal-close-hover-bg: rgba(244, 63, 94, 0.16);
  --modal-close-hover-color: #fb7185;

  --token-cat-dash-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.3));
  --token-cat-dash-color: #fbbf24;
  --token-cat-dash-border: rgba(245, 158, 11, 0.4);
  --token-cat-dash-glow: 0 2px 14px rgba(245, 158, 11, 0.35);

  --token-cat-learning-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.3));
  --token-cat-learning-color: #34d399;
  --token-cat-learning-border: rgba(16, 185, 129, 0.4);
  --token-cat-learning-glow: 0 2px 14px rgba(16, 185, 129, 0.35);

  --token-cat-students-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.3));
  --token-cat-students-color: #60a5fa;
  --token-cat-students-border: rgba(59, 130, 246, 0.4);
  --token-cat-students-glow: 0 2px 14px rgba(59, 130, 246, 0.35);

  --token-cat-finance-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(124, 58, 237, 0.3));
  --token-cat-finance-color: #c084fc;
  --token-cat-finance-border: rgba(168, 85, 247, 0.4);
  --token-cat-finance-glow: 0 2px 14px rgba(168, 85, 247, 0.35);

  --token-cat-content-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(2, 132, 199, 0.3));
  --token-cat-content-color: #38bdf8;
  --token-cat-content-border: rgba(14, 165, 233, 0.4);
  --token-cat-content-glow: 0 2px 14px rgba(14, 165, 233, 0.35);

  --chip-emerald-bg: rgba(16, 185, 129, 0.18);
  --chip-emerald-border: rgba(16, 185, 129, 0.38);
  --chip-emerald-color: #34d399;

  --chip-teal-bg: rgba(20, 184, 166, 0.18);
  --chip-teal-border: rgba(20, 184, 166, 0.38);
  --chip-teal-color: #2dd4bf;

  --chip-amber-bg: rgba(245, 158, 11, 0.18);
  --chip-amber-border: rgba(245, 158, 11, 0.38);
  --chip-amber-color: #fbbf24;

  --chip-indigo-bg: rgba(99, 102, 241, 0.18);
  --chip-indigo-border: rgba(99, 102, 241, 0.38);
  --chip-indigo-color: #818cf8;

  --chip-sky-bg: rgba(14, 165, 233, 0.18);
  --chip-sky-border: rgba(14, 165, 233, 0.38);
  --chip-sky-color: #38bdf8;

  --chip-violet-bg: rgba(139, 92, 246, 0.18);
  --chip-violet-border: rgba(139, 92, 246, 0.38);
  --chip-violet-color: #a78bfa;

  --chip-rose-bg: rgba(244, 63, 94, 0.18);
  --chip-rose-border: rgba(244, 63, 94, 0.38);
  --chip-rose-color: #fb7185;

  --chip-blue-bg: rgba(59, 130, 246, 0.18);
  --chip-blue-border: rgba(59, 130, 246, 0.38);
  --chip-blue-color: #60a5fa;

  --chip-fuchsia-bg: rgba(217, 70, 239, 0.18);
  --chip-fuchsia-border: rgba(217, 70, 239, 0.38);
  --chip-fuchsia-color: #e879f9;

  --chip-gold-bg: rgba(234, 179, 8, 0.2);
  --chip-gold-border: rgba(234, 179, 8, 0.42);
  --chip-gold-color: #facc15;

  /* Component-Specific Semantic Tokens (Dark Mode) */
  --card-bg: var(--bg-card);
  --card-border: var(--border-subtle);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);

  --table-header-bg: var(--bg-secondary);
  --table-header-text: var(--text-secondary);
  --table-row-hover: rgba(16, 185, 129, 0.06);
  --table-row-border: var(--border-subtle);

  --modal-backdrop-bg: rgba(0, 0, 0, 0.7);
  --modal-bg: var(--bg-card);
  --modal-border: var(--border-medium);
  --modal-shadow: var(--shadow-xl);

  --tab-container-bg: rgba(30, 41, 59, 0.7);
  --tab-container-border: rgba(255, 255, 255, 0.1);
  --tab-inactive-text: var(--text-muted);
  --tab-inactive-hover-bg: rgba(255, 255, 255, 0.06);
  --tab-active-bg: var(--accent-emerald);
  --tab-active-text: #ffffff;
  --tab-active-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);

  --tooltip-bg: #1e293b;
  --tooltip-text: #f8fafc;

  --code-bg: #141f36;
  --code-text: #f8fafc;
  --code-border: #283756;
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 13.6px;
}

/* Explicit Density System Modes */
html[data-density="compact"] {
  font-size: 13.2px !important;
}

html[data-density="ultra"] {
  font-size: 12.2px !important;
}

html[data-density="normal"] {
  font-size: 14.8px !important;
}

/* Viewport Auto-Adaptation when no explicit density is enforced */
@media screen and (min-width: 1680px) {
  html:not([data-density]) {
    font-size: 14.5px;
  }
}

@media screen and (max-width: 1400px), screen and (max-height: 820px) {
  html:not([data-density]) {
    font-size: 13.2px;
  }
}

@media screen and (max-width: 1280px), screen and (max-height: 720px) {
  html:not([data-density]) {
    font-size: 12.4px;
  }
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
  background-color: var(--bg-app);
  color: var(--text-primary);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ================= ULTRA-CLEAR HIGH-LEGIBILITY TYPOGRAPHY SUITE ================= */
h1, h2, h3, h4, h5, h6, .pro-title, .heading-pro, .brand-title h1, .queue-title-row strong, .modal-title-pro {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.25px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, .pro-content-text, .text-secondary {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 500;
  font-size: 0.90rem;
}

/* Explicit Table & Card Typography Legibility (Laptop Calibrated) */
.table-pro th,
.ans-table th,
.ans-table-pro th,
.ans-pro-table th,
.exm-students-table th,
.data-table th,
.gradebook-table th,
.styled-table th,
.queue-header strong {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-size: 0.82rem !important;
  letter-spacing: -0.15px;
  padding: var(--table-cell-py, 5px) var(--table-cell-px, 8px) !important;
  line-height: 1.25 !important;
}

.table-pro td,
.ans-table td,
.ans-table-pro td,
.ans-pro-table td,
.exm-students-table td,
.data-table td,
.gradebook-table td,
.styled-table td,
.table-row-card {
  font-family: 'Cairo', sans-serif !important;
  color: var(--text-primary) !important;
  font-size: 0.86rem !important;
  line-height: 1.38 !important;
  padding: var(--table-cell-py, 5px) var(--table-cell-px, 8px) !important;
}

/* Ultra Density Table Spacing */
html[data-density="ultra"] .table-pro th,
html[data-density="ultra"] .ans-table th,
html[data-density="ultra"] .ans-table-pro th,
html[data-density="ultra"] .ans-pro-table th,
html[data-density="ultra"] .exm-students-table th,
html[data-density="ultra"] .data-table th,
html[data-density="ultra"] .gradebook-table th {
  padding: 3px 6px !important;
  font-size: 0.76rem !important;
}

html[data-density="ultra"] .table-pro td,
html[data-density="ultra"] .ans-table td,
html[data-density="ultra"] .ans-table-pro td,
html[data-density="ultra"] .ans-pro-table td,
html[data-density="ultra"] .exm-students-table td,
html[data-density="ultra"] .data-table td,
html[data-density="ultra"] .gradebook-table td {
  padding: 3px 6px !important;
  font-size: 0.80rem !important;
  line-height: 1.28 !important;
}

label, .form-label-pro {
  font-family: 'Cairo', sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: -0.1px;
}

/* Master Layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Executive Top Header */
.top-header {
  height: var(--header-height, 46px);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 50;
}

.top-header-start {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.top-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-right: auto;
  white-space: nowrap;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 30px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  transition: var(--transition-fast);
}

.brand-divider {
  width: 1px;
  height: 20px;
  background: var(--border-medium);
  opacity: 0.7;
}

[data-theme="dark"] .brand-logo-img {
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.brand-title {
  display: flex;
  flex-direction: column;
}

.brand-title h1 {
  font-size: 0.90rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.brand-title span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent-emerald);
}

/* Course & Assignment Selectors */
.selectors-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 580px;
}

.form-select-pro {
  padding: 6px 12px;
  font-size: 0.84rem;
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: var(--transition-fast);
  flex: 1;
  height: 36px;
}

.form-select-pro:focus {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 2px var(--accent-emerald-light);
}

/* Metrics Ribbon */
.metrics-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
}

.progress-track {
  width: 70px;
  height: 6px;
  background: var(--border-medium);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--accent-emerald);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  width: 0%;
}

/* ============ COMPACT USER MENU DROPDOWN ============ */
.user-menu-wrapper {
  position: relative;
  flex-shrink: 0;
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  height: 32px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: var(--shadow-luxury-sm), var(--shadow-luxury-inset);
}

.user-menu-trigger:hover {
  border-color: var(--accent-emerald-border);
  background: var(--bg-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-luxury-md);
}

.user-menu-trigger.authenticated {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border-color: var(--accent-emerald-border);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.user-menu-label {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-caret {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.user-menu-wrapper.open .user-menu-caret {
  transform: rotate(180deg);
}

/* Dropdown Panel */
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 6px 0;
  animation: menuSlideIn 0.15s ease-out;
}

[dir="rtl"] .user-menu-dropdown {
  right: auto;
  left: 0;
}

.user-menu-wrapper.open .user-menu-dropdown {
  display: block;
}

@keyframes menuSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dropdown Items */
.umd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  width: 100%;
  text-align: inherit;
  border: none;
  background: transparent;
  cursor: default;
  transition: background 0.15s ease;
}

.umd-clickable {
  cursor: pointer;
}

.umd-clickable:hover {
  background: var(--bg-secondary);
}

.umd-status {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 6px 14px;
}

.umd-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 10px;
}

/* Connection Dots (shared) */
.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.conn-dot.online {
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

.conn-dot.offline {
  background: var(--accent-rose);
  box-shadow: 0 0 6px rgba(225, 29, 72, 0.7);
}

.conn-dot.checking {
  background: var(--accent-amber);
}

/* Teacher Auth Dot */
.teacher-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-amber);
  display: inline-block;
  flex-shrink: 0;
}

.umd-clickable .teacher-dot.authenticated-dot {
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.logout-hint {
  font-size: 0.7rem;
  color: var(--accent-rose);
  margin-right: 5px;
  font-weight: 700;
  opacity: 0.85;
}

.umd-clickable:hover .logout-hint {
  opacity: 1;
}

/* Two-Column Studio Body */
.main-stage {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* Right Column: Queue Sidebar (Balanced for Laptop & Desktop) */
.queue-panel {
  width: 310px;
  min-width: 285px;
  max-width: 350px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
}

.queue-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-secondary);
}

.queue-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.queue-title-row strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.index-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

.search-input-pro {
  width: 100%;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-family: inherit;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  outline: none;
}

.search-input-pro:focus {
  border-color: var(--accent-emerald);
}

/* ================= SEGMENTED FILTER TABS SYSTEM ================= */
.filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-secondary, #f1f5f9);
  padding: 3px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-medium, #cbd5e1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--text-secondary, #64748b);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
  box-sizing: border-box;
}

.filter-tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.filter-tab.active {
  background: var(--bg-card, #ffffff);
  color: var(--accent-emerald, #059669);
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .filter-tabs {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .filter-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

[data-theme="dark"] .filter-tab.active {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* Scrollable Student List - High Density Clean Layout */
.queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.student-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
  min-height: 36px;
  height: auto;
  box-sizing: border-box;
}

.student-card:hover {
  border-color: var(--accent-emerald);
  background: var(--bg-secondary);
}

.student-card.active {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-light);
  box-shadow: 0 0 0 1.5px var(--accent-emerald);
}

.student-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.student-card.active .student-avatar {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: transparent;
}

.student-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.student-name {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  unicode-bidi: plaintext;
  text-align: right;
}

.student-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.1;
}

.sg-meta-id {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 2px;
  padding: 0 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 0.60rem;
  line-height: 1.2;
}

.sg-meta-date {
  color: var(--text-muted);
  font-size: 0.60rem;
  white-space: nowrap;
}

.student-status-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
}

.student-status-badge.graded {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border: 1px solid var(--accent-emerald-border);
}

.student-status-badge.pending {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.queue-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  display: flex;
  gap: 8px;
}

.queue-footer button {
  flex: 1;
  padding: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.queue-footer button:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-emerald);
}

/* Center Stage: Document Viewer & Direct Grading Dock */
.viewer-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-app);
}

/* Viewer Top Action Bar - Compact */
.viewer-top-bar {
  height: 40px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
  gap: 12px;
}

.active-student-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.active-student-meta h2 {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.active-student-tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.viewer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-action-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-luxury-sm), var(--shadow-luxury-inset);
}

.btn-action-sm:hover {
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
  background: var(--accent-emerald-light);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-luxury-md);
}

.btn-action-sm:active {
  transform: translateY(1px) scale(0.985);
}

/* Maximized Document Canvas & Academic Paper Viewer */
.document-canvas {
  flex: 1;
  position: relative;
  background: var(--bg-secondary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .document-canvas {
  background: #0f172a;
}

.doc-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}

.academic-paper-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  box-sizing: border-box;
}

[data-theme="dark"] .academic-paper-scroll {
  background: #0f172a;
}

.academic-page-sheet {
  background: #ffffff;
  color: #1e293b;
  width: 100%;
  max-width: 760px;
  min-height: 980px;
  padding: 36px 42px;
  border-radius: 4px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.85);
  box-sizing: border-box;
  font-family: 'Cairo', 'Amiri', 'Traditional Arabic', serif;
  line-height: 1.8;
  position: relative;
  transition: transform 0.2s ease;
  transform-origin: top center;
}

[data-theme="dark"] .academic-page-sheet {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.15);
}

.paper-univ-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0f766e;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.paper-univ-title {
  text-align: right;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f766e;
  line-height: 1.35;
}

.paper-univ-logo {
  height: 42px;
  object-fit: contain;
}

.paper-univ-meta {
  text-align: left;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}

.paper-title-box {
  text-align: center;
  margin: 14px 0 20px 0;
  padding: 14px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.paper-main-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.3;
}

.paper-sub-title {
  font-size: 0.9rem;
  color: #0d9488;
  font-weight: 700;
}

.paper-student-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  background: #f1f5f9;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  border: 1px solid #cbd5e1;
}

.paper-abstract-box {
  background: #fffbeb;
  border-right: 4px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 18px;
  font-size: 0.86rem;
  color: #78350f;
  line-height: 1.7;
}

.paper-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f766e;
  border-bottom: 1.5px solid #e2e8f0;
  padding-bottom: 4px;
  margin: 20px 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.paper-paragraph {
  font-size: 0.92rem;
  color: #334155;
  text-align: justify;
  text-justify: inter-word;
  margin-bottom: 12px;
  line-height: 1.8;
}

.paper-quran-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 6px;
  padding: 12px 18px;
  margin: 14px 0;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 800;
  color: #166534;
  line-height: 1.8;
}

.paper-hadith-box {
  background: #f8fafc;
  border-right: 3.5px solid #2563eb;
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 0.88rem;
  color: #1e3a8a;
  font-style: italic;
  line-height: 1.65;
}

.paper-references-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 18px;
  font-size: 0.8rem;
  color: #475569;
}

.paper-page-footer {
  margin-top: 28px;
  padding-top: 10px;
  border-top: 1px solid #cbd5e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: #94a3b8;
}

.doc-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  color: #cbd5e1;
  gap: 12px;
  max-width: 500px;
}

.doc-fallback .fallback-icon {
  font-size: 3rem;
}

.doc-fallback h3 {
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 800;
}

.doc-fallback p {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* Direct Bottom Grading Dock - Strictly Single Row Compact */
.grading-dock {
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: 4px 14px;
  height: 44px;
  flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
  z-index: 40;
}

.dock-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  height: 100%;
}

.score-control-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.score-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.score-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-input-main {
  width: 54px;
  height: 32px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent-emerald);
  background: var(--input-bg);
  color: var(--accent-emerald);
  outline: none;
}

.score-input-main:focus {
  border-color: var(--accent-emerald-hover);
  box-shadow: 0 0 0 3px var(--accent-emerald-light);
}

.score-max {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
}

/* Quick Grade Chips */
.presets-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.preset-chip {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preset-chip:hover {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
}

/* Notes & Advance */
.notes-input-wrap {
  flex: 1;
  min-width: 140px;
}

.notes-input {
  width: 100%;
  height: 32px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-family: inherit;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  outline: none;
}

.notes-input:focus {
  border-color: var(--accent-emerald);
}

.auto-advance-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Actions: Compact Confirm Button renamed to تأكيد */
.dock-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-primary-grade {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--btn-luxury-primary-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--btn-luxury-primary-shadow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-primary-grade:hover {
  background: var(--btn-luxury-primary-hover);
  box-shadow: var(--btn-luxury-primary-shadow), var(--btn-luxury-primary-glow);
  transform: translateY(-1.5px);
}

.btn-primary-grade:active {
  transform: translateY(1px) scale(0.985);
}

.btn-danger-reset {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--btn-luxury-secondary-bg);
  border: 1px solid var(--accent-rose-border);
  color: var(--accent-rose);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-luxury-sm);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-danger-reset:hover {
  background: var(--accent-rose-light);
  border-color: var(--accent-rose);
  transform: translateY(-1.5px);
}

.btn-danger-reset:active {
  transform: translateY(1px) scale(0.985);
}

/* ================= SYSTEM-WIDE WINDOW & MODAL ARCHITECTURE ================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop-bg);
  backdrop-filter: blur(var(--modal-backdrop-blur, 8px));
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 8px));
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200000 !important;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
  transition: opacity var(--transition-normal);
}

.modal-overlay.active {
  display: flex;
}

.modal-card {
  background: var(--modal-surface-bg, var(--bg-card));
  border-radius: var(--modal-radius-md, 14px);
  border: var(--modal-border, 1px solid var(--border-medium));
  box-shadow: var(--modal-shadow, var(--shadow-xl));
  width: 100%;
  max-width: 480px;
  padding: var(--modal-body-p, 22px);
  animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-head h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  width: var(--modal-close-size, 30px);
  height: var(--modal-close-size, 30px);
  border-radius: var(--modal-close-radius, 7px);
  background: var(--modal-close-bg, transparent);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--modal-close-hover-bg, rgba(225, 29, 72, 0.10));
  color: var(--modal-close-hover-color, var(--accent-rose));
  border-color: rgba(225, 29, 72, 0.25);
  transform: rotate(90deg);
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.form-input-full {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  outline: none;
  direction: ltr;
}

.form-input-full:focus {
  border-color: var(--accent-emerald);
}

/* Toast Container */
.toast-box {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000000 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.25s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast.success { border-right: 4px solid var(--accent-emerald); }
.toast.error { border-right: 4px solid var(--accent-rose); }
.toast.info { border-right: 4px solid var(--accent-blue); }

/* ================================================================
   App Navigation Rail / Sidebar (شريط الملاحة الجانبي الذكي)
   ================================================================ */

.app-body-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - var(--header-height, 46px));
  overflow: hidden;
  position: relative;
}

.app-nav-sidebar {
  width: var(--sidebar-width, 265px);
  min-width: var(--sidebar-width, 265px);
  max-width: var(--sidebar-width, 265px);
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 6px 5px 14px 5px !important;
  gap: 3px;
  z-index: 50;
  flex-shrink: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  user-select: none;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.03);
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.6) var(--bg-secondary);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.app-nav-sidebar::-webkit-scrollbar {
  width: 6px;
}
.app-nav-sidebar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 6px;
}
.app-nav-sidebar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.55);
  border-radius: 6px;
  border: 1px solid var(--bg-card);
  transition: background 0.2s ease;
}
.app-nav-sidebar:hover::-webkit-scrollbar-thumb,
.app-nav-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--accent-emerald);
}

.app-nav-sidebar::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ================= REFINED LUXURY COMPACT NAVIGATION RAIL (LAPTOP OPTIMIZED) ================= */

/* Standalone Primary Dashboard Button */
.nav-rail-dash-primary {
  width: 100% !important;
  min-height: 31px !important;
  height: 31px !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 6px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  box-sizing: border-box !important;
  margin-bottom: 3px !important;
  box-shadow: var(--shadow-luxury-sm) !important;
}

.nav-rail-dash-primary:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--accent-emerald-border) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-luxury-md) !important;
}

.nav-rail-dash-primary.active {
  background: var(--accent-emerald-light) !important;
  color: var(--accent-emerald) !important;
  border-color: var(--accent-emerald) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18) !important;
}

.nav-rail-dash-primary .nav-rail-label {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: inherit !important;
  text-align: right !important;
}

/* Category Groups (Accordion) - High-Performance & Non-Overlapping */
.nav-rail-group {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  overflow: hidden;
  margin-bottom: 3px;
  box-shadow: var(--shadow-luxury-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, flex 0.2s ease;
  flex-shrink: 0;
}

/* Open group expands to occupy all available vertical space down to the bottom margin */
.nav-rail-group.open {
  flex: 1 1 0% !important;
  min-height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-bottom: 2px !important;
}

.nav-rail-group:hover {
  border-color: var(--border-medium);
}

.nav-rail-group.has-active {
  border-color: var(--accent-emerald-border);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}

.nav-rail-group.has-active .nav-rail-group-header {
  background: var(--accent-emerald-light);
}

.nav-rail-group.has-active .nav-rail-group-badge {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: var(--accent-emerald);
}

/* Group Header - Ergonomic Compact Height (31px), Clean RTL Flex Layout */
.nav-rail-group-header {
  width: 100%;
  height: var(--nav-group-header-height, 31px);
  min-height: var(--nav-group-header-height, 31px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
  box-sizing: border-box;
  gap: 5px;
  transition: background-color 0.12s ease;
}

.nav-rail-group-header:hover {
  background: var(--bg-secondary);
}

.nav-rail-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

/* Unified Category Group Icon (22x22px Squircle - Clean & Isolated) */
.nav-rail-group-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  color: var(--accent-emerald);
  box-shadow: var(--shadow-luxury-inset);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.nav-rail-group-header:hover .nav-rail-group-icon {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald-border);
}

.nav-rail-group.open .nav-rail-group-icon,
.nav-rail-group.has-active .nav-rail-group-icon {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
}

.nav-rail-group-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: right;
}

.nav-rail-group-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav-rail-group-badge {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.62rem;
  font-weight: 800;
  font-family: var(--font-num);
  padding: 0 4px;
  min-width: 15px;
  text-align: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.nav-rail-group-caret {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.60rem;
  background: var(--bg-secondary);
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.nav-rail-group.open .nav-rail-group-caret {
  transform: rotate(180deg);
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.nav-rail-group:not(.open) .nav-rail-group-caret {
  transform: rotate(0deg);
}

/* Group Content - Full Stretch & Elegant Internal Scroll Engine (استحواذ كامل على المساحة مع شريط تمرير واضح وأنيق) */
.nav-rail-group-content {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 3px 4px 6px 3px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.nav-rail-group.open .nav-rail-group-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, 0.65) rgba(0, 0, 0, 0.05) !important;
  overscroll-behavior-y: contain !important;
}

[data-theme="dark"] .nav-rail-group.open .nav-rail-group-content {
  scrollbar-color: rgba(148, 163, 184, 0.65) rgba(255, 255, 255, 0.05) !important;
}

.nav-rail-group-content::-webkit-scrollbar {
  width: 5px !important;
}

.nav-rail-group-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

[data-theme="dark"] .nav-rail-group-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
}

.nav-rail-group-content::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.65) !important;
  border-radius: 4px !important;
  border: 1px solid var(--bg-card) !important;
}

[data-theme="dark"] .nav-rail-group-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.65) !important;
}

.nav-rail-group-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-emerald) !important;
}

.nav-rail-group-content::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.nav-rail-group-content::after {
  content: '';
  display: block;
  height: 10px !important;
  min-height: 10px !important;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

/* Sub Navigation Item Row - Razor Sharp, Compact Height (27px), Non-Overlapping */
.nav-rail-item {
  width: 100%;
  height: var(--nav-item-height, 27px);
  min-height: var(--nav-item-height, 27px);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-secondary);
  text-decoration: none;
  box-sizing: border-box;
  font-family: inherit;
  overflow: hidden;
  position: relative;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.nav-rail-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.nav-rail-item.active {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border-color: var(--accent-emerald-border);
  border-right: 3px solid var(--accent-emerald);
  font-weight: 700;
}

/* Unified Icon Chips - Fixed 20px, Isolated, Never Overlapping */
.nav-rail-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  box-shadow: var(--shadow-luxury-inset);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.nav-rail-item:hover .nav-rail-icon {
  background: var(--bg-card);
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
}

.nav-rail-item.active .nav-rail-icon {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #ffffff;
}

.nav-rail-icon svg,
.nav-rail-group-icon svg {
  width: 12px;
  height: 12px;
  display: block;
  flex-shrink: 0;
}

#navDashBtn .nav-rail-icon {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
}

#navDashBtn.active .nav-rail-icon {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #ffffff;
}

/* Nav Label - Flex 1 with Ellipsis to Prevent Text Pushing Icons */
.nav-rail-label {
  flex: 1;
  min-width: 0;
  font-size: 0.71rem;
  font-weight: 600;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  letter-spacing: -0.1px;
}

/* ================= LUXURY BUTTON SUITE ================= */
.btn-luxury {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.btn-luxury:active {
  transform: translateY(1px) scale(0.985) !important;
}

.btn-luxury-primary {
  background: var(--btn-luxury-primary-bg) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: var(--btn-luxury-primary-shadow) !important;
}
.btn-luxury-primary:hover {
  background: var(--btn-luxury-primary-hover) !important;
  box-shadow: var(--btn-luxury-primary-shadow), var(--btn-luxury-primary-glow) !important;
  transform: translateY(-1.5px) !important;
}

.btn-luxury-indigo {
  background: var(--btn-luxury-indigo-bg) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: var(--btn-luxury-indigo-shadow) !important;
}
.btn-luxury-indigo:hover {
  background: var(--btn-luxury-indigo-hover) !important;
  box-shadow: var(--btn-luxury-indigo-shadow), var(--btn-luxury-indigo-glow) !important;
  transform: translateY(-1.5px) !important;
}

.btn-luxury-amber {
  background: var(--btn-luxury-amber-bg) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: var(--btn-luxury-amber-shadow) !important;
}
.btn-luxury-amber:hover {
  background: var(--btn-luxury-amber-hover) !important;
  box-shadow: var(--btn-luxury-amber-shadow), var(--btn-luxury-amber-glow) !important;
  transform: translateY(-1.5px) !important;
}

.btn-luxury-rose {
  background: var(--btn-luxury-rose-bg) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: var(--btn-luxury-rose-shadow) !important;
}
.btn-luxury-rose:hover {
  background: var(--btn-luxury-rose-hover) !important;
  box-shadow: var(--btn-luxury-rose-shadow), var(--btn-luxury-rose-glow) !important;
  transform: translateY(-1.5px) !important;
}

.btn-luxury-secondary {
  background: var(--btn-luxury-secondary-bg) !important;
  color: var(--btn-luxury-secondary-text) !important;
  border: 1px solid var(--btn-luxury-secondary-border) !important;
  box-shadow: var(--shadow-luxury-sm), var(--shadow-luxury-inset) !important;
}
.btn-luxury-secondary:hover {
  background: var(--btn-luxury-secondary-hover) !important;
  border-color: var(--accent-emerald-border) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: var(--shadow-luxury-md) !important;
}

.btn-luxury-pill {
  border-radius: var(--radius-full) !important;
  padding: 5px 14px !important;
  font-size: 0.78rem !important;
}

/* Master Layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.app-body-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - var(--header-height, 46px));
  min-height: 0;
  overflow: hidden;
  background: var(--bg-app);
}

/* Two-Column Studio Body */
.main-stage {
  display: flex;
  flex: 1;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: var(--bg-app);
}

/* View Stages */
.view-stage {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-app);
}

.view-stage.active {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-app);
}

/* Dedicated Faculty & Teachers Studio Specifications */
#teachersView.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--bg-app) !important;
}

#teachersView .ans-workspace-stage {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  padding: 10px 18px !important;
  overflow-y: auto !important;
}

#teachersView .ans-header-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#teachersGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 6px !important;
  padding-bottom: 30px !important;
}

#teachersGrid .book-card {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
}

#teachersGrid .book-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-emerald);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#dashboardView.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  background: var(--bg-app);
}

#graderView.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.grader-toolbar-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-medium);
  padding: 3px 10px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.grader-workspace-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* Workspace Stage & Main Content with Guaranteed Scrolling */
.ans-workspace-stage {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 6px 12px;
  background: var(--bg-app);
  box-sizing: border-box;
}

/* Custom Sleek Scrollbars */
.ans-workspace-stage::-webkit-scrollbar,
.queue-list::-webkit-scrollbar,
.sg-top-strip::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ans-workspace-stage::-webkit-scrollbar-track,
.queue-list::-webkit-scrollbar-track,
.sg-top-strip::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.ans-workspace-stage::-webkit-scrollbar-thumb,
.queue-list::-webkit-scrollbar-thumb,
.sg-top-strip::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

.ans-workspace-stage::-webkit-scrollbar-thumb:hover,
.queue-list::-webkit-scrollbar-thumb:hover,
.sg-top-strip::-webkit-scrollbar-thumb:hover {
  background: var(--accent-emerald);
}

/* Horizontal Top Strip for Students in Speed Grader - Hidden per user request */
.sg-top-strip {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.sg-strip-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  user-select: none;
  height: 24px;
}

.sg-strip-chip:hover {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-light);
}

.sg-strip-chip.active {
  background: var(--accent-emerald) !important;
  color: #ffffff !important;
  border-color: var(--accent-emerald) !important;
}

.sg-strip-chip.active .sg-strip-num,
.sg-strip-chip.active .sg-strip-mark {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.sg-strip-num {
  font-size: 0.65rem;
  font-weight: 800;
  background: var(--bg-secondary);
  padding: 1px 4px;
  border-radius: 4px;
}

.sg-strip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-strip-mark {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
}

.sg-strip-mark.graded {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.sg-strip-mark.pending {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
}


/* ================================================================
   STANDARDIZED UNIFIED SECTION HEADERS - COMPACT LUXURY SPEC
   ================================================================ */
.ans-header-card {
  flex-shrink: 0 !important;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  box-shadow: var(--shadow-xs);
  border-top: 3px solid var(--accent-emerald);
  margin-bottom: 6px;
}

.ans-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.ans-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ans-badge-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.ans-main-title,
.ans-header-top h2 {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

.ans-sub-title,
.ans-header-top p,
.ans-header-top span.sub-text {
  font-size: 0.70rem !important;
  color: var(--text-muted) !important;
  margin: 1px 0 0 0 !important;
  line-height: 1.25 !important;
}

.ans-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.ans-status-badge.online {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border: 1px solid var(--accent-emerald-border);
}

.ans-status-badge.offline {
  background: var(--accent-rose-light);
  color: var(--accent-rose);
  border: 1px solid rgba(225, 29, 72, 0.25);
}

.ans-toolbar-row {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--bg-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.ans-kpi-strip,
.ans-student-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 3px !important;
}

.ans-stat-box,
.ans-metric-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.15s ease;
  min-height: 24px;
  height: 26px;
  font-size: 0.72rem;
}

.ans-stat-box:hover,
.ans-metric-box:hover {
  border-color: var(--border-hover);
  background: var(--bg-card);
}

.ans-metric-box.emerald { border-right: 3px solid var(--accent-emerald); }
.ans-metric-box.blue { border-right: 3px solid var(--accent-blue); }
.ans-metric-box.amber { border-right: 3px solid var(--accent-amber); }
.ans-metric-box.rose { border-right: 3px solid var(--accent-rose); }

.ans-stat-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.ans-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

.ans-stat-label,
.ans-metric-lbl {
  font-size: 0.65rem !important;
  color: var(--text-secondary);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.1;
}

.ans-stat-val,
.ans-metric-val {
  font-size: 0.92rem !important;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  line-height: 1.1;
}

.ans-appeals-card,
.ans-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 6px;
}

/* Responsive Grids & Policy Cards */
.ans-policies-grid,
.ans-timing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 8px;
  align-items: start;
}

.ans-column-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: var(--shadow-xs);
}

.ans-policy-card {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.ans-policy-card:hover {
  border-color: var(--accent-emerald);
  background: var(--bg-card);
}

.ans-policy-card.selected {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-light);
  box-shadow: 0 0 0 1px var(--accent-emerald);
}

.ans-policy-card.selected::after {
  content: '✓ معتمد';
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  background: var(--accent-emerald);
  color: #fff;
  padding: 1px 5px;
  border-radius: var(--radius-full);
}

.ans-policy-card-title {
  font-weight: 800;
  font-size: 0.79rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ans-policy-card-title.highlight {
  color: var(--accent-emerald);
}

.ans-policy-card-desc {
  font-size: 0.70rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.ans-detail-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ans-detail-label:hover {
  border-color: var(--accent-emerald);
}

.ans-detail-label.active {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-light);
}

.ans-tab-panel {
  display: none;
  animation: fadeIn 0.2s ease;
  flex-shrink: 0 !important;
  width: 100%;
}

.ans-tab-panel.active {
  display: block;
}

/* ================================================================
   Student Hub, Appeals & Regrading Styles (مضغوط وفسيح)
   ================================================================ */

.ans-student-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--ans-surface);
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: var(--ans-shadow-card);
  flex-wrap: wrap;
}

.ans-toolbar-actions-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-ans-regrade {
  background: var(--ans-primary-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--ans-primary-glow);
  transition: all 0.15s ease;
}
.btn-ans-regrade:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.btn-ans-broadcast {
  background: var(--ans-blue-soft);
  color: var(--ans-blue);
  border: 1px solid var(--ans-blue-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.btn-ans-broadcast:hover {
  background: var(--ans-blue);
  color: #fff;
}

.btn-ans-export {
  background: var(--ans-surface-subtle);
  color: var(--text-primary);
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.btn-ans-export:hover {
  background: var(--ans-surface);
  border-color: var(--ans-border-hover);
}

/* Student Metric Ribbon - Ultra-Compact Micro Ribbon (Saves 120px vertical space) */
.ans-student-metrics {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  margin-top: 4px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 10px !important;
  height: 38px !important;
  max-height: 38px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ans-metric-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: unset !important;
  position: relative !important;
  flex: 1 !important;
}

.ans-metric-box:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border-subtle);
}

.ans-metric-box::after {
  content: '';
  position: static !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ans-metric-box.emerald::after { background: var(--accent-emerald) !important; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
.ans-metric-box.blue::after { background: var(--accent-blue) !important; box-shadow: 0 0 6px rgba(37, 99, 235, 0.5); }
.ans-metric-box.amber::after { background: var(--accent-amber) !important; box-shadow: 0 0 6px rgba(217, 119, 6, 0.5); }
.ans-metric-box.rose::after { background: var(--accent-rose) !important; box-shadow: 0 0 6px rgba(225, 29, 72, 0.5); }

.ans-metric-val {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-primary) !important;
  line-height: 1 !important;
  order: 2 !important;
}

.ans-metric-lbl {
  font-size: 0.72rem !important;
  color: var(--text-secondary) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  order: 1 !important;
}

/* Appeals Inbox Card */
.ans-appeals-card {
  background: var(--ans-surface);
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--ans-shadow-card);
}

.ans-appeals-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.ans-appeal-item {
  background: var(--ans-surface-subtle);
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: all 0.15s ease;
}

.ans-appeal-item:hover {
  border-color: var(--ans-amber-border);
  background: var(--ans-surface);
  box-shadow: var(--shadow-sm);
}

.ans-appeal-info {
  flex: 1;
  min-width: 220px;
}

.ans-appeal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ans-appeal-badge-status {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 800;
}
.ans-appeal-badge-status.pending {
  background: var(--ans-amber-soft);
  color: var(--ans-amber);
  border: 1px solid var(--ans-amber-border);
}
.ans-appeal-badge-status.accepted {
  background: var(--ans-emerald-soft);
  color: var(--ans-emerald);
  border: 1px solid var(--ans-emerald-border);
}
.ans-appeal-badge-status.rejected {
  background: var(--ans-rose-soft);
  color: var(--ans-rose);
  border: 1px solid var(--ans-rose-border);
}

.ans-appeal-q {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ans-appeal-reason {
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--ans-surface);
  border-right: 3px solid var(--ans-amber);
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 4px;
  line-height: 1.4;
}

.ans-appeal-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Students Table */
.ans-table-card {
  background: var(--ans-surface);
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--ans-shadow-card);
  margin-bottom: 12px;
}

.ans-table-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.ans-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.ans-pro-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: 0.78rem;
}

.ans-pro-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 4px 8px;
  font-weight: 800;
  font-size: 0.74rem;
  border-bottom: 1.5px solid var(--border-subtle);
  white-space: nowrap;
  height: 28px;
}

.ans-pro-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  height: 32px;
  line-height: 1.15;
}

.ans-pro-table tr:hover td {
  background: var(--bg-secondary);
}

/* ================================================================
   SYSTEM-WIDE BUTTON ARCHITECTURE & TOKEN BINDINGS
   ================================================================ */

/* Base Universal Button Component */
.btn,
.btn-action-compact,
.btn-action-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-size-sm-gap, 5px);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border-width: var(--btn-border-width, 1px);
  border-style: var(--btn-border-style, solid);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: var(--btn-transition);
  outline: none;
}

/* --- Button Scales (حجم ومقاس الأزرار) --- */
.btn-xs {
  min-height: var(--btn-size-xs-h, 24px);
  padding: var(--btn-size-xs-py, 2px) var(--btn-size-xs-px, 8px);
  font-size: var(--btn-size-xs-font, 0.70rem);
  border-radius: var(--btn-size-xs-radius, 6px);
  gap: var(--btn-size-xs-gap, 4px);
}

.btn-sm,
.btn-action-sm {
  min-height: var(--btn-size-sm-h, 30px);
  padding: var(--btn-size-sm-py, 4px) var(--btn-size-sm-px, 11px);
  font-size: var(--btn-size-sm-font, 0.76rem);
  border-radius: var(--btn-size-sm-radius, 7px);
  gap: var(--btn-size-sm-gap, 5px);
}

.btn-action-compact {
  min-height: 28px;
  padding: 3px 9px;
  font-size: 0.74rem;
  border-radius: var(--btn-size-sm-radius, 7px);
  gap: 4px;
}

.btn-md {
  min-height: var(--btn-size-md-h, 36px);
  padding: var(--btn-size-md-py, 6px) var(--btn-size-md-px, 15px);
  font-size: var(--btn-size-md-font, 0.84rem);
  border-radius: var(--btn-size-md-radius, 8px);
  gap: var(--btn-size-md-gap, 6px);
}

.btn-lg {
  min-height: var(--btn-size-lg-h, 42px);
  padding: var(--btn-size-lg-py, 9px) var(--btn-size-lg-px, 19px);
  font-size: var(--btn-size-lg-font, 0.92rem);
  border-radius: var(--btn-size-lg-radius, 10px);
  gap: var(--btn-size-lg-gap, 8px);
}

.btn-xl {
  min-height: var(--btn-size-xl-h, 48px);
  padding: var(--btn-size-xl-py, 12px) var(--btn-size-xl-px, 24px);
  font-size: var(--btn-size-xl-font, 1.00rem);
  border-radius: var(--btn-size-xl-radius, 12px);
  gap: var(--btn-size-xl-gap, 10px);
}

.btn-pill {
  border-radius: var(--btn-radius-pill, 9999px) !important;
}

/* --- Common Interactive States --- */
.btn:hover,
.btn-action-compact:hover,
.btn-action-sm:hover {
  transform: var(--btn-hover-transform, translateY(-1px));
}

.btn:active,
.btn-action-compact:active,
.btn-action-sm:active {
  transform: var(--btn-active-transform, translateY(1px) scale(0.985));
}

.btn:disabled,
.btn-action-compact:disabled,
.btn-action-sm:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn.active,
.btn-action-compact.active,
.btn-action-sm.active {
  background: linear-gradient(135deg, #059669, #0d9488) !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
  font-weight: 800 !important;
}

/* --- Universal Button Variants / Types (أنواع وألوان الأزرار) --- */

/* Primary (Emerald / الهوية الأساسية) */
.btn-primary,
.btn-action-compact.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover,
.btn-action-compact.btn-primary:hover {
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-hover-shadow);
}
.btn-primary:focus-visible,
.btn-action-compact.btn-primary:focus-visible {
  box-shadow: var(--btn-primary-ring);
}

/* Secondary (Default Neutral / المحايد) */
.btn-secondary,
.btn-action-compact,
.btn-action-sm {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  box-shadow: var(--btn-secondary-shadow);
}
.btn-secondary:hover,
.btn-action-compact:hover,
.btn-action-sm:hover {
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
  color: var(--accent-emerald);
  box-shadow: var(--btn-secondary-hover-shadow);
}

/* Blue / Sapphire (المقررات والبيانات) */
.btn-blue,
.btn-info,
.btn-action-compact.btn-blue {
  background: var(--btn-blue-bg);
  border-color: var(--btn-blue-border);
  color: var(--btn-blue-text);
  box-shadow: var(--btn-blue-shadow);
}
.btn-blue:hover,
.btn-info:hover,
.btn-action-compact.btn-blue:hover {
  background: var(--btn-blue-hover-bg);
  border-color: var(--btn-blue-hover-border);
  color: var(--btn-blue-text);
  box-shadow: var(--btn-blue-hover-shadow);
}

/* Amber / Warning (التنبيهات والأعمال المعلقة) */
.btn-amber,
.btn-warning,
.btn-action-compact.btn-amber {
  background: var(--btn-amber-bg);
  border-color: var(--btn-amber-border);
  color: var(--btn-amber-text);
  box-shadow: var(--btn-amber-shadow);
}
.btn-amber:hover,
.btn-warning:hover,
.btn-action-compact.btn-amber:hover {
  background: var(--btn-amber-hover-bg);
  border-color: var(--btn-amber-hover-border);
  color: var(--btn-amber-text);
  box-shadow: var(--btn-amber-hover-shadow);
}

/* Danger / Rose (الحذف وإعادة التعيين والتحذير) */
.btn-danger,
.btn-rose,
.btn-action-compact.btn-danger {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
  box-shadow: var(--btn-danger-shadow);
}
.btn-danger:hover,
.btn-rose:hover,
.btn-action-compact.btn-danger:hover {
  background: var(--btn-danger-hover-bg);
  border-color: var(--btn-danger-hover-border);
  color: var(--btn-danger-text);
  box-shadow: var(--btn-danger-hover-shadow);
}

/* Success / Emerald (الاعتماد والرصد) */
.btn-success,
.btn-action-compact.btn-success {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}
.btn-success:hover,
.btn-action-compact.btn-success:hover {
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-hover-shadow);
}

/* Purple / Royal (الشهادات والأسئلة) */
.btn-purple,
.btn-action-compact.btn-purple {
  background: var(--btn-purple-bg);
  border-color: var(--btn-purple-border);
  color: var(--btn-purple-text);
  box-shadow: var(--btn-purple-shadow);
}
.btn-purple:hover,
.btn-action-compact.btn-purple:hover {
  background: var(--btn-purple-hover-bg);
  border-color: var(--btn-purple-hover-border);
  color: var(--btn-purple-text);
  box-shadow: var(--btn-purple-hover-shadow);
}

/* Ghost / Soft Outline (الخفيف الشفاف) */
.btn-ghost,
.btn-action-compact.btn-ghost {
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-text);
  box-shadow: none;
}
.btn-ghost:hover,
.btn-action-compact.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
  border-color: var(--btn-ghost-hover-border);
  color: var(--accent-emerald);
}

.ans-score-pill {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  display: inline-block;
  line-height: 1.2;
}
.ans-score-pill.passed {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border: 1px solid var(--accent-emerald-border);
}
.ans-score-pill.failed {
  background: var(--accent-rose-light);
  color: var(--accent-rose);
  border: 1px solid rgba(225, 29, 72, 0.25);
}

/* ================= ACADEMIC ANALYTICS & REPORTS SUITE ================= */
.rep-tabs-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 4px 6px 4px;
  margin-bottom: 8px;
  overflow-x: auto;
}

.rep-tab-btn {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.rep-tab-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.rep-tab-btn.active {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border-color: var(--accent-emerald-border);
  font-weight: 800;
}

.rep-view-content {
  display: none;
  animation: fadeIn 0.2s ease;
}

.rep-view-content.active {
  display: block;
}

/* Grade Histogram / Bell Curve */
.grade-histogram-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}

.hist-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 140px;
  padding: 10px 10px 0 10px;
  border-bottom: 1.5px solid var(--border-medium);
  margin-bottom: 8px;
}

.hist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.hist-bar {
  width: 80%;
  max-width: 44px;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  position: relative;
  min-height: 4px;
  cursor: pointer;
}

.hist-bar:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.hist-count {
  font-size: 0.72rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  margin-bottom: 3px;
  color: var(--text-primary);
}

.hist-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-secondary);
  margin-top: 4px;
  text-align: center;
}

.hist-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Recommendation Cards */
.rep-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.rep-rec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rep-rec-card.emerald { border-right: 3.5px solid var(--accent-emerald); }
.rep-rec-card.amber { border-right: 3.5px solid var(--accent-amber); }
.rep-rec-card.blue { border-right: 3.5px solid var(--accent-blue); }
.rep-rec-card.rose { border-right: 3.5px solid var(--accent-rose); }

.rep-rec-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.rep-rec-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rep-rec-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Student Cohorts */
.rep-cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.rep-cohort-column {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
}

.rep-cohort-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.rep-student-mini-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.rep-student-mini-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-secondary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.76rem;
}

/* Student Paper Modal */
.ans-paper-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--ans-surface-subtle);
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.78rem;
}

@media (max-width: 650px) {
  .ans-paper-meta-grid { grid-template-columns: repeat(2, 1fr); }
}

.ans-paper-q-row {
  border: 1px solid var(--ans-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--ans-surface);
  transition: all 0.15s ease;
}
.ans-paper-q-row.correct {
  border-right: 3px solid var(--ans-emerald);
}
.ans-paper-q-row.wrong {
  border-right: 3px solid var(--ans-rose);
}
.ans-paper-q-row.grace {
  border-right: 3px solid var(--ans-amber);
}

/* Countdown Card - Compact */
.ans-countdown-card {
  background: linear-gradient(135deg, var(--accent-emerald-light), rgba(13, 148, 136, 0.05));
  border: 1px solid var(--accent-emerald-border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  text-align: center;
  margin-bottom: 6px;
}

.ans-countdown-grid {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0;
  flex-wrap: wrap;
}

.ans-digit-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  min-width: 48px;
  box-shadow: var(--shadow-xs);
}

.ans-digit-num {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent-emerald);
  font-family: 'Outfit', monospace;
  line-height: 1;
}

.ans-digit-label {
  font-size: 0.60rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 1px;
}

/* Question Cards & Choices */
.ans-q-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.ans-q-card:hover {
  border-color: var(--accent-emerald);
  box-shadow: var(--shadow-md);
}

.ans-q-card.grace-active {
  border-color: var(--accent-amber);
  background: linear-gradient(180deg, var(--accent-amber-light), var(--bg-card));
}

.ans-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ans-q-badge {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.ans-q-badge-sub {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.ans-grace-tag {
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--accent-amber);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.ans-q-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.45;
}

.ans-choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

@media (max-width: 768px) {
  .ans-choices-grid { grid-template-columns: 1fr; }
}

.ans-choice-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  transition: var(--transition-fast);
}

.ans-choice-pill.correct {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald);
}

.ans-letter {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.ans-letter.correct {
  background: var(--accent-emerald);
  color: #fff;
  border-color: var(--accent-emerald);
}

.ans-correct-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.15);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.ans-explanation-box {
  background: var(--bg-secondary);
  border-right: 3px solid var(--accent-blue);
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.45;
}

/* ================================================================
   Comprehensive Multi-Screen Responsiveness (متجاوب مع كافة الشاشات)
   ================================================================ */

@media (max-width: 1200px) {
  .ans-sub-sidebar {
    width: 195px;
    min-width: 175px;
    max-width: 205px;
  }
  .ans-tab-title { font-size: 0.75rem; }
  .ans-tab-sub { font-size: 0.62rem; }
}

@media (max-width: 992px) {
  .ans-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .ans-student-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ans-policies-grid,
  .ans-timing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .ans-sub-sidebar:not(.expanded) {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
  }
  .ans-sub-sidebar:not(.expanded) .ans-sidebar-brand-text,
  .ans-sub-sidebar:not(.expanded) .ans-sidebar-desc,
  .ans-sub-sidebar:not(.expanded) .ans-sidebar-version,
  .ans-sub-sidebar:not(.expanded) .ans-tab-texts,
  .ans-sub-sidebar:not(.expanded) .ans-sidebar-link-text {
    display: none !important;
  }
  .ans-sub-sidebar:not(.expanded) .ans-tab-btn {
    justify-content: center;
    padding: 7px 0;
    width: 40px;
    min-width: 40px;
  }
  .ans-sub-sidebar:not(.expanded) .ans-tab-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    margin-right: 0;
  }
}

@media (max-width: 650px) {
  #answersView.active {
    flex-direction: column !important;
  }
  .ans-sub-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .ans-sub-sidebar .ans-sidebar-header,
  .ans-sub-sidebar .ans-sidebar-footer {
    display: none !important;
  }
  .ans-sub-sidebar .ans-tabs-nav {
    flex-direction: row !important;
    overflow-x: auto;
    width: 100%;
    padding: 4px 6px;
    gap: 4px;
  }
  .ans-sub-sidebar .ans-tab-btn {
    width: auto !important;
    min-width: auto;
    padding: 5px 8px;
  }
  .ans-sub-sidebar .ans-tab-texts {
    display: block !important;
  }
  .ans-sub-sidebar .ans-tab-sub {
    display: none;
  }
  .ans-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ans-kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
  .ans-student-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================================================================
   6 MASTER MODULES & COMPONENT ENHANCEMENTS
   ================================================================ */



/* Questions Raw Textarea with Drag & Drop */
.questions-raw-textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
  transition: all var(--transition-normal);
  box-sizing: border-box;
}

.questions-raw-textarea:focus,
.questions-raw-textarea.dragover {
  border-color: var(--accent-emerald);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-emerald-light);
}

/* Question Items Cards */
.question-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.question-item-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.question-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.qa-flag-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

.qa-flag-badge.danger {
  background: var(--accent-rose-light);
  color: var(--accent-rose);
  border: 1px solid var(--accent-rose);
}

.qa-flag-badge.warning {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
}

.qa-flag-badge.success {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.question-body {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 10px;
}

.question-explanation {
  background: var(--bg-secondary);
  border-right: 3px solid var(--accent-blue);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.choices-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.choice-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.choice-chip:hover {
  background: var(--bg-card);
  border-color: var(--accent-emerald);
}

.choice-chip.correct {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald);
  font-weight: 800;
  color: var(--accent-emerald);
}

.choice-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background: var(--bg-card);
}

.choice-chip.correct .choice-indicator {
  background: var(--accent-emerald);
  color: #fff;
  border-color: var(--accent-emerald);
}

/* Inline Question Form */
.inline-question-form {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--accent-emerald-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 14px;
  box-shadow: var(--shadow-md);
}

.inline-question-form.active {
  display: block;
}

/* Upload Action Footer */
.upload-action-footer {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 16px;
  box-shadow: var(--shadow-sm);
}

/* Item Difficulty Rows */
.diff-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.diff-item-info {
  flex: 1;
  min-width: 220px;
}

.diff-q-pill {
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.diff-q-title {
  font-size: 0.84rem;
  font-weight: 700;
  margin: 4px 0 0 0;
  color: var(--text-primary);
}

.diff-item-bar-box {
  width: 180px;
  min-width: 150px;
}

.diff-track {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.diff-fill {
  height: 100%;
  border-radius: 4px;
}

.diff-fill.easy { background: var(--accent-emerald); }
.diff-fill.medium { background: var(--accent-amber); }
.diff-fill.hard { background: var(--accent-rose); }

/* Appeals Cards */
.appeal-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.appeal-item-card.pending {
  border-right: 4px solid var(--accent-amber);
}

.appeal-item-card.accepted {
  border-right: 4px solid var(--accent-emerald);
}

.appeal-item-card.rejected {
  border-right: 4px solid var(--accent-rose);
}

.appeal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.appeal-q-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.appeal-body {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 10px;
}

.appeal-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Paper Compare Row */
.paper-q-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}

.paper-q-card.correct { border-right: 4px solid var(--accent-emerald); }
.paper-q-card.wrong { border-right: 4px solid var(--accent-rose); }

.paper-q-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.paper-q-no {
  font-weight: 800;
  font-size: 0.82rem;
}

.paper-score-pill.correct { color: var(--accent-emerald); font-weight: 800; font-size: 0.78rem; }
.paper-score-pill.wrong { color: var(--accent-rose); font-weight: 800; font-size: 0.78rem; }

.paper-q-text {
  font-size: 0.88rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

.paper-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.paper-choice-box {
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
}

.paper-choice-box.student.correct {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-light);
}

.paper-choice-box.student.wrong {
  border-color: var(--accent-rose);
  background: var(--accent-rose-light);
}

.paper-choice-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Global Toast System */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000000 !important;
  pointer-events: none;
}

.toast-card {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  animation: slideInToast 0.25s ease;
  transition: all 0.3s ease;
}

.toast-card.success { border-right: 4px solid var(--accent-emerald); }
.toast-card.error { border-right: 4px solid var(--accent-rose); }
.toast-card.warning { border-right: 4px solid var(--accent-amber); }
.toast-card.info { border-right: 4px solid var(--accent-blue); }

.toast-card.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

@keyframes slideInToast {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Button & Action System */
.btn-action-sm {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
}

.btn-action-sm:hover {
  background: var(--bg-secondary);
  border-color: var(--border-medium);
}

.btn-action-sm.btn-success {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border-color: var(--accent-emerald-border);
}
.btn-action-sm.btn-success:hover {
  background: var(--accent-emerald);
  color: #fff;
}

.btn-action-sm.btn-primary {
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  border-color: rgba(37, 99, 235, 0.25);
}
.btn-action-sm.btn-primary:hover {
  background: var(--accent-blue);
  color: #fff;
}

.btn-action-sm.btn-danger {
  background: var(--accent-rose-light);
  color: var(--accent-rose);
  border-color: rgba(225, 29, 72, 0.25);
}
.btn-action-sm.btn-danger:hover {
  background: var(--accent-rose);
  color: #fff;
}

.btn-primary-grade {
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, var(--accent-emerald) 0%, #0d9488 100%);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
  transition: all var(--transition-fast);
}

.btn-primary-grade:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
}

.row-modified {
  background: rgba(245, 158, 11, 0.04) !important;
}


/* Per-Answer Score Editing UI */
.edit-answer-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-card);
  transition: all var(--transition-fast);
}

.edit-answer-card.correct {
  border-right: 4px solid var(--accent-emerald);
}

.edit-answer-card.wrong {
  border-right: 4px solid var(--accent-rose);
}

.quick-chips-group {
  display: inline-flex;
  gap: 3px;
}

.btn-chip {
  padding: 2px 7px;
  font-size: 0.72rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-chip:hover {
  background: var(--border-medium);
  color: var(--text-primary);
}

.btn-chip.active {
  background: var(--accent-emerald);
  color: #fff;
  border-color: var(--accent-emerald);
}

/* ================================================================
   Executive Extended Modules Styles (Ijazah, CRM, Encyclopedia, Content)
   ================================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-pill.in-progress {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-pill.passed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pill.failed {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-action-compact {
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  white-space: nowrap;
}

.btn-action-compact:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.btn-action-compact.btn-primary {
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.btn-action-compact.btn-primary:hover {
  background: var(--accent-blue);
  color: #ffffff;
}

.btn-action-compact.btn-success {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border-color: var(--accent-emerald);
}

.btn-action-compact.btn-success:hover {
  background: var(--accent-emerald);
  color: #ffffff;
}

/* Tab Filters for Extended Views */
.ijz-tab-btn, .enc-cat-btn, .cnt-tab-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
  white-space: nowrap;
}

.ijz-tab-btn:hover, .enc-cat-btn:hover, .cnt-tab-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.ijz-tab-btn.active, .enc-cat-btn.active, .cnt-tab-btn.active {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: var(--accent-emerald);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

/* Islamic Sanad Certificate Print Layout */
.ijz-certificate-sheet {
  background: #fdfbf7;
  color: #1e293b;
  border: 8px double #c5a059;
  border-radius: var(--radius-md);
  padding: 36px 40px;
  position: relative;
  text-align: center;
  box-shadow: var(--shadow-lg);
  font-family: 'Amiri', 'Traditional Arabic', 'Outfit', serif;
}

.ijz-certificate-sheet::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px solid #d4af37;
  pointer-events: none;
}

.ijz-cert-bismillah {
  font-size: 1.35rem;
  font-weight: 800;
  color: #8c6d23;
  margin-bottom: 12px;
}

.ijz-cert-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.ijz-cert-body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #334155;
  margin-bottom: 24px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.ijz-cert-highlight {
  font-weight: 900;
  color: #8c6d23;
  font-size: 1.2rem;
  border-bottom: 2px dotted #8c6d23;
  padding: 0 4px;
}

.ijz-cert-signatures {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(197, 160, 89, 0.4);
}

.ijz-cert-seal {
  width: 90px;
  height: 90px;
  border: 3px dashed #c5a059;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c6d23;
  font-size: 0.72rem;
  font-weight: 800;
  margin: 0 auto;
}

/* ================================================================
   ENTERPRISE DESIGN TOKENS & HIGH-ESTATE WORKSPACE (باكبر استحواذ)
   ================================================================ */

.notif-top-btn {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  padding: 0;
  box-shadow: var(--shadow-luxury-sm), var(--shadow-luxury-inset);
  font-size: 0.90rem;
}

.notif-top-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
  transform: translateY(-1px);
  box-shadow: var(--shadow-luxury-md);
}

.notif-top-btn:active {
  transform: translateY(1px) scale(0.985);
}

.top-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent-rose);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-card);
}

/* --- Executive Dashboard Styles with Guaranteed Scrolling & Compact Balance --- */
.dash-stage-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 28px 14px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-app);
}

/* Executive Unified Command Header - Compact Luxury */
.dash-unified-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.dash-header-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-header-badge {
  font-size: 1.15rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.dash-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}

.dash-subtitle {
  margin: 1px 0 0 0;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.dash-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.dash-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-sync-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-family: 'Outfit', sans-serif;
}

.dash-stage-wrapper::-webkit-scrollbar {
  width: 6px;
}
.dash-stage-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.dash-stage-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 4px;
}
.dash-stage-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--accent-emerald);
}

/* Executive Segmented Navigation Tabs */
.dash-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--bg-card);
  padding: 5px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.dash-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.dash-nav-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.dash-nav-tab.active {
  background: var(--ans-primary-soft);
  color: var(--accent-emerald);
  border-color: rgba(16, 185, 129, 0.35);
  font-weight: 800;
  box-shadow: var(--shadow-xs);
}

.dash-tab-icon {
  font-size: 0.95rem;
}

.dash-tab-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.dash-nav-tab.active .dash-tab-badge {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-emerald);
}

.dash-tab-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
}

.dash-tab-badge.info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
}

/* Tab Content & Panes */
.dash-tab-content {
  width: 100%;
}

.dash-tab-pane {
  display: none;
  width: 100%;
}

.dash-tab-pane.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: dashFadeIn 0.2s ease-in-out;
}

@keyframes dashFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section Intro inside Tab Panes */
.dash-section-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.dash-pane-heading {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}

.dash-pane-sub {
  margin: 2px 0 0 0;
  font-size: 0.70rem;
  color: var(--text-muted);
}

/* High-Density Bento Grid */
.dash-bento-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
}

@media (max-width: 1100px) {
  .dash-bento-grid {
    grid-template-columns: 1fr;
  }
}

.dash-bento-main,
.dash-bento-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Unified Dash Card - Compact Luxury */
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dash-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-card-hover);
}


.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}

.dash-card-title {
  margin: 0;
  font-size: 0.81rem;
  font-weight: 800;
  color: var(--text-primary);
}

.dash-card-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

/* Urgent Interventions Hub Widget */
.dash-urgent-box {
  border-right: 3px solid var(--accent-rose);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), transparent);
}

.dash-intervention-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-intervention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.dash-intervention-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-medium);
}

.dash-interv-info {
  flex: 1;
  min-width: 0;
}

.dash-interv-info strong {
  display: block;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-interv-info p {
  margin: 1px 0 0 0;
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.dash-ribbon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dash-ribbon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
}

.dash-ribbon-btn:hover {
  border-color: var(--accent-emerald);
  background: var(--ans-primary-soft);
  color: var(--accent-emerald);
  transform: translateY(-1px);
}

.dash-ribbon-btn.urgent {
  border-color: rgba(239, 68, 68, 0.4);
  background: var(--ans-rose-soft);
  color: var(--accent-rose);
}

.dash-ribbon-btn.urgent:hover {
  background: var(--accent-rose);
  color: #fff;
}

.dash-ribbon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  color: var(--text-muted);
  background: var(--bg-app);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.dash-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: dashPulse 2s infinite;
}

@keyframes dashPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 8 KPI Cards Grid - Ultra Compact Luxury */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  width: 100%;
}

.dash-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  box-shadow: var(--shadow-card);
  position: relative;
}

.dash-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent-emerald);
}

.dash-kpi-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.dash-kpi-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.dash-kpi-label {
  font-size: 0.67rem;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi-num-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.dash-kpi-num {
  font-size: 1.10rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  line-height: 1.15;
}

.dash-kpi-trend {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 6px;
}

.dash-kpi-trend.positive {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
}

.dash-kpi-trend.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
}

.dash-kpi-trend.neutral {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
}

.dash-kpi-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi-arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.dash-kpi-card:hover .dash-kpi-arrow {
  transform: translateX(-2px);
  color: var(--accent-emerald);
}

/* ================================================================
   EXAMS STUDIO - REAL LIVE QUESTIONS & ANSWER KEYS DOCK
   ================================================================ */
.ans-exam-q-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ans-exam-q-card:hover {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-xs);
}

.ans-exam-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ans-exam-q-num-badge {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.76rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}

.ans-exam-q-score-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-emerald);
  background: var(--accent-emerald-light);
  border: 1px solid var(--accent-emerald-border);
  padding: 1px 6px;
  border-radius: 10px;
}

.ans-exam-q-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.45;
}

.ans-exam-choices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}

.ans-exam-choice {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.80rem;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.ans-exam-choice.correct {
  background: rgba(5, 150, 105, 0.08);
  border: 1.5px solid var(--accent-emerald);
  color: var(--accent-emerald);
  font-weight: 700;
}

.ans-exam-choice-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--accent-emerald);
  color: #ffffff;
}

.ans-exam-expl-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border-right: 3px solid var(--accent-amber);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* --- Executive Operations Command Center (10 Tools) --- */
.dash-tools-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
}

.dash-tools-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-tools-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.dash-tools-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
}

.dash-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.dash-tool-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.dash-tool-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent-emerald);
  box-shadow: var(--shadow-xs);
}

.dash-tool-card.urgent:hover {
  border-color: var(--accent-rose);
}

.dash-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dash-tool-info {
  flex: 1;
  min-width: 0;
}

.dash-tool-info strong {
  display: block;
  font-size: 0.76rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-tool-info p {
  margin: 1px 0 0 0;
  font-size: 0.66rem;
  color: var(--text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-tool-badge {
  font-size: 0.60rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  align-self: flex-start;
  white-space: nowrap;
}

.dash-tool-badge.badge-urgent {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-rose);
  border-color: rgba(239, 68, 68, 0.3);
}

.dash-tool-badge.badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-amber);
  border-color: rgba(245, 158, 11, 0.3);
}

/* Recommendations & Advisory Engine - Compact */
.dash-recom-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
}

.dash-recom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.dash-recom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 8px;
}

.dash-recom-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.dash-recom-card:hover {
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.dash-recom-card.urgent {
  border-right: 3px solid var(--accent-rose);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), transparent);
}

.dash-recom-card.warning {
  border-right: 3px solid var(--accent-amber);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), transparent);
}

.dash-recom-card.qa {
  border-right: 3px solid var(--ans-purple);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.04), transparent);
}

.dash-recom-card.finance {
  border-right: 3px solid var(--accent-emerald);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), transparent);
}

.dash-recom-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-recom-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
}

.dash-recom-badge.urgent {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-rose);
}

.dash-recom-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
}

.dash-recom-badge.qa {
  background: rgba(139, 92, 246, 0.15);
  color: var(--ans-purple);
}

.dash-recom-badge.finance {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
}

.dash-recom-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 2px 0 1px 0;
}

.dash-recom-desc {
  font-size: 0.69rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin: 0;
}

.dash-recom-btn {
  align-self: flex-start;
  margin-top: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
}

.dash-recom-btn:hover {
  background: var(--accent-emerald);
  color: #fff;
  border-color: var(--accent-emerald);
}

/* Charts & Analytics Suite Grid - Compact */
.dash-charts-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
}

@media (max-width: 1024px) {
  .dash-charts-grid {
    grid-template-columns: 1fr;
  }
}

.dash-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.dash-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-subtle);
}

.dash-chart-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.dash-chart-sub {
  font-size: 0.67rem;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

.dash-chart-svg-wrap {
  width: 100%;
  position: relative;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-chart-footer {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.70rem;
  color: var(--text-secondary);
}

.dash-chart-footer strong {
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

/* Gauges Container - Compact */
.dash-gauges-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  padding: 2px 0;
}

.dash-gauge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  width: 78px;
}

.dash-gauge-circle {
  position: relative;
  width: 62px;
  height: 62px;
}

.dash-gauge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.88rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
}

.dash-gauge-title {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 3px;
}

.dash-gauge-status {
  font-size: 0.60rem;
  color: var(--text-muted);
}

/* Track Matrix - Compact */
.dash-track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding-top: 2px;
}

.dash-track-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-track-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
}

.dash-track-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.dash-track-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* Subscriptions Filter Tabs - Compact */
.subs-filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  padding: 2px;
  border-radius: var(--radius-sm);
}

.subs-filter-btn {
  border: none;
  background: transparent;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  border-radius: var(--radius-xs, 4px);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
}

.subs-filter-btn.active {
  background: var(--bg-card);
  color: var(--accent-emerald);
  box-shadow: var(--shadow-xs);
}

/* Two Column Main Operations Layout - Compact */
.dash-main-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 10px;
  align-items: start;
}

@media (max-width: 1100px) {
  .dash-main-grid {
    grid-template-columns: 1fr;
  }
}

.dash-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
}

.dash-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}

.dash-panel-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}

.dash-panel-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

.dash-table-wrapper {
  overflow-x: auto;
}

.dash-course-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 340px;
  overflow-y: auto;
}

.dash-course-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.dash-course-item:hover {
  border-color: var(--border-medium);
  background: var(--bg-app);
}

.dash-course-icon {
  font-size: 1.05rem;
}

.dash-course-info {
  flex: 1;
  min-width: 0;
}

.dash-course-info strong {
  display: block;
  font-size: 0.76rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-course-tags {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.dash-course-tags .tag-pill {
  font-size: 0.63rem;
  padding: 1px 5px;
}

.btn-select-course {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs, 4px);
  padding: 2px 6px;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.dash-course-item:hover .btn-select-course {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: var(--accent-emerald);
}

.dash-health-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.health-text strong {
  display: block;
  font-size: 0.75rem;
  color: var(--text-primary);
}

.health-text small {
  font-size: 0.66rem;
  color: var(--text-muted);
}

/* --- Courses Toolbar & Grid --- */
.courses-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 16px;
  width: 100%;
}

.course-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-medium);
}

.course-card.is-inactive {
  opacity: 0.75;
}

.course-card-banner {
  height: 125px;
  background: linear-gradient(135deg, #059669 0%, #0d9488 45%, #1e293b 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[data-theme="dark"] .course-card-banner {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.course-card-banner img.course-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.3s ease;
}

.course-card:hover .course-card-banner img.course-banner-img {
  transform: scale(1.05);
}

/* Fallback Artwork when image is missing or failed */
.course-fallback-artwork {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.artwork-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.08;
  background-image: radial-gradient(circle at 25px 25px, #ffffff 2%, transparent 0%), radial-gradient(circle at 75px 75px, #ffffff 2%, transparent 0%);
  background-size: 100px 100px;
  pointer-events: none;
}

.artwork-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.course-card:hover .artwork-icon {
  transform: scale(1.15) translateY(-2px);
}

.artwork-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

/* Standardized Icon Badge System */
.ans-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.ans-icon-badge.lg {
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  border-radius: 12px;
}

.ans-icon-badge.emerald {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.ans-icon-badge.blue {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.ans-icon-badge.amber {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.ans-icon-badge.rose {
  background: rgba(225, 29, 72, 0.12);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.ans-icon-badge.purple {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

/* Standardized Empty State Component */
.ans-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 16px;
  gap: 6px;
  color: var(--text-muted);
}

.ans-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 4px;
  opacity: 0.8;
}

.ans-empty-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.ans-empty-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.4;
  margin: 0;
}

.ans-empty-btn {
  margin-top: 8px;
}

.course-id-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.course-badges-top {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}

.badge-lang, .badge-level {
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

[data-theme="dark"] .badge-lang,
[data-theme="dark"] .badge-level {
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
}

.course-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-card-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-emerald);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.course-card-title {
  margin: 6px 0 4px 0;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-card-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-top: auto;
  margin-bottom: 12px;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.meta-val {
  font-size: 0.82rem;
  color: var(--text-primary);
}

.price-val {
  color: var(--accent-emerald);
}

.meta-status {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.meta-status.online {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.meta-status.offline {
  background: var(--accent-rose-light);
  color: var(--accent-rose);
}

.course-card-actions {
  display: flex;
  gap: 6px;
}

.btn-card-action {
  flex: 1;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-card-action.primary {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #ffffff;
}

.btn-card-action.primary:hover {
  background: var(--accent-emerald-hover);
}

.btn-card-action.secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn-card-action.edit:hover {
  background: var(--accent-amber-light);
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}

.btn-card-action.toggle {
  flex: 0 0 34px;
}

/* --- Students List & Table Styles --- */
.st-cell-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.st-info {
  display: flex;
  flex-direction: column;
}

.st-name {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.st-email {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.st-phone {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
}

.st-subs-badge {
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-weight: 700;
}

.st-subs-badge.has-subs {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.verified-pill {
  display: inline-block;
  background: var(--accent-blue);
  color: #ffffff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.65rem;
  line-height: 16px;
  text-align: center;
  margin-right: 4px;
}

.st-actions-group {
  display: flex;
  gap: 5px;
  align-items: center;
}

.btn-st-action {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.btn-st-action:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
}

.btn-st-action.wa:hover {
  background: rgba(37, 211, 102, 0.15);
  border-color: #25D366;
}

.btn-st-action.mail:hover {
  background: var(--accent-blue-light);
  border-color: var(--accent-blue);
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

/* --- Action Buttons (Accept, Reject) --- */
.btn-action-pro {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-action-pro.btn-accept {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
}

.btn-action-pro.btn-accept:hover {
  background: var(--accent-emerald);
  color: #ffffff;
}

.btn-action-pro.btn-reject {
  background: var(--accent-rose-light);
  border-color: rgba(225, 29, 72, 0.3);
  color: var(--accent-rose);
}

.btn-action-pro.btn-reject:hover {
  background: var(--accent-rose);
  color: #ffffff;
}

/* --- Status Pills --- */
.status-pill.status-pending {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.status-pill.status-graded {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border: 1px solid var(--accent-emerald-border);
}

.status-pill.status-rejected {
  background: var(--accent-rose-light);
  color: var(--accent-rose);
  border: 1px solid rgba(225, 29, 72, 0.25);
}

/* --- Books Grid & Cards --- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.book-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.book-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.book-cover-area {
  height: 140px;
  background: var(--bg-secondary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-cover-area img {
  max-height: 120px;
  max-width: 90%;
  object-fit: contain;
}

.book-cover-placeholder {
  font-size: 3rem;
  color: var(--text-muted);
}

.book-type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.book-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.book-cat {
  font-size: 0.72rem;
  color: var(--accent-emerald);
  font-weight: 700;
}

.book-title {
  margin: 4px 0 2px 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.book-author {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 10px 0;
}

.book-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-top: auto;
  margin-bottom: 12px;
}

/* --- Notifications Feed --- */
.notifs-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.notif-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  align-items: flex-start;
}

.notif-item.is-unread {
  border-right: 4px solid var(--accent-blue);
  background: var(--ans-blue-soft);
}

.notif-icon-box {
  font-size: 1.5rem;
}

.notif-content {
  flex: 1;
}

.notif-header-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.notif-type-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.notif-time {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.notif-title {
  margin: 0 0 4px 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
}

.notif-body {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Full Drawer Panel (Slide from Left in RTL) --- */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 200000 !important;
  justify-content: flex-start;
}

.drawer-overlay.active {
  display: flex;
}

.drawer-panel {
  width: 580px;
  max-width: 90vw;
  height: 100%;
  background: var(--bg-card);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  animation: drawerSlideIn 0.25s ease-out;
}

@keyframes drawerSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

[dir="rtl"] @keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.drawer-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.btn-close-drawer {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  color: var(--text-muted);
  cursor: pointer;
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-section h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--accent-emerald);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}

.data-pair {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
}

.data-pair label {
  color: var(--text-muted);
  font-weight: 600;
}

.drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* --- Custom Modals --- */
.custom-modal,
.custom-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop-bg, rgba(15, 23, 42, 0.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200000 !important;
  align-items: center;
  justify-content: center;
}

.custom-modal.active,
.custom-modal-backdrop.active {
  display: flex !important;
}

.custom-modal-box {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 540px;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-medium);
  animation: modalScaleIn 0.2s ease-out;
}

.custom-modal-box.modal-wide {
  width: 780px;
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.custom-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-close-modal {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
}

.custom-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group-pro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-pro label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.input-pro, .select-pro, .textarea-pro {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease;
}

.input-pro:focus, .select-pro:focus, .textarea-pro:focus {
  border-color: var(--accent-emerald);
}

.custom-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-save-pro,
.btn-primary,
.btn-pro-primary {
  background: #005844 !important;
  color: #ffffff !important;
  border: 1px solid #005844 !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  min-height: 38px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 88, 68, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  text-decoration: none !important;
}
.btn-save-pro:hover,
.btn-primary:hover,
.btn-pro-primary:hover {
  background: #004334 !important;
  border-color: #004334 !important;
  box-shadow: 0 4px 12px rgba(0, 88, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}
.btn-save-pro:active,
.btn-primary:active,
.btn-pro-primary:active {
  transform: translateY(1px) scale(0.985) !important;
}

.btn-cancel-pro,
.btn-secondary,
.btn-pro-outline {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-primary, #1e293b) !important;
  border: 1px solid var(--border-medium, #cbd5e1) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  min-height: 38px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  text-decoration: none !important;
}
.btn-cancel-pro:hover,
.btn-secondary:hover,
.btn-pro-outline:hover {
  background: var(--bg-secondary, #f8fafc) !important;
  border-color: #005844 !important;
  color: #005844 !important;
  transform: translateY(-1px) !important;
}
.btn-cancel-pro:active,
.btn-secondary:active,
.btn-pro-outline:active {
  transform: translateY(1px) scale(0.985) !important;
}

/* Unified Compact Action Buttons (Standard across tables, cards, toolbars) */
.btn-action-compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.btn-action-compact.btn-primary {
  background: #005844 !important;
  color: #ffffff !important;
  border: 1px solid #005844 !important;
  box-shadow: 0 1px 3px rgba(0, 88, 68, 0.2) !important;
}
.btn-action-compact.btn-primary:hover {
  background: #004334 !important;
  border-color: #004334 !important;
  box-shadow: 0 2px 6px rgba(0, 88, 68, 0.3) !important;
  transform: translateY(-1px) !important;
}
.btn-action-compact.btn-primary:active {
  transform: translateY(1px) scale(0.985) !important;
}

.btn-action-compact.btn-secondary {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-primary, #334155) !important;
  border: 1px solid var(--border-medium, #cbd5e1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.btn-action-compact.btn-secondary:hover {
  background: var(--bg-secondary, #f8fafc) !important;
  border-color: #005844 !important;
  color: #005844 !important;
  transform: translateY(-1px) !important;
}
.btn-action-compact.btn-secondary:active {
  transform: translateY(1px) scale(0.985) !important;
}

.btn-pro-subtle {
  background: var(--btn-luxury-secondary-bg);
  color: var(--btn-luxury-secondary-text);
  border: 1px solid var(--btn-luxury-secondary-border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}
.btn-pro-subtle:hover {
  background: var(--btn-luxury-secondary-hover);
  border-color: var(--border-strong);
  transform: translateY(-1.5px);
}
.btn-pro-subtle:active {
  transform: translateY(1px) scale(0.985);
}

/* Operational Workspace High-Density Cards */
.table-row-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.table-row-card:hover {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.faq-item {
  transition: border-color 0.2s ease;
}

.faq-item:hover {
  border-color: var(--accent-emerald);
}

.faq-question-btn:hover {
  color: var(--accent-emerald) !important;
}

/* Sleek Scrollable Navigation Rail for all 22 modules */
.app-nav-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}

.app-nav-sidebar::-webkit-scrollbar {
  width: 5px;
}

.app-nav-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 4px;
}

/* ================================================================
   JADEER SMART TOAST SYSTEM — BOTTOM STATUS DOCK
   (نظام الإشعارات اللحظية — الشريط السفلي الثابت)
   ================================================================ */
#toastContainer {
  position: fixed;
  bottom: 18px;
  left: 20px;
  z-index: 1000000 !important;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-height: 40vh;
  overflow: hidden;
}

.jadeer-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: 480px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  animation: toastSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(12px);
}

.jadeer-toast.success {
  border-right: 4px solid var(--accent-emerald);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06), var(--bg-card));
}
.jadeer-toast.info {
  border-right: 4px solid var(--accent-blue);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.06), var(--bg-card));
}
.jadeer-toast.warning {
  border-right: 4px solid var(--accent-amber);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.06), var(--bg-card));
}
.jadeer-toast.error {
  border-right: 4px solid var(--accent-rose);
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.06), var(--bg-card));
}

@keyframes toastSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================================================
   JADEER UNIFIED WINDOW SYSTEM — ENTERPRISE MODAL STANDARDS
   نافذة موحدة متطابقة: بروفايل المعلم وبروفايل الطالب والكونسول الأكاديمي
   مضبوطة رياضياً لعدم تجاوز إطار المتصفح إطلاقاً مع ثبات زر الإغلاق (X)
   ================================================================ */
.jadeer-window-box,
.student-profile-box,
.teacher-profile-box,
.course-console-box,
.track-studio-box,
.console-modal-box,
.profile-hub-dialog {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  width: min(98vw, calc(100vw - 24px));
  max-width: min(98vw, calc(100vw - 24px));
  height: min(95vh, calc(100vh - 24px));
  max-height: min(95vh, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 32px 85px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: jadeerWinOpen 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.jadeer-window-box::before,
.student-profile-box::before,
.teacher-profile-box::before,
.course-console-box::before,
.track-studio-box::before,
.console-modal-box::before,
.profile-hub-dialog::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
  flex-shrink: 0;
}

/* زر إغلاق النوافذ الموحد: زاوية النافذة العلوية معيارياً دون خروج عن المتصفح */
.profile-avatar-col {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.jadeer-win-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-rose, #ef4444);
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.18s ease;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 10;
}

.jadeer-win-close:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #dc2626;
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
}

.jadeer-win-close:active {
  transform: scale(0.95);
}

.jadeer-win-close.floating {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 100;
}

/* منع ارتعاش واهتزاز النوافذ إطلاقاً أثناء التنقل السريع بين الطلاب أو المعلمين */
.modal-overlay.navigating *,
.modal-overlay.navigating .jadeer-window-box,
.modal-overlay.navigating .student-profile-box,
.modal-overlay.navigating .teacher-profile-box,
.jadeer-window-box.navigating,
.student-profile-box.navigating,
.teacher-profile-box.navigating {
  animation: none !important;
  transform: none !important;
}

@keyframes jadeerWinOpen {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ================================================================
   ACADEMIC CERTIFICATE PREVIEW SHEET (شهادة إتمام المقرر الأكاديمية)
   ================================================================ */
.academic-cert-sheet {
  background: #fff;
  color: #1a1a1a;
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  border: 8px double #c59b27;
  position: relative;
  box-shadow: var(--shadow-xl);
  font-family: var(--font-sans);
  margin: 10px auto;
  max-width: 760px;
  text-align: center;
}

.academic-cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e8d08d;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.academic-cert-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #8c6d23;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.academic-cert-student {
  font-size: 1.3rem;
  font-weight: 800;
  color: #059669;
  margin: 14px 0;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.academic-cert-body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #333333;
  margin-bottom: 24px;
}

.academic-cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #eee;
  padding-top: 16px;
  margin-top: 16px;
}

.academic-cert-seal {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px dashed #c59b27;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c6d23;
  font-size: 11px;
  font-weight: 800;
  background: rgba(197, 155, 39, 0.05);
}

/* Quick Snippet Buttons for Grader */
.quick-snippets-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.quick-snippet-chip {
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.quick-snippet-chip:hover {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
  border-color: var(--accent-emerald-border);
}

/* Click to copy badge */
.copy-pill-interactive {
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.copy-pill-interactive:hover {
  transform: scale(1.03);
  filter: brightness(0.95);
}

/* ================================================================
   NATIVE STUDIOS (Content & Curriculum, Landing, Settings)
   ================================================================ */

.studio-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 95vw;
  max-width: 1100px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.studio-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Curriculum & Content Studio */
.curriculum-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 10px;
}

.curriculum-unit-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
}

.curriculum-unit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 700;
  font-size: 0.88rem;
}

.curriculum-lesson-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}

.curriculum-lesson-row:last-child {
  border-bottom: none;
}

.curriculum-lesson-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.lesson-meta-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.lesson-chip {
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

/* Landing Page Studio (2 Columns) */
.landing-studio-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .landing-studio-grid {
    grid-template-columns: 1fr;
  }
}

.landing-preview-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  position: sticky;
  top: 0;
}

.landing-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.landing-preview-banner {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.landing-preview-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 60%);
}

.landing-preview-content {
  padding: 16px;
  position: relative;
}

/* Video Player Modal */
.native-player-box {
  width: 90vw;
  max-width: 850px;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}

.native-player-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

/* ================================================================
   COURSE 360° COCKPIT CONSOLE & ENTERPRISE NAVIGATION
   ================================================================ */

.course-console-box {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  width: min(98vw, calc(100vw - 24px));
  max-width: min(98vw, calc(100vw - 24px));
  height: min(95vh, calc(100vh - 24px));
  max-height: min(95vh, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 32px 85px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}
.course-console-box::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
  flex-shrink: 0;
}

.course-console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  gap: 16px;
  overflow: visible !important;
  position: relative;
  z-index: 600;
}

.console-course-switcher-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-height: 42px;
  overflow: visible !important;
  flex-shrink: 0;
}

#consoleCourseSwitcher {
  height: 38px !important;
  min-height: 38px !important;
  min-width: 320px !important;
  max-width: 480px !important;
  width: auto;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 12px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#consoleCourseSwitcher:focus {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 0 0 2px var(--accent-emerald-light) !important;
}

.course-console-nav-wrap {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-medium);
  padding: 0 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 500;
  overflow: visible !important; /* CRITICAL: prevents clipping of dropdown menus */
}

.course-console-nav-wrap ul.nav-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  overflow: visible !important;
  border-bottom: none;
  flex-wrap: nowrap;
}

.course-console-nav-wrap .nav-item {
  position: relative;
  overflow: visible !important;
}

.course-console-nav-wrap .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  user-select: none;
}

.course-console-nav-wrap .nav-link:hover,
.course-console-nav-wrap .nav-item.dropdown:hover > .nav-link,
.course-console-nav-wrap .nav-item.dropdown.show > .nav-link {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.course-console-nav-wrap .nav-link.active,
.course-console-nav-wrap .nav-item.dropdown.has-active > .nav-link {
  color: var(--accent-emerald);
  border-bottom-color: var(--accent-emerald);
  font-weight: 800;
}

.course-console-nav-wrap .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  min-width: 250px;
  padding: 6px 0;
  z-index: 9999 !important;
  animation: fadeIn 0.15s ease-out;
}

.course-console-nav-wrap .nav-item.dropdown:hover > .dropdown-menu,
.course-console-nav-wrap .nav-item.dropdown.show > .dropdown-menu {
  display: block !important;
}

.course-console-nav-wrap .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.course-console-nav-wrap .dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--accent-emerald);
  padding-right: 20px;
}

.course-console-nav-wrap .dropdown-item.active {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  font-weight: 700;
}

.course-console-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg-app);
}

/* Overview KPI grid in console */
.console-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.console-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.console-kpi-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.console-kpi-info h4 {
  margin: 0 0 4px 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.console-kpi-info strong {
  font-size: 1.3rem;
  color: var(--text-primary);
  font-weight: 800;
}

/* Fast Navigation Action Hub */
.console-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.console-hub-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.console-hub-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-emerald);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Ensure all action and operational modals render with high z-index above parent overlays */
#hrDynamicModal,
#addLessonModal,
#enrollStudentModal,
#scheduleLiveSessionModal,
#createGroupModal,
#privateSessionBookingModal,
#moveStudentGroupModal,
#sendNoticeToStudentModal,
#editStudentAttendanceModal,
#lecturePlayerModal {
  z-index: 250000 !important;
}

/* ================================================================
   Attendance & Engagement Module Styles
   ================================================================ */
.att-state-btn {
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.att-pill-present {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  border-color: rgba(16, 185, 129, 0.3);
}
.att-pill-present:hover {
  background: rgba(16, 185, 129, 0.22);
  transform: scale(1.04);
}
.att-pill-absent {
  background: rgba(225, 29, 72, 0.12);
  color: var(--accent-rose);
  border-color: rgba(225, 29, 72, 0.3);
}
.att-pill-absent:hover {
  background: rgba(225, 29, 72, 0.22);
  transform: scale(1.04);
}
.att-pill-excused {
  background: rgba(217, 119, 6, 0.12);
  color: var(--accent-amber);
  border-color: rgba(217, 119, 6, 0.3);
}
.att-pill-excused:hover {
  background: rgba(217, 119, 6, 0.22);
  transform: scale(1.04);
}
.row-at-risk {
  background: rgba(225, 29, 72, 0.03);
}

.btn-att-platform-edit {
  background: #265249;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-att-platform-edit:hover {
  background: #1b3d36;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.btn-att-platform-reasons {
  background: #265249;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-att-platform-reasons:hover {
  background: #1b3d36;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* ================================================================
   Enrollments & Distribution Studio Styles
   ================================================================ */
.enroll-quick-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 180px 1.5fr auto;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 20px;
}
@media (max-width: 992px) {
  .enroll-quick-bar {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Student Profile 360° Studio Styles (Inherits jadeer-window-box standard)
   ================================================================ */
.student-profile-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  width: min(98vw, calc(100vw - 24px));
  max-width: min(98vw, calc(100vw - 24px));
  height: min(95vh, calc(100vh - 24px));
  max-height: min(95vh, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 32px 85px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: jadeerWinOpen 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.student-profile-box::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
  flex-shrink: 0;
}
.student-profile-header {
  padding: 10px 20px;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.student-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.student-profile-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%);
  border: 2px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-emerald);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.student-profile-status-indicator {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.student-profile-status-indicator.active {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.student-profile-status-indicator.suspended {
  background: #f43f5e;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
}
.student-profile-nav-wrap {
  padding: 0 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-medium);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  display: flex;
  align-items: center;
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 10;
}
.student-profile-nav-wrap .nav-tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  align-items: center;
  flex-wrap: nowrap;
}
.student-profile-nav-wrap .nav-item {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.student-profile-nav-wrap .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  user-select: none;
  height: 32px;
  line-height: 1;
  box-sizing: border-box;
  background: transparent;
}
.student-profile-nav-wrap .nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}
.student-profile-nav-wrap .nav-link.active {
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.student-profile-body {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Profile Attendance Cards & Session Matrix */
.profile-att-course-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.profile-att-course-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.profile-att-bar-track {
  width: 100%;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 14px 0;
  border: 1px solid var(--border-subtle);
}
.profile-att-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease, background 0.4s ease;
}
.profile-att-session-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  min-width: 95px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  user-select: none;
}
.profile-att-session-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.profile-att-session-pill.present {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.35);
}
.profile-att-session-pill.excused {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
}
.profile-att-session-pill.absent {
  background: rgba(225, 29, 72, 0.12);
  color: #f43f5e;
  border-color: rgba(225, 29, 72, 0.35);
}
.profile-att-session-pill.upcoming {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px dashed var(--border-medium);
}
.profile-att-session-pill.upcoming:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent-blue);
  border-color: rgba(59, 130, 246, 0.3);
}

.att-pill-upcoming {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border: 1px dashed var(--border-medium) !important;
}
.att-pill-upcoming:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
}

#studentProfile360Modal {
  z-index: 200050 !important;
}

/* Student Profile Quick Search & Switcher Bar */
.profile-student-search-wrap,
.profile-cluster-search-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-nav-cluster {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 9px !important;
  padding: 3px 6px !important;
  position: relative !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.profile-cluster-search-box,
.profile-student-search-box {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 7px;
  padding: 2px 7px;
  min-width: 175px;
  max-width: 290px;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.profile-cluster-search-box:focus-within,
.profile-student-search-box:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
  min-width: 250px;
}

.profile-cluster-search-input,
.profile-student-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.77rem;
  color: var(--text-primary);
  width: 100%;
  padding: 2px 0;
  font-family: inherit;
}

.profile-cluster-search-input::placeholder,
.profile-student-search-input::placeholder {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.profile-cluster-pos-badge {
  font-size: 0.70rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-cluster-pos-badge:hover {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.cluster-sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.70rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  white-space: nowrap;
}
.cluster-sync-indicator:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.profile-cluster-search-dropdown,
.profile-student-search-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 410px;
  max-width: 92vw;
  max-height: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow-y: auto;
  z-index: 12005;
  scrollbar-width: thin;
  animation: modalScaleUp 0.15s ease-out;
}

.profile-search-results-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.profile-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}
.profile-search-item:hover,
.profile-search-item.highlighted {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}
.profile-search-item.current-active {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}
.profile-search-direct-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.08);
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  cursor: pointer;
  transition: background 0.15s;
}
.profile-search-direct-action:hover,
.profile-search-direct-action.highlighted {
  background: rgba(59, 130, 246, 0.16);
}


@keyframes rowHighlightGlow {
  0% {
    background-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
  }
  50% {
    background-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.35);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.row-highlight-pulse {
  animation: rowHighlightGlow 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  outline: 2px solid var(--accent-emerald) !important;
  outline-offset: -2px;
}

.profile-att-course-card.unstarted {
  background: rgba(15, 23, 42, 0.3);
  border-color: rgba(148, 163, 184, 0.2);
}

.profile-att-session-pill.upcoming {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border: 1px dashed var(--border-medium) !important;
}

.profile-att-session-pill.upcoming:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: var(--accent-blue) !important;
  color: var(--accent-blue) !important;
}

/* ================================================================
   Official Academic Documents, Statement of Enrollment & Student Card
   ================================================================ */
.academic-doc-sheet {
  background: #ffffff;
  color: #1e293b;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 36px 44px;
  position: relative;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  font-family: 'Cairo', sans-serif;
  max-width: 920px;
  margin: 0 auto;
}
.academic-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.academic-doc-seal {
  position: absolute;
  bottom: 28px;
  left: 45px;
  width: 120px;
  height: 120px;
  border: 3px double #059669;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #059669;
  font-weight: 900;
  font-size: 0.74rem;
  text-align: center;
  transform: rotate(-10deg);
  opacity: 0.9;
  pointer-events: none;
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
}
.academic-student-card {
  width: 440px;
  min-height: 255px;
  border-radius: 16px;
  background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%);
  color: #ffffff;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.18);
  margin: 0 auto;
  box-sizing: border-box;
}
.academic-student-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.academic-student-card::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
@media print {
  body * {
    visibility: hidden;
  }
  .academic-doc-sheet, .academic-doc-sheet * {
    visibility: visible;
  }
  .academic-doc-sheet {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 20mm;
    border: none;
    box-shadow: none;
  }
}

/* ================================================================
   ENTERPRISE HIGH-DENSITY, COMMAND PALETTE & COLLAPSIBLE RAIL SYSTEM
   ================================================================ */

/* --- 1. Collapsible Smart Rail (Mini-Dock) --- */
.app-nav-sidebar {
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-nav-sidebar.collapsed {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 6px 4px !important;
}

.app-nav-sidebar.collapsed .nav-rail-label,
.app-nav-sidebar.collapsed .nav-rail-group-name,
.app-nav-sidebar.collapsed .nav-rail-group-meta,
.app-nav-sidebar.collapsed .dash-pulse-dot,
.app-nav-sidebar.collapsed .nav-rail-group-caret {
  display: none !important;
}

.app-nav-sidebar.collapsed .nav-rail-dash-primary,
.app-nav-sidebar.collapsed .nav-rail-item,
.app-nav-sidebar.collapsed .nav-rail-group-header {
  justify-content: center !important;
  padding: 0 !important;
  width: 48px !important;
  height: 31px !important;
  margin: 0 auto 3px auto !important;
  border-radius: 6px !important;
}

.app-nav-sidebar.collapsed .nav-rail-icon,
.app-nav-sidebar.collapsed .nav-rail-group-icon {
  margin: 0 auto !important;
  font-size: 1.25rem !important;
}

.app-nav-sidebar.collapsed .nav-rail-group-content {
  padding: 0 !important;
}

/* Sidebar Toggle Collapse Button */
.sidebar-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sidebar-collapse-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* --- 2. Global Command Palette (Ctrl + K) --- */
.top-cmd-palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  height: 32px;
  font-family: inherit;
  user-select: none;
}

.top-cmd-palette-btn:hover {
  background: var(--bg-card);
  border-color: var(--accent-emerald);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.top-cmd-palette-btn kbd {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  z-index: 350000 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: cmdBackdropIn 0.15s ease;
}

@keyframes cmdBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cmd-palette-card {
  width: 100%;
  max-width: 620px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cmdSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cmdSlideDown {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cmd-palette-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.cmd-search-icon {
  font-size: 1.15rem;
  opacity: 0.8;
}

.cmd-palette-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  direction: rtl;
}

.cmd-palette-input::placeholder {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.88rem;
}

.cmd-esc-badge {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
}

.cmd-palette-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmd-group-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: 6px 10px 2px 10px;
  letter-spacing: 0.5px;
}

.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
  font-size: 0.84rem;
  color: var(--text-primary);
  border: 1px solid transparent;
}

.cmd-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmd-item-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
}

.cmd-item-title {
  font-weight: 700;
}

.cmd-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-right: 6px;
}

.cmd-item-action {
  font-size: 0.7rem;
  color: var(--accent-emerald);
  font-weight: 800;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.cmd-item:hover, .cmd-item.active {
  background: var(--accent-emerald-light);
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
}

.cmd-palette-footer {
  padding: 8px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.70rem;
  color: var(--text-muted);
}

.cmd-tip span {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: 800;
  color: var(--text-secondary);
}

/* --- 3. Compact High-Density Table Mode --- */
.table-density-compact th {
  padding: 6px 10px !important;
  font-size: 0.74rem !important;
}

.table-density-compact td {
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  height: 34px !important;
}

.row-actions-hover {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

tr:hover .row-actions-hover {
  opacity: 1;
}

tr.row-keyboard-active {
  background: rgba(37, 99, 235, 0.08) !important;
  outline: 1.5px solid var(--accent-blue);
}

/* --- 4. Segmented Control Filter Tabs (Ultra-Crisp Horizontal Tabs) --- */
.filter-tabs {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-secondary) !important;
  padding: 3px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-subtle) !important;
  gap: 2px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.filter-tab {
  background: transparent !important;
  border: none !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}

.filter-tab:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.45) !important;
}

.filter-tab.active {
  background: var(--bg-card) !important;
  color: var(--accent-emerald) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 800 !important;
}

[data-theme="dark"] .filter-tabs {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .filter-tab:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .filter-tab.active {
  background: #0f172a !important;
  color: #34d399 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* --- 5. Student Profile Attendance Direct Edit Modal --- */
.att-edit-modal-card {
  width: 100%;
  max-width: 680px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.att-session-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}

.att-session-edit-row:hover {
  background: var(--bg-secondary);
}

.att-state-toggle-group {
  display: inline-flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.att-state-toggle-btn {
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.att-state-toggle-btn.active-present {
  background: var(--accent-emerald);
  color: #ffffff;
}

.att-state-toggle-btn.active-absent {
  background: var(--accent-rose);
  color: #ffffff;
}

.att-state-toggle-btn.active-excused {
  background: var(--accent-amber);
  color: #ffffff;
}

/* ================= 6. Student Official Documents & Receipts Showcase ================= */
.doc-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.doc-showcase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.doc-showcase-card:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.doc-thumb-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  cursor: pointer;
}

.doc-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.doc-thumb-wrap:hover .doc-thumb-img {
  transform: scale(1.05);
}

.doc-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  gap: 6px;
}

.doc-thumb-wrap:hover .doc-thumb-overlay {
  opacity: 1;
}

.receipt-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.receipt-showcase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s ease;
}

.receipt-showcase-card:hover {
  border-color: var(--accent-emerald);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.1);
  transform: translateY(-2px);
}

.fawaterak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.bank-transfer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   📱 JADEER SMART ACADEMY - ENTERPRISE MOBILE RESPONSIVENESS & APK READINESS
   Supports viewports 320px to 768px, tablets, touch interactions & safe areas
   ========================================================================== */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Base Mobile & Touch Reset */
html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior-y: contain;
}

/* Sidebar Mobile Backdrop (Blur + Frosted Glass) */
.sidebar-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  pointer-events: none;
}

.sidebar-mobile-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile Back To Queue Button in Grader Viewer */
.mobile-back-to-queue-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mobile-back-to-queue-btn:active {
  transform: scale(0.96);
  background: var(--bg-active);
}

/* ==========================================================================
   LAPTOPS & COMPACT DESKTOPS (<= 1400px or <= 820px height)
   ========================================================================== */
@media screen and (max-width: 1400px), screen and (max-height: 820px) {
  :root {
    --header-height: 38px;
    --sidebar-width: 168px;
    --nav-group-header-height: 26px;
    --nav-item-height: 23px;
    --nav-box-height: clamp(60px, 15vh, 110px);
    --input-height: 30px;
    --input-height-sm: 26px;
  }

  .brand-logo-img {
    height: 27px;
  }

  .brand-title h1 {
    font-size: 0.86rem;
  }

  .brand-title span {
    font-size: 0.62rem;
  }

  .dash-stage-wrapper {
    padding: 8px 10px 24px 10px;
    gap: 8px;
  }

  .ans-workspace-stage {
    padding: 5px 10px;
    gap: 5px;
  }

  .ans-header-card {
    padding: 5px 10px;
    margin-bottom: 5px;
  }

  .ans-main-title {
    font-size: 0.84rem !important;
  }

  .ans-sub-title {
    font-size: 0.67rem !important;
  }

  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 10px;
  }

  .ans-pro-table th {
    padding: 3px 6px;
    font-size: 0.72rem;
    height: 26px;
  }

  .ans-pro-table td {
    padding: 2px 6px;
    font-size: 0.73rem;
    height: 28px;
  }

  .btn-action-compact {
    padding: 2px 7px;
    font-size: 0.70rem;
  }

  .dash-kpi-card {
    padding: 5px 8px;
  }

  .dash-kpi-num {
    font-size: 1.02rem;
  }

  .queue-panel {
    width: 285px;
    min-width: 270px;
  }

  .grading-dock {
    height: 38px !important;
    padding: 2px 10px !important;
  }

  .score-input-main {
    height: 28px !important;
    width: 48px !important;
    font-size: 1.05rem !important;
  }

  .filter-tabs {
    height: 30px !important;
    max-height: 30px !important;
  }

  .filter-tab {
    height: 24px !important;
    padding: 0 9px !important;
    font-size: 0.74rem !important;
  }
}

/* ==========================================================================
   BROWSER ZOOM & SHORT VIEWPORT ADAPTATION (when zoomed 125%-175% or short screen)
   ========================================================================== */
@media screen and (max-height: 640px) {
  :root {
    --header-height: 35px;
    --nav-group-header-height: 25px;
    --nav-item-height: 22px;
    --nav-box-height: clamp(55px, 16vh, 85px);
  }
  .app-nav-sidebar {
    padding-bottom: 60px !important;
  }
}

@media screen and (max-height: 520px) {
  :root {
    --header-height: 32px;
    --nav-group-header-height: 23px;
    --nav-item-height: 20px;
    --nav-box-height: clamp(45px, 14vh, 70px);
  }
  .app-nav-sidebar {
    padding-bottom: 70px !important;
  }
}

/* ==========================================================================
   TABLETS & 2-IN-1 LAPTOPS (<= 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  :root {
    --sidebar-width: 180px;
  }

  .top-cmd-palette-btn kbd {
    display: none !important;
  }

  .top-cmd-palette-btn .cmd-text {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .courses-toolbar,
  .ans-table-toolbar {
    gap: 6px;
  }

  .grader-workspace-body .queue-panel {
    width: 280px;
  }
}

/* ==========================================================================
   TABLET & MOBILE SCREENS (<= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* Prevent Horizontal Page Blowout */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .app-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
  }

  /* 1. Executive Top Navbar for Mobile */
  .top-header {
    height: auto !important;
    min-height: 52px;
    padding: calc(6px + var(--sat)) 10px 6px 10px !important;
    gap: 6px !important;
    position: sticky;
    top: 0;
    z-index: 900;
  }

  .brand-section {
    gap: 6px !important;
    flex-shrink: 0;
  }

  .brand-logo-img {
    width: 28px !important;
    height: 28px !important;
  }

  .brand-divider {
    display: none !important;
  }

  .brand-title {
    display: flex;
    flex-direction: column;
  }

  .brand-title h1 {
    font-size: 0.88rem !important;
    white-space: nowrap;
  }

  .brand-title span {
    display: none !important;
  }

  /* Prominent Hamburger / Drawer Toggle */
  .sidebar-collapse-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 1.15rem !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-main) !important;
    cursor: pointer;
  }

  .sidebar-collapse-toggle:active {
    transform: scale(0.94);
  }

  /* Command Palette Button: Icon only on small screens */
  .top-cmd-palette-btn {
    padding: 5px 8px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .top-cmd-palette-btn .cmd-text,
  .top-cmd-palette-btn .cmd-kbd {
    display: none !important;
  }

  /* Top Direct Buttons */
  .notif-top-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .user-menu-trigger {
    padding: 4px 8px !important;
    height: 34px !important;
  }

  .user-menu-label {
    display: none;
  }

  /* 2. Master Navigation Rail -> Off-Canvas Slide-In Drawer */
  .app-body-layout {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .app-nav-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 290px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10000 !important;
    transform: translateX(110%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.28) !important;
    background: var(--bg-card) !important;
    border-left: 1px solid var(--border-medium) !important;
    padding-top: calc(14px + var(--sat)) !important;
    padding-bottom: calc(20px + var(--sab)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .app-nav-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Ensure labels are visible in mobile drawer even if collapsed was saved in localStorage */
  .app-nav-sidebar.collapsed {
    width: 290px !important;
    max-width: 86vw !important;
  }

  .app-nav-sidebar.collapsed .nav-rail-label,
  .app-nav-sidebar.collapsed .nav-rail-group-name,
  .app-nav-sidebar.collapsed .nav-rail-group-meta,
  .app-nav-sidebar.collapsed .dash-pulse-dot {
    display: inline !important;
  }

  .app-nav-sidebar.collapsed .nav-rail-group-content {
    display: none;
  }

  .app-nav-sidebar.collapsed .nav-rail-group.open .nav-rail-group-content {
    display: flex !important;
  }

  /* 3. Main Stage Container */
  .main-stage {
    width: 100% !important;
    max-width: 100vw !important;
    margin-right: 0 !important;
    padding: 10px !important;
    padding-bottom: calc(24px + var(--sab)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .view-stage {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* 4. Speed Grader Responsive Overhaul */
  .grader-toolbar-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    overflow-x: visible !important;
    white-space: normal !important;
    background: var(--bg-card) !important;
  }

  .grader-toolbar-bar > div {
    flex-wrap: wrap !important;
  }

  .grader-toolbar-bar select {
    max-width: 150px !important;
  }

  .metrics-ribbon {
    width: 100% !important;
    justify-content: space-between !important;
    margin-right: 0 !important;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-subtle);
  }

  /* Workspace Body Dual Screen Switcher */
  .grader-workspace-body {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-height: calc(100vh - 160px) !important;
    width: 100% !important;
  }

  /* In default mobile state: Show Student Queue, Hide Document Viewer */
  .grader-workspace-body .queue-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    min-height: 480px !important;
  }

  .grader-workspace-body .viewer-panel {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* When Student is selected: Show Document Viewer & Grading Dock, Hide Queue */
  .grader-workspace-body.mobile-show-viewer .queue-panel {
    display: none !important;
  }

  .grader-workspace-body.mobile-show-viewer .viewer-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 170px) !important;
  }

  .viewer-top-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .viewer-actions {
    margin-right: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .document-canvas {
    min-height: 380px !important;
    max-height: 55vh !important;
  }

  /* Grading Dock Mobile Optimization */
  .grading-dock {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: var(--bg-card) !important;
    border-top: 2px solid var(--border-medium) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14) !important;
    padding: 10px !important;
    padding-bottom: calc(12px + var(--sab)) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .grading-dock .score-section {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .quick-marks-ribbon,
  .quick-chips-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px;
    width: 100% !important;
  }

  .dock-actions-row,
  .grading-action-buttons {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .dock-actions-row button,
  .grading-action-buttons button {
    flex: 1 !important;
    height: 40px !important;
    font-size: 0.85rem !important;
  }

  /* 5. Dashboard Bento & KPI Responsive Grids */
  .dash-kpi-grid,
  .dash-metrics-grid,
  .dash-bento-grid,
  .stats-grid-pro,
  .kpi-row-compact,
  .kpi-summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dash-stage-wrapper {
    gap: 12px !important;
  }

  .card,
  .dash-card,
  .bento-card,
  .glass-card,
  .pro-card {
    padding: 12px 14px !important;
    border-radius: var(--radius-md) !important;
  }

  /* 6. Form Grids & Modal Dialogs */
  .form-row,
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pro-modal-box,
  .modal-content,
  .modal-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 8px auto !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    padding: 14px !important;
    border-radius: var(--radius-lg) !important;
  }

  /* 7. Data Tables Momentum Scrolling */
  .table-responsive,
  .table-wrapper,
  .data-table-container,
  .gradebook-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px;
  }

  .data-table-pro,
  .gradebook-table,
  .styled-table {
    min-width: 540px !important;
  }

  /* 8. Touch Friendliness */
  button,
  .btn,
  .btn-action-sm,
  .btn-action-compact,
  .nav-rail-item,
  .nav-rail-group-header {
    min-height: 38px;
    touch-action: manipulation;
  }

  /* Command Palette on Mobile */
  .cmd-palette-box {
    width: 94vw !important;
    max-width: 94vw !important;
    margin-top: 15vh !important;
  }
}

/* ==========================================================================
   EXTRA SMALL SCREENS (Phones <= 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
  .dash-kpi-grid,
  .dash-metrics-grid,
  .stats-grid-pro {
    grid-template-columns: 1fr !important;
  }

  .top-header {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .brand-title h1 {
    font-size: 0.82rem !important;
  }

  .main-stage {
    padding: 6px !important;
  }

  .card,
  .dash-card,
  .bento-card {
    padding: 10px 12px !important;
  }

  .pro-modal-box {
    padding: 12px !important;
  }
}

/* ==========================================================================
   OFFICIAL JADEER PLATFORM FORM & BULK ENROLL MODAL SYSTEM
   مطابق 100% لتصميم لوحة تحكم أكاديمية جدير الرسمية
   ========================================================================== */

/* Platform Buttons */
.btn-primary,
button.btn.btn-primary {
  background-color: #005844 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #005844 !important;
  border-radius: 6px !important;
  padding: 8px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 88, 68, 0.25) !important;
}

.btn-primary:hover,
button.btn.btn-primary:hover {
  background-color: #004334 !important;
  border-color: #004334 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 88, 68, 0.35) !important;
  transform: translateY(-1px);
}

.btn-cancel-pink,
button.btn-cancel-pink {
  background-color: #fca5a5 !important;
  color: #ffffff !important;
  border: 1px solid #f87171 !important;
  border-radius: 6px !important;
  padding: 8px 22px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-cancel-pink:hover {
  background-color: #f87171 !important;
  color: #ffffff !important;
}

/* Bulk Modal Dynamic Cards */
.bulk-course-row-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
  position: relative;
  transition: all 0.2s ease;
}

.bulk-course-row-card:hover {
  border-color: #005844;
}

.bulk-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.btn-remove-course-row {
  background: transparent;
  color: var(--accent-rose);
  border: 1px solid var(--accent-rose-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-remove-course-row:hover {
  background: var(--accent-rose);
  color: #fff;
}

.btn-add-another-course {
  background-color: #005844 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.2s !important;
}

.btn-add-another-course:hover {
  background-color: #004334 !important;
}

/* Student Edit Form Sections matching Platform Images 2 & 3 */
.jadeer-form-section-title {
  color: #005844;
  font-size: 1rem;
  font-weight: 800;
  margin: 18px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(0, 88, 68, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .jadeer-form-section-title {
  color: #34d399;
  border-bottom-color: rgba(52, 211, 153, 0.2);
}

.jadeer-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media screen and (max-width: 768px) {
  .jadeer-form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.jadeer-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jadeer-input-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.jadeer-input-group label span.req {
  color: #e11d48;
}

.jadeer-input-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.jadeer-input-field:focus {
  border-color: #005844;
  box-shadow: 0 0 0 2px rgba(0, 88, 68, 0.18);
}

/* Phone input with dial code badge */
.phone-field-wrapper {
  display: flex;
  align-items: stretch;
  direction: ltr;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
}

.phone-field-wrapper .dial-code-prefix {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-medium);
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

.phone-field-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.88rem;
  direction: ltr;
}

/* Document Upload Controls matching Platform Image 2 */
.doc-upload-box {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-upload-box .doc-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.doc-file-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-file-input {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.doc-file-input::file-selector-button {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  padding: 5px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 8px;
}

.doc-file-input::file-selector-button:hover {
  background: #005844;
  color: #fff;
  border-color: #005844;
}

.doc-existing-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 88, 68, 0.1);
  color: #005844;
  border: 1px solid rgba(0, 88, 68, 0.25);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

[data-theme="dark"] .doc-existing-preview-badge {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

.doc-existing-preview-badge:hover {
  background: #005844;
  color: #fff;
}

/* Upload Progress Indicator */
.upload-live-progress {
  width: 100%;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.upload-live-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #005844, #10b981);
  width: 0%;
  transition: width 0.2s ease;
}

/* ================================================================
   Teacher & Student Profile 360° Studio - Shared Enterprise Aesthetics
   ================================================================ */
.profile-hub-dialog {
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.45);
}

.profile-tab-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-tab-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.profile-tab-btn.active {
  background: var(--bg-card);
  color: var(--accent-blue);
  border-color: var(--border-medium);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .profile-tab-btn.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
}

.profile-cluster-search-box:focus-within {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.profile-search-item {
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-bottom: 2px;
}

.profile-search-item:hover,
.profile-search-item.highlighted {
  background: var(--bg-secondary);
}

.profile-search-item.current-active {
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.3);
}

/* ================================================================
   Executive SWOT & Strategic Transformation Studio Styles 2026
   ================================================================ */
.swot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 960px) {
  .swot-grid {
    grid-template-columns: 1fr;
  }
}
.swot-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.swot-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 4px;
}
.swot-card.strengths::before { background: linear-gradient(90deg, #10b981, #059669); }
.swot-card.weaknesses::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
.swot-card.opportunities::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.swot-card.threats::before { background: linear-gradient(90deg, #8b5cf6, #6366f1); }

.swot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.swot-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.swot-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.swot-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.15s ease;
}
.swot-item:hover {
  border-color: var(--border-medium);
  transform: translateY(-1px);
}
.swot-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.swot-item-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-primary);
}
.swot-badge-resolved {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}
.swot-badge-progress {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}
.swot-badge-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}
.swot-item-desc {
  font-size: 0.77rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.swot-item-action {
  font-size: 0.73rem;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.08);
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: 2px;
  display: inline-block;
  font-weight: 700;
}

.swot-vitals-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 960px) {
  .swot-vitals-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .swot-vitals-strip {
    grid-template-columns: 1fr;
  }
}
.swot-vital-box {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.swot-vital-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
}
.swot-vital-box.vital-red::before { background: #ef4444; }
.swot-vital-box.vital-green::before { background: #10b981; }
.swot-vital-box.vital-amber::before { background: #f59e0b; }
.swot-vital-box.vital-purple::before { background: #8b5cf6; }

.swot-vital-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 700;
}
.swot-vital-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}
.swot-vital-sub {
  font-size: 0.70rem;
  color: var(--text-secondary);
}

.swot-pipeline-steps {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 0;
}
.swot-pipeline-step {
  flex: 1;
  min-width: 155px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.swot-pipeline-step.bottleneck {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.05);
}
.swot-step-num {
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--text-muted);
}
.swot-step-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}
.swot-step-count {
  font-size: 1.05rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: var(--accent-emerald);
}
.swot-pipeline-step.bottleneck .swot-step-count {
  color: #ef4444;
}

@media print {
  body * {
    visibility: hidden;
  }
  #dashTabSwot, #dashTabSwot * {
    visibility: visible;
  }
  #dashTabSwot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block !important;
  }
}

/* ================================================================
   Executive Tracks & Diplomas Studio Styles (Matching Real Platform)
   ================================================================ */
.track-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.track-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-emerald);
  box-shadow: var(--shadow-md);
}
.track-cover-frame {
  height: 175px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.track-card:hover .track-cover-img {
  transform: scale(1.03);
}
.track-ornamental-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.track-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.track-title-ar {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}
.track-title-en {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  margin: -4px 0 0 0;
}
.track-desc-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.track-meta-table {
  width: 100%;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.76rem;
}
.track-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.track-meta-lbl {
  color: var(--text-muted);
  font-weight: 600;
}
.track-meta-val {
  color: var(--text-primary);
  font-weight: 700;
}
.track-actions-bar {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border-subtle);
  padding: 10px 16px 14px;
  background: var(--bg-card);
}
.track-studio-box {
  width: 95vw;
  max-width: 1040px;
  height: 88vh;
  max-height: 860px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-medium);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleUp 0.18s ease;
  position: relative;
}

/* ================================================================
   EXAMS CONTROL CENTER - UPGRADED MODULE STYLES
   ================================================================ */

/* Tabs Bar */
.exm-tabs-bar {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 6px;
  box-shadow: var(--shadow-xs);
}

.exm-tab {
  flex: 1;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-align: center;
}

.exm-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.exm-tab.active {
  background: var(--accent-emerald);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}

/* Tab Content */
.exm-tab-content {
  display: none;
}

.exm-tab-content.active {
  display: block;
}

/* Filters Bar */
.exm-filters-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}

.exm-filter-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exm-filter-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.exm-filter-input {
  height: 32px;
  min-width: 180px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.80rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.exm-filter-input:focus {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.exm-filter-select {
  height: 32px;
  min-width: 110px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.exm-results-count {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--accent-emerald);
  background: var(--accent-emerald-light);
  padding: 3px 10px;
  border-radius: 12px;
}

/* Cards Grid */
.exm-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  min-height: 120px;
}

.exm-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-subtle);
}

/* Single Exam Card */
.exm-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.exm-card:hover {
  border-color: var(--accent-emerald);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.12);
  transform: translateY(-2px);
}

.exm-card.disabled {
  opacity: 0.6;
  border-color: var(--border-subtle);
}

.exm-card.disabled:hover {
  transform: none;
  box-shadow: var(--shadow-xs);
}

.exm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 6px;
  gap: 8px;
}

.exm-card-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.exm-card-id {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.exm-card-body {
  padding: 6px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.exm-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.exm-card-meta-row .meta-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.exm-card-meta-row .meta-value {
  font-weight: 700;
  color: var(--text-primary);
}

.exm-card-stats {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.exm-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.exm-stat-chip.emerald {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.exm-stat-chip.amber {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
}

.exm-stat-chip.blue {
  background: var(--accent-blue-light);
  color: var(--accent-blue);
}

.exm-stat-chip.rose {
  background: rgba(244, 63, 94, 0.1);
  color: var(--accent-rose);
}

/* Status Badge */
.exm-status-pill {
  font-size: 0.70rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.exm-status-pill.active {
  background: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.exm-status-pill.inactive {
  background: rgba(244, 63, 94, 0.1);
  color: var(--accent-rose);
}

.exm-status-pill.scheduled {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
}

.exm-status-pill.ended {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

/* Toggle Switch */
.exm-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exm-toggle {
  position: relative;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

.exm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.exm-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border-medium);
  border-radius: 20px;
  transition: all 0.25s ease;
}

.exm-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  top: 2px;
  left: 2px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.exm-toggle input:checked + .exm-toggle-slider {
  background: var(--accent-emerald);
}

.exm-toggle input:checked + .exm-toggle-slider::before {
  transform: translateX(18px);
}

.exm-toggle-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Card Footer / Actions */
.exm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--border-subtle);
  gap: 4px;
}

.exm-card-actions {
  display: flex;
  gap: 4px;
}

.exm-card-btn {
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.exm-card-btn:hover {
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  background: var(--accent-emerald-light);
}

.exm-card-btn.danger:hover {
  border-color: var(--accent-rose);
  color: var(--accent-rose);
  background: rgba(244, 63, 94, 0.08);
}

/* Enrolled Students Table */
.exm-students-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: auto;
  max-height: calc(100vh - 280px);
}

.exm-students-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.80rem;
}

.exm-students-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.exm-students-table th {
  background: var(--bg-secondary);
  font-weight: 800;
  color: var(--text-primary);
  padding: 8px 10px;
  text-align: right;
  border-bottom: 2px solid var(--border-subtle);
  white-space: nowrap;
  font-size: 0.76rem;
}

.exm-students-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.exm-students-table tr:hover td {
  background: var(--bg-secondary);
}

.exm-student-name {
  font-weight: 700;
}

.exm-student-email {
  font-size: 0.70rem;
  color: var(--text-muted);
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .exm-cards-grid {
    grid-template-columns: 1fr;
  }

  .exm-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .exm-filter-group {
    width: 100%;
  }

  .exm-filter-input,
  .exm-filter-select {
    width: 100%;
  }

  .exm-tabs-bar {
    flex-direction: column;
  }
}

/* Jadeer Platform Exam Edit Modal (Aligned with Platform Screenshot) */
.custom-modal-box.exm-platform-modal {
  width: 900px;
  max-width: 95vw;
  max-height: 92vh;
  background: var(--bg-card);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-medium);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.exm-modal-top-bar {
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exm-modal-breadcrumbs {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.exm-modal-breadcrumbs span {
  color: var(--brand-primary, #6366f1);
  font-weight: 600;
}

.exm-modal-header-pro {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exm-modal-header-pro h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.exm-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.exm-form-col-full {
  grid-column: 1 / -1;
}

.exm-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exm-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.exm-field-label .req {
  color: var(--accent-rose, #ef4444);
}

.exm-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.exm-check-card:hover {
  border-color: var(--brand-primary, #6366f1);
  background: var(--bg-tertiary);
}

.exm-check-card input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #059669;
  cursor: pointer;
}

.exm-check-card-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.exm-check-card-sub {
  font-size: 0.70rem;
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

.exm-groups-chip-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  min-height: 38px;
}

.exm-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.exm-group-chip:hover {
  border-color: #005844;
  color: #005844;
}

.exm-group-chip.active {
  background: #005844 !important;
  color: #ffffff !important;
  border-color: #005844 !important;
  box-shadow: 0 1px 3px rgba(0, 88, 68, 0.25);
}

.exm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

.exm-btn-submit-pro {
  background: #005844 !important;
  color: #ffffff !important;
  border: 1px solid #005844 !important;
  border-radius: 8px !important;
  padding: 8px 24px !important;
  min-height: 38px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 88, 68, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: inherit !important;
}

.exm-btn-submit-pro:hover {
  background: #004334 !important;
  border-color: #004334 !important;
  box-shadow: 0 4px 12px rgba(0, 88, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

.exm-btn-submit-pro:active {
  transform: translateY(1px) scale(0.985) !important;
}

.exm-btn-cancel-pro {
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-primary, #1e293b) !important;
  border: 1px solid var(--border-medium, #cbd5e1) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  min-height: 38px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: inherit !important;
}

.exm-btn-cancel-pro:hover {
  background: var(--bg-secondary, #f8fafc) !important;
  border-color: #005844 !important;
  color: #005844 !important;
  transform: translateY(-1px) !important;
}

.exm-btn-cancel-pro:active {
  transform: translateY(1px) scale(0.985) !important;
}

@media (max-width: 768px) {
  .exm-form-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EXAMS EXECUTIVE HEADER & UNIFIED CONTEXT BAR (CALM & PRO)
   ============================================================ */
.exm-workspace-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exm-executive-header {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.exm-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.exm-title-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exm-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--brand-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  width: fit-content;
}

.exm-main-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

.exm-subtitle {
  font-size: 0.80rem;
  color: var(--text-secondary);
  margin: 0;
}

.exm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Context selector bar */
.exm-context-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.exm-context-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 250px;
}

.exm-context-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin: 0;
}

.exm-context-icon {
  font-size: 1.1rem;
}

.exm-context-select {
  flex: 1;
  height: 38px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0 12px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.exm-context-select:focus {
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.exm-selected-exam-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: var(--radius-md, 8px);
  padding: 4px 8px;
}

.exm-selected-exam-bar .btn-action-compact {
  font-size: 0.78rem;
  padding: 4px 10px;
  height: 30px;
  font-weight: 700;
}

.exm-selected-exam-bar .btn-action-compact.danger {
  color: var(--accent-rose, #ef4444);
  border-color: rgba(239, 68, 68, 0.25);
}

.exm-selected-exam-bar .btn-action-compact.danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

@media (max-width: 900px) {
  .exm-header-top-row {
    flex-direction: column;
    align-items: stretch;
  }
  .exm-context-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .exm-context-group {
    width: 100%;
  }
  .exm-selected-exam-bar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ============================================================
   ULTRA-COMPACT COMMAND STRIP (MAXIMUM CONTENT SPACE REAL-ESTATE)
   ============================================================ */
.exm-compact-topbar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 10px;
}

.exm-topbar-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.exm-topbar-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 900;
  font-size: 0.92rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.exm-brand-icon {
  font-size: 1.15rem;
}

.exm-brand-title {
  letter-spacing: -0.2px;
}

/* Integrated Compact Tabs */
.exm-tabs-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 3px;
}

.exm-tab-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.exm-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.exm-tab-btn.active {
  background: var(--bg-card);
  color: var(--brand-primary, #6366f1);
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.exm-topbar-global-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Row 2: Selectors Ribbon */
.exm-topbar-row-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.exm-select-compact-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}

.exm-compact-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-secondary);
  white-space: nowrap;
  margin: 0;
}

.exm-compact-select {
  flex: 1;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0 10px;
  font-size: 0.80rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}

.exm-compact-select:focus {
  border-color: var(--brand-primary, #6366f1);
}

/* ============================================================
   ENROLLED STUDENTS ROSTER & GRADE PRESENTATION (WOW AESTHETICS)
   ============================================================ */
.exm-roster-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.exm-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.sum-lbl {
  color: var(--text-secondary);
}

.sum-val {
  font-weight: 800;
  color: var(--text-primary);
}

.sum-val.text-emerald { color: var(--accent-emerald, #10b981); }
.sum-val.text-rose { color: var(--accent-rose, #ef4444); }
.sum-val.text-amber { color: var(--accent-amber, #f59e0b); }

/* Student table cell layout */
.exm-student-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: right;
}

.exm-student-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.2));
  color: var(--brand-primary, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.80rem;
  border: 1px solid rgba(99, 102, 241, 0.3);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.exm-student-avatar-sm:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.exm-student-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.exm-student-name-link {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
  display: inline-block;
  line-height: 1.3;
}

.exm-student-name-link:hover {
  color: var(--brand-primary, #6366f1);
  text-decoration: underline;
}

.exm-student-meta-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.exm-student-id-badge {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0 4px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.66rem;
  color: var(--text-secondary);
}

/* Score styling */
.exm-score-cell {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.exm-score-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.exm-score-val.pass {
  color: var(--accent-emerald, #10b981);
}

.exm-score-val.fail {
  color: var(--accent-rose, #ef4444);
}

.exm-score-total {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Percentage with mini bar */
.exm-pct-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 75px;
}

.exm-pct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 5px;
}

.exm-pct-badge.pass {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.exm-pct-badge.fail {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-rose, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.exm-pct-track {
  width: 100%;
  max-width: 70px;
  height: 4px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}

.exm-pct-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.exm-pct-fill.pass {
  background: linear-gradient(90deg, #10b981, #059669);
}

.exm-pct-fill.fail {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Performance Date & Time */
.exm-date-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.exm-date-main {
  font-weight: 700;
  font-size: 0.77rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.exm-time-pill {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Status / Result Chip */
.exm-grade-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}

.exm-grade-status.passed {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.exm-grade-status.failed {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.exm-grade-status.submitted {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.exm-grade-status.notSubmitted {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* Action buttons in rows */
.exm-actions-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.btn-exm-profile {
  background: rgba(99, 102, 241, 0.08);
  color: var(--brand-primary, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-exm-profile:hover {
  background: var(--brand-primary, #6366f1);
  color: #ffffff;
  border-color: var(--brand-primary, #6366f1);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.btn-exm-paper {
  background: rgba(16, 185, 129, 0.08);
  color: var(--accent-emerald, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-exm-paper:hover {
  background: var(--accent-emerald, #10b981);
  color: #ffffff;
  border-color: var(--accent-emerald, #10b981);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

@media (max-width: 900px) {
  .exm-topbar-row-1 {
    flex-direction: column;
    align-items: stretch;
  }
  .exm-tabs-compact {
    overflow-x: auto;
    width: 100%;
  }
  .exm-topbar-row-2 {
    flex-direction: column;
    align-items: stretch;
  }
  .exm-select-compact-wrap {
    width: 100%;
  }
}

/* ================================================================
   ASSIGNMENTS & TASKS STUDIO STYLES
   ================================================================ */
.asgn-tabs-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-subtle);
}
.asgn-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.asgn-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}
.asgn-tab-btn.active {
  background: var(--accent-emerald);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28);
}
.asgn-tab-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.asgn-tab-pane.active {
  display: flex;
}
.asgn-row:hover {
  background: rgba(16, 185, 129, 0.04) !important;
}

/* Ultra-compact Integrated Command Strip for Assignments */
.asgn-single-topbar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.asgn-topbar-start {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.asgn-course-selector-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 8px;
}

.asgn-selector-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.asgn-course-select-input {
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 280px;
  min-width: 170px;
  height: 26px;
  cursor: pointer;
}

.asgn-course-select-input:focus {
  outline: none;
}

.asgn-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Unified Single-Row Toolbar for Tab 1 (Search, Filter, Counter & Micro KPIs) */
.asgn-unified-toolbar {
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.asgn-toolbar-search-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.asgn-counter-badge {
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.asgn-kpis-inline-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.asgn-micro-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 5px);
  padding: 2px 7px;
  font-size: 0.74rem;
  white-space: nowrap;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.asgn-micro-pill strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.84rem;
}

.asgn-micro-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.asgn-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.asgn-mini-bar-wrap {
  width: 36px;
  height: 5px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.asgn-mini-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-emerald), var(--accent-blue));
  transition: width 0.3s ease;
}

/* Fallback KPI Ribbon for Backward Compatibility */
.asgn-kpi-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.78rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
  line-height: 1.4;
}
.asgn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  font-size: 0.77rem;
  line-height: 1.3;
}
.asgn-pill strong {
  font-size: 0.88rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
}

/* Anti-Overlap View Stage & Enterprise Table Specifications */
#assignmentsView.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: var(--bg-app);
}

.ans-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.ans-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.ans-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: right;
  direction: rtl;
}

.ans-table thead tr th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 7px 10px;
  border-bottom: 2px solid var(--border-medium);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.25;
}

.ans-table tbody tr td {
  padding: 6px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.38;
  color: var(--text-primary);
  background: var(--bg-card);
}

.ans-table tbody tr:hover td {
  background: rgba(16, 185, 129, 0.04) !important;
}

.ans-table tbody tr:last-child td {
  border-bottom: none;
}

.ans-table td .form-control-pro,
.ans-table td input[type="text"],
.ans-table td input[type="number"] {
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle, #f8fafc);
  color: var(--text-primary);
  font-size: 0.78rem;
  padding: 0 6px;
  box-sizing: border-box;
}

.ans-table td .form-control-pro:focus,
.ans-table td input:focus {
  border-color: var(--accent-emerald);
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.exm-compact-topbar {
  flex-shrink: 0;
  padding: 5px 10px;
  gap: 4px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.exm-topbar-row-1 {
  padding-bottom: 4px;
  gap: 8px;
}

.exm-topbar-brand {
  gap: 6px;
  font-size: 0.88rem;
}

.exm-topbar-brand span {
  line-height: 1.25;
}

.exm-topbar-brand .exm-brand-title {
  font-size: 0.90rem;
  line-height: 1.25;
  margin-bottom: 1px;
}

/* ================================================================
   HIGH-DENSITY MODULE TUNING (Laptop & Dense Viewport Specifications)
   ================================================================ */
html[data-density="compact"] .course-card-banner,
html[data-density="ultra"] .course-card-banner {
  height: 92px !important;
}

html[data-density="compact"] .course-card-body,
html[data-density="ultra"] .course-card-body {
  padding: 10px 12px !important;
}

html[data-density="compact"] .courses-grid,
html[data-density="ultra"] .courses-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 10px !important;
}

html[data-density="compact"] .dash-kpi-card,
html[data-density="ultra"] .dash-kpi-card {
  padding: 6px 10px !important;
}

html[data-density="compact"] .dash-kpi-num,
html[data-density="ultra"] .dash-kpi-num {
  font-size: 1.10rem !important;
}

html[data-density="compact"] .ans-header-card,
html[data-density="ultra"] .ans-header-card {
  padding: 4px 10px !important;
  margin-bottom: 4px !important;
}

html[data-density="compact"] .ans-table-card,
html[data-density="ultra"] .ans-table-card {
  padding: 4px 8px !important;
}

html[data-density="compact"] .ans-table-toolbar,
html[data-density="ultra"] .ans-table-toolbar {
  padding: 4px 6px !important;
  margin-bottom: 4px !important;
  gap: 6px !important;
}

html[data-density="compact"] .queue-panel,
html[data-density="ultra"] .queue-panel {
  width: 300px !important;
  min-width: 280px !important;
  max-width: 340px !important;
}

html[data-density="compact"] .grading-dock,
html[data-density="ultra"] .grading-dock {
  height: 38px !important;
  padding: 2px 10px !important;
}

html[data-density="compact"] .academic-page-sheet,
html[data-density="ultra"] .academic-page-sheet {
  padding: 20px 26px !important;
}

/* ==========================================================================
   ALL-STUDENTS VIEW: UNIFIED COMPACT TOOLBAR & STUDENT CARDS SPEC
   ========================================================================== */
#allStudentsView .ans-header-card {
  padding: 8px 14px !important;
  margin-bottom: 6px !important;
}

#allStudentsView .st-action-btn {
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 0.81rem !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

#allStudentsView .st-action-btn.btn-emerald {
  background: #005844 !important;
  color: #ffffff !important;
  border: 1px solid #004d3b !important;
}

#allStudentsView .st-action-btn.btn-emerald:hover {
  background: #004434 !important;
  box-shadow: 0 2px 6px rgba(0, 88, 68, 0.25) !important;
}

#allStudentsView .st-action-btn.btn-outline {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-medium) !important;
}

#allStudentsView .st-action-btn.btn-outline:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--accent-emerald) !important;
  color: var(--accent-emerald) !important;
}

#allStudentsView .st-action-btn.btn-danger {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
}

#allStudentsView .st-action-btn.btn-danger:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

#allStudentsView .st-action-btn.btn-warning {
  background: rgba(217, 119, 6, 0.08) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
}

#allStudentsView .st-action-btn.btn-warning:hover {
  background: #d97706 !important;
  color: #ffffff !important;
}

/* Filter Tabs inside allStudentsView */
#allStudentsView .filter-tab {
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
}

/* Segmented View Switcher */
.st-view-segmented {
  display: inline-flex !important;
  background: var(--bg-secondary) !important;
  padding: 2px !important;
  border-radius: 7px !important;
  border: 1px solid var(--border-medium) !important;
  gap: 2px !important;
}

.st-view-btn {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 5px !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
}

.st-view-btn.active {
  background: var(--accent-emerald) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Student Cards Grid (Compact & Pro CRM Density) */
#allStudentsCardsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.st-student-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 9px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.st-student-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(0, 88, 68, 0.35) !important;
}

.st-student-card.card-selected {
  border-color: #005844 !important;
  background: rgba(0, 88, 68, 0.04) !important;
  box-shadow: 0 0 0 1px #005844 !important;
}

.st-student-card.card-suspended {
  opacity: 0.72 !important;
  filter: grayscale(0.25) !important;
}

/* Search Shading & Exact Match Highlights */
.st-student-card.card-exact-match {
  border: 2px solid #059669 !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.05) 100%) !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.28), 0 8px 24px rgba(0, 88, 68, 0.16) !important;
  transform: translateY(-2px);
  position: relative;
}

.st-student-card.card-search-hit {
  border-color: rgba(5, 150, 105, 0.45) !important;
  background: rgba(5, 150, 105, 0.03) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

tr.st-row.row-exact-match {
  background: rgba(5, 150, 105, 0.14) !important;
  border-right: 4px solid #059669 !important;
  font-weight: 700;
}

tr.st-row.row-exact-match td {
  background: rgba(5, 150, 105, 0.08) !important;
}

tr.st-row.row-search-hit {
  background: rgba(5, 150, 105, 0.03) !important;
}

.st-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.st-card-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
}

/* Clickable Profile Photo with Zoom Cursor */
.st-card-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-medium);
  background: #f1f5f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.st-student-card:hover .st-card-avatar {
  border-color: var(--accent-emerald);
}

.st-card-avatar:hover {
  transform: scale(1.08) !important;
  border-color: #005844 !important;
  box-shadow: 0 4px 12px rgba(0, 88, 68, 0.35) !important;
}

.st-card-avatar-fallback {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #005844, #059669);
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 88, 68, 0.25);
  cursor: pointer;
}

.st-card-meta-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 5px 0;
  padding: 5px 7px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.70rem;
}

.st-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding-top: 5px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
}

.st-card-btn {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.st-card-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.st-card-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.05);
}

.st-card-btn.wa {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

.st-card-btn.wa:hover {
  background: rgba(34, 197, 94, 0.12);
}

.st-card-btn.view {
  color: var(--accent-blue);
  border-color: rgba(59, 130, 246, 0.3);
}

.st-card-btn.view:hover {
  background: rgba(59, 130, 246, 0.12);
}

.st-card-btn.edit {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
}

.st-card-btn.edit:hover {
  background: rgba(217, 119, 6, 0.12);
}

.st-card-btn.reset {
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.3);
}

.st-card-btn.reset:hover {
  background: rgba(6, 182, 212, 0.12);
}

.st-card-btn.deact {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.st-card-btn.deact:hover {
  background: rgba(239, 68, 68, 0.12);
}

.st-card-btn.act {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.st-card-btn.act:hover {
  background: rgba(16, 185, 129, 0.12);
}

/* ================= ALL STUDENTS FILTER TABS STRIP ================= */
.filter-tabs {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 88, 68, 0.3) transparent;
}

.filter-tabs::-webkit-scrollbar {
  height: 5px;
}

.filter-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.filter-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 88, 68, 0.25);
  border-radius: 4px;
}

.filter-tab {
  height: 32px;
  padding: 0 10px;
  font-size: 0.80rem;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 700;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.filter-tab:hover:not(.active) {
  background: var(--bg-secondary);
  border-color: rgba(0, 88, 68, 0.4);
}

.filter-tab.active {
  background: var(--accent-emerald) !important;
  color: #ffffff !important;
  border-color: var(--accent-emerald) !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0, 88, 68, 0.25) !important;
}

.filter-tab.active .badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Smart WhatsApp Modal Animation */
#jadeerStudentWhatsAppModal .custom-modal-box {
  animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}







/* ==========================================================================
   SOVEREIGN HOVER FLYOUT POPOVER FOR COLLAPSED SIDEBAR (Image 2 Parity)
   ========================================================================== */
.app-nav-sidebar.collapsed {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  padding: 8px 4px !important;
  overflow: visible !important;
}

.app-nav-sidebar.collapsed .nav-rail-group {
  position: relative !important;
  overflow: visible !important;
  width: 52px !important;
  margin: 0 auto 6px auto !important;
  border-radius: 8px !important;
}

.app-nav-sidebar.collapsed .nav-rail-group-header {
  width: 52px !important;
  height: 40px !important;
  min-height: 40px !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

.app-nav-sidebar.collapsed .nav-rail-group-icon {
  font-size: 1.4rem !important;
  margin: 0 auto !important;
}

.app-nav-sidebar.collapsed .nav-rail-group-name,
.app-nav-sidebar.collapsed .nav-rail-group-meta,
.app-nav-sidebar.collapsed .nav-rail-group-caret {
  display: none !important;
}

/* Floating Flyout Popover on Hover */
.app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content {
  display: none !important;
  position: fixed !important;
  right: 76px !important;
  width: 210px !important;
  height: auto !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-medium, #cbd5e1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
  z-index: 99999 !important;
  flex-direction: column !important;
  gap: 3px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(10px) !important;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover Reveal Trigger */
.app-nav-sidebar.collapsed .nav-rail-group:hover .nav-rail-group-content,
.app-nav-sidebar.collapsed .nav-rail-group.force-hover .nav-rail-group-content {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Sub-items inside the hover popover */
.app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content .nav-rail-item {
  width: 100% !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
  gap: 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--text-primary, #0f172a) !important;
  transition: background 0.12s ease !important;
}

.app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content .nav-rail-item:hover {
  background: rgba(5, 150, 105, 0.08) !important;
  color: var(--accent-emerald, #059669) !important;
}

.app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content .nav-rail-item .nav-rail-label {
  display: inline-block !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content .nav-rail-item .nav-rail-icon {
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Invisible hover bridge to prevent mouse-leave jitter */
.app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
}
html[dir="rtl"] .app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content::before,
body[dir="rtl"] .app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content::before {
  right: -14px;
}
html[dir="ltr"] .app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content::before,
body[dir="ltr"] .app-nav-sidebar.collapsed .nav-rail-group .nav-rail-group-content::before {
  left: -14px;
}