/* ==========================================================================
   Public pages (CODE-1): the style blocks of the two shells outside the portal's own areas, moved here.
     A-D. body.layout-shell - the root pages' Bootstrap shell (Pages/Shared/_Layout): its header and footer, the kit's
                              page header, the public knowledge base (Pages/KB), the profile, and the 403 / no-access
                              pages (the support widget on them is styled by features/support-widget.css). _Layout
                              loads this file.
     E.   html.hc-shell     - the public help centre (Areas/Public, _MetronicHelpCenterLayout), which loads this file.
   :where() keeps every selector at the specificity it had in the page's own block, so the cascade is unchanged.
   ========================================================================== */

/* ── A. The root pages' shell (Pages/Shared/_Layout) ─────────────────────
   This shell loads Bootstrap and site.css, not css/styles.css, so the brand tokens the pages below use are declared
   here with the light canvas values of wwwroot/css/input.css. */
body.layout-shell {
    --ic-red: #FA1740;
    --ic-red-rgb: 250, 23, 64;
    --ic-red-hover: #D10F33;
    --shell-text: #FFFFFF;
    --surface-page: #F2F3F6;
    --surface: #FFFFFF;
    --surface-overlay: #FFFFFF;
    --surface-muted: rgba(7, 8, 11, 0.025);
    --surface-hover: rgba(7, 8, 11, 0.04);
    --border: rgba(7, 8, 11, 0.09);
    --border-strong: rgba(7, 8, 11, 0.16);
    --text: #0B0D12;
    --text-2: #3E4554;
    --text-muted: #646C7C;
    --shadow-overlay: 0 16px 40px -12px rgba(7, 8, 11, 0.22);
}

/* [RW85v-6] The footer in normal flow. _Layout.cshtml.css positions it absolute, bottom 0 - and nothing above it is
   positioned, so "bottom" is the bottom of the FIRST screen, not of the page: wherever the content reached past one
   screen (the 403 and no-access pages on a phone, where the footer's two 60px rows stack to about 121px) the footer lay
   over it and swallowed the taps on the buttons below it. Now the body is a column at least one screen tall and the
   footer follows the content, pushed to the bottom of the screen when the page is shorter, exactly where it sat before.
   The page's grey moved from the body element to .layout-page, the header and content it always covered, so the white
   band between the content and the footer on a short page stays as it was. */
body.layout-shell {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin-bottom: 0;
}

/* The canvas is Bootstrap's own light grey (--bs-light). */
:where(.layout-shell) .layout-page {
    flex: 0 0 auto;
    background-color: var(--bs-light);
}

body.layout-shell > footer.footer {
    position: static;
    flex-shrink: 0;
    margin-top: auto;
}

:where(.layout-shell) .navbar {
    background-color: var(--surface);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

:where(.layout-shell) .language-switcher {
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    cursor: pointer;
}

/* [HEAD-1] The kit's page header (<ic-page-header>) as STRAK draws it in styles.css, which this shell does not load:
   the title 24/700, one muted subtitle line, the actions on the right (wrapping under the title on narrow screens). */
:where(.layout-shell) .ic-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

:where(.layout-shell) .ic-page-header-text {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

:where(.layout-shell) .ic-page-header-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}

:where(.layout-shell) .ic-page-header-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 80ch;
    margin: 0;
}

:where(.layout-shell) .ic-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding-top: 0.125rem;
}

@media (max-width: 1024px) {
    :where(.layout-shell) .ic-page-header {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    :where(.layout-shell) .ic-page-header-actions {
        flex-wrap: wrap;
    }
}

/* ── B. Public knowledge base (Pages/KB/Index, Pages/KB/Details) ─────────── */
:where(.layout-shell) .kb-container {
    max-width: 960px;
}

.kb-page .kb-article {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

.kb-page .kb-missing-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--text-muted);
}

.kb-page .kb-related-icon {
    color: var(--text-muted);
}

.kb-page .kb-content {
    font-size: 1rem;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Stored article HTML stays inside the page, as the shared rich-text rules in input.css do for the Tailwind pages
   (this page is on the Bootstrap _Layout, which loads only site.css): a table or image pasted with a fixed width
   shrinks to fit a phone, and long words in table cells wrap. [U-085, RW-36-4] */
.kb-page .kb-content * {
    max-width: 100% !important;
}

.kb-page .kb-content th, .kb-page .kb-content td {
    overflow-wrap: anywhere;
}

.kb-page .kb-content h1, .kb-page .kb-content h2, .kb-page .kb-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.kb-page .kb-content h1 {
    font-size: 2rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
}

.kb-page .kb-content h2 {
    font-size: 1.5rem;
    color: var(--text-2);
}

.kb-page .kb-content h3 {
    font-size: 1.125rem;
    color: var(--text-muted);
}

.kb-page .kb-content p {
    margin-bottom: 1rem;
}

.kb-page .kb-content ul, .kb-page .kb-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.kb-page .kb-content ul {
    list-style: disc;
}

.kb-page .kb-content ol {
    list-style: decimal;
}

.kb-page .kb-content li {
    margin-bottom: 0.5rem;
}

/* [COLOR-1] A quote's bar is neutral, not a blue accent. */
.kb-page .kb-content blockquote {
    border-left: 4px solid var(--border-strong);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-muted);
}

.kb-page .kb-content code {
    background-color: var(--surface-hover);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
}

.kb-page .kb-content pre {
    background-color: var(--surface-hover);
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.kb-page .kb-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin: 1rem 0;
}

.kb-page .kb-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.kb-page .kb-content th, .kb-page .kb-content td {
    border: 1px solid var(--border);
    padding: 0.75rem;
    text-align: left;
}

.kb-page .kb-content th {
    background-color: var(--surface-hover);
    font-weight: 600;
}

@media print {
    .kb-page .btn-group, .kb-page .breadcrumb, .kb-page .border-top {
        display: none !important;
    }

    .kb-page .kb-article {
        font-size: 12pt;
    }
}

/* ── C. Profile (Pages/Account/Profile) ─────────────────────────────────── */
.profile-page .content-card {
    background: var(--surface);
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1rem;
    border: none;
}

.profile-page .content-card .card-header {
    background-color: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.profile-page .content-card .card-body {
    padding: 1.25rem;
}

/* [COLOR-2] A neutral avatar plate and option card (no purple gradient). */
.profile-page .profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--surface-page);
    color: var(--text-muted);
    font-size: 2.5rem;
}

.profile-page .profile-option {
    border-radius: 0.375rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text-2);
}

.profile-page .metric-box {
    padding: 1.5rem;
    border-radius: 0.375rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-page .metric-icon {
    flex-shrink: 0;
    font-size: 2rem;
    color: var(--text-muted);
}

.profile-page .metric-content {
    flex: 1;
}

.profile-page .metric-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.profile-page .metric-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.profile-page .list-group-item-action {
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-page .list-group-item-action:hover {
    background-color: var(--surface-hover);
}

/* The chosen section: a neutral fill in ink (COLOR-1: not a coloured bar). */
.profile-page .list-group-item-action.active {
    background-color: var(--surface-page);
    border-color: var(--border);
    color: var(--text);
    font-weight: 600;
}

.profile-page .list-group-item-action.active i {
    color: var(--text);
}

/* ── D. The 403 and no-access pages (Pages/Error, Pages/NoAccess) ─────────
   The .refusal-* rules carry the same names on both pages: a calm, neutral refusal (TYPE-1: title 24/700, meta 13). */
:where(.layout-shell) .refusal { padding: 64px 16px; }
:where(.layout-shell) .refusal h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
:where(.layout-shell) .refusal-banner { max-width: 48rem; }
:where(.layout-shell) .refusal-icon { width: 96px; height: 96px; background-color: var(--surface-page); }
:where(.layout-shell) .refusal-icon i { font-size: 2.5rem; color: var(--text-muted); }
:where(.layout-shell) .refusal-code { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
:where(.layout-shell) .refusal-text { max-width: 34rem; margin: 0 auto; }
:where(.layout-shell) .refusal-note { color: var(--text-2); font-weight: 600; }
:where(.layout-shell) .refusal-hint { font-size: 0.875rem; }
:where(.layout-shell) .refusal-meta, :where(.layout-shell) .refusal-details { font-size: 0.8125rem; }
:where(.layout-shell) .refusal-details { max-width: 34rem; }
:where(.layout-shell) .refusal-meta code, :where(.layout-shell) .refusal-details code { word-break: break-all; }

/* The support widget (Pages/Shared/_SupportTicketModal) on these pages is a kit dialog (a Bootstrap .modal, <ic-modal>):
   Bootstrap's own CSS draws it in this shell, and its legacy-layout look (the kit's width, header, body and footer on the
   brand tokens) and its form live in the widget's own stylesheet, features/support-widget.css. The .status-modal-* overlay
   rules that stood here were for the hand-built overlay it replaced, and are gone. [CODE-3] */

/* ── E. The public help centre (Areas/Public, _MetronicHelpCenterLayout) ─── */

/* Help Center on a phone [U-269, RW89v-8]. The Tailwind build has no sm:inline, so the phone rules live here.
   Stored article HTML (.prose) is already capped at its card by the shared rich-text rules in styles.css;
   .hc-wrap does the same for the text around it (a long title word, an author, a comment, a name). */
:where(.hc-shell) .hc-wrap { overflow-wrap: anywhere; min-width: 0; }

/* [COLOR-1] The brand name in the header is ink, not red: red is for the one primary action. */
:where(.hc-shell) .hc-header .hc-brand { color: var(--text); }

/* [MAX-KB-29] The uploaded logo fits the 4rem header whatever its own size. */
:where(.hc-shell) .hc-header .hc-logo { display: block; max-height: 2.5rem; max-width: 10rem; width: auto; height: auto; object-fit: contain; }

@media (max-width: 639.98px) {
    :where(.hc-shell) .hc-header .hc-brand { font-size: 1.125rem; }
    :where(.hc-shell) .hc-header .hc-logo { max-height: 2rem; max-width: 6rem; }
    :where(.hc-shell) .hc-header .hc-nav { gap: 0.75rem; }
    /* [RW-25-2] A signed-in visitor's portal icon takes the place of the Start icon, which goes where the brand
       already goes (/help), so the brand keeps the room it has for an anonymous visitor. */
    :where(.hc-shell) .hc-header .hc-nav-has-portal .hc-nav-home { display: none; }
    :where(.hc-shell) .hc-header .hc-nav-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* [BENCHMARK-214] A printed help-centre page is its content alone: no header, footer, notices or the parts a page
   marks data-hc-no-print (the article page: breadcrumb, Delen/Afdrukken, attachments, vote, comments, sidebar).
   Dark text on white paper whatever the screen theme: the dark theme's text tokens are set to the light theme's
   (browsers leave the dark backgrounds off the paper, the light text stayed). */
@media print {
    html.hc-shell, html.hc-shell[data-theme] {
        --surface-page: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-muted: #FFFFFF;
        --border: rgba(7, 8, 11, 0.16); --border-strong: rgba(7, 8, 11, 0.24);
        --text: #0B0D12; --text-2: #3E4554; --text-muted: #646C7C; --accent-text: #D10F33;
        --color-card: #FFFFFF; --color-card-border: rgba(7, 8, 11, 0.16);
        --color-foreground: #0B0D12; --color-muted: #646C7C; --color-muted-foreground: #646C7C;
        background: var(--surface) !important;
    }
    :where(.hc-shell) body { background: var(--surface) !important; }
    :where(.hc-shell) .hc-header, :where(.hc-shell) .hc-footer, :where(.hc-shell) #hc-flash, :where(.hc-shell) [data-hc-no-print] { display: none !important; }
    :where(.hc-shell) .card { box-shadow: none !important; }
    :where(.hc-shell) main article.card { border: 0 !important; }
    :where(.hc-shell) main article.card > .card-body { padding: 0 !important; }
    :where(.hc-shell) main .container { max-width: none !important; padding: 0 !important; }
    :where(.hc-shell) main .py-8 { padding: 0 !important; }
}

/* The home page (HelpCenter/Index). [COLOR-2] The banner in the help centre's own brand colour (Kennisbank > Thema),
   deepened towards charcoal; the colour rides in as the --hc-brand variable on the banner. */
:where(.hc-shell) .hc-hero { background: var(--hc-brand, var(--ic-red)); background: linear-gradient(135deg, var(--hc-brand, var(--ic-red)) 0%, color-mix(in srgb, var(--hc-brand, var(--ic-red)) 60%, var(--charcoal-950)) 100%); }
:where(.hc-shell) .hc-hero-search { color: var(--hc-brand, var(--ic-red)); }

/* [HEAD-1] The banner's heading is the kit's page header, centred in white on the brand colour at the banner's
   sizes (32 title, 18 subtitle). */
:where(.hc-shell) .hc-hero .ic-page-header { justify-content: center; text-align: center; margin-bottom: 2rem; }
:where(.hc-shell) .hc-hero .ic-page-header-text { gap: 1rem; justify-items: center; }
:where(.hc-shell) .hc-hero .ic-page-header-title { font-size: 2rem; line-height: 2.25rem; color: inherit; }
:where(.hc-shell) .hc-hero .ic-page-header-subtitle { font-size: 1.125rem; line-height: 1.625rem; color: inherit; opacity: 0.9; max-width: none; }

/* The article page (HelpCenter/Article). [BENCHMARK-214] A heading the table of contents jumps to lands below the
   sticky 4rem header, not under it. */
:where(.hc-shell) [data-kb-article-body] h1, :where(.hc-shell) [data-kb-article-body] h2, :where(.hc-shell) [data-kb-article-body] h3 { scroll-margin-top: 5rem; }
:where(.hc-shell) [data-kb-toc-list] a { display: block; padding: 0.25rem 0.75rem; border-radius: 0.375rem; }
/* [TIM-203] 'Wijzigen' under the reader's own vote opens Ja / Nee again: a button, without the disclosure marker. */
:where(.hc-shell) [data-kb-vote-change] > summary { list-style: none; cursor: pointer; width: max-content; }
:where(.hc-shell) [data-kb-vote-change] > summary::-webkit-details-marker { display: none; }
/* 'Link gekopieerd!' under the Delen/Afdrukken buttons, and the comments' waiting and answer marks (neutral: red is
   not a decoration, COLOR-1). */
:where(.hc-shell) [data-kb-share-msg] { right: 0; top: 100%; margin-top: 0.375rem; }
:where(.hc-shell) .hc-comment-waiting { border: 1px dashed var(--warn); }
:where(.hc-shell) .hc-comment-answer { margin-left: 1.5rem; border-left: 3px solid var(--border-strong); }