/* ============ ClickUp Connect ============ */
.cu-section { margin-top: 8px; padding: 0 6px; }
.cu-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 13px 14px; background: linear-gradient(135deg, #fff, #f7f4ff);
  box-shadow: var(--shadow-xs);
}
.cu-brand-row { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.cu-logo {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #5b3fd4;
}
.cu-title { font-size: 13px; font-weight: 700; }
.cu-sub { font-size: 11.5px; color: var(--ink-3); margin: 2px 0 10px; line-height: 1.45; }
.cu-btn {
  width: 100%; padding: 9px 12px; border-radius: 9px; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cu-btn.primary { background: #5b3fd4; color: #fff; }
.cu-btn.primary:hover { background: #4c31bd; }
.cu-btn.ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line-strong); }
.cu-btn.ghost:hover { background: #f7f4ff; }
.cu-btn + .cu-btn { margin-top: 7px; }
.cu-user {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12px; color: var(--ink-2); font-weight: 600;
}
.cu-user .ok { color: var(--ok); font-weight: 800; }

/* Modal import ClickUp */
.cu-tree { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.cu-node { margin-left: 0; }
.cu-node .cu-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none;
}
.cu-node .cu-row:hover { background: #f7f4ff; }
.cu-node .cu-row .arrow { transition: transform .15s; font-size: 10px; color: var(--kerink-3, var(--ink-3)); }
.cu-node.open > .cu-row .arrow { transform: rotate(90deg); }
.cu-kids { display: none; margin-left: 16px; border-left: 1px dashed var(--line-strong); padding-left: 6px; }
.cu-node.open > .cu-kids { display: block; }
.cu-check {
  width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid var(--line-strong);
  display: inline-grid; place-items: center; font-size: 9.5px; color: transparent; flex: none; background: #fff;
}
.cu-check.on { background: #5b3fd4; border-color: #5b3fd4; color: #fff; }
.cu-count { font-size: 10.5px; color: var(--ink-3); font-weight: 700; margin-left: auto; padding-left: 8px; }
.cu-progress {
  font-size: 12px; font-weight: 600; color: var(--primary); padding: 10px 2px 0;
}
.cu-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.cu-hint a { color: #5b3fd4; font-weight: 700; }
.cu-hint code {
  background: #f2f4f7; border-radius: 4px; padding: 1px 5px; font-size: 10.5px;
  font-family: Consolas, monospace;
}
.cu-import-opts { display: flex; flex-direction: column; gap: 7px; }
.cu-opt {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.cu-opt input { margin-top: 2px; }

/* Bouton créer projet — dashboard */
.dash-actions { grid-column: span 12; display: flex; gap: 10px; margin-bottom: -2px; }
.btn-white { background: #fff; }

/* ==== Responsable & dates ==== */
.own-ayoub { background:#eaf3ff; color:#1d4ed8; border-radius:6px; padding:1px 7px; font-size:11px; font-weight:600; }
.own-assistant { background:#f3ecff; color:#6d28d9; border-radius:6px; padding:1px 7px; font-size:11px; font-weight:600; }
.own-autre { background:#f2f4f7; color:#475467; border-radius:6px; padding:1px 7px; font-size:11px; font-weight:600; }
.dash-actions { grid-column: 1 / -1; display:flex; justify-content:flex-end; margin-bottom:-6px; }

/* ==== Vue Échéancier ==== */
.plan-wrap { padding:18px 20px; overflow-x:auto; }
.plan-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.plan-head h3 { margin:0; font-size:16px; }
.plan-legend { display:flex; gap:14px; font-size:12px; color:var(--ink-3); }
.plan-legend i { display:inline-block; width:14px; height:8px; border-radius:4px; margin-right:5px; vertical-align:middle; }
.plan-legend .lg-late { background:repeating-linear-gradient(45deg,#d92d20 0 4px,#ffb3ad 4px 8px); }
.pl-scale { position:relative; height:22px; margin-left:280px; margin-right:10px; }
.pl-mark { position:absolute; top:0; font-size:10.5px; color:var(--ink-3); transform:translateX(-50
/* ==== Vue Échéancier ==== */
.plan-wrap { padding:18px 20px; overflow-x:auto; }
.plan-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.plan-head h3 { margin:0; font-size:16px; }
.plan-legend { display:flex; gap:14px; font-size:12px; color:var(--ink-3); }
.plan-legend i { display:inline-block; width:14px; height:8px; border-radius:4px; margin-right:5px; vertical-align:middle; }
.plan-legend .lg-late { background:repeating-linear-gradient(45deg,#d92d20 0 4px,#ffb3ad 4px 8px); }
.pl-scale { position:relative; height:22px; margin-left:280px; margin-right:10px; }
.pl-mark { position:absolute; top:0; font-size:10.5px; color:var(--ink-3); transform:translateX(-50%); white-space:nowrap; }
.pl-body { position:relative; }
.pl-today { position:absolute; top:0; bottom:0; width:2px; background:#101828; opacity:.35; z-index:2; }
.pl-today::after { content:"auj."; position:absolute; top:-2px; left:4px; font-size:9px; color:#101828; opacity:.6; }
.pl-row { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); cursor:pointer; position:relative; }
.pl-row:hover { background:rgba(123,47,247,.04); }
.pl-task { width:270px; min-width:270px; display:flex; align-items:center; gap:6px; font-size:12.5px; overflow:hidden; }
.pl-star { flex:none; }
.pl-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; font-weight:500; }
.pl-proj { font-size:10.5px; white-space:nowrap; }
.pl-track { flex:1; position:relative; height:16px; margin-right:10px; }
.pl-bar { position:absolute; top:3px; height:10px; border-radius:5px; opacity:.85; }
.pl-bar.doing { box-shadow:0 0 0 2px rgba(18,183,106,.45); }
.pl-bar.late { background:repeating-linear-gradient(45deg,#d92d20 0 4px,#ffb3ad 4px 8px) !important; }
@media (max-width:760px) { .pl-scale { margin-left:0; } .pl-task { display:none; } }