html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #7386D5;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: auto;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}


html {
  background: lightgrey;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  background: whitesmoke;
  overflow: scroll;
  margin: 0 auto;
  font: 100%/1.4 sans-serif;
  border: 1px solid rgba(0, 0, 0, 0.25)
}

.fivecolumns {
   -webkit-column-count: 5;
      -moz-column-count: 5;
           column-count: 5;

   -webkit-column-gap: 20px;
      -moz-column-gap: 20px;
           column-gap: 20px;
}

.goaltexteditor {
  width: 56em;
}

.goalordereditor {
  width: 7em;
}

.goalactiveeditor {
  width: 7em;
}

/* Login + reset-password chrome — Aurora-aligned (2026-05).
 *
 * The `.bg-purple` / `.neumorphism-*` class names are kept (multiple
 * pages reference them by name and we don't want to touch their
 * markup just to rename), but the visuals were reskinned from the
 * 2019-era purple neumorphism look to match Aurora's surface, accent,
 * and radius tokens. The login template now also pulls cms/css/aurora.css
 * directly so design tokens (--surface-N, --accent-N, --radius-N,
 * --space-N) are available pre-session.
 *
 * Falls back gracefully on resetpw.php which still uses the old
 * neumorphism-card wrapper but inherits the same calmer surface. */
.bg-purple {
  background-color: var(--surface-0, #f6f7f9);
  background-image:
    radial-gradient(
      ellipse 1200px 800px at 0% 0%,
      color-mix(in oklch, var(--accent-3, #c8e0f7) 18%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse 1000px 700px at 100% 100%,
      color-mix(in oklch, var(--accent-6, #6aa6e2) 10%, transparent),
      transparent 55%
    );
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text-1, #1f2937);
}
.neumorphism-card {
  border-radius: var(--radius-3, 14px);
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.08);
  color: var(--text-1, #1f2937);
}
/* Legacy header card — kept defined in case resetpw or another
 * pre-Aurora page still references it. Same Aurora surface as the
 * main card so the two read as one composition. */
.neumorphism-jumbotron {
  border-radius: var(--radius-3, 14px);
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border-subtle, #e5e7eb);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--text-1, #1f2937);
}

#upload_gif { display:none; }

.upload_div {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.upload_div input.upload_control {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.ocm-btn-primary {
    color: #fff;
    background-color: #7386D5;
    border-color: #6d7fcc;
}
.ocm-btn-primary:hover,
.ocm-btn-primary:focus {
    color: #fff;
    background-color: #6272b5;
    border-color: #5a6aad;
}
.ocm-btn-primary:active,
.ocm-btn-primary.active {
    color: #fff;
    background-color: #5a6aad;
    border-color: #5262a5;
}
.ocm-btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(115, 134, 213, .5);
}

.form-control:focus,
.form-select:focus {
    border-color: #7386D5;
    box-shadow: 0 0 0 0.2rem rgba(115, 134, 213, .25);
}

/* case notes text formatting styles */
.yh {background-color: #ffff44;}
.ph {background-color: #ff7777;}
.lt {text-decoration: line-through;}
.ul {text-decoration: underline;}


/*-------------------Scrollbars----*/
p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    /* a11y: was #999, which fails 4.5:1 contrast on the whitesmoke body
       background (2.61:1). #595959 is the lightest grey that passes AA at
       this font weight. */
    color: #595959;
}

a, a:hover, a:focus {
    color: inherit;
    text-underline-offset: .25rem !important;
    text-decoration-thickness: .125rem !important;
    text-decoration-skip-ink: none !important;
    text-decoration-color: rgba(102, 102, 102, 0.5) !important;
    text-decoration-style: dotted !important;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    perspective: 1500px;
}


#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: bottom left;
}

#sidebar.active {
    margin-left: -250px;
    transform: rotateY(100deg);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    /* a11y (#232): Bootstrap's default link color (#005dbd) was leaking
       through onto our #3a4b8c sidebar background (1.28:1, fails AA).
       Force the inherited white from #sidebar so links clear AAA. */
    color: #fff;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}


a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    /* a11y: previous #7386D5 on white was 3.4:1, fails AA. #3a4b8c
       (matches the new sidebar palette) clears 7:1. */
    color: #3a4b8c;
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

#sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    cursor: pointer;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}


#sidebarCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 5px auto;
}

.col-static-width {
    flex: 0 0 225px;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    .goaltexteditor {
        width: 100%;
    }
    .fivecolumns {
        -webkit-column-count: 2;
           -moz-column-count: 2;
                column-count: 2;
    }

    #sidebar {
        margin-left: -250px;
        transform: rotateY(90deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }

}

@media (max-width: 480px) {
    .fivecolumns {
        -webkit-column-count: 1;
           -moz-column-count: 1;
                column-count: 1;
    }
}

/* print styles */

@media print {
body {
    background: white;
    color: black;
    margin: 0;
    padding: 0;
    width: 100%;
}

* {
    overflow: visible !important;
 }

h1, h2, h3, h4, h5, h6, p, div {
    page-break-inside: avoid;
}

.no-print, .header, .footer, .sidebar {
    display: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100% !important;
}



}

/* File list widget */
ul.pika_files {
    list-style: none;
    padding-left: 0;
    margin: 2px 0;
}

ul.pika_files li.directory_open > ul.pika_files {
    margin-top: 4px;
    padding-left: 10px;
    border-left: 2px solid #ccd0ed;
}

.pika-folder-crumb {
    display: inline-block;
    background: #eef0fb;
    border-left: 3px solid #7386D5;
    padding: 1px 8px;
    border-radius: 0 3px 3px 0;
    margin-bottom: 3px;
    font-weight: 600;
}

.pika-folder-crumb i {
    color: #e6a817;
}

.folder_actions {
    font-size: 0.85em;
    color: #777;
    margin-left: 5px;
}

/* ---------------------------------------------------
    ACCESSIBILITY (issue #210 baseline)
   --------------------------------------------------- */

/* Bootstrap 4 used .sr-only; our chrome is on Bootstrap 5 which uses
   .visually-hidden. Provide both so older partials keep working and our
   own additions (e.g. the skip-link target label and the search field
   label) work even if the loaded Bootstrap build is missing the helper. */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip-to-content link: hidden until focused, then pinned to the top-left
   so a keyboard user can jump past the sidebar+navbar in one Tab. */
.ocm-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff !important;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none !important;
    border-radius: 0 0 4px 0;
}
.ocm-skip-link:focus,
.ocm-skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffbf47;
    outline-offset: 0;
}

/* Default focus ring. Bootstrap suppresses :focus on .navbar-btn (see
   .navbar-btn { outline: none !important }). Override for keyboard users
   so the sidebar toggle and other navbar buttons are visible on focus. */
:focus-visible {
    outline: 2px solid #ffbf47;
    outline-offset: 2px;
}
.navbar-btn:focus-visible,
.btn:focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px;
    box-shadow: none;
}

/* Sidebar links: white-on-#7386D5 fails AA at 4.5:1. Bumping to a darker
   blue (#3a4b8c, contrast ~7.6:1 with #fff) covers the nav links and
   the OCM brand h5/h3 in the sidebar header. */
#sidebar {
    background: #3a4b8c;
}
#sidebar .sidebar-header {
    background: #2f3f7a;
}
#sidebar ul.components {
    border-bottom-color: #6377b8;
}
#sidebar ul li.active > a,
#sidebar a[aria-expanded="true"] {
    background: #2f3f7a;
}
ul ul a {
    background: #2f3f7a !important;
}
a.article,
a.article:hover {
    background: #2f3f7a !important;
}
#sidebar a:focus-visible {
    outline: 2px solid #ffbf47;
    outline-offset: -2px;
}
/* Sidebar footer (sign-out) — inline style sets #6d7fcc which fails AA
   for the white text. Force a darker shade via our own class hook. */
#sidebar > footer {
    background: #2f3f7a !important;
}
/* a11y (#232): the sign-out anchor's <span> inherits #005dbd from
   Bootstrap's link color (1.56:1 on #2f3f7a). Force white on every
   sidebar anchor + descendant span so contrast clears AAA. */
#sidebar a, #sidebar a span { color: #fff; }

/* Issue #247 — pass WCAG AA contrast on outline buttons.
   Bootstrap 5.3's defaults render .btn-outline-info as #0dcaf0 text on
   white (3.5:1) and .btn-outline-warning as #ffc107 text on white
   (1.93:1) — both fail AA's 4.5:1 minimum for normal text. We darken
   the resting text + border to AA-passing shades while preserving the
   filled hover/active state (white text on the original brand colour
   already passes against the darker fill).
     • #0769a3 on #fff = 5.51:1 (AA pass)
     • #856404 on #fff = 5.66:1 (AA pass)
   The hover/active backgrounds keep the Bootstrap brand hues so the
   outline aesthetic and visual identity survive the fix. */
.btn-outline-info {
    --bs-btn-color: #0769a3;
    --bs-btn-border-color: #0769a3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0769a3;
    --bs-btn-hover-border-color: #0769a3;
    --bs-btn-focus-shadow-rgb: 7, 105, 163;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #055880;
    --bs-btn-active-border-color: #055880;
    --bs-btn-disabled-color: #0769a3;
    --bs-btn-disabled-border-color: #0769a3;
    color: #0769a3;
    border-color: #0769a3;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    color: #fff;
    background-color: #0769a3;
    border-color: #0769a3;
}
.btn-outline-info:active,
.btn-outline-info.active {
    color: #fff;
    background-color: #055880;
    border-color: #055880;
}

.btn-outline-warning {
    --bs-btn-color: #856404;
    --bs-btn-border-color: #856404;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #856404;
    --bs-btn-hover-border-color: #856404;
    --bs-btn-focus-shadow-rgb: 133, 100, 4;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c5103;
    --bs-btn-active-border-color: #6c5103;
    --bs-btn-disabled-color: #856404;
    --bs-btn-disabled-border-color: #856404;
    color: #856404;
    border-color: #856404;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    color: #fff;
    background-color: #856404;
    border-color: #856404;
}
.btn-outline-warning:active,
.btn-outline-warning.active {
    color: #fff;
    background-color: #6c5103;
    border-color: #6c5103;
}

/* Issue #249 (second-ring audit): Bootstrap default nav-link color
   #0d6efd against white tab background is 4.38:1 — fails WCAG 2.1 AA
   (4.5:1). Override to the same AA-passing blue used by .btn-outline-info
   (#0769a3 = 5.51:1 against white). Targets the unselected tabs in
   case_tabs and calendar_tabs. */
.nav-tabs .nav-link {
    color: #0769a3;
}

/* Issue #230 (Aurora polish — empty states): consistent shell for the
   "no rows match" / "nothing here yet" panels. Pattern documented in
   docs/aurora/microcopy.md §3. The shell is intentionally minimal —
   centred, light-grey background, max-width — so it reads as an
   intentional empty state rather than a half-rendered widget. The
   modifier --inline shrinks the shell to a single line for places like
   the command-palette dropdown where a full panel would dwarf the
   surrounding UI. */
.ocm-empty-state {
    margin: 1.5rem auto;
    padding: 1.75rem 1.5rem;
    max-width: 32rem;
    text-align: center;
    color: #595959;
    background: #f5f5f7;
    border: 1px solid #e0e0e4;
    border-radius: 0.5rem;
}
.ocm-empty-state__description {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #2b2b2b;
}
.ocm-empty-state__actions {
    margin: 0;
}
.ocm-empty-state__actions .btn + .btn {
    margin-left: 0.5rem;
}
.ocm-empty-state--inline {
    margin: 0;
    padding: 0.75rem 1rem;
    max-width: none;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* ---------------------------------------------------
   Phase 6 — replace inline styles (issue #235)
   ----------------------------------------------------
   Each rule below replaces a `style="..."` attribute that used to
   live in a template / PHP emitter. Bootstrap 5 utility classes
   were preferred where available; the rest got `ocm-` semantic
   classes so they can be tracked. The only inline styles that
   intentionally survive are templated values (`%%[open_closed_color]%%`)
   that are now CSS custom properties on the element — those will
   become Phase 7 nonce-eligible candidates if needed. */

/* Hover/help-icon affordance — replaces `style="cursor:pointer;"`
   sprinkled across `system-settings.html`, `system-users.html`. */
.ocm-pointer { cursor: pointer; }

/* Inline help icon shown next to form labels. Was
   `style="display:inline;cursor:pointer;"` — `<i>` is already inline,
   so the only useful bit is the cursor + a touch of padding so the
   tooltip target is bigger than the glyph. */
.ocm-help-icon {
    cursor: pointer;
}

/* Phone-mask field-pair widths. `style="width: 2em / 3.5em / 6em;"`
   on the area-code <input>, `style="width: 7em / 10.5em / 11.2em;"`
   on the phone <input>. Each template (case_contact_list,
   intake_contact_list, contact_list, contact_full, spousal_record)
   used slightly different widths historically. The classes below
   match each template's previous layout exactly. */
.ocm-area-code-narrow  { width: 2em; }     /* case_contact_list */
.ocm-area-code-medium  { width: 3.5em; }   /* intake / addressbook */
.ocm-area-code-wide    { width: 6em; }     /* contact_full */
.ocm-area-code-spousal { max-width: 5em; } /* spousal_record */
.ocm-phone-narrow      { width: 7em; }     /* intake / addressbook */
.ocm-phone-medium      { width: 10.5em; }  /* contact_full */
.ocm-phone-wide        { width: 11.2em; }  /* case_contact_list */
.ocm-phone-spousal     { max-width: 12em; }/* spousal_record */
.ocm-cal-jump-input    { width: 8em; }     /* cal_week jump-to-date */

/* Eligibility-screen poverty result inputs. Was
   `style="width: 6.8em; text-align: right;"`. */
.ocm-elig-poverty {
    width: 6.8em;
    text-align: right;
}

/* Inline `<i>` toggle glyphs in textFormat.html. Was
   `style="color: green"` / `style="color: red"`. Bootstrap's
   `text-success`/`text-danger` are too dark a green/red against
   the white panel background, so we mint our own bright variants
   that match the original literals. */
.ocm-tag-on  { color: green; }
.ocm-tag-off { color: red; }

/* `subtemplates/about.html` repeated `text-decoration: underline` on
   every credits link. Move to a single class hook that any future
   credits-style page can re-use. */
.ocm-credits a, a.ocm-credits-link {
    text-decoration: underline;
}

/* `subtemplates/case-pb-enhanced.html` has 4 cards that highlight
   intake-source rules. Was inline `background-color: #ffff99` (the
   first three) and `#ffff66` (the last "matched" card). */
.ocm-pb-rule-card    { background-color: #ffff99; }
.ocm-pb-rule-matched { background-color: #ffff66; }

/* The 'georgia, times, serif' italic banner used by the
   case_act / case-pb-enhanced quote blocks and pikaMisc / pika_cms
   PHP emitters. */
.ocm-quote {
    font-family: georgia, times, serif;
    font-size: 14px;
}

/* `pika_html_red_flag()` (`pika_cms.php`) emits a single thin-bordered
   span. The literal style was
   `line-height: 25px; border: 1px solid #999999; padding: 1px;`. */
.ocm-redflag-pill {
    line-height: 25px;
    border: 1px solid #999999;
    padding: 1px;
}

/* #274 — case-detail red-flag row. When 7+ flags, case.php emits
 * a <details>/<summary> instead of a single <p> so the row stops
 * wrapping into two visual rows that dominate the page. */
.ocm-case-flags {
    margin-top: 8px;
    margin-bottom: 8px;
}
.ocm-case-flags__summary {
    display: inline-block;          /* override default display: list-item */
    list-style: none;               /* drop the browser triangle */
    padding: 5px 14px;
    border: 1px solid var(--danger-6, #c83030);
    border-radius: 999px;
    background: color-mix(in oklch, var(--danger-3, #f4cccc) 30%, transparent);
    color: var(--danger-9, #7a1a1a);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.ocm-case-flags__summary::-webkit-details-marker { display: none; }
.ocm-case-flags__summary::marker { content: ""; }
.ocm-case-flags__summary:hover {
    background: color-mix(in oklch, var(--danger-3, #f4cccc) 50%, transparent);
}
.ocm-case-flags__list {
    margin-top: 8px;
    margin-bottom: 0;
}
.ocm-case-flags[open] > .ocm-case-flags__summary::after {
    content: " (click to collapse)";
    font-weight: 400;
    font-size: 0.8em;
    opacity: 0.65;
}

/* Megareport form — large recurring blocks. */
.ocm-megareport-field-pane {
    background-color: #ffffff;
    height: 50vh;
    overflow: auto;
}
.ocm-megareport-saved {
    background-color: #ffffff;
    height: 170px;
    border: 1px black solid;
    overflow: auto;
    border-radius: 3px;
    padding: 10px;
}
.ocm-megareport-pad-3 { padding: 3px; }
.ocm-megareport-and { color: red; }
.ocm-multiselect-bordered { border: 1px black solid; }

/* `template_plugins/file_list.php` — wrapper div around the file-tree
   widget. Width / height are passed in as CSS custom properties when
   the caller specifies them (megareport's saved-reports panel, the
   document-storage list, etc.). */
.ocm-file-list-box {
    background-color: #ffffff;
    border: 1px black solid;
    overflow: auto;
    border-radius: 3px;
    padding: 10px;
    width: var(--ocm-flw, auto);
    height: var(--ocm-flh, auto);
}

/* `template_plugins/file_list.php` header-row cell padding. Phase 6
   missed this single-quoted `style='…'` because the original audit
   regex looked for double-quoted attrs only; Phase 7 cleans it up
   alongside the other style-src tightening. */
.ocm-file-list-header-cell {
    padding-left: 20px;
    padding-top: 3px;
}

/* `subtemplates/documents.html` form-row cell padding. Phase 7
   round-up — like the file-list header above, the original Phase 6
   regex missed single-quoted `style='…'` so these four td cells
   carried inline style attrs through Phase 6. */
.ocm-document-form-cell {
    padding-left: 3px;
    padding-top: 3px;
}

/* `pl_discover_logo_img()` sidebar logo — inline style attr replaced
   with a class for strict CSP. */
.sidebar-logo {
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
}

/* `template_plugins/checkbox_list.php` — wrapper div around the
   checkbox list (megareport's relation_codes / field_list panes). */
.ocm-checkbox-list-box {
    background-color: #ffffff;
    overflow: auto;
    width: var(--ocm-cbw, auto);
    height: var(--ocm-cbh, auto);
}

/* `template_plugins/input_date_selector.php` — popup calendar div. */
.ocm-date-selector-popup {
    z-index: 3;
    clear: both;
    position: absolute;
    background-color: white;
    display: none;
    border: solid;
    border-width: 1px;
}

/* `subtemplates/system-fields.html` — first-column TH width. */
.ocm-th-180 { width: 180px; }

/* `subtemplates/case_act.html` separator. */
.ocm-section-divider { border-top: 1px solid #999999; }

/* `system-json-tabs.html` workspace + JSON-textarea tweaks. */
.ocm-jtb-workspace {
    min-height: 80px;
    display: none;
}
.ocm-json-small { font-size: 0.85em; }
.ocm-json-tiny  { font-size: 0.8em; }

/* `case-litc.html` form-footer wrapper. */
.ocm-form-footer-clearleft {
    clear: both;
    float: left;
}

/* `system-users.html` QR-code tile. */
.ocm-qr-square {
    width: 256px;
    height: 256px;
}

/* `case-pb-enhanced.html` — `vertical-align: top` on the per-row
   <tr>. */
.ocm-tr-top { vertical-align: top; }

/* Eligibility input-groups whose baseline alignment matters. */
.ocm-baseline { align-items: baseline; }

/* `templates/default.html` chrome — sticky footer + content min-heights
   + the search box width. */
.ocm-default-footer {
    position: sticky;
    bottom: 0;
    text-align: center;
    background: #6d7fcc;
    padding: 10px;
}
.ocm-default-footer-link {
    margin: 10px;
    color: white;
    text-decoration: underline;
}
.ocm-content-min-height { min-height: 97vh; padding: 0; }
.ocm-main-min-height    { min-height: 88vh; }
.ocm-search-input       { max-width: 175px; min-width: 100px; }

/* `subtemplates/inc/header.php` (legacy fossil) chrome. Kept so that
   the file lints clean even though no live route includes it. */
.ocm-legacy-footer-abs {
    position: absolute;
    bottom: 0;
    text-align: center;
}
.ocm-search-input-legacy { max-width: 175px; }
.ocm-min-height-88vh     { min-height: 88vh; }

/* `templates/login-form.html` — Aurora-aligned login layout (2026-05).
 *
 * The page is centred vertically on a calm tinted surface; the brand
 * block sits above a single card with the form + SSO button. No
 * neumorphism shadows; soft border + small drop instead. */
.ocm-login-bg {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ocm-login-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.ocm-login-card-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ocm-login-brand {
  text-align: center;
  margin: 0 0 4px;
}
.ocm-login-brand-name {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-1, #1f2937);
}
.ocm-login-brand-owner {
  font-size: 14px;
  color: var(--text-3, #6b7280);
  margin: 4px 0 0;
}
.ocm-login-card {
  padding: 28px 32px;
}
.ocm-login-heading {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text-1, #1f2937);
}
.ocm-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ocm-login-field .form-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-2, #374151);
}
.ocm-login-field .form-control {
  border-radius: var(--radius-2, 8px);
  border: 1px solid var(--border-subtle, #d1d5db);
  padding: 10px 12px;
  font-size: 14px;
  background: var(--surface-1, #ffffff);
  color: var(--text-1, #1f2937);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ocm-login-field .form-control:focus {
  outline: none;
  border-color: var(--accent-6, #2c5aa0);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-6, #2c5aa0) 22%, transparent);
}
.ocm-login-hint {
  font-size: 12px;
  color: var(--text-3, #6b7280);
  font-weight: 400;
}
.ocm-login-messages {
  font-size: 13px;
  color: var(--accent-9, #b45309);
  min-height: 0;
}
.ocm-login-messages:empty { display: none; }
.ocm-login-submit {
  background: var(--accent-6, #2c5aa0);
  color: #fff;
  border: none;
  border-radius: var(--radius-2, 8px);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.ocm-login-submit:hover  { background: var(--accent-7, #1e3f75); }
.ocm-login-submit:active { background: var(--accent-8, #163057); }
.ocm-login-notice {
  font-size: 11px;
  color: var(--text-3, #6b7280);
  text-align: center;
  margin: 8px 4px 0;
  line-height: 1.5;
}
.ocm-login-footer {
  font-size: 11px;
  color: var(--text-3, #9ca3af);
  text-align: center;
  margin: 0;
}

/* SSO button — Aurora outline-button style with a divider above so
 * "or sign in with Microsoft Entra ID" reads as a parallel option,
 * not an afterthought slapped under the password form. */
.ocm-login-sso {
  display: block;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  text-align: center;
}
.ocm-login-sso-label {
  display: block;
  font-size: 12px;
  color: var(--text-3, #6b7280);
  margin-bottom: 8px;
}
.ocm-login-sso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-2, 8px);
  border: 1px solid var(--border-subtle, #d1d5db);
  background: var(--surface-1, #ffffff);
  color: var(--text-1, #1f2937);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.ocm-login-sso-btn:hover {
  background: var(--surface-2, #f3f4f6);
  border-color: var(--border-strong, #9ca3af);
  text-decoration: none;
  color: var(--text-1, #1f2937);
}
.ocm-login-sso-btn .ocm-login-sso-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* `inc/footer.php` p-margin reset (legacy). */
.ocm-footer-pinch { margin: 0; }

/* `subtemplates/system-feeds.html`, `system-default_prefs.html`,
   `system-sms.html`, `password.html` — `padding:5px` on a wrapper
   <div>. */
.ocm-form-pad-5 { padding: 5px; }

/* `system-default_prefs.html`, `password.html`, `system-sms.html` —
   `float:left;padding:2px / 5px` body column. */
.ocm-form-col-left {
    float: left;
    padding: 5px;
}
.ocm-form-col-left-2 {
    float: left;
    padding: 2px;
}
.ocm-form-col-right-500 {
    float: right;
    padding: 5px;
    width: 500px;
}
.ocm-form-footer-clear { clear: both; }
.ocm-form-bar          { float: left; margin: 4px; }

/* `subtemplates/case_screen.html` — inline `background: #7386D5;` on
   the case-tab card. */
.ocm-case-tab-card { background: #7386D5; }

/* `subtemplates/system-json-tabs.html`, `inc/header.php` — `padding:1em`
   col wrapper used by activityC.html. */
.ocm-pad-1em { padding: 1em; }

/* `activityC.html` — `display:none` SMS reminders panel. */
.ocm-sms-reminders { display: none; }

/* `activityC.html` SMS textarea. Was
   `style="resize: both; width: 100%;"`. */
.ocm-sms-extra-textarea {
    resize: both;
    width: 100%;
}

/* `subtemplates/alias.html` — `float:left;position:relative`. */
.ocm-col-relative {
    float: left;
    position: relative;
}

/* `home.html` — collapsed motd content. */
.ocm-hidden { display: none; }

/* `app/lib/pl.php` — print-meta wrapper. Hidden on screen by default;
   the print stylesheet (cms/css/aurora-print.css) re-shows it
   inside an @media print { } block. Was inline `style="display:none"`. */
.print-meta { display: none; }

/* `textFormat.html` — the floating popup. */
.ocm-textformat-popup {
    visibility: hidden;
    position: absolute;
    background-color: white;
    padding: 0.5em;
    text-align: right;
}

/* `app/lib/pl.php` — re-auth fatal/confirm-identity inline styles.
   The file emits a standalone HTML page so we keep most of those
   styles in PHP, but the small "error" banner and the cancel-link
   margin become reusable hooks. */
.ocm-reauth-error {
    color: #b00020;
    margin: 8px 0;
}
.ocm-mt-20px { margin-top: 20px; }

/* `subtemplates/case-elig.html` etc. — generic 20-pixel-top-spacer
   <div>. Bootstrap's `mt-3` is 16px; the templates were 20. We
   pick `mt-4` (24px) where the visual gap is forgiving and use
   `ocm-mt-20px` where the exact 20px matters. The bulk of the
   `style="margin-top:20px;"` hits in case-elig.html become `mt-4`. */
.ocm-row-spacer-20 { margin-top: 20px; }
.ocm-row-spacer-10 { margin-top: 10px; }
.ocm-row-spacer-5  { margin-top: 5px; }
.ocm-margin-7      { margin: 7px; }
.ocm-margin-3      { margin: 3px; }

/* `inc/footer.php` (legacy) — paragraph margin reset. */

/* `case_list.html` open/closed badge — was
   `style="color: %%[open_closed_color]%%;"`. The colour is a per-row
   PHP value. Phase 6 fed it as a CSS custom property
   (`style="--ocm-oc-color: …"`); Phase 7 (#235) replaced the inline
   style attribute with a finite class set (the PHP only ever sets one
   of three colours), so the strict CSP no longer needs to whitelist
   inline-style attributes for this case. The custom-property fallback
   is kept so any caller that still emits `style="--ocm-oc-color: …"`
   keeps working. */
.ocm-open-closed-badge          { color: var(--ocm-oc-color, inherit); }
.ocm-open-closed-badge.ocm-oc-open   { color: #008800; }
.ocm-open-closed-badge.ocm-oc-closed { color: #ff0000; }
.ocm-open-closed-badge.ocm-oc-walled { color: #666666; }

/* `pika_cms.php` font-size injector — was an inline <style> block.
   The four font-size strings in `pika_cms.php` are now <body>
   classes that re-declare the same rules. The PHP plugin sets
   `<body class="...font-...">` once per page load. */
.ocm-font-small  { font-size: 13px; }
.ocm-font-large  { font-size: 16px; }
.ocm-font-xl     { font-size: 18px; }
.ocm-font-small  tr { font-size: 12px; }
.ocm-font-large  tr { font-size: 14px; }
.ocm-font-xl     tr { font-size: 16px; }
.ocm-font-small  input,
.ocm-font-small  select,
.ocm-font-small  textarea,
.ocm-font-small  th,
.ocm-font-small  .row1,
.ocm-font-small  .row2 { font-size: 11px; }
.ocm-font-large  input,
.ocm-font-large  select,
.ocm-font-large  textarea,
.ocm-font-large  th,
.ocm-font-large  .row1,
.ocm-font-large  .row2 { font-size: 13px; }
.ocm-font-xl     input,
.ocm-font-xl     select,
.ocm-font-xl     textarea,
.ocm-font-xl     th,
.ocm-font-xl     .row1,
.ocm-font-xl     .row2 { font-size: 15px; }
.ocm-font-small  tt { font-size: 14px; }
.ocm-font-large  tt { font-size: 16px; }
.ocm-font-xl     tt { font-size: 17px; }
.ocm-font-small  .mycal,
.ocm-font-small  .othercal { font-size: 10px; }
.ocm-font-large  .mycal,
.ocm-font-large  .othercal { font-size: 12px; }
.ocm-font-xl     .mycal,
.ocm-font-xl     .othercal { font-size: 13px; }
.ocm-font-small  h1 { font-size: 18px; }
.ocm-font-large  h1 { font-size: 21px; }
.ocm-font-xl     h1 { font-size: 22px; }
.ocm-font-small  h1.crumbtrail { font-size: 13px; }
.ocm-font-large  h1.crumbtrail { font-size: 15px; }
.ocm-font-xl     h1.crumbtrail { font-size: 46px; }
.ocm-font-small  h2,
.ocm-font-small  h4 { font-size: 15px; }
.ocm-font-large  h2,
.ocm-font-large  h4 { font-size: 18px; }
.ocm-font-xl     h2,
.ocm-font-xl     h4 { font-size: 19px; }
.ocm-font-small  .small { font-size: 10px; }
.ocm-font-large  .small { font-size: 12px; }
.ocm-font-xl     .small { font-size: 13px; }
.ocm-font-small  .nav,
.ocm-font-small  .nav a { font-size: 11px; }
.ocm-font-large  .nav,
.ocm-font-large  .nav a { font-size: 13px; }
.ocm-font-xl     .nav,
.ocm-font-xl     .nav a { font-size: 14px; }

/* `cms/reports/mileage_report/report.php` — print-stylesheet block.
   Was an inline `<style>` block. Scoped to the wrapper class so it
   doesn't bleed into other report formats. */
.ocm-mileage-report table,
.ocm-mileage-report th,
.ocm-mileage-report td {
    border: 1px solid black;
    padding: 5px;
}

/* `app/lib/pl.php` re-auth confirm-identity standalone page. The
   page is an isolated `echo`-emitted HTML doc that does not load
   custom.css; the styles are kept inline as a single bundled CSS
   block that lives in pl_html_reauth_page_css() so the only inline
   <style> that survives is server-emitted (Phase 7 nonce candidate). */

/* #202 — supervisor dashboard tiles, Bootstrap-only fallback.
   aurora.css ships richer styling under the same selectors when the
   aurora_chrome toggle is on; this block uses plain Bootstrap-flavoured
   values so the page is still usable on the legacy chrome. */
.ocm-supervisor-dashboard {
    padding: 1rem;
}
.ocm-sup-heading {
    font-size: 1.25rem;
    color: #212529;
    margin-bottom: 0.75rem;
}
.ocm-sup-intro {
    color: #6c757d;
    margin-bottom: 1rem;
}
.ocm-sup-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.ocm-sup-tile {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ocm-sup-tile:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.ocm-sup-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.ocm-sup-tile-link:hover,
.ocm-sup-tile-link:focus {
    text-decoration: none;
    color: inherit;
}
.ocm-sup-tile-count {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ocm-sup-tile-label {
    margin-top: 4px;
    font-size: 0.875rem;
    color: #6c757d;
}
.ocm-sup-tone-info    { border-left: 4px solid #0d6efd; }
.ocm-sup-tone-warning { border-left: 4px solid #ffc107; }
.ocm-sup-tone-danger  { border-left: 4px solid #dc3545; }
.ocm-sup-staff-table {
    margin-top: 0.75rem;
}
.ocm-sup-footnote {
    margin-top: 1rem;
}

/* dup-detection report (#171) — JSON detail blob in the
   "Possible duplicates" listing. Styling lifted out of the
   row-render so the strict-CSP audit (#235 P6) stays clean. */
.ocm-dup-detail {
    white-space: pre-wrap;
    font-size: smaller;
    margin: 0;
}