/*
 * Application forms: first registration (applications/create, applications/update), renewal
 * (renewal/open) and upgrade (upgrade/open). One look for every step: white section cards with a red
 * accent, clear sub-headings, even spacing between fields, consistent inputs and file pickers,
 * repeating entries (shareholders, staff, assets) as tidy cards, and a Previous / Next bar.
 *
 * Everything except the section header is scoped to .ncc-app-flow (the wrapper of those pages), so
 * other pages are not affected. Colours come from ncc-theme.css.
 */

/* ---- section header (also used on the staff review pages) ---- */
.card-header.ncc-app-section {
    background: var(--ncc-card);
    border-bottom: 1px solid var(--ncc-line);
    border-left: 4px solid var(--ncc-red);
    border-radius: var(--ncc-radius) var(--ncc-radius) 0 0;
    padding: 0.9rem 1.25rem;
    margin: 0;
}
.ncc-app-section__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ncc-ink);
    letter-spacing: 0;
    text-transform: none;
}
.ncc-app-section__title small {
    font-weight: 500;
    color: var(--ncc-muted);
    font-size: 0.85rem;
}

/* ---- page ---- */
.ncc-app-flow .ncc-app-flow__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ncc-ink);
    margin-bottom: 0.75rem;
}
.ncc-app-flow > .card,
.ncc-app-flow .card {
    border: 1px solid var(--ncc-line);
    border-radius: var(--ncc-radius);
    box-shadow: var(--ncc-shadow);
}
.ncc-app-flow .card + .card { margin-top: 1rem; }
.ncc-app-flow .card-body { padding: 1.25rem; }
@media (min-width: 992px) { .ncc-app-flow .card-body { padding: 1.5rem 1.75rem; } }

/* renewal / upgrade cards titled with a coloured header line */
.ncc-app-flow .card-header.text-primary,
.ncc-app-flow .card-header:not(.ncc-app-section):not(.p-0) {
    background: var(--ncc-card);
    border-bottom: 1px solid var(--ncc-line);
    border-left: 4px solid var(--ncc-red);
    color: var(--ncc-ink) !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9rem 1.25rem;
}
.ncc-app-flow .card-header.text-primary h1, .ncc-app-flow .card-header.text-primary h2,
.ncc-app-flow .card-header.text-primary h3, .ncc-app-flow .card-header.text-primary h4,
.ncc-app-flow .card-header.text-primary h5, .ncc-app-flow .card-header.text-primary h6 {
    color: var(--ncc-ink) !important;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

/* sub-headings inside a section ("1.1 Registered physical office address") */
.ncc-app-flow .card-body > .fw-bold,
.ncc-app-flow .card-body > h5,
.ncc-app-flow .card-body > h6,
.ncc-app-flow .card-body > div > .fw-bold:first-child {
    color: var(--ncc-ink);
    font-size: 0.95rem;
    font-weight: 700;
    padding-bottom: 0.4rem;
    margin: 1.25rem 0 0.75rem;
    border-bottom: 1px dashed var(--ncc-line-strong);
}
.ncc-app-flow .card-body > .fw-bold:first-child,
.ncc-app-flow .card-body > h5:first-child,
.ncc-app-flow .card-body > h6:first-child { margin-top: 0; }

/* ---- fields ---- */
.ncc-app-flow .row { row-gap: 0.25rem; }
.ncc-app-flow .form-group,
.ncc-app-flow .field-wrap,
.ncc-app-flow div[class*="field-"] { margin-bottom: 1rem; }
.ncc-app-flow .form-label,
.ncc-app-flow .control-label,
.ncc-app-flow label:not(.form-check-label):not(.btn) {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ncc-text);
    margin-bottom: 0.35rem;
}
.ncc-app-flow .form-control,
.ncc-app-flow .form-select,
.ncc-app-flow select.form-control {
    min-height: 2.75rem;
    border: 1px solid var(--ncc-line-strong) !important;
    border-radius: 6px !important;
    background-color: #fff;
    padding: 0.55rem 0.8rem !important;
    font-size: 0.95rem;
    color: var(--ncc-text);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ncc-app-flow textarea.form-control { min-height: 5rem; }
.ncc-app-flow .form-control:focus,
.ncc-app-flow .form-select:focus {
    border-color: var(--ncc-red) !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.15) !important;
    outline: none;
}
.ncc-app-flow .form-control[readonly],
.ncc-app-flow .form-control:disabled {
    background-color: var(--ncc-surface);
    color: var(--ncc-text-secondary);
}
.ncc-app-flow .has-error .form-control,
.ncc-app-flow .form-control.is-invalid { border-color: var(--ncc-red) !important; }
.ncc-app-flow .help-block,
.ncc-app-flow .invalid-feedback { font-size: 0.8rem; color: var(--ncc-red); }
.ncc-app-flow .form-text,
.ncc-app-flow .hint-block { font-size: 0.8rem; color: var(--ncc-muted); }

/* select2 and the phone widget take the same height and border */
.ncc-app-flow .select2-container--krajee-bs5 .select2-selection,
.ncc-app-flow .select2-container .select2-selection--single {
    min-height: 2.75rem;
    border: 1px solid var(--ncc-line-strong);
    border-radius: 6px;
}
.ncc-app-flow .iti { width: 100%; }

/* file pickers */
.ncc-app-flow input[type="file"].form-control { padding: 0.4rem 0.5rem !important; }
.ncc-app-flow input[type="file"]::file-selector-button {
    border: 1px solid var(--ncc-line-strong);
    background: var(--ncc-surface);
    color: var(--ncc-ink);
    border-radius: 4px;
    padding: 0.35rem 0.8rem;
    margin-right: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.ncc-app-flow input[type="file"]::file-selector-button:hover { background: var(--ncc-red-tint); border-color: var(--ncc-red-line); }

/* check boxes and radio buttons */
.ncc-app-flow .form-check-input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }
.ncc-app-flow .form-check-input:checked { background-color: var(--ncc-red); border-color: var(--ncc-red); }

/* ---- repeating entries: shareholders, staff, assets, contracts, clients, referees ---- */
.ncc-app-flow .shareholder-card,
.ncc-app-flow .staff-card,
.ncc-app-flow .asset-card,
.ncc-app-flow .contract-card,
.ncc-app-flow .referee-card,
.ncc-app-flow .client-card,
.ncc-app-flow .card .card {
    border: 1px solid var(--ncc-line);
    border-radius: var(--ncc-radius);
    box-shadow: none;
    background: #fff;
}
.ncc-app-flow .card .card:hover { border-color: var(--ncc-line-strong); }

/* ---- buttons ---- */
.ncc-app-flow .btn { border-radius: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none; }
.ncc-app-flow .btn-dark,
.ncc-app-flow .btn-dark-blue,
.ncc-app-flow .btn-info {
    background: var(--ncc-red);
    border-color: var(--ncc-red);
    color: #fff;
}
.ncc-app-flow .btn-dark:hover,
.ncc-app-flow .btn-dark-blue:hover,
.ncc-app-flow .btn-info:hover { background: var(--ncc-red-dark); border-color: var(--ncc-red-dark); color: #fff; }

/* Previous / Next: a bar at the foot of the step, buttons sized to their text */
.ncc-app-flow .d-flex.w-100:has(> .btn.w-50),
.ncc-app-flow .form-group.d-flex:has(> .btn.w-50),
.ncc-app-flow .d-flex:has(> form > .btn.w-50) {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0 0.25rem;
    margin-top: 1rem;
    border-top: 1px solid var(--ncc-line);
}
.ncc-app-flow .btn.w-50 {
    width: auto !important;
    min-width: 9.5rem;
    padding: 0.65rem 1.5rem;
}
/* the earlier step: a quiet outline button */
.ncc-app-flow .btn-outline-primary.w-50,
.ncc-app-flow .btn-info.w-50 {
    background: #fff;
    color: var(--ncc-ink);
    border: 1px solid var(--ncc-line-strong);
}
.ncc-app-flow .btn-outline-primary.w-50:hover,
.ncc-app-flow .btn-info.w-50:hover { background: var(--ncc-surface); color: var(--ncc-ink); }

/* ---- uploaded / required document cards ---- */
.ncc-app-flow .document-card { border-radius: var(--ncc-radius); }
.ncc-app-flow .document-card.uploaded { border-color: #86efac; background: #f0fdf4; }

/* ---- phones ---- */
@media (max-width: 575.98px) {
    .ncc-app-flow .card-body { padding: 1rem; }
    .ncc-app-flow .btn.w-50 { min-width: 0; flex: 1 1 0; }
    .ncc-app-flow .ncc-app-flow__title { font-size: 1.25rem; }
}

/* renewal / upgrade category cards: the chosen ones stand out */
.ncc-app-flow .renewal-category-card.is-selected { border-color: var(--ncc-red); box-shadow: 0 0 0 2px var(--ncc-red-line); background: var(--ncc-red-tint); }

/* a step's action bar: back on the left, the forward actions on the right */
.ncc-app-flow .ncc-app-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0 0.25rem;
    margin-top: 1rem;
    border-top: 1px solid var(--ncc-line);
}
.ncc-app-flow .ncc-app-actions .btn { min-width: 9rem; padding: 0.65rem 1.25rem; margin: 0; }
.ncc-app-flow .btn-outline-secondary { background: #fff; color: var(--ncc-ink); border: 1px solid var(--ncc-line-strong); }
.ncc-app-flow .btn-outline-secondary:hover { background: var(--ncc-surface); color: var(--ncc-ink); }

/* ---- what is still needed: the box on submit and the checklist at the top of the renewal ---- */
.ncc-missing__lede { margin: 0; padding: 0.85rem 1.25rem 0.25rem; color: var(--ncc-text-secondary); font-size: 0.9rem; }
.ncc-missing__item { padding: 0.75rem 1.25rem; border-left: 3px solid var(--ncc-amber); }
.ncc-missing__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ncc-missing__title { font-weight: 700; color: var(--ncc-ink); font-size: 0.95rem; }
.ncc-missing__list { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--ncc-text-secondary); font-size: 0.875rem; }

.ncc-checklist {
    background: var(--ncc-amber-tint);
    border: 1px solid var(--ncc-amber-line);
    border-radius: var(--ncc-radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}
.ncc-checklist__title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--ncc-ink); }
.ncc-checklist__note { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--ncc-text-secondary); }
.ncc-checklist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ncc-checklist__items li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; color: var(--ncc-text); }
.ncc-checklist__items li i { color: var(--ncc-amber); }
.ncc-checklist__items a { font-weight: 600; }
.ncc-checklist__items .is-current { font-weight: 600; color: var(--ncc-ink); }

/* ---- registered projects that can be added as contracts ---- */
.ncc-project-pick { border: 1px dashed var(--ncc-line-strong); border-radius: var(--ncc-radius-sm); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.ncc-project-pick__title { font-weight: 700; color: var(--ncc-ink); margin-bottom: 0.15rem; }
.ncc-project-pick__note { font-size: 0.85rem; color: var(--ncc-text-secondary); margin-bottom: 0.5rem; }
.ncc-project-pick__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--ncc-line); flex-wrap: wrap; }
.ncc-project-pick__row:first-of-type { border-top: 0; }
.ncc-project-pick__meta { font-size: 0.8rem; color: var(--ncc-muted); }