/* ── CSS VARIABLES ── */
:root {
    --mono: 'Inter', -apple-system, sans-serif;
}

/* ── DASHBOARD PAGE ── */
body {
    padding-top: var(--navbar-height, 72px);
    background: #0d0d0f;
}

body::before {
    display: none;
}

.dashboard-section,
.dashboard-section.active {
    display: block !important;
    min-height: 0 !important;
    padding: 14px 40px 80px !important;
    background: transparent;
    position: relative;
    z-index: 1;
}

.dashboard-container {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
}

#dbPanels,
.db-panel,
.db-panel.active {
    width: 100%;
}

.navbar-link.active {
    color: #F5F3EC;
}

/* ── PROJECT CARD — flat, no wrapper ── */
.proj-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
}

.proj-header {
    padding: 14px 20px 12px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    background: transparent;
}

.proj-header::after { display: none; }

.proj-header-left { flex: 1; }

.proj-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: clamp(18px, 2vw, 26px);
    color: #F5F3EC;
    line-height: 1.0;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.proj-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.proj-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: var(--mono);
}

.proj-badge-t {
    background: transparent;
    border-color: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.50);
}

.proj-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
}

.proj-edit-link {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.03em;
    font-family: var(--mono);
}

.proj-edit-link:hover {
    color: #EE4408;
    border-color: rgba(238,68,8,0.28);
    background: rgba(238,68,8,0.06);
}

.proj-btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    color: rgba(255,255,255,0.50);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.proj-btn-icon:hover {
    background: rgba(255,59,48,0.08);
    border-color: rgba(255,59,48,0.22);
    color: #FF3B30;
}

/* ── BODY ── */
.proj-body {
    padding: 8px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 2-col legacy */
.db-2col {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    gap: 16px;
}

/* Row 1 : KPI + SMART côte à côte */
.db-row-kpi-smart {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* ── SMART PANEL ── */
.smart-panel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.smart-view {
    display: flex;
    flex-direction: column;
}

.smart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.smart-edit-btn {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

.smart-edit-btn:hover {
    color: #EE4408;
    border-color: rgba(238,68,8,0.28);
    background: rgba(238,68,8,0.06);
}

.smart-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.smart-row:last-child { border-bottom: none; }

.smart-letter {
    flex-shrink: 0;
    margin-top: 11px;
}

.smart-letter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(146,146,146,0.08);
    border: 1px solid rgba(146,146,146,0.15);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #929292;
    font-family: var(--mono);
}

.smart-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smart-sublabel {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(146,146,146,0.60);
    margin-bottom: 0;
    line-height: 1;
    font-family: var(--mono);
}

.smart-value {
    font-size: 12px;
    color: rgba(146,146,146,0.75);
    font-weight: 400;
    line-height: 1.35;
    font-family: var(--mono);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smart-edit {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.smart-edit-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    align-items: start;
}

.smart-edit-label {
    font-size: 12px;
    font-weight: 800;
    color: #929292;
    padding-top: 8px;
    font-family: var(--mono);
}

.smart-input {
    width: 100%;
    min-height: 48px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: #F5F3EC;
    font-size: 13px;
    font-family: var(--mono);
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
}

.smart-input:focus { border-color: rgba(238,68,8,0.5); }
.smart-input.invalid { border-color: #FF453A; }

.smart-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.smart-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--mono);
}

.smart-btn-cancel {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #F5F3EC;
}

.smart-btn-save {
    background: #EE4408;
    border-color: #EE4408;
    color: #fff;
}

.smart-error {
    font-size: 11px;
    color: #FF453A;
    display: none;
    font-family: var(--mono);
}

.smart-error.show { display: block; }

/* ── KPI PANEL ── */
.kpi-panel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpi-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
}

.kpi-panel-top-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kpi-panel-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    font-family: var(--mono);
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.kpi-panel-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #929292;
    font-family: var(--mono);
}

.kpi-title {
    font-size: 13px;
    font-weight: 700;
    color: #F5F3EC;
    margin-bottom: 2px;
}

.kpi-unit-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

.kpi-add-btn {
    height: 28px;
    padding: 0 12px;
    background: rgba(238,68,8,0.08);
    border: 1px solid rgba(238,68,8,0.45);
    color: #EE4408;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

.kpi-add-btn:hover {
    background: rgba(238,68,8,0.18);
    border-color: #EE4408;
    color: #ff6030;
}

/* Header stats au-dessus du chart */
.kpi-header-stats {
    padding: 8px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}

.kpih-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.kpih-val {
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    color: #F5F3EC;
    line-height: 1;
    letter-spacing: -0.02em;
}

.kpih-unit {
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: rgba(255,255,255,0.50);
    letter-spacing: 0;
}

.kpih-delta {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.02em;
}
.kpih-delta.pos { color: #2C8657; }
.kpih-delta.neg { color: #EE4408; }

.kpih-goal {
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
    letter-spacing: 0.05em;
    margin-top: 4px;
    text-transform: uppercase;
}

.kpi-chart-area {
    height: 380px;
    min-height: 0;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 14px 20px 14px 6px;
}

.kpi-chart-area canvas {
    width: 100% !important;
}

/* Empty KPI CTA */
.kpi-empty-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(238,68,8,0.22);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
    transition: all 0.2s;
    letter-spacing: 0.02em;
}

.kpi-empty-cta:hover {
    border-color: rgba(238,68,8,0.5);
    color: rgba(255,255,255,0.55);
    background: rgba(238,68,8,0.04);
}

.kpi-empty-cta svg { opacity: 0.5; flex-shrink: 0; }

/* Single measure overlay */
.kpi-single-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.kpi-single-wrap { text-align: center; width: 100%; }

.kpi-big-val {
    font-size: 56px;
    font-weight: 800;
    color: #EE4408;
    letter-spacing: -3px;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.kpi-big-unit {
    font-size: 11px;
    color: rgba(255,255,255,0.50);
    margin-top: 8px;
    font-family: var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kpi-single-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.50);
    margin-top: 14px;
    font-family: var(--mono);
}

.kpi-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.kpi-current-val {
    font-size: 15px;
    font-weight: 700;
    color: #F5F3EC;
    font-family: var(--mono);
}

.kpi-current-label {
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    margin-top: 2px;
    font-family: var(--mono);
    letter-spacing: 0.03em;
}

.kpi-prog-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ── TODO PANEL ── */
.section-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    margin-bottom: 8px;
    font-family: var(--mono);
}

.todo-panel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    padding: 24px 24px 40px;
    min-height: 560px;
}

/* Label principal de la todo — section header principale */
.todo-panel > .section-lbl {
    font-size: 16px;
    font-weight: 800;
    color: #F34C0A;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-bottom: 18px;
}

/* Jalon dynamique sous le header todo */
.todo-next-jalon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: rgba(238,68,8,0.07);
    border: 1px solid rgba(238,68,8,0.18);
    border-radius: 7px;
    margin-bottom: 12px;
    overflow: hidden;
}

.todo-jalon-badge {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #EE4408;
    background: rgba(238,68,8,0.14);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    font-family: var(--mono);
    white-space: nowrap;
}

.todo-jalon-text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    font-family: var(--mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state — message centre orange (legacy) */
.kpi-empty-label {
    display: none;
}

/* Empty state — masque radial derrière le CTA */
.kpi-empty-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(13,13,15,0.96) 0%,
        rgba(13,13,15,0.82) 45%,
        transparent 75%
    );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 1;
}

/* Empty state — icône + texte centré */
.kpi-empty-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    pointer-events: none;
    z-index: 2;
}

.kpi-empty-center span {
    font-size: 18px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 0 32px rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.95);
}

.kpi-empty-sub {
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    white-space: nowrap;
    text-shadow: none;
    margin-top: -8px;
}

/* Empty state — label MESURABLE en haut à gauche */
.kpi-mesurable-label {
    position: absolute;
    top: 4px;
    left: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--mono);
    color: rgba(255,255,255,0.50);
    pointer-events: none;
}

/* Overlay "aucune mesure" sur graphique vide */
.kpi-empty-overlay {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
    pointer-events: none;
    letter-spacing: 0.04em;
}

.todo-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.todo-input {
    flex: 1;
    height: 46px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 10px;
    padding: 0 14px;
    color: #FFFDF6;
    font-size: 16px;
    font-family: var(--mono);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.todo-input:focus {
    border-color: rgba(238,68,8,0.70);
    box-shadow: 0 0 0 3px rgba(238,68,8,0.08);
}
.todo-input::placeholder { color: rgba(255,253,246,0.35); font-style: italic; font-weight: 400; }

.todo-plus-btn {
    width: 44px;
    height: 44px;
    background: #EE4408;
    border: 1px solid #EE4408;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.todo-plus-btn:hover { background: #ff5d1a; border-color: #ff5d1a; }

.todo-list { display: flex; flex-direction: column; gap: 0; }

.todo-empty {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
    cursor: pointer;
}
.todo-item:hover { background: rgba(255,255,255,0.03); }
.todo-item:hover .todo-del { opacity: 1; }
.todo-item:hover .todo-edit { opacity: 1; }

.todo-cb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.28);
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.todo-item.done .todo-cb {
    background: #0A2A53;
    border-color: #0A2A53;
}

.todo-item.done .todo-cb::after {
    content: '';
    width: 7px;
    height: 4px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.todo-text {
    flex: 1;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    user-select: none;
    font-family: var(--mono);
    cursor: text;
    outline: none;
    border-radius: 3px;
}
.todo-text.editing {
    user-select: text;
}

.todo-item.done .todo-text {
    text-decoration: line-through;
    color: rgba(255,255,255,0.50);
}

.todo-del {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.50);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}

.todo-del:hover {
    color: #EE4408;
    background: rgba(238,68,8,0.08);
}

.todo-drop {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.40);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, transform 0.18s;
}

.todo-drop svg { pointer-events: none; transition: transform 0.18s; transform: rotate(-90deg); }
.todo-drop.open svg { transform: rotate(0deg); }

.todo-drop:hover {
    color: #EE4408;
    background: rgba(238,68,8,0.08);
}

.todo-edit {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.50);
    font-size: 16px;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}

.todo-edit:hover {
    color: #EE4408;
    background: rgba(238,68,8,0.08);
}

.todo-edit-row {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.todo-edit-input {
    flex: 1;
    height: 32px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0 10px;
    color: #F5F3EC;
    font-size: 12px;
    font-family: var(--mono);
    outline: none;
}

.todo-mini-btn {
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #F5F3EC;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--mono);
}

.todo-mini-btn.primary {
    background: rgba(238,68,8,0.12);
    border-color: rgba(238,68,8,0.3);
    color: #EE4408;
}

.todo-done-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.07);
    cursor: pointer;
}

.todo-done-toggle {
    color: rgba(255,255,255,0.50);
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-done-toggle:hover {
    color: #EE4408;
}

/* ── SUBTASKS — style ClickUp ── */
.subtasks {
    margin: 0 0 0 32px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    transition: background 0.12s;
    cursor: default;
}
.subtask-item:hover { background: rgba(255,255,255,0.025); }
.subtask-item:hover .subtask-del { opacity: 1; }

/* Icône cercle loop — bouton status */
.subtask-icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.28);
    transition: color 0.15s;
}
.subtask-icon-btn:hover { color: rgba(255,255,255,0.65); }

/* SVG cercle — état pending */
.subtask-icon-svg { display: block; }
.subtask-icon-svg .subtask-check { opacity: 0; }

/* État done */
.subtask-item.done .subtask-icon-btn { color: #0A2A53; }
.subtask-item.done .subtask-icon-svg circle { fill: #0A2A53; stroke: #0A2A53; }
.subtask-item.done .subtask-icon-svg .subtask-check { opacity: 1; stroke: #FFFDF6; }

.subtask-text {
    flex: 1;
    font-size: 12px;
    color: rgba(255,255,255,0.70);
    font-family: var(--mono);
    cursor: text;
    outline: none;
    border-radius: 3px;
}
.subtask-text.editing {
    user-select: text;
}
.subtask-item.done .subtask-text {
    text-decoration: line-through;
    color: rgba(255,255,255,0.35);
}

.subtask-del {
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: color 0.12s, opacity 0.12s;
    padding: 0 2px;
}
.subtask-del:hover { color: #EE4408; }

/* Row "Ajouter" — toujours visible */
.subtask-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.subtask-add-icon {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.20);
    flex-shrink: 0;
}

.subtask-input {
    flex: 1;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-family: var(--mono);
    outline: none;
}
.subtask-input::placeholder { color: rgba(255,255,255,0.28); font-style: italic; }

/* ── SIDE PANEL — non-bloquant, dashboard toujours visible ── */
.side-panel-overlay {
    position: fixed;
    top: var(--navbar-height, 72px);
    right: 0;
    bottom: 0;
    width: 0;
    pointer-events: none;   /* jamais bloquant — le dashboard reste cliquable */
    z-index: 9000;
    /* Aucun backdrop, aucun blur, aucun fond sombre */
}

.side-panel-overlay.open {
    pointer-events: none;   /* l'overlay wrapper ne bloque jamais */
}

.side-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    max-width: min(480px, 90vw);
    background: #0e0e11;
    border-left: 1px solid rgba(238,68,8,0.4);
    padding: 20px 20px 40px;
    box-shadow: -16px 0 40px rgba(0,0,0,0.7);
    transform: translateX(100%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;   /* le panneau lui-même est interactif */
    overflow-y: auto;
    overflow-x: hidden;
}

.side-panel-overlay.open .side-panel {
    transform: translateX(0);
}

.side-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: #F5F3EC;
    margin: 0 0 16px;
    font-family: var(--mono);
    line-height: 1.4;
}

.side-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.50);
    font-size: 16px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.side-panel-close:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
}

.side-panel-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    margin: 20px 0 8px;
    font-family: var(--mono);
}

.side-panel-textarea {
    width: 100%;
    min-height: 100px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 10px 12px;
    color: #F5F3EC;
    font-size: 12px;
    font-family: var(--mono);
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
    line-height: 1.6;
}

.side-panel-textarea:focus {
    border-color: rgba(238,68,8,0.4);
}

/* ── CLICKUP-STYLE TASK PANEL ── */
.cp-status-row { margin-bottom: 12px; }

.cp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--mono);
    transition: all 0.15s;
    border: 1px solid;
}

.cp-status-badge.pending {
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}

.cp-status-badge.done {
    color: #EE4408;
    background: rgba(238,68,8,0.1);
    border-color: rgba(238,68,8,0.22);
}

.cp-status-badge:hover { filter: brightness(1.15); }

.cp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.cp-task-title {
    font-size: 16px;
    font-weight: 700;
    color: #F5F3EC;
    margin: 0 0 18px;
    font-family: var(--mono);
    line-height: 1.4;
    padding-right: 36px;
}

.cp-fields {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
}

.cp-field-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: start;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.cp-field-row:last-child { border-bottom: none; }

.cp-field-key {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
    letter-spacing: 0.02em;
    padding-top: 1px;
}

.cp-field-val {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    font-family: var(--mono);
    line-height: 1.5;
}

.cp-field-jalon { color: rgba(255,255,255,0.8); }

.cp-field-date {
    color: rgba(255,255,255,0.50);
    font-size: 11px;
}

.cp-notes-textarea {
    width: 100%;
    min-height: 64px;
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(255,255,255,0.62);
    font-size: 12px;
    font-family: var(--mono);
    outline: none;
    resize: none;
    line-height: 1.6;
}

.cp-notes-textarea::placeholder { color: rgba(255,255,255,0.50); font-style: italic; }

.cp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cp-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

.cp-section-count {
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

/* date on jalon hint */
.todo-jalon-date {
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── JALONS HORIZONTAL TIMELINE ── */
.jalons-panel {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
}

.jalons-manage-link {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.2s;
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

.jalons-manage-link:hover {
    color: #EE4408;
    border-color: rgba(238,68,8,0.25);
    background: rgba(238,68,8,0.06);
}

.jalons-scroll-wrap {
    overflow-x: auto;
    padding-bottom: 4px;
}

.jalons-scroll-wrap::-webkit-scrollbar { height: 3px; }
.jalons-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.jalons-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.jt-track { display: flex; align-items: flex-start; min-width: max-content; }

.jt-labels-top {
    display: flex;
    align-items: flex-end;
    min-width: max-content;
}

.jt-mid {
    display: flex;
    align-items: center;
    min-width: max-content;
}

.jt-labels-bot {
    display: flex;
    align-items: flex-start;
    min-width: max-content;
}

.jt-col-top {
    width: 130px;
    text-align: center;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.jt-col-bot {
    width: 130px;
    text-align: center;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.jt-spacer { flex: 1; min-width: 40px; }

.jt-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

.jt-date {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

.jt-dot-wrap {
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt-line-seg {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.08);
}

.jt-line-seg.done { background: rgba(238,68,8,0.35); }

.jt-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.18);
    background: transparent;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.2s;
    cursor: default;
}

.jt-dot:hover { transform: scale(1.2); }

.jt-dot.completed {
    background: #EE4408;
    border-color: #EE4408;
    box-shadow: 0 0 10px rgba(238,68,8,0.45);
}

.jt-dot.in_progress {
    border-color: #EE4408;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(238,68,8,0.12);
    animation: pulse-dot 2.2s ease-in-out infinite;
}

.jt-dot.in_progress::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #EE4408;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(238,68,8,0.12); }
    50%       { box-shadow: 0 0 0 6px rgba(238,68,8,0.05); }
}

.jt-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
    line-height: 1.3;
}

.jt-kpi {
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    line-height: 1.3;
    font-family: var(--mono);
}

.jt-prog {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(238,68,8,0.08);
    color: #EE4408;
    font-family: var(--mono);
    border: 1px solid rgba(238,68,8,0.12);
}

.jalons-empty {
    text-align: center;
    padding: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.50);
    font-family: var(--mono);
}

.jalons-empty a { color: #EE4408; text-decoration: none; }

/* ── CITATION ── */
.db-citation {
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: rgba(255,255,255,0.50);
    padding-top: 4px;
    font-family: var(--mono);
    letter-spacing: 0.03em;
}

/* ── EMPTY STATE ── */
.db-empty-state {
    padding: 80px 20px;
    text-align: center;
}

.db-empty-icon {
    color: rgba(238,68,8,0.22);
    margin-bottom: 24px;
}

.db-empty-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 26px;
    color: rgba(255,255,255,0.50);
    margin: 0 0 10px;
}

.db-empty-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.50);
    margin: 0 0 28px;
    font-family: var(--mono);
}

/* ── MODAL ── */
.m-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}

.m-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.m-box {
    background: #0f0f12;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 32px;
    width: 400px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.025) inset;
}

.m-title {
    font-size: 17px;
    font-weight: 700;
    color: #F5F3EC;
    margin: 0 0 6px;
}

.m-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.50);
    margin: 0 0 24px;
    line-height: 1.65;
    font-family: var(--mono);
}

.m-field { margin-bottom: 16px; }

.m-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.50);
    margin-bottom: 6px;
    font-family: var(--mono);
}

.m-input {
    width: 100%;
    height: 44px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0 14px;
    color: #F5F3EC;
    font-size: 14px;
    font-family: var(--mono);
    outline: none;
    transition: border-color 0.2s;
}

.m-input:focus { border-color: rgba(238,68,8,0.5); }

.m-error {
    font-size: 11px;
    color: #FF453A;
    margin-top: 4px;
    display: none;
    font-family: var(--mono);
}

.m-error.show { display: block; }

.m-btns {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.m-btn-cancel {
    flex: 1;
    height: 42px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--mono);
}

.m-btn-cancel:hover { background: rgba(255,255,255,0.09); }

.m-btn-ok {
    flex: 1;
    height: 42px;
    background: #EE4408;
    border: 1px solid #EE4408;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--mono);
}

.m-btn-ok:hover { background: rgba(238,68,8,0.88); }

.m-btn-delete {
    flex: 1;
    height: 42px;
    background: rgba(255,59,48,0.07);
    border: 1px solid rgba(255,59,48,0.22);
    color: #FF3B30;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--mono);
}

.m-btn-delete:hover { background: rgba(255,59,48,0.14); }

/* ── PROJECT SWITCHER — navbar dropdown ── */
.db-switcher { display: none; } /* inutilisé — remplacé par navbar-dropdown */

.db-nav-dropdown {
    position: relative;
    display: none; /* JS le passe à flex si >1 projet */
    align-items: center;
}

.db-nav-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 5px 10px 5px 12px;
    color: rgba(255,255,255,0.80);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.18s, background 0.18s;
}

.db-nav-trigger:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.22);
}

.db-nav-trigger svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.db-nav-dropdown.open .db-nav-trigger svg {
    transform: rotate(180deg);
}

.db-nav-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #141416;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 4px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.db-nav-dropdown.open .db-nav-list {
    display: block;
}

.db-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s;
}

.db-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
}

.db-nav-item.active {
    color: #F5F3EC;
    background: rgba(255,255,255,0.06);
}

/* ── PROJECT PANELS ── */
.db-panel { display: none; }
.db-panel.active { display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .dashboard-section,
    .dashboard-section.active {
        padding: 16px 16px 48px !important;
    }
    .db-2col { grid-template-columns: 1fr; }
    .db-row-kpi-smart { grid-template-columns: 1fr; }
    .proj-header { padding: 22px 22px 18px; flex-direction: column; }
    .proj-body {
        padding: 20px 22px 24px;
        gap: 16px;
        display: flex;
        flex-direction: column;
    }
    .proj-actions { padding-top: 0; }
    /* Reorder mobile : Tâches → KPI+SMART → Jalons */
    .todo-panel        { order: 1; }
    .db-row-kpi-smart  { order: 2; }
    .jalons-panel      { order: 3; }
    .db-citation       { order: 4; }
}

/* ── PANEL OUVERT : dim contexte (KPI+SMART et Jalons) ── */
.db-row-kpi-smart,
.jalons-panel {
    transition: opacity 0.24s ease;
}
body.panel-open .db-row-kpi-smart,
body.panel-open .jalons-panel {
    opacity: 0.32;
}