.content-top,
.responsive-header {
    background: #111111;
}

.ea-topbar-brand .logo,
.responsive-header .logo {
    color: #ffffff;
}

.content-top .user-menu-wrapper a.user-details,
.content-top .user-menu-wrapper a.user-details:hover,
.content-top .dropdown-settings .dropdown-settings-button {
    color: #ffffff;
}

@media (min-width: 992px) {
    .wrapper {
        grid-template-columns: var(--sidebar-max-width) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "topbar topbar"
            "sidebar main";
    }

    body.ea-sidebar-width-compact .wrapper {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .sidebar-wrapper {
        grid-area: sidebar;
    }

    .main-content {
        display: contents;
    }

    .content-top {
        grid-area: topbar;
        justify-content: flex-start;
        gap: 16px;
        padding-inline-start: 0;
    }

    .content-wrapper {
        grid-area: main;
        min-inline-size: 0;
    }

    .ea-sidebar {
        min-block-size: 0;
        block-size: 100%;
        padding-block-start: var(--ea-sp-18);
    }

    .ea-sidebar-header {
        display: none;
    }

    .ea-topbar-brand {
        box-sizing: border-box;
        flex-shrink: 0;
        inline-size: var(--sidebar-max-width);
        padding-inline-start: 16px;
    }

    body.ea-sidebar-width-compact .ea-topbar-brand {
        inline-size: 64px;
    }
}

.content-top .content-search {
    flex: 1;
}

.content-top .content-search .form-widget {
    align-items: center;
    background: #2a2a2a;
    border-radius: 4px;
    display: flex;
    max-inline-size: 480px;
    padding-inline: 12px;
    position: relative;
}

.content-top .content-search .content-search-icon {
    color: #9ca3af;
    inset-inline-start: 12px;
    pointer-events: none;
    position: absolute;
}

.content-top .content-search .content-search-label {
    flex: 1;
    max-inline-size: none;
}

.content-top .content-search input[type="search"][name="query"] {
    background: transparent;
    color: #ffffff;
    padding-inline-start: 28px;
}

.content-top .content-search input[type="search"][name="query"]::placeholder {
    color: #9ca3af;
}

.ea-topbar-brand,
.responsive-header .logo {
    flex-shrink: 0;
}

.ea-topbar-brand .logo,
.responsive-header .logo {
    display: block;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.datagrid .product-status-dot,
.datagrid .status-dot {
    background: #dc2626;
    block-size: 10px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    inline-size: 10px;
}

.datagrid .product-status-dot.is-active,
.datagrid .status-dot.is-active {
    background: #16a34a;
}

.datagrid .user-name-cell {
    align-items: center;
    display: flex;
    gap: 8px;
}

.datagrid .access-dot-cell {
    display: flex;
    justify-content: center;
}

.datagrid th[data-column="active"],
.datagrid td[data-column="active"] {
    width: 28px;
}

.datagrid .product-photo,
.datagrid .product-photo-empty {
    block-size: 50px;
    inline-size: 50px;
    margin-block: 10px;
}

.datagrid .product-photo {
    display: block;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
}

.datagrid .product-photo-empty {
    align-items: center;
    background: var(--surface, #f6f6f6);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 4px;
    color: var(--text-soft, #5f5f5b);
    display: flex;
    font-size: 22px;
    justify-content: center;
}

.datagrid-column-filters th {
    font-weight: 400;
    vertical-align: middle;
}

.datagrid-column-filters .form-control {
    font-size: 14px;
    min-height: 36px;
    padding: 4px 8px;
}

table.datagrid td.actions:not(.actions-as-dropdown) {
    text-align: right;
    white-space: nowrap;
}

table.datagrid td.actions:not(.actions-as-dropdown) form {
    display: inline;
    margin: 0;
}

table.datagrid td.actions a:not(.dropdown-item) + a:not(.dropdown-item) {
    margin-inline-start: 0;
}

table.datagrid td.actions:not(.actions-as-dropdown) .btn + .btn,
table.datagrid td.actions:not(.actions-as-dropdown) form + .btn,
table.datagrid td.actions:not(.actions-as-dropdown) .btn + form {
    margin-inline-start: 2px;
}

table.datagrid td.actions .btn-invisible,
table.datagrid td.actions .btn-invisible.btn-danger {
    --button-bg: var(--button-secondary-bg);
    --button-border-color: var(--button-secondary-border-color);
    --button-box-shadow: var(--button-secondary-box-shadow);
    --button-color: var(--button-secondary-color);
    --button-icon-color: var(--button-secondary-icon-color);
    --button-hover-bg: var(--button-secondary-hover-bg);
    --button-hover-border-color: var(--button-secondary-hover-border-color);
    --button-hover-color: var(--button-secondary-hover-color);
    --button-active-bg: var(--button-secondary-active-bg);
    --button-active-border-color: var(--button-secondary-active-border-color);
    --button-active-box-shadow: var(--button-secondary-active-box-shadow);
    --button-active-color: var(--button-secondary-active-color);
}

table.datagrid td.actions .btn {
    display: inline-flex;
    vertical-align: middle;
    white-space: nowrap;
}

body.ea,
.content-wrapper,
.content-header {
    background: #f1f1f1;
}

.content-wrapper,
.content,
#main,
.content-panel,
.content-body {
    min-width: 0;
}

.datagrid-scroll,
.datagrid-wrapper {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.datagrid-scroll::-webkit-scrollbar,
.datagrid-wrapper::-webkit-scrollbar {
    height: 10px;
}

.datagrid-scroll::-webkit-scrollbar-thumb,
.datagrid-wrapper::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

.content-body,
.content-panel {
    background: #ffffff;
    border-radius: 4px;
}

.content-body {
    padding: 16px;
}

body.ea-new .content-body,
body.ea-edit .content-body,
body.ea:has(.change-password) .content-body,
body.ea-new .content-panel,
body.ea-edit .content-panel {
    background: transparent;
    padding: 0;
}

body.ea-new #main > form,
body.ea-edit #main > form,
.change-password {
    margin-inline: auto;
    max-width: 716px;
}

body.ea-new #main > form:not(:has(.form-fieldset)),
body.ea-edit #main > form:not(:has(.form-fieldset)),
.change-password {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
}

body.ea-new .form-fieldset,
body.ea-edit .form-fieldset {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: none;
    margin-block-end: 16px;
    padding: 24px;
}

body.ea-new .field-form_fieldset,
body.ea-edit .field-form_fieldset {
    margin-inline: auto;
    max-width: 716px;
}

@media (min-width: 768px) {
    table.datagrid:not(.location-list__table) {
        table-layout: auto;
        width: max-content;
        min-width: 100%;
    }

    table.datagrid:not(.location-list__table) th,
    table.datagrid:not(.location-list__table) td {
        overflow: visible;
        vertical-align: middle;
        white-space: nowrap;
    }

    table.datagrid th[data-column="id"],
    table.datagrid td[data-column="id"] {
        width: 56px;
    }

    table.datagrid th[data-column="imageFilename"],
    table.datagrid td[data-column="imageFilename"] {
        width: 70px;
    }

    table.datagrid th[data-column="name"],
    table.datagrid td[data-column="name"] {
        min-width: 220px;
        width: 22%;
    }

    table.datagrid th[data-column="updatedAt"],
    table.datagrid td[data-column="updatedAt"],
    table.datagrid th[data-column="createdAt"],
    table.datagrid td[data-column="createdAt"],
    table.datagrid th[data-column="lastSeenAt"],
    table.datagrid td[data-column="lastSeenAt"] {
        min-width: 170px;
        width: 170px;
    }

    table.datagrid th[data-column="username"],
    table.datagrid td[data-column="username"] {
        width: 13%;
    }

    table.datagrid th[data-column="assignedRolesSummary"],
    table.datagrid td[data-column="assignedRolesSummary"] {
        width: 160px;
    }

    table.datagrid th[data-column="webAccess"],
    table.datagrid td[data-column="webAccess"],
    table.datagrid th[data-column="pdaAccess"],
    table.datagrid td[data-column="pdaAccess"] {
        text-align: center;
        width: 68px;
    }

    table.datagrid:not(.location-list__table) thead th:last-child,
    table.datagrid:not(.location-list__table) th.actions,
    table.datagrid:not(.location-list__table) td.actions {
        background: #ffffff;
        min-width: 360px;
        overflow: visible;
        position: sticky;
        right: 0;
        white-space: nowrap;
        width: 360px;
        z-index: 2;
    }

    table.datagrid:not(.location-list__table) thead th:last-child {
        z-index: 3;
    }

    body.ea-index-Marketplace table.datagrid th[data-column="code"],
    body.ea-index-Marketplace table.datagrid td[data-column="code"],
    body.ea-index-Marketplace table.datagrid th[data-column="name"],
    body.ea-index-Marketplace table.datagrid td[data-column="name"],
    body.ea-index-Marketplace table.datagrid th[data-column="active"],
    body.ea-index-Marketplace table.datagrid td[data-column="active"] {
        width: 10%;
    }

    body.ea-index-Marketplace table.datagrid th[data-column="active"],
    body.ea-index-Marketplace table.datagrid td[data-column="active"] {
        text-align: center;
    }

    body.ea-index-SalesChannel table.datagrid th[data-column="code"],
    body.ea-index-SalesChannel table.datagrid td[data-column="code"],
    body.ea-index-SalesChannel table.datagrid th[data-column="name"],
    body.ea-index-SalesChannel table.datagrid td[data-column="name"],
    body.ea-index-SalesChannel table.datagrid th[data-column="active"],
    body.ea-index-SalesChannel table.datagrid td[data-column="active"] {
        width: 10%;
    }

    body.ea-index-SalesChannel table.datagrid th[data-column="active"],
    body.ea-index-SalesChannel table.datagrid td[data-column="active"] {
        text-align: center;
    }
}

body.ea .form-group[hidden] {
    display: none;
}