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;
}

/* The nested-list rule above paints a #6d7fcc blue pill on links, which
   bleeds onto the document file list (ul.pika_files is a nested ul). That
   left the Edit / Delete and file links as low-contrast dark text on blue
   (black-on-dark-blue in both themes). The document list manages its own
   link colours, so clear the inherited background and indent. */
ul.pika_files a {
    background: transparent !important;
    padding-left: 0 !important;
    font-size: inherit !important;
}

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;
}

/* Same fallback for the reveal-on-focus variant, used by the Aurora
   topbar's real search form (label + input + named submit). Clipped like
   .visually-hidden until the element or any descendant takes focus, then
   it lays out normally. */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    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; }

/* Per-user text-size preference (Account Preferences → Text Size).
   The class comes from pl_font_size_class() and lands on <html> —
   see templates/default.html and templates/default_aurora.html.

   It used to land on <body> and re-declare a long list of px sizes
   for tr / input / th / h1 / .mycal / … , inherited verbatim from
   the v8 inline <style> injector in pika_cms.php. That list stopped
   meaning anything under v9: Aurora and Bootstrap 5 size *everything*
   — type, control heights, padding, gaps — in rem, which resolves
   against <html>, not <body>. So the old rules moved a handful of
   legacy elements and left the actual UI untouched. The visible
   result was a preference that appeared broken: Medium (no class)
   showed full Aurora sizing, and Super Size, which set body to 18px
   while every rem-based component held still, was indistinguishable
   from it. The px list also carried a straight typo — Super Size gave
   h1.crumbtrail 46px against Large's 15px.

   Scaling the root instead makes one rule do the whole job, and
   because rem drives padding and control height too, the smaller
   settings genuinely fit more on screen rather than only shrinking
   glyphs. Medium is the 100% no-op default and still emits no class,
   so nothing changes for anyone who has not touched the setting. */
html.ocm-font-small { font-size: 87.5%; }   /* 14px at a 16px root */
html.ocm-font-large { font-size: 112.5%; }  /* 18px */
html.ocm-font-xl    { font-size: 125%; }    /* 20px */

/* `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;
}

/* FVAP #10 — collapsed checkbox_list disclosure (`collapsed=1`).
   Used on the case Info screen so legal issue / victimization / outcome
   do not render fully expanded and push the rest of the form off-screen. */
.ocm-checkbox-list-collapse {
    margin-bottom: 0.5rem;
}
.ocm-checkbox-list-summary {
    cursor: pointer;
    padding: 0.25rem 0;
    font-weight: 600;
    user-select: none;
}
.ocm-checkbox-list-summary:hover {
    text-decoration: underline;
}
.ocm-checkbox-list-count {
    font-weight: 400;
    color: #6b7280;
}

/* Legacy BBCode [size=N] classes (enable_legacy_bbcode). Emitted as classes
   rather than inline style so they survive v9's strict CSP. Inert when the
   toggle is off — nothing generates these class names. */
.OCM-Font-Size-1 { font-size: 16px; }
.OCM-Font-Size-2 { font-size: 20px; }
.OCM-Font-Size-3 { font-size: 24px; }
.OCM-Font-Size-4 { font-size: 28px; }
.OCM-Font-Size-5 { font-size: 32px; }
.OCM-Font-Size-6 { font-size: 36px; }
.OCM-Font-Size-7 { font-size: 40px; }