/*
 * "Abos verwalten" — the category subscription matrix on the profile page.
 *
 * Layout is a three-column grid: category name, "Mein Thema aktivieren",
 * "Push-Benachrichtigung". Main categories are accordion headings, their
 * children the subscribable rows. Below the breakpoint the grid collapses
 * into stacked rows and the per-cell captions (visually hidden on wide
 * screens, where the column headings carry the meaning) take over.
 *
 * Themed through the same --intranet-* custom properties as the rest of the
 * intranet; the fallbacks keep it readable if the file is ever loaded on a
 * page without .intranet-layout.
 */

.intranet-subs {
    --subs-col-topic: 190px;
    --subs-col-mail: 220px;
    --subs-row-gap: 4px;

    max-width: 900px;
}

/*
 * `hidden` must win over the display rules below.
 *
 * The JS-only controls (accordion disclosure, per-group select-all) ship with
 * the `hidden` attribute and are revealed by Subscriptions.js. The UA rule
 * `[hidden] { display: none }` has lower specificity than the authored
 * `display: inline-flex` / `display: flex` further down, so without this reset
 * they would render regardless — visible before the script runs, and left
 * behind as dead, focusable controls whenever the script fails to execute
 * (error, CSP block). The panel toggle relies on the same attribute.
 */
.intranet-subs [hidden] {
    display: none !important;
}

.intranet-subs__title {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--intranet-text-strong, #1c1c1c);
    margin: 0 0 8px;
}

.intranet-subs__intro {
    color: var(--intranet-text-muted, #6b7280);
    margin: 0 0 32px;
    font-size: 1.125rem;
}

/* --- Matrix ------------------------------------------------------------- */

.intranet-subs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--subs-col-topic) var(--subs-col-mail);
    align-items: center;
    gap: 16px;
}

.intranet-subs__row--head {
    margin-bottom: 16px;
}

.intranet-subs__headcell {
    font-weight: 700;
    color: var(--intranet-text-strong, #1c1c1c);
    justify-self: center;
    text-align: center;
    font-size: 1.125rem;
}

.intranet-subs__group + .intranet-subs__group {
    margin-top: 28px;
}

.intranet-subs__row--main {
    min-height: 44px;
}

/*
 * Heading and disclosure button sit side by side but stay separate elements —
 * the button must not live inside the heading, or its screen-reader text ends
 * up in the heading's accessible name.
 */
.intranet-subs__group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.intranet-subs__group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--intranet-text-strong, #1c1c1c);
    min-width: 0;
}

.intranet-subs__group-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.125rem;
}

/*
 * Decorative category glyph in front of each main category. aria-hidden in the
 * markup keeps it out of the accessibility tree, so it carries no meaning that
 * would need a text alternative.
 *
 * `mask` rather than `background-image`: calender.svg paints with
 * `fill="currentColor"`, and an SVG loaded as a background image has no colour
 * context — it would render black instead of picking up the brand accent. As a
 * mask the file only supplies the shape and `background-color` does the
 * colouring, so the icon follows the theme like the CSS-drawn glyph did.
 *
 * The URL is relative to THIS file (Resources/Public/Css/), hence `../Icons/`.
 */
.intranet-subs__group-icon {
    flex: 0 0 auto;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--intranet-accent, #206cb1);
    -webkit-mask: url("../Icons/calender.svg") no-repeat center / contain;
    mask: url("../Icons/calender.svg") no-repeat center / contain;
}

/*
 * Masks are dropped in forced-colors mode, which would leave an empty 20px
 * box. Reclaim the space instead — the glyph is decorative, nothing is lost.
 */
@media (forced-colors: active) {
    .intranet-subs__group-icon {
        display: none;
    }
}

.intranet-subs__row--child {
    min-height: 40px;
}

.intranet-subs__row--child + .intranet-subs__row--child {
    margin-top: var(--subs-row-gap);
}

.intranet-subs__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--intranet-text, #1C1C1C);
    font-size: 1.125rem;
}

.intranet-subs__row--child .intranet-subs__label {
    padding-left: 28px;   /* aligns children under the group title text */
}

.intranet-subs__cat-desc {
    font-size: 0.875rem;
    color: var(--intranet-text-muted, #6b7280);
}

/* --- Checkbox cells ----------------------------------------------------- */

.intranet-subs__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
}



/*
 * On wide screens the column headings name the checkboxes (via
 * aria-labelledby), so the per-cell caption is redundant for sighted users
 * and hidden. It is not removed from the DOM: it stays a click target and
 * becomes the visible caption once the grid collapses.
 */
.intranet-subs__cell-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Accordion disclosure ----------------------------------------------- */

.intranet-subs__disclosure {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--intranet-accent, #206cb1);
    cursor: pointer;
}

.intranet-subs__disclosure:focus-visible {
    outline: 2px solid var(--intranet-accent, #206cb1);
    outline-offset: 2px;
}

.intranet-subs__chevron {
    width: 12px;
    height: 12px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-135deg);   /* points up = expanded */
    transform-origin: 60% 60%;
    transition: transform 0.15s ease-in-out;
}

.intranet-subs__disclosure[aria-expanded="false"] .intranet-subs__chevron {
    transform: rotate(45deg);     /* points down = collapsed */
}

@media (prefers-reduced-motion: reduce) {
    .intranet-subs__chevron {
        transition: none;
    }
}

.intranet-subs__panel {
    margin-top: 8px;
}


/* --- Rundschreiben-Kasten (ueber der Themen-Matrix) --------------------- */

.intranet-subs__newsletter {
    /* Steht bewusst *vor* der Matrix: das Rundschreiben ist keine Zeile der
       Kategorie-Tabelle, sondern eine eigene Entscheidung. Der blaue Kasten
       hebt es als solche heraus.
       margin/padding/border zurueckgesetzt, weil ein <fieldset> in jedem
       Browser eigene Defaults mitbringt. */
    margin: 0 0 32px;
    padding: 16px;
    border: 1px solid var(--intranet-border, #d1d5db);
    background: var(--intranet-accent-bg, #eaf3ff);
}

.intranet-subs__newsletter-legend {
    /* float:none + width:auto: sonst rendert das <legend> unter Bootstrap als
       volle Zeile ueber dem Rahmen statt eingebettet in ihn. */
    float: none;
    width: auto;
    padding: 0 8px;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.intranet-subs__newsletter-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.intranet-subs__newsletter-row + .intranet-subs__newsletter-hint {
    /* Der Hinweis gehoert optisch zur Option darueber, deshalb auf die
       Textspalte eingerueckt statt auf die Radio-Spalte. */
    margin: 4px 0 16px 24px;
    font-size: 0.9375rem;
    color: var(--intranet-text-muted, #6b7280);
}

.intranet-subs__newsletter-hint:last-child {
    margin-bottom: 0;
}

.intranet-subs__newsletter-label {
    /* Grosse Klickflaeche: das Label ist der eigentliche Schalter fuer
       Maus- und Touch-Bedienung (WCAG 2.5.8 Target Size). */
    cursor: pointer;
}


/* --- Submit ------------------------------------------------------------- */

.intranet-subs__actions {
    margin-top: 32px;
}


/* --- Notices ------------------------------------------------------------ */

.intranet-subs__notice {
    padding: 16px;
    background: var(--intranet-accent-bg, #eaf3ff);
    color: var(--intranet-text, #1f2937);
}

.intranet-subs__notice--warning {
    background: #fdf3d8;
    color: #5a4300;
}

/* --- Screen-reader-only text -------------------------------------------- */

.intranet-subs__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Narrow viewports ---------------------------------------------------- */

@media (max-width: 767.98px) {
    /*
     * The column headings cannot stay meaningful once the grid collapses, so
     * they are dropped and each checkbox shows its own caption instead. The
     * programmatic name (aria-labelledby) is unaffected either way.
     */
    .intranet-subs__row--head {
        display: none;
    }

    .intranet-subs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .intranet-subs__row--main {
        border-bottom: 1px solid var(--intranet-divider, #e5e7eb);
        padding-bottom: 8px;
    }

    .intranet-subs__row--child {
        padding: 8px 0;
    }

    .intranet-subs__row--child + .intranet-subs__row--child {
        border-top: 1px solid var(--intranet-divider, #e5e7eb);
    }

    .intranet-subs__row--child .intranet-subs__label {
        padding-left: 0;
        font-weight: 700;
    }

    .intranet-subs__cell {
        justify-content: flex-start;
        min-height: 40px;
    }

    .intranet-subs__cell-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        cursor: pointer;
    }
}