/* audit.css — Audit-tool styling on top of Abriska's Bootstrap-3 product theme.
 *
 * The audit SPA's page modules were authored against Bootstrap 5 markup, while
 * the chrome (abriska.product.css) is Bootstrap 3. Rather than rewrite ~4000
 * lines of template strings, this stylesheet provides a compatibility layer for
 * the BS5 utility/component classes that BS3 lacks (verified absent from
 * product.css), so the existing markup renders correctly. It also ports the
 * genuinely audit-specific helpers (mirrors Abriska's CE+ ceplus.css).
 *
 * Loaded LAST (after abriska.* + toastui), so it wins on equal specificity.
 *
 * Colours come from abriska.colours.css tokens (`--color-*`, light-dark()), so
 * everything here is theme-aware for free.
 *
 * Sections:
 *   1. Spacing utilities (BS5 m*/p* scale, incl. logical ms/me/ps/pe)
 *   2. Flexbox / display / sizing utilities
 *   3. Grid additions (bare col-N, col-lg breakpoint parity)
 *   4. Typography / colour / border utilities
 *   5. Cards → panel look
 *   6. Badges (text-bg-*) + finding-type / severity pills
 *   7. Forms (form-select, form-check, form-label, form-text, validation, sizing)
 *   8. Spinner
 *   9. List groups (item-action / flush)
 *  10. Alerts / modals close-button parity
 *  11. Tables (BS5 contextual variants)
 *  12. Buttons (outline / close)
 *  13. Ported CE+ helpers (page-header-row, empty-state, stats, detail-grid, …)
 *  14. Legend panel (+ collapse toggle)
 *  15. Evidence split-scroll
 *  16. TOAST UI editor tweaks
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. Spacing utilities — BS5 scale: 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem
   Covers m/p with sides t/b/s(start=left)/e(end=right)/x/y and auto margins.
   ───────────────────────────────────────────────────────────────────────── */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ms-0,.ml-0{margin-left:0!important}.ms-1,.ml-1{margin-left:.25rem!important}.ms-2,.ml-2{margin-left:.5rem!important}.ms-3,.ml-3{margin-left:1rem!important}.ms-4,.ml-4{margin-left:1.5rem!important}.ms-5,.ml-5{margin-left:3rem!important}
.me-0,.mr-0{margin-right:0!important}.me-1,.mr-1{margin-right:.25rem!important}.me-2,.mr-2{margin-right:.5rem!important}.me-3,.mr-3{margin-right:1rem!important}.me-4,.mr-4{margin-right:1.5rem!important}.me-5,.mr-5{margin-right:3rem!important}
.mx-0{margin-left:0!important;margin-right:0!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.mx-3{margin-left:1rem!important;margin-right:1rem!important}
.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}
.ms-auto,.ml-auto{margin-left:auto!important}.me-auto,.mr-auto{margin-right:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}
.ps-0,.pl-0{padding-left:0!important}.ps-1,.pl-1{padding-left:.25rem!important}.ps-2,.pl-2{padding-left:.5rem!important}.ps-3,.pl-3{padding-left:1rem!important}.ps-4,.pl-4{padding-left:1.5rem!important}
.pe-0,.pr-0{padding-right:0!important}.pe-1,.pr-1{padding-right:.25rem!important}.pe-2,.pr-2{padding-right:.5rem!important}.pe-3,.pr-3{padding-right:1rem!important}.pe-4,.pr-4{padding-right:1.5rem!important}
.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.px-5{padding-left:3rem!important;padding-right:3rem!important}
.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.pt-5{padding-top:3rem!important}.pb-5{padding-bottom:3rem!important}
.mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.mx-5{margin-left:3rem!important;margin-right:3rem!important}
.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}

/* ─────────────────────────────────────────────────────────────────────────
   2. Flexbox / display / sizing utilities
   ───────────────────────────────────────────────────────────────────────── */
.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.d-block{display:block!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-none{display:none!important}
.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}
.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}
.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-fill{flex:1 1 auto!important}
.justify-content-start{justify-content:flex-start!important}
.justify-content-end{justify-content:flex-end!important}
.justify-content-center{justify-content:center!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-around{justify-content:space-around!important}
.justify-content-evenly{justify-content:space-evenly!important}
.align-items-start{align-items:flex-start!important}
.align-items-end{align-items:flex-end!important}
.align-items-center{align-items:center!important}
.align-items-baseline{align-items:baseline!important}
.align-items-stretch{align-items:stretch!important}
.align-self-start{align-self:flex-start!important}
.align-self-end{align-self:flex-end!important}
.align-self-center{align-self:center!important}
.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}
.w-100{width:100%!important}.w-auto{width:auto!important}.h-100{height:100%!important}.mw-100{max-width:100%!important}
.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}
/* BS5 grid gutter classes are no-ops here — BS3 rows carry fixed 15px gutters. */
.row.g-1,.row.g-2,.row.g-3,.row.g-4,.row.g-5{}

/* ─────────────────────────────────────────────────────────────────────────
   3. Grid additions — bare BS5 cols (col-N == col-xs-N) + col-lg breakpoint parity
   BS3 lg=1200px but BS5 lg=992px; re-point col-lg-* to 992 so two-column page
   layouts (audit-items, report-sections, questions) split at the same width.
   ───────────────────────────────────────────────────────────────────────── */
.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px;float:left}
.col{flex:1 0 0%;float:none}
.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}.col-5{width:41.6667%}.col-6{width:50%}
.col-7{width:58.3333%}.col-8{width:66.6667%}.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}
@media (min-width:992px){
  .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%}
  .col-lg-5{width:41.6667%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}
  .col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Typography / colour / border utilities
   ───────────────────────────────────────────────────────────────────────── */
.fw-bold{font-weight:700!important}.fw-semibold{font-weight:600!important}.fw-medium{font-weight:500!important}.fw-normal{font-weight:400!important}.fw-light{font-weight:300!important}
.fst-italic{font-style:italic!important}
.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}
.small,.text-sm{font-size:.875em}
.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}
.font-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important}
.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}
.text-nowrap{white-space:nowrap!important}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}
.text-muted,.text-body-secondary{color:var(--color-text-muted)!important}
.text-secondary{color:var(--color-text-secondary)!important}
.text-primary{color:var(--color-link)!important}
.text-success{color:var(--color-success)!important}
.text-danger,.text-warning-emphasis{color:var(--color-danger)!important}
.text-warning{color:var(--color-alert-warning-text)!important}
.text-info{color:var(--color-info)!important}
.text-white{color:#fff!important}
.text-dark{color:var(--color-text-primary)!important}
.text-reset{color:inherit!important}
.text-decoration-none{text-decoration:none!important}
.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}
.bg-white{background-color:var(--color-surface)!important}
.bg-light{background-color:var(--color-surface-raised)!important}
.bg-body{background-color:var(--color-surface)!important}
.border{border:1px solid var(--color-border)!important}
.border-0{border:0!important}
.border-top{border-top:1px solid var(--color-border)!important}
.border-bottom{border-bottom:1px solid var(--color-border)!important}
.border-start,.border-left{border-left:1px solid var(--color-border)!important}
.border-end,.border-right{border-right:1px solid var(--color-border)!important}
.border-2{border-width:2px!important}.border-4{border-width:4px!important}
.border-primary{border-color:var(--color-link)!important}
.border-warning{border-color:var(--color-alert-warning-text)!important}
.border-success{border-color:var(--color-success)!important}
.border-danger{border-color:var(--color-danger)!important}
.rounded{border-radius:4px!important}.rounded-0{border-radius:0!important}
.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.08)!important}
.shadow{box-shadow:0 2px 8px rgba(0,0,0,.12)!important}
.shadow-none{box-shadow:none!important}

/* ─────────────────────────────────────────────────────────────────────────
   5. Cards → panel look (BS3 has no card component)
   ───────────────────────────────────────────────────────────────────────── */
.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:var(--color-surface);background-clip:border-box;border:1px solid var(--color-border);border-radius:4px;margin-bottom:20px}
.card-header{padding:10px 15px;margin-bottom:0;background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);border-top-left-radius:calc(4px - 1px);border-top-right-radius:calc(4px - 1px)}
.card-body{flex:1 1 auto;padding:15px}
.card-footer{padding:10px 15px;background-color:var(--color-surface-raised);border-top:1px solid var(--color-border)}
.card-title{margin-top:0;margin-bottom:.5rem;font-size:16px;font-weight:600}
.card-subtitle{margin-top:-.25rem;margin-bottom:.5rem;color:var(--color-text-muted)}
.card-text:last-child{margin-bottom:0}
.card.border-dashed,.border-dashed{border-style:dashed!important}
.card.h-100{margin-bottom:0}

/* ─────────────────────────────────────────────────────────────────────────
   6. Badges — BS5 text-bg-* over BS3's neutral .badge base + status/type pills
   ───────────────────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:.35em .6em;font-size:75%;font-weight:600;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.35rem}
.text-bg-primary{background-color:var(--color-primary)!important;color:#fff!important}
.text-bg-secondary{background-color:var(--color-text-muted)!important;color:#fff!important}
.text-bg-success{background-color:var(--color-success)!important;color:#fff!important}
.text-bg-danger{background-color:var(--color-danger)!important;color:#fff!important}
.text-bg-warning{background-color:var(--color-alert-warning-text)!important;color:#fff!important}
.text-bg-info{background-color:var(--color-info)!important;color:#fff!important}
.text-bg-light{background-color:var(--color-surface-raised)!important;color:var(--color-text-primary)!important}
.text-bg-dark{background-color:var(--color-primary)!important;color:#fff!important}
.text-bg-purple{background-color:var(--color-severity-fp-text)!important;color:#fff!important}
/* BS5 bg-* used directly on badges */
.bg-primary{background-color:var(--color-primary)!important}
.bg-secondary{background-color:var(--color-text-muted)!important}
.bg-success{background-color:var(--color-success)!important}
.bg-danger{background-color:var(--color-danger)!important}
.bg-warning{background-color:var(--color-alert-warning-text)!important}
.bg-info{background-color:var(--color-info)!important}

/* Finding-type badges (audit domain) — used as `badge badge-<type>` */
.badge-major_nonconformity{background-color:var(--color-danger)!important;color:#fff!important}
.badge-minor_nonconformity{background-color:var(--color-alert-warning-text)!important;color:#fff!important}
.badge-opportunity_for_improvement{background-color:var(--color-info)!important;color:#fff!important}
.badge-observation{background-color:var(--color-text-muted)!important;color:#fff!important}
.badge-positive_finding{background-color:var(--color-success)!important;color:#fff!important}

/* ─────────────────────────────────────────────────────────────────────────
   7. Forms — BS5 form classes not in BS3
   ───────────────────────────────────────────────────────────────────────── */
.form-select{display:block;width:100%;padding:6px 28px 6px 12px;font-size:14px;line-height:1.42857143;color:var(--color-input-text);background-color:var(--color-input-bg);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;border:1px solid var(--color-input-border);border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.form-select:focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
.form-select-sm{padding:3px 24px 3px 8px;font-size:12px}
.form-label{display:inline-block;margin-bottom:.4rem;font-weight:600}
.col-form-label{padding-top:7px;padding-bottom:7px;margin-bottom:0;font-weight:600}
.form-text{display:block;margin-top:.25rem;font-size:.875em;color:var(--color-text-muted)}
.form-control-sm{height:30px;padding:3px 8px;font-size:12px;line-height:1.5;border-radius:3px}
select.form-control-sm{height:30px;line-height:30px}
.invalid-feedback{display:block;width:100%;margin-top:.25rem;font-size:.875em;color:var(--color-danger)}
.is-invalid{border-color:var(--color-danger)!important}
/* form-check: BS5 checkbox/radio layout */
.form-check{position:relative;display:block;min-height:1.4rem;padding-left:1.6em;margin-bottom:.15rem}
.form-check-input{float:left;margin-left:-1.6em;margin-top:.2em;width:1em;height:1em}
.form-check-inline{display:inline-flex;align-items:center;margin-right:1rem;padding-left:0}
.form-check-inline .form-check-input{float:none;margin-left:0;margin-right:.35em}
.form-check-label{margin-bottom:0;font-weight:400}
.form-switch .form-check-input{width:2em;border-radius:2em}
/* input-group: make BS5 addon/text render under BS3's table layout */
.input-group-text{display:table-cell;width:1%;padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:var(--color-input-text);text-align:center;white-space:nowrap;vertical-align:middle;background-color:var(--color-surface-raised);border:1px solid var(--color-input-border);border-radius:4px}
.input-group-sm>.form-control,.input-group-sm>.input-group-text,.input-group-sm>.btn{height:30px;padding:3px 8px;font-size:12px}

/* ─────────────────────────────────────────────────────────────────────────
   8. Spinner (BS5 spinner-border)
   ───────────────────────────────────────────────────────────────────────── */
@keyframes audit-spin{to{transform:rotate(360deg)}}
.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;animation:audit-spin .75s linear infinite}
.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}
.spinner-border.text-primary{color:var(--color-link)}

/* ─────────────────────────────────────────────────────────────────────────
   9. List groups — add BS5 -action / -flush on top of BS3's list-group
   ───────────────────────────────────────────────────────────────────────── */
.list-group-item-action{width:100%;color:var(--color-text-primary);text-align:inherit;cursor:pointer}
.list-group-item-action:hover,.list-group-item-action:focus{background-color:var(--color-surface-hover);color:var(--color-text-primary);text-decoration:none}
button.list-group-item{background:none;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border)}
.list-group-flush{border-radius:0}
.list-group-flush>.list-group-item{border-left:0;border-right:0;border-radius:0}
.list-group-flush>.list-group-item:first-child{border-top:0}
.list-group-flush>.list-group-item:last-child{border-bottom:0}
.list-group-item.active{background-color:var(--color-navbar-active-bg);border-color:var(--color-navbar-active-bg);color:#fff;z-index:2}
.list-group-item.active .text-muted,.list-group-item.active .text-body-secondary{color:rgba(255,255,255,.75)!important}

/* ─────────────────────────────────────────────────────────────────────────
   10. Alerts / modal close-button parity
   ───────────────────────────────────────────────────────────────────────── */
/* BS3 .fade sets opacity:0 until .in; guard against any stray BS5 .show. */
.fade.show,.fade.in{opacity:1}
/* BS5 alert-light (BS3 lacks it) — subtle neutral alert. */
.alert-light{background-color:var(--color-surface-raised);border-color:var(--color-border);color:var(--color-text-primary)}
/* Modal sizes/scroll BS3 lacks (BS5 markup used by page modules). */
@media (min-width:992px){.modal-xl{width:1140px}}
@media (min-width:768px){.modal-xl{width:90%}}
.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 60px);overflow:hidden}
.modal-dialog-scrollable .modal-body{overflow-y:auto}
/* Fallback styling if a BS5 .btn-close slips through (we rewrite to .close). */
.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;border:0;background:transparent;opacity:.5;cursor:pointer;font-size:1.2rem;line-height:1}
.btn-close::before{content:"\00d7"}
.btn-close:hover{opacity:.9}

/* ─────────────────────────────────────────────────────────────────────────
   11. Tables — BS5 contextual variants + align-middle
   ───────────────────────────────────────────────────────────────────────── */
.table>thead.table-dark>tr>th,.table thead.table-dark th,.table .table-dark th{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.table>tbody>tr.table-light>td,.table .table-light>td,tr.table-light>td{background-color:var(--color-surface-raised)}
.table>tbody>tr.table-secondary>td,.table tr.table-secondary>td{background-color:var(--color-surface-sunken)}
.table>tbody>tr.table-active>td{background-color:var(--color-table-hover)}
.align-middle,.table .align-middle td,.table td.align-middle,.table th.align-middle{vertical-align:middle!important}
.table-sm>thead>tr>th,.table-sm>tbody>tr>td{padding:5px}

/* ─────────────────────────────────────────────────────────────────────────
   12. Buttons — BS5 outline + close (BS3 lacks outline variants)
   ───────────────────────────────────────────────────────────────────────── */
/* BS3 has no .btn-secondary (BS4/5 only) — map to a neutral (default) button. */
.btn-secondary{color:var(--color-text-primary);background-color:var(--color-surface-raised);border-color:var(--color-border-strong)}
.btn-secondary:hover,.btn-secondary:focus{color:var(--color-text-primary);background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}
.btn-outline-secondary,.btn-outline-primary,.btn-outline-dark{background-color:transparent;border:1px solid var(--color-border-strong);color:var(--color-text-primary)}
.btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-dark:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}
.btn-outline-danger{background-color:transparent;border:1px solid var(--color-danger);color:var(--color-danger)}
.btn-outline-danger:hover{background-color:var(--color-danger);color:#fff}
.btn-outline-success{background-color:transparent;border:1px solid var(--color-success);color:var(--color-success)}
.btn-outline-success:hover{background-color:var(--color-success);color:#fff}
.btn-outline-primary{border-color:var(--color-link);color:var(--color-link)}
.btn-outline-primary:hover{background-color:var(--color-link);color:#fff}

/* ─────────────────────────────────────────────────────────────────────────
   13. Ported CE+ helpers (scoped to #main) — from Abriska ceplus.css
   ───────────────────────────────────────────────────────────────────────── */
#main .page-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
#main .table-wrapper{overflow-x:auto}
#main .loading{text-align:center;padding:40px 20px;color:var(--color-text-muted);font-size:14px}
#main .empty-state{text-align:center;padding:40px 20px;color:var(--color-text-muted)}
#main .empty-state .empty-icon{font-size:36px;margin-bottom:8px;line-height:1}
#main .empty-state h2{font-size:16px;margin:0 0 6px 0;color:var(--color-text-primary)}
#main .empty-state p{margin:0;font-size:13px}
#main .filter-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
#main .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
#main .stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:12px 16px}
#main .stat-card .stat-label{color:var(--color-text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
#main .stat-card .stat-value{font-size:22px;font-weight:600;color:var(--color-text-primary)}
#main .detail-grid{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;font-size:13px;margin-bottom:12px}
#main .detail-grid dt{color:var(--color-text-secondary);font-weight:500}
#main .detail-grid dd{color:var(--color-text-primary);margin:0;word-break:break-word}
#main .form-error{color:var(--color-danger);font-size:12px;margin-top:4px}

/* Severity / finding-status pills (reuse abriska.custom.css .indicator-* base) */

/* Sidebar section header (audit SPA groups admin links under a caption) */
#side-menu .sidebar-section-header{padding:12px 15px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-sidebar-text);opacity:.6;pointer-events:none}
#side-menu .sidebar-section-header span{display:block}

/* ─────────────────────────────────────────────────────────────────────────
   14. Legend panel + collapse toggle (audit analogue of CE+ legend)
   ───────────────────────────────────────────────────────────────────────── */
.audit-legend-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;font-size:13px;border-bottom:1px solid var(--color-divider)}
.audit-legend-row:last-child{border-bottom:none}
.audit-legend-label{color:var(--color-text-secondary)}
.audit-legend-value{color:var(--color-text-primary);font-weight:600}
.audit-legend-toggle{background:transparent;border:0;padding:0 4px;color:inherit;cursor:pointer;line-height:1;margin-left:auto}
.audit-legend-toggle:hover{opacity:.7}
.audit-legend-toggle:focus{outline:1px dotted currentColor}
.audit-legend-toggle .fa{font-size:12px}
.row.main-content>.col-sm-3 .panel-heading{display:flex;align-items:center}
body.audit-legend-collapsed .row.main-content>.col-sm-9{width:calc(100% - 44px);transition:width .15s ease}
body.audit-legend-collapsed .row.main-content>.col-sm-3{width:44px;padding-left:0;padding-right:0;transition:width .15s ease}
body.audit-legend-collapsed .row.main-content>.col-sm-3 .panel-title,
body.audit-legend-collapsed .row.main-content>.col-sm-3 .panel-body{display:none}
body.audit-legend-collapsed .row.main-content>.col-sm-3 .panel-heading{justify-content:center;padding:8px 6px}
body.audit-legend-collapsed .row.main-content>.col-sm-3 .audit-legend-toggle{margin-left:0}

/* ─────────────────────────────────────────────────────────────────────────
   15. Evidence page: independently scrolling columns (ported from old shell)
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width:992px){
  .audit-items-split .audit-items-scroll{max-height:calc(100vh - 260px);overflow-y:auto;position:sticky;top:1rem}
}

/* ─────────────────────────────────────────────────────────────────────────
   16. TOAST UI editor chrome — match Abriska form-control sizing/focus
   ───────────────────────────────────────────────────────────────────────── */
.toastui-editor-defaultUI{border-radius:4px;font-family:inherit}
.toastui-editor-host{margin-bottom:0}
.toastui-editor-contents,
.toastui-editor-md-container .ProseMirror,
.toastui-editor-ww-container .ProseMirror{font-size:.9rem;font-family:inherit}
.toastui-editor-defaultUI:focus-within{border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}

/* Markdown preview blocks rendered in view mode */
.md-preview h1{font-size:1.4rem}
.md-preview h2{font-size:1.2rem}
.md-preview h3{font-size:1.05rem}
.md-preview table{width:100%;border-collapse:collapse}
.md-preview th,.md-preview td{border:1px solid var(--color-table-border);padding:.25rem .5rem}
.md-preview th{background:var(--color-surface-raised)}
.md-preview p:last-child{margin-bottom:0}

/* ─────────────────────────────────────────────────────────────────────────
   17. Scope page — clause/control hierarchy tree + sticky save bar
   ───────────────────────────────────────────────────────────────────────── */
.scope-section-title{font-size:.7rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--color-text-muted);margin:12px 0 6px}
.scope-section-title:first-child{margin-top:0}
.scope-group{margin-bottom:10px}
.scope-group-heading{border-bottom:1px solid var(--color-divider);
  padding-bottom:2px;margin-bottom:4px}
.scope-group-title{font-weight:600;font-size:.85rem}
.scope-row{margin:2px 0;font-size:.85rem}
.scope-row label{font-weight:400}
.scope-row.disabled label{color:var(--color-text-muted);cursor:not-allowed}
.scope-row-badges{margin-left:6px}
.scope-row-badges .label{margin-right:3px;font-weight:500}
.scope-save-bar{position:sticky;bottom:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--color-surface-raised);border-top:1px solid var(--color-divider)}