/* ==========================================================================
   ParishMan — admin theme
   --------------------------------------------------------------------------
   Ports the visual language of the olsh-website admin CMS (Tailwind v4 +
   shadcn/ui "new-york") onto this app's Bootstrap 4.5 markup.

   LOAD ORDER MATTERS: this file must be linked AFTER bootstrap.min.css so its
   overrides win. It is purely additive — if it fails to load, the app falls
   back to plain Bootstrap: unstyled, but fully functional.

   Only layouts/app.blade.php loads this. The public mass-registration form
   (layouts/public.blade.php) is deliberately untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Inter (self-hosted variable font, weights 100-900 in a single file)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens (ported from olsh-website's oklch values)
   -------------------------------------------------------------------------- */
:root {
    --pm-bg:               #ffffff;
    --pm-fg:              #14192b;
    --pm-primary:         #1b2450;  /* navy — filled buttons, active states   */
    --pm-primary-hover:   #323a62;  /* primary @ 90% over white               */
    --pm-primary-fg:      #f7f9fd;
    --pm-secondary:       #eaeff8;
    --pm-muted:           #f1f4f8;
    --pm-muted-fg:        #666f85;
    --pm-accent:          #d5e7f7;
    --pm-danger:          #d81f18;
    --pm-danger-hover:    #c01c15;
    --pm-border:          #dbe1ea;
    --pm-ring:            #6cadd6;  /* sky-deep — focus                       */
    --pm-sidebar-bg:      #f7f9fd;
    --pm-sidebar-active:  #eaeff8;

    /* Parish brand accents (from the olsh-website palette) */
    --pm-cta:             #e8813a;  /* warm orange                            */
    --pm-cta-hover:       #d97428;
    --pm-cream:           #f8ecd6;
    --pm-leaf:            #d98a4b;
    --pm-success:         #1f7a4d;
    --pm-success-bg:      #e7f4ed;

    /* olsh sets --radius: 1rem, giving these derived values */
    --pm-radius-sm:       12px;
    --pm-radius:          14px;   /* buttons, inputs, badges                  */
    --pm-radius-lg:       16px;   /* modals, alerts                           */
    --pm-radius-xl:       20px;   /* cards                                    */

    --pm-shadow-sm:       0 1px 2px 0 rgba(20, 25, 43, .05);
    --pm-shadow:          0 1px 3px 0 rgba(20, 25, 43, .08), 0 1px 2px -1px rgba(20, 25, 43, .06);
    --pm-shadow-lg:       0 10px 30px -12px rgba(20, 25, 43, .22);

    --pm-sidebar-w:       256px;
    --pm-sidebar-w-icon:  68px;
    --pm-topbar-h:        60px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body.pm-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--pm-fg);
    background-color: var(--pm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pm-body h1, .pm-body h2, .pm-body h3, .pm-body h4, .pm-body h5, .pm-body h6 {
    letter-spacing: -.01em;
    color: var(--pm-fg);
}

.pm-body a { color: var(--pm-primary); }
.pm-body a:hover { color: var(--pm-primary-hover); }

.pm-icon { flex-shrink: 0; vertical-align: -.125em; }
.pm-muted { color: var(--pm-muted-fg) !important; }
.pm-text-sm { font-size: .875rem; }
.pm-text-xs { font-size: .75rem; }

/* --------------------------------------------------------------------------
   4. App shell — sidebar + topbar
   -------------------------------------------------------------------------- */
.pm-shell { display: flex; min-height: 100vh; }

.pm-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 1040;
    width: var(--pm-sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--pm-sidebar-bg);
    border-right: 1px solid var(--pm-border);
    transition: width .18s ease, transform .18s ease;
}

.pm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: var(--pm-topbar-h);
    flex-shrink: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--pm-border);
    overflow: hidden;
    white-space: nowrap;
}
.pm-sidebar-brand img { width: 28px; height: auto; flex-shrink: 0; }
.pm-sidebar-brand-text { line-height: 1.2; overflow: hidden; }
.pm-sidebar-brand-title { font-size: .875rem; font-weight: 600; display: block; }
.pm-sidebar-brand-sub { font-size: .75rem; color: var(--pm-muted-fg); display: block; }

.pm-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .5rem; }

.pm-nav-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pm-muted-fg);
    padding: .75rem .75rem .25rem;
    white-space: nowrap;
}

/* NB: these are scoped under .pm-body so they out-specify the `.pm-body a`
   link colour rule above — otherwise nav links and the avatar render navy. */
.pm-body .pm-nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    margin-bottom: 1px;
    border-radius: var(--pm-radius-sm);
    font-size: .875rem;
    color: var(--pm-fg);
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .12s ease, color .12s ease;
}
.pm-body .pm-nav-link:hover,
.pm-body .pm-nav-link:focus {
    background: var(--pm-sidebar-active);
    color: var(--pm-primary);
    text-decoration: none;
}
.pm-body .pm-nav-link.active {
    background: var(--pm-sidebar-active);
    color: var(--pm-primary);
    font-weight: 500;
}
.pm-body .pm-nav-link .pm-icon { color: var(--pm-muted-fg); }
.pm-body .pm-nav-link.active .pm-icon,
.pm-body .pm-nav-link:hover .pm-icon { color: var(--pm-primary); }

.pm-sidebar-footer {
    flex-shrink: 0;
    padding: .75rem 1rem;
    border-top: 1px solid var(--pm-border);
    font-size: .75rem;
    color: var(--pm-muted-fg);
    white-space: nowrap;
    overflow: hidden;
}

.pm-content {
    flex: 1;
    min-width: 0;                 /* lets wide tables scroll instead of push  */
    margin-left: var(--pm-sidebar-w);
    display: flex;
    flex-direction: column;
    transition: margin-left .18s ease;
}

.pm-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: var(--pm-topbar-h);
    flex-shrink: 0;
    padding: 0 1rem;
    background: var(--pm-bg);
    border-bottom: 1px solid var(--pm-border);
}
.pm-topbar-title { font-size: .875rem; font-weight: 600; margin: 0; }
.pm-topbar-divider {
    width: 1px; height: 16px; margin: 0 .5rem;
    background: var(--pm-border);
}

.pm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 0;
    background: transparent;
    border-radius: var(--pm-radius-sm);
    color: var(--pm-fg);
    cursor: pointer;
}
.pm-icon-btn:hover { background: var(--pm-secondary); color: var(--pm-primary); }
.pm-icon-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--pm-ring); }

.pm-body .pm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--pm-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
}
.pm-body .pm-avatar:hover { color: #fff; background: var(--pm-primary-hover); }

.pm-main { flex: 1; padding: 1.5rem; }

.pm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(20, 25, 43, .45);
}

/* Desktop: toggle collapses to an icon rail */
@media (min-width: 992px) {
    .pm-shell.pm-collapsed .pm-sidebar { width: var(--pm-sidebar-w-icon); }
    .pm-shell.pm-collapsed .pm-content { margin-left: var(--pm-sidebar-w-icon); }
    .pm-shell.pm-collapsed .pm-sidebar-brand-text,
    .pm-shell.pm-collapsed .pm-nav-link span,
    .pm-shell.pm-collapsed .pm-nav-label,
    .pm-shell.pm-collapsed .pm-sidebar-footer { display: none; }
    .pm-shell.pm-collapsed .pm-sidebar-brand { justify-content: center; padding: 0; }
    .pm-shell.pm-collapsed .pm-nav-link { justify-content: center; padding: .5rem; }
}

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {
    .pm-sidebar { transform: translateX(-100%); box-shadow: var(--pm-shadow-lg); }
    .pm-shell.pm-sidebar-open .pm-sidebar { transform: translateX(0); }
    .pm-shell.pm-sidebar-open .pm-sidebar-backdrop { display: block; }
    .pm-content { margin-left: 0; }
    .pm-main { padding: 1rem; }
}

/* --------------------------------------------------------------------------
   5. Page header  (title + description left, action right)
   -------------------------------------------------------------------------- */
.pm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.pm-page-title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.pm-page-desc  { font-size: .875rem; color: var(--pm-muted-fg); margin: .125rem 0 0; }
.pm-page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.pm-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: 36px;
    padding: 0 1rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--pm-radius);
    border-width: 1px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pm-body .btn:focus,
.pm-body .btn.focus { box-shadow: 0 0 0 2px var(--pm-ring); }

.pm-body .btn-sm  { height: 32px; padding: 0 .75rem; font-size: .75rem;  border-radius: var(--pm-radius-sm); }
.pm-body .btn-lg  { height: 40px; padding: 0 1.75rem; font-size: .875rem; border-radius: var(--pm-radius); }
.pm-body .btn-block { display: flex; width: 100%; }

/* Primary action — navy */
.pm-body .btn-primary {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
    color: #fff;
}
.pm-body .btn-primary:hover,
.pm-body .btn-primary:focus,
.pm-body .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--pm-primary-hover);
    border-color: var(--pm-primary-hover);
    color: #fff;
}

/* Secondary / Cancel — pale */
.pm-body .btn-secondary {
    background-color: var(--pm-secondary);
    border-color: var(--pm-secondary);
    color: var(--pm-primary);
}
.pm-body .btn-secondary:hover,
.pm-body .btn-secondary:focus,
.pm-body .btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #dde5f3;
    border-color: #dde5f3;
    color: var(--pm-primary);
}

/* The app uses .btn-info for row-level Edit / drill-down links — render those
   as olsh's "outline" variant rather than Bootstrap's cyan. */
.pm-body .btn-info {
    background-color: #fff;
    border-color: var(--pm-border);
    color: var(--pm-fg);
    box-shadow: var(--pm-shadow-sm);
}
.pm-body .btn-info:hover,
.pm-body .btn-info:focus,
.pm-body .btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--pm-accent);
    border-color: var(--pm-border);
    color: var(--pm-primary);
}

/* .btn-warning is used for Update / primary CTAs — map to the parish orange */
.pm-body .btn-warning {
    background-color: var(--pm-cta);
    border-color: var(--pm-cta);
    color: #fff;
}
.pm-body .btn-warning:hover,
.pm-body .btn-warning:focus,
.pm-body .btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--pm-cta-hover);
    border-color: var(--pm-cta-hover);
    color: #fff;
}

.pm-body .btn-danger {
    background-color: var(--pm-danger);
    border-color: var(--pm-danger);
    color: #fff;
}
.pm-body .btn-danger:hover,
.pm-body .btn-danger:focus,
.pm-body .btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--pm-danger-hover);
    border-color: var(--pm-danger-hover);
    color: #fff;
}

.pm-body .btn-success {
    background-color: var(--pm-success);
    border-color: var(--pm-success);
    color: #fff;
}

.pm-body .btn-light {
    background-color: #fff;
    border-color: var(--pm-border);
    color: var(--pm-fg);
}

.pm-body .btn-link { color: var(--pm-primary); text-decoration: none; height: auto; padding: 0; }
.pm-body .btn-link:hover { text-decoration: underline; }

/* Ghost icon button for table row actions (olsh uses 28px ghost buttons) */
.pm-body .btn-ghost {
    height: 28px; width: 28px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--pm-muted-fg);
    border-radius: var(--pm-radius-sm);
}
.pm-body .btn-ghost:hover { background: var(--pm-secondary); color: var(--pm-primary); }
.pm-body .btn-ghost.btn-ghost-danger:hover { background: #fdeceb; color: var(--pm-danger); }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.pm-body label,
.pm-body .col-form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--pm-fg);
    margin-bottom: .375rem;
    padding-bottom: 0;
    line-height: 1.4;
}

.pm-body .form-control {
    height: 36px;
    padding: 0 .75rem;
    font-size: .875rem;
    color: var(--pm-fg);
    background-color: #fff;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pm-body .form-control:focus {
    border-color: var(--pm-ring);
    box-shadow: 0 0 0 1px var(--pm-ring);
    outline: none;
}
.pm-body .form-control::placeholder { color: var(--pm-muted-fg); opacity: 1; }
.pm-body .form-control:disabled,
.pm-body .form-control[readonly] { background-color: var(--pm-muted); opacity: 1; }

/* textarea must not be locked to the 36px control height */
.pm-body textarea.form-control { height: auto; min-height: 72px; padding: .5rem .75rem; }
/* Replace the browser-native select arrow (which sits flush to the edge with
   no breathing room) with a custom chevron, positioned with proper spacing —
   matches the olsh-website select styling. */
.pm-body select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 16px;
}
/* hide IE/Edge legacy native arrow */
.pm-body select.form-control::-ms-expand { display: none; }
.pm-body select.form-control-sm {
    padding-right: 2rem;
    background-position: right .625rem center;
}
.pm-body .form-control-sm { height: 32px; font-size: .75rem; border-radius: var(--pm-radius-sm); }
.pm-body .form-control-lg { height: 40px; font-size: .875rem; border-radius: var(--pm-radius); }

.pm-body .form-group { margin-bottom: 1rem; }

/* Bootstrap's own .was-validated rules are more specific and still win, so
   client-side validation styling keeps working — only the copy is restyled. */
.pm-body .invalid-feedback {
    font-size: .8rem;
    font-weight: 500;
    color: var(--pm-danger);
    margin-top: .25rem;
}
.pm-body .valid-feedback { font-size: .8rem; font-weight: 500; color: var(--pm-success); }
.pm-body .form-text { font-size: .8rem; color: var(--pm-muted-fg); }

.pm-body .custom-control-label { font-weight: 400; }
.pm-body .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
}

.pm-body .input-group-text {
    background: var(--pm-muted);
    border-color: var(--pm-border);
    font-size: .875rem;
    color: var(--pm-muted-fg);
    border-radius: var(--pm-radius);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.pm-body .card {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-xl);
    box-shadow: var(--pm-shadow);
    background: #fff;
}
.pm-body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pm-border);
    padding: 1.125rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border-top-left-radius: var(--pm-radius-xl);
    border-top-right-radius: var(--pm-radius-xl);
}
.pm-body .card-body   { padding: 1.5rem; }
.pm-body .card-footer {
    background: transparent;
    border-top: 1px solid var(--pm-border);
    padding: 1rem 1.5rem;
}
.pm-body .card-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

/* Stat card (dashboard) */
.pm-stat-label { font-size: .875rem; font-weight: 500; color: var(--pm-muted-fg); margin: 0; }
.pm-stat-value { font-size: 1.5rem; font-weight: 700; margin: .25rem 0 0; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
/* olsh wraps tables in a plain rounded bordered box rather than a Card */
.pm-table-card {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    background: #fff;
    overflow: hidden;
}
.pm-table-card > .table-responsive { margin-bottom: 0; }

.pm-body .table {
    font-size: .875rem;
    color: var(--pm-fg);
    margin-bottom: 0;
}
.pm-body .table thead th {
    height: 40px;
    padding: .5rem;
    vertical-align: middle;
    font-weight: 500;
    font-size: .875rem;
    text-transform: none;
    color: var(--pm-muted-fg);
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--pm-border);
    white-space: nowrap;
}
.pm-body .table td {
    padding: .5rem;
    vertical-align: middle;
    border-top: 1px solid var(--pm-border);
}
.pm-body .table tbody tr:first-child td { border-top: 0; }

/* olsh doesn't stripe — it uses a hover tint. The app puts .table-striped on
   every table, so neutralise the stripe rather than editing 15 views. */
.pm-body .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.pm-body .table-hover tbody tr:hover,
.pm-body .table tbody tr:hover { background-color: rgba(241, 244, 248, .7); }

.pm-body .table .btn-sm,
.pm-body .table .btn { white-space: nowrap; }

.pm-table-actions { display: flex; gap: .25rem; }

.pm-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--pm-muted-fg);
    font-size: .875rem;
}

/* Family directory — collapsible member sub-rows */
.pm-collapse-toggle .pm-icon { transition: transform .15s ease; }
.pm-collapse-toggle.pm-open .pm-icon { transform: rotate(90deg); }
.pm-body .pm-subrow td { border-top: 0; }
.pm-members {
    background: var(--pm-muted);
    border-top: 1px solid var(--pm-border);
    padding: .25rem 1rem 1rem 2.5rem;
}
.pm-members .table { background: transparent; }
.pm-members .table thead th {
    height: 32px;
    font-size: .75rem;
    border-bottom-color: var(--pm-border);
}
.pm-members .table tbody tr:hover { background: rgba(255, 255, 255, .6); }
.pm-members .table td { border-top-color: rgba(219, 225, 234, .7); }

/* --------------------------------------------------------------------------
   10. Badges
   -------------------------------------------------------------------------- */
.pm-body .badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--pm-radius-sm);
    border: 1px solid transparent;
}
.pm-body .badge-primary   { background: var(--pm-primary); color: #fff; }
.pm-body .badge-secondary { background: var(--pm-secondary); color: var(--pm-primary); }
.pm-body .badge-success   { background: var(--pm-success-bg); color: var(--pm-success); }
.pm-body .badge-danger    { background: #fdeceb; color: var(--pm-danger); }
.pm-body .badge-warning   { background: var(--pm-cream); color: #8a5a1e; }
.pm-body .badge-info      { background: var(--pm-accent); color: var(--pm-primary); }
.pm-body .badge-light     { background: #fff; color: var(--pm-fg); border-color: var(--pm-border); }
.pm-body .badge-outline   { background: transparent; color: var(--pm-fg); border-color: var(--pm-border); }

/* --------------------------------------------------------------------------
   11. Alerts
   -------------------------------------------------------------------------- */
.pm-body .alert {
    border-radius: var(--pm-radius-lg);
    border: 1px solid var(--pm-border);
    padding: .75rem 1rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.pm-body .alert ul { margin-bottom: 0; padding-left: 1.125rem; }
.pm-body .alert-success { background: var(--pm-success-bg); border-color: #bfe3d0; color: #14603b; }
/* olsh renders destructive alerts outline-only: tinted border + red text */
.pm-body .alert-danger  { background: #fff; border-color: rgba(216, 31, 24, .5); color: var(--pm-danger); }
.pm-body .alert-warning { background: var(--pm-cream); border-color: #e6d3ac; color: #7a4f18; }
.pm-body .alert-info    { background: var(--pm-accent); border-color: #b9d8f0; color: var(--pm-primary); }

/* --------------------------------------------------------------------------
   12. Modals
   -------------------------------------------------------------------------- */
.pm-body .modal-content {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-lg);
}
.pm-body .modal-header {
    border-bottom: 0;
    padding: 1.5rem 1.5rem .5rem;
}
.pm-body .modal-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.pm-body .modal-body  { padding: .5rem 1.5rem 1rem; font-size: .875rem; }
.pm-body .modal-body h4 { font-size: 1rem; font-weight: 500; margin: 0; }
.pm-body .modal-footer {
    border-top: 0;
    padding: 0 1.5rem 1.5rem;
    gap: .5rem;
}
.pm-body .modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .8; }

/* --------------------------------------------------------------------------
   13. Dropdowns  (overrides olsh.css's 20px font-size rule, which loads first)
   -------------------------------------------------------------------------- */
.pm-body .dropdown-menu {
    font-size: .875rem;
    padding: .25rem;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-lg);
    color: var(--pm-fg);
}
.pm-body .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    font-size: .875rem;
    border-radius: var(--pm-radius-sm);
    color: var(--pm-fg);
}
.pm-body .dropdown-item:hover,
.pm-body .dropdown-item:focus { background: var(--pm-secondary); color: var(--pm-primary); }
.pm-body .dropdown-divider { margin: .25rem 0; border-top-color: var(--pm-border); }
.pm-body .dropdown-header { font-size: .75rem; color: var(--pm-muted-fg); padding: .5rem .625rem; }

/* --------------------------------------------------------------------------
   14. List groups  (used as detail panels throughout the census screens)
   -------------------------------------------------------------------------- */
.pm-body .list-group { border-radius: var(--pm-radius); }
.pm-body .list-group-item {
    border-color: var(--pm-border);
    padding: .625rem 1rem;
    font-size: .875rem;
    color: var(--pm-fg);
}
.pm-body .list-group-item:first-child {
    border-top-left-radius: var(--pm-radius);
    border-top-right-radius: var(--pm-radius);
}
.pm-body .list-group-item:last-child {
    border-bottom-left-radius: var(--pm-radius);
    border-bottom-right-radius: var(--pm-radius);
}
.pm-body .list-group-item.active {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    color: #fff;
    font-weight: 500;
}
.pm-body .list-group-item-action:hover { background: var(--pm-muted); color: var(--pm-primary); }

/* --------------------------------------------------------------------------
   15. Pagination
   -------------------------------------------------------------------------- */
.pm-body .pagination { font-size: .875rem; margin-top: 1rem; margin-bottom: 0; }
.pm-body .page-link {
    color: var(--pm-fg);
    border-color: var(--pm-border);
    padding: .375rem .75rem;
    min-width: 36px;
    text-align: center;
}
.pm-body .page-link:hover { background: var(--pm-secondary); color: var(--pm-primary); border-color: var(--pm-border); }
.pm-body .page-item.active .page-link {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    color: #fff;
}
.pm-body .page-item.disabled .page-link { color: var(--pm-muted-fg); background: #fff; }
.pm-body .page-item:first-child .page-link {
    border-top-left-radius: var(--pm-radius-sm);
    border-bottom-left-radius: var(--pm-radius-sm);
}
.pm-body .page-item:last-child .page-link {
    border-top-right-radius: var(--pm-radius-sm);
    border-bottom-right-radius: var(--pm-radius-sm);
}

/* --------------------------------------------------------------------------
   16. Misc
   -------------------------------------------------------------------------- */
.pm-body .spinner-border { color: var(--pm-ring); }
.pm-body .close { font-weight: 400; opacity: .5; text-shadow: none; }
.pm-body .close:hover { opacity: 1; }
.pm-body hr { border-top-color: var(--pm-border); }
.pm-body .popover { border-radius: var(--pm-radius); border-color: var(--pm-border); font-size: .8125rem; }
.pm-body code { color: var(--pm-danger); }

/* Auth screens (login / register / password reset) render without the shell */
.pm-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(241, 244, 248, .4);
}
.pm-auth-inner { width: 100%; max-width: 26rem; }
.pm-auth-eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--pm-muted-fg);
    margin: 0;
}
.pm-auth-title { font-size: 1.5rem; font-weight: 700; margin: .25rem 0 0; letter-spacing: -.02em; }
.pm-auth-sub   { font-size: .875rem; color: var(--pm-muted-fg); margin: .25rem 0 0; }

/* --------------------------------------------------------------------------
   17. Print — the census screens are used to produce printed reports
   -------------------------------------------------------------------------- */
@media print {
    .pm-sidebar, .pm-topbar, .pm-sidebar-backdrop,
    .pm-page-actions, .pagination { display: none !important; }
    .pm-content { margin-left: 0 !important; }
    .pm-main { padding: 0 !important; }
    .pm-body .card, .pm-table-card { box-shadow: none !important; border-color: #ccc !important; }
}