/**
 * projecteam-tools-ui — create/update FORM additions (task + project).
 *
 * Loaded only by modules/project/views/task/_form.php and
 * modules/project/views/default/_form.php on top of ptui-page.css
 * (which owns the base .ptui-form skin: labels, inputs, focus rings).
 * Everything here is scoped under .ptui-form. Tokens are the redesign
 * variables declared on .ptui-page (design-tokens.md).
 *
 * Audit 16.09.2026 items covered:
 *   T1  "start after the last task" option lives under the start field
 *   T3  the dependency question is a switch row inside the form
 *   T5  "more options" / "show more" read as real controls (chevron)
 *   G6  the working-days note is a quiet hint that hides when empty
 *   G10 save (brand) + cancel (ghost) side by side
 *   PC5 empty-team note with an invite link
 */

/* ---- T1: chained-start option directly under the start-date input ---- */
.ptui-form .ptui-follow {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.ptui-form .ptui-follow input[type="checkbox"] {
    margin: 3px 0 0;
    flex: 0 0 auto;
}
.ptui-form .ptui-follow label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    margin: 0;
    cursor: pointer;
}
.ptui-form .ptui-follow-set {
    display: none;
    font-size: 12px;
    color: var(--ink-soft); /* informational, never red/brand (audit G6) */
    margin-top: 3px;
}
.ptui-form .ptui-follow.on .ptui-follow-set {
    display: block;
}

/* ---- T3: switch row (components.md .switch — 34x20 pill, brand when on) ---- */
.ptui-form .ptui-switch-row {
    margin-top: 4px;
}
/* the switch and its note stack; the label never gets squeezed into a
 * few-words-wide column beside the note */
.ptui-form .ptui-switch-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ptui-form .ptui-switch-field {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    width: 100%;   /* the theme sizes form labels to their column; take the full row */
    max-width: 100%;
}
.ptui-form .ptui-switch-field input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ptui-form .ptui-switch-track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 100px;
    background: var(--border);
    flex: 0 0 auto;
    transition: background .15s ease;
}
.ptui-form .ptui-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24,20,37,.2);
    transition: transform .15s ease;
}
.ptui-form .ptui-switch-field input:checked + .ptui-switch-track {
    background: var(--brand);
}
.ptui-form .ptui-switch-field input:checked + .ptui-switch-track::after {
    transform: translateX(-14px);
}
.ptui-form .ptui-switch-field input:focus-visible + .ptui-switch-track {
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.ptui-form .ptui-switch-label {
    flex: 1 1 auto;
    white-space: normal;
    min-width: 0;
}
.ptui-form .ptui-field-note {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 4px;
}

/* ---- T5 / PC1: the reveal links read as controls, not stray text ---- */
.ptui-form .ptui-more-fields a,
.ptui-form .ptui-show-more a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.ptui-form .ptui-more-fields a:hover,
.ptui-form .ptui-show-more a:hover {
    background: var(--slate-soft);
    color: var(--ink);
    text-decoration: none;
}
.ptui-form .ptui-more-fields a i,
.ptui-form .ptui-show-more a i {
    font-size: 16px;
    line-height: 1;
}

/* ---- G6: the "{count} working days" note — a quiet hint under the
 * date row; the whole box disappears while the result is empty ---- */
.ptui-form .ptui-days-hint {
    display: none;
    margin: 0 0 12px;
    padding: 0 6px;
    font-size: 12.5px;
}
.ptui-form .ptui-days-hint:has(#dynamic-result:not(:empty)) {
    display: block;
}

/* ---- G10: actions row — ONE brand save, ghost cancel beside it ---- */
.ptui-form .ptui-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ptui-form .ptui-form-actions .btn {
    padding: 8px 22px;
    border-radius: var(--radius-sm);
}
.ptui-form .ptui-form-actions button[type="submit"].disabled {
    opacity: .65;
    pointer-events: none;
}

/* ---- TP3: duration group ("Duration" label + number/unit) ---- */
.ptui-form .endIsDate .input-group {
    flex-wrap: nowrap;
}

/* ---- PC5: empty team note ---- */
.ptui-form .ptui-team-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 13px;
}
.ptui-form .ptui-team-empty a {
    font-weight: 700;
    color: var(--brand-dark);
}

/* ---- section subtitle used above the "more" group ---- */
.ptui-form .ptui-section-note {
    font-size: 12px;
    color: var(--ink-faint);
    margin: 4px 0 10px;
}

@media (max-width: 767.98px) {
    .ptui-form .ptui-form-actions .btn {
        flex: 1 1 auto;
    }
}

/* ==================================================================
 * AI-first create (widgets/_ai_first.php): the free-text box that
 * comes BEFORE the form, and the "AI filled this" highlights after.
 * ================================================================== */
.ptui-aifirst {
    background: var(--surface, #fff); border: 1.5px solid var(--border, #E6E7F1);
    border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-card);
    padding: 22px 22px 18px; margin-bottom: 18px; max-width: 760px;
}
.ptui-aifirst-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ptui-aifirst-headtext { flex: 1 1 auto; min-width: 0; }
.ptui-aifirst-spark { font-size: 26px; line-height: 1; }
.ptui-aifirst-title { font-size: 19px; font-weight: 800; color: var(--ink, #181425); margin: 0 0 4px; }
.ptui-aifirst-sub { font-size: 13.5px; color: var(--ink-soft, #5C5872); margin: 0; line-height: 1.5; }
.ptui-aifirst-box {
    border: 1.5px solid var(--border, #E6E7F1); border-radius: 14px; background: #FAFAFD;
    padding: 10px 12px 8px; transition: border-color .15s ease, background .15s ease;
}
.ptui-aifirst-box:focus-within { border-color: var(--brand, #E2265A); background: #fff; }
.ptui-aifirst-box textarea {
    width: 100%; border: 0; outline: 0; background: transparent; resize: vertical;
    font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink, #181425); min-height: 76px;
}
.ptui-aifirst-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ptui-aifirst-mic {
    width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border, #E6E7F1);
    background: #fff; color: var(--ink-soft, #5C5872); font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ptui-aifirst-mic.is-on { background: var(--brand, #E2265A); border-color: var(--brand, #E2265A); color: #fff; animation: ptui-pulse 1.2s ease-in-out infinite; }
@keyframes ptui-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 38, 90, .45); } 50% { box-shadow: 0 0 0 9px rgba(226, 38, 90, 0); } }
.ptui-aifirst-mic.is-busy { background: #F1F2F8; color: var(--brand-dark, #B71046); border-color: var(--border, #E6E7F1); animation: none; }
.ptui-aifirst-miclabel { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-faint, #9694A8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptui-aifirst-mic.is-on ~ .ptui-aifirst-miclabel { color: var(--brand, #E2265A); }
.ptui-aifirst-mic.is-busy ~ .ptui-aifirst-miclabel { color: var(--brand-dark, #B71046); }
.ptui-aifirst-go { min-height: 42px; padding: 0 22px; border-radius: 11px; font-weight: 700; flex: 0 0 auto; }
.ptui-aifirst-status { display: block; margin: 8px 4px 0; font-size: 12.5px; color: var(--ink-soft, #5C5872); }
.ptui-aifirst-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--ink-faint, #9694A8); }
.ptui-aifirst-chip {
    border: 1px solid var(--border, #E6E7F1); background: #fff; border-radius: 999px;
    padding: 5px 11px; font-size: 12.5px; color: var(--ink-soft, #5C5872); text-align: start;
}
.ptui-aifirst-chip:hover { border-color: var(--brand, #E2265A); color: var(--brand-dark, #B71046); }
.ptui-aifirst-manual {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; margin: 0;
    border: 1px solid var(--border, #E6E7F1); border-radius: 999px; background: #fff;
    padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft, #5C5872); white-space: nowrap;
}
.ptui-aifirst-manual .mdi { font-size: 16px; }
.ptui-aifirst-manual:hover { color: var(--ink, #181425); }
.ptui-aifirst-back { margin: 0 0 10px; }
.ptui-link-brand { border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 700; color: var(--brand-dark, #B71046); }
.ptui-aifirst-note {
    background: #FCE6ED; color: var(--brand-dark, #B71046); border-radius: 10px;
    padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.ptui-form .form-group.ptui-ai-filled .form-control,
.ptui-form .form-group.ptui-ai-filled .select2-selection,
.ptui-form .form-group.ptui-ai-filled .redactor-box { box-shadow: 0 0 0 2px #FCE6ED, 0 0 0 3.5px #E2265A66 !important; }
@media (max-width: 575.98px) {
    .ptui-aifirst { padding: 18px 16px 14px; border-radius: 16px; }
    .ptui-aifirst-title { font-size: 17px; }
    .ptui-aifirst-head { flex-wrap: wrap; }
    .ptui-aifirst-manual { order: 3; margin-inline-start: 38px; }
}