/* =========================================================== SEND WORK — interface Flat, deux accents, clair par defaut, sombre au besoin. =========================================================== */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --line: #dfe3e8; --line-soft: #eaedf1; --text: #1b2330; --muted: #5d6b7e; --dim: #8b97a8; --accent: #2f6feb; --accent-soft: #e8f0fe; --accent-line: #b9d0fa; --accent-text: #1b4fbf; --ok: #1c8c54; --ok-soft: #e4f5ec; --warn: #b87309; --warn-soft: #fdf3e2; --err: #c8372d; --err-soft: #fdeceb; --info: #2f6feb; --info-soft: #e8f0fe; --r-sm: 5px; --r: 8px; --r-lg: 12px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sidebar: 224px; --shadow: 0 1px 3px rgba(20, 30, 45, .08); --shadow-lg: 0 8px 28px rgba(20, 30, 45, .14); } /* Le theme sombre est pose par l attribut data-theme sur , ecrit par PHP depuis la preference du compte. Pas de detection systeme : le reglage suit le compte d une machine a l autre, ce qui est le comportement attendu pour un outil qu on ouvre au bureau puis chez soi. */ :root[data-theme="dark"] { --bg: #14181f; --surface: #1a1f28; --surface-2: #212733; --line: #2c3442; --line-soft: #242b36; --text: #e7ecf3; --muted: #9aa7b8; --dim: #6d7b8d; --accent: #4d8bff; --accent-soft: #1c2c48; --accent-line: #2d4874; --accent-text: #8fb5ff; --ok: #45b87c; --ok-soft: #16301f; --warn: #d99a35; --warn-soft: #33260f; --err: #e06356; --err-soft: #35191a; --info: #4d8bff; --info-soft: #1c2c48; --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 8px 28px rgba(0, 0, 0, .5); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--bg); } /* ----------------------------------------------------------- structure */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar); position: fixed; inset: 0 auto 0 0; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40; } .logo { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line-soft); } .logo h1 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .logo h1 span { color: var(--accent); } .logo small { display: block; color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; } .nav { flex: 1; padding: var(--sp-3) var(--sp-2); overflow-y: auto; } .nav-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: var(--sp-4) var(--sp-3) var(--sp-2); } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--r-sm); color: var(--muted); cursor: pointer; font-size: 13.5px; user-select: none; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .nav-item .ico { width: 16px; text-align: center; opacity: .85; } .nav-item .badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; } .nav-item .badge.err { background: var(--err); } .sidebar-foot { padding: var(--sp-3); border-top: 1px solid var(--line-soft); } .user-chip { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-sm); } .user-chip:hover { background: var(--surface-2); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .user-chip .who { flex: 1; min-width: 0; cursor: pointer; } .user-chip .who b { display: block; font-size: 13px; font-weight: 600; } .user-chip .who small, .user-chip .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip .who small { color: var(--dim); font-size: 11px; } .main { flex: 1; margin-left: var(--sidebar); min-width: 0; } .topbar { height: 56px; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .topbar h2 { font-size: 16px; font-weight: 650; } .topbar .spacer { flex: 1; } .content { padding: var(--sp-5); max-width: 1180px; } /* ------------------------------------------------------------- elements */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); } .card + .card { margin-top: var(--sp-4); } .card h3 { font-size: 14px; font-weight: 650; margin-bottom: var(--sp-3); } .card .sub { color: var(--muted); font-size: 12.5px; margin-top: -6px; margin-bottom: var(--sp-3); } .grid { display: grid; gap: var(--sp-4); } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); } .stat .n { font-size: 26px; font-weight: 700; line-height: 1.15; } .stat .l { color: var(--muted); font-size: 12px; margin-top: 2px; } .stat.accent .n { color: var(--accent); } .stat.ok .n { color: var(--ok); } .stat.warn .n { color: var(--warn); } .stat.err .n { color: var(--err); } /* boutons */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 550; cursor: pointer; font-family: inherit; line-height: 1.4; } .btn:hover { background: var(--surface-2); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { filter: brightness(1.06); } .btn.danger { color: var(--err); border-color: var(--line); } .btn.danger:hover { background: var(--err-soft); } .btn.sm { padding: 4px 10px; font-size: 12px; } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-2); } /* formulaires */ .field { margin-bottom: var(--sp-4); } .field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text); } .field .help { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; } .field .req { color: var(--err); margin-left: 2px; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=datetime-local], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { resize: vertical; min-height: 90px; line-height: 1.55; } input::placeholder, textarea::placeholder { color: var(--dim); } .checkbox { display: flex; align-items: flex-start; gap: 8px; } .checkbox input { width: auto; margin-top: 3px; } .checkbox label { margin: 0; font-weight: 500; } .row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; } .row > .field { flex: 1; min-width: 170px; margin-bottom: 0; } /* tableaux */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; padding: 8px var(--sp-3); border-bottom: 1px solid var(--line); } td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--line-soft); } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-2); } td .muted { color: var(--muted); font-size: 12px; } /* pastilles d etat */ .tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } .tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.warn { background: var(--warn-soft); color: var(--warn); } .tag.err { background: var(--err-soft); color: var(--err); } .tag.info { background: var(--info-soft); color: var(--info); } .tag.grey { background: var(--surface-2); color: var(--muted); } .risk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; } .risk::before { content: ''; width: 7px; height: 7px; border-radius: 50%; } .risk.none::before { background: var(--ok); } .risk.low::before { background: var(--ok); } .risk.medium::before { background: var(--warn); } .risk.high::before { background: var(--err); } .risk.critical::before { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); } .risk.unknown::before { background: var(--dim); } /* connecteurs */ .connector { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); cursor: pointer; } .connector:hover { border-color: var(--accent-line); box-shadow: var(--shadow); } .connector .head { display: flex; align-items: center; gap: var(--sp-3); } .connector .mark { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; } .connector .name { font-weight: 650; font-size: 13.5px; } .connector .desc { color: var(--muted); font-size: 12.5px; line-height: 1.5; } .connector .foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); } /* messages */ .alert { padding: 10px var(--sp-4); border-radius: var(--r-sm); font-size: 13px; margin-bottom: var(--sp-4); border: 1px solid transparent; line-height: 1.5; } .alert.info { background: var(--info-soft); color: var(--info); border-color: var(--accent-line); } .alert.ok { background: var(--ok-soft); color: var(--ok); } .alert.warn { background: var(--warn-soft); color: var(--warn); } .alert.err { background: var(--err-soft); color: var(--err); } .empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--muted); } .empty .big { font-size: 28px; opacity: .35; margin-bottom: var(--sp-3); } .empty p { font-size: 13px; max-width: 420px; margin: 0 auto var(--sp-4); line-height: 1.6; } /* modale */ .overlay { position: fixed; inset: 0; background: rgba(15, 22, 32, .5); display: grid; place-items: center; z-index: 100; padding: var(--sp-4); } .modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; } .modal.wide { max-width: 860px; } .modal-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); } .modal-head h3 { font-size: 15px; font-weight: 650; flex: 1; } .modal-body { padding: var(--sp-5); overflow-y: auto; flex: 1; } .modal-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-3); justify-content: flex-end; } /* notifications passageres */ .toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); } .toast { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 10px var(--sp-4); box-shadow: var(--shadow-lg); font-size: 13px; max-width: 380px; } .toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--err); } /* journal */ .logview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-3); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 62vh; overflow-y: auto; } .logview .l-ERROR { color: var(--err); } .logview .l-WARN { color: var(--warn); } .logview .l-DEBUG { color: var(--dim); } /* connexion */ .auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-4); } .auth-box { width: 100%; max-width: 380px; } .auth-box .logo { border: none; text-align: center; padding-bottom: var(--sp-5); } .auth-box .logo h1 { font-size: 22px; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); } .auth-switch { text-align: center; margin-top: var(--sp-4); font-size: 13px; color: var(--muted); } /* barre de quota */ .meter { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .meter > span { display: block; height: 100%; background: var(--accent); } .meter.warn > span { background: var(--warn); } .meter.full > span { background: var(--err); } /* ----------------------------------------------------------- responsive */ @media (max-width: 860px) { .sidebar { transform: translateX(-100%); transition: transform .2s; } .sidebar.open { transform: none; } .main { margin-left: 0; } .content { padding: var(--sp-4); } .topbar { padding: 0 var(--sp-4); } } @media (min-width: 861px) { .menu-toggle { display: none; } }