/* Family Court Self Help Program (/Family-Court-Self-Help-Program) — sidebar section picker only.
   Loaded ONLY by that page's @section Styles, and every rule below is additionally scoped to
   #shpTabs / #shpTabsBox, so nothing here can reach .nav-tabs or .info-box anywhere else.

   WHY: the section picker is a Bootstrap .nav-tabs list, which is built to be a HORIZONTAL tab
   strip. In a narrow sidebar it wrapped into eight ragged, centre-aligned rows of differing
   widths, with a stray strip border-bottom ruled underneath them, and only the selected item
   carrying any border at all. This restyles it as the stacked list of separate bordered boxes
   shown in the requested design.

   Deliberately NOT set anywhere in this file: color, font-size, font-family, font-weight. The
   link blue, the selected item's black, and the 1rem text are all left exactly as Bootstrap and
   site.css already render them, per the request not to change colour or letter size. The one
   exception is the selected item's fill — see the .active rule at the bottom. */

/* The picker's wrapping .info-box card is itself a white, bordered, shadowed panel. Once each
   item below becomes its own bordered box, that outer card reads as a box-inside-a-box, so it is
   flattened to a plain container here. The markup keeps the .info-box class (the "Related
   Information" box underneath still uses it normally, untouched). */
#shpTabsBox {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    margin-bottom: 1rem; /* the flush gap to the "Related Information" box below */
}

/* Vertical stack instead of a wrapping tab strip, and drop the strip's ruled bottom edge. */
#shpTabs {
    display: block;
    border-bottom: 0;
    margin: 0;
    padding: 0;
}

#shpTabs .nav-item + .nav-item {
    margin-top: 0.5rem;
}

/* Each item becomes a full-width box: same 1px #e3e8ee border and white fill used by .info-box
   and the other cards site-wide, so these sit in the existing design rather than beside it.
   Bootstrap pulls .nav-tabs .nav-link down by the strip's border width to merge it into the panel
   below — that margin-bottom has to go, or the boxes overlap each other. */
#shpTabs .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 0.5rem;
    margin-bottom: 0;
    box-shadow: var(--jud-card-shadow);
}

/* Bootstrap's own hover/focus rules recolour three border edges independently to fake the tab
   "lift"; on a closed box that shows up as one grey edge out of four. Keep all four together. */
#shpTabs .nav-link:hover,
#shpTabs .nav-link:focus-visible {
    border-color: #cbd6e2;
}

/* The selected item previously distinguished itself with a border while its siblings had none.
   Now that every item is bordered, it needs its own fill to stay legible as "you are here" —
   this is the light-blue selected state in the requested design. Both values are transparencies
   of --jud-blue (#2c6cae), the accent already in the palette, so no new hue is introduced.
   Bootstrap's .active rule also whites out the bottom border edge to merge the tab into its
   panel; restored to a full box here. */
#shpTabs .nav-link.active {
    background: rgba(44, 108, 174, 0.08);
    border-color: rgba(44, 108, 174, 0.35);
}

/* ══ Self-Help Fees estimator ════════════════════════════════════════════════════════════════
   The fee table in the "Self-Help Fee Schedule" pane. The DNN source relied on classes that
   don't exist here (.container-fees / .table-fees / .fee / .header-float) plus Bootstrap 3's
   .thead-dark, so it rendered as bare checkboxes with a literal "0" beside each one. Everything
   below is scoped to #shpFees, which exists only on this page. The one colour introduced is
   #e2902b for the "Per Party" pill — already in the palette (site.css uses it for the "you are
   here" sidebar marker). */

.shp-fees, .shp-fee-block {
    margin-bottom: 1.5rem;
}

/* Label sits on the same line as the dropdown, as in the requested design. */
.shp-fees-picker {
   /* display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;*/
    margin-bottom: 1rem;
}
.shp-fees-picker label {
    flex: 0 0 auto;
}
/* Shares the row with the label, shrinking to fit rather than forcing a wrap; below roughly a
   tablet the flex-wrap above still drops it onto its own line. */
.shp-fees-picker .form-select {
    flex: 1 1 18rem;
    width: auto;
    min-width: 380px;
    max-width: 100%;
}

.shp-fees-hint {
    margin-bottom: 0;
}

/* A light header band with dark text, not Bootstrap's .table-dark — matching the design. The
   fee columns are short amounts so they centre; only the service name column reads as prose. */
.shp-fee-table thead th {
    background: #f1f4f7;
    text-align: center;
    vertical-align: middle;
}
.shp-fee-table td {
    text-align: center;
    vertical-align: middle;
}
.shp-fee-table td.shp-fee-service {
    text-align: left;
    min-width: 14rem;
}
.shp-fee-total-col {
    min-width: 7.5rem;
}

/* "Per Party" flag on the Packet Completion Assistance header. */
.shp-fee-badge {
    display: inline-block;
    background: #e2902b;
    color: #fff;
    border-radius: 10rem;
    padding: 0.05rem 0.5rem;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Checkbox + its amount on one line, centred in the cell. In the packet modals the cell is
   a <label> wrapping its checkbox (so clicking the amount toggles it without needing generated
   ids); in the Fee Schedule pane it is a <div> with an explicit for=. margin-bottom normalises
   the <label> case. */
.shp-fee {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.shp-fee-amount {
    margin: 0;
}
/* Fees the court always charges ship checked + disabled; the cursor shouldn't invite a click. */
.shp-fee-check:disabled,
.shp-fee-check:disabled + .shp-fee-amount {
    cursor: default;
}
.shp-fee-check:not(:disabled),
.shp-fee-check:not(:disabled) + .shp-fee-amount {
    cursor: pointer;
}

/* Party count for the per-party fee — revealed by the script only while that fee is selected. */
.shp-fee-parties {
    width: auto;
    margin: 0.4rem auto 0;
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        min-width: 80%;
    }
}

@media (min-width: 576px) {
    .modal-dialog:has(shp-fee-amount) {
        min-width: 90%;
    }
}