/* Shared record listings. Container queries also support narrower work areas. */
.table-card:has(> .records-grid) {
    container-type: inline-size;
    padding: 16px;
    border: 1px solid var(--sipedy-border);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(29, 52, 77, .035);
}
.table-card > .records-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
    padding-block: 2px;
}
.table-card > .records-grid > .record-card {
    min-width: 0;
    gap: 16px;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(29, 52, 77, .025);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.table-card > .records-grid > .record-card:hover,
.table-card > .records-grid > .record-card:focus-within {
    border-color: #8dbed0;
    box-shadow: 0 3px 12px rgba(16, 118, 163, .08);
}
.records-grid .record-card-header {
    flex-direction: row;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
}
.records-grid .record-card-header > *,
.records-grid .record-card-title,
.records-grid .record-card-grid,
.records-grid .record-field { min-width: 0; }
.records-grid .record-card-title { flex: 1; gap: 5px; }
.records-grid .record-card-title h2,
.records-grid .record-card-title h3 { font-size: 1rem; font-weight: 650; line-height: 1.4; }
.records-grid .record-card-title,
.records-grid .record-card-subtitle,
.records-grid .record-field strong,
.records-grid .record-field div { overflow-wrap: anywhere; }
.records-grid .record-card-subtitle { font-size: .84rem; }
.records-grid .record-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding-top: 14px;
    border-top: 1px solid #edf1f4;
    align-content: center;
}
.records-grid .record-field { align-content: start; gap: 4px; }
.records-grid .record-field > span { font-size: .68rem; letter-spacing: .045em; }
.records-grid .record-field > strong { font-size: .88rem; font-weight: 550; }
.records-grid .record-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.records-grid .record-actions .button {
    min-height: 44px;
    padding: 9px 16px;
    border-radius: 10px;
    border-color: #d2e5ee;
    background: #f0f8fc;
    color: var(--brand-primary);
    font-weight: 600;
    margin: 0;
}
.records-grid .record-actions .button:hover { background: #e2f1f8; }
.records-grid .record-actions .button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}
.records-grid .status-pill { flex-shrink: 0; font-size: .68rem; font-weight: 650; letter-spacing: .035em; padding: 5px 9px; }
.records-grid .status-active { color: #176648; background: #e8f6ee; }
.records-grid .status-inactive { color: #626e7c; background: #edf0f4; }
.records-grid .record-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 11px;
    background: #eaf5fb;
    color: var(--brand-primary);
}
.record-avatar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.main-content > .pagination-content > .inline-form { gap: 12px; box-shadow: none; border: 1px solid var(--sipedy-border); }
.main-content > .pagination-content > .inline-form label { gap: 6px; font-size: .8rem; flex: 0 1 150px; min-width: 0; }
.main-content > .pagination-content > .inline-form label:has(input[name="search"]) { flex: 1 1 240px; }
.main-content > .pagination-content > .inline-form :is(input, select, .button) { min-height: 44px; }
@container (min-width: 640px) {
    .table-card > .records-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 960px) {
    .table-card > .records-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .table-card > .records-grid > .record-card {
        grid-template-columns: minmax(230px, 1.1fr) minmax(0, 1.7fr) auto;
        align-items: center;
        padding: 16px 18px;
        gap: 24px;
    }
    .records-grid .record-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        border-top: 0;
        border-left: 1px solid #edf1f4;
        padding: 0 0 0 24px;
    }
    .records-grid .record-actions { flex-direction: row; }
    .records-grid .record-actions .button,
    .records-grid .record-actions form { width: auto; }
}
@media (max-width: 639px) {
    .table-card:has(> .records-grid) { padding: 10px; border-radius: 14px; }
    .table-card > .records-grid > .record-card { padding: 14px; gap: 14px; }
    .records-grid .record-card-header { flex-wrap: wrap; }
    .records-grid .record-avatar { flex-basis: 34px; height: 34px; }
    .records-grid .record-card-title { flex-basis: 120px; }
    .main-content > .pagination-content > .inline-form label { flex: 1 1 120px; }
    .main-content > .pagination-content > .inline-form label:has(input[name="search"]) { flex-basis: 100%; }
    .main-content > .pagination-content > .inline-form > .button { flex: 1; }
    .table-card > .pagination .pagination-page,
    .table-card > .pagination .pagination-arrow { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .table-card > .records-grid > .record-card { transition: none; }
}

/* Pagination remains outside the scrolling results at every screen size. */
.app-shell:has(.main-content .pagination), .app-main:has(.main-content .pagination) { height: 100dvh; min-height: 0; overflow: hidden; }
.main-content:has(.pagination) { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; align-content: normal; }
.main-content:has(.pagination) > * { flex-shrink: 0; min-width: 0; }
.main-content > .table-card:has(> .pagination) { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
.table-card:has(> .pagination) > :is(.records-grid, .table-wrapper, .table-responsive, .record-empty) { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-inline-end: 10px; }
.table-card > .pagination, .portal-container > .pagination { flex: 0 0 auto; position: relative; background: #fff; z-index: 2; margin-top: 8px; padding-block: 10px max(10px, env(safe-area-inset-bottom)); }
.pagination :is(.pagination-arrow, .pagination-page) { min-height: 44px; }
.portal-shell:has(main > .pagination) { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.portal-shell:has(main > .pagination) > .portal-topbar-fixed { flex: 0 0 auto; }
.portal-shell > main:has(> .pagination) { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
.portal-shell main:has(> .pagination) > section { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
@media (max-height: 600px) {
 .main-content:has(.pagination) > .inline-form { max-height: 28dvh; overflow: auto; }
}


/* A single scroll area also handles tall filters and phone landscape screens. */
.main-content:has(> .pagination) > .pagination-content { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-inline-end: 8px; }
.main-content > .pagination { flex: 0 0 auto; position: relative; z-index: 2; margin: 0; background: #fff; border-radius: 12px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
.pagination-content > * + * { margin-top: 16px; }
.pagination-content > .table-card { overflow-x: auto; }

/* Center listing actions without changing other columns or page toolbars. */
.page-header > .page-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.record-actions, .records-grid .record-actions { justify-content: center; align-items: center; text-align: center; }
.record-actions > form { display: flex; justify-content: center; align-items: center; margin: 0; }
.table-card table td:last-child:has(> .button, > form),
.table-card table:has(tbody td:last-child > .button, tbody td:last-child > form) th:last-child { text-align: center; vertical-align: middle; }
.table-card table td:last-child > form { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; }


/* On phones, pagination follows the full list instead of reserving viewport space. */
@media (max-width: 767px), (max-width: 991px) and (max-height: 600px) {
 .app-shell:has(.main-content .pagination), .app-main:has(.main-content .pagination), .portal-shell:has(main > .pagination) { height: auto; min-height: 100dvh; overflow: visible; }
 .main-content:has(.pagination), .main-content > .table-card:has(> .pagination), .portal-shell > main:has(> .pagination), .main-content:has(> .pagination) > .pagination-content, .portal-shell main:has(> .pagination) > section { height: auto; max-height: none; flex: none; overflow: visible; }
 .main-content:has(> .pagination) > .pagination-content, .table-card:has(> .pagination) > :is(.records-grid, .table-wrapper, .table-responsive, .record-empty) { height: auto; max-height: none; flex: none; overflow: visible; padding-inline-end: 0; scrollbar-gutter: auto; }
 .main-content:has(.pagination) > .inline-form { max-height: none; overflow: visible; }
 .main-content .pagination { position: static; flex: none; }
}
@media (max-width: 767px), (max-width: 991px) and (max-height: 600px) {
 .topbar .topbar-actions { justify-content: flex-end; gap: 8px; }
 .topbar-actions > .topbar-help { order: -2; flex: 0 0 auto; width: auto; margin: 0; }
 .topbar-actions > [data-fluxos-ai] { order: -1; }
 .topbar-actions > .topbar-company, .topbar-actions > .topbar-account, .topbar-logout > button, .topbar-actions > [data-fluxos-ai] { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
 .topbar-support-text, .topbar-user-text { display: none; }
 .topbar-support { width: 44px; height: 44px; padding: 10px; justify-content: center; }
.topbar-logout > button::before { content: ""; display: block; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%204H4v16h6M14%208l4%204-4%204M8%2012h12%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.topbar-actions > .topbar-company::before { content: ""; display: block; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2021V3h11v18M15%209h5v12M7%207h1m3%200h1M7%2011h1m3%200h1M7%2015h1m3%200h1M2%2021h20%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.topbar-actions > .topbar-account::before { content: ""; display: block; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2022v-3a8%208%200%200%201%2016%200v3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.topbar-actions > [data-fluxos-ai]::before { content: ""; display: block; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m12%203%203%206%206%203-6%203-3%206-3-6-6-3%206-3Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
}

@media (max-width: 767px), (max-width: 991px) and (max-height: 600px) {
 .app-shell:has(.main-content .pagination) .topbar { position: static; }
}

/* Align page actions, filters and records consistently, including pages with an empty toast slot. */
:root body .main-content > .pagination-content { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
:root body .pagination-content > * { flex-shrink: 0; margin-block: 0; }
:root body .pagination-content > .toast-stack:empty { display: none; }
:root body .main-content .page-header { min-height: 44px; align-items: center; margin-block: 0; }
:root body .main-content .page-header > :is(.page-header-actions,.form-actions) { justify-content: flex-end; align-items: center; margin: 0; }
:root body .pagination-content > .inline-form { min-height: 74px; align-items: end; padding: 12px 16px; }
:root body .pagination-content > .table-card { padding: 16px; }
@media (max-width: 767px) {
 :root body .main-content .page-header { align-items: stretch; gap: 12px; }
 :root body .main-content .page-header > :is(.page-header-actions,.form-actions) { justify-content: flex-start; }
}

/* Keep mobile header actions on one compact icon row. */
@media (max-width: 767px), (max-width: 991px) and (max-height: 600px) {
 :root body .topbar { --mobile-action-size:clamp(32px, calc((100vw - 52px) / 8), 44px); }
 :root body .topbar .topbar-actions { display:flex; flex-wrap:nowrap; gap:4px !important; align-items:center; width:100%; justify-content:flex-end; }
 :root body .topbar .topbar-actions > :is(a,button,form,.topbar-notifications,.topbar-user) { width:var(--mobile-action-size); height:var(--mobile-action-size); min-width:0; min-height:0; max-width:var(--mobile-action-size); flex:0 0 var(--mobile-action-size); margin:0; padding:0; }
 :root body .topbar .topbar-actions > :is(a,button), :root body .topbar .topbar-actions > form > button { display:inline-flex; justify-content:center; align-items:center; width:var(--mobile-action-size); height:var(--mobile-action-size); min-width:0; min-height:0; padding:6px; font-size:0; }
 :root body .topbar .topbar-actions .topbar-bell, :root body .topbar .topbar-actions .topbar-support { width:var(--mobile-action-size); height:var(--mobile-action-size); min-height:0; padding:6px; }
 :root body .topbar .topbar-actions .topbar-avatar { width:min(36px,var(--mobile-action-size)); height:min(36px,var(--mobile-action-size)); flex-shrink:0; }
 :root body .topbar .topbar-actions > .topbar-user { justify-content:center; }
 :root body .topbar .topbar-actions > [role="alert"] { position:absolute; top:100%; right:12px; max-width:calc(100vw - 24px); background:#fff; z-index:3; }
 :root body .topbar .topbar-actions > .topbar-help > button::before { content:""; display:block; width:20px; height:20px; flex:0 0 20px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2013v-3a8%208%200%200%201%2016%200v7c0%203-3%204-6%204M4%2012H2v6h4v-6ZM20%2012h2v6h-4v-6Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M8%2017a4%204%200%200%201%208%200M11%2021h3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
}
@media (max-width: 767px), (max-width: 991px) and (max-height: 600px) {
 :root body .portal-topbar-actions { flex-wrap:nowrap; gap:4px !important; width:100%; }
 :root body .portal-topbar-actions > :is(a,form) { flex:0 1 44px; min-width:32px; }
 :root body .portal-topbar-actions .button { width:100%; min-width:32px; padding:6px; justify-content:center; }
 :root body .portal-topbar-inner { grid-template-columns:auto minmax(0,1fr); }
 :root body .portal-topbar-side { display:contents; }
 :root body .portal-strip-stats { grid-column:2; grid-row:1; justify-self:end; }
 :root body .portal-topbar-actions { grid-column:1 / -1; grid-row:2; justify-content:flex-end; }
 :root body .portal-topbar-actions > a[data-full-navigation] { font-size:0; }
:root body .portal-topbar-actions > a[data-full-navigation]::before { content:""; display:block; width:20px; height:20px; flex:0 0 20px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2022v-3a8%208%200%200%201%2016%200v3%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
}

@media (max-width: 767px), (max-width: 991px) and (max-height: 600px) {
 :root body .portal-topbar-inner:has(> .portal-topbar-copy) { grid-template-columns:auto minmax(0,1fr); }
 :root body .portal-topbar-copy { grid-column:1 / -1; grid-row:3; }
}

/* Shared search toolbar, independent of record layout or empty results. */
.main-content .pagination-content > form.inline-form,
.main-content > form.inline-form {
 display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
 padding:12px 16px; border:1px solid var(--sipedy-border); box-shadow:none;
}
.main-content :is(.pagination-content, .filter-toolbar) > form.inline-form label,
.main-content > form.inline-form label { flex:0 1 180px; min-width:0; gap:6px; font-size:.8rem; }
.main-content form.inline-form label:has(> input[name="search"]) { flex:1 1 260px; }
.main-content .pagination-content > form.inline-form :is(input,select,.button),
.main-content > form.inline-form :is(input,select,.button) { min-height:40px; padding:8px 12px; font-size:.85rem; border-radius:10px; }
@media(max-width:767px) {
 .main-content .pagination-content > form.inline-form label, .main-content > form.inline-form label { flex:1 1 150px; }
 .main-content form.inline-form label:has(> input[name="search"]) { flex-basis:100%; }
 .main-content .pagination-content > form.inline-form > .button, .main-content > form.inline-form > .button { flex:1 1 auto; }
}