/* CGN styles. Layout and the sliding main menu are ported from CMS static/css/custom.css; every colour comes from
   the tenant theme's CSS variables (app/services/theme.py), which base.html writes into :root. */
:root {
  --bs-primary: var(--kms-primary);
  --bs-primary-rgb: var(--kms-primary-rgb);
  --bs-link-color: var(--kms-primary);
  --bs-link-color-rgb: var(--kms-primary-rgb);
  --bs-link-hover-color: var(--kms-primary-dark);
  --bs-focus-ring-color: rgba(var(--kms-primary-rgb), .25);
  --kms-sidebar-width: 264px;
}
body { background-color: var(--kms-page-bg); color: var(--kms-page-ink); }

.btn-primary {
  --bs-btn-bg: var(--kms-primary); --bs-btn-border-color: var(--kms-primary); --bs-btn-color: var(--kms-primary-ink);
  --bs-btn-hover-bg: var(--kms-primary-dark); --bs-btn-hover-border-color: var(--kms-primary-dark);
  --bs-btn-hover-color: var(--kms-primary-ink);
  --bs-btn-active-bg: var(--kms-primary-dark); --bs-btn-active-border-color: var(--kms-primary-dark);
  --bs-btn-disabled-bg: var(--kms-primary); --bs-btn-disabled-border-color: var(--kms-primary);
  --bs-btn-focus-shadow-rgb: var(--kms-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--kms-primary); --bs-btn-border-color: var(--kms-primary);
  --bs-btn-hover-bg: var(--kms-primary); --bs-btn-hover-border-color: var(--kms-primary);
  --bs-btn-hover-color: var(--kms-primary-ink);
  --bs-btn-active-bg: var(--kms-primary); --bs-btn-active-border-color: var(--kms-primary);
}
.btn-link { --bs-btn-color: var(--kms-primary); --bs-btn-hover-color: var(--kms-primary-dark); }
.pagination {
  --bs-pagination-color: var(--kms-primary); --bs-pagination-active-bg: var(--kms-primary);
  --bs-pagination-active-border-color: var(--kms-primary);
}
.nav-tabs .nav-link { color: var(--kms-primary); }
.nav-tabs .nav-link.active { border-top: 3px solid var(--kms-accent); font-weight: 600; color: var(--kms-page-ink); }
.nav-pills {    /* the active pill takes the theme's button colour (owner, 2026-10-19), not Bootstrap's blue */
  --bs-nav-pills-link-active-bg: var(--kms-primary); --bs-nav-pills-link-active-color: var(--kms-primary-ink);
}
.nav-tabs .nav-link.kms-tab-next:not(.active) { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; border-radius: .375rem .375rem 0 0; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--kms-primary-rgb), .55); box-shadow: 0 0 0 .25rem rgba(var(--kms-primary-rgb), .2);
}
.form-check-input:checked { background-color: var(--kms-primary); border-color: var(--kms-primary); }
.card { border-top: 3px solid var(--kms-accent) !important; }

/* ---------------------------------------------------------------- shell + main menu */
#app-shell { min-height: 100vh; }
.kms-sidebar {
  width: var(--kms-sidebar-width); min-width: var(--kms-sidebar-width);
  background: var(--kms-menu-bg); color: var(--kms-menu-ink);
  border-right: 4px solid var(--kms-active-bg);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: margin-left .22s ease;
}
.kms-sidebar a, .kms-sidebar .nav-link, .kms-sidebar button { color: var(--kms-menu-ink); }
.kms-sidebar .kms-muted { color: var(--kms-menu-ink); opacity: .78; }
.kms-sidebar hr { border-color: currentColor; opacity: .3; }
.kms-sidebar .nav-link { border-radius: .375rem; padding: .4rem .65rem; }
.kms-sidebar .nav-link:not(.active):hover { background: var(--kms-menu-hover); }
.kms-sidebar .kms-nav-heading { cursor: default; font-weight: 600; opacity: .9; }
.kms-sidebar .kms-nav-heading:hover { background: none !important; }
.kms-sidebar .nav-link.active { background: var(--kms-active-bg); color: var(--kms-active-ink); font-weight: 600; }
.kms-sidebar .kms-group-toggle .bi-chevron-down { transition: transform .15s ease; }
.kms-sidebar .kms-group-toggle.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.kms-brand { font-weight: 700; letter-spacing: .02em; }
.kms-logout button { background: none; border: 0; padding: 0; }

/* Sliding main menu (CMS): hide with the « button, Ctrl+\ or [; remembered in this browser. */
.kms-nav-hide { border: 0; padding: .1rem .35rem; line-height: 1; background: transparent; }
.kms-nav-hide:hover, .kms-nav-hide:focus-visible { background: var(--kms-menu-hover); }
.kms-nav-show { display: none; position: fixed; top: .75rem; left: 0; z-index: 1031; padding: .3rem .55rem;
  background: var(--kms-menu-bg); color: var(--kms-menu-ink); border: 0; border-radius: 0 .5rem .5rem 0;
  border-right: 3px solid var(--kms-active-bg); box-shadow: 0 .25rem .75rem rgba(0,0,0,.15); font-size: 1.15rem;
  line-height: 1; }
.kms-nav-show:hover, .kms-nav-show:focus-visible { background: var(--kms-menu-hover); color: var(--kms-menu-ink); }
html.kms-nav-collapsed .kms-sidebar { margin-left: calc(-1 * var(--kms-sidebar-width)); visibility: hidden;
  transition: margin-left .22s ease, visibility 0s .22s; }
html.kms-nav-collapsed .kms-nav-show { display: block; }
html.kms-nav-collapsed .kms-main > .container-fluid { padding-left: 3.5rem !important; }
@media print { .kms-sidebar, .kms-nav-show, .kms-help-fab { display: none !important; } }

.kms-main { min-width: 0; }
.kms-page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem;
  flex-wrap: wrap; }
.kms-page-header h1 .bi { color: var(--kms-primary); }
.kms-help-fab { position: fixed; top: .6rem; right: .75rem; width: 2rem; height: 2rem; padding: 0; font-size: 1rem;
  z-index: 1030; }
/* room on the right so the Help button never covers a page's own buttons */
.kms-main > .container-fluid { padding-right: 3.25rem !important; }
.kms-kv dt { font-weight: 500; color: var(--bs-secondary-color); }
.kms-placeholder { max-width: 560px; margin: 4rem auto; text-align: center; }
.kms-phrase .badge { font-size: .95rem; font-weight: 500; }

/* ---------------------------------------------------------------- login pages */
.kms-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: linear-gradient(135deg, var(--kms-menu-bg), var(--kms-active-bg)); }
.kms-auth-card { width: 100%; max-width: 440px; border-top: 4px solid var(--kms-accent) !important; }

/* ---------------------------------------------------------------- theme screen */
.kms-swatch { display: inline-block; width: 2.25rem; height: 2.25rem; border-radius: .4rem;
  border: 1px solid rgba(0,0,0,.15); vertical-align: middle; }
.kms-swatch-lg { width: 100%; height: 3.5rem; }
.kms-theme-preview { border: 1px solid rgba(0,0,0,.12); border-radius: .5rem; overflow: hidden; display: flex;
  min-height: 150px; }
.kms-theme-preview .pv-menu { width: 34%; padding: .75rem; }
.kms-theme-preview .pv-item { border-radius: .3rem; padding: .25rem .5rem; margin-bottom: .25rem; font-size: .85rem; }
.kms-theme-preview .pv-page { flex: 1; padding: .75rem; }
.kms-theme-preview .pv-btn { display: inline-block; border-radius: .3rem; padding: .25rem .65rem; font-size: .85rem; }

code { color: var(--kms-primary-dark); }

/* Small screens: the menu floats over the page instead of squeezing it, and starts hidden (base.html). */
@media (max-width: 767.98px) {
  .kms-sidebar { position: fixed; left: 0; top: 0; z-index: 1040; box-shadow: 0 0 1.5rem rgba(0,0,0,.25); }
  .kms-main > .container-fluid { padding-left: 3.5rem !important; padding-right: 1rem !important; }
}

/* Long free-text notes on record pages: full width, line breaks kept, long words wrap instead of overflowing. */
.kms-notes { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }

/* Lookup tables: marker for nested lists (and values that have sub-values). */
.kms-nested { color: var(--kms-primary); }
.kms-nested-badge { background: var(--kms-accent); color: var(--kms-page-ink); font-weight: 500; margin-left: .35rem; }

/* Documents: the original shown inside the page, and extracted text. */
.kms-original-frame { height: 75vh; min-height: 420px; background: #fff; }
.kms-doc-text { max-height: 360px; overflow: auto; white-space: pre-wrap; }
.kms-doc-text-full { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Research case Discussion (ported from CMS) */
.kms-chat-list { max-height: 62vh; overflow-y: auto; }
.kms-chat-msg { padding: .6rem .75rem; border-left: 3px solid var(--bs-border-color); border-radius: .25rem; margin-bottom: .6rem; background: #fff; }
.kms-chat-msg.mine { border-left-color: var(--kms-accent); background: var(--bs-tertiary-bg); }
.kms-chat-msg.reply { margin-left: 1.5rem; }
.kms-chat-current { border-left: 3px solid var(--kms-accent); background: var(--bs-tertiary-bg); }
.kms-chat-msg:target { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.kms-chat-body { white-space: normal; overflow-wrap: anywhere; }
/* Case folder tree */
.kms-tree-toggle .bi-chevron-down { transition: transform .15s ease; }
.kms-tree-toggle.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.kms-folder-card { min-height: 5.5rem; }

/* Draft editor (Drafts & Papers) */
textarea.kms-editor-text { min-height: 60vh; resize: vertical; font-size: .9rem; line-height: 1.5; }
.kms-editor-preview .kms-md { min-height: 60vh; max-height: 75vh; overflow: auto; }
.kms-editor[data-mode="write"] .kms-editor-preview,
.kms-editor[data-mode="preview"] .kms-editor-write { display: none; }
@media (max-width: 767.98px) {
  .kms-editor[data-mode="both"] { flex-direction: column; }
  .kms-editor[data-mode="both"] > .col { width: 100%; }
}
.kms-md { overflow-wrap: anywhere; line-height: 1.6; }
.kms-md table { width: auto; margin-bottom: 1rem; border-collapse: collapse; }
.kms-md th, .kms-md td { border: 1px solid var(--bs-border-color); padding: .25rem .5rem; }
.kms-md blockquote { border-left: 4px solid var(--bs-border-color); padding-left: .75rem; color: var(--bs-secondary-color); }
.kms-md pre { background: var(--bs-tertiary-bg); padding: .75rem; border-radius: .375rem; }
.kms-md h1, .kms-md h2, .kms-md h3, .kms-md h4 { margin-top: 1.25rem; margin-bottom: .5rem; font-weight: 600; }
.kms-md h1 { font-size: 1.5rem; } .kms-md h2 { font-size: 1.3rem; } .kms-md h3 { font-size: 1.15rem; }
.kms-md h4, .kms-md h5, .kms-md h6 { font-size: 1rem; }
.kms-md > :first-child { margin-top: 0; }
.kms-md .kms-paper-title { font-size: 1.85rem; margin-bottom: 1rem; }

/* Images (albums, curation, photos) */
/* the picture carousel (RMS's carousel macro, components/_record_images.html) */
.kms-carousel { border-radius: .5rem; overflow: hidden; background: #1b1f23; }
.kms-carousel .carousel-item img { height: 26rem; object-fit: contain; background: #1b1f23; }
.kms-carousel .carousel-caption span { background: rgba(0, 0, 0, .55); padding: .2rem .6rem; border-radius: .3rem; }
.kms-carousel-empty { height: 16rem; border: 2px dashed var(--bs-border-color); border-radius: .5rem; display: flex;
  flex-direction: column; align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.kms-carousel-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .35rem; flex-shrink: 0; }
.kms-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: .25rem; border: 1px solid var(--bs-border-color); }
.kms-album { background: #111; border-radius: .5rem; overflow: hidden; }
.kms-album .carousel-item img { display: block; width: 100%; height: 60vh; max-height: 560px; object-fit: contain; background: #111; }
.kms-album-caption { background: var(--bs-body-bg); padding: .5rem .75rem; }
.kms-album-strip { overflow-x: auto; }
.kms-strip-thumb { border: 2px solid transparent; padding: 0; background: none; border-radius: .25rem; flex: 0 0 auto; }
.kms-strip-thumb img { width: 96px; height: 64px; object-fit: cover; border-radius: .2rem; display: block; }
.kms-strip-thumb.active { border-color: var(--bs-primary); }
.kms-curate-img { height: 180px; object-fit: contain; background: var(--bs-tertiary-bg); width: 100%; }
.kms-sticky-actions { position: sticky; bottom: 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); z-index: 5; }
.kms-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 1px solid var(--bs-border-color); }
.kms-photo-empty { width: 96px; height: 96px; border-radius: 50%; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--bs-secondary-color); }

/* Business cards (GSS flip card) */
.kms-card-flip { position: relative; width: 320px; max-width: 100%; aspect-ratio: 3.5 / 2; perspective: 1200px; }
.kms-card-flip[data-flip] { cursor: pointer; }
.kms-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s; }
.kms-card-flip.is-flipped .kms-card-inner { transform: rotateY(180deg); }
.kms-card-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .5rem;
  backface-visibility: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.2); background: var(--bs-tertiary-bg); }
.kms-card-back { transform: rotateY(180deg); }
.kms-card-hint { position: absolute; right: .4rem; bottom: .4rem; opacity: .8; font-size: .7rem; }
@media (prefers-reduced-motion: reduce) { .kms-card-inner { transition: none; } }

/* Confirm dialog (replaces the browser's own confirm box; app.js kmsConfirm). Theme colours; red for removals. */
.kms-confirm { --kms-confirm-rgb: var(--kms-primary-rgb); }
.kms-confirm.is-danger { --kms-confirm-rgb: var(--bs-danger-rgb); }
.kms-confirm .modal-dialog { max-width: 440px; }
.kms-confirm .modal-content { border: 0; border-top: 4px solid rgb(var(--kms-confirm-rgb)); border-radius: .85rem;
  overflow: hidden; box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .28), 0 .25rem .75rem rgba(15, 23, 42, .12); }
.kms-confirm .modal-body { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 1.5rem 1.25rem; }
.kms-confirm-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.35rem; color: rgb(var(--kms-confirm-rgb));
  background: rgba(var(--kms-confirm-rgb), .12); box-shadow: 0 0 0 6px rgba(var(--kms-confirm-rgb), .06); }
.kms-confirm-copy { min-width: 0; padding-top: .15rem; }
.kms-confirm-title { font-size: 1.08rem; font-weight: 600; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.kms-confirm-text { margin: .4rem 0 0; color: var(--bs-secondary-color); overflow-wrap: anywhere; white-space: pre-line; }
.kms-confirm .modal-footer { border-top: 1px solid var(--bs-border-color-translucent); background: var(--bs-tertiary-bg);
  padding: .75rem 1.25rem; gap: .5rem; }
.kms-confirm .modal-footer > .btn { margin: 0; min-width: 6.5rem; font-weight: 500; white-space: nowrap; }
.kms-confirm .kms-confirm-cancel { border: 1px solid var(--bs-border-color); }
.kms-confirm.fade .modal-dialog { transform: translateY(.5rem) scale(.97); transition: transform .18s ease-out; }
.kms-confirm.show .modal-dialog { transform: none; }
body:has(.kms-confirm.show) .modal-backdrop.show { opacity: .4; }
@supports (backdrop-filter: blur(2px)) { body:has(.kms-confirm.show) .modal-backdrop { backdrop-filter: blur(2px); } }
@media (max-width: 575.98px) { .kms-confirm .modal-footer > .btn { flex: 1 1 0; } }

/* the document page's tabs (Keywords, Summary, Linked documents …) */
.kms-doc-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.kms-doc-tabs .nav-link { padding: .4rem .7rem; font-size: .95rem; white-space: nowrap; }
.kms-doc-tabs .nav-link .badge { font-weight: 500; }
.kms-doc-tabpanes > .tab-pane > .card,
.kms-doc-tabpanes > .tab-pane > div > .card { border-top-left-radius: 0; border-top-right-radius: 0; }
.kms-stats td:first-child { color: var(--bs-secondary-color); }
.kms-stats td { padding-left: .75rem; padding-right: .75rem; }

/* longer tooltips read better a little wider, left-aligned */
.tooltip-inner { max-width: 320px; text-align: left; }
/* Glossary term window in a summary: at most 3 inches wide (decision 78) */
.kms-tabbed { border-top-left-radius: 0; }
.kms-view-tabs { border-bottom: 0; }
.kms-view-tabs .nav-link.active { background: var(--bs-body-bg); }

/* The floating run panel (decision 94) */
.kms-run-panel { position: fixed; right: .75rem; bottom: .75rem; width: 22rem; max-width: calc(100vw - 1.5rem); z-index: 1040; }
.kms-run-panel [data-rp="list"] { max-height: 50vh; overflow-y: auto; }
.kms-run-panel-item + .kms-run-panel-item { border-top: 1px solid var(--bs-border-color); padding-top: .4rem; margin-top: .4rem; }
@media print { .kms-run-panel { display: none !important; } }

/* an output's Rename box (owner, 2026-10-20): wide enough to see the whole working title */
.kms-rename[open] { flex: 1 1 100%; order: 3; }
.kms-rename input[name="title"] { min-width: min(48rem, 100%); }

/* Messages floating in view when the page opens at a card lower down (app.js) */
.kms-flashes-float { position: fixed; top: 1rem; right: 1rem; z-index: 1080; width: min(32rem, calc(100vw - 2rem)); }
.kms-flashes-float .alert { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }

/* An output's steps on tabs (production.html, step_tabs.js) */
.kms-step-tabs .nav-link { color: var(--bs-body-color); }
.kms-step-tabs .nav-link.active { font-weight: 600; border-bottom-color: var(--bs-body-bg); }
.kms-step-tabs .nav-link.disabled { opacity: .55; }
/* Workflow tab: a stage's run and revision lines fold open under it (owner, 2026-10-20) */
.kms-fold .bi-caret-right-fill { display: inline-block; transition: transform .15s; }
.kms-fold:not(.collapsed) .bi-caret-right-fill { transform: rotate(90deg); }
tr.kms-run-line.collapsing { transition: none; height: auto; display: table-row; }
tr.kms-run-line td { font-size: .8125rem; background: var(--bs-tertiary-bg, #f8f9fa); }

/* Page code at the foot of every page (decision 117): light, small, out of the way. */
.kms-page-code { display: flex; flex-wrap: wrap; gap: 1rem; padding: .25rem 1.5rem 1rem; font-size: .72rem;
  color: var(--bs-secondary-color); opacity: .75; }
.kms-page-code a { color: inherit; }
.kms-page-code-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: copy; }
.kms-page-code-btn.copied::after { content: " · copied"; }
.kms-auth-wrap + .kms-page-code { justify-content: center; }
@media print { .kms-page-code { opacity: 1; } }

/* Lookup Tables in the owner's sections (decision 118): a blank line and a bar between sections. */
.kms-lookup-gap td { height: 1.25rem; padding: 0; border-bottom: 2px solid var(--bs-border-color); background: transparent; }
.kms-lookup-gap tr:hover td { --bs-table-bg-state: transparent; }
/* decision C21: each Lookup Tables section under its own heading */
.kms-lookup-section th { background: var(--kms-menu-bg, #1F4E4A); color: var(--kms-menu-ink, #fff); font-size: .85rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: .55rem .75rem; border-bottom: 0; }
.kms-lookup-section tr:hover th { --bs-table-bg-state: transparent; }
.kms-lookup-section .kms-lookup-count { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; margin-left: .5rem; }

/* The Case Library's input tabs (owner 2026-10-29): the open tab joins the card below it. */
.kms-input-tabs { border-bottom: 0; gap: .25rem; }
.kms-input-tabs .nav-link { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-bottom: 0; color: var(--bs-body-color); }
.kms-input-tabs .nav-link.active { background: var(--bs-body-bg); }
.tab-content > .tab-pane > .kms-tab-card > .card, .tab-content > .tab-pane > .kms-tab-card.card { border-top-left-radius: 0 !important; }

/* Governance (CGN Phase 3b): the jurisdiction tree, the search pickers and the organization chart */
.gov-tree, .gov-tree-children { list-style: none; padding-left: 0; margin: 0; }
.gov-tree-children { padding-left: 1.35rem; border-left: 1px dotted var(--bs-border-color); margin-left: .45rem; }
.gov-tree-node { padding: .1rem 0; }
.gov-tree-leaf { display: inline-block; width: 1.15rem; }
.gov-picker-list { z-index: 1060; max-height: 20rem; overflow-y: auto; }
.gov-org-row { border-bottom: 1px solid var(--bs-border-color-translucent); padding: .3rem 0; }
.gov-org-row.gov-abolished { color: var(--bs-secondary-color); }
.gov-org-row.gov-abolished a { color: var(--bs-secondary-color); }