:root {
            --accent: #036666;
            --bg: #f3f4f6;
            --card: #ffffff;
            --border: #e5e7eb;
            --text-main: #1f2937;
            --text-muted: #6b7280;
        }

        body { background: var(--bg); font-family: 'Cairo', sans-serif; margin: 0; padding: 15px; color: var(--text-main); }
        
        .dashboard-grid {
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 20px;
        }

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

        /* Sidebar Saisie */
        .sidebar-card {
            background: var(--card); border-radius: 12px; padding: 20px;
            border: 1px solid var(--border); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            height: fit-content; position: sticky; top: 15px;
        }

        .form-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; color: var(--accent); border-bottom: 2px solid var(--bg); padding-bottom: 10px; }

        .field { margin-bottom: 15px; }
        .field label { display: block; font-size: 0.85rem; margin-bottom: 5px; color: var(--text-muted); }
        .field input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; }

        /* Boutons Actions */
        .btn-submit { width: 100%; padding: 12px; background: #1e7e34; color: white; font-family: 'Cairo'; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-bottom: 15px; }
        .tools { display: flex; gap: 10px; justify-content: center; }
        .t-excel { background: #198754; }
        .t-print { background: var(--accent); }
        .t-video { background: #d63384; }

        /* Content Area */
        .main-card { background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .top-bar { padding: 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #f9fafb; }
        .search-box { position: relative; width: 300px; }
        .search-box i { position: absolute; right: 10px; top: 12px; color: var(--text-muted); }
        .search-box input { width: 100%; padding: 10px 35px 10px 10px; border-radius: 8px; border: 1px solid var(--border); }

        /* Table */
        .table-responsive { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; text-align: center; }
        th { background: var(--accent); color: white; padding: 15px; cursor: pointer; font-size: 0.9rem; }
        th:hover { opacity: 0.9; }
        td { padding: 12px; border-bottom: 1px solid var(--bg); font-size: 0.95rem; }
        tr:hover { background: #f1f5f9; }

        /* Indicateurs de tri d'origine */
        .sort-icon { margin-left: 5px; }
        .sorting-asc .sort-icon::after { content: " ↑"; }
        .sorting-desc .sort-icon::after { content: " ↓"; }

        /* Radio Design */
        .radio-set { display: flex; gap: 5px; justify-content: center; }
        .radio-set input { display: none; }
        .radio-set label { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.8rem; cursor: pointer; font-weight: 600; background: #f9fafb; }
        .radio-set input:checked + label.l-نج { background: #dcfce7; color: #166534; border-color: #10b981; }
        .radio-set input:checked + label.l-فش { background: #fee2e2; color: #991b1b; border-color: #ef4444; }
        .radio-set input:checked + label.l-مشك { background: #fef3c7; color: #92400e; border-color: #f59e0b; }

        .badge { padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; background: #e5e7eb; }

        /* Mode sombre : ces couleurs sont codees en dur (pas de variable),
           donc invisibles (texte clair sur fond clair) une fois le theme
           sombre applique par force-dark.css. */
        [data-theme="dark"] tr:hover { background: rgba(255, 255, 255, .06); }
        [data-theme="dark"] .radio-set label { background: #101728; color: #f1f5f9; border-color: rgba(255, 255, 255, .15); }
        [data-theme="dark"] .badge { background: #1e293b; color: #f1f5f9; }

        /* Ces 3 etats "coche" gardent un badge pastel clair (fond vert/rouge/
           jaune tres clair) meme en sombre : leur texte doit rester fonce
           (noir) pour rester lisible, sinon il herite du blanc force par
           force-dark.css sur <body>. */
        [data-theme="dark"] .radio-set input:checked + label.l-نج,
        [data-theme="dark"] .radio-set input:checked + label.l-فش,
        [data-theme="dark"] .radio-set input:checked + label.l-مشك {
            color: #111827 !important;
        }