[data-xn1-workspace-page="true"] {
    min-height: 100vh;
    background:
        linear-gradient(
            145deg,
            #fff 0%,
            color-mix(in srgb, var(--xn1-brand-background, #f8fafc) 88%, #fff 12%) 42%,
            color-mix(in srgb, var(--xn1-brand-primary, #111827) 14%, #fff 86%) 100%
        );
}

[data-xn1-workspace-header="true"].ui.basic.segment {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--xn1-brand-surface, #fff) 96%, var(--xn1-brand-primary, #111827) 4%) 0%,
            color-mix(in srgb, var(--xn1-brand-surface, #fff) 88%, var(--xn1-brand-primary, #111827) 12%) 100%
        ) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--xn1-brand-primary, #111827) 12%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--xn1-brand-primary, #111827) 8%, transparent);
}

[data-xn1-shell-sidebar="true"] {
    background: var(--xn1-brand-surface, #fff) !important;
    border-right: 1px solid color-mix(in srgb, var(--xn1-brand-primary, #111827) 14%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--xn1-brand-primary, #111827) 12%, transparent);
}

[data-xn1-shell-sidebar="true"].ui.menu,
[data-xn1-shell-sidebar="true"] .ui.menu {
    background: transparent;
}

[data-xn1-shell-sidebar="true"].ui.menu .item:hover,
[data-xn1-shell-sidebar="true"] .ui.menu .item:hover {
    background: color-mix(in srgb, var(--xn1-brand-background, #f8fafc) 72%, var(--xn1-brand-surface, #fff) 28%);
}

[data-xn1-shell-sidebar="true"].ui.menu .active.item,
[data-xn1-shell-sidebar="true"] .ui.menu .active.item {
    color: var(--xn1-brand-primary, #111827) !important;
    background: color-mix(in srgb, var(--xn1-brand-primary, #111827) 10%, var(--xn1-brand-surface, #fff) 90%) !important;
    box-shadow: inset 3px 0 0 var(--xn1-brand-accent, #f59e0b);
}

[data-xn1-shell-sidebar="true"].ui.menu .active.item > .icon,
[data-xn1-shell-sidebar="true"] .ui.menu .active.item > .icon {
    color: var(--xn1-brand-primary, #111827) !important;
}

.xn1-platform-navigation {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 100%;
    padding: 0.75rem 0.65rem 0.25rem;
}

.xn1-platform-navigation-header {
    padding: 0 0 0.65rem;
}

.xn1-platform-navigation-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--xn1-brand-primary, #111827) 10%, transparent);
}

.xn1-platform-navigation-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    color: #fff;
    background: var(--xn1-brand-primary, #111827);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--xn1-brand-primary, #111827) 22%, transparent);
}

.xn1-platform-navigation-brand-copy {
    min-width: 0;
}

.xn1-platform-navigation-brand-title {
    overflow: hidden;
    color: color-mix(in srgb, var(--xn1-brand-primary, #111827) 84%, #000 16%);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xn1-platform-navigation-brand-subtitle {
    overflow: hidden;
    margin-top: 0.15rem;
    color: rgba(0, 0, 0, 0.52);
    font-size: 0.78rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xn1-platform-navigation-groups {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[data-xn1-shell-sidebar="true"].ui.menu .xn1-platform-navigation-group.item,
.xn1-platform-navigation-group.item,
[data-xn1-shell-sidebar="true"].ui.menu .xn1-platform-navigation-account.item,
.xn1-platform-navigation-account.item {
    padding: 0.35rem 0 !important;
}

.xn1-platform-navigation-group-header {
    padding: 0.35rem 0.65rem 0.25rem !important;
    color: rgba(0, 0, 0, 0.48) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
    text-transform: uppercase;
}

.xn1-platform-navigation-group-menu.menu {
    display: flex !important;
    flex-direction: column;
    gap: 0.15rem;
}

[data-xn1-shell-sidebar="true"].ui.menu .xn1-platform-navigation-item.item,
.xn1-platform-navigation-item.item {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.45rem;
    margin: 0 0.15rem !important;
    padding: 0.65rem 0.75rem !important;
    border-radius: 8px !important;
    color: rgba(0, 0, 0, 0.76) !important;
    font-weight: 600;
}

.xn1-platform-navigation-item.item > .icon {
    flex: 0 0 1.15rem;
    margin: 0 !important;
    color: rgba(0, 0, 0, 0.58) !important;
    text-align: center;
}

.xn1-platform-navigation-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-xn1-shell-sidebar="true"].ui.menu .xn1-platform-navigation-item.item:hover,
.xn1-platform-navigation-item.item:hover {
    color: var(--xn1-brand-primary, #111827) !important;
    background: color-mix(in srgb, var(--xn1-brand-primary, #111827) 7%, var(--xn1-brand-surface, #fff) 93%) !important;
}

[data-xn1-shell-sidebar="true"].ui.menu .xn1-platform-navigation-item.active.item,
.xn1-platform-navigation-item.active.item {
    color: var(--xn1-brand-primary, #111827) !important;
    background: color-mix(in srgb, var(--xn1-brand-primary, #111827) 10%, var(--xn1-brand-surface, #fff) 90%) !important;
    box-shadow: inset 3px 0 0 var(--xn1-brand-accent, #f59e0b), 0 1px 0 color-mix(in srgb, var(--xn1-brand-primary, #111827) 6%, transparent) !important;
}

.xn1-platform-navigation-item.active.item > .icon {
    color: var(--xn1-brand-primary, #111827) !important;
}

.xn1-platform-navigation-item.disabled.item {
    opacity: 0.42 !important;
}

.xn1-platform-navigation-account {
    margin-top: 0.35rem !important;
    border-top: 1px solid color-mix(in srgb, var(--xn1-brand-primary, #111827) 10%, transparent) !important;
}

.xn1-platform-navigation-account-user {
    cursor: default !important;
}

.xn1-platform-navigation-footer {
    margin-top: auto;
}

.ui.bottom.sidebar.visible > .ui.labeled.icon.menu {
    width: 100%;
}

.ui.bottom.sidebar.visible > .ui.labeled.icon.menu > .right.menu {
    margin-left: auto !important;
}

.ui.bottom.sidebar.visible .xn1-workspace-user-footer-menu-host.item {
    align-items: center;
    display: flex !important;
    justify-content: center;
    padding: 0.35rem 0.75rem !important;
}

.ui.bottom.sidebar.visible .xn1-workspace-user-footer-menu-button.ui.circular.icon.button {
    border-color: var(--xn1-brand-accent, #fbbf24) !important;
    color: var(--xn1-brand-accent, #fbbf24) !important;
    height: 2.65rem;
    margin: 0;
    width: 2.65rem;
}

.ui.bottom.sidebar.visible .xn1-workspace-user-footer-menu-button.ui.dropdown > .menu {
    left: auto !important;
    right: 0 !important;
}

.xn1-workspace-list-toolbar.ui {
    top: var(--xn1-workspace-list-toolbar-offset, 56px);
    z-index: 45;
}

.xn1-workspace-list-toolbar.ui.segment {
    background: var(--xn1-brand-surface, #fff) !important;
    border-color: color-mix(in srgb, var(--xn1-brand-primary, #111827) 10%, rgba(34, 36, 38, 0.15)) !important;
    box-shadow: 0 1px 0 rgba(34, 36, 38, 0.06);
}

.xn1-workspace-list-toolbar.ui.sticky {
    position: sticky;
}

.xn1-workspace-list-toolbar.ui.sticky.fixed {
    background: var(--xn1-brand-surface, #fff) !important;
    z-index: 45;
}

.xn1-workspace-list-toolbar.ui.xn1-workspace-list-toolbar-frameless {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xn1-workspace-list-flush.ui.basic.segment {
    margin: 0 !important;
    padding: 0 !important;
}

.xn1-workspace-list-search-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(18rem, 1fr) auto;
}

.xn1-workspace-list-actions {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.xn1-workspace-list-actions > .ui.button {
    margin: 0 !important;
}

.ui.table th.xn1-workspace-list-search-cell {
    padding: 0.65rem 0.75rem !important;
}

.ui.table tfoot th.xn1-workspace-list-footer-cell {
    padding: 0.35rem 0.75rem !important;
}

.xn1-workspace-list-footer {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 2.25rem;
}

.ui.table.xn1-workspace-fixed-list-table {
    min-width: 100%;
    table-layout: fixed;
    width: 100%;
}

.ui.table.xn1-workspace-fixed-list-table > tbody > tr > td,
.ui.table.xn1-workspace-fixed-list-table > thead > tr > th,
.ui.table.xn1-workspace-fixed-list-table > tfoot > tr > th {
    vertical-align: middle;
}

.ui.table.xn1-workspace-fixed-list-table > tbody > tr > td:not(:first-child):not(:last-child) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui.table.xn1-workspace-fixed-list-table > tbody > tr > td > .ui.list {
    margin: 0;
}

@media (max-width: 767px) {
    .xn1-workspace-list-search-row {
        grid-template-columns: 1fr;
    }

    .xn1-workspace-list-actions {
        justify-content: flex-start;
    }

    .xn1-workspace-list-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.ui.primary.button,
.ui.primary.buttons .button {
    background-color: var(--xn1-brand-primary, #2185d0) !important;
    color: #fff !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus,
.ui.primary.button:active,
.ui.primary.buttons .button:active,
.ui.primary.button.active,
.ui.primary.buttons .button.active {
    background-color: color-mix(in srgb, var(--xn1-brand-primary, #2185d0) 88%, #000 12%) !important;
    color: #fff !important;
}

.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
    background: transparent !important;
    color: var(--xn1-brand-primary, #2185d0) !important;
    box-shadow: 0 0 0 1px var(--xn1-brand-primary, #2185d0) inset !important;
}

.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover,
.ui.basic.primary.button:focus,
.ui.basic.primary.buttons .button:focus,
.ui.basic.primary.button:active,
.ui.basic.primary.buttons .button:active,
.ui.basic.primary.button.active,
.ui.basic.primary.buttons .button.active {
    background-color: color-mix(in srgb, var(--xn1-brand-primary, #2185d0) 8%, transparent) !important;
    color: var(--xn1-brand-primary, #2185d0) !important;
    box-shadow: 0 0 0 1px var(--xn1-brand-primary, #2185d0) inset !important;
}

.ui.primary.button > .icon,
.ui.primary.buttons .button > .icon {
    color: inherit !important;
}

.ui.positive.button,
.ui.green.button {
    background-color: var(--xn1-semantic-success, #21ba45) !important;
    color: #fff !important;
}

.ui.negative.button,
.ui.red.button {
    background-color: var(--xn1-semantic-danger, #db2828) !important;
    color: #fff !important;
}

.ui.warning.button,
.ui.yellow.button {
    background-color: var(--xn1-semantic-warning, #fbbd08) !important;
    color: #1f2937 !important;
}

.ui.info.button,
.ui.blue.button {
    background-color: var(--xn1-semantic-info, #2185d0) !important;
    color: #fff !important;
}

.ui.green.label,
.ui.positive.label {
    background-color: var(--xn1-semantic-success, #21ba45) !important;
    border-color: var(--xn1-semantic-success, #21ba45) !important;
    color: #fff !important;
}

.ui.red.label,
.ui.negative.label {
    background-color: var(--xn1-semantic-danger, #db2828) !important;
    border-color: var(--xn1-semantic-danger, #db2828) !important;
    color: #fff !important;
}

.ui.yellow.label,
.ui.warning.label {
    background-color: var(--xn1-semantic-warning, #fbbd08) !important;
    border-color: var(--xn1-semantic-warning, #fbbd08) !important;
    color: #1f2937 !important;
}

.ui.blue.label,
.ui.info.label {
    background-color: var(--xn1-semantic-info, #2185d0) !important;
    border-color: var(--xn1-semantic-info, #2185d0) !important;
    color: #fff !important;
}

.ui.green.card,
.ui.cards > .green.card {
    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--xn1-semantic-success, #21ba45), 0 1px 3px 0 #d4d4d5 !important;
}

.ui.red.card,
.ui.cards > .red.card {
    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--xn1-semantic-danger, #db2828), 0 1px 3px 0 #d4d4d5 !important;
}

.ui.yellow.card,
.ui.cards > .yellow.card {
    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--xn1-semantic-warning, #fbbd08), 0 1px 3px 0 #d4d4d5 !important;
}

.ui.blue.card,
.ui.cards > .blue.card {
    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--xn1-semantic-info, #2185d0), 0 1px 3px 0 #d4d4d5 !important;
}

.ui.positive.message,
.ui.success.message {
    background-color: color-mix(in srgb, var(--xn1-semantic-success, #21ba45) 10%, #fff 90%) !important;
    color: color-mix(in srgb, var(--xn1-semantic-success, #21ba45) 62%, #111827 38%) !important;
}

.ui.negative.message,
.ui.error.message {
    background-color: color-mix(in srgb, var(--xn1-semantic-danger, #db2828) 10%, #fff 90%) !important;
    color: color-mix(in srgb, var(--xn1-semantic-danger, #db2828) 62%, #111827 38%) !important;
}

.ui.warning.message {
    background-color: color-mix(in srgb, var(--xn1-semantic-warning, #fbbd08) 16%, #fff 84%) !important;
    color: #1f2937 !important;
}

.ui.info.message {
    background-color: color-mix(in srgb, var(--xn1-semantic-info, #2185d0) 10%, #fff 90%) !important;
    color: color-mix(in srgb, var(--xn1-semantic-info, #2185d0) 62%, #111827 38%) !important;
}

.xn1-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.xn1-tooltip[xn1-tooltip]:hover::after {
    content: attr(xn1-tooltip);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.xn1-tooltip.xn1-tooltip--bottom[xn1-tooltip]:hover::after {
    top: auto;
    bottom: -40px;
}

.xn1-tooltip.xn1-tooltip--left[xn1-tooltip]:hover::after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
}

.xn1-tooltip.xn1-tooltip--right[xn1-tooltip]:hover::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

.xn1-tooltip .xn1-tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    min-width: 260px;
    max-width: 360px;
    white-space: normal;
    text-align: left;
}

.xn1-tooltip.xn1-tooltip--bottom .xn1-tooltip-content {
    top: 100%;
    bottom: auto;
}

.xn1-tooltip.xn1-tooltip--right .xn1-tooltip-content {
    top: 50%;
    left: 100%;
    bottom: auto;
    transform: translateY(-50%);
}

.xn1-tooltip.xn1-tooltip--left .xn1-tooltip-content {
    top: 50%;
    left: auto;
    right: 100%;
    bottom: auto;
    transform: translateY(-50%);
}

.xn1-tooltip:not([xn1-tooltip]):hover .xn1-tooltip-content {
    visibility: visible;
    opacity: 1;
}

.xn1-tooltip-content .ui.message {
    margin: 0;
}

.xn1-workspace-table-header-cell {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    justify-content: space-between;
    min-width: 0;
}

.xn1-workspace-table-header-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xn1-workspace-table-sort-button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 0.25rem;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.xn1-workspace-table-sort-button.disabled,
.xn1-workspace-table-sort-button:disabled {
    cursor: default;
}

.xn1-workspace-table-filter.ui.button {
    flex: 0 0 auto;
    padding: 0.45rem 0.55rem;
    position: relative;
}

.xn1-workspace-table-filter-trigger {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.28571429rem;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    line-height: 1;
    min-height: 1.85rem;
    min-width: 1.85rem;
    padding: 0.25rem;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.xn1-workspace-table-filter-trigger.active {
    background: rgba(17, 24, 39, 0.08);
    border-color: rgba(17, 24, 39, 0.28);
    color: var(--xn1-brand-primary, #111827);
}

.xn1-workspace-table-filter-trigger.active .icon {
    color: inherit !important;
}

.xn1-workspace-table-filter-trigger.disabled {
    cursor: default;
    opacity: 0.45;
    pointer-events: none;
}

.xn1-workspace-table-filter-content {
    min-width: 18rem;
}

.xn1-workspace-table-filter > .menu.visible {
    left: auto;
    right: 0;
    top: 100%;
    z-index: 1002;
}

.xn1-workspace-table-filter-content.item {
    cursor: default;
}

.xn1-workspace-table-filter-content .ui.form {
    margin: 0;
}

.xn1-workspace-table-filter-actions {
    border-top: 1px solid rgba(34, 36, 38, 0.12);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.xn1-page-list-number {
    overflow: visible;
    position: relative;
    z-index: 40;
}

.xn1-page-size-backdrop {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: default;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 18;
}

.ui.table tfoot:has(.xn1-page-list-number),
.ui.table tfoot:has(.xn1-page-list-number) tr,
.ui.table tfoot:has(.xn1-page-list-number) th {
    overflow: visible;
    position: relative;
    z-index: 30;
}

.xn1-page-list-number .xn1-page-size-dropdown.ui.dropdown {
    position: relative;
    z-index: 41;
}

.xn1-page-list-number .xn1-page-size-dropdown.ui.dropdown > .xn1-page-size-menu.menu {
    bottom: calc(100% + 0.25rem) !important;
    display: none !important;
    left: auto !important;
    min-width: 100%;
    opacity: 0;
    right: 0 !important;
    top: auto !important;
    visibility: hidden;
    z-index: 42;
}

.xn1-page-list-number .xn1-page-size-dropdown.ui.dropdown > .xn1-page-size-menu.menu.visible {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.xn1-page-list-number .xn1-page-size-dropdown.ui.dropdown > .xn1-page-size-menu.menu.hidden {
    display: none !important;
}

.xn1-platform-dropdown-action.ui.action.input {
    align-items: stretch;
    display: flex;
    min-width: 0;
}

.xn1-platform-dropdown-action.ui.action.input > .ui.dropdown {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.xn1-platform-dropdown-action.ui.action.input > .ui.dropdown > .text,
.xn1-platform-dropdown-action.ui.action.input > .ui.dropdown > .default.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xn1-platform-dropdown-action.ui.action.input > .ui.button {
    flex: 0 0 auto;
    margin: 0;
    min-width: 2.65rem;
}

.xn1-platform-dropdown-action.ui.action.input > .ui.button:not(:last-child) {
    border-radius: 0;
}

.xn1-platform-dropdown-action.ui.action.input > .ui.dropdown + .ui.button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.xn1-platform-dropdown-action.ui.action.input > .ui.button:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.xn1-platform-multi-dropdown.ui.dropdown {
    min-height: 2.71428571rem;
}

.xn1-platform-multi-dropdown.ui.multiple.dropdown > .ui.label {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    max-width: 100%;
}

.xn1-platform-multi-dropdown.ui.multiple.dropdown > .ui.label > .delete.icon {
    cursor: pointer;
    margin-left: 0.25rem;
}

.xn1-platform-multi-dropdown.ui.multiple.search.dropdown > input.search {
    min-width: 8rem;
}

.xn1-platform-multi-dropdown.ui.dropdown > .menu {
    max-height: 16rem;
    overflow-y: auto;
}

.xn1-platform-multi-dropdown.ui.dropdown > .menu > .message {
    color: rgba(0, 0, 0, 0.4);
    padding: 0.78571429rem 1.14285714rem;
}

.ui.modals.dimmer {
    z-index: 1300 !important;
}

.ui.modals.dimmer .ui.modal,
.ui.modal[data-xn1-modal-id] {
    z-index: 1301 !important;
}

.xn1-platform-flyout.ui.flyout {
    background: var(--xn1-brand-surface, #fff);
    bottom: 0;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.18);
    display: flex !important;
    flex-direction: column;
    max-width: min(92vw, 760px);
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
    visibility: hidden;
    width: min(92vw, 680px);
    z-index: 1100;
}

.xn1-platform-flyout.ui.flyout.right {
    right: 0;
    transform: translateX(102%);
}

.xn1-platform-flyout.ui.flyout.left {
    left: 0;
    transform: translateX(-102%);
}

.xn1-platform-flyout.ui.flyout.top {
    left: 0;
    max-width: none;
    right: 0;
    transform: translateY(-102%);
    width: auto;
}

.xn1-platform-flyout.ui.flyout.bottom {
    left: 0;
    max-width: none;
    right: 0;
    top: auto;
    transform: translateY(102%);
    width: auto;
}

.xn1-platform-flyout.ui.flyout.visible {
    opacity: 1;
    transform: translate(0, 0);
    visibility: visible;
}

.xn1-platform-flyout.ui.flyout > .content {
    background:
        linear-gradient(
            145deg,
            #fff 0%,
            color-mix(in srgb, var(--xn1-brand-background, #f8fafc) 88%, #fff 12%) 42%,
            color-mix(in srgb, var(--xn1-brand-primary, #111827) 14%, #fff 86%) 100%
        );
    flex: 1 1 auto;
    min-height: 0;
}

.xn1-platform-flyout.ui.flyout > .scrolling.content {
    overflow: auto;
}

.xn1-platform-flyout.ui.flyout > .content:not(.scrolling) {
    overflow: hidden;
}

.xn1-platform-flyout.ui.flyout.xn1-workspace-entity-flyout > .content {
    background: color-mix(in srgb, var(--xn1-brand-background, #f3f4f6) 82%, #e5e7eb 18%);
}

.xn1-platform-flyout.ui.flyout.xn1-workspace-entity-flyout > .ui.dividing.header {
    flex: 0 0 auto;
    margin: 0;
    padding: 1rem 1.25rem;
}

.xn1-platform-flyout.ui.flyout.xn1-workspace-entity-flyout-full {
    left: 0;
    max-width: none;
    right: 0;
    width: 100vw;
}

.xn1-platform-flyout.ui.flyout.xn1-resource-picker-flyout {
    left: 0 !important;
    max-width: none !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 1200;
}

.xn1-workspace-entity-flyout-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
}

.xn1-workspace-entity-flyout-title {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.xn1-workspace-entity-flyout-title > .icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    margin: 0;
}

.xn1-workspace-entity-flyout-title > .content {
    min-width: 0;
}

.xn1-workspace-entity-flyout-title > .content > .sub.header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xn1-workspace-entity-flyout-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .35rem;
    justify-content: flex-end;
}

.xn1-workspace-entity-flyout-actions .ui.icon.button {
    align-items: center;
    background: #e0e1e2 !important;
    border: 0 !important;
    border-radius: 500rem !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, .64) !important;
    display: inline-flex;
    height: 2.65rem;
    justify-content: center;
    margin: 0;
    min-height: 0;
    padding: 0 !important;
    width: 2.65rem;
}

.xn1-workspace-entity-flyout-actions .ui.icon.button:hover,
.xn1-workspace-entity-flyout-actions .ui.icon.button:focus {
    background: #d4d4d5 !important;
    color: rgba(0, 0, 0, .78) !important;
}

.xn1-workspace-entity-flyout-actions .ui.icon.button > .icon {
    margin: 0 !important;
}

.xn1-platform-flyout.ui.flyout.xn1-workspace-entity-flyout > .actions {
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 -10px 22px rgba(15, 23, 42, .10);
    flex: 0 0 auto;
    padding: 0;
}

.xn1-platform-flyout.ui.flyout.xn1-resource-picker-flyout > .actions {
    padding: .75rem 1.25rem !important;
}

.xn1-resource-picker-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: flex-start;
    width: 100%;
}

.xn1-resource-picker-actions > .ui.button {
    margin: 0 !important;
}

.xn1-workspace-entity-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

.xn1-workspace-entity-section-toolbar {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(220px, 1fr) auto;
}

.xn1-workspace-entity-section-actions {
    align-items: center;
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

.xn1-workspace-entity-section-empty {
    align-items: center;
    color: #64748b;
    display: grid;
    gap: .5rem;
    justify-items: center;
    min-height: 18rem;
    text-align: center;
}

.xn1-workspace-entity-section-empty .icon {
    color: #94a3b8;
    font-size: 2rem;
    margin: 0;
}

@media (max-width: 767px) {
    .xn1-workspace-entity-section-toolbar {
        grid-template-columns: 1fr;
    }

    .xn1-workspace-entity-section-actions {
        justify-content: stretch;
    }
}