/* ==========================================================================
   Nizam — the collapsed "More details" section (components/fold.blade.php)
   --------------------------------------------------------------------------
   Loaded on every page, because the fold sits inside forms built three
   different ways: the token-based .nz-form / .nz-ledger create screens, the
   legacy widget + Bootstrap 3 grid edit screens, and modal forms. The rules
   used to live in nizam-forms.css scoped to .nz-form, which only the first
   group loads.

   Tokens only, logical properties only, a hairline rather than a shadow.
   ========================================================================== */

.nz-fold {
    background: var(--nz-surface);
    border: 1px solid var(--nz-line-strong);
    border-radius: var(--nz-radius-lg);
    margin-block-end: var(--nz-space-4);
}

.nz-fold-btn {
    display: flex;
    align-items: center;
    gap: var(--nz-space-3);
    inline-size: 100%;
    min-height: var(--nz-tap-min);
    padding: var(--nz-space-3) var(--nz-space-4);
    border: 0;
    background: transparent;
    text-align: start;
    font-family: var(--nz-font);
    color: var(--nz-ink);
    cursor: pointer;
    list-style: none;
}

.nz-fold-btn::-webkit-details-marker {
    display: none;
}

.nz-fold-btn:focus-visible {
    outline: none;
    box-shadow: inset var(--nz-focus-ring);
    border-radius: var(--nz-radius-lg);
}

.nz-fold-btn .nz-sec-title {
    flex-shrink: 0;
}

.nz-fold-title {
    font-size: var(--nz-text-base);
    font-weight: var(--nz-fw-bold);
    line-height: var(--nz-lh-tight);
}

.nz-fold-hint {
    font-size: var(--nz-text-xs);
    color: var(--nz-ink-2);
}

/* How many folded fields carry a typed-in value. Only shown while closed and
   only when the number is not zero (nizam-forms.js). */
.nz-fold-count {
    margin-inline-start: auto;
    padding: 1px var(--nz-space-2);
    border: 1px solid var(--nz-line-strong);
    border-radius: 999px;
    background: var(--nz-surface-sunk);
    color: var(--nz-ink-2);
    font-size: var(--nz-text-xs);
    white-space: nowrap;
    font-variant-numeric: var(--nz-num);
}

.nz-fold-count[hidden] {
    display: none;
}

.nz-fold-count:not([hidden]) + .nz-fold-sign {
    margin-inline-start: var(--nz-space-3);
}

.nz-fold[open] .nz-fold-count {
    display: none;
}

.nz-fold-sign {
    margin-inline-start: auto;
    flex-shrink: 0;
    color: var(--nz-ink-2);
    font-size: var(--nz-text-base);
    transition: var(--nz-transition);
}

.nz-fold[open] .nz-fold-sign,
.nz-fold.is-open .nz-fold-sign {
    transform: rotate(45deg);
}

.nz-fold-body {
    padding: 0 var(--nz-space-4) var(--nz-space-4);
}

/* Sub-headings a form keeps inside its fold (the old separate sections). */
.nz-fold-body .nz-fold-group {
    margin-block-start: var(--nz-space-4);
    padding-block-start: var(--nz-space-4);
    border-block-start: 1px solid var(--nz-line);
}

.nz-fold-body .nz-fold-group:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
}

.nz-fold-body .nz-fold-group > h4,
.nz-fold-body .nz-fold-group > .nz-sec-title {
    margin: 0 0 var(--nz-space-3);
    font-family: var(--nz-font);
    font-size: var(--nz-text-md);
    font-weight: var(--nz-fw-bold);
    color: var(--nz-ink);
}

/* Widgets initialised while the fold was closed measured a zero width. */
.nz-fold-body .select2-container {
    inline-size: 100% !important;
}

.nz-fold-body .tox-tinymce {
    inline-size: 100% !important;
}

.nz-fold-body > .row:last-child {
    margin-block-end: 0;
}