/*
 * ByCarl Core — Projets CSS (vue liste + Gantt + drawer)
 */

/* ── Toolbar ─────────────────────────────────────────────── */
.bycarl-projects-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.bycarl-view-toggle {
    display: flex;
    background: var(--bycarl-bg);
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius-sm);
    padding: .2rem;
    gap: .2rem;
}

.bycarl-view-btn {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .35rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    font-family: var(--bycarl-font);
    color: var(--bycarl-text-muted);
    background: transparent;
    border: none;
    border-radius: calc(var(--bycarl-radius-sm) - .1rem);
    cursor: pointer;
    transition: background var(--bycarl-transition), color var(--bycarl-transition);
    white-space: nowrap;
}
.bycarl-view-btn.is-active,
.bycarl-view-btn:hover {
    background: var(--bycarl-white);
    color: var(--bycarl-primary);
    box-shadow: var(--bycarl-shadow);
}

/* ── KPIs globaux projets ────────────────────────────────── */
.bycarl-proj-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .875rem;
    margin-bottom: 1.5rem;
}

.bycarl-proj-kpi {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bycarl-white);
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius);
    box-shadow: var(--bycarl-shadow);
}

.bycarl-proj-kpi__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--bycarl-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bycarl-proj-kpi__icon--blue   { background: #EEF2FF; color: var(--bycarl-primary); }
.bycarl-proj-kpi__icon--green  { background: #D1FAE5; color: var(--bycarl-accent); }
.bycarl-proj-kpi__icon--purple { background: #F3E8FF; color: #7C3AED; }
.bycarl-proj-kpi__icon--orange { background: #FEF3C7; color: var(--bycarl-warning); }

.bycarl-proj-kpi__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--bycarl-text);
    line-height: 1.2;
}
.bycarl-proj-kpi__label {
    font-size: .775rem;
    color: var(--bycarl-text-muted);
    margin-top: .1rem;
}
.bycarl-proj-kpi__sub {
    font-size: .725rem;
    color: var(--bycarl-text-muted);
}

/* ── Views ───────────────────────────────────────────────── */
.bycarl-projects-view { display: none; }
.bycarl-projects-view.is-active { display: block; }

/* ── Project card (liste) ────────────────────────────────── */
.bycarl-project-card {
    background: var(--bycarl-white);
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius);
    box-shadow: var(--bycarl-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow var(--bycarl-transition);
}
.bycarl-project-card:hover {
    box-shadow: var(--bycarl-shadow-md);
}

.bycarl-project-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.bycarl-project-card__title-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.bycarl-project-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bycarl-project-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bycarl-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bycarl-project-card__dates {
    font-size: .775rem;
    color: var(--bycarl-text-muted);
    white-space: nowrap;
}

.bycarl-project-card__actions {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
}

/* ── Icon buttons ────────────────────────────────────────── */
.bycarl-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--bycarl-radius-sm);
    border: 1px solid var(--bycarl-border);
    background: var(--bycarl-white);
    color: var(--bycarl-text-muted);
    cursor: pointer;
    transition: background var(--bycarl-transition), color var(--bycarl-transition), border-color var(--bycarl-transition);
    flex-shrink: 0;
}
.bycarl-icon-btn:hover {
    background: var(--bycarl-primary-lt);
    color: var(--bycarl-primary);
    border-color: var(--bycarl-primary);
}
.bycarl-icon-btn--request:hover {
    background: #D1FAE5;
    color: var(--bycarl-accent);
    border-color: var(--bycarl-accent);
}
.bycarl-icon-btn--toggle { border: none; background: transparent; }
.bycarl-icon-btn--toggle .bycarl-toggle-icon {
    transition: transform var(--bycarl-transition);
}
.bycarl-icon-btn--toggle.is-collapsed .bycarl-toggle-icon {
    transform: rotate(-90deg);
}

/* ── Progress bars ───────────────────────────────────────── */
.bycarl-project-card__progress {
    padding: 0 1.25rem .875rem;
}
.bycarl-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}
.bycarl-progress-label {
    font-size: .775rem;
    color: var(--bycarl-text-muted);
    font-weight: 500;
}
.bycarl-progress-pct {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bycarl-text-2);
}

.bycarl-progress-bar {
    height: 8px;
    background: var(--bycarl-bg);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.bycarl-progress-bar--sm { height: 5px; }
.bycarl-progress-bar--fin {
    height: 6px;
    position: relative;
    background: var(--bycarl-bg);
}

.bycarl-progress-bar__fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
}

/* Barres financières superposées */
.bycarl-progress-bar--fin .bycarl-progress-bar__fill--invoiced {
    background: #C7D2FE;
    position: absolute;
    top: 0; left: 0;
}
.bycarl-progress-bar--fin .bycarl-progress-bar__fill--paid {
    background: var(--bycarl-accent);
    position: absolute;
    top: 0; left: 0;
}

/* ── Résumé financier ────────────────────────────────────── */
.bycarl-project-card__financials {
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid var(--bycarl-bg);
    background: var(--bycarl-bg-2);
}
.bycarl-fin-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.bycarl-fin-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.bycarl-fin-item__label {
    font-size: .725rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bycarl-text-muted);
    font-weight: 600;
}
.bycarl-fin-item__value {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--bycarl-text);
}
.bycarl-fin-item__value--invoiced { color: var(--bycarl-primary); }
.bycarl-fin-item__value--paid     { color: var(--bycarl-accent); }
.bycarl-fin-item__value--remaining { color: var(--bycarl-text-muted); }

/* ── Sous-projets ────────────────────────────────────────── */
.bycarl-subprojects {
    border-top: 1px solid var(--bycarl-border);
    background: var(--bycarl-bg-2);
    padding: .5rem 0;
    display: none;
}
.bycarl-subprojects.is-open { display: block; }
.bycarl-subprojects--l3 {
    display: block;
    padding: .25rem 0 .25rem 2rem;
    background: transparent;
    border-top: none;
    margin-top: .25rem;
}

.bycarl-subproject {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1.25rem;
    border-bottom: 1px solid var(--bycarl-border);
    flex-wrap: wrap;
    transition: background var(--bycarl-transition);
}
.bycarl-subproject:last-child { border-bottom: none; }
.bycarl-subproject:hover { background: var(--bycarl-bg); }
.bycarl-subproject--l3 {
    padding: .375rem .875rem;
    font-size: .8125rem;
}

.bycarl-subproject__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bycarl-subproject__left {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 200px;
    flex: 1;
}
.bycarl-subproject__info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.bycarl-subproject__name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--bycarl-text);
}
.bycarl-subproject__dates {
    font-size: .725rem;
    color: var(--bycarl-text-muted);
}
.bycarl-subproject__center {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
}
.bycarl-subproject__right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.bycarl-subproject__pct {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bycarl-text-2);
    min-width: 32px;
    text-align: right;
}
.bycarl-subproject__fin {
    font-size: .775rem;
    color: var(--bycarl-text-muted);
}

/* ── Badges projet ───────────────────────────────────────── */
.bycarl-badge--project-pending   { background: #F3F4F6; color: #6B7280; }
.bycarl-badge--project-active    { background: #EEF2FF; color: var(--bycarl-primary); }
.bycarl-badge--project-paused    { background: #FEF3C7; color: #D97706; }
.bycarl-badge--project-completed { background: #D1FAE5; color: #059669; }
.bycarl-badge--project-cancelled { background: #FEE2E2; color: var(--bycarl-danger); }
.bycarl-badge--project-archived  { background: #F3F4F6; color: #9CA3AF; }
.bycarl-badge--sm {
    font-size: .7rem;
    padding: .15rem .5rem;
}

/* ══════════════════════════════════════════════════════════
   GANTT
   ══════════════════════════════════════════════════════════ */
.bycarl-gantt {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bycarl-white);
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius);
    box-shadow: var(--bycarl-shadow);
}
.bycarl-gantt__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem;
    color: var(--bycarl-text-muted);
}

/* Table Gantt */
.bycarl-gantt-table {
    min-width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    font-family: var(--bycarl-font);
}

/* Colonne label (gauche) */
.bycarl-gantt-table .gc-label {
    min-width: 200px;
    max-width: 260px;
    width: 220px;
    padding: 0;
    background: var(--bycarl-white);
    border-right: 2px solid var(--bycarl-border-dk);
    position: sticky;
    left: 0;
    z-index: 2;
}

/* En-têtes mois */
.bycarl-gantt-table thead th {
    padding: .625rem .75rem;
    text-align: center;
    font-weight: 600;
    color: var(--bycarl-text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--bycarl-bg-2);
    border-bottom: 1px solid var(--bycarl-border);
    white-space: nowrap;
}
.bycarl-gantt-table thead .gc-label {
    text-align: left;
    padding: .625rem 1rem;
    background: var(--bycarl-bg-2);
    border-right: 2px solid var(--bycarl-border-dk);
}
.bycarl-gantt-table thead .gc-month--today {
    background: var(--bycarl-primary-lt);
    color: var(--bycarl-primary);
}

/* Lignes */
.bycarl-gantt-table tbody tr {
    border-bottom: 1px solid var(--bycarl-border);
}
.bycarl-gantt-table tbody tr:last-child { border-bottom: none; }
.bycarl-gantt-table tbody tr:hover td  { background: var(--bycarl-bg-2); }
.bycarl-gantt-table tbody tr.gc-row--sub td { background: var(--bycarl-bg-2); }
.bycarl-gantt-table tbody tr.gc-row--sub:hover td { background: var(--bycarl-bg); }

/* Label cellule */
.gc-label-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.gc-label-cell:hover .gc-label-name { color: var(--bycarl-primary); }
.gc-label-indent { display: inline-block; width: 1rem; flex-shrink: 0; }
.gc-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gc-label-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--bycarl-text);
    transition: color var(--bycarl-transition);
}
.gc-row--sub .gc-label-name { font-weight: 500; font-size: .775rem; }
.gc-label-pct {
    font-size: .725rem;
    font-weight: 700;
    color: var(--bycarl-text-muted);
    flex-shrink: 0;
}

/* Cellules timeline */
.bycarl-gantt-table tbody td.gc-cell {
    padding: .375rem .25rem;
    min-width: 52px;
    position: relative;
    vertical-align: middle;
}
.bycarl-gantt-table tbody td.gc-cell--today {
    background: rgba(79, 106, 240, .04);
}

/* Barre Gantt */
.gc-bar {
    height: 20px;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
    opacity: .9;
    transition: opacity var(--bycarl-transition);
    cursor: pointer;
}
.gc-row--sub .gc-bar { height: 14px; }
.gc-bar:hover { opacity: 1; }
.gc-bar__fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 99px;
    opacity: .85;
    transition: width .4s ease;
}

/* Tooltip Gantt */
.bycarl-gantt-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--bycarl-text);
    color: #fff;
    font-size: .775rem;
    line-height: 1.5;
    padding: .5rem .875rem;
    border-radius: var(--bycarl-radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    max-width: 240px;
    box-shadow: var(--bycarl-shadow-md);
    white-space: pre-line;
}
.bycarl-gantt-tooltip.is-visible { opacity: 1; }

/* Ligne "aujourd'hui" */
.gc-today-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: rgba(79,106,240,.5);
    pointer-events: none;
    z-index: 3;
}

/* ══════════════════════════════════════════════════════════
   DRAWER latéral
   ══════════════════════════════════════════════════════════ */
.bycarl-project-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}
.bycarl-project-drawer[aria-hidden="false"] { pointer-events: auto; }

.bycarl-project-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .25s ease;
    cursor: pointer;
}
.bycarl-project-drawer[aria-hidden="false"] .bycarl-project-drawer__backdrop {
    opacity: 1;
}

.bycarl-project-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(520px, 92vw);
    background: var(--bycarl-white);
    box-shadow: -4px 0 32px rgba(0,0,0,.15);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.bycarl-project-drawer[aria-hidden="false"] .bycarl-project-drawer__panel {
    transform: translateX(0);
}

.bycarl-project-drawer__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--bycarl-text-muted);
    gap: .75rem;
}

/* Contenu drawer */
.bycarl-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.375rem 1.5rem 1rem;
    border-bottom: 1px solid var(--bycarl-border);
    position: sticky;
    top: 0;
    background: var(--bycarl-white);
    z-index: 2;
}
.bycarl-drawer-head__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .3rem;
}
.bycarl-drawer-head__info { flex: 1; min-width: 0; }
.bycarl-drawer-head__name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bycarl-text);
    margin: 0 0 .25rem;
}
.bycarl-drawer-head__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.bycarl-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius-sm);
    background: var(--bycarl-white);
    color: var(--bycarl-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--bycarl-transition), color var(--bycarl-transition);
}
.bycarl-drawer-close:hover { background: var(--bycarl-bg); color: var(--bycarl-text); }

/* Tabs drawer */
.bycarl-drawer-tabs {
    display: flex;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--bycarl-border);
    gap: 0;
    background: var(--bycarl-white);
    position: sticky;
    top: 74px;
    z-index: 2;
}
.bycarl-drawer-tab {
    padding: .625rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bycarl-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: var(--bycarl-font);
    transition: color var(--bycarl-transition), border-color var(--bycarl-transition);
    white-space: nowrap;
    margin-bottom: -1px;
}
.bycarl-drawer-tab.is-active {
    color: var(--bycarl-primary);
    border-bottom-color: var(--bycarl-primary);
}

/* Body drawer */
.bycarl-drawer-body { padding: 1.25rem 1.5rem; }
.bycarl-drawer-pane { display: none; }
.bycarl-drawer-pane.is-active { display: block; }

/* Résumé financier dans drawer */
.bycarl-drawer-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.bycarl-drawer-kpi {
    padding: .875rem 1rem;
    background: var(--bycarl-bg-2);
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius-sm);
}
.bycarl-drawer-kpi__label {
    font-size: .725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bycarl-text-muted);
    margin-bottom: .25rem;
}
.bycarl-drawer-kpi__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bycarl-text);
}
.bycarl-drawer-kpi--invoiced .bycarl-drawer-kpi__value { color: var(--bycarl-primary); }
.bycarl-drawer-kpi--paid .bycarl-drawer-kpi__value     { color: var(--bycarl-accent); }

/* Liste lignes dans drawer */
.bycarl-drawer-list { list-style: none; padding: 0; margin: 0; }
.bycarl-drawer-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--bycarl-border);
}
.bycarl-drawer-list__item:last-child { border-bottom: none; }
.bycarl-drawer-list__title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--bycarl-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bycarl-drawer-list__sub {
    font-size: .75rem;
    color: var(--bycarl-text-muted);
    margin-top: .1rem;
}
.bycarl-drawer-empty {
    text-align: center;
    color: var(--bycarl-text-muted);
    font-size: .875rem;
    padding: 2rem 0;
}

/* ── Modal demande ───────────────────────────────────────── */
.bycarl-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.bycarl-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    cursor: pointer;
}
.bycarl-modal__box {
    position: relative;
    z-index: 1;
    background: var(--bycarl-white);
    border-radius: var(--bycarl-radius);
    box-shadow: var(--bycarl-shadow-md);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}
.bycarl-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.375rem .875rem;
    border-bottom: 1px solid var(--bycarl-border);
}
.bycarl-modal__title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--bycarl-text);
    margin: 0;
}
.bycarl-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius-sm);
    background: transparent;
    color: var(--bycarl-text-muted);
    cursor: pointer;
    transition: background var(--bycarl-transition);
}
.bycarl-modal__close:hover { background: var(--bycarl-bg); }
.bycarl-modal .bycarl-form { padding: 1.25rem 1.375rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .bycarl-proj-kpis { grid-template-columns: repeat(2, 1fr); }
    .bycarl-project-card__header { flex-direction: column; align-items: flex-start; }
    .bycarl-subproject__center { min-width: 80px; }
    .bycarl-fin-row { gap: 1rem; }
    .bycarl-project-drawer__panel { width: 100vw; }
    .bycarl-drawer-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .bycarl-proj-kpis { grid-template-columns: 1fr; }
    .bycarl-subproject { flex-wrap: wrap; }
}