/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* External sidebar theme */
:root {
  --external-sidebar-bg: #EEF4FB;
  --external-sidebar-border: #B5D4F4;
  --external-sidebar-text: #0C447C;
  --external-sidebar-label: #185FA5;
  --external-sidebar-hover: #E2EDF8;
  --external-sidebar-active: #D9E8F7;
  --external-sidebar-muted: #6AA3D0;
}

/* Animated dots for loading states */
@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Custom font families for audit rule redesign */
.font-heading {
  font-family: 'Source Serif 4', Georgia, serif;
}

.font-mono-jb {
  font-family: 'JetBrains Mono', monospace;
}

/* Confidence ring animation */
@keyframes confidence-fill {
  from {
    stroke-dashoffset: var(--circumference);
  }
  to {
    stroke-dashoffset: var(--target-offset);
  }
}

.confidence-ring-progress {
  animation: confidence-fill 1s ease-out forwards;
}

/* Status dot pulse animation */
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Cert KB search — flash the matched field on anchor navigation.
   :target covers fresh page loads with a hash (cross-tab nav, reload).
   .kb-field-flash is toggled by certification_search_controller for
   same-page clicks where history.replaceState wouldn't update :target. */
[id^="kb-field-"]:target,
.kb-field-flash {
  animation: kb-field-flash 1.5s ease-out;
}
@keyframes kb-field-flash {
  0%, 20% { background-color: rgb(254 243 199); /* amber-100 */ }
  100% { background-color: transparent; }
}

/* Sidebar collapse - prevent text wrap during animation */
[data-controller="nav-sidebar"] a,
[data-controller="nav-sidebar"] summary,
[data-controller="nav-sidebar"] button {
  white-space: nowrap;
  overflow: hidden;
}

/* Center icons when sidebar is collapsed */
[data-nav-sidebar-collapsed-value="true"] nav a,
[data-nav-sidebar-collapsed-value="true"] nav summary,
[data-nav-sidebar-collapsed-value="true"] nav button {
  justify-content: center;
}

/* Evidence highlight in document preview */
.evidence-highlight,
.prose .evidence-highlight,
.prose-sm .evidence-highlight,
.prose-slate .evidence-highlight,
mark.evidence-highlight {
  background-color: #fde68a !important; /* amber-200 */
  color: #0f172a !important; /* slate-900 */
  padding: 2px 4px !important;
  border-radius: 3px !important;
  scroll-margin-top: 100px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Source drawer — excerpt highlighting */
.prose mark {
  background-color: rgb(254 243 199 / 0.7); /* amber-100/70 */
  color: inherit;
  padding: 1px 2px;
  border-radius: 3px;
}

/* Call brief — visual highlighting for call preparation */
.call-brief h4.cb-heading {
  padding: 6px 12px;
  border-left: 3px solid;
  border-radius: 0 6px 6px 0;
  margin-top: 1.5em;
}

.call-brief .cb-heading-resolvable {
  border-left-color: #d97706; /* amber-600 */
  background-color: #fffbeb; /* amber-50 */
  color: #78350f; /* amber-900 */
}

.call-brief .cb-heading-established {
  border-left-color: #dc2626; /* red-600 */
  background-color: #fef2f2; /* red-50 */
  color: #991b1b; /* red-800 */
}

.call-brief .cb-heading-insufficient {
  border-left-color: #6366f1; /* indigo-500 */
  background-color: #eef2ff; /* indigo-50 */
  color: #3730a3; /* indigo-800 */
}

.call-brief .cb-heading-non-assessable {
  border-left-color: #64748b; /* slate-500 */
  background-color: #f8fafc; /* slate-50 */
  color: #334155; /* slate-700 */
}

.call-brief .cb-heading-questions {
  border-left-color: #10b981; /* emerald-500 */
  background-color: #ecfdf5; /* emerald-50 */
  color: #065f46; /* emerald-800 */
}

.call-brief h2.cb-heading-vigilance {
  border-left: 3px solid #dc2626;
  background-color: #fef2f2;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  color: #991b1b;
}

.call-brief h2.cb-heading-after-call {
  border-left: 3px solid #6366f1;
  background-color: #eef2ff;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  color: #3730a3;
}

.call-brief strong.cb-known {
  display: inline-block;
  background-color: #ecfdf5; /* emerald-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #065f46; /* emerald-800 */
}

.call-brief strong.cb-clarify {
  display: inline-block;
  background-color: #fffbeb; /* amber-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #78350f; /* amber-900 */
}

.call-brief strong.cb-amorce {
  display: inline-block;
  background-color: #ecfdf5; /* emerald-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #065f46; /* emerald-800 */
}

.call-brief strong.cb-docs {
  display: inline-block;
  background-color: #fffbeb; /* amber-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #78350f; /* amber-900 */
}

.call-brief strong.cb-trigger {
  display: inline-block;
  background-color: #eef2ff; /* indigo-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #3730a3; /* indigo-800 */
}

.call-brief strong.cb-depth {
  display: inline-block;
  background-color: #f1f5f9; /* slate-100 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #475569; /* slate-600 */
}

.call-brief strong.cb-kb-ref {
  display: inline-block;
  background-color: #eef2ff; /* indigo-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #3730a3; /* indigo-800 */
  font-style: italic;
}

.call-brief strong.cb-blocker {
  display: inline-block;
  background-color: #fef2f2; /* red-50 */
  padding: 2px 6px;
  border-radius: 3px;
  color: #991b1b; /* red-800 */
}

.call-brief .cb-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.call-brief .cb-badge-critical {
  background-color: #fee2e2; /* red-100 */
  color: #991b1b; /* red-800 */
}

.call-brief .cb-badge-important {
  background-color: #fef3c7; /* amber-100 */
  color: #78350f; /* amber-900 */
}

.call-brief .cb-badge-useful {
  background-color: #e0e7ff; /* indigo-100 */
  color: #3730a3; /* indigo-800 */
}

/* Guidelines diff (diffy) */
.guidelines-diff .diff {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.guidelines-diff .diff ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guidelines-diff .diff li {
  padding: 1px 20px;
  border-bottom: 1px solid transparent;
  white-space: pre-wrap;
  word-break: break-word;
}

.guidelines-diff .diff li.unchanged span {
  color: #334155; /* slate-700 */
}

.guidelines-diff .diff li.del {
  background-color: #fee2e2; /* red-100 */
  border-bottom-color: #fecaca; /* red-200 */
}

.guidelines-diff .diff li.del del {
  text-decoration: none;
  color: #991b1b; /* red-800 */
}

.guidelines-diff .diff li.del del strong {
  background-color: #fca5a5; /* red-300 */
  border-radius: 2px;
  padding: 0 1px;
  font-weight: inherit;
}

.guidelines-diff .diff li.ins {
  background-color: #d1fae5; /* emerald-100 */
  border-bottom-color: #a7f3d0; /* emerald-200 */
}

.guidelines-diff .diff li.ins ins {
  text-decoration: none;
  color: #065f46; /* emerald-800 */
}

.guidelines-diff .diff li.ins ins strong {
  background-color: #6ee7b7; /* emerald-300 */
  border-radius: 2px;
  padding: 0 1px;
  font-weight: inherit;
}

/* ============================================================
 * Tom Select — vendored from https://cdn.jsdelivr.net/npm/tom-select@2.6.0/dist/css/tom-select.min.css
 * To upgrade: replace everything between the BEGIN VENDOR and END VENDOR markers
 * with the latest minified output. Palette overrides live below the END VENDOR marker.
 * ============================================================ */
/* BEGIN VENDOR tom-select@2.6.0 */
.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:6px 8px 3px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{display:inline-block;vertical-align:initial}.ts-wrapper.multi .ts-control>div{background:#f2f2f2;border:0 solid #d0d0d0;color:#303030;cursor:pointer;margin:0 3px 3px 0;overflow:auto;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#e8e8e8;border:0 solid #cacaca;color:#303030}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#fff;border:0 solid #fff;color:#7d7d7d}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(#fff,#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:none;display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #d0d0d0;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#cacaca}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #d0d0d0;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#cacaca}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}:root{--ts-pr-clear-button:0px;--ts-pr-caret:0px;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
/* END VENDOR tom-select@2.6.0 */

/* Tom Select — Palette B+ overrides (aligned with /admin/styleguide form inputs) */
/* Tom-select copies the underlying <select>'s classes onto the wrapper.
 * When form_input_classes is on the select (px-3, py-2, border, bg-white,
 * rounded-md), those land on the wrapper and stack on top of .ts-control's
 * own border/padding. Neutralize them on the wrapper so .ts-control owns
 * the visual. */
.ts-wrapper {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}

.ts-wrapper .ts-control {
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #0f172a; /* slate-900 */
  padding: 0.5rem 0.75rem;
  min-height: 2.375rem; /* exactly matches form_input_classes: 20px line + 16px py-2 + 2px border = 38px */
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
}

.ts-wrapper.single .ts-control > .item {
  line-height: 1.25rem;
}

/* Single-select: keep selected item on one line and truncate with ellipsis */
.ts-wrapper.single .ts-control > .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ts-wrapper .ts-control input,
.ts-wrapper .ts-dropdown {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #0f172a;
}

.ts-wrapper .ts-control input::placeholder {
  color: #94a3b8; /* slate-400 */
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.focus.dropdown-active .ts-control {
  border-color: #818cf8; /* indigo-400 */
  box-shadow: 0 0 0 2px #c7d2fe; /* indigo-200 */
  outline: none;
}

.ts-wrapper.disabled .ts-control {
  background-color: #f8fafc; /* slate-50 — matches FORM_INPUT_DISABLED */
  border-color: #cbd5e1; /* slate-300 */
  color: #94a3b8; /* slate-400 */
  cursor: not-allowed;
  opacity: 1;
}

/* Required field validation feedback — :user-invalid only matches after the user
 * has interacted (or attempted submit), so it doesn't shout on initial render. */
.ts-wrapper:has(select:user-invalid) .ts-control {
  border-color: #dc2626; /* red-600 */
}

.ts-wrapper:has(select:user-invalid).focus .ts-control,
.ts-wrapper:has(select:user-invalid).focus.dropdown-active .ts-control {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px #fecaca; /* red-200 */
}

.ts-dropdown {
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  margin-top: 0.25rem;
  box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  /* Width is set inline by tom-select to match the underlying control's width.
   * Don't override — when the dropdown is reparented to <body> (to escape
   * overflow-hidden ancestors), any auto/min-width:100% rule resolves to
   * the body's width and stretches the dropdown across the whole viewport. */
}

/* Opt-in via data-tom-select-wide-dropdown-value="true" — for narrow controls
 * (filter pills) whose options carry long labels (partner / certification names).
 * The dropdown can grow up to 28rem regardless of the control's width. */
.ts-dropdown.ts-dropdown-wide {
  width: auto !important;        /* override tom-select's inline pixel width */
  min-width: 18rem;
  max-width: min(28rem, 90vw);
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 36rem; /* ~18 options visible */
}

.ts-dropdown .active,
.ts-dropdown [data-selectable].option:hover {
  background-color: #eef2ff; /* indigo-50 */
  color: #3730a3; /* indigo-800 */
}

.ts-dropdown [data-selectable] .highlight {
  background-color: #e0e7ff; /* indigo-100 */
  border-radius: 2px;
}

.ts-dropdown .optgroup-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f172a; /* slate-900 — matches styleguide H3 weight */
  padding: 0.5rem 0.75rem 0.25rem;
  background: transparent;
}

.ts-dropdown .no-results {
  color: #64748b; /* slate-500 */
  font-style: italic;
}

/* Multi-select pill (forward-looking — pilot is single-select only) */
.ts-wrapper.multi .ts-control > div {
  background: #eef2ff; /* indigo-50 */
  color: #3730a3; /* indigo-800 */
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e0e7ff; /* indigo-100 */
  color: #3730a3;
}

/* Clear button */
.plugin-clear_button .clear-button {
  color: #94a3b8; /* slate-400 */
  font-size: 1rem;
  line-height: 1;
}

.plugin-clear_button .clear-button:hover {
  color: #475569; /* slate-600 */
}