/* detail-layout.css — Shared detail page layout for centymo, entydad, fycha
 *
 * These classes provide the standard detail page structure:
 * full-height layout, tab bar, scrollable body, info grid.
 * Domain packages should NOT redefine these — extend with domain-specific classes instead.
 */

.page-content.detail-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}
.detail-tabs {
    /* Same page-level rhythm as .page-content--table (app layout.css): the
       tab strip floats above the body card with one token of separation.
       Carried as margin on the strip itself — not gap on .detail-layout —
       because many detail templates mount .detail-tabs/.detail-body inside
       other .page-content flavors (bare, supplier-detail-layout, …). */
    margin-bottom: var(--spacing-xl);
    flex-shrink: 0;
}
.detail-body {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--spacing-3xl);
    background: var(--bg-card);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    animation: tabContentFadeIn 0.25s ease;
}
.detail-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xl) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: var(--border-width) solid var(--border-light);
}
/* A section title that follows other content (multi-section tabs) needs
   breathing room above it; the base rule keeps zero top margin so the
   first title still hugs the tab top. */
.detail-section-title:not(:first-child) {
    margin-top: var(--spacing-3xl);
}
/* Stacked grids inside one section = intentional row groups; match the
   grid's own cell gap between them. */
.detail-info-grid + .detail-info-grid {
    margin-top: var(--spacing-2xl);
}
.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--spacing-2xl);
}
.detail-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.detail-info-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    color: var(--text-muted);
    font-family: var(--font-body);
}
.detail-info-value {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-family: var(--font-body);
}
.tab-scroll {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
}
.tab-scroll--table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-tab-actions {
    display: flex;
    gap: var(--spacing-sm);
}
.detail-tab-actions--bottom {
    flex-shrink: 0;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--border-width) solid var(--border);
}

/* Table-flavored tabs: the embedded table-card already paints its own card
   chrome, so the tab panel painting a second card around it reads as a box
   inside a box. Drop the outer chrome and let the table-card be the tab
   surface. Info/audit/attachment tabs (no .tab-scroll--table) keep the card. */
.detail-body:has(> .tab-scroll--table) {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 768px) {
    .detail-body { padding: var(--spacing-xl); }
    .detail-info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .detail-info-grid { grid-template-columns: 1fr; }
}