/* ── DESIGN TOKENS ──
Theme is set on by app.js; the accent is injected
inline (--accent / --accent-rgb) from the user's saved choice. Default = LIGHT +
subdued red, so first paint never flashes dark. */
:root {
--radius: 14px;
/* Accent — subdued red by default (overridden inline per user). */
--accent: #c25750;
--accent-rgb: 194,87,80;
--accent-strong: #a83f39; /* darker stop for gradients */
/* LIGHT palette (default) — white cards on a soft lavender-grey field. */
--bg: #f4f6fb;
--bg2: #ffffff;
--bg3: #eef1f8;
--border: #e6e9f2;
--text: #1b1e2b;
--text2: #6b7186;
--text3: #6b7186;
--shadow: 0 6px 24px rgba(20,20,50,0.06);
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #0f1117;
--bg2: #1a1d2e;
--bg3: #242740;
--border: #2e3250;
--text: #e8eaf6;
--text2: #9196b5;
--text3: #aeb4cb;
--shadow: 0 4px 20px rgba(0,0,0,0.4);
color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
/* ── HEADER ── */
header { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* ── DaVinci-style workspace pages nav ── */
.workspace-nav { display: flex; justify-content: center; gap: 2px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 12px; }
.ws-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.ws-btn:hover { color: var(--text); background: var(--bg3); }
.ws-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.ws-btn svg { width: 16px; height: 16px; }
.page { flex: 1; min-height: 0; }
.page.hidden { display: none; }
#page-production { display: flex; flex-direction: column; }
#page-prospects { overflow: auto; padding: 18px 24px 40px; }
/* ── Ventes (sales) micro-platform ── */
.sales-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.sales-title h2 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sales-sub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.sales-stats { display: flex; gap: 10px; }
.sales-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 16px; text-align: center; min-width: 76px; }
.sales-stat .ss-n { display: block; font-size: 21px; font-weight: 800; line-height: 1.1; }
.sales-stat .ss-l { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); }
.sales-stat.warn .ss-n { color: #f59e0b; }
.sales-stat.ok .ss-n { color: #10b981; }
.sales-head .btn-add-client { margin-left: auto; }
/* Prospection timeline — thin one-line-per-prospect Gantt */
.sales-timeline { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
.pg-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.pg-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pg-body { overflow: auto; max-height: 340px; padding: 8px 0 10px 16px; }
/* thinner than the production gantt rows */
.pg-body .gantt-row.pg-row { height: 22px; margin-bottom: 3px; cursor: pointer; }
.pg-body .gantt-row.pg-row:hover .gantt-row-label { color: var(--text); }
.pg-body .gantt-row.pg-row .gantt-track { height: 16px; }
.pg-body .gantt-row-label { font-size: 11px; }
.pg-row .pg-next { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--text2); background: var(--bg3); border-radius: 6px; padding: 0 5px; }
.pg-row .pg-next.soon { color: #f59e0b; background: rgba(245,158,11,.14); }
.pg-row .pg-next.overdue { color: #ef4444; background: rgba(239,68,68,.14); }
.pg-band { top: 1px; bottom: 1px; padding: 0; justify-content: center; cursor: pointer; border-radius: 4px; }
.pg-band.pg-future { background: rgba(132,204,22,.45); color: #1a2e05; }
.pg-band.pg-soon { background: #f59e0b; color: #1a1d2e; }
.pg-band.pg-overdue { background: #ef4444; color: #fff; }
.pg-band:hover { filter: brightness(1.12); }
.logo { font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
.header-stats { display: flex; gap: 12px; }
.stat-chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 5px; }
.stat-chip span { color: var(--text); font-weight: 700; }
.header-spacer { margin-left: auto; }
.header-user { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text2); }
.btn-add-client { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); border: none; color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: opacity .2s; }
.btn-add-client:hover { opacity: .85; }
.btn-ghost { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all .15s; }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
/* ── LAYOUT ── */
.app-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
/* ── USER-CUSTOMIZABLE LAYOUT: one unified collapse chevron + resizable splitters ── */
/* The SAME collapse control everywhere (sidebar, devis, rappels, timeline). */
.panel-toggle { background: none; border: 0; color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border-radius: 6px; transition: color .15s, background .15s; flex-shrink: 0; }
.panel-toggle:hover { color: var(--text); background: var(--bg3); }
.panel-toggle svg { width: 15px; height: 15px; transition: transform .18s; display: block; }
.panel-toggle.collapsed svg { transform: rotate(-90deg); } /* vertical panels: ▼ → ▶ */
.panel-toggle.h-toggle svg { transform: rotate(90deg); } /* sidebar expanded: ◀ */
.panel-toggle.h-toggle.collapsed svg { transform: rotate(-90deg); } /* sidebar collapsed: ▶ */
.planif-header .panel-toggle { margin-left: auto; }
.rbar-label-text .panel-toggle { vertical-align: middle; }
/* Collapsed bodies (headers/handles stay so the panel can be reopened). */
sidebar.collapsed { display: none; }
#devisStrip.collapsed .planif-chips { display: none; }
.reminder-bar.collapsed { min-height: 0 !important; height: auto !important; }
.reminder-bar.collapsed .rbar-chip, .reminder-bar.collapsed .rbar-empty { display: none; }
.reminder-bar.collapsed .rbar-label { border-right: 0; padding-right: 0; }
/* Resizable splitters — thin bars that highlight on hover/drag (Premiere-like). */
.vt-split { flex-shrink: 0; position: relative; background: transparent; transition: background .12s; z-index: 4; }
.vt-split:hover, .vt-split.dragging { background: var(--accent); }
.vt-split.hidden { display: none; }
.vt-split-v { width: 6px; cursor: col-resize; align-self: stretch; }
.vt-split-h { height: 6px; cursor: row-resize; }
/* The sidebar splitter also hosts the sidebar's collapse chevron (floats just into
the board side so it's never clipped — even when the sidebar is collapsed at x=0). */
.vt-split-v .panel-toggle { position: absolute; top: 12px; left: 2px; width: 22px; height: 22px; background: var(--bg2); border: 1px solid var(--border); padding: 0; z-index: 6; }
.vt-split-v .panel-toggle:hover { border-color: var(--accent); }
/* Task-bar tab being long-pressed + dragged to reorder. */
.ws-dragging { opacity: .7; transform: scale(1.04); cursor: grabbing; z-index: 5; user-select: none; }
/* ── SIDEBAR ── */
sidebar { width: 260px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sidebar-section { padding: 14px 16px 8px; font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; }
.client-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; min-height: 0; }
.client-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; margin-bottom: 2px; }
.client-item:hover { background: var(--bg3); }
.client-item.active { background: var(--bg3); box-shadow: inset 3px 0 0 var(--accent); }
.client-item.paused { opacity: .5; }
.client-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.client-info { flex: 1; min-width: 0; }
.client-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-industry { font-size: 11px; color: var(--text2); }
.client-item { position: relative; }
.client-actions { display: flex; gap: 4px; align-items: center; }
.client-actions button { background: var(--bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.client-actions button:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.client-actions button[title^="Modifier"] { opacity: .72; }
.client-item:hover .client-actions button[title^="Modifier"], .client-actions button[title^="Modifier"]:focus-visible { opacity: 1; }
.ci-menu { opacity: .82; }
.ci-eye.solo-on { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.ci-eye.hidden-on { color: #ef4444 !important; border-color: #ef4444 !important; }
.ci-pause { border-color: #f59e0b !important; color: #f59e0b !important; background: rgba(245,158,11,.14) !important; box-shadow: 0 0 0 2px rgba(245,158,11,.18); }
.ci-pause:hover { background: #f59e0b !important; color: #1a1d2e !important; }
.ci-newshoot { border: 1px solid #fff !important; color: #fff !important; background: transparent !important; margin-left: 4px; }
.ci-newshoot:hover { background: var(--accent) !important; border-color: var(--accent) !important; }
.client-item.client-hidden { opacity: .5; }
.client-item.client-hidden .client-name, .client-item.client-hidden .client-industry { text-decoration: line-through; }
.client-item.client-hidden .client-dot { opacity: .3; }
.client-item.soloed { background: var(--bg3); }
/* ── SIDEBAR SEARCH ── */
.sidebar-search { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; }
.sidebar-search svg { flex-shrink: 0; color: var(--text2); opacity: .5; }
.sidebar-search input { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12px; outline: none; font-family: inherit; transition: border-color .2s; }
.sidebar-search input:focus { border-color: var(--accent); }
.sidebar-search input::placeholder { color: var(--text2); opacity: .6; }
/* ── ARCHIVED CLIENT ROW ── */
.client-item.archived { opacity: .35; }
.client-item.archived:hover { opacity: .6; }
.client-item.archived .client-dot { border: 1.5px dashed var(--text2); background: transparent !important; }
/* ── CLIENT STATUS BADGE ── */
.client-status-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 6px; white-space: nowrap; margin-left: 4px; vertical-align: middle; }
.client-status-badge.badge-paused { background: rgba(245,158,11,.15); color: #f59e0b; }
.client-status-badge.badge-archived { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
.client-status-badge.badge-prospect { background: rgba(132,204,22,.12); color: #a3e635; }
/* ── BOARD CONTAINER ── */
.board-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
/* ── PLANIF STRIP ── */
.planif-strip { flex-shrink: 0; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 10px 16px 10px; border: 2px dashed transparent; transition: border-color .2s, background .2s; }
.planif-strip.drop-target { border-color: var(--accent); background: rgba(var(--accent-rgb),.07); }
.planif-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.planif-label { font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; }
.planif-badge { background: #475569; border-radius: 10px; font-size: 10px; padding: 2px 7px; color: white; font-weight: 700; }
.planif-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.planif-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 5px 8px 5px 10px; cursor: pointer; transition: border-color .15s, background .15s; font-size: 12px; font-weight: 600; }
.planif-chip:hover { border-color: rgba(var(--accent-rgb),.27); background: var(--bg); }
.planif-chip .chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.planif-chip .chip-name { white-space: nowrap; }
.chip-start-btn { background: rgba(var(--accent-rgb),.18); border: none; color: var(--accent); border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; margin-left: 4px; transition: background .15s; white-space: nowrap; }
.chip-start-btn:hover { background: rgba(var(--accent-rgb),.35); }
/* ── BOARD ── */
.board { display: flex; gap: 12px; padding: 14px 16px 16px; overflow-x: auto; flex: 1; align-items: flex-start; min-height: 0; }
.board::-webkit-scrollbar { height: 6px; }
.board::-webkit-scrollbar-track { background: transparent; }
.board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.column { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); width: 240px; flex-shrink: 0; display: flex; flex-direction: column; max-height: calc(100vh - 430px); }
.column-header { padding: 12px 14px 10px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.phase-dot { width: 10px; height: 10px; border-radius: 50%; }
.column-title { font-size: 13px; font-weight: 700; flex: 1; }
.column-count { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; font-size: 11px; padding: 2px 8px; color: var(--text2); }
.column-body { padding: 6px 8px 8px; overflow-y: auto; flex: 1; min-height: 80px; }
.column-body::-webkit-scrollbar { width: 4px; }
.column-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.drop-zone { min-height: 60px; border: 2px dashed transparent; border-radius: 8px; transition: border-color .2s, background .2s, padding-bottom var(--dur-wave) var(--ease-drag); padding: 4px; }
/* target column: no boundary — the parting cards (wave) are the feedback; just a whisper of tint */
.drop-zone.drag-over { background: rgba(var(--accent-rgb),.035); }
/* ── CARDS ── */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; cursor: grab; transition: transform .15s, box-shadow .15s, opacity .15s; position: relative; border-left: 3px solid; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; padding-right: 18px; } /* reserve room for the hover ⋮ menu so long titles don't run under it */
.card-emoji { font-size: 18px; flex-shrink: 0; }
.card-title { font-size: 13px; font-weight: 700; flex: 1; line-height: 1.3; }
.card-industry { font-size: 11px; color: var(--text2); margin-top: 1px; }
.card-videos { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.video-progress { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.video-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.card-video-count { font-size: 11px; color: var(--text2); white-space: nowrap; }
.card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600; flex-shrink: 0; }
.card-date { font-size: 10px; color: var(--text2); margin-left: auto; }
.card-date.late { color: #ef4444; }
.card-date.soon { color: #f59e0b; }
.card-shooting-info { font-size: 10px; color: #f59e0b; display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.scripts-badge { font-size: 10px; color: #10b981; font-weight: 600; }
.card-menu { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text2); cursor: pointer; opacity: .62; transition: opacity .15s; padding: 2px 5px; border-radius: 4px; font-size: 14px; }
.card:hover .card-menu, .card-menu:focus-visible { opacity: 1; }
.card-menu:hover { background: var(--bg3); color: var(--text); }
/* contextual action button on card */
.card-action { width: 100%; margin-top: 8px; padding: 6px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .2s; }
.card-action:hover { transform: translateY(-1px); }
.card-action.unchecked { background: transparent; color: var(--text2); border: 1px dashed var(--border); }
.card-action.unchecked:hover { border-color: var(--text2); color: var(--text); }
.card-action.checked-script { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.35); }
.card-action.checked-script:hover { background: rgba(16,185,129,.2); }
.card-action.checked-rendu { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.35); }
.card-action.checked-rendu:hover { background: rgba(16,185,129,.2); }
/* ── MODALS ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; backdrop-filter: blur(4px); }
.overlay.hidden { display: none; }
.modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal h2 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.field input, .field select, .field textarea { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .2s; }
.field input[type=number] { -moz-appearance: textfield; }
.field input[type=number]::-webkit-inner-spin-button,
.field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 70px; }
.color-picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color .2s, transform .15s; }
.color-swatch.selected { border-color: white; transform: scale(1.15); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.btn { padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: opacity .2s; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: white; }
.btn-primary:hover { opacity: .85; }
.btn-secondary { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
.btn-secondary:hover { color: var(--text); }
.btn-danger { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.25); }
.hidden { display: none !important; }
/* ── CARD TABS (pre-prod) ── */
.card-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.ctab { position: relative; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text2); padding: 8px 11px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color .15s, border-color .15s; }
.ctab:hover { color: var(--text); }
.ctab.active { color: var(--text); border-bottom-color: var(--accent); }
.ctab-panel { min-height: 120px; }
/* card modal head: title + a single "⋮" actions menu button (outputs + admin + delete) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.card-head h2 { margin-bottom: 0; }
.card-head-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.card-menu-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.card-menu-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.card-menu-btn svg { width: 18px; height: 18px; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 4px; }
.ctx-item.danger { color: #ef4444; }
/* card footer: right-aligned workflow actions and save feedback */
.card-foot { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; align-items: center; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s, background .15s; }
.chip-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.chip-btn svg { width: 14px; height: 14px; }
/* editable pre-prod tables */
.pp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pp-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); padding: 2px 5px 6px; font-weight: 700; }
.pp-table td { padding: 3px 4px; vertical-align: middle; }
.pp-table input, .pp-table select { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 12px; font-family: inherit; outline: none; }
.pp-table input:focus, .pp-table select:focus { border-color: var(--accent); }
.pp-table td.num { width: 78px; }
.pp-table td.act { width: 30px; text-align: center; }
.pp-del { background: none; border: none; color: var(--text2); cursor: pointer; padding: 4px; border-radius: 5px; }
.pp-del:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.pp-vis { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text2); cursor: pointer; padding: 4px 6px; display: inline-flex; }
.pp-vis.on { background: rgba(16,185,129,.15); color: #10b981; border-color: rgba(16,185,129,.4); }
.pp-add { margin-top: 8px; background: var(--bg3); border: 1px dashed var(--border); color: var(--text2); border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pp-add:hover { border-color: var(--accent); color: var(--accent); }
.pp-empty { color: var(--text2); opacity: .5; font-style: italic; font-size: 12px; padding: 10px 2px; }
.budget-summary { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; font-size: 13px; }
.budget-summary .brow { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text2); }
.budget-summary .brow span:last-child { font-variant-numeric: tabular-nums; }
.budget-summary .brow.total { color: var(--text); font-weight: 800; font-size: 16px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
/* card detail modal */
.modal.wide { max-width: 600px; }
#cardModal .modal { max-width: 1400px; width: 90vw; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; }
#cardModal .card-tabs { flex-shrink: 0; }
#cardModal .ctab-panel { flex: 1; overflow-y: auto; }
#clientModal { z-index: 160; } /* above the dossier when "Modifier" is opened from it */
.btn-sm { padding: 6px 11px; font-size: 12px; }
.modal-actions.split { justify-content: space-between; align-items: center; }
.modal-actions .ma-left { display: flex; gap: 6px; }
.modal-actions .ma-mid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.modal-actions .ma-right { display: flex; gap: 8px; }
#cardModal .card-head, #cardModal .status-banner, #cardModal .modal-actions { flex-shrink: 0; }
.modal-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.modal-row .field { flex: 1; margin: 0; min-width: 140px; }
/* ── PROJET dashboard (2-col: settings | side panels) ── */
.proj-dash { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,1fr); gap: 16px; align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dash-card > h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-weight: 700; }
.dash-card .modal-row:last-child, .dash-card .field:last-child { margin-bottom: 0; }
.dash-count { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 600; color: var(--text2); margin-left: auto; }
.dash-hint { font-size: 11px; color: var(--text2); line-height: 1.4; margin-top: 8px; }
.email-tpl-modal{width:min(980px,94vw);max-width:980px}.email-tpl-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.email-tpl-layout{display:grid;grid-template-columns:240px 1fr;min-height:520px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.email-tpl-list{background:var(--bg2);border-right:1px solid var(--border);padding:8px}.email-tpl-item{width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:10px;border-radius:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer}.email-tpl-item small{color:var(--text2)}.email-tpl-item.active{background:var(--bg3);box-shadow:inset 3px 0 var(--accent)}.email-tpl-editor{padding:18px;min-width:0}.email-tpl-title{display:flex;justify-content:space-between;margin-bottom:16px}.email-tpl-title span{font-size:11px;color:var(--text2)}.email-tpl-vars{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}.email-tpl-vars span{font-size:11px;color:var(--text2);margin-right:4px}.email-tpl-vars button{border:1px solid var(--border);background:var(--bg3);color:var(--text2);border-radius:5px;padding:4px 7px;cursor:pointer;font-family:monospace}@media(max-width:700px){.email-tpl-layout{grid-template-columns:1fr}.email-tpl-list{border-right:0;border-bottom:1px solid var(--border);display:flex;overflow:auto}.email-tpl-item{min-width:170px}.email-tpl-modal{max-height:92vh;overflow:auto}}
.save-state { margin-left:auto; min-height:16px; font-size:10px; font-weight:600; color:var(--text2); opacity:0; transform:translateY(2px); transition:opacity .18s,transform .18s,color .18s; }
.save-state.show { opacity:1; transform:translateY(0); color:#10b981; }
.save-state.saving { color:var(--text2); }
.save-state.error { color:#ef4444; }
.ckd-assignees { margin-left:auto; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); font-size:10px; display:inline-flex; align-items:center; gap:4px; }
.dash-side .dash-card { padding: 12px 14px; }
.dash-side .cd-row, .dash-side .cd-empty { font-size: 12px; }
/* Avancement recap */
.prog-phase { --sc: var(--accent); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 32%, transparent); border-radius: 8px; padding: 5px 11px; margin-bottom: 10px; }
.prog-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.prog-k { font-size: 12px; color: var(--text2); width: 52px; flex-shrink: 0; }
.prog-v { display: flex; gap: 5px; flex-wrap: wrap; }
.dash-link { margin-top: 4px; }
/* Status pills (replace the old inline check-circle spans) */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); }
.pill.ok { color: #10b981; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); }
.pill.muted { color: var(--text2); background: var(--bg3); }
.pill.warn { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.12); }
/* ── LIVRAISON tab (Script + Rendu review cards) ── */
.deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.deliv-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.deliv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deliv-head h4 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin: 0; }
.deliv-pills { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.deliv-cta { justify-content: center; gap: 7px; font-size: 13px; padding: 10px; }
.deliv-empty { font-size: 12px; color: var(--text3); font-style: italic; }
.deliv-latest { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.deliv-latest-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.deliv-latest-top span { font-size: 11px; font-weight: 600; }
.deliv-latest-link { font-size: 11px; }
.deliv-notify { width: fit-content; }
.deliv-feedback { background: rgba(239,68,68,.08); border-left: 3px solid #ef4444; border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.deliv-feedback-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #ef4444; flex-wrap: wrap; }
.deliv-feedback p { font-size: 11.5px; color: var(--text); margin: 0; line-height: 1.4; white-space: pre-wrap; }
.deliv-new { background: #f59e0b; color: #1e1b4b; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.deliv-readrow { display: flex; justify-content: flex-end; }
.deliv-action { display: flex; flex-direction: column; gap: 6px; }
.deliv-addver { font-size: 10px; text-transform: uppercase; color: var(--text3); font-weight: 700; border-top: 1px solid var(--border); padding-top: 8px; }
.deliv-addver.accent { color: var(--accent); border-top: 0; padding-top: 0; display: flex; align-items: center; gap: 4px; }
.deliv-addrow { display: flex; gap: 6px; }
.deliv-addrow input, .deliv-finalinput, .deliv-ext-body input { flex: 1; width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 9px; font-size: 12px; outline: none; font-family: inherit; }
.deliv-addrow input:focus, .deliv-finalinput:focus, .deliv-ext-body input:focus { border-color: var(--accent); }
.deliv-up { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; width: fit-content; background: var(--bg3); border: 1px dashed var(--border); border-radius: 6px; padding: 5px 9px; font-size: 11px; margin: 0; }
.deliv-finalrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.deliv-final { background: rgba(16,185,129,.08); border: 1px solid #10b981; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.deliv-final-head { font-size: 12px; font-weight: 700; color: #10b981; display: flex; align-items: center; gap: 4px; }
.deliv-sub { font-size: 11px; color: var(--text2); font-weight: 600; }
.deliv-sub2 { font-size: 11px; color: var(--text2); }
.deliv-history summary { font-size: 11px; color: var(--accent); font-weight: 600; cursor: pointer; outline: none; user-select: none; }
.deliv-history-body { margin-top: 4px; background: var(--bg3); border: 1px solid var(--border); padding: 6px 8px; border-radius: 6px; max-height: 160px; overflow-y: auto; }
.deliv-hrow { border-bottom: 1px dashed var(--border); padding: 6px 0; font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
.deliv-hrow:last-child { border-bottom: 0; }
.deliv-hrow-top { display: flex; justify-content: space-between; }
.deliv-hrow-top span:last-child { font-weight: 600; }
.deliv-hquote { color: var(--text2); font-style: italic; margin-top: 2px; padding-left: 4px; border-left: 1px solid var(--border); }
.deliv-ext summary { font-size: 11.5px; color: var(--text2); font-weight: 600; cursor: pointer; outline: none; user-select: none; display: flex; align-items: center; gap: 5px; }
.deliv-ext-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
@media (max-width: 900px) {
.proj-dash, .deliv-grid { grid-template-columns: 1fr; }
}
/* ── VIDEO CARD GRID (in modal) ── */
.video-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.video-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 8px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; position: relative; }
.video-card:hover { border-color: rgba(var(--accent-rgb),.5); background: var(--bg); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.video-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.video-card-icon { font-size: 15px; flex-shrink: 0; }
.video-card-name { font-size: 12px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-cb { flex-shrink: 0; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border); cursor: pointer; background: none; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; transition: all .18s; }
.video-cb:hover { border-color: var(--accent); }
.video-cb.edit { border-color: #3b82f6; }
.video-cb.edit.on { background: #3b82f6; border-color: #3b82f6; color: white; }
.video-cb.review { border-color: #10b981; }
.video-cb.review.on { background: #10b981; border-color: #10b981; color: white; }
.video-card-preview { font-size: 11px; color: var(--text2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; min-height: 30px; margin-bottom: 6px; }
.video-card-badges { display: flex; gap: 3px; flex-wrap: wrap; }
.note-badge { font-size: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text2); }
.video-card-del { position: absolute; top: 5px; right: 5px; background: none; border: none; color: transparent; font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: all .15s; line-height: 1; }
.video-card:hover .video-card-del { color: var(--text2); }
.video-card-del:hover { color: #ef4444 !important; background: rgba(239,68,68,.1); }
.add-video-row { display: flex; gap: 8px; margin-top: 8px; }
.add-video-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12px; outline: none; font-family: inherit; }
.add-video-row input:focus { border-color: var(--accent); }
.add-video-row button { background: var(--accent); border: none; color: white; border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer; white-space: nowrap; }
/* ── VIDEO NOTE MODAL ── */
#videoNoteModal { z-index: 150; }
.modal.note-modal { max-width: 520px; }
.note-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.note-title-row input { flex: 1; background: transparent; border: none; border-bottom: 2px solid var(--border); color: var(--text); font-size: 17px; font-weight: 800; padding: 4px 0; outline: none; font-family: inherit; transition: border-color .2s; }
.note-title-row input:focus { border-bottom-color: var(--accent); }
.note-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.note-tab { padding: 5px 13px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text2); transition: all .15s; }
.note-tab.active { background: var(--accent); border-color: var(--accent); color: white; }
.note-tab:hover:not(.active) { border-color: var(--accent); color: var(--text); }
.note-tab .tab-dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; display: inline-block; margin-left: 5px; vertical-align: middle; }
.note-area { width: 100%; min-height: 200px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; line-height: 1.65; transition: border-color .2s; }
.note-area:focus { border-color: var(--accent); }
.note-area::placeholder { color: var(--text2); opacity: .7; }
/* status banners in modal */
.status-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; }
.status-banner.green { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #10b981; }
.status-banner.blue { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; }
.status-banner.amber { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.32); color: #f59e0b; }
/* ── BOTTOM SECTION ── */
.bottom-section { flex-shrink: 0; display: flex; flex-direction: column; }
/* ── REMINDER BAR ── */
.reminder-bar { display: flex; align-items: stretch; gap: 10px; padding: 10px 14px; background: var(--bg2); border-top: 2px solid var(--border); overflow-x: auto; min-height: 116px; flex-shrink: 0; }
.reminder-bar::-webkit-scrollbar { height: 4px; }
.reminder-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.rbar-label { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex-shrink: 0; padding-right: 10px; border-right: 1px solid var(--border); gap: 8px; min-width: 80px; }
.rbar-label-text { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.rbar-add { background: var(--bg3); border: 1px dashed var(--border); color: var(--text2); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; transition: all .15s; white-space: nowrap; }
.rbar-add:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }
.rbar-chip { display: flex; flex-direction: column; justify-content: space-between; background: var(--bg3); border: 1px solid var(--border); border-top: 3px solid; border-radius: 10px; padding: 9px 10px 8px; flex-shrink: 0; width: 168px; min-height: 90px; cursor: default; transition: background .15s, box-shadow .15s; position: relative; }
.rbar-chip.linked { cursor: pointer; }
.rbar-chip:hover { background: var(--bg); box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.rbar-chip.linked:hover::after { content: '↗'; position: absolute; top: 7px; right: 28px; font-size: 10px; color: var(--text2); opacity: .6; }
.rbar-chip.done { opacity: .38; }
.rbar-chip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.rbar-chip-date { font-size: 11px; font-weight: 700; white-space: nowrap; }
.rbar-chip-date.overdue { color: #ef4444; }
.rbar-chip-date.soon { color: #f59e0b; }
.rbar-chip-date.normal { color: var(--text2); }
.rbar-chip-text { font-size: 12px; color: var(--text); line-height: 1.4; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 6px; }
.rbar-chip-bot { display: flex; align-items: center; justify-content: space-between; }
.rbar-chip-diff { font-size: 10px; color: var(--text2); white-space: nowrap; }
.rbar-chip-diff.overdue { color: #ef4444; }
.rbar-chip-diff.soon { color: #f59e0b; }
.rbar-cb { background: none; border: 1.5px solid var(--border); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text2); transition: all .15s; flex-shrink: 0; padding: 0; }
.rbar-cb:hover { background: #10b981; border-color: #10b981; color: white; }
.rbar-chip.done .rbar-cb { background: #10b981; border-color: #10b981; color: white; }
.rbar-del { background: none; border: none; color: transparent; cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; transition: color .15s; }
.rbar-chip:hover .rbar-del { color: var(--text2); }
.rbar-del:hover { color: #ef4444 !important; }
.rbar-empty { font-size: 12px; color: var(--text2); opacity: .45; font-style: italic; white-space: nowrap; align-self: center; padding: 0 8px; }
/* ── CARD PULSE ── */
@keyframes card-pulse {
0%,100% { box-shadow: 0 0 0 0px var(--cl-color, rgba(var(--accent-rgb),.4)); }
55% { box-shadow: 0 0 0 5px var(--cl-color, rgba(var(--accent-rgb),.4)); }
}
.card.has-active-reminder { animation: card-pulse 2s ease-in-out infinite; }
@keyframes chip-pulse {
0%,100% { box-shadow: 0 0 0 0px var(--chip-color, rgba(239,68,68,.25)); }
55% { box-shadow: 0 0 0 4px var(--chip-color, rgba(239,68,68,.25)); }
}
.rbar-chip.active { animation: chip-pulse 2s ease-in-out infinite; }
/* Respect reduced-motion: keep a static emphasis (and let screenshot tools settle). */
@media (prefers-reduced-motion: reduce) {
.card.has-active-reminder { animation: none; box-shadow: 0 0 0 2px var(--cl-color, rgba(var(--accent-rgb),.5)); }
.rbar-chip.active { animation: none; box-shadow: 0 0 0 2px var(--chip-color, rgba(239,68,68,.4)); }
}
/* ── GANTT ── */
.gantt-view { flex-shrink: 0; background: var(--bg2); border-top: 1px solid var(--border); display: flex; flex-direction: column; }
.gantt-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; flex-shrink: 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.gantt-bar-title { font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; flex-shrink: 0; }
.gantt-today-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 2px 10px; font-size: 10px; font-weight: 700; cursor: pointer; transition: all .15s; flex-shrink: 0; letter-spacing: .3px; }
.gantt-today-btn:hover { border-color: var(--accent); color: var(--accent); }
.gantt-month-ruler { padding-left: 140px; margin-bottom: 2px; overflow: hidden; }
.gantt-month-ruler-inner { position: relative; height: 16px; }
.gantt-month-lbl { position: absolute; top: 0; font-size: 10px; font-weight: 800; color: var(--text2); white-space: nowrap; letter-spacing: .3px; padding-left: 4px; border-left: 1px solid var(--border); }
.gantt-legend { display: flex; gap: 10px; }
.gantt-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text2); white-space: nowrap; }
.gantt-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.gantt-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.gzoom-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.gzoom-btn:hover { border-color: var(--accent); color: var(--accent); }
.gantt-zoom-lbl { font-size: 11px; font-weight: 700; color: var(--text2); min-width: 30px; text-align: center; }
.gantt-collapse { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 2px 8px; font-size: 10px; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.gantt-collapse:hover { background: var(--border); color: var(--text); }
.gantt-body { overflow: auto; padding: 8px 0 10px 16px; max-height: 240px; }
.gantt-body.hidden { display: none; }
.gantt-inner { display: inline-block; min-width: 100%; padding-right: 16px; }
.gantt-day-row { display: flex; padding-left: 140px; margin-bottom: 5px; }
.gantt-day-lbl { flex-shrink: 0; text-align: center; font-size: 9px; color: var(--text2); line-height: 1; }
.gantt-day-lbl.g-today { color: var(--accent); font-weight: 900; }
.gantt-day-lbl.g-weekend { color: #3d4266; }
.gantt-row { display: flex; align-items: center; height: 38px; margin-bottom: 5px; }
.gantt-row-label { position: sticky; left: 0; width: 140px; flex-shrink: 0; background: var(--bg2); z-index: 3; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding-right: 10px; }
.gantt-row-label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { height: 28px; background: var(--bg3); border-radius: 6px; position: relative; overflow: hidden; flex-shrink: 0; }
.gantt-band { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; display: flex; align-items: center; padding: 0 7px; overflow: hidden; font-size: 10px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.gantt-shoot-pin { position: absolute; top: 0; bottom: 0; width: 3px; z-index: 5; border-radius: 2px; }
.gantt-today-ln { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--accent); opacity: .7; z-index: 6; pointer-events: none; border-radius: 1px; }
.gantt-empty-msg { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; font-size: 10px; color: var(--text2); opacity: .45; font-style: italic; }
/* editable (draggable) bands */
.gantt-band.editable { cursor: grab; user-select: none; }
.gantt-band.editable:hover { filter: brightness(1.15); }
.gantt-band.dragging { cursor: grabbing; z-index: 8; filter: brightness(1.2); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.gband-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.gband-handle.l { left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.gband-handle.r { right: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.gantt-band.editable:hover .gband-handle { background: rgba(255,255,255,.3); }
.gband-label { padding: 0 9px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; display: flex; align-items: center; gap: 4px; }
/* open-ended "Planif suiv." band fades to the right (runs until next shoot) */
.gantt-band.open-ended { -webkit-mask-image: linear-gradient(to right,#000 78%,transparent); mask-image: linear-gradient(to right,#000 78%,transparent); }
/* context menu */
.ctx-menu { position: fixed; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 6px; z-index: 200; box-shadow: var(--shadow); min-width: 180px; }
.ctx-menu.hidden { display: none; }
.ctx-item { padding: 8px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; transition: background .15s; }
.ctx-item:hover { background: var(--bg3); }
.ctx-item.danger { color: #ef4444; }
.empty-col { text-align: center; padding: 24px 8px; color: var(--text2); font-size: 12px; }
.empty-col .icon { font-size: 24px; margin-bottom: 6px; }
/* ── SIDEBAR TABS ── */
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px 10px 6px; }
.side-tab { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 8px; padding: 8px 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.side-tab:hover { color: var(--text); }
.side-tab.active { background: var(--accent); border-color: var(--accent); color: white; }
.side-tab-count { font-size: 10px; opacity: .8; background: rgba(0,0,0,.2); border-radius: 8px; padding: 0 5px; }
/* Category badge shown on global-search results (mixed categories) */
.client-cat-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
/* Unified-creation Prospect|Client toggle (segmented, like .sv-modes) */
.create-mode { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.create-mode.hidden { display: none; }
.cm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--bg3); border: 0; color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; }
.cm-btn.active { background: var(--accent); color: #fff; }
/* Prospect funnel stage on the card */
.pc-stage { margin: 6px 0 2px; }
/* Relance (reminder) calendar — reused on prospect cards + dossier */
.rl-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.rl-empty { font-size: 11px; color: var(--text2); opacity: .6; padding: 2px 0; }
.rl-row { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 11px; }
.rl-view, .rl-edit { display: flex; align-items: center; gap: 6px; }
.rl-when { display: inline-flex; align-items: center; gap: 3px; color: var(--text2); white-space: nowrap; font-weight: 600; }
.rl-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-mini { background: none; border: none; color: var(--text2); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex; }
.rl-mini:hover { color: var(--accent); background: var(--bg); }
.rl-edit input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 3px 6px; font-size: 11px; font-family: inherit; outline: none; }
.rl-edit .rl-date { width: 116px; flex-shrink: 0; }
.rl-edit .rl-textin { flex: 1; min-width: 0; }
.rl-save-state { color: var(--text2); font-size: 10px; white-space: nowrap; }
.rl-add { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.rl-add input { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-family: inherit; outline: none; }
.rl-add input[type=date] { width: 116px; flex-shrink: 0; }
.rl-add input[type=text] { flex: 1; min-width: 0; }
.rl-add input:focus { border-color: var(--accent); }
/* Board filter chip (focus / hidden indicator above the board) */
.board-filter-chip { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 12px; background: rgba(var(--accent-rgb),.12); border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 8px; font-size: 12px; }
.board-filter-chip.hidden { display: none; }
.board-filter-chip .bfc-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.board-filter-chip .bfc-clear { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; }
.board-filter-chip .bfc-clear:hover { border-color: var(--accent); color: var(--accent); }
/* ── PROSPECTS PANEL ── */
.prospects-panel { flex: 1; overflow-y: auto; padding: 16px; }
.prospects-panel.hidden { display: none; }
.pp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pp-head h2 { font-size: 16px; font-weight: 800; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
/* Carte repliée par défaut (essentiel), extensible au clic (.pc-open) */
.prospect-card { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid #84cc16; border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; transition: background .18s, border-color .18s; }
.prospect-card.pc-pending { border-left-color: #f59e0b; }
.prospect-card.pc-accepted { border-left-color: #10b981; }
.prospect-card:not(.pc-open):hover { background: var(--bg3); }
.prospect-card.pc-open { cursor: default; border-color: rgba(var(--accent-rgb), .4); border-left-width: 3px; }
.prospect-card.pc-open .pc-head { cursor: pointer; }
.pc-head { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.pc-head-top { display: flex; align-items: center; gap: 8px; }
.prospect-card h4 { font-size: 14px; font-weight: 700; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.pc-chevron { display: inline-flex; color: var(--text2); opacity: .6; flex-shrink: 0; transition: transform .25s ease; }
.prospect-card.pc-open .pc-chevron { transform: rotate(180deg); }
.pc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.prospect-card .pc-contact { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pc-next { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-next.due { color: #f59e0b; font-weight: 600; }
.pc-next.none { opacity: .55; }
/* Corps extensible — animation fluide via grid-template-rows */
.pc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.prospect-card.pc-open .pc-body { grid-template-rows: 1fr; }
.pc-clip { overflow: hidden; min-height: 0; }
.pc-full { padding: 10px 14px 14px; border-top: 1px solid var(--border); cursor: default; }
.pc-sec-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); margin: 10px 0 4px; }
.pc-sec-label:first-child { margin-top: 0; }
.pc-pill { font-size: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; color: var(--text2); }
.pc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pc-actions .btn { padding: 6px 10px; font-size: 11px; }
.pc-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text2); margin-bottom: 8px; }
.pc-field input[type=date] { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 7px; font-size: 11px; }
.pc-recall-done { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); margin-bottom: 8px; cursor: pointer; }
.pc-recall-done.due { color: #f59e0b; font-weight: 600; }
.pc-notes { width: 100%; min-height: 52px; resize: vertical; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 9px; font-size: 12px; margin-bottom: 10px; font-family: inherit; }
/* ── CLIENT DETAIL (dossier) ── */
.cd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cd-head .cd-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.cd-head h2 { font-size: 18px; font-weight: 800; }
.cd-head .cd-meta { font-size: 12px; color: var(--text2); }
.cd-badge { font-size: 10px; border-radius: 10px; padding: 2px 8px; font-weight: 700; }
.cd-badge.active { background: rgba(16,185,129,.15); color: #10b981; }
.cd-badge.paused { background: rgba(245,158,11,.15); color: #f59e0b; }
.cd-badge.prospect { background: rgba(132,204,22,.15); color: #a3e635; }
.cd-badge.archived { background: var(--bg3); color: var(--text2); }
.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cd-actions .btn { padding: 7px 12px; font-size: 12px; }
.cd-section { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 14px; }
.cd-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cd-section-head h3 { font-size: 13px; font-weight: 700; }
.cd-upload { background: var(--bg3); border: 1px dashed var(--border); color: var(--text2); border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 11px; font-weight: 600; transition: all .15s; }
.cd-upload:hover { border-color: var(--accent); color: var(--accent); }
.cd-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.cd-row .cd-row-main { flex: 1; min-width: 0; }
.cd-row .cd-row-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-row .cd-row-sub { font-size: 11px; color: var(--text2); }
.cd-row a, .cd-row button { font-size: 11px; }
.cd-row .cd-mini { background: none; border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.cd-row .cd-mini:hover { color: var(--text); border-color: var(--accent); }
.cd-row .cd-mini.danger:hover { color: #ef4444; border-color: #ef4444; }
.cd-row .cd-mini.on { background: rgba(16,185,129,.15); color: #10b981; border-color: rgba(16,185,129,.4); }
.cd-status-tag { font-size: 10px; padding: 2px 7px; border-radius: 8px; font-weight: 700; }
.cd-empty { font-size: 12px; color: var(--text2); opacity: .5; font-style: italic; padding: 4px 2px; }
/* ── LUCIDE ICONS ── */
svg.lucide { width: 16px; height: 16px; stroke-width: 2; vertical-align: -0.15em; flex-shrink: 0; }
svg.ic-sm { width: 13px; height: 13px; }
svg.ic-lg { width: 20px; height: 20px; }
svg.ic-xl { width: 30px; height: 30px; }
/* ── CLIENT PORTAL ── */
.portal-body { flex: 1; overflow-y: auto; background: var(--bg); }
.portal-wrap { max-width: 920px; margin: 0 auto; padding: 24px 20px 60px; }
.portal-hero { margin-bottom: 22px; }
.portal-hero h1 { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.portal-hero .ph-sub { color: var(--text2); font-size: 13px; margin-top: 4px; }
.portal-section-title { font-size: 13px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.proj-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.proj-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.proj-card-head h3 { font-size: 15px; font-weight: 700; }
.proj-card-head .pc-shoot { margin-left: auto; font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 5px; }
.proj-card-head .pc-delivered { margin-left: auto; font-size: 11px; font-weight: 700; color: #10b981; background: rgba(16,185,129,.12); border-radius: 10px; padding: 3px 10px; }
.proj-card-click { cursor: pointer; transition: border-color .15s, transform .05s; }
.proj-card-click:hover { border-color: var(--accent, #6366f1); }
.proj-card-click:active { transform: scale(.997); }
.pc-hint { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--text2); }
.pm-stepper { margin-bottom: 16px; }
/* phase stepper */
.stepper { display: flex; align-items: flex-start; gap: 0; margin-bottom: 16px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.step.done::after { background: #10b981; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text2); z-index: 1; position: relative; }
.step.done .step-dot { background: #10b981; border-color: #10b981; color: white; }
.step.current .step-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18); }
.step-label { font-size: 10px; color: var(--text2); text-align: center; }
.step.current .step-label { color: var(--text); font-weight: 700; }
.proj-validate { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.validate-box { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg3); }
.validate-box .vb-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.validate-box .vb-sub { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
.validate-box.validated { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
.validate-box.validated .vb-title { color: #10b981; }
.validate-box.disabled { opacity: 0.55; cursor: not-allowed; }
.validate-box.disabled .btn { pointer-events: none; opacity: 0.6; }
.pvid-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 10px; }
.pvid { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.pvid-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.pvid-actions { display: flex; gap: 6px; }
.pvid-badge { font-size: 10px; padding: 2px 7px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; }
.pvid-badge.ok { background: rgba(16,185,129,.15); color: #10b981; }
.pvid-badge.wait { background: var(--bg2); color: var(--text2); }
.prod-block { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; }
.prod-sec .prod-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.prod-row { font-size: 12px; color: var(--text); padding: 2px 0; }
.portal-empty { text-align: center; color: var(--text2); padding: 50px 20px; }
.portal-empty svg.lucide { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; }
/* ── FULL-SCREEN TOOLS ── */
.tool-view { flex: 1; min-height: 0; background: var(--bg); display: flex; flex-direction: column; }
.tool-view.hidden { display: none; }
.tool-head { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tool-tabs { display: flex; gap: 4px; }
.tool-tabs button { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; }
.tool-tabs button:hover { color: var(--text); }
.tool-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0; }
.tool-toolbar input, .tool-toolbar select { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12px; outline: none; }
.tool-toolbar input:focus, .tool-toolbar select:focus { border-color: var(--accent); }
.tool-body { flex: 1; overflow: auto; padding: 18px 20px 40px; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tool-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
.tool-table th:hover { color: var(--text); }
.tool-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.tool-table input, .tool-table select { width: 100%; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 6px; padding: 5px 6px; font-size: 12px; font-family: inherit; outline: none; }
.tool-table input:hover, .tool-table select:hover { border-color: var(--border); }
.tool-table input:focus, .tool-table select:focus { border-color: var(--accent); background: var(--bg3); }
.tool-table .pp-del { width: auto; }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.stat-card .sc-val { font-size: 24px; font-weight: 800; }
.stat-card .sc-lbl { font-size: 12px; color: var(--text2); margin-top: 4px; }
.analytics-toolbar-copy { color: var(--text2); font-size: 12px; }
.analytics-page { width: min(1280px, 100%); margin: 0 auto; }
.analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.analytics-kpi { position: relative; min-width: 0; min-height: 132px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 15px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.analytics-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: .7; }
.analytics-kpi-icon { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 11%, transparent); }
.analytics-kpi-label { margin-top: 3px; color: var(--text2); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .38px; }
.analytics-kpi strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; font-weight: 800; line-height: 1.08; font-variant-numeric: tabular-nums; }
.analytics-kpi small { margin-top: auto; color: var(--text2); font-size: 11px; line-height: 1.35; }
.analytics-kpi.attention::before { background: #f59e0b; }
.analytics-kpi.attention .analytics-kpi-icon { color: #f59e0b; background: rgba(245,158,11,.12); }
.analytics-kpi.good::before { background: #10b981; }
.analytics-kpi.good .analytics-kpi-icon { color: #10b981; background: rgba(16,185,129,.12); }
.analytics-kpi.neutral::before { background: var(--text3); }
.analytics-kpi.neutral .analytics-kpi-icon { color: var(--text2); background: var(--bg3); }
.analytics-main-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: 14px; margin-top: 14px; align-items: start; }
.analytics-panel { min-width: 0; padding: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.analytics-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.analytics-panel-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; }
.analytics-panel-head h3 svg { color: var(--accent); }
.analytics-panel-head p { margin: 4px 0 0; color: var(--text2); font-size: 11px; line-height: 1.4; }
.analytics-panel-head > span { flex: 0 0 auto; color: var(--text2); font-size: 11px; font-weight: 700; white-space: nowrap; padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg3); }
.analytics-phase-list { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.analytics-phase-row { display: grid; grid-template-columns: 24px minmax(82px,.62fr) minmax(70px,1fr) 24px; gap: 8px; align-items: center; min-width: 0; font-size: 12px; }
.analytics-phase-icon { width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; color: var(--phase); border-radius: 7px; background: color-mix(in srgb, var(--phase) 12%, transparent); }
.analytics-phase-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.analytics-phase-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--bg3); }
.analytics-phase-track > span { display: block; height: 100%; min-width: 7px; border-radius: inherit; }
.analytics-phase-row b { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.analytics-alert-list { display: flex; flex-direction: column; margin: 5px -5px -5px; }
.analytics-alert-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr) 20px; gap: 8px; align-items: center; border: 0; border-bottom: 1px solid var(--border); padding: 9px 5px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.analytics-alert-row:last-child { border-bottom: 0; }
.analytics-alert-row:hover { background: var(--bg3); }
.analytics-alert-icon { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; color: var(--text2); border-radius: 8px; background: var(--bg3); }
.analytics-alert-row.danger .analytics-alert-icon { color: #ef4444; background: rgba(239,68,68,.11); }
.analytics-alert-row.warning .analytics-alert-icon { color: #f59e0b; background: rgba(245,158,11,.12); }
.analytics-alert-row.notice .analytics-alert-icon { color: #3b82f6; background: rgba(59,130,246,.12); }
.analytics-alert-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.analytics-alert-main strong, .analytics-alert-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-alert-main strong { font-size: 12px; }
.analytics-alert-main small { color: var(--text2); font-size: 10.5px; }
.analytics-alert-go { display: inline-flex; color: var(--text3); }
.analytics-alert-row:hover .analytics-alert-go { color: var(--accent); }
.analytics-more { padding: 9px 3px 1px; color: var(--text2); font-size: 11px; font-weight: 650; }
.analytics-empty { display: flex; align-items: center; gap: 6px; min-height: 120px; color: var(--text2); font-size: 12px; }
.analytics-empty-good { color: #10b981; }
.analytics-details { margin-top: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); box-shadow: var(--shadow); }
.analytics-details summary { display: flex; align-items: center; gap: 7px; padding: 14px 16px; color: var(--text2); font-size: 12px; font-weight: 750; cursor: pointer; user-select: none; }
.analytics-details summary::-webkit-details-marker { display: none; }
.analytics-details[open] summary { color: var(--text); border-bottom: 1px solid var(--border); }
.analytics-details-body { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; padding: 16px; }
.analytics-detail-section { min-width: 0; }
.analytics-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.analytics-detail-head h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.analytics-detail-head h4 svg { color: var(--accent); }
.analytics-detail-head p { max-width: 430px; margin: 3px 0 0; color: var(--text2); font-size: 10.5px; line-height: 1.35; }
.analytics-detail-head > b { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; text-align: right; white-space: nowrap; }
.analytics-detail-head > b small { margin-top: 2px; color: var(--text2); font-size: 9.5px; font-weight: 600; }
.analytics-margin-list { border-top: 1px solid var(--border); }
.analytics-margin-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.analytics-margin-row:hover { background: var(--bg3); }
.analytics-margin-row > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.analytics-margin-row strong, .analytics-margin-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-margin-row strong { font-size: 12px; }
.analytics-margin-row small { color: var(--text2); font-size: 10px; }
.analytics-margin-row .an-marge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; white-space: nowrap; }
.analytics-margin-row .an-marge small { color: inherit; opacity: .76; }
.analytics-material-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.analytics-spaced-sub { margin-top: 14px; }
.analytics-page .time-profitability { max-width: none; margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); box-shadow: var(--shadow); }
.analytics-page .time-profitability-head h3 { display: flex; align-items: center; gap: 7px; }
.analytics-page .time-rate-actionable { display: block; margin-top: 14px; }
.analytics-page .time-rate-actionable .time-rate-highlight { max-width: 560px; }
@media (max-width: 1040px) {
.analytics-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
.analytics-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.analytics-kpis, .analytics-details-body, .analytics-material-grid { grid-template-columns: 1fr; }
.analytics-kpi { min-height: 118px; }
.analytics-panel, .analytics-page .time-profitability { padding: 13px; }
.analytics-panel-head { flex-direction: column; gap: 8px; }
.analytics-panel-head > span { align-self: flex-start; }
.analytics-phase-row { grid-template-columns: 24px minmax(72px,.65fr) minmax(54px,1fr) 20px; gap: 6px; }
.analytics-details-body { gap: 20px; }
}
.arch-row { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.arch-trash { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,.12); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
.arch-trash.overdue { color: #ef4444; background: rgba(239,68,68,.14); }
/* ── CLIENT REPOSITORY (all clients, any status) ── */
.client-status-badge.badge-active { background: rgba(16,185,129,.15); color: #10b981; }
.repo-row { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.repo-row:hover { border-color: var(--accent); background: var(--bg3); }
.repo-main { flex: 1; min-width: 0; }
.repo-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.repo-sub { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-pc { font-size: 11px; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.repo-acts { display: flex; gap: 6px; flex-shrink: 0; }
/* ── CHECKLIST DASHBOARD (aggregated, compartmentalized per source) ── */
.ckd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.ckd-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ckd-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.ckd-head:hover { background: var(--bg3); }
.ckd-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ckd-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ckd-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckd-client { color: var(--text2); font-weight: 600; }
.ckd-count { font-size: 11px; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; flex-shrink: 0; }
.ckd-open { color: var(--text2); display: inline-flex; flex-shrink: 0; }
.ckd-head:hover .ckd-open { color: var(--accent); }
.ckd-items { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.ckd-item { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 7px; font-size: 13px; line-height: 1.45; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; }
.ckd-item.prio-low { border-left-color: #10b981; }
.ckd-item.prio-med { border-left-color: #f59e0b; }
.ckd-item.prio-high { border-left-color: #ef4444; }
.ckd-item .chk-box { width: 18px; height: 18px; flex-shrink: 0; }
.ckd-text { color: var(--text); flex: 1 1 120px; min-width: 0; }
.ckd-item input.ckd-text { border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 3px 4px; margin: -3px -4px; font: inherit; outline: none; }
.ckd-item input.ckd-text:hover { border-color: var(--border); }
.ckd-item input.ckd-text:focus { border-color: var(--accent); background: var(--bg3); }
.ckd-item.done .ckd-text { text-decoration: line-through; color: var(--text2); opacity: .75; }
.ckd-assignee-editor { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; min-width: 0; }
.ckd-assignee-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 132px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 5px; color: var(--text2); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckd-assignee-chip button, .ckd-note, .ckd-delete { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--text3); padding: 3px; cursor: pointer; flex-shrink: 0; }
.ckd-assignee-chip button:hover, .ckd-note:hover { color: var(--accent); background: var(--bg3); }
.ckd-delete:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.ckd-note.has-notes { color: var(--accent); }
.ckd-assignee-select { max-width: 104px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text2); padding: 2px 0; font: inherit; font-size: 10.5px; outline: none; }
.ckd-assignee-select:hover, .ckd-assignee-select:focus { color: var(--text); border-bottom-color: var(--accent); }
.ckd-add { min-height: 30px; margin-top: 4px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; }
.ckd-add:hover, .ckd-add:focus-visible { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); outline: none; }
/* Workspace tasks: a compact Kanban beside the existing project checklists. */
.task-tool-tabs { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg3); flex-shrink: 0; }
.task-tool-tabs button { border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text2); padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.task-tool-tabs button:last-child { border-right: 0; }
.task-tool-tabs button:hover { color: var(--text); background: var(--bg2); }
.task-tool-tabs button.active { color: #fff; background: var(--accent); }
.task-tool-count { color: var(--text2); font-size: 12px; margin-left: auto; white-space: nowrap; }
.workspace-kanban { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 12px; min-width: 900px; align-items: start; }
.workspace-task-column { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; min-height: 300px; transition: border-color .15s, background .15s; }
.workspace-task-column.is-drop-target { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg2)); }
.wt-column-head { display: flex; align-items: center; gap: 6px; padding: 10px 11px; border-bottom: 1px solid var(--border); color: var(--text2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; }
.wt-column-head span { display: inline-flex; gap: 5px; align-items: center; }
.wt-column-head b { margin-left: auto; color: var(--text); background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; min-width: 20px; text-align: center; padding: 1px 5px; font-size: 10px; }
.wt-column-body { min-height: 245px; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.workspace-task-card { position: relative; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--bg3); border-radius: 7px; padding: 8px 10px 43px; user-select: none; transition: border-color .15s, background .15s, opacity .15s, transform .15s; }
.workspace-task-card:hover, .workspace-task-card:focus-within { border-color: var(--accent); background: var(--bg2); }
.workspace-task-card.dragging { opacity: .5; transform: rotate(1deg); }
.workspace-task-card.prio-low { border-left-color: #10b981; }
.workspace-task-card.prio-med { border-left-color: #f59e0b; }
.workspace-task-card.prio-high { border-left-color: #ef4444; }
.workspace-task-card.done { opacity: .63; }
.workspace-task-card.done .wt-title-input { text-decoration: line-through; color: var(--text2); }
.wt-card-top { display: flex; align-items: center; gap: 5px; min-height: 22px; margin-bottom: 5px; }
.wt-priority-control { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; color: var(--text2); font: inherit; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; cursor: pointer; }
.wt-priority-control span { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.wt-priority-control.prio-low span { background: #10b981; }
.wt-priority-control.prio-high span { background: #ef4444; }
.wt-priority-control:hover { color: var(--accent); }
.wt-grip, .wt-delete { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text3); cursor: grab; }
.wt-grip { margin-left: auto; }
.wt-grip:hover { color: var(--accent); background: var(--bg2); }
.wt-delete { cursor: pointer; }
.wt-delete:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.wt-title-input { display: block; width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); padding: 3px 4px; margin: 0 -4px; font: inherit; font-size: 13px; font-weight: 750; line-height: 1.35; outline: none; }
.wt-title-input:hover { border-color: var(--border); }
.wt-title-input:focus { border-color: var(--accent); background: var(--bg2); }
.wt-inline-fields { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-right: 25px; min-width: 0; }
.wt-inline-control { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--text2); }
.wt-inline-control > span { display: inline-flex; flex-shrink: 0; }
.wt-inline-control select, .wt-inline-control input { min-width: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text2); padding: 2px 0; font: inherit; font-size: 10.5px; outline: none; }
.wt-inline-control select { max-width: 108px; }
.wt-inline-control input { width: 92px; }
.wt-inline-control select:hover, .wt-inline-control input:hover, .wt-inline-control select:focus, .wt-inline-control input:focus { border-bottom-color: var(--accent); color: var(--text); }
.wt-date-control.overdue { color: #ef4444; font-weight: 700; }
.wt-date-control.overdue input { color: #ef4444; }
.wt-notes-button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text3); cursor: pointer; flex-shrink: 0; }
.wt-notes-button:hover, .wt-notes-button.has-notes { color: var(--accent); border-color: var(--border); background: var(--bg2); }
.wt-done { position: absolute; right: 8px; bottom: 8px; width: 23px; height: 23px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg2); color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wt-done:hover { border-color: #10b981; color: #10b981; }
.wt-done.on { border-color: #10b981; background: rgba(16,185,129,.15); color: #10b981; }
.wt-add { min-height: 36px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; }
.wt-add:hover, .wt-add:focus-visible { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); outline: none; }
.task-mine-filter { white-space: nowrap; }
.task-overview-intro { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-overview-intro > span, .task-overview-section-title > span { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; font-weight: 750; }
.task-overview-intro small, .task-overview-section-title small { color: var(--text2); font-size: 11px; }
.task-overview { display: flex; flex-direction: column; gap: 24px; max-width: 1500px; }
.task-overview-section { min-width: 0; }
.task-overview-section + .task-overview-section { padding-top: 20px; border-top: 1px solid var(--border); }
.task-overview-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.task-overview-section-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-section-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.task-section-controls input { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12px; outline: none; }
.task-section-controls input:focus { border-color: var(--accent); }
.task-kanban-scroll { overflow-x: auto; padding-bottom: 4px; }
/* Project time tracker: capture is kept deliberately quiet; detail belongs to Analytics. */
.ptl-loading { color: var(--text2); font-size: 12px; padding: 3px 0; }
.ptl-timer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.ptl-timer-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ptl-state { color: var(--text2); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.ptl-timer.running .ptl-state { color: #10b981; font-weight: 700; }
.ptl-timer strong { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ptl-controls { margin-top: 8px; }
.ptl-controls select, .ptl-manual-fields input, .ptl-manual-fields select { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 11px; }
.ptl-summary { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--text2); font-size: 11px; }
.ptl-summary b { color: var(--text); font-variant-numeric: tabular-nums; }
.ptl-other { margin-top: 8px; color: #f59e0b; font-size: 10.5px; line-height: 1.35; display: flex; align-items: flex-start; gap: 4px; }
.ptl-manual { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.ptl-manual summary { color: var(--text2); cursor: pointer; font-size: 11px; font-weight: 700; }
.ptl-manual-fields { display: grid; grid-template-columns: 76px 1fr; gap: 6px; margin-top: 8px; }
.ptl-manual-fields input:nth-child(4) { grid-column: 1 / -1; }
.ptl-manual-fields button { grid-column: 1 / -1; justify-content: center; }
/* Time is aggregated per project here; individual contributor records stay out of Analytics. */
.time-project-list { max-width: 860px; border-top: 1px solid var(--border); }
.time-project-row { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 10px 4px; display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 6px 14px; align-items: center; text-align: left; cursor: pointer; font: inherit; }
.time-project-row:hover { background: var(--bg3); }
.time-project-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.time-project-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-project-main small { color: var(--text2); font-size: 11px; }
.time-project-total { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-project-phases { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; }
.time-phase-chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; color: var(--text2); font-size: 10.5px; }
.time-phase-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.task-notes-context { color: var(--text2); font-size: 12px; font-weight: 700; padding: 8px 10px; margin: 0 0 12px; border-left: 3px solid var(--accent); background: var(--bg3); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
/* A compact profitability summary: detail stays folded until it is needed. */
.time-profitability { margin-top: 26px; max-width: 1100px; }
.time-profitability-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.time-profitability-head h3 { margin: 0; font-size: 15px; }
.time-profitability-head p { max-width: 720px; margin: 4px 0 0; color: var(--text2); font-size: 11px; line-height: 1.45; }
.time-rate-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.time-rate-kpi { min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; background: var(--bg2); display: flex; flex-direction: column; gap: 3px; }
.time-rate-kpi > span, .time-rate-kpi small { color: var(--text2); font-size: 11px; }
.time-rate-kpi strong { font-size: 20px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-rate-kpi.muted strong { color: var(--text2); }
.time-rate-layout { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 18px; margin-top: 18px; }
.time-rate-phase-panel { border-top: 1px solid var(--border); }
.time-rate-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; }
.time-rate-panel-head h4, .time-rate-highlight h4 { margin: 0; font-size: 12px; }
.time-rate-panel-head span { color: var(--text2); font-size: 10px; text-align: right; }
.time-phase-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 3px; border-top: 1px solid var(--border); font-size: 12px; }
.time-phase-rate-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.time-phase-rate-main small { color: var(--text2); font-size: 10.5px; }
.time-phase-rate > span:last-child { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.time-rate-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.time-rate-highlight { border-top: 1px solid var(--border); padding-top: 9px; min-width: 0; }
.time-rate-highlight h4 { margin-bottom: 6px; }
.time-rate-project { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 8px 3px; text-align: left; cursor: pointer; font: inherit; }
.time-rate-project:hover { background: var(--bg3); }
.time-rate-project-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.time-rate-project-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.time-rate-project-main small { color: var(--text2); font-size: 10.5px; }
.time-rate-value { font-weight: 800; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.time-rate-value.low { color: #ef4444; }
.time-rate-value.high { color: #10b981; }
.time-rate-value.missing { color: var(--text3); font-weight: 600; }
.time-rate-all { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 10px; }
.time-rate-all summary { cursor: pointer; color: var(--text2); font-size: 12px; font-weight: 700; }
.time-rate-all[open] summary { color: var(--text); margin-bottom: 10px; }
.time-rate-search { display: flex; align-items: center; gap: 7px; max-width: 420px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; color: var(--text2); background: var(--bg3); }
.time-rate-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
.time-rate-list { border-top: 1px solid var(--border); }
@media (max-width: 760px) {
.task-tool-tabs { width: 100%; overflow-x: auto; }
.task-tool-tabs button { flex: 1; justify-content: center; }
.task-tool-count { margin-left: 0; }
.workspace-kanban { min-width: 760px; grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.task-mine-filter { margin-left: 0; }
.wt-inline-fields { flex-wrap: wrap; padding-right: 0; }
.wt-inline-control select { max-width: 98px; }
.ckd-item { flex-wrap: wrap; }
.ckd-assignee-editor { width: 100%; margin-left: 32px; }
.time-rate-kpis, .time-rate-layout, .time-rate-highlights { grid-template-columns: 1fr; }
.time-rate-kpi strong { font-size: 18px; }
.time-rate-panel-head { align-items: flex-start; flex-direction: column; gap: 3px; }
.time-rate-panel-head span { text-align: left; }
.ptl-timer { align-items: flex-start; }
.time-project-row { grid-template-columns: minmax(0,1fr) auto; }
}
/* Horaires (per-day shoot schedule) */
.hr-day { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg3); }
.hr-day-h { font-size: 12px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; text-transform: capitalize; }
.hr-block { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.hr-block input[type=time] { width: 110px; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 12px; }
.hr-block input[type=text] { flex: 1; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.hr-day-h .pp-del { margin-left: auto; }
.hr-addday { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12px; color: var(--text2); }
.hr-addday input[type=date] { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 12px; }
.chk-wrap { max-width: 640px; }
.chk-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.chk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chk-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--bg2); color: #10b981; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; }
.chk-box.on { background: rgba(16,185,129,.15); border-color: #10b981; }
.chk-text { flex: 1; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 9px; font-size: 13px; }
.chk-row.done .chk-text { text-decoration: line-through; opacity: .55; }
/* Priority (basse/moyenne/haute) — left accent on the row + a cycling dot button. */
.chk-row { border-left: 3px solid transparent; padding-left: 7px; border-radius: 0 6px 6px 0; }
.chk-row.prio-low { border-left-color: #10b981; }
.chk-row.prio-med { border-left-color: #f59e0b; }
.chk-row.prio-high { border-left-color: #ef4444; }
.chk-prio { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s; }
.chk-prio:hover { border-color: var(--text2); }
.chk-prio-dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.chk-prio.prio-low .chk-prio-dot { background: #10b981; }
.chk-prio.prio-med .chk-prio-dot { background: #f59e0b; }
.chk-prio.prio-high .chk-prio-dot { background: #ef4444; }
/* Assignees live ON the task line: 1 person = avatar + name chip; 2+ = overlapping
avatar stack (icons only) that fans out on hover, names via animated tooltip. */
.chk-row { flex-wrap: nowrap; }
.chk-text { min-width: 60px; }
.chk-assignees { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.chk-assignee-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px 2px 2px; font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; }
.chk-aname { max-width: 82px; overflow: hidden; text-overflow: ellipsis; }
.chk-ava { width: 20px; height: 20px; border-radius: 50%; background: var(--rc, var(--accent)); color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chk-x { background: none; border: 0; color: var(--text3); cursor: pointer; padding: 0; display: inline-flex; }
.chk-x:hover { color: #ef4444; }
/* Overlapping stack — springs apart on hover so each avatar is reachable */
.chk-av-stack { display: inline-flex; align-items: center; }
.chk-ava-wrap { position: relative; display: inline-flex; transition: margin-left var(--dur-sm) var(--ease-out); }
.chk-ava-wrap + .chk-ava-wrap { margin-left: -8px; }
.chk-av-stack:hover .chk-ava-wrap + .chk-ava-wrap { margin-left: 2px; }
.chk-av-stack .chk-ava { width: 22px; height: 22px; border: 2px solid var(--bg2); box-sizing: border-box; }
/* Name tooltip (instant + animated — native title is too slow) */
.chk-ava-wrap::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translate(-50%, 3px); background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out); z-index: 6; }
.chk-ava-wrap:hover::after { opacity: 1; transform: translate(-50%, 0); }
/* Hover-reveal remove × on each stacked avatar */
.chk-ava-x { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: #ef4444; color: #fff; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(.5); transition: opacity var(--dur-xs) var(--ease-out), transform var(--dur-xs) var(--ease-pop); }
.chk-ava-wrap:hover .chk-ava-x { opacity: 1; transform: scale(1); }
.chk-add { width: 22px; height: 22px; flex-shrink: 0; }
.chk-assignees.empty .chk-add { opacity: .55; }
.chk-row:hover .chk-assignees.empty .chk-add, .chk-assignees.empty .chk-add:hover { opacity: 1; }
.project-role-list { display: flex; flex-direction: column; gap: 7px; }
.project-role-row { position: relative; border: 1px solid var(--border); border-radius: 9px; background: var(--bg3); padding: 8px 10px 8px 12px; }
.project-role-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--role); }
.project-role-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
.project-role-icon { color: var(--role); display: inline-flex; }
.project-role-n { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--role); background: color-mix(in srgb, var(--role) 14%, transparent); border-radius: 999px; padding: 1px 7px; }
.project-role-body { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.project-role-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px 2px 2px; font-size: 11px; font-weight: 600; color: var(--text); }
.prc-av { width: 18px; height: 18px; border-radius: 50%; background: var(--role); color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.project-role-chip button { background: none; border: 0; color: var(--text3); cursor: pointer; padding: 0; display: inline-flex; }
.project-role-chip button:hover { color: #ef4444; }
.project-role-chip button.prc-av { background: var(--role); color: #fff; }
.project-role-chip button.prc-av:hover { color: #fff; filter: brightness(1.12); }
/* Suivi « a pris connaissance de sa fonction » (ouvert le projet ou pas) */
.prc-seen { display: inline-flex; align-items: center; gap:3px; font-size:9px; font-weight:700; }
.prc-seen span { line-height:1; }
.prc-seen.ok { color: #10b981; }
.prc-seen.wait { color: #f59e0b; }
/* Suivi d'accès des contacts client (dossier) */
.cd-access { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; margin-top: 1px; }
.cd-access.ok { color: #10b981; }
.cd-access.warn { color: #f59e0b; }
.project-role-empty { font-size: 11px; color: var(--text3); font-style: italic; }
.project-role-add { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: none; border: 1px dashed var(--border); color: var(--text2); cursor: pointer; transition: border-color .15s, color .15s, transform var(--dur-xs) var(--ease-pop); }
.project-role-add:hover { border-color: var(--accent); color: var(--accent); border-style: solid; transform: scale(1.08); }
/* Variante nommée (état vide) : le bouton dit son action — « + Assigner » */
.project-role-add.pra-labeled { width: auto; height: 22px; border-radius: 11px; padding: 0 9px 0 7px; gap: 5px; font-size: 11px; font-weight: 600; font-family: inherit; white-space: nowrap; }
.project-role-add.pra-labeled:hover { transform: none; }
/* ── Assign popover (rôles / checklist / superadmin) — remplace les