/**
 * unite-forms.css — UNITE360 shared form styling
 *
 * The brand-consistent form look (uppercase slate labels, orange required
 * markers, rounded inputs with a focus ring, navy CTA buttons, gradient
 * modal headers) originated in core/_hrm_/staffdata.php and was refined on
 * the Schedule Meeting modal (core/_meetings_/index.php). This file pulls
 * that pattern into one shared sheet so every form-bearing page can look
 * and feel the same without re-declaring the same rules per file.
 *
 * Include with: <link rel="stylesheet" href="/assets/css/unite-forms.css">
 * (absolute path — this app has a known bug history with relative asset
 * paths breaking on 2+-segment routes, see any migrated page's own notes).
 *
 * A page's own <style> block may still add page-specific rules; this sheet
 * only covers the shared vocabulary (section headings, field labels,
 * required markers, inputs, brand buttons, modal headers).
 */

.section-lbl {
    color: #003366;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid #00A0DC;
    padding-bottom: 6px;
    margin: 4px 0 16px;
}
.section-lbl i { color: #00A0DC; margin-right: 6px; }

/* Orange variant — use sparingly, for one or two prominent modals/sections
   that should stand out (e.g. a primary "create" action), not everywhere. */
.section-lbl.accent-orange { border-bottom-color: #F08C14; }
.section-lbl.accent-orange i { color: #F08C14; }

.form-group > label {
    font-size: .78rem;
    font-weight: 700;
    color: #58636d;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 6px;
}

.req { color: #F08C14; font-weight: 700; }

.form-control {
    border-radius: 7px;
    border: 1px solid #d4dae1;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    border-color: #00A0DC;
    box-shadow: 0 0 0 .18rem rgba(0, 160, 220, .15);
    outline: none;
}
.form-control::placeholder { color: #a7afb6; }

/* Orange focus-ring variant — opt in per field/form with .focus-orange on
   the input, for a page that wants to lean into the orange accent. */
.form-control.focus-orange:focus {
    border-color: #F08C14;
    box-shadow: 0 0 0 .18rem rgba(240, 140, 20, .16);
}

.btn-brand {
    background: #003366;
    border-color: #003366;
    color: #fff;
    font-weight: 600;
    border-radius: 7px;
}
.btn-brand:hover { background: #00254d; border-color: #00254d; color: #fff; }

.modal-header.brand {
    background: linear-gradient(135deg, #003366, #00A0DC);
    color: #fff;
    border-bottom: none;
}
.modal-header.brand .close { color: #fff; opacity: .85; }

/* Hover tint for selectable record/participant-style lists inside forms */
.participant-list label:hover,
.record-list label:hover {
    background: #FFF4E8;
}

/* Defensive floor for helper/caption text — see public/assets/css/style.css's
   fixed .dropdown-item .media .media-body > small rule (was briefly a
   sitewide bug at line-height:8px before being scoped); this guarantees any
   multi-line helper text under a form section never collapses on itself. */
small.text-muted,
.text-muted small {
    line-height: 1.5;
}