/* =========================================================
   UTP Framework Layout Layer
   Safe CSS split layer: layout/container rules only.
   Loaded before current utp.css and before inline critical shell.
   ========================================================= */

.ids-utp {
    width: 100%;
    color: var(--utp-color-text);
    font-family: var(--utp-font-family);
}

.ids-utp .ids-workspace,
.ids-utp .ids-workspace-backoffice {
    position: relative;
    width: 100%;
}

.ids-utp .ids-workspace-backoffice {
    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;
    margin: 48px auto;
    padding: 0;
}

.ids-utp .ids-staff-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--utp-space-6);

    background: rgba(245, 247, 251, 0.96);
    border-radius: 18px;
    box-shadow: var(--utp-shadow-shell);

    color: var(--utp-color-text);
    overflow: hidden;
}

.ids-utp .utp-panel {
    width: 100%;
    margin-bottom: 18px;
}

.ids-utp .utp-search-panel,
.ids-utp .utp-content-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ids-utp .utp-nav-panel,
.ids-utp .ids-staff-nav,
.ids-utp .ids-module-nav,
.ids-utp .ids-manual-shortcuts,
.ids-utp .ids-actions,
.ids-utp .ids-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ids-utp .utp-nav-panel {
    padding: 14px;
}

@media (max-width: 768px) {
    .ids-utp .ids-workspace-backoffice {
        width: calc(100% - 24px);
        margin: 24px auto;
    }

    .ids-utp .ids-staff-wrap {
        padding: var(--utp-space-4);
    }
}