/*
* Unified Help Panel — shared chrome CSS
*
* Single source of truth for the help button + panel visual styling.
* Loaded directly via in Django base templates AND in any HTML
* shell that hosts a React mount of . React components do NOT
* import this file — the host template guarantees it is loaded. This
* design avoids Vite's assetFileNames flattening (frontend/vite.config.ts
* maps every CSS to assets/index.css, which would collide with the
* standalone ).
*
* Two render modes:
* - .app-help-panel--slideout : fixed right sidebar, 420px, slide-in
* - .app-help-panel--inline : in-flow, fits container, no animation
*
* CSS variables are sourced from procurement/static/css/wizard_scandi.css
* when the host loads it. Fallback values are inlined here so the panel
* still renders correctly on pages that do not load the scandi tokens
* (auth pages, password reset, etc.).
*
* Desktop-only by design — no @media queries for narrow viewports.
*
* Plan reference: docs/plans/2026-05-08-004-feat-unified-help-system-plan.md
*/
/* =============================================================
* Token fallbacks (only apply when scandi tokens are absent)
* ============================================================= */
:root {
--app-help-brand-600: var(--brand-600, #a45d6e);
--app-help-brand-700: var(--brand-700, #8a4d5c);
--app-help-brand-50: var(--brand-50, #fdf8f9);
--app-help-gray-200: var(--scandi-gray-100, #e6e6e6);
--app-help-gray-300: var(--scandi-gray-300, #b3b3b3);
--app-help-gray-500: var(--scandi-gray-500, #808080);
--app-help-gray-900: var(--scandi-gray-900, #2d2d2d);
--app-help-white: var(--scandi-white, #ffffff);
/* P3 fix: consumed below (table head, code block, blockquote) but never
defined here — without these the markdown shading silently disappeared. */
--app-help-gray-50: var(--scandi-gray-50, #fafafa);
--app-help-gray-700: var(--scandi-gray-700, #4a4a4a);
--app-help-brand-200: var(--brand-200, #f8dde3);
}
/* =============================================================
* Help toggle button — sits in page header, opens the panel
* Spec: 0.72rem font, 0.35rem 0.65rem padding, 2px radius
* Header button with text "Pomoč" + icon (CLAUDE.md mandate)
* ============================================================= */
.app-help-button {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.65rem;
font-family: inherit;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.4;
color: var(--app-help-gray-900);
background: var(--app-help-white);
border: 1px solid var(--app-help-gray-300);
border-radius: 2px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-help-button:hover {
background: var(--app-help-brand-50);
border-color: var(--app-help-brand-600);
}
.app-help-button:focus-visible {
outline: 2px solid var(--app-help-brand-600);
outline-offset: 2px;
}
.app-help-button--active {
color: var(--app-help-white);
background: var(--app-help-brand-600);
border-color: var(--app-help-brand-600);
}
.app-help-button--active:hover {
background: var(--app-help-brand-700);
border-color: var(--app-help-brand-700);
}
.app-help-button__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.app-help-button__label {
white-space: nowrap;
}
/* =============================================================
* Overlay — semi-transparent backdrop behind slideout
* z-index: 200 (panel is 201)
* ============================================================= */
.app-help-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 200;
cursor: pointer;
}
/* =============================================================
* Panel chrome — shared between slideout and inline modes
* ============================================================= */
.app-help-panel {
display: flex;
flex-direction: column;
background: var(--app-help-white);
font-family: inherit;
color: var(--app-help-gray-900);
}
.app-help-panel[hidden] {
display: none;
}
/* Slideout: fixed right, 420px, brand-600 header, slide-in animation */
.app-help-panel--slideout {
position: fixed;
top: 0;
right: 0;
width: 420px;
height: 100vh;
z-index: 201;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
border-left: 1px solid var(--app-help-gray-200);
animation: app-help-slide-in 0.25s ease-out;
}
@keyframes app-help-slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Inline: in-flow, no fixed position, no animation. Used by wizard. */
.app-help-panel--inline {
position: relative;
width: 100%;
border: 1px solid var(--app-help-gray-200);
border-radius: 4px;
}
.app-help-panel--inline.app-help-panel--collapsed .app-help-body,
.app-help-panel--inline.app-help-panel--collapsed .app-help-fallback {
display: none;
}
/* =============================================================
* Header — brand-600 solid, white text, close button
* Spec: 18px 24px padding, 16px font, 600 weight
* NOT gradient (adversarial reviewer flagged the gradient delta)
* ============================================================= */
.app-help-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
background: var(--app-help-brand-600);
border-bottom: 1px solid var(--app-help-brand-700);
color: var(--app-help-white);
flex-shrink: 0;
}
.app-help-title {
margin: 0;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
color: var(--app-help-white);
}
.app-help-title__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.app-help-close {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border: none;
color: var(--app-help-white);
cursor: pointer;
padding: 6px 10px;
border-radius: 2px;
font-size: 0.8rem;
transition: background-color 0.15s ease;
}
.app-help-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.app-help-close:focus-visible {
outline: 2px solid var(--app-help-white);
outline-offset: 2px;
}
.app-help-close__icon {
width: 14px;
height: 14px;
}
/* =============================================================
* Body — scrollable content area
* ============================================================= */
.app-help-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0;
background: var(--app-help-white);
}
.app-help-body__loading,
.app-help-body__error {
padding: 24px;
font-size: 0.8rem;
color: var(--app-help-gray-500);
text-align: center;
}
.app-help-body__error {
color: var(--app-help-gray-900);
}
/* =============================================================
* Section — one help section within the body
* ============================================================= */
.app-help-section {
padding: 20px 24px;
border-bottom: 1px solid var(--app-help-gray-200);
}
.app-help-section:last-child {
border-bottom: none;
}
.app-help-section-title {
margin: 0 0 12px 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--app-help-gray-900);
display: flex;
align-items: center;
gap: 8px;
}
.app-help-section-title__icon {
width: 14px;
height: 14px;
color: var(--app-help-brand-600);
flex-shrink: 0;
}
.app-help-section-content {
font-size: 0.75rem;
line-height: 1.5;
color: var(--app-help-gray-900);
}
.app-help-section-content p {
margin: 0 0 0.75em 0;
}
.app-help-section-content p:last-child {
margin-bottom: 0;
}
.app-help-section-content ul,
.app-help-section-content ol {
margin: 0 0 0.75em 0;
padding-left: 1.25em;
}
.app-help-section-content li {
margin-bottom: 0.25em;
}
.app-help-section-content strong {
font-weight: 600;
}
.app-help-section-content a {
color: var(--app-help-brand-600);
text-decoration: underline;
}
.app-help-section-content a:hover {
color: var(--app-help-brand-700);
}
.app-help-section-content code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.7rem;
background: var(--app-help-brand-50);
padding: 1px 4px;
border-radius: 2px;
}
/*
* Markdown-rendered headings, tables, and other block elements inside help
* content. Without these rules the renderer's default
..
+
* land at browser defaults (16px+ paragraphs, 24px+ headings), which
* clashes visibly with the scandi design system used elsewhere in the
* wizard. Sizes step down gently from the section title (0.8rem) so the
* visual hierarchy still reads.
*
* Note:
/
in body content should normally be stripped at populate
* time (panel header already shows the step title — see
* core/help/management/commands/populate_all_wizard_help.py::_strip_leading_h2).
* The rules below exist as a defense-in-depth fallback in case any other
* content source ever lands an