/* Logic365 Data Grid -------------------------------------------------------
   One structural and behavioural surface for provider, platform and App
   grids. Concrete colours are supplied by the active platform/App theme. */
:root {
    --c365-grid-container-background: rgba(7, 19, 40, .66);
    --c365-grid-container-border: rgba(139, 171, 211, .24);
    --c365-grid-container-radius: 16px;
    --c365-grid-container-blur: 18px;
    --c365-grid-title-font-family: var(--c365-section-title-font-family, Inter, system-ui, sans-serif);
    --c365-grid-title-font-size: var(--c365-section-title-font-size, 1.35rem);
    --c365-grid-title-font-weight: var(--c365-section-title-font-weight, 700);
    --c365-grid-title-line-height: var(--c365-section-title-line-height, 1.2);
    --c365-grid-text-primary: #f4f7fb;
    --c365-grid-text-secondary: #a8b6ca;
    --c365-grid-header-background: rgba(77, 111, 164, .12);
    --c365-grid-header-text: #dce7f6;
    --c365-grid-row-background: transparent;
    --c365-grid-row-hover: rgba(91, 133, 194, .12);
    --c365-grid-row-selected: rgba(72, 128, 208, .22);
    --c365-grid-row-separator: rgba(137, 166, 205, .17);
    --c365-grid-control-background: rgba(5, 18, 39, .55);
    --c365-grid-control-border: rgba(139, 171, 211, .28);
    --c365-grid-focus: #55d7ef;
    --c365-grid-row-height: 52px;
}

.l365-app {
    --c365-grid-container-background: color-mix(in srgb, var(--c365-app-tile-background, #0b1d38) 74%, transparent);
    --c365-grid-container-border: var(--c365-app-tile-border, rgba(139, 171, 211, .24));
    --c365-grid-title-font-family: var(--l365-type-h2-font-family, Inter, system-ui, sans-serif);
    --c365-grid-title-font-size: var(--l365-type-h2-font-size, 1.35rem);
    --c365-grid-title-font-weight: var(--l365-type-h2-font-weight, 700);
    --c365-grid-title-line-height: var(--l365-type-h2-line-height, 1.2);
    --c365-grid-text-primary: var(--c365-tile-text-primary, var(--c365-app-tile-text, #f4f7fb));
    --c365-grid-text-secondary: var(--c365-tile-text-muted, #a8b6ca);
    --c365-grid-header-background: color-mix(in srgb, var(--c365-tile-surface-raised, #1b2d48) 64%, transparent);
    --c365-grid-header-text: var(--c365-tile-text-secondary, var(--c365-grid-text-primary));
    --c365-grid-row-hover: color-mix(in srgb, var(--c365-page-accent, #55d7ef) 11%, transparent);
    --c365-grid-row-selected: color-mix(in srgb, var(--c365-page-accent, #55d7ef) 20%, transparent);
    --c365-grid-row-separator: var(--c365-tile-border-soft, rgba(137, 166, 205, .17));
    --c365-grid-control-background: color-mix(in srgb, var(--c365-tile-surface-raised, #1b2d48) 68%, transparent);
    --c365-grid-control-border: var(--c365-tile-border-soft, rgba(139, 171, 211, .28));
    --c365-grid-focus: var(--c365-page-accent, #55d7ef);
}

.l365-grid {
    position: relative;
    min-width: 0;
    overflow: clip;
    color: var(--c365-grid-text-primary);
    border: 1px solid var(--c365-grid-container-border);
    border-radius: var(--c365-grid-container-radius);
    background: var(--c365-grid-container-background);
    -webkit-backdrop-filter: blur(var(--c365-grid-container-blur));
    backdrop-filter: blur(var(--c365-grid-container-blur));
    box-shadow: none;
    font-family: var(--l365-type-body-font-family, Inter, system-ui, sans-serif);
}

.l365-grid__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.3rem .85rem;
    background: transparent;
}

.l365-grid__title {
    margin: 0;
    color: var(--c365-grid-text-primary);
    font-family: var(--c365-grid-title-font-family);
    font-size: var(--c365-grid-title-font-size);
    font-weight: var(--c365-grid-title-font-weight);
    line-height: var(--c365-grid-title-line-height);
    letter-spacing: -.02em;
}

.l365-grid__description {
    margin: .3rem 0 0;
    color: var(--c365-grid-text-secondary);
}

.l365-grid__header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.l365-grid__control-button--primary {
    color: #07131b;
    border-color: color-mix(in srgb, var(--c365-grid-focus) 72%, transparent);
    background: var(--c365-grid-focus);
}

.l365-grid__control-button--primary:hover {
    background: color-mix(in srgb, var(--c365-grid-focus) 84%, white 16%);
}

.l365-grid__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.15rem 1rem;
}

.l365-grid__search {
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) auto;
    align-items: center;
    gap: .45rem;
    flex: 1 1 15rem;
    min-width: min(100%, 14rem);
    min-height: 2.65rem;
    padding: 0 .7rem;
    color: var(--c365-grid-text-secondary);
    border: 1px solid var(--c365-grid-control-border);
    border-radius: .65rem;
    background: var(--c365-grid-control-background);
}

.l365-grid__search input,
.l365-grid__filter input,
.l365-grid__filter select,
.l365-grid__page-size select {
    min-width: 0;
    color: var(--c365-grid-text-primary);
    border: 1px solid var(--c365-grid-control-border);
    background: var(--c365-grid-control-background);
    font: inherit;
}

.l365-grid__search input {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.l365-grid__search a { color: var(--c365-grid-text-secondary); text-decoration: none; }
.l365-grid__filter { flex: 0 1 auto; }
.l365-grid__filter input,
.l365-grid__filter select,
.l365-grid__page-size select { min-height: 2.65rem; padding: 0 .7rem; border-radius: .65rem; }

.l365-grid__control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.65rem;
    padding: 0 .8rem;
    color: var(--c365-grid-text-primary);
    border: 1px solid var(--c365-grid-control-border);
    border-radius: .65rem;
    background: var(--c365-grid-control-background);
    font: 600 .86rem/1 Inter, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.l365-grid__control-button:hover { background: var(--c365-grid-row-hover); }
.l365-grid__control-button--quiet { color: var(--c365-grid-text-secondary); }
.l365-grid__bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: 0 1.15rem .8rem; color: var(--c365-grid-text-secondary); }
.l365-grid__bulk-actions[hidden] { display: none; }
.l365-grid__bulk-actions .l365-grid__control-button:disabled { cursor: not-allowed; opacity: .45; }
.l365-grid__columns { position: relative; }
.l365-grid__columns > summary { list-style: none; }
.l365-grid__columns > summary::-webkit-details-marker { display: none; }
.l365-grid__columns > div {
    position: absolute;
    z-index: 20;
    top: calc(100% + .35rem);
    right: 0;
    display: grid;
    gap: .35rem;
    min-width: 14rem;
    padding: .65rem;
    border: 1px solid var(--c365-grid-control-border);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--c365-grid-container-background) 94%, #07131b 6%);
    backdrop-filter: blur(18px);
}
.l365-grid__column-option { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .45rem; }
.l365-grid__column-option button { color: inherit; border: 0; background: transparent; }

.l365-grid__viewport { min-width: 0; overflow: auto; }
.l365-grid__table { width: 100%; min-width: 42rem; margin: 0; border-collapse: collapse; table-layout: fixed; color: inherit; }
.l365-grid__table th,
.l365-grid__table td {
    height: var(--c365-grid-row-height);
    padding: .65rem .85rem;
    border: 0;
    border-bottom: 1px solid var(--c365-grid-row-separator);
    text-align: left;
    vertical-align: middle;
}

.l365-grid__table thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    height: 3rem;
    color: var(--c365-grid-header-text);
    background: var(--c365-grid-header-background);
    font: 600 .78rem/1.2 Inter, system-ui, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
}

.l365-grid__column-header { position: relative; }
.l365-grid__sort { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.l365-grid__sort-icon { color: var(--c365-grid-text-secondary); font-size: .78rem; }
.l365-grid__resize-handle {
    position: absolute;
    top: 20%;
    right: -4px;
    width: 8px;
    height: 60%;
    cursor: col-resize;
    touch-action: none;
}
.l365-grid__resize-handle::after { position: absolute; left: 3px; width: 1px; height: 100%; background: transparent; content: ""; }
.l365-grid__resize-handle:hover::after { background: var(--c365-grid-focus); }

.l365-grid__row { background: var(--c365-grid-row-background); transition: background-color 120ms ease; }
.l365-grid__row:hover,
.l365-grid__row:focus-within { background: var(--c365-grid-row-hover); }
.l365-grid__row--selected,
.l365-grid__row[aria-selected="true"] { background: var(--c365-grid-row-selected); }
.l365-grid__row--disabled { opacity: .52; }
.l365-grid__cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l365-grid__cell-primary { display: block; overflow: hidden; text-overflow: ellipsis; }
.l365-grid__cell-secondary { display: block; margin-top: .16rem; overflow: hidden; color: var(--c365-grid-text-secondary); font-size: .8em; text-overflow: ellipsis; }
.l365-grid__cell a { color: inherit; font-weight: 650; text-decoration: none; }
.l365-grid__cell a:hover { color: var(--c365-grid-focus); }
.l365-grid__column-header--center,
.l365-grid__cell--center { text-align: center !important; }
.l365-grid__column-header--end,
.l365-grid__cell--end { text-align: right !important; font-variant-numeric: tabular-nums; }
.l365-grid__selection { width: 3rem; text-align: center !important; }

.l365-grid__state { display: grid; gap: .55rem; place-items: center; min-height: 9rem; padding: 1.25rem; color: var(--c365-grid-text-secondary); text-align: center; }
.l365-grid__state--loading { grid-template-columns: 1fr; }
.l365-grid__state--loading > span:not(.visually-hidden) { width: calc(100% - 2rem); height: 1.8rem; border-radius: .45rem; background: linear-gradient(90deg, transparent, var(--c365-grid-row-hover), transparent); background-size: 200% 100%; animation: l365-grid-skeleton 1.4s linear infinite; }
.l365-grid__state--error strong { color: var(--c365-grid-text-primary); }
.l365-grid__empty a { color: var(--c365-grid-focus); }

.l365-grid__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    min-height: 4rem;
    padding: .7rem 1.15rem;
    color: var(--c365-grid-text-secondary);
    border-top: 1px solid var(--c365-grid-row-separator);
    font-size: .82rem;
}
.l365-grid__pagination > span { margin-right: auto; }
.l365-grid__page-size { display: flex; align-items: center; gap: .4rem; }
.l365-grid__page-size select { min-height: 2.25rem; }
.l365-grid__page-links { display: flex; align-items: center; gap: .3rem; }
.l365-grid__page-links a,
.l365-grid__page-links button,
.l365-grid__page-links span { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .35rem; border: 1px solid transparent; border-radius: .5rem; color: inherit; text-decoration: none; }
.l365-grid__page-links button { background: transparent; }
.l365-grid__page-links :is(a, button):hover { border-color: var(--c365-grid-control-border); }
.l365-grid__page-links :is(a, button)[aria-current="page"] { color: var(--c365-grid-text-primary); border-color: var(--c365-grid-focus); background: var(--c365-grid-row-selected); }
.l365-grid__page-links a[aria-disabled="true"] { opacity: .38; pointer-events: none; }

.l365-grid__cards { display: grid; gap: .7rem; padding: .8rem; }
.l365-grid__cards[hidden] { display: none; }
.l365-grid-card { display: grid; gap: .55rem; padding: .8rem; border: 1px solid var(--c365-grid-row-separator); border-radius: .75rem; background: var(--c365-grid-header-background); }
.l365-grid-card[aria-selected="true"] { background: var(--c365-grid-row-selected); }
.l365-grid-card__title { margin: 0; color: var(--c365-grid-text-primary); font: 700 1rem/1.3 var(--c365-grid-title-font-family); }
.l365-grid-card__subtitle { margin: 0; color: var(--c365-grid-text-secondary); }
.l365-grid-card__fields { display: grid; grid-template-columns: minmax(6rem, .8fr) minmax(0, 1.2fr); gap: .35rem .65rem; margin: 0; }
.l365-grid-card__fields dt { color: var(--c365-grid-text-secondary); font-size: .75rem; }
.l365-grid-card__fields dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.l365-grid :is(a, button, input, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--c365-grid-focus);
    outline-offset: 2px;
}

@keyframes l365-grid-skeleton { to { background-position: -200% 0; } }

@media (max-width: 700px) {
    .l365-grid__header { flex-direction: column; padding: 1rem .85rem .6rem; }
    .l365-grid__header-actions { width: 100%; justify-content: flex-start; }
    .l365-grid__toolbar { align-items: stretch; padding: .55rem .75rem .8rem; }
    .l365-grid__search { flex-basis: 100%; }
    .l365-grid__filter { flex: 1 1 8rem; }
    .l365-grid__filter input,
    .l365-grid__filter select { width: 100%; }
    .l365-grid__pagination { align-items: flex-start; }
    .l365-grid__pagination > span { flex-basis: 100%; }
    .l365-grid__page-links { max-width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .l365-grid__row { transition: none; }
    .l365-grid__state--loading > span:not(.visually-hidden) { animation: none; }
}

@media (forced-colors: active) {
    .l365-grid,
    .l365-grid__control-button,
    .l365-grid__search,
    .l365-grid__filter input,
    .l365-grid__filter select { border: 1px solid CanvasText; }
    .l365-grid__row--selected { outline: 2px solid Highlight; outline-offset: -2px; }
}