/* Portal overrides - owner ruling 2026-08-14: "Możemy wdrożyć to, co nam nie
   koliduje. Jeśli jest kolizja zostawiamy nasze."

   Loaded AFTER the view-layer package, and deliberately SHORT. The package
   wins every shared name whose DOM matches ours (card, data-table, toolbar,
   pager, hint, muted, row-actions, link-button, translation-grid, lang-tag,
   checkbox-grid, detail-list, ...). This file restores OUR rule ONLY where
   the package styles a DIFFERENT DOM than we emit, or where its rule silently
   kills a responsive rule of ours. Anything added here must name the
   collision it settles, or it belongs in app.css.

   1-3 are the adoption check's structural collisions; 4-7 the second wave
   (portal review 2026-08-14), each verified against the markup our pages
   actually EMIT rather than against the delivered sample. 6 and 7 are one
   mechanism, not two rules: a media query adds NO specificity, so a later
   unconditional package rule beats our narrow-viewport rule outright, and
   only the last sheet can put it back. */

/* 1. field-row. Package: one field per row, 220px label column, label a DIRECT
   child. Ours: 2-5 label+control PAIRS per row, label a grandchild - all 16
   sites (ProductDeclaration x12, ProductEdit x4). Owner: keep ours for now. */
.field-row {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0 .9rem;
    align-items: stretch;
    padding: 0;
    border-bottom: 0;
}

/* The package pins hints to its second column; with our auto-fit grid a hint
   belongs to the field it follows, not to a column that does not exist. */
.field-row .hint {
    grid-column: auto;
}

/* 2. side-panel. Package: the declaration screen's sticky right-hand rail.
   Ours: the GLOBAL NAV column of MainLayout, positioned by the shell grid -
   position:sticky there detaches the nav from its grid area. The inner
   .side-nav keeps its own sticky, which is the one we actually want. */
.side-panel {
    position: static;
}

/* 3. declaration-validators. Package: a <ul> of <li class="valid|blokuje">
   inside an <aside>. Ours: a <details> disclosure wrapping a data-table, so
   the package's list reset lands on a widget that is not a list. */
.declaration-validators {
    display: block;
    margin: 1.25rem 0;
    padding: .6rem .9rem;
    border: 1px solid var(--border-subtle);
    border-radius: .5rem;
    background: var(--surface-raised);
}

/* 4. lang-tag. Package: a control-height chip in the translation grid's 54px
   column (panel.css:740) - display:flex and height:var(--ctl-h) are right
   THERE. Ours is ALSO an inline <span> standing inside a running sentence:
   the revision tag and the execution status inside <p class="hint">
   (LoadingExecutionPage.razor:35,38), the machine timezone in the same
   sentence shape (LoadingPlanEdit.razor:37), the load state beside the
   product name (LoadingStock.razor:111). display:flex makes each of those a
   BLOCK box, so one sentence renders as three stacked blocks, and the control
   height stands a 34px form control in prose. Inline flow is restored
   everywhere and the control height is scoped back to the grid, where
   .lang-tag is a DIRECT child of .translation-cell (ProductDeclaration x3,
   ProductEdit x4) - and where a grid item is blockified anyway (CSS Display 3
   §2.7: inline-flex computes to flex), so the grid loses nothing. */
.lang-tag {
    display: inline-flex;
    height: auto;
}

.translation-cell > .lang-tag {
    height: var(--ctl-h);
}

/* 5. row-actions. Package: a flex row of actions justified right - a DIV
   wrapper (panel.css:950). Ours is the actions <td> ITSELF
   (Products.razor:179, the only site in the portal). display:flex on a table
   cell stops it being a cell: the row wraps it in an anonymous cell, so the
   package's own .data-table td padding, border-bottom and vertical-align
   (panel.css:939) apply to a box that is no longer the cell, and the column
   stops behaving like a column. Only the cell model is restored - the right
   alignment and the gap between the two actions still come from app.css
   (.row-actions{text-align:right} and .row-actions .link-button{margin-left})
   because the package never sets either property. Scoped to td deliberately:
   a .row-actions DIV, if one is ever written, is exactly the DOM the
   package's flex row was made for. */
td.row-actions {
    display: table-cell;
}

/* 6. detail-list on a phone. Package: two columns, unconditionally
   (panel.css:1036). Ours: two columns with room, ONE column under 34rem so a
   long value is not cut off on a phone (app.css:571). The media query adds no
   specificity, so the package's later unconditional rule wins at every
   viewport and the phone gets two columns back - on all 15 detail screens
   (ProductView, ProductPublish, MachineDetails, PaymentDetails, Access, ...).
   The stacked pairs' bottom margin dies the same way, under the package's
   `margin:0` shorthand. */
@media (max-width: 34rem) {
    .detail-list {
        grid-template-columns: 1fr;
    }

    .detail-list dd {
        margin-bottom: .5rem;
    }
}

/* 7. side-nav-group on a phone. The SAME dead-responsive-rule mechanism as 6,
   found by the check written for 6 rather than by eye
   (PortalViewLayerAdoptionTests.No_responsive_rule_of_ours_dies_under_the_package).
   Under 60rem the nav turns into a horizontal flex row (app.css:855) and our
   rule zeroes the between-group margin; the package's unconditional
   margin-top:7px (panel.css:1042) wins anyway and drops every group after the
   first 7px below its siblings in that row. */
@media (max-width: 60rem) {
    .side-nav-group + .side-nav-group {
        margin-top: 0;
    }
}

/* 8. data-table th. Package: padding 0 12px 9px - ZERO top, because its
   preview seats the table inside .blok, whose own spacing supplies the
   breathing room. Our pages seat data-table directly in .card (and the
   styleguide under a bare h3), where the zero top glues the header row to
   whatever precedes it (owner report 2026-09-01: "header w tabeli nie ma
   paddingu"). Symmetric top restored; the UI team may re-balance with a
   delivered .card table spacing instead. */
.data-table th {
    padding-top: 9px;
}

/* 9. row-actions on a TABLE CELL. Package: .row-actions is
   display:flex - designed for a DIV in its own row DOM (our report
   pages use it that way and keep the flex). On a <td> (products list,
   loading plan) flex dissolves the table cell: the box shrinks to its
   content so justify-content:flex-end has nothing to justify (rows
   without "Podglad" drifted left), and stretched flex items break the
   vertical rhythm (anchor text at the top, button text centered -
   owner report 2026-09-01). A cell stays a cell: inline right-aligned
   content, the package's 6px gap re-created with margins, vertical
   centering from the package's own .data-table td rule. */
td.row-actions {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

td.row-actions > * + * {
    margin-left: 6px;
}

/* 10. hover underline on button-shaped controls. Package: .link-button
   underlines on :hover (and the global anchor hover underline reaches
   .btn anchors). Owner ruling 2026-09-01: an underline appearing on a
   BUTTON reads as thirty years old - buttons keep their background
   hover only. Text links (prose, tables, pager) keep the hover
   underline; this names exactly the button-shaped controls. */
.link-button:hover,
a.btn:hover {
    text-decoration: none;
}