/*
 * FastPanel list-layout r12.
 * Opt-in record presentation only. Load after the historical responsive sheets.
 * The viewport shrinks, not its records: the same fields, order, type size and
 * action targets are used on desktop and mobile. Forms, navigation, KPI tiles,
 * charts and conversations outside these hosts retain their existing styles.
 */
#fastpanel-app .fp-list-host {
    display: block !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    inline-size: 100% !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}
#fastpanel-app .fp-record-list {
    display: block !important;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
}
#fastpanel-app .fp-list-scroll,
#fastpanel-app .fp-table-scroll {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    scroll-padding-inline: 8px;
}
#fastpanel-app .fp-list-scroll:focus-visible,
#fastpanel-app .fp-table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
#fastpanel-app .fp-list-track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    inline-size: max-content;
    min-inline-size: 100%;
    max-inline-size: none;
    padding: 2px 0;
}
#fastpanel-app .fp-list-hint {
    display: block;
    margin: 4px 2px 8px;
    padding: 0;
    min-height: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
}
#fastpanel-app .fp-list-track > .fp-record-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    inline-size: 100% !important;
    min-inline-size: 640px !important;
    max-inline-size: none !important;
    min-block-size: 72px !important;
    block-size: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    overflow: visible !important;
    text-align: start !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    transform: none !important;
    position: relative;
}
#fastpanel-app .fp-record-row > * {
    flex: 0 0 auto;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
#fastpanel-app .fp-record-row :is(h3,h4,strong,b,small,p,em,time),
#fastpanel-app .fp-record-row > span {
    overflow-wrap: normal !important;
    word-break: normal !important;
}
#fastpanel-app .fp-record-row :is(h3,h4) {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
#fastpanel-app .fp-record-row :is(strong,b) { font-size: 13px !important; line-height: 1.5 !important; }
#fastpanel-app .fp-record-row :is(small,time) { font-size: 12px !important; line-height: 1.5 !important; }
#fastpanel-app .fp-record-row :is(p,.deadline,.notification-preview) {
    margin: 0 !important;
    min-block-size: 0 !important;
    font-size: 13px !important;
    white-space: nowrap;
}
#fastpanel-app .fp-record-row .badge {
    position: static !important;
    flex: 0 0 auto !important;
    inline-size: max-content !important;
    min-inline-size: 0 !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-row :is(.card-heading,.compact-head,.server-head,.session-device,.agent-identity,.wallet-card-head,.wallet-card-meta) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#fastpanel-app .fp-record-row :is(.card-heading,.compact-head,.server-head) > div { min-inline-size: 160px; }
#fastpanel-app .fp-record-row :is(.card-heading,.compact-head,.server-head,.session-device) :is(h3,small,strong) { white-space: nowrap !important; }
#fastpanel-app .fp-record-row :is(.compact-facts,.catalog-facts,.server-facts,.session-device-facts,.rank-metric-grid,.friendly-facts) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#fastpanel-app .fp-record-row :is(.compact-facts,.catalog-facts,.server-facts,.session-device-facts,.rank-metric-grid,.friendly-facts) > span {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    inline-size: auto !important;
    min-inline-size: 105px !important;
    max-inline-size: none !important;
    min-block-size: 40px !important;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    border: 0 !important;
    border-inline-start: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-row :is(.compact-facts,.catalog-facts,.server-facts,.session-device-facts,.rank-metric-grid,.friendly-facts) b {
    color: var(--text) !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-row :is(.button-row,.finance-link-actions,.target-chips) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    inline-size: auto !important;
    min-inline-size: max-content !important;
    max-inline-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#fastpanel-app .fp-record-row :is(.button-row,.finance-link-actions) > :is(button,a),
#fastpanel-app .fp-record-row > button:not(:has(> span)),
#fastpanel-app .fp-record-row > button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    inline-size: auto !important;
    min-inline-size: 40px !important;
    max-inline-size: none !important;
    min-block-size: 40px !important;
    block-size: auto !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-row .action-topic-icon {
    position: static !important;
    inline-size: 16px !important;
    block-size: 16px !important;
    flex: 0 0 16px !important;
}
/* Primary row and explicit supplementary detail are distinct. Opening detail
   never changes the placement of the primary fields at a mobile breakpoint. */
#fastpanel-app .fp-list-track > .fp-record-row:is(.expandable-user-row,.expandable-order-row,.receivable-row,.customer-health-shell),
#fastpanel-app [data-list-kind="dashboard-accordion"] .fp-list-track > .fp-record-row,
#fastpanel-app .compact-login-session-grid .fp-list-track > .fp-record-row {
    display: block !important;
}
#fastpanel-app .fp-record-row :is(.fp-record-primary,.fp-user-summary,.expandable-order-summary,.receivable-summary,.dashboard-row-summary,.login-session-summary,.directory-row-main,.agent-open-profile,.customer-health-topline,.ranking-head) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    max-inline-size: none !important;
    min-block-size: 48px !important;
    block-size: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    text-align: start !important;
    font-size: 13px !important;
}
#fastpanel-app .fp-record-row :is(.expandable-order-summary,.receivable-summary,.dashboard-row-summary,.login-session-summary) {
    inline-size: 100% !important;
}
#fastpanel-app .fp-record-row :is(.expandable-order-summary,.receivable-summary,.dashboard-row-summary,.login-session-summary) > * {
    position: static !important;
    grid-area: auto !important;
    flex: 0 0 auto !important;
    min-inline-size: 0;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-row :is(.expandable-order-summary,.receivable-summary,.dashboard-row-summary,.login-session-summary) > span {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-inline-size: 150px !important;
}
#fastpanel-app .fp-record-row :is(.expandable-user-detail,.expandable-order-detail,.receivable-detail,.login-session-detail,.dashboard-row-detail,.health-detail-card,.rank-breakdown) {
    margin: 10px 0 0 !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface-2) !important;
}
#fastpanel-app .fp-record-row :is(.user-facts,.health-metric-list,.health-metric-grid,.dashboard-row-detail) {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 14px !important;
}
#fastpanel-app .fp-record-row :is(.user-facts,.health-metric-list,.health-metric-grid) > span { flex: 0 0 auto; min-inline-size: 130px; }
#fastpanel-app .fp-record-cell {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: 0 0 auto !important;
    gap: 3px !important;
    min-inline-size: 104px !important;
    min-block-size: 42px !important;
    color: var(--text) !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-cell > small { color: var(--muted) !important; font-weight: 400 !important; }
#fastpanel-app .fp-record-identity { min-inline-size: 160px !important; }
#fastpanel-app .fp-record-product { min-inline-size: 180px !important; }
#fastpanel-app .fp-record-product-name.is-active { color: var(--success) !important; }
#fastpanel-app .fp-record-product-name.is-inactive { color: var(--muted) !important; }
#fastpanel-app .fp-row-toggle { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 1px solid var(--border); border-radius: 7px; }
#fastpanel-app .fp-record-note { margin: 0; padding: 0 10px; color: var(--warning); border-inline-start: 2px solid var(--warning); }
#fastpanel-app .fp-volume-cell { flex: 0 0 200px; inline-size: 200px; display: grid; gap: 7px; font-size: 12px; }
#fastpanel-app .fp-volume-track { position: relative; inline-size: 100%; block-size: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
#fastpanel-app .fp-volume-track > i { display: block; block-size: 100%; min-inline-size: 0; max-inline-size: 100%; border-radius: inherit; background: var(--accent); }
#fastpanel-app .is-unlimited > .fp-volume-track > i { background: var(--success); }
#fastpanel-app .is-unknown > .fp-volume-track > i { background: var(--muted); }
/* Dashboard quota bars deliberately live outside the horizontal viewport. */
#fastpanel-app .expiring-user-list { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; min-inline-size: 0; }
#fastpanel-app .fp-expiry-record { min-inline-size: 0; max-inline-size: 100%; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
#fastpanel-app .fp-expiry-record .fp-expiry-row { border: 0 !important; min-block-size: 66px !important; }
#fastpanel-app .fp-expiry-record .fp-list-hint { padding-inline: 12px; margin-block: 2px 5px; }
#fastpanel-app .fp-volume-status { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; padding: 8px 12px 11px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
#fastpanel-app .fp-volume-status > span { overflow-wrap: anywhere; }
#fastpanel-app .fp-expiry-days { color: var(--warning); }
/* Compact visual identity rather than full-height product posters. */
#fastpanel-app .fp-record-row .catalog-art {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 100px !important;
    inline-size: 100px !important;
    min-inline-size: 100px !important;
    block-size: 60px !important;
    min-block-size: 60px !important;
    border-radius: 7px !important;
    gap: 3px !important;
    font-size: 17px !important;
    overflow: hidden !important;
}
#fastpanel-app .fp-record-row .catalog-art b { position: static !important; padding: 0 5px !important; font-size: 11px !important; }
#fastpanel-app .fp-record-row .catalog-art img { inline-size: 100%; block-size: 100%; object-fit: contain; }
#fastpanel-app .fp-record-row :is(.catalog-body,.agent-rank-strip,.gig-hero-facts) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#fastpanel-app .fp-record-row .catalog-body > p { color: var(--muted); }
#fastpanel-app .fp-record-row .agent-rank-strip > div { inline-size: 70px; }
#fastpanel-app .fp-record-row .row-context-menu {
    position: static !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    inline-size: max-content !important;
    max-inline-size: none !important;
    min-block-size: 40px !important;
    margin: 0 !important;
    padding: 5px !important;
    box-shadow: none !important;
}
#fastpanel-app .fp-record-row .row-context-menu button { white-space: nowrap; min-block-size: 40px; font-size: 13px; }
#fastpanel-app .fp-record-row .meter-row { inline-size: 175px !important; min-inline-size: 175px !important; margin: 0 !important; }
#fastpanel-app .fp-record-row .health-progress { inline-size: 140px; flex: 0 0 140px; }
#fastpanel-app .fp-record-row .health-identity-card,
#fastpanel-app .fp-record-row .health-score-card { display: flex !important; flex-flow: row nowrap !important; gap: 14px !important; align-items: center !important; min-block-size: 48px !important; inline-size: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
#fastpanel-app .fp-record-row .health-identity-card > span { display: flex !important; flex-flow: row nowrap !important; gap: 14px !important; align-items: center !important; }
#fastpanel-app .fp-record-row .user-resource-drawer-body { display: contents !important; }
#fastpanel-app .fp-record-row .fp-ibs-user-summary { display: flex; gap: 10px; align-items: center; }
#fastpanel-app .fp-record-row .user-traffic-inline { inline-size: 190px !important; min-inline-size: 190px !important; }
#fastpanel-app .fp-record-row .wallet-colored-balance { font-size: 18px !important; margin: 0 !important; min-block-size: 0 !important; padding: 7px 14px !important; }
#fastpanel-app .fp-record-row.wallet-card-v2 { min-block-size: 76px !important; }
#fastpanel-app .fp-record-row :is(.ticket-card-subject,.ticket-card-user,.ticket-card-state,.ticket-card-time) {
    position: static !important;
    flex: 0 0 auto !important;
    inline-size: auto !important;
    min-inline-size: 130px !important;
    max-inline-size: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-record-row .ticket-card-subject { min-inline-size: 250px !important; }
#fastpanel-app .fp-record-row .ticket-unread-indicator { position: static !important; flex: 0 0 8px !important; }
#fastpanel-app .fp-record-row.ticket-list-card.active { border-color: var(--accent) !important; background: color-mix(in srgb,var(--accent) 9%,var(--surface)) !important; }
#fastpanel-app .fp-record-row.developer-user-option { min-block-size: 56px !important; }
#fastpanel-app .fp-record-row .developer-user-state { position: static !important; }
#fastpanel-app .fp-table-scroll > table { display: table !important; inline-size: max-content !important; min-inline-size: 100% !important; max-inline-size: none !important; table-layout: auto !important; }
#fastpanel-app .fp-table-scroll :is(th,td) { min-inline-size: 110px; padding: 9px 12px !important; font-size: 13px !important; white-space: nowrap !important; }
/* Pagers are siblings of the viewport. Their controls may wrap as a toolbar;
   record fields above them never reflow or shrink at a mobile breakpoint. */
#fastpanel-app .fp-pagination-unified {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px 16px !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    margin: 10px 0 0 !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--border);
    overflow: visible !important;
    position: relative;
    font-size: 12px !important;
}
#fastpanel-app .fp-pagination-unified :is(.fp-pagination-summary,.fp-pagination-navigation,.fp-page-size,.fp-page-jump) {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    inline-size: auto !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}
#fastpanel-app .fp-pagination-unified .fp-pagination-summary { flex-wrap: wrap !important; gap: 8px 14px !important; }
#fastpanel-app .fp-pagination-unified .fp-page-size { gap: 8px !important; }
#fastpanel-app .fp-pagination-unified :is(button,input,select) {
    inline-size: auto !important;
    min-inline-size: 38px !important;
    min-block-size: 40px !important;
    block-size: 40px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
#fastpanel-app .fp-pagination-unified .fp-page-jump input {
    inline-size: 54px !important;
    min-inline-size: 48px !important;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
#fastpanel-app .fp-page-jump input::-webkit-inner-spin-button,
#fastpanel-app .fp-page-jump input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#fastpanel-app .fp-pagination-unified .fp-unified-select { min-inline-size: 76px !important; inline-size: 76px !important; max-inline-size: 76px !important; z-index: 10; }
#fastpanel-app .fp-pagination-unified .fp-unified-select.open { z-index: 100; }
#fastpanel-app .fp-pagination-unified .fp-unified-select-list {
    inset-block-start: auto !important;
    inset-block-end: calc(100% + 5px) !important;
    min-inline-size: 100% !important;
    inline-size: 110px !important;
    max-inline-size: 160px !important;
    max-block-size: 260px !important;
    z-index: 101 !important;
}
#fastpanel-app .fp-pagination-unified .fp-unified-select-list button { inline-size: 100% !important; }
#fastpanel-app .fp-pagination-unified .action-topic-icon { display: none !important; }
@media (max-width: 480px) {
    #fastpanel-app .fp-pagination-unified { gap: 8px !important; }
    #fastpanel-app .fp-pagination-unified .fp-pagination-navigation { flex-wrap: wrap !important; gap: 4px !important; }
    #fastpanel-app .fp-pagination-unified .fp-page-jump { gap: 4px !important; }
    #fastpanel-app .fp-pagination-unified .fp-page-jump > span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #fastpanel-app .fp-record-list *, #fastpanel-app .fp-expiry-record * { scroll-behavior: auto !important; transition: none !important; }
}
/* Grid items must not size the viewport to their max-content records. */
#fastpanel-app .server-workspace { grid-template-columns: minmax(0,1fr); min-inline-size: 0; }
#fastpanel-app .server-workspace > section { min-inline-size: 0; max-inline-size: 100%; }
#fastpanel-app .fp-record-row * { font-size: 13px; line-height: 1.5; }
#fastpanel-app .fp-record-row .server-transport-controls { display: flex !important; flex-flow: row nowrap !important; gap: 8px !important; }
#fastpanel-app .fp-record-row .transport-enable-control { flex: 0 0 auto !important; white-space: nowrap !important; }
#fastpanel-app .fp-pagination-unified .fp-unified-select-trigger::after { content: "\2304"; transform: none; background: transparent; }
#fastpanel-app .fp-pagination-unified .fp-unified-select.open > .fp-unified-select-trigger::after { transform: rotate(180deg); }
/* Neutralize remaining legacy handset-only type, spacing and field widths. */
#fastpanel-app .fp-record-row * { font-size: 13px !important; line-height: 1.5 !important; }
#fastpanel-app .fp-record-row .catalog-art { margin: 0 !important; }
#fastpanel-app .fp-record-row .server-alert-strip { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 12px !important; padding: 0 !important; }
#fastpanel-app .fp-record-row .expandable-order-summary > span {
    inline-size: max-content !important; width: max-content !important;
    min-inline-size: 150px !important; max-inline-size: none !important;
    padding: 6px 10px !important; min-block-size: 48px !important;
}
#fastpanel-app .fp-record-row .expandable-order-summary > :is(em,i) { align-self: center !important; }
#fastpanel-app .fp-record-row .expandable-order-summary > em { min-block-size: 28px !important; block-size: 28px !important; padding: 3px 8px !important; }
#fastpanel-app .fp-record-row :is(.ticket-card-subject,.ticket-card-user,.ticket-card-state,.ticket-card-time) { min-block-size: 0 !important; block-size: auto !important; padding: 0 !important; margin: 0 !important; }
#fastpanel-app .fp-list-host { block-size: auto !important; max-block-size: none !important; overflow: visible !important; }
#fastpanel-app .fp-pagination-unified .fp-unified-select-list {
    inset-block-start: var(--fp-page-menu-top,calc(100% + 5px)) !important;
    inset-block-end: var(--fp-page-menu-bottom,auto) !important;
    max-block-size: var(--fp-page-menu-height,260px) !important;
}
#fastpanel-app .fp-record-row :is(.expandable-order-summary,.receivable-summary,.dashboard-row-summary,.login-session-summary) > span {
    inline-size: max-content !important; width: max-content !important;
    max-inline-size: none !important; padding: 6px 10px !important;
}
/* Keep the list toolbar and its save bar inside the page, not the row track. */
#fastpanel-app .active-session-toolbar { flex-wrap: wrap !important; min-inline-size: 0 !important; }
#fastpanel-app .active-session-toolbar > button { flex: 0 0 auto !important; inline-size: auto !important; white-space: nowrap !important; }
#fastpanel-app .active-session-toolbar > input { flex: 1 1 180px !important; min-inline-size: 0 !important; max-inline-size: 100% !important; }
#fastpanel-app .active-session-toolbar > .fp-unified-select { flex: 0 1 160px !important; min-inline-size: 0 !important; max-inline-size: 100% !important; }
#fastpanel-app .panel-endpoint-workspace > .editor-save-bar { margin-inline: 0 !important; inline-size: 100% !important; max-inline-size: 100% !important; }