/* W6: Declaration form polish — card-based fieldsets, accordion premium look,
 * compact alerts, sticky save bar refinements.
 */

/* Fieldset-as-card pattern.
 *
 * Crispy `Fieldset("Title", ...)` рендерира:
 *   <fieldset class="ddform-fieldset ddform-fieldset--ident">
 *     <legend>Title</legend>
 *     ...rows...
 *   </fieldset>
 */
.ddform-fieldset {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.1rem 1.25rem 0.75rem;
    margin: 0 0 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-fast) var(--ease-out);
    position: relative;
}

.ddform-fieldset:hover {
    box-shadow: var(--shadow-md);
}

.ddform-fieldset > legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4b5563;
    background: var(--surface-1);
    padding: 0 0.65rem;
    margin-bottom: 0.6rem;
    margin-left: -0.5rem;
    border-radius: 6px;
    /* Bootstrap default ги задава legend-ите како block-display; вратени се на
       inline за да остане clean small-cap chip над картичката. */
    float: none;
    width: auto;
}

.ddform-fieldset > legend i {
    color: var(--st-signing);
}

.ddform-fieldset::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    border-radius: 12px 12px 0 0;
    /* Default accent colour — applies to cards with no --modifier (e.g. the
     * former sub-section cards converted to fieldsets). Overridden below by the
     * modifier classes and the header-icon rules. */
    background: linear-gradient(90deg, var(--st-signing), transparent);
    opacity: 0.4;
}

/* Discriminator цветни ленти по тип — modifier class (оригиналните 4 картички) … */
.ddform-fieldset--ident::before     { background: linear-gradient(90deg, var(--st-signing), transparent); }
.ddform-fieldset--customs::before   { background: linear-gradient(90deg, var(--st-validated), transparent); }
.ddform-fieldset--parties::before   { background: linear-gradient(90deg, var(--prov-import), transparent); }
.ddform-fieldset--transport::before { background: linear-gradient(90deg, var(--st-awaiting), transparent); }

/* … или по header-icon (поранешните .ddform-section картички, без modifier). */
.ddform-fieldset:has(> legend i.fa-truck)::before        { background: linear-gradient(90deg, var(--st-awaiting), transparent); }
.ddform-fieldset:has(> legend i.fa-exchange-alt)::before { background: linear-gradient(90deg, var(--prov-import), transparent); }
.ddform-fieldset:has(> legend i.fa-shield-alt)::before   { background: linear-gradient(90deg, var(--st-validated), transparent); }
.ddform-fieldset:has(> legend i.fa-coins)::before        { background: linear-gradient(90deg, var(--st-awaiting), transparent); }
.ddform-fieldset:has(> legend i.fa-warehouse)::before    { background: linear-gradient(90deg, var(--st-signing), transparent); }
.ddform-fieldset:has(> legend i.fa-percentage)::before   { background: linear-gradient(90deg, var(--st-failed), transparent); }
.ddform-fieldset:has(> legend i.fa-file-alt)::before     { background: linear-gradient(90deg, var(--prov-import), transparent); }
.ddform-fieldset:has(> legend i.fa-history)::before      { background: linear-gradient(90deg, var(--st-created), transparent); }
.ddform-fieldset:has(> legend i.fa-box-open)::before     { background: linear-gradient(90deg, var(--prov-import), transparent); }

/* Form controls внатре во fieldset / section — slightly tighter spacing.
 * Both the crispy `.ddform-fieldset` cards (Идентификација/Царина/Учесници/
 * Транспорт) and the hand-written `.ddform-section` cards (Достава/Трансакција/
 * Гаранции/Склад/…) share this inner polish, so every card looks identical. */
.ddform-fieldset .form-group,
.ddform-fieldset .mb-3,
.ddform-section .form-group,
.ddform-section .mb-3 {
    margin-bottom: 0.4rem !important;
}

.ddform-fieldset label.col-form-label,
.ddform-fieldset label,
.ddform-section label.col-form-label,
.ddform-section label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.15rem;
}

.ddform-fieldset .form-control,
.ddform-fieldset .form-select,
.ddform-section .form-control,
.ddform-section .form-select {
    font-size: 0.9rem;
    border-color: var(--border-emphasis);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.ddform-fieldset .form-control:focus,
.ddform-fieldset .form-select:focus,
.ddform-section .form-control:focus,
.ddform-section .form-select:focus {
    border-color: var(--st-signing);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Required marker — црвена ѕвезда. */
.ddform-fieldset .asteriskField,
.ddform-section .asteriskField {
    color: var(--st-failed);
    margin-left: 0.2rem;
}

/* Tom-select dropdown polish. */
.ddform-fieldset .ts-control,
.ddform-section .ts-control {
    border-color: var(--border-emphasis);
    font-size: 0.9rem;
    min-height: 32px;
    border-radius: 6px;
}

.ddform-fieldset .ts-control.focus,
.ddform-section .ts-control.focus {
    border-color: var(--st-signing);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* The former `.ddform-section` sub-section cards (Услови за достава, Трансакција,
 * Гаранции, Склад, Декларирана вредност, and the item detail/modal sections) are
 * now real <fieldset class="ddform-fieldset"> elements — same markup as the four
 * crispy cards above — so they share ALL the styling here (card, legend chip,
 * post-legend ::before accent line, inner-control polish) and render identically.
 * No bespoke `.ddform-section` styles are needed. */


/* Compact alerts row — top-of-form ribbon кога има многу alerts. */
.declaration-alerts-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.declaration-alerts-row .alert {
    margin-bottom: 0;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    border-radius: 8px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Sticky save bar refinement. */
.sticky-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-subtle);
    padding: 0.65rem 1rem;
    margin: 1rem -1rem -1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 -4px 12px -2px rgba(0, 0, 0, 0.04);
}

.sticky-save-bar .btn {
    font-weight: 500;
}

/* ============================================================
 * Formsets — row-based tables (items, costs, docs, guarantees, dv1).
 * Заеднички pattern: <div class="formset-header row g-2"> + N x
 * <div class="row g-2 formset-row align-items-end">.
 * ============================================================ */

/* Header row — sticky uppercase column titles. */
.formset-header {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 0.75rem 0.4rem;
    margin: 0 0 -1px 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    position: relative;
}

.formset-header > [class*="col-"] {
    padding: 0 0.4rem;
    line-height: 1.2;
}

/* Container околу formset (data-formset-prefix) — wraps сите редови. */
[data-formset-prefix] {
    border: 1px solid var(--border-subtle);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--surface-1);
    padding: 0.4rem 0.5rem;
    margin-bottom: 1rem;
}

/* Поединечен ред во formset. */
.formset-row {
    background: var(--surface-1);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    margin: 0 -0.5rem 0.25rem;
    transition: background var(--duration-fast), box-shadow var(--duration-fast);
    position: relative;
}

.formset-row:hover {
    background: var(--surface-2);
    box-shadow: var(--shadow-sm);
}

/* Subtle zebra striping за better row separation. */
.formset-row:nth-child(odd) {
    background: rgba(249, 250, 251, 0.5);
}

.formset-row:nth-child(odd):hover {
    background: var(--surface-3);
}

/* Compact form-control inside formset row. */
.formset-row .form-control,
.formset-row .form-select {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border-color: var(--border-emphasis);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.formset-row .form-control:focus,
.formset-row .form-select:focus {
    border-color: var(--st-signing);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.formset-row .ts-control {
    min-height: 30px;
    font-size: 0.85rem;
    border-color: var(--border-emphasis);
    border-radius: 4px;
}

.formset-row .ts-control.focus {
    border-color: var(--st-signing);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* DELETE checkbox column — се форматира специјално. */
.formset-row input[name$="-DELETE"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--st-failed);
}

.formset-row input[name$="-DELETE"]:checked + label::before,
.formset-row:has(input[name$="-DELETE"]:checked) {
    opacity: 0.5;
    background: rgba(239, 68, 68, 0.05);
}

.formset-row:has(input[name$="-DELETE"]:checked) .form-control,
.formset-row:has(input[name$="-DELETE"]:checked) .form-select {
    text-decoration: line-through;
}

/* Add-row копче — типично рендерирано од jQuery formset library како
 * .formset-add-row или сличен селектор. */
.add-formset-row,
.formset-add-row,
[data-formset-add] {
    background: transparent;
    border: 2px dashed var(--border-emphasis);
    color: var(--st-signing);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    transition: all var(--duration-fast);
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.add-formset-row:hover,
.formset-add-row:hover,
[data-formset-add]:hover {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--st-signing);
    border-style: solid;
}

/* Помал margin за labels кои crispy форсира кога form_show_labels=False. */
.formset-row label {
    display: none;
}

/* Form-row внатре во item drawer — не наследи zebra striping. */
.item-drawer .formset-row {
    background: transparent;
}

.item-drawer .formset-row:hover {
    background: var(--surface-2);
}

/* Compact filter-fieldset вариант — за search forms (без legend, помали
 * paddings, без top-bar accent). */
.ddform-fieldset--filter {
    padding: 0.75rem 0.85rem 0.25rem;
    background: var(--surface-2);
}

.ddform-fieldset--filter::before {
    display: none;
}

.ddform-fieldset--filter > legend {
    font-size: 0.7rem;
    margin-bottom: 0.4rem;
    background: var(--surface-2);
}

/* Responsive: на тесни screens, fieldsets stack компактно. */
@media (max-width: 768px) {
    .ddform-fieldset {
        padding: 0.85rem 1rem 0.4rem;
        border-radius: 10px;
    }
    .ddform-fieldset > legend {
        font-size: 0.7rem;
    }
}