/*
    App-level styles that sit on top of Bootstrap and brand.css (loaded in that order).

    The brand palette lives in brand.css as the --pa-* tokens; this file only adds the neutral scale
    Bootstrap has no exact counterpart for. Anything Bootstrap or brand.css already provides — the
    reboot's body reset, link colours, button and form-control looks — is deliberately absent here.
*/

:root {
    --ink: #1a1a1a;
    --muted: #5b6470;
    --line: #e3e6ea;

    --danger: #b91c1c;

    color: var(--ink);
}

.app-main {
    max-width: 48rem;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* --- Internal back-office (Interactive Server) ---
   The shell mirrors the parent portal's (see PortalLayout.razor.css): same width — Bootstrap's .container-xl
   on the element —, same green rule under a Bootstrap .navbar. Server components have no scoped stylesheets,
   so the admin rules live here. */
.admin-shell {
    min-height: 100vh;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.admin-header {
    padding: 0 0 1rem;
    border-bottom: 3px solid var(--pa-green);
}

.admin-header .brand-logo {
    height: 2.25rem;
    width: auto;
}

.admin-header .realm {
    font-size: 0.95rem;
}

.admin-header .admin-account-name {
    font-size: 0.9rem;
}

.admin-header form {
    margin: 0;
}

/* Collapsed menu: the links stack, so give them room and left-align the labels (mirrors the portal). */
@media (max-width: 575.98px) {
    .admin-header .navbar-collapse {
        padding-top: 0.5rem;
    }

    .admin-header .admin-account-name {
        display: block;
        padding-top: 0.5rem;
    }
}

.admin-main {
    margin: 1.5rem 0 0;
}

/* Page head: title, an optional badge or count, and the back button pushed right with .ms-auto. Both
   detail views (portal + back-office) build their head the same way, hence the shared rule; on those the
   muted sub-line (Schuljahr) is what spaces the head off the cards below. */
.page-head,
.detail-head {
    display: flex;
    /* baseline, not center: the count badge belongs to the heading and reads as part of the same line, so
       its text sits on the heading's baseline instead of floating in the middle of its box. */
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

/* The back link is an icon with no text, so it brings no baseline to share — it would hang below the
   heading. Centred against the line instead, which is where it looked right before. */
.page-head > .btn,
.detail-head > .btn {
    align-self: center;
}

.page-head h1,
.detail-head h1 {
    margin: 0;
    font-size: 1.5rem;
}

/* Only .page-head needs this: on the detail views the muted sub-line (Schuljahr) already does the
   spacing, and adding it there would double the gap. */
.page-head {
    margin-bottom: 1.25rem;
}

/* Sub-heading above a group of cards or a table inside one. */
.section-title {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.05rem;
}

/* One that introduces a whole group of cards ("Betreuungsmodule") has to carry across the gap between
   them, so it wears the same display look as a card heading: Vollkorn, green, bold italic (brand.css). */
h2.section-title {
    font-family: var(--pa-display-font);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 700;
    color: var(--pa-green);
}

.card .section-title {
    margin-top: 1.25rem;
}

table.grid {
    width: 100%;
    border-collapse: collapse;
}

table.grid th,
table.grid td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

table.grid tbody tr:last-child th,
table.grid tbody tr:last-child td {
    border-bottom: none;
}

/* The form that appends a row to the list right above it. Its fields are deliberately the same size as
   the ones in the table, which is exactly why it needs the rule and the caption: without them it reads as
   one more listed entry rather than as the place where a new one is entered. */
.add-row {
    margin-top: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.add-row-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Row actions sit together and never wrap onto two lines. */
.row-actions {
    display: inline-flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

/* An amount cell should not stretch to the column width — the field is four digits and a currency. */
.amount-input {
    max-width: 13rem;
}

/* --- Shared info panel (Informationstexte from the paper form) ---
   The panel is a Bootstrap alert (see Components/InfoPanel.razor) wearing brand.css's tint and green
   left rule; only the type scale below is bespoke. */
.info-panel {
    font-size: 0.9rem;
    color: #2b3a1e;
}

.info-panel > :first-child {
    margin-top: 0;
}

.info-panel > :last-child {
    margin-bottom: 0;
}

/* Both panels keep their distance to what follows — but not as the last thing in a card or section, where the
   container's own padding is the distance. (NotePanel's margin lives here rather than as Bootstrap's mb-3, whose
   !important no :last-child rule could lift.) */
.note-panel {
    margin-bottom: 1rem;
}

.info-panel:last-child,
.note-panel:last-child {
    margin-bottom: 0;
}

.info-panel h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: var(--pa-petrol);
}

/* Footer hint in the AGB dialog, shown until the reader has scrolled to the end. */
.doc-foot-hint {
    color: var(--muted);
    font-size: 0.85rem;
}

/* The admin config forms are plain Bootstrap now (.form-label / .form-control / .form-select /
   .form-check / .input-group); only the compact label scale is ours, matching the portal's forms. */
.admin-main .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.field-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.muted {
    color: var(--muted);
    font-size: 0.85rem;
}

/* Cards are Bootstrap's (.card + .card-body, with brand.css's .card-accent green top rule). Only the
   headings inside them are ours, shared by the parent and the back-office detail views. The h2 carries
   the paed-aktiv.de display look: Vollkorn (see brand.css), green, bold italic. */
.card h2 {
    font-family: var(--pa-display-font);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 700;
    color: var(--pa-green);
    margin: 0 0 0.75rem;
    padding: 0.15rem 0 0.35rem;
}

.card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

/* Bootstrap gives headings weight 500, which at these sizes is barely a step above body text: the
   sub-sections inside a card ("Neues Modul", "Betreuungsentgelte", the module's own name) sank into the
   fields below them. Weight only — the margins and sizes above and in .section-title still apply. */
.card h3,
.card h4 {
    font-weight: 700;
}

/* --- Icon-only nav item (NavIconLink) ---
   Worn by both the portal and the back-office headers. Bootstrap's .nav-link carries the sizing; this
   adds the square hover pill and the destructive (sign-out) tone. */
.nav-icon {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    color: var(--pa-petrol);
}

/* BsIcon renders its <svg> inside a <span>, which sits on the text baseline and would otherwise hang
   low in the hover pill. */
.nav-icon .bs-svg {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.nav-icon svg {
    display: block;
}

.nav-icon:hover,
.nav-icon:focus {
    background: var(--pa-tint);
    color: var(--pa-petrol-dark);
}

.nav-icon-danger {
    color: var(--bs-danger);
}

.nav-icon-danger:hover,
.nav-icon-danger:focus {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

/* Icon-only from sm up: a square target instead of the wide text padding .nav-link assumes. */
@media (min-width: 576px) {
    .nav-icon {
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
    }
}

/* Square icon-only target for IconButton/IconLink: Bootstrap's .btn padding assumes a text label, and
   BsIcon's <svg> sits inside a <span> that would otherwise hang below the baseline. Global rather than
   scoped so the two components share one rule. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    flex: 0 0 auto;
}

.icon-btn .bs-svg {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.icon-btn svg {
    display: block;
}

/* --- Registration list card ---
   One row-height card per registration, shared by the parent dashboard and the back-office overview so a
   registration reads the same in both realms. Full width and deliberately compact — it replaces a table
   row, so many fit on screen: a title line, one muted meta line, then the status badge and the call to
   action. The whole card is the link; the green rule on the left is the brand accent. */
.reg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem;
}

.reg-card {
    border: 1px solid var(--line);
    border-left: 4px solid var(--pa-green);
    border-radius: 8px;
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.reg-card:hover {
    border-color: var(--pa-petrol);
    border-left-color: var(--pa-petrol);
    box-shadow: 0 2px 10px rgba(24, 70, 105, .08);
}

.reg-card:focus-visible {
    outline: 2px solid var(--pa-petrol);
    outline-offset: 2px;
}

.reg-main {
    min-width: 0;
}

.reg-card .who {
    font-weight: 600;
    color: var(--pa-petrol);
}

.reg-card .meta {
    color: var(--muted);
    font-size: .9rem;
}

.reg-card .note {
    color: #92400e;
    font-size: .9rem;
    margin: .35rem 0 0;
}

.reg-side {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.reg-cta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--pa-petrol);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
}

.reg-cta svg {
    transition: transform .12s;
}

.reg-card:hover .reg-cta svg {
    transform: translateX(3px);
}

/* The module header inside the facility editor: label plus its active/inactive badge. */
.module-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.module-head h3 {
    margin: 0;
}

/* --- Admin registration detail (read-only) --- */
.detail-sub {
    font-size: 0.95rem;
    color: var(--pa-petrol);
    margin: 1rem 0 0.5rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(11rem, 16rem) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.detail-grid dt {
    color: var(--muted);
    font-size: 0.9rem;
}

.detail-grid dd {
    margin: 0;
}

/* A parent's free text keeps its line breaks. */
.detail-note {
    white-space: pre-line;
}

.detail-empty {
    color: var(--muted);
    font-style: italic;
    margin: 0;
}

@media (max-width: 32rem) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 0.1rem 0;
    }

    .detail-grid dd {
        margin-bottom: 0.5rem;
    }
}

/* Status badges are Bootstrap `.badge text-bg-*`; the tone comes from RegistrationStatusText.Tone(),
   shared by the portal and the back-office. The reviewer's note is a BsAlert (AlertType.Warning). */

/* --- Parent account (login / register / logout) --- */
.account {
    max-width: 26rem;
    margin: 2rem auto;
}

.account-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    margin-bottom: 1.25rem;
}

.account h1 {
    color: var(--pa-petrol);
    font-size: 1.4rem;
}

/* The fields are plain Bootstrap (.form-label / .form-control / .btn); only the compact label scale is
   ours, matching the wizard and the admin forms. */
.account .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

/* Blazor's ValidationMessage writes its own class and drops any we pass, so it is styled by name. */
.account .validation-message {
    color: var(--danger);
    font-size: 0.8rem;
}

/* The parent master-data page styles itself (Client/Pages/Portal/Profile.razor.css), and toasts are the
   package's BsToasts host — PortalToasts (Client) raises them with German headings. */

/* --- AGB long-form content (dialog + /portal/terms page) --- */
.doc-content {
    font-size: 0.9rem;
    color: var(--ink);
}

.doc-content h3 {
    font-size: 1.05rem;
    color: var(--pa-petrol);
    margin: 1.4rem 0 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
}

.doc-content h3:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0.5rem;
}

.doc-content h4 {
    font-size: 0.95rem;
    color: var(--pa-petrol);
    margin: 1rem 0 0.3rem;
}

.doc-content p {
    margin: 0.4rem 0;
}

.doc-content ol, .doc-content ul {
    margin: 0.4rem 0;
    padding-left: 1.4rem;
}

.doc-content .doc-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

/* --- Review summary "Ihre Angaben" (wizard step Prüfen + ProofChip / ReviewPartner) ---
   Shared by three components, so not scoped. The value that answers a topic reads first and larger, the details
   small below; chips mark states (green done, amber to follow, red missing, struck through for a "Nein"). */
.review-main {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.review-sub {
    font-size: .88rem;
    color: var(--muted);
}

.review-sub .bi,
.review-sub svg {
    margin-right: .2rem;
    vertical-align: -.1em;
}

.review-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pa-petrol);
    line-height: 1.1;
}

.review-amount small {
    font-size: .85rem;
    font-weight: 400;
    color: var(--muted);
}

.review-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .25rem .5rem;
    padding: .2rem 0;
}

.review-line > :first-child {
    flex: 1 1 10rem;
    min-width: 0;
}

.review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}

.review-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    font-weight: 500;
    padding: .2rem .6rem;
    border-radius: 1rem; /* a pill on one line, still round when a long label wraps */
    border: 1px solid transparent;
    max-width: 100%;
    text-align: left;
}

.review-chip svg,
.review-chip .bi {
    flex-shrink: 0;
}

.review-chip.ok {
    background: var(--pa-tint);
    color: #4d6311;
    border-color: var(--pa-tint-border);
}

.review-chip.wait {
    background: #fff4e0;
    color: #8a5a00;
    border-color: #f3d9a4;
}

.review-chip.missing {
    background: #fdecec;
    color: #9b1c1c;
    border-color: #f5c2c2;
}

.review-chip.neutral {
    background: #eef2f6;
    color: #3d4a57;
    border-color: #dde3ea;
}

.review-chip.no {
    background: #f4f5f7;
    color: #8a929c;
    border-color: var(--line);
    text-decoration: line-through;
}

.review-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .9rem;
    font-size: .88rem;
    margin: 0;
}

.review-kv dt {
    color: var(--muted);
    font-weight: 400;
}

.review-kv dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.review-mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.review-person {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: .6rem;
    padding: .7rem .85rem;
}

.review-person-role {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.review-person-name {
    font-weight: 600;
    font-size: 1.02rem;
}