/* ════════════════════════════════════════════════════════════════ GPAO 3DC Pilotes — CSS Adaptatif Global Rend toutes les tables et contenus scrollables sur tous écrans ════════════════════════════════════════════════════════════════ */ /* ── Tables : scroll horizontal sur petits écrans ───────────── */ .table-wrap, .table-container, [class*="table-wrap"], [class*="table-container"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Toutes les tables ont une largeur minimale */ table { min-width: 600px; } /* Tables avec beaucoup de colonnes */ .table-wrap table, .table-container table { min-width: 800px; } /* ── Contenu principal : jamais coupé ───────────────────────── */ .content-area, .main-content, .app, main, [class*="content-area"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* ── Modals : adaptatives ────────────────────────────────────── */ .modal-box, .modal-content, [class*="modal-box"], [id*="modal"] > div { max-width: 98vw !important; overflow-x: auto; } /* ── Grilles responsives ─────────────────────────────────────── */ @media (max-width: 900px) { .grid-2, .grid-3, .grid-4, [class*="grid-2"], [class*="grid-3"] { grid-template-columns: 1fr !important; } .form-row, .form-2, .form-3, [class*="form-row"] { grid-template-columns: 1fr !important; } } /* ── Dashboard KPIs ──────────────────────────────────────────── */ @media (max-width: 768px) { .kpi-strip, .kpi-grid, [class*="kpi-strip"], [class*="kpi-grid"] { grid-template-columns: repeat(2, 1fr) !important; } .cards-grid, [class*="cards-grid"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .kpi-strip, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .cards-grid { grid-template-columns: 1fr !important; } } /* ── Colonnes de table cachées sur petits écrans ─────────────── */ @media (max-width: 768px) { /* Cacher les colonnes moins importantes sur mobile */ .col-hide-mobile { display: none !important; } /* Police plus petite dans les tables sur mobile */ table td, table th { font-size: 12px !important; padding: 8px 10px !important; } } /* ── Scrollbar fine et élégante ──────────────────────────────── */ .table-wrap::-webkit-scrollbar, .content-area::-webkit-scrollbar { height: 5px; width: 5px; } .table-wrap::-webkit-scrollbar-track { background: #f0f2f5; } .table-wrap::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 3px; } .table-wrap::-webkit-scrollbar-thumb:hover { background: #a0adb8; } /* ── Indicateur visuel scroll disponible ─────────────────────── */ .table-wrap { position: relative; } /* ── Images responsives ──────────────────────────────────────── */ img { max-width: 100%; height: auto; } /* ── Inputs et boutons adaptés mobile ────────────────────────── */ @media (max-width: 600px) { input, select, textarea { font-size: 16px !important; /* Empêche le zoom sur iOS */ } .btn, button { min-height: 44px; /* Taille tactile minimum */ } } /* ── Topbar responsive ───────────────────────────────────────── */ @media (max-width: 600px) { .topbar .tb-bc { display: none !important; } } /* ════════════════════════════════════════════════════════════════ [AJOUT 09/07] DESIGN SYSTEM — tokens + MODE SOMBRE (opt-in) Mode CLAIR = inchangé (aucune règle ne s'applique sans data-theme). Mode SOMBRE = actif uniquement si (bascule via le bouton 🌙 injecté par gpao-engagement.js). ════════════════════════════════════════════════════════════════ */ :root{ --3dc-red:#e74c3c; --3dc-red-dark:#c0392b; --d-bg:#0f151d; --d-surface:#172230; --d-surface2:#1d2a3a; --d-text:#e6edf3; --d-muted:#93a4bb; --d-border:#24344a; --d-border2:#2a3f55; } /* ---- MODE SOMBRE (retrofit par sélecteurs communs, !important pour battre les styles inline) ---- */ html[data-theme="dark"] body{ background:var(--d-bg) !important; color:var(--d-text) !important; } html[data-theme="dark"] .app, html[data-theme="dark"] main, html[data-theme="dark"] .content-area, html[data-theme="dark"] .main-content{ background:transparent !important; } /* Surfaces (cartes, sections, modals, panneaux) */ html[data-theme="dark"] .card, html[data-theme="dark"] .section, html[data-theme="dark"] .doc-card, html[data-theme="dark"] .kpi, html[data-theme="dark"] [class*="card"], html[data-theme="dark"] [class*="panel"], html[data-theme="dark"] .modal-box, html[data-theme="dark"] .modal-content, html[data-theme="dark"] [class*="modal-box"]{ background:var(--d-surface) !important; color:var(--d-text) !important; border-color:var(--d-border) !important; } /* Zones internes / champs */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background:var(--d-surface2) !important; color:var(--d-text) !important; border-color:var(--d-border2) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--d-muted) !important; } /* Tables */ html[data-theme="dark"] table{ color:var(--d-text) !important; } html[data-theme="dark"] th{ background:var(--d-surface2) !important; color:var(--d-text) !important; border-color:var(--d-border) !important; } html[data-theme="dark"] td{ border-color:var(--d-border) !important; } html[data-theme="dark"] tr:nth-child(even) td{ background:#ffffff08 !important; } /* Texte secondaire fréquent */ html[data-theme="dark"] .sub, html[data-theme="dark"] .muted, html[data-theme="dark"] .section-sub, html[data-theme="dark"] .card-desc, html[data-theme="dark"] [class*="muted"]{ color:var(--d-muted) !important; } /* La topbar est déjà sombre → on la garde, léger ajustement de bordure */ html[data-theme="dark"] .topbar{ box-shadow:0 2px 12px #0006 !important; } /* Scrollbars sombres */ html[data-theme="dark"] .table-wrap::-webkit-scrollbar-track{ background:var(--d-surface2); } html[data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb{ background:var(--d-border2); }