/* ============================================================================ themes.css — Thèmes d'interface utilisateur (couleurs ET placement). Appliqué via l'attribut posé par js/services/theme-service.js (et par un script en ligne dans index.html pour éviter le flash au chargement). Thèmes fournis : classic — défaut (bleu, barre latérale à gauche, fond clair) night — sombre (palette indigo) compact — haute densité (barre étroite, marges serrées) right — barre latérale à DROITE (accents ambre) zen — sauge/crème, contenu centré et aéré Les règles de PLACEMENT sont limitées à ≥769px pour ne pas casser le mobile (le responsive de styles.css garde la main sur petit écran). ============================================================================ */ /* ───────────────────────── CLASSIQUE (défaut) ───────────────────────── */ /* Aucun override : styles.css d'origine s'applique. Bloc présent pour clarté. */ html[data-theme="classic"] { } /* ──────────────────────────────── NUIT ─────────────────────────────── */ html[data-theme="night"] { /* Rampe de gris inversée : la plupart des composants basés sur var(--gray-*) s'adaptent automatiquement (fonds sombres, textes clairs). */ --gray-50: #0b1220; --gray-100: #0f172a; --gray-200: #1e293b; --gray-300: #334155; --gray-400: #475569; --gray-500: #94a3b8; --gray-600: #cbd5e1; --gray-700: #e2e8f0; --gray-800: #f1f5f9; --gray-900: #f8fafc; --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #312e81; --shadow: 0 1px 3px rgba(0,0,0,.55); --shadow-md: 0 4px 10px -1px rgba(0,0,0,.55); --shadow-lg: 0 12px 26px -3px rgba(0,0,0,.65); } html[data-theme="night"] body { background: #0b1220; color: #f1f5f9; } html[data-theme="night"] .main-content { background: #0b1220; } /* La barre latérale était déjà sombre "par design" via le haut de la rampe ; l'inversion la rendrait claire → on la refixe explicitement. */ html[data-theme="night"] .sidebar { background: linear-gradient(180deg,#020617 0%,#0f172a 100%); border-right:1px solid rgba(148,163,184,.12); } html[data-theme="night"] .nav-item { color:#cbd5e1; } html[data-theme="night"] .nav-item:hover { background:rgba(255,255,255,.08); color:#fff; } html[data-theme="night"] .nav-section-title { color:#64748b; } /* Filet de sécurité : surfaces au fond blanc "en dur" dans styles.css. */ html[data-theme="night"] .card, html[data-theme="night"] .stat-card, html[data-theme="night"] .stat-card-mini, html[data-theme="night"] .modal, html[data-theme="night"] .modal-content, html[data-theme="night"] .dropdown-menu, html[data-theme="night"] .form-input, html[data-theme="night"] .form-select, html[data-theme="night"] .form-textarea, html[data-theme="night"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="night"] select, html[data-theme="night"] textarea { background:#0f172a; color:#e2e8f0; border-color:#334155; } html[data-theme="night"] .card-header { background:#111a2e; } html[data-theme="night"] .page-title { color:#f8fafc; } html[data-theme="night"] .app-topbar { color:#e2e8f0; } /* Toasts : utilisent var(--gray-900) (devenu clair par l'inversion) + texte blanc → carré blanc illisible. On refixe un fond sombre avec texte clair. */ html[data-theme="night"] .toast { background:#1e293b; color:#f8fafc; } /* Nuit — Planificateur (scheduler-contacts.css utilise des couleurs en dur). */ html[data-theme="night"] .scheduler-sidebar { background:#0f172a; border:1px solid #1e293b; } html[data-theme="night"] .calendar-header-cell, html[data-theme="night"] .employee-cell { background:#111a2e; color:#e2e8f0; } html[data-theme="night"] .calendar-header-cell.today { background:#1e293b; } html[data-theme="night"] .day-name { color:#94a3b8; } html[data-theme="night"] .day-date { color:#f1f5f9; } html[data-theme="night"] .employee-name, html[data-theme="night"] .employee-role { color:#e2e8f0; } /* Cellules de jour : fond sombre, bordures pointillées plus visibles. */ html[data-theme="night"] .day-cell { background:#0b1424; border-color:#334155; color:#e2e8f0; } html[data-theme="night"] .day-cell.has-assignment { background:#0f172a; } html[data-theme="night"] .day-cell.frozen, html[data-theme="night"] .day-cell.day-frozen-auto { background:#0a0f1c; } /* Bande camions & tuiles latérales : surfaces sombres, on garde les bordures de couleur. */ html[data-theme="night"] .truck-band-cell, html[data-theme="night"] .truck-slot { background:#111a2e; color:#e2e8f0; } html[data-theme="night"] .priority-item { background:#0f172a !important; color:#e2e8f0; } html[data-theme="night"] .priority-name { color:#f1f5f9; } html[data-theme="night"] .priority-client, html[data-theme="night"] .priority-accordion-row, html[data-theme="night"] .pa-label { color:#cbd5e1; } html[data-theme="night"] .priority-accordion { border-top-color:rgba(148,163,184,.2); } /* Cartes d'assignation : conservent leur couleur d'état (chips lumineux sur fond sombre), mais on garantit un texte lisible. */ html[data-theme="night"] .assignment-name { color:#0f172a; } /* Onglets latéraux & recherche. */ html[data-theme="night"] .sidebar-tab { color:#cbd5e1; } html[data-theme="night"] .sidebar-tab.active { color:#fff; } /* ────────────────────────────── COMPACT ────────────────────────────── */ html[data-theme="compact"] { --radius: 5px; --radius-lg: 8px; --primary: #0ea5e9; --primary-hover: #0284c7; --primary-light: #e0f2fe; } html[data-theme="compact"] body { font-size: 13px; } html[data-theme="compact"] .nav-item { padding:.42rem .6rem; font-size:.82rem; gap:.5rem; border-radius:6px; } html[data-theme="compact"] .nav-section { margin-bottom:.75rem; } html[data-theme="compact"] .nav-section-title { padding:.35rem .6rem; } html[data-theme="compact"] .sidebar-logo { padding:.5rem; margin-bottom:.5rem; font-size:1.25rem; } html[data-theme="compact"] .card { margin-bottom:.6rem; } html[data-theme="compact"] .card-body { padding:1rem; } html[data-theme="compact"] .card-header { padding:.6rem 1rem; } html[data-theme="compact"] .page-header { margin-bottom:1rem; } html[data-theme="compact"] .page-title { font-size:1.35rem; } html[data-theme="compact"] .btn { padding:.4rem .7rem; } @media (min-width: 769px) { html[data-theme="compact"] .sidebar { width:210px; padding:.6rem; } html[data-theme="compact"] .main-content { margin-left:210px; padding:1rem 1.25rem; } html[data-theme="compact"] .main-content.sidebar-collapsed { margin-left:64px; } } /* ────────────────────────────── DROITIER ───────────────────────────── */ /* Barre latérale déplacée à droite, palette ambre/terracotta. */ html[data-theme="right"] { --primary: #ea580c; --primary-hover: #c2410c; --primary-light: #ffedd5; } html[data-theme="right"] body { background:#fdf6ef; } html[data-theme="right"] .sidebar { background:linear-gradient(180deg,#7c2d12 0%,#9a3412 100%); } @media (min-width: 769px) { html[data-theme="right"] .sidebar { left:auto; right:0; border-left:1px solid rgba(0,0,0,.06); } html[data-theme="right"] .main-content { margin-left:0; margin-right:260px; } html[data-theme="right"] .main-content.sidebar-collapsed { margin-left:0; margin-right:64px; } /* La cloche de notifications (fixed top-right) passerait sous la barre → on la déplace à gauche. */ html[data-theme="right"] .app-topbar { right:auto; left:1rem; justify-content:flex-start; } } /* ────────────────────────────── MINIMAL ────────────────────────────── */ /* Épuré et monochrome ; barre latérale CLAIRE ; sections du menu repliables (accordéon, piloté par ThemeService.setupNavAccordion). Rien n'est retiré : les fonctions restent, mais le menu se réduit à l'essentiel. */ html[data-theme="minimal"] { --primary: #111827; --primary-hover: #000000; --primary-light: #e5e7eb; --radius: 6px; --radius-lg: 8px; --shadow: none; --shadow-md: 0 1px 2px rgba(0,0,0,.06); --shadow-lg: 0 4px 12px rgba(0,0,0,.08); } html[data-theme="minimal"] body { background:#ffffff; color:#111827; } html[data-theme="minimal"] .main-content { background:#ffffff; } /* Barre latérale claire, plate. */ html[data-theme="minimal"] .sidebar { background:#fafafa; color:#111827; border-right:1px solid #ececec; } html[data-theme="minimal"] .sidebar-logo { color:#111827; } html[data-theme="minimal"] .sidebar-toggle { background:#f0f0f0; color:#111827; } html[data-theme="minimal"] .sidebar-toggle:hover { background:#e5e7eb; } html[data-theme="minimal"] .nav-item { color:#374151; border-radius:6px; } html[data-theme="minimal"] .nav-item:hover { background:#f0f0f0; color:#111827; } html[data-theme="minimal"] .nav-item.active { background:#111827; color:#fff; } html[data-theme="minimal"] button.nav-back-title { color:#6b7280; } html[data-theme="minimal"] button.nav-back-title:hover { background:#f0f0f0; color:#111827; } html[data-theme="minimal"] button.nav-back-title::after { content:none; } /* Sections en accordéon. Le titre devient un en-tête cliquable avec chevron. */ html[data-theme="minimal"] .nav-section { margin-bottom:.35rem; border-top:1px solid #efefef; padding-top:.25rem; } html[data-theme="minimal"] .nav-section:first-of-type { border-top:none; } html[data-theme="minimal"] .nav-section-title { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; color:#6b7280; padding:.55rem 1rem; border-radius:6px; transition:color .15s, background .15s; } html[data-theme="minimal"] .nav-section-title:hover { color:#111827; background:#f2f2f2; } html[data-theme="minimal"] .nav-section-title::after { content:'\25BE'; font-size:.7rem; opacity:.55; transition:transform .2s; } html[data-theme="minimal"] .nav-section.collapsed .nav-section-title::after { transform:rotate(-90deg); } /* !important pour battre les display inline posés par updateNavVisibility. */ html[data-theme="minimal"] .nav-section.collapsed .nav-item { display:none !important; } /* Contenu très épuré. */ html[data-theme="minimal"] .card { border:1px solid #ececec; box-shadow:none; } html[data-theme="minimal"] .card-header { background:#fafafa; } html[data-theme="minimal"] .page-title { font-weight:700; } /* En barre réduite (rail d'icônes), on masque les chevrons d'accordéon. */ html[data-theme="minimal"] .sidebar.collapsed .nav-section-title::after { display:none; } html[data-theme="minimal"] .sidebar.collapsed .nav-section.collapsed .nav-item { display:flex !important; } /* ────────────────────────────── STUDIO ─────────────────────────────── */ /* Reprend l'esthétique du modal d'itinéraire (classes rp-*) et l'applique à toute l'app : dégradés bleu-violet, verre dépoli, grands coins, ombres douces. */ html[data-theme="studio"] { --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #e0e7ff; --radius: 13px; --radius-lg: 18px; --shadow: 0 4px 16px rgba(2,6,23,.10); --shadow-md: 0 8px 22px rgba(2,6,23,.14); --shadow-lg: 0 14px 34px rgba(2,6,23,.20); } html[data-theme="studio"] body { background: linear-gradient(135deg,#eef2ff 0%,#f5f3ff 45%,#ecfeff 100%); background-attachment: fixed; color: #0f172a; } html[data-theme="studio"] .main-content { background: transparent; } /* Barre latérale : dégradé indigo profond ; item actif en dégradé bleu-violet. */ html[data-theme="studio"] .sidebar { background: linear-gradient(180deg,#1e1b4b 0%,#0f172a 100%); } html[data-theme="studio"] .nav-item { border-radius: 13px; } html[data-theme="studio"] .nav-item.active { background: linear-gradient(135deg,#2563eb,#7c3aed); box-shadow: 0 8px 22px rgba(79,70,229,.45); } /* Cartes : verre dépoli, grands coins, ombre profonde et douce. */ html[data-theme="studio"] .card { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: 0 12px 34px rgba(2,6,23,.12); } html[data-theme="studio"] .card-header { background: transparent; border-bottom: 1px solid rgba(2,6,23,.06); } html[data-theme="studio"] .stat-card { border-radius: 18px; box-shadow: 0 8px 22px rgba(2,6,23,.10); } /* Boutons : arrondis, légère élévation au survol ; primaire en dégradé. */ html[data-theme="studio"] .btn { border-radius: 13px; transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s, background .14s; } html[data-theme="studio"] .btn:hover { transform: translateY(-2px); } html[data-theme="studio"] .btn:active { transform: translateY(0) scale(.97); } html[data-theme="studio"] .btn-primary { background: linear-gradient(135deg,#2563eb,#7c3aed); border: none; box-shadow: 0 8px 22px rgba(79,70,229,.4); } html[data-theme="studio"] .btn-primary:hover { background: linear-gradient(135deg,#1d4ed8,#6d28d9); box-shadow: 0 12px 26px rgba(79,70,229,.5); } /* Champs : arrondis et translucides. */ html[data-theme="studio"] .form-input, html[data-theme="studio"] .form-select, html[data-theme="studio"] .form-textarea { border-radius: 12px; background: rgba(255,255,255,.82); border: 1px solid rgba(2,6,23,.1); } /* Chips / badges arrondis. */ html[data-theme="studio"] .badge { border-radius: 999px; } /* Modales : grands coins, ombre profonde. */ html[data-theme="studio"] .modal, html[data-theme="studio"] .modal-content { border-radius: 20px; box-shadow: 0 24px 60px rgba(2,6,23,.35); } /* Titres. */ html[data-theme="studio"] .page-title { font-weight: 800; letter-spacing: -.01em; } /* Studio — composants étendus (tableaux, cartes, planificateur). */ html[data-theme="studio"] .table-container, html[data-theme="studio"] .data-table { border-radius: 16px; overflow: hidden; } html[data-theme="studio"] .table th { background: rgba(99,102,241,.06); } html[data-theme="studio"] .table tbody tr:hover { background: rgba(99,102,241,.05); } html[data-theme="studio"] .dashboard-card, html[data-theme="studio"] .kanban-card, html[data-theme="studio"] .report-card, html[data-theme="studio"] .stat-card-mini { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; box-shadow: 0 8px 22px rgba(2,6,23,.10); transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s; } html[data-theme="studio"] .dashboard-card:hover, html[data-theme="studio"] .kanban-card:hover, html[data-theme="studio"] .report-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,6,23,.16); } /* Planificateur : mêmes surfaces en verre dépoli et grands coins. */ html[data-theme="studio"] .scheduler-sidebar { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: 0 12px 34px rgba(2,6,23,.10); } html[data-theme="studio"] .calendar-header-cell, html[data-theme="studio"] .employee-cell { background: rgba(255,255,255,.7); border-radius: 14px; box-shadow: 0 4px 14px rgba(2,6,23,.06); } html[data-theme="studio"] .calendar-header-cell.today { background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.14)); } html[data-theme="studio"] .day-cell { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(148,163,184,.35); border-radius: 14px; } html[data-theme="studio"] .assignment-card { border-radius: 12px; box-shadow: 0 4px 14px rgba(2,6,23,.10); } html[data-theme="studio"] .priority-item { border-radius: 14px; box-shadow: 0 4px 14px rgba(2,6,23,.08); } /* ══════════════════════════ SÉLECTEUR DE THÈME ═══════════════════════ */ .theme-picker { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; } .theme-card { display:flex; flex-direction:column; gap:6px; text-align:left; padding:12px; border:2px solid #e2e8f0; border-radius:16px; background:#fff; cursor:pointer; transition:border-color .15s, transform .12s, box-shadow .15s; } .theme-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.12); } .theme-card.is-active { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.25); } .theme-card-emoji { font-size:1.25rem; } .theme-card-name { font-weight:800; font-size:14px; color:#0f172a; display:flex; align-items:center; gap:6px; } .theme-card-current { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#6366f1; background:#e0e7ff; border-radius:999px; padding:2px 7px; } .theme-card-desc { font-size:12px; color:#64748b; line-height:1.35; } /* Mini-aperçu de disposition dans chaque carte */ .theme-card-preview { display:flex; height:52px; border-radius:10px; overflow:hidden; border:1px solid #e5e7eb; } .theme-card-preview .tp-side { width:26%; } .theme-card-preview .tp-main { flex:1; padding:6px; display:flex; flex-direction:column; gap:4px; } .theme-card-preview .tp-bar { height:8px; width:60%; border-radius:3px; background:#cbd5e1; } .theme-card-preview .tp-row { height:6px; border-radius:3px; background:#e2e8f0; } .theme-card-preview .tp-row.short { width:70%; } /* Variantes d'aperçu par thème */ .tp-classic .tp-side { background:linear-gradient(180deg,#111827,#1f2937); } .tp-classic { background:#f3f4f6; } .tp-classic .tp-bar { background:#2563eb; } .tp-night .tp-side { background:linear-gradient(180deg,#020617,#0f172a); } .tp-night { background:#0b1220; } .tp-night .tp-bar { background:#818cf8; } .tp-night .tp-row { background:#1e293b; } .tp-compact .tp-side { width:18%; background:linear-gradient(180deg,#0f172a,#1f2937); } .tp-compact { background:#eef2f6; } .tp-compact .tp-bar { background:#0ea5e9; } .tp-compact .tp-main { gap:3px; padding:4px; } .tp-right { flex-direction:row-reverse; background:#fdf6ef; } .tp-right .tp-side { background:linear-gradient(180deg,#7c2d12,#9a3412); } .tp-right .tp-bar { background:#ea580c; } .tp-minimal { background:#ffffff; } .tp-minimal .tp-side { background:#fafafa; border-right:1px solid #ececec; display:flex; flex-direction:column; gap:3px; padding:5px 4px; } .tp-minimal .tp-side::before, .tp-minimal .tp-side::after { content:''; height:4px; border-radius:2px; background:#d4d4d4; } .tp-minimal .tp-side::after { width:70%; } .tp-minimal .tp-bar { background:#111827; } .tp-minimal .tp-row { background:#eceff3; } .tp-studio { background:linear-gradient(135deg,#eef2ff,#f5f3ff,#ecfeff); } .tp-studio .tp-side { background:linear-gradient(180deg,#1e1b4b,#0f172a); } .tp-studio .tp-bar { background:linear-gradient(135deg,#2563eb,#7c3aed); border-radius:5px; } .tp-studio .tp-row { background:rgba(255,255,255,.75); border-radius:5px; }