/* ============================================================================
   Redesign foundation - shared, domain-neutral CSS contracts.

   Scope of this file. It holds only the classes that must be applied to markup
   the shared components do not own: raw domain markup (tables, forms, badges,
   row actions) and slot content passed into a shared component. Everything a
   shared component renders itself is styled in its colocated .razor.css, which
   Blazor scopes to that component.

   Why the split. CSS isolation rewrites the last element of a selector with the
   owning component's scope attribute. Slot content carries the *consumer's*
   scope, so a shared component's isolated stylesheet cannot reach it - those
   rules have to be global, and they live here.

   Conventions. Every class is prefixed zw- and follows BEM. Modifiers are
   semantic (--success, --compact, --records), never domain names. Nothing here
   aliases an existing .zahlwerk-*, .employee-* or .investment-* class: adopting
   this foundation must never restyle a page that has not been migrated to it.

   Imported once, from wwwroot/css/app.css.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Page scaffold
   Slot-reaching companions to Components/Shared/Redesign/Layout.
   --------------------------------------------------------------------------- */

.zw-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

/* The tab strip is supplied by the page, so this cannot live in
   PageScaffold.razor.css.

   Both selectors are deliberately one level deeper than they need to be for
   matching. TabsNavigation styles its own .tab from an isolated stylesheet, so
   the compiled rule is .tab[b-txoy05nqc9] - specificity (0,2,0). app.css is
   linked before the scoped bundle in Pages/_Layout.cshtml, so a global rule of
   equal specificity loses the tie and the tab keeps TabsNavigation'''s own
   padding-bottom: 16px. Going through .tabs-nav lifts these to (0,3,0), which
   is what the pre-scaffold page rule
   (.investments-v2-tabs-row[b-...] .tab) already had. */
.zw-page__navigation .tabs-nav {
    gap: 16px;
}

.zw-page__navigation .tabs-nav .tab {
    padding-bottom: 10px;
}

/* Action buttons are supplied by the page into PageHeader's Actions slot. */
.zw-page-header__actions .button-zahlwerk {
    margin-top: 0;
}

.zw-page-header__action {
    min-width: 170px;
}

/* PageContentMode.Chart. Charts have an intrinsic height and must not be squeezed by the
   scaffold's flex column the way a table's own scroll wrapper can be.

   Global rather than isolated because these are the content region's *children*: PageScaffold
   renders the region, but what goes in it is slot content carrying the consuming page's scope,
   so isolation would have rewritten this to ".zw-page__content--chart > *[b-<scaffold>]" - a
   selector that can never match. */
.zw-page__content--chart > * {
    flex: 0 0 auto;
}

@media (max-width: 1100px) {
    .zw-kpi-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    .zw-kpi-grid {
        grid-template-columns: 1fr;
    }

    .zw-page-header__action {
        min-width: 0;
        width: 100%;
    }

}


/* ---------------------------------------------------------------------------
   2. View mode toggle icons
   ViewModeToggle.razor renders the <img> itself from an IconCssClass string, not from a slot -
   a class named there is applied inside ViewModeToggle's own render tree, which carries
   ViewModeToggle's isolation scope, not the consuming page's. So a per-page icon-width modifier
   has to be global here rather than living in the page's own isolated stylesheet, even though
   only the page knows which icon needs which width.
   --------------------------------------------------------------------------- */

.zw-view-toggle__icon--table {
    width: 16px;
}

.zw-view-toggle__icon--graph {
    width: 12px;
}


/* ---------------------------------------------------------------------------
   3. Side panel
   Body children are supplied by the consumer, so they cannot be sized from
   SidePanelShell.razor.css.
   --------------------------------------------------------------------------- */

.zw-side-panel__body > * {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
   4. Semantic badges
   Global rather than isolated so raw markup can carry the same classes while a
   page is being migrated off .employee-pill.

   Named zw-semantic-badge, not the shorter zw-badge the architecture proposal
   sketched: DesignSystem/StatusBadge already renders class="zw-badge" and
   styles it from its own isolated stylesheet. A global .zw-badge here would
   have leaked a border, a min-width and align-items onto the live tenant status
   badges in Components/Tenants/TenantList.razor. Renaming keeps the rule that
   this foundation never restyles unmigrated markup. If StatusBadge is later
   renamed to TenantStatusBadge as the proposal suggests, zw-badge frees up.
   --------------------------------------------------------------------------- */

.zw-semantic-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    line-height: 1;
    min-width: 30px;
}

.zw-semantic-badge--small {
    font-size: 11px;
    padding: 3px 6px;
}

.zw-semantic-badge--medium {
    font-size: 12px;
    padding: 5px 9px;
}

.zw-semantic-badge__icon {
    height: 11px;
    width: 11px;
}

.zw-semantic-badge--neutral {
    background: #eceff2;
    border-color: #d8dde2;
    color: var(--Zahlwerk-medium-grey);
}

.zw-semantic-badge--info {
    background: #d8f6fb;
    border-color: #a6dfea;
    color: var(--Zahlwerk-primary);
}

.zw-semantic-badge--success {
    background: #d8f5df;
    border-color: #9bd8aa;
    color: #16803a;
}

.zw-semantic-badge--warning {
    background: #fff4df;
    border-color: #ffc981;
    color: #e67e00;
}

.zw-semantic-badge--danger {
    background: #fdecec;
    border-color: #f3b4b4;
    color: #b3261e;
}


/* ---------------------------------------------------------------------------
   5. Tables

   Two families, deliberately named and kept apart:

     .zw-table--records / --matrix   full-page tables, normally scrolled
                                     horizontally inside .zw-table-wrap
     .zw-table--compact              side-panel tables

   Minimum width is per-table, set through the --zw-table-min-width custom
   property, so the full-page floor can never be inherited by a side panel the
   way the legacy .zahlwerk-data-table 980px rule was.
   --------------------------------------------------------------------------- */

/* No max-height. The legacy .zahlwerk-data-table-wrapper carried
   "max-height: min(72vh, 760px)", but the only full-page consumer overrides it away
   (InvestmentsPage sets max-height: none + height: 100% on the card's wrapper), and neither
   the pivot nor the compact side-panel wrapper has ever had one. A height clamp here would have
   been an invented value that every consumer then had to undo; a table that wants to scroll
   inside a fixed box says so itself. */
.zw-table-wrap {
    background: var(--Zahlwerk-white);
    border: 1px solid var(--Zahlwerk-light-primary);
    overflow: auto;
}

.zw-table-wrap--compact {
    border: 0;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

.zw-table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    min-width: var(--zw-table-min-width, 0);
    table-layout: fixed;
    width: 100%;
}

.zw-table th,
.zw-table td {
    border: none;
    border-bottom: 1px solid var(--Zahlwerk-light-primary);
    border-right: 1px solid var(--Zahlwerk-light-primary);
    /* Reproduces Bootstrap's ".table > :not(caption) > * > * { padding: .5rem .5rem }", which is
       where every legacy .zahlwerk-data-table actually got its cell padding from - those tables
       all carry Bootstrap's .table class as well. A table adopting .zw-table drops .table, so
       without this declaration its cells would have had no padding at all. --compact overrides
       it with its own 10px 8px at higher specificity. */
    padding: 0.5rem;
    text-align: left;
}

.zw-table thead th {
    background-color: var(--Zahlwerk-light-primary);
    color: var(--Zahlwerk-black);
    font-weight: 600;
    vertical-align: middle;
    /* Long German header phrases (e.g. Investments' "für Berechnung/Planung verwenden") can
       contain a single word - or a slash-joined pair like "Berechnung/Planung", which browsers do
       not treat as a break point - too wide for a narrow, content-appropriately-sized column even
       though the phrase as a whole wraps across lines. Without this the unbreakable chunk overflows
       the th's own border and visibly paints over the next column instead of wrapping inside it.
       break-word (not the more aggressive "anywhere") only forces a mid-word break as a last
       resort, after normal space/hyphen wrapping is exhausted - confirmed by rendering both: with
       "anywhere" several merely-tight (not impossible) columns fragmented into far more, shorter
       lines than break-word produced for the identical widths. */
    overflow-wrap: break-word;
}

.zw-table tr > *:last-child {
    border-right: none;
}

.zw-table tbody tr:last-child td {
    border-bottom: none;
}

/* Standard master-data table: flat rows, 12px cells. */
.zw-table--records thead th {
    font-size: 16px;
}

.zw-table--records tbody td {
    background-color: var(--Zahlwerk-white);
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Overview and pivot tables: zebra rows, optional pinned columns. */
.zw-table--matrix tbody tr:nth-child(odd) td {
    background-color: var(--Zahlwerk-white);
}

.zw-table--matrix tbody tr:nth-child(even) td {
    background-color: #f4f8fa;
}

.zw-table--matrix .zw-table__sticky-start {
    left: 0;
    position: sticky;
    z-index: 1;
}

.zw-table--matrix .zw-table__sticky-end {
    position: sticky;
    right: 0;
    z-index: 1;
}

/* Side-panel table. Never inherits the full-page minimum width. */
.zw-table--compact {
    --zw-table-min-width: 470px;

    border-collapse: collapse;
    color: var(--Zahlwerk-dark-grey);
}

.zw-table--compact th {
    background: var(--Zahlwerk-light-primary);
    border-bottom: 0;
    /* .zw-table thead th sets colour to --Zahlwerk-black (#000). A compact table declares its own
       colour on the table element (--Zahlwerk-dark-grey, #2C2C2C, in the Investments payment-terms
       table) and its header inherited that, so the base rule would have darkened the header text.
       Inheriting keeps the family's own colour wherever it is set. */
    color: inherit;
    border-right: 1px solid var(--Zahlwerk-white);
    font-size: 12px;
    font-weight: 700;
    height: 38px;
    padding: 10px 8px;
}

.zw-table--compact td {
    background: var(--Zahlwerk-white);
    font-size: 12px;
    height: 38px;
    overflow: hidden;
    padding: 10px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zw-table--sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Declared after the row-background families above so the tie on specificity
   resolves in hover's favour without needing !important.

   Two 5% layers, not one. The legacy .zahlwerk-data-table--hoverable rule set BOTH a
   translucent background-color and the inset box-shadow, so a hovered row painted roughly
   9.75% blue over white, not 5%. Declaring only the box-shadow would have halved the
   highlight. The legacy declaration reads
   "var(--Zahlwerk-hover-light, rgba(0, 123, 255, 0.05))", but --Zahlwerk-hover-light is not
   defined in any stylesheet in this repo, so the fallback is the real computed value and is
   inlined here rather than carrying a dead variable into the foundation. */
.zw-table--hoverable tbody tr:hover td {
    background-color: rgba(0, 123, 255, 0.05);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 9999px rgba(0, 123, 255, 0.05);
}

.zw-table__numeric {
    text-align: right;
}

.zw-table__actions {
    text-align: center;
}


/* ---------------------------------------------------------------------------
   6. Row actions
   The buttons themselves stay in the consuming markup, so the page keeps
   ownership of labels, permissions and callbacks.
   --------------------------------------------------------------------------- */

.zw-icon-button {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    width: 24px;
}

.zw-icon-button img {
    height: 14px;
    width: 14px;
}

.zw-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.zw-icon-button:focus-visible {
    outline: 2px solid var(--Zahlwerk-primary);
    outline-offset: 2px;
}

.zw-icon-button--danger:focus-visible {
    outline-color: var(--Zahlwerk-red);
}


/* ---------------------------------------------------------------------------
   7. Form layout
   Applied to domain-owned forms. The input components keep ownership of their
   values and validation; only spacing, collapse behaviour and surfaces are here.
   --------------------------------------------------------------------------- */

.zw-field-grid {
    display: grid;
    gap: 8px 18px;
}

.zw-field-grid--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zw-field-grid--single-column {
    grid-template-columns: minmax(0, 1fr);
}

.zw-field-grid__full {
    grid-column: 1 / -1;
}

.zw-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.zw-form-actions--end {
    justify-content: flex-end;
}

/* Keeps inputs white inside a tinted section card. !important is required here
   and only here: the inner header of a dropdown or month selector is styled by
   that child component's isolated stylesheet, and the scoped CSS bundle is
   linked after app.css, so an equal-specificity global rule would lose.

   This is primarily a *container* class: put it on the field grid or the field
   wrapper and every input inside it goes white, including the ones rendered
   inside a child component where no class of ours can reach.

   The self-match is therefore qualified by element. A bare ".zw-input-surface"
   in this list would paint the container itself white - which is exactly wrong
   for the case the class exists to serve, since that container is the tinted
   card showing through behind the labels. Qualifying it as
   input/textarea/select keeps the class usable directly on a single control
   without breaking the container usage. */
input.zw-input-surface,
textarea.zw-input-surface,
select.zw-input-surface,
.zw-input-surface .input.field,
.zw-input-surface textarea,
.zw-input-surface .dropdown-header,
.zw-input-surface .month-selector-header,
.zw-input-surface .date-picker-header {
    background-color: var(--Zahlwerk-white) !important;
}

.zw-readonly-grid {
    display: grid;
    gap: 16px 34px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zw-readonly-field {
    min-width: 0;
}

.zw-readonly-label {
    color: var(--Zahlwerk-medium-grey);
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 5px;
}

.zw-readonly-value {
    color: var(--Zahlwerk-dark-grey);
    font-size: 13px;
    line-height: 1.35;
    min-height: 18px;
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .zw-field-grid--two-column,
    .zw-readonly-grid {
        grid-template-columns: 1fr;
    }
}