/* NX Customer Portal — Bootstrap 5.3 adapted to the NX brand (NX Brand Guideline 2023).
   Bootstrap does the layout and components; this file maps Bootstrap to the brand tokens of
   static/brand/nx-brand.css (loaded first) and adds the few patterns Bootstrap has no class for. */

/* ---------- Bootstrap theme mapped to the brand ---------- */
:root {
  --nx-radius-card: 1.75rem;

  --bs-font-sans-serif: var(--nx-font-body);
  --bs-body-color: var(--nx-green);
  --bs-body-color-rgb: var(--nx-green-rgb);
  --bs-body-bg: #fff;               /* surfaces: cards, modals, inputs */
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: var(--nx-green);
  --bs-secondary-color: var(--nx-green-80);
  --bs-tertiary-bg: var(--nx-green-10);
  --bs-border-color: var(--nx-green-30);
  --bs-border-color-translucent: rgba(var(--nx-green-rgb), .12);
  --bs-primary: var(--nx-green);
  --bs-primary-rgb: var(--nx-green-rgb);
  --bs-dark: var(--nx-green);
  --bs-dark-rgb: var(--nx-green-rgb);
  --bs-link-color: var(--nx-green);
  --bs-link-color-rgb: var(--nx-green-rgb);
  --bs-link-hover-color: var(--nx-green);
  --bs-link-hover-color-rgb: var(--nx-green-rgb);
  --bs-focus-ring-color: rgba(214, 251, 15, .6);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-heading-color: var(--nx-green);
}

body { background-color: var(--nx-green-10); font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }  /* page: tint 10 % */
h1, h2, h3, h4, .font-display { font-family: var(--nx-font-display); letter-spacing: -.02em; }
.fw-light { font-weight: 300 !important; }
::selection { background: var(--nx-lime); color: var(--nx-green); }
a { text-underline-offset: .25em; }
.text-secondary { color: var(--nx-green-80) !important; }
.bg-nx-green { background: var(--nx-green); color: #fff; }
.text-lime { color: var(--nx-lime) !important; }          /* only on Elegant Green */
.text-green-30 { color: var(--nx-green-30) !important; }  /* muted text on Elegant Green */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- Brand patterns ---------- */
.eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.accent-line { border-left: 2px solid var(--nx-lime); padding-left: 1.25rem; }
.claim { font-family: var(--nx-font-display); font-weight: 500; letter-spacing: .14em; }
.spec { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 1.25rem; color: inherit; text-decoration: none; display: block; }
.spec-value { font-family: var(--nx-font-display); font-weight: 300; font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.spec-label { margin-top: .25rem; font-size: .875rem; color: var(--nx-green-30); }
a.spec:hover .spec-label { color: var(--nx-lime); }
.ext-badge { display: inline-grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border: 1px solid var(--nx-green-30); border-radius: .75rem;
  font-family: var(--nx-font-display); font-size: .7rem; font-weight: 600; letter-spacing: .05em; }
.avatar { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 50%;
  background: var(--nx-green-10); font-family: var(--nx-font-display); font-size: .75rem; font-weight: 600; }
.avatar-admin { background: var(--nx-green); color: var(--nx-lime); }
.avatar-lime { background: var(--nx-lime); color: var(--nx-green); }
.status-dot { display: inline-flex; align-items: center; gap: .5rem; }
.status-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--nx-green-30); }
.status-dot.on::before { background: var(--nx-lime); box-shadow: 0 0 0 1px rgba(var(--nx-green-rgb), .3); }

/* ---------- Layout ---------- */
.app-header { background: var(--nx-green); }
.app-header .navbar { --bs-navbar-padding-y: 0; min-height: 4.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.app-header .navbar-brand img { height: 40px; width: auto; }
.app-header .brand-sub { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: .75rem; font-family: var(--nx-font-display); font-size: .875rem; line-height: 1.2; color: rgba(255, 255, 255, .8); }
.app-header .nav-link { --bs-navbar-active-color: #fff; color: rgba(255, 255, 255, .72); font-weight: 500; font-size: .9rem; position: relative; }
.app-header .nav-link:hover { color: #fff; }
@media (min-width: 992px) {
  .app-header .navbar-nav .nav-link { padding: 1.55rem .9rem; }
  .app-header .navbar-nav .nav-link.active::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 2px; background: var(--nx-lime); }
}
@media (max-width: 991.98px) { .app-header .navbar-nav .nav-link.active { color: var(--nx-lime); } }
.page-band { padding: 2.5rem 0 3rem; color: #fff; }
.page-band h1 { color: #fff; font-weight: 300; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: .5rem 0 0; }
.page-band .lead-text { margin-top: .75rem; font-size: .9rem; color: var(--nx-green-30); }
.page-band .eyebrow a { color: inherit; text-decoration: none; }
.page-band .eyebrow a:hover { color: var(--nx-lime); }
/* Every page but Overview: a slim light header in <main> (title, actions, optional band of figures), then the content. */
.page-head { margin-bottom: 1.5rem; }
.page-head-title { font-weight: 300; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin: 0; }
.page-head .lead-text { margin-top: .5rem; font-size: .9rem; color: var(--nx-green-80); }
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a:hover { color: var(--nx-green); text-decoration: underline; }
.page-head .spec { border-left-color: var(--nx-green-30); }
.page-head .spec-value { color: var(--nx-green); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.page-head .spec-label { color: var(--nx-green-80); }
.page-head a.spec:hover .spec-label { color: var(--nx-green); }
.search-trigger { border: 1px solid rgba(255, 255, 255, .25); border-radius: 50rem; color: rgba(255, 255, 255, .72); background: none; padding: .35rem .5rem .35rem 1rem; font-size: .875rem; }
.search-trigger:hover { border-color: var(--nx-lime); color: #fff; }
.search-trigger kbd { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); font-size: .7rem; }

/* ---------- Bootstrap components in brand colours ---------- */
.card { --bs-card-border-width: 0; --bs-card-border-radius: var(--nx-radius-card); --bs-card-inner-border-radius: var(--nx-radius-card); --bs-card-cap-bg: transparent; }
.card-dark { background: var(--nx-green); color: #fff; }
.card-outline { --bs-card-bg: transparent; border: 1px solid var(--nx-green-30); }

.btn { --bs-btn-border-radius: 50rem; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .55rem; --bs-btn-font-weight: 500; --bs-btn-font-size: .9rem;
  --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(214, 251, 15, .6); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { --bs-btn-padding-x: .9rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .8rem; }
.btn-lime { --bs-btn-bg: var(--nx-lime); --bs-btn-color: var(--nx-green); --bs-btn-border-color: var(--nx-lime);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--nx-green); --bs-btn-hover-border-color: var(--nx-green);
  --bs-btn-active-bg: #fff; --bs-btn-active-color: var(--nx-green); --bs-btn-active-border-color: var(--nx-green);
  --bs-btn-disabled-bg: var(--nx-lime); --bs-btn-disabled-color: var(--nx-green); --bs-btn-disabled-border-color: var(--nx-lime); }
.on-dark .btn-lime { --bs-btn-hover-border-color: #fff; }
.btn-outline-green { --bs-btn-color: var(--nx-green); --bs-btn-border-color: var(--nx-green); --bs-btn-hover-bg: var(--nx-green); --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--nx-green); --bs-btn-active-bg: var(--nx-green); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--nx-green); }
.btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .6); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--nx-lime); --bs-btn-hover-border-color: var(--nx-lime);
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--nx-lime); --bs-btn-active-border-color: var(--nx-lime); }
.btn-ghost { --bs-btn-color: var(--nx-green-80); --bs-btn-hover-bg: var(--nx-green-10); --bs-btn-hover-color: var(--nx-green); --bs-btn-active-bg: var(--nx-green-10); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-danger-outline { --bs-btn-color: var(--nx-green); --bs-btn-border-color: var(--nx-signal); --bs-btn-hover-bg: var(--nx-signal); --bs-btn-hover-color: #191919;
  --bs-btn-hover-border-color: var(--nx-signal); --bs-btn-active-bg: var(--nx-signal); --bs-btn-active-color: #191919; --bs-btn-active-border-color: var(--nx-signal); }
.link-arrow { font-weight: 500; text-decoration: underline; text-decoration-color: var(--nx-green-30); }
.link-arrow:hover { text-decoration-color: currentColor; }
.on-dark .link-arrow { color: var(--nx-lime); text-decoration-color: rgba(214, 251, 15, .4); }

.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .375rem; }
.form-label .optional { margin-left: .4rem; font-size: .75rem; font-weight: 400; color: var(--nx-green-50); }
.form-control, .form-select { border-color: var(--nx-green-30); padding: .6rem .9rem; font-size: .9rem; color: var(--nx-green); }
.form-control:hover, .form-select:hover { border-color: var(--nx-green-50); }
.form-control:focus, .form-select:focus { border-color: var(--nx-green); box-shadow: 0 0 0 .2rem rgba(214, 251, 15, .7); color: var(--nx-green); }
.form-control::placeholder { color: var(--nx-green-50); }
.form-check-input { border-color: var(--nx-green-50); }
.form-check-input:checked { background-color: var(--nx-green); border-color: var(--nx-green); }
.form-check-input:focus { border-color: var(--nx-green); box-shadow: 0 0 0 .2rem rgba(214, 251, 15, .7); }
.form-text { color: var(--nx-green-80); font-size: .78rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--nx-signal); background-image: none; padding-right: .9rem; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--nx-signal); box-shadow: 0 0 0 .2rem rgba(255, 91, 34, .25); }
/* Error text stays Elegant Green (orange text is not legible); a small orange dot marks it. */
.invalid-feedback { display: flex; gap: .4rem; align-items: baseline; color: var(--nx-green); font-weight: 500; font-size: .78rem; }
.invalid-feedback::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--nx-signal); flex-shrink: 0; transform: translateY(-.1rem); }
.alert-form { border: 1px solid var(--nx-signal); background: #fff; color: var(--nx-green); border-radius: 1rem; }
.alert-form .alert-icon { color: var(--nx-signal); }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--nx-green); --bs-table-hover-bg: rgba(231, 234, 235, .6); --bs-table-hover-color: var(--nx-green);
  --bs-table-border-color: var(--nx-green-10); margin-bottom: 0; font-size: .9rem; }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table > :not(caption) > * > *:first-child { padding-left: 2rem; }
.table > :not(caption) > * > *:last-child { padding-right: 2rem; }
.table thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--nx-green-80); border-bottom-color: var(--nx-green-30); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover, .sort-link.is-active { color: var(--nx-green); }

.badge-role { border: 1px solid var(--nx-green-30); color: var(--nx-green-80); font-weight: 500; border-radius: 50rem; padding: .3em .75em; font-size: .75rem; white-space: nowrap; }
.badge-role.solid { background: var(--nx-green); border-color: var(--nx-green); color: #fff; }

/* Files: folder explorer (path, folder rows, file rows). */
.file-path { font-size: .95rem; --bs-breadcrumb-divider-color: var(--nx-green-30); --bs-breadcrumb-item-active-color: var(--nx-green); }
.file-path a { color: var(--nx-green-80); text-decoration: none; }
.file-path a:hover { text-decoration: underline; }
.file-path .active { font-weight: 500; }
.folder-row { cursor: pointer; }
.folder-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: .75rem; background: var(--nx-green-10); color: var(--nx-green); }
.folder-chevron { display: inline-block; width: 1rem; text-align: center; color: var(--nx-green-30); font-size: 1.25rem; line-height: 1; }
.folder-row:hover .folder-chevron { color: var(--nx-green); }
/* While another folder loads, dim the list. */
.file-list { transition: opacity .15s; }
#catalogue.htmx-request .file-list { opacity: .55; }
.ext-badge-sm { width: 2.5rem; height: 2.5rem; font-size: .62rem; }
.file-table .file-name { min-width: 12rem; }


.pagination { --bs-pagination-color: var(--nx-green); --bs-pagination-hover-color: var(--nx-green); --bs-pagination-hover-bg: var(--nx-green-10);
  --bs-pagination-active-bg: var(--nx-green); --bs-pagination-active-border-color: var(--nx-green); --bs-pagination-border-color: var(--nx-green-30);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(214, 251, 15, .6); --bs-pagination-font-size: .85rem; margin: 0; }

.dropdown-menu { --bs-dropdown-border-radius: 1rem; --bs-dropdown-link-color: var(--nx-green); --bs-dropdown-link-hover-bg: var(--nx-green-10);
  --bs-dropdown-link-active-bg: var(--nx-green-10); --bs-dropdown-link-active-color: var(--nx-green); --bs-dropdown-border-color: transparent; box-shadow: 0 1rem 2.5rem rgba(var(--nx-green-rgb), .18); }
.modal { --bs-modal-border-radius: var(--nx-radius-card); --bs-modal-inner-border-radius: var(--nx-radius-card); --bs-modal-border-width: 0;
  --bs-modal-padding: 2rem; --bs-modal-header-padding: 2rem 2rem 0; --bs-modal-footer-border-color: var(--nx-green-10); --bs-modal-header-border-width: 0; }
.modal-backdrop { --bs-backdrop-bg: var(--nx-green); --bs-backdrop-opacity: .7; }
.modal-footer { padding: 1.25rem 2rem 2rem; gap: .5rem; }
.modal-footer > * { margin: 0; }
.palette .list-group-item { border: 0; border-radius: 0; padding: .65rem 1.5rem; color: var(--nx-green); }
.palette .list-group-item:hover, .palette .list-group-item.selected { background: var(--nx-green-10); }

.toast { --bs-toast-border-radius: 1rem; --bs-toast-max-width: 24rem; --bs-toast-font-size: .9rem; border: 0; }
.toast-success { background: var(--nx-green); color: #fff; }
.toast-success .toast-mark { width: 2px; height: 1rem; background: var(--nx-lime); }
.toast-error { background: #fff; color: var(--nx-green); border: 1px solid var(--nx-signal); }

.empty-state { padding: 4rem 1.5rem; text-align: center; }
.empty-state .empty-icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--nx-green-10); }

.icon { flex-shrink: 0; }

/* Signed-out and error pages: brand panel next to the form. */
.auth-panel { background: var(--nx-green); color: #fff; position: relative; isolation: isolate; }
/* Sign-in photo, tinted into the brand green so the text on it stays readable. */
.auth-panel .auth-bg { z-index: -1; opacity: .4; mix-blend-mode: luminosity; }
.auth-panel .auth-logo { height: 44px; width: auto; }
.auth-panel .auth-title { font-family: var(--nx-font-display); font-weight: 300; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.05; }
.skip-link:focus { position: fixed; top: .75rem; left: .75rem; z-index: 1100; }

/* Live list filters and search dim their results instead of covering the page. */
#results.htmx-request, #palette-results.htmx-request { opacity: .5; transition: opacity .2s; }

/* Wide screens: the brand panel is exactly one screen tall and its content scales with the height. */
@media (min-width: 992px) {
  .auth-panel.col-lg-6 { height: 100vh; position: sticky; top: 0; overflow: hidden; }
  .auth-panel .auth-title { font-size: clamp(1.75rem, min(1.6rem + 2.6vw, 6.2vh), 3.75rem); }
}

/* NX Assistant. The panel is a Bootstrap offcanvas (templates/partials/assistant.html) on the right, without a backdrop.
   It starts under the navigation, level with the page band, and rises to the top of the window as the navigation
   scrolls away: --assistant-panel-top is the navigation's visible bottom, kept by app.js.
   --assistant-panel-width is set on <html> by app.js too (320-720 px, default 400).
   From lg up the page makes room for the panel (--assistant-dock) and keeps at least 640 px for itself; the navigation
   keeps the full width, so it never has to fit beside the panel. Between md and lg the panel covers the page, and
   below md the whole window. Its z-index stays under Bootstrap's dropdowns (1000), so the user menu opens over it. */
.assistant-panel { --bs-offcanvas-width: min(var(--assistant-panel-width, 400px), 100%); --bs-offcanvas-border-color: var(--nx-green-10);
  --bs-offcanvas-zindex: 990; top: var(--assistant-panel-top, 0px) !important; }
.assistant-panel > nx-support-chat { flex: 1; min-height: 0; }
.assistant-panel-resize { position: absolute; inset: 0 auto 0 -3px; width: 6px; cursor: col-resize; touch-action: none; z-index: 1; }
.assistant-panel-resize:hover, .assistant-panel-resize:focus-visible { background: var(--nx-lime); outline: 0; }
.assistant-panel.no-transition { transition: none; }
/* Client overview: the "no sections" empty state gives way to the assistant card once the widget reveals it. */
.row:has(> [data-nx-assistant-entry]:not([hidden])) > .no-sections { display: none; }
body.assistant-open { padding-right: var(--assistant-dock, 0px); }
body.assistant-open > .app-header > .navbar { margin-right: calc(-1 * var(--assistant-dock, 0px)); background: var(--nx-green); }
@media (min-width: 992px) {
  body.assistant-open { --assistant-dock: min(var(--assistant-panel-width, 400px), 100vw - 640px); }
  .assistant-panel { --bs-offcanvas-width: min(var(--assistant-panel-width, 400px), 100vw - 640px); }
}
@media (max-width: 991.98px) { .assistant-panel { box-shadow: -.5rem 0 2rem rgba(var(--nx-green-rgb), .18); } }
@media (max-width: 767.98px) { .assistant-panel { --bs-offcanvas-width: 100%; --bs-offcanvas-zindex: 1045; top: 0 !important; box-shadow: none; } }
/* Floating chat launcher, bottom right, that opens the panel: a round button drawn as Watt; its name and
   tooltip say what it does. Not shown while the panel is open (the panel has its own Close). */
.assistant-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1030; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; padding: 0; box-shadow: 0 .5rem 1.5rem rgba(var(--nx-green-rgb), .25); transition: transform .15s ease, box-shadow .15s ease; }
.assistant-fab:hover { transform: scale(1.06); box-shadow: 0 .75rem 2rem rgba(var(--nx-green-rgb), .3); }
@media (prefers-reduced-motion: reduce) { .assistant-fab { transition: none; } .assistant-fab:hover { transform: none; } }
body.assistant-open .assistant-fab { display: none; }
/* Full-page chat at /assistant/ (reached from the panel's "Open full page"): the chat fills the window under the
   navigation, like the documentation viewer. The chat scrolls inside itself; the page does not. */
body.assistant-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #fff; }
body.assistant-page > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.assistant-page > main > nx-support-chat { flex: 1; min-height: 0; }