/* ===================================================================== CMS Simple LHK — Dark Mode Overrides Actif uniquement quand [data-theme="dark"] est présent sur ===================================================================== */ /* ── Alerts (dark readability) ───────────────────────────────────── */ [data-theme="dark"] .alert-success { border-color: hsl(142, 71%, 25%); color: hsl(142, 71%, 75%); } [data-theme="dark"] .alert-error { border-color: hsl(0, 84%, 25%); color: hsl(0, 84%, 75%); } [data-theme="dark"] .alert-warning { border-color: hsl(38, 92%, 25%); color: hsl(38, 92%, 75%); } [data-theme="dark"] .alert-info { border-color: hsl(199, 89%, 25%); color: hsl(199, 89%, 75%); } /* ── Badges (dark legibility) ────────────────────────────────────── */ [data-theme="dark"] .badge-primary { color: hsl(217, 91%, 75%); } [data-theme="dark"] .badge-success { color: hsl(142, 71%, 65%); } [data-theme="dark"] .badge-danger { color: hsl(0, 84%, 70%); } [data-theme="dark"] .badge-warning { color: hsl(38, 92%, 65%); } /* ── Auth / Cards ────────────────────────────────────────────────── */ [data-theme="dark"] .auth-card { box-shadow: 0 20px 40px hsla(0, 0%, 0%, 0.4); border-color: hsl(222, 47%, 18%); } [data-theme="dark"] .auth-card-logo { box-shadow: 0 4px 20px hsla(217, 91%, 60%, 0.4); } /* ── Buttons (subtle glow in dark) ───────────────────────────────── */ [data-theme="dark"] .btn-primary { box-shadow: 0 1px 4px hsla(217, 91%, 60%, 0.3); } [data-theme="dark"] .btn-primary:hover { box-shadow: 0 4px 16px hsla(217, 91%, 60%, 0.4); } [data-theme="dark"] .btn-success { box-shadow: 0 1px 4px hsla(142, 71%, 45%, 0.3); } [data-theme="dark"] .btn-danger { box-shadow: 0 1px 4px hsla(0, 84%, 60%, 0.3); } /* ── Stat Icons (more glow in dark) ──────────────────────────────── */ [data-theme="dark"] .stat-card .stat-icon.icon-primary { background: hsla(217, 91%, 60%, 0.15); box-shadow: 0 0 16px hsla(217, 91%, 60%, 0.1); } [data-theme="dark"] .stat-card .stat-icon.icon-success { background: hsla(142, 71%, 45%, 0.15); box-shadow: 0 0 16px hsla(142, 71%, 45%, 0.1); } [data-theme="dark"] .stat-card .stat-icon.icon-warning { background: hsla(38, 92%, 50%, 0.15); box-shadow: 0 0 16px hsla(38, 92%, 50%, 0.1); } [data-theme="dark"] .stat-card .stat-icon.icon-danger { background: hsla(0, 84%, 60%, 0.15); box-shadow: 0 0 16px hsla(0, 84%, 60%, 0.1); } /* ── Cards (elevated dark) ───────────────────────────────────────── */ [data-theme="dark"] .card { box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.2); } [data-theme="dark"] .card:hover { box-shadow: 0 6px 24px hsla(0, 0%, 0%, 0.3); border-color: hsl(222, 47%, 22%); } [data-theme="dark"] .stat-card:hover { box-shadow: 0 8px 28px hsla(0, 0%, 0%, 0.35); border-color: hsl(222, 47%, 22%); } /* ── Forms (dark inputs) ─────────────────────────────────────────── */ [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-textarea:focus { box-shadow: 0 0 0 3px hsla(217, 91%, 60%, 0.2); } /* ── Admin header (glass dark) ───────────────────────────────────── */ [data-theme="dark"] .admin-header { background: hsla(222, 47%, 11%, 0.88); border-bottom-color: hsl(222, 47%, 16%); } /* ── Sidebar (premium dark) ──────────────────────────────────────── */ [data-theme="dark"] .sidebar { background: hsl(222, 47%, 5%); border-right-color: hsla(0, 0%, 100%, 0.03); } [data-theme="dark"] .sidebar-brand-icon { box-shadow: 0 4px 16px hsla(217, 91%, 60%, 0.4); } /* ── Table rows (dark hover) ─────────────────────────────────────── */ [data-theme="dark"] tbody tr:hover { background: hsla(217, 91%, 60%, 0.04); } /* ── Select arrow (dark) ─────────────────────────────────────────── */ [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }