/* Presentation for the todos (Úkoly) module — the "My todos" inbox page (M-119) + the user-created ad-hoc
   jotter and its layout (M-124). Content-only: the page renders inside the platform shell's content frame, so
   page chrome (`.platform-page__*`, `.platform-empty`, `.platform-meta`), the card box (`.platform-card`),
   the badge (`.platform-badge`) and the buttons (`.platform-btn*`) all come from the platform layer. The roomy
   todo-card look + its responsive grid were extracted into the shared `<x-platform::todo-card>` primitive
   (platform's todo-card.css, M-171), so this sheet keeps ONLY the inbox-specific add-form / edit-form layout.

   Colors, spacing, radii and type come from the platform design tokens (tokens.css) — themeable without
   touching markup (coding-standards §4 and §12). Mobile-first; no inline styles. */

/* ---- Add form: one compact wrapping row (the personal ad-hoc jotter, M-124) --------------------- */
/* A single row of field-groups (Title grows, then Note, Due, Priority, Add) that wraps onto further lines
   only when the row runs out of width — so it stays a thin strip on desktop and collapses gracefully on
   mobile. Items align to the bottom so the Add button lines up with the inputs, not their labels. */
.todos-add-form {
    display: flex;
    /* The element also carries `.platform-form`, whose base is a narrow COLUMN stack (flex-direction: column
       + max-width: 40rem) meant for tall forms. Override both here so the jotter is a real full-width ROW —
       otherwise the fields stack and the strip is capped at 40rem (the "broken" layout). */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--platform-space-sm, 0.5rem);
    max-width: none;
}

/* The jotter now lives in a platform card (M-153) so it reads as a distinct "add" panel; the card owns the
   spacing down to the todo list, so the form inside it no longer carries its own bottom margin. */
.todos-add-card {
    margin-bottom: var(--platform-space-lg, 1rem);
}

.todos-add-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs, 0.25rem);
    /* A sensible min so a field-group wraps rather than crushing; grows to share the row. */
    flex: 1 1 8rem;
}

/* Title + Note carry the prose, so they take twice the share of the compact Due / Priority controls. */
.todos-add-form__field--title,
.todos-add-form__field--note {
    flex: 2 1 12rem;
}

/* The submit hugs its content at the end of the row (never stretches), bottom-aligned with the inputs. */
.todos-add-form__submit {
    flex: 0 0 auto;
}

/* The (rare) title validation message drops onto its own full-width line under the row. */
.todos-add-form__error {
    flex: 1 0 100%;
}

/* The edit page keeps the full stacked form (partials/form.blade.php); its action row sits inline. */
.todos-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-sm, 0.5rem);
}

/* ---- Recently closed (M-154): section chrome around the shared closed-card grid ----------------- */
/* Sits below the active grid, separated by extra top space so it reads as a distinct, secondary section. The
   grid + faded card look come from the shared `<x-platform::todo-card>` primitive (platform's todo-card.css);
   this only spaces + labels the section. */
.todos-closed {
    margin-top: var(--platform-space-lg, 1rem);
}

.todos-closed__title {
    margin: 0 0 var(--platform-space-md, 0.75rem);
    font-size: var(--platform-font-size-md, 1rem);
    font-weight: 600;
}