/*  Collapsible form section — chrome for [data-collapsible] blocks.

    Used by the complaint intake forms (Complainant "File Complaint" wizard and the staff
    Direct Complaint entry) to fold away the blocks that eat the most vertical space — the
    Nature of Complaint checklist, the rich-text Description, the upload slots — behind a
    "+" bar that carries a live summary of what is inside.

    Behaviour lives in wwwroot/js/collapsible-section.js. Nothing here changes the markup that
    was already inside a section: the chrome sits AROUND it, so every id, class, name and
    validation hook the pages rely on is untouched. A collapsed body is display:none, which
    still posts its inputs with the form — collapsing never drops data.  */

.collapsible-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    /*  Wraps on purpose. On a phone the bar holds a badge, a title, a status pill and (on the
        complainant portal) an Urdu label; without wrapping the right-hand label refuses to
        shrink and squeezes the title and pill straight out of the bar. */
    flex-wrap: wrap;
    gap: 0.75rem;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: #f9fafb;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.collapsible-toggle:hover { background-color: #f3f4f6; border-color: #d1d5db; }
.collapsible-toggle:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }

.dark .collapsible-toggle { background-color: rgba(55, 65, 81, .5); border-color: #4b5563; }
.dark .collapsible-toggle:hover { background-color: rgba(75, 85, 99, .6); }

/*  "Bare" variant: the toggle IS a section's own coloured header bar, so it must not draw a
    second box of its own — only the plus badge and the summary pill are added on top of the
    header the page already had. Used where a whole card folds (the staff Direct Complaint
    screen is one accordion of these), which is why the badge sits on the right there: that is
    where a card header's control belongs, and it keeps the section's own icon in place. */
.collapsible-toggle.is-bare,
.dark .collapsible-toggle.is-bare {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    transition: filter .15s ease;
}

.collapsible-toggle.is-bare:hover,
.dark .collapsible-toggle.is-bare:hover {
    border: 0;
    background-color: transparent;
    filter: brightness(1.07);
}

.collapsible-toggle.is-bare .collapsible-icon { background-color: rgba(255, 255, 255, .22); color: #fff; }
.collapsible-toggle.is-bare .collapsible-summary { background-color: rgba(255, 255, 255, .18); color: #fff; font-weight: 500; }
.collapsible-toggle.is-bare .collapsible-summary[data-state="filled"] { background-color: rgba(255, 255, 255, .28); color: #fff; }
.collapsible-toggle.is-bare .collapsible-summary[data-state="required"] { background-color: rgba(254, 243, 199, .25); color: #fef3c7; }

/* Plus / minus badge */
.collapsible-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ede9fe;
    color: #6d28d9;
}

.dark .collapsible-icon { background-color: rgba(109, 40, 217, .3); color: #c4b5fd; }

/*  Scoped to the section's OWN toggle, not any descendant. These sections nest — a wizard card
    folds as a whole and holds folded blocks of its own — so a descendant selector let an open
    outer card hide the vertical bar of every collapsed section inside it, leaving them showing
    "−" while their body was still closed. The toggle is always a direct child of .collapsible
    (the same contract the JS relies on via :scope > .collapsible-toggle). */
.collapsible-icon-v { transition: opacity .18s ease, transform .18s ease; }
.collapsible.is-open > .collapsible-toggle .collapsible-icon-v { opacity: 0; transform: rotate(90deg); }

/* Title block: heading text, then the live summary pill */
.collapsible-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/*  A flex item defaults to min-width:auto, i.e. it refuses to shrink below its own text. That
    is what pushed a long bilingual pill out of the bar at 320px, so every child is told it may
    shrink and its text may break. */
.collapsible-main > * { min-width: 0; }

.collapsible-aside { min-width: 0; margin-left: auto; }

/*  Right-hand cluster: the optional Urdu label AND the plus/minus badge, held together so they
    travel as one unit when the bar wraps on a phone. Two separate margin-left:auto items would
    share the free space between them instead, stranding the badge in the middle of the bar. */
.collapsible-end {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.collapsible-summary {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    max-width: 100%;
    overflow-wrap: anywhere;
    background-color: #f3f4f6;
    color: #6b7280;
}

.collapsible-summary[data-state="filled"] { background-color: #d1fae5; color: #065f46; }
.collapsible-summary[data-state="required"] { background-color: #fef3c7; color: #92400e; }

.dark .collapsible-summary { background-color: rgba(75, 85, 99, .6); color: #d1d5db; }
.dark .collapsible-summary[data-state="filled"] { background-color: rgba(6, 95, 70, .45); color: #a7f3d0; }
.dark .collapsible-summary[data-state="required"] { background-color: rgba(146, 64, 14, .45); color: #fde68a; }

/* The folded content itself */
.collapsible-body { display: none; }

.collapsible.is-open > .collapsible-body {
    display: block;
    padding-top: 0.75rem;
    animation: collapsibleIn .18s ease-out;
}

/* When the folded content already carries its own padding (a whole card body), the gap the
   toggle bar normally needs would double it up. */
.collapsible.is-open > .collapsible-body.is-flush { padding-top: 0; }

@keyframes collapsibleIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* A section holding a validation error is opened by script and flagged here, so a required
   block can never be left folded over an error the user cannot see. */
.collapsible.has-error > .collapsible-toggle { border-color: #f87171; background-color: rgba(254, 226, 226, .6); }
.dark .collapsible.has-error > .collapsible-toggle { border-color: #b91c1c; background-color: rgba(127, 29, 29, .3); }