/* MVP: styling gebeurt via Tailwind CDN in templates/base.html.twig.
   Dit bestand is de plek voor eigen CSS zodra je overstapt op een
   lokale Tailwind-build (zie PLAN.md). */

/* ---- Sleepbare, inline bewerkbare takenlijst (task_list_controller) ---- */
.task-grid {
    display: grid;
    grid-template-columns: 1.25rem minmax(18rem, 1fr) 7.5rem 8rem 8.5rem 10rem 8.25rem 8.25rem 6.5rem 1.75rem;
    align-items: center;
    column-gap: 0.25rem;
    min-width: 1080px;
}
.task-cell {
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    padding: 0.25rem 0.4rem;
    font-size: 0.8125rem;
}
.task-cell:hover { border-color: #e2e8f0; }
.task-cell:focus { outline: none; border-color: #6366f1; background: #fff; }
select.task-cell[data-colored] { color: #fff; font-weight: 500; text-align: center; text-align-last: center; }
select.task-cell[data-colored] option { color: #0f172a; background: #fff; }
.task-title-cell { padding-left: calc(var(--depth, 0) * 1.5rem); }
.task-row.is-saved { animation: task-saved 0.9s ease-out; }
.task-row.is-error { background: #fef2f2; }
@keyframes task-saved { from { background: #dcfce7; } to { background: transparent; } }
.task-ghost { opacity: 0.35; background: #eef2ff; }
.task-children { min-height: 0; }
/* Tijdens slepen: lege sublijsten tonen als drop-zone, zodat je een taak onder een andere kunt hangen */
.is-dragging .task-children:empty {
    min-height: 0.5rem;
    margin-left: calc((var(--depth, 0) + 1) * 1.5rem + 1.75rem);
    border-radius: 0.25rem;
    outline: 1px dashed #c7d2fe;
}
.task-node.is-collapsed > .task-children { display: none; }
.drag-handle { cursor: grab; user-select: none; }
.drag-handle:active { cursor: grabbing; }

/* ---- Tijdlijn (gantt_controller) ---- */
/* Balkkleur komt per taak uit de controller (groep/fase/status); voortgang = donkerdere overlay. */
.gantt .bar-progress { fill: rgba(0, 0, 0, 0.28) !important; }
.gantt .bar-label:not(.big) { fill: #fff; font-weight: 500; }

/* ---- Mobiel ---- */
/* Standaard (desktop): de veldwrappers en mobiele knoppen zijn onzichtbaar. */
.task-field { display: contents; }
.task-more, .touch-only, .task-remove-label { display: none; }
.task-add-root { min-width: 1080px; }
.drag-handle { touch-action: none; }

/* Touch: acties die anders pas bij hover verschijnen altijd tonen */
@media (hover: none) {
    .task-row [class*="opacity-0"] { opacity: 1; }
    .touch-only { display: block; }
}

@media (max-width: 767px) {
    /* iOS zoomt in op velden kleiner dan 16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font-size: 16px; }
    .gantt-container .side-header select { width: auto; }
    .task-row [class*="opacity-0"] { opacity: 1; }

    /* Groepen: geen omkaderde tabel maar een kop (in groepskleur) met kaarten eronder, zoals in de Monday-app */
    [data-group-section] { background: transparent; border: 0 !important; }
    [data-group-section] > details > summary { padding-left: 0.25rem; padding-right: 6rem; }
    [data-group-section] > details > div { overflow: visible; }
    .task-grid-head { display: none; }
    .task-add-root { min-width: 0; padding: 0.5rem 0 0; }
    .task-add-root input {
        max-width: none; padding: 0.75rem; text-align: center;
        border: 1px dashed #cbd5e1; border-radius: 0.75rem; background: transparent;
    }
    [data-group-section] ul[data-list][data-parent-id=""] { padding-left: 0; padding-right: 0; }

    /* Nieuw-taak-invoerveld (task_list_controller.openNewInput) */
    li[data-new-input] { grid-template-columns: 0 minmax(0, 1fr); min-width: 0; margin-top: 0.5rem; }
    li[data-new-input] .task-title-cell { padding-left: 0; }

    /* Een taak = een kaart: titel bovenaan, daaronder status/fase als pills.
       De ⋯-knop klapt de overige velden open. Subtaken staan ingesprongen eronder. */
    .task-grid.task-row {
        display: flex; flex-wrap: wrap; align-items: center;
        column-gap: 0.5rem; row-gap: 0; min-width: 0;
    }
    .task-node > .task-row {
        margin-top: 0.5rem; padding: 0.625rem 0.75rem 0.75rem 0.5rem;
        background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid var(--group-color, #c4c4c4);
        border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }
    .task-node > .task-children { margin-left: 1rem; padding: 0; }
    .is-dragging .task-children:empty { margin-left: 1rem; }
    .task-row::before { content: ""; order: 1; flex: 0 0 100%; }   /* regeleinde na de titelrij */

    .task-row > :nth-child(1) { order: 0; flex: 0 0 1.5rem; padding: 0.5rem 0; text-align: center; }
    .task-row > :nth-child(2) { order: 0; flex: 1 1 0; min-width: 0; }
    .task-row > .task-more { order: 0; flex: 0 0 2.5rem; display: block; }
    .task-row.is-open > .task-more { background: #eef2ff; color: #4f46e5; }

    .task-cell { min-height: 2.25rem; }
    .task-title-cell { padding-left: 0; }
    .task-title-cell .task-cell { border-color: transparent; font-weight: 600; padding-left: 0.25rem; }
    .task-title-cell > button, .task-title-cell > a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 1.75rem; }
    .task-title-cell > [data-toggle] { min-width: 1.5rem; }
    .task-title-cell > [data-toggle].invisible { display: none; }
    .task-sub-label { display: none; }
    /* "+ sub" en ↗ pas na openklappen: houdt de kaart rustig */
    .task-row:not(.is-open) .task-title-cell > [data-action="task-list#addSub"],
    .task-row:not(.is-open) .task-title-cell > a[title^="Details"] { display: none; }

    /* Velden als pills onder de titel; lege pills en de rest pas na openklappen */
    .task-row > .task-field { display: block; order: 2; flex: 0 0 auto; max-width: 100%; min-width: 0; margin-top: 0.5rem; }
    .task-row > .task-field[data-empty]:not(.task-more) { display: none; }
    .task-row:not(.is-open) > :nth-child(n + 6):not(.task-more) { display: none; }
    .task-row > .task-field select.task-cell {
        width: auto; max-width: 100%; min-height: 0; padding: 0.3rem 0.75rem;
        border-radius: 0.375rem; border-color: transparent;
        -webkit-appearance: none; appearance: none;
    }
    .task-row > .task-field::before { display: none; }

    .task-row.is-open > .task-field, .task-row.is-open > .task-field[data-empty] { flex: 1 1 calc(50% - 0.25rem); display: block; }
    .task-row.is-open > .task-field select.task-cell { width: 100%; padding: 0.4rem 0.75rem; }
    .task-row.is-open > .task-field::before {
        content: attr(data-label); display: block; margin-bottom: 0.125rem;
        font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8;
    }
    .task-row.is-open .task-cell:not(select) { border-color: #e2e8f0; }
    .task-row.is-open .task-cell[type="date"] { padding-left: 0.35rem; padding-right: 0.15rem; }
    .task-row .task-popover { left: auto; right: 0; }

    .task-row > :nth-child(10) { order: 3; flex: 1 1 100%; margin-top: 0.25rem; padding: 0.5rem 0 0; text-align: right; color: #ef4444; }
    .task-remove-label { display: inline; }
}