:root {
    --sidebar: #063b55;
    --sidebar-deep: #062f46;
    --sidebar-active: #066f9d;
    --topbar: #062f45;
    --blue: #057dd5;
    --blue-dark: #056ebc;
    --line: #dce5ed;
    --line-strong: #c6d3dd;
    --bg: #eef3f8;
    --panel: #ffffff;
    --text: #203142;
    --muted: #728397;
    --green: #12b886;
    --danger: #d64550;
    --shadow: 0 28px 70px rgba(18, 36, 52, .34);
    font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
}

body.login-mode {
    background: #edf3f6;
}

body.login-mode .app-shell,
body.login-mode #masterDataDrawer,
body.login-mode #modalBackdrop,
body.login-mode #moreActionMenu,
body.login-mode #windowSettingsMenu,
body.login-mode #topActionMenu {
    display: none !important;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

.app-shell {
    display: grid;
    grid-template-columns: 236px 1fr;
    width: 100vw;
    height: 100vh;
}

.login-screen {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    min-width: 0;
    overflow: auto;
    background:
        linear-gradient(115deg, rgba(8, 81, 105, .9), rgba(13, 109, 127, .68) 46%, rgba(241, 247, 249, .98) 46.2%),
        #edf3f6;
    z-index: 1000;
}

.login-screen.hidden {
    display: none;
}

.login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: 46px 54px;
    color: #e9f8fb;
    background:
        linear-gradient(rgba(7, 60, 77, .26) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 60, 77, .26) 1px, transparent 1px);
    background-size: 44px 44px;
}

.login-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 34%),
        linear-gradient(180deg, rgba(5, 51, 69, .12), rgba(5, 51, 69, .5));
    pointer-events: none;
}

.login-visual-top,
.login-insight-board {
    position: relative;
    z-index: 1;
}

.login-visual-top {
    display: grid;
    gap: 10px;
}

.login-visual-top span {
    width: max-content;
    padding: 6px 10px;
    color: #06364a;
    font-size: 13px;
    font-weight: 800;
    background: #f7d866;
    border-radius: 3px;
}

.login-visual-top strong {
    max-width: 560px;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: 0;
}

.login-insight-board {
    width: min(560px, 100%);
    padding: 22px;
    background: rgba(247, 252, 253, .92);
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(3, 29, 42, .28);
}

.login-insight-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #0b4157;
}

.login-insight-head span {
    color: #5c7180;
    font-size: 12px;
    text-transform: uppercase;
}

.login-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.login-kpi-row div {
    min-width: 0;
    padding: 12px;
    background: #f2f7f9;
    border: 1px solid #d8e5eb;
    border-radius: 6px;
}

.login-kpi-row span {
    display: block;
    color: #69808e;
    font-size: 12px;
}

.login-kpi-row strong {
    display: block;
    margin-top: 5px;
    color: #0b4157;
    font-size: 26px;
}

.login-map {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr;
    grid-auto-rows: 54px;
    gap: 10px;
}

.login-map i {
    display: block;
    background: linear-gradient(135deg, #0f7ea3, #15b1a8);
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.login-map i:nth-child(2),
.login-map i:nth-child(5) {
    background: linear-gradient(135deg, #f0b84a, #e6774f);
}

.login-map i:nth-child(3),
.login-map i:nth-child(6) {
    background: linear-gradient(135deg, #5c8fe8, #6bc3df);
}

.login-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.login-flow span {
    height: 8px;
    background: #d8e5eb;
    border-radius: 99px;
}

.login-flow span:nth-child(1) {
    background: #0f7ea3;
}

.login-flow span:nth-child(2) {
    background: #f0b84a;
}

.login-flow span:nth-child(3) {
    background: #15a885;
}

.login-panel-wrap {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 42px;
}

.login-panel {
    width: min(430px, 100%);
    padding: 34px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #d8e3ea;
    border-radius: 8px;
    box-shadow: 0 22px 65px rgba(28, 47, 61, .16);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.login-brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #086c93, #16a883);
    border-radius: 7px;
}

.login-brand strong,
.login-brand span {
    display: block;
}

.login-brand strong {
    color: #153446;
    font-size: 18px;
}

.login-brand span {
    margin-top: 2px;
    color: #7b8d9a;
    font-size: 12px;
}

.login-copy {
    margin-bottom: 22px;
}

.login-copy span {
    color: #0f7ea3;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.login-copy h1 {
    margin: 8px 0 8px;
    color: #112d3d;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: 0;
}

.login-copy p {
    margin: 0;
    color: #697f8e;
    font-size: 14px;
    line-height: 1.7;
}

.login-field {
    display: grid;
    gap: 7px;
    margin-bottom: 15px;
}

.login-field span {
    color: #334b5b;
    font-size: 13px;
    font-weight: 700;
}

.login-field input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    color: #162f3f;
    background: #f8fbfc;
    border: 1px solid #cfdde5;
    border-radius: 6px;
    outline: 0;
}

.login-field input:focus {
    border-color: #0f8fc1;
    box-shadow: 0 0 0 3px rgba(15, 143, 193, .12);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 20px;
    color: #627989;
    font-size: 13px;
}

.login-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.login-options button {
    color: #0f7ea3;
    background: transparent;
}

.login-submit {
    width: 100%;
    height: 44px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #086c93, #0f9f88);
    border-radius: 6px;
}

.login-submit:hover {
    filter: brightness(1.05);
}

.login-submit:disabled {
    cursor: wait;
    opacity: .72;
}

.login-error {
    min-height: 20px;
    margin: 14px 0 0;
    color: #c83745;
    font-size: 13px;
}

.login-error.hidden {
    display: none;
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    color: #d8ecf6;
    background:
        radial-gradient(circle at 0 0, rgba(12, 142, 197, .35), transparent 32%),
        linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.brand {
    display: grid;
    grid-template-columns: 34px 1fr 22px;
    gap: 10px;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #fff;
    font-weight: 800;
    border-radius: 50%;
    background: conic-gradient(from 45deg, #22d3ee, #f8d34a, #22c55e, #2563eb, #22d3ee);
    box-shadow: inset 0 0 0 5px rgba(6, 48, 70, .72);
}

.brand-title {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 20px;
    letter-spacing: 0;
}

.brand-subtitle {
    display: none;
}

.sidebar-collapse {
    width: 22px;
    height: 22px;
    color: #b9d7e6;
    background: transparent;
    font-size: 20px;
}

.menu-scroll-region {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.menu-tree {
    width: 100%;
    height: 100%;
    padding: 18px 14px 12px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.menu-tree::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.menu-section {
    margin-bottom: 3px;
}

.menu-item {
    display: grid;
    grid-template-columns: 24px 1fr 16px;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    min-width: 0;
    color: #d7e9f1;
    border-radius: 0;
    font-size: 14px;
    cursor: pointer;
}

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

.menu-item:hover {
    background: rgba(255, 255, 255, .08);
}

.menu-item.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(3, 130, 190, .92), rgba(6, 111, 157, .55));
}

.menu-icon {
    display: grid;
    place-items: center;
    width: 24px;
    color: #9fd2e9;
    font-size: 14px;
}

.menu-svg-icon {
    width: 15px;
    height: 15px;
    display: block;
}

.menu-caret {
    display: grid;
    place-items: center;
    width: 16px;
    color: currentColor;
}

.menu-caret-icon {
    width: 13px;
    height: 13px;
    display: block;
    opacity: .82;
}

.menu-children {
    margin: 2px 0 8px 28px;
    padding-left: 9px;
    border-left: 2px solid rgba(255, 255, 255, .28);
}

.menu-children.hidden {
    display: none;
}

.menu-depth-1 .menu-item {
    grid-template-columns: 10px 1fr 16px;
    min-height: 37px;
    padding-left: 7px;
    color: #c9e3ee;
    font-size: 13px;
}

.menu-depth-2 .menu-item,
.menu-depth-3 .menu-item {
    grid-template-columns: 10px 1fr 14px;
    min-height: 32px;
    padding-left: 5px;
    color: #b6d4e2;
    font-size: 12px;
}

.menu-bullet {
    display: grid;
    place-items: center;
    width: 10px;
    color: #8bc7e2;
    font-size: 14px;
}

.menu-item.current,
.menu-item:hover {
    color: #fff;
    background: rgba(0, 119, 177, .42);
}

.menu-item.current {
    background: rgba(0, 132, 192, .68);
}

.menu-item.ancestor {
    color: #fff;
}

.menu-scrollbar {
    position: absolute;
    top: 14px;
    right: 3px;
    bottom: 14px;
    width: 10px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.menu-scrollbar.hidden {
    display: none;
}

.menu-scrollbar-track {
    position: relative;
    width: 2px;
    height: 100%;
    background: rgba(223, 243, 252, .38);
    border-radius: 999px;
    pointer-events: auto;
    cursor: pointer;
}

.menu-scrollbar-thumb {
    position: absolute;
    left: 50%;
    width: 10px;
    min-height: 36px;
    transform: translate(-50%, 0);
    border: 2px solid rgba(6, 46, 68, .96);
    border-radius: 2px;
    background: rgba(242, 251, 255, .96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    cursor: grab;
}

.menu-scrollbar-thumb:active {
    cursor: grabbing;
}

body.sidebar-collapsed .app-shell {
    grid-template-columns: 58px minmax(0, 1fr);
}

body.sidebar-collapsed .brand {
    grid-template-columns: 34px;
    justify-content: center;
    padding: 0 10px;
}

body.sidebar-collapsed .brand > div:not(.brand-mark),
body.sidebar-collapsed .sidebar-collapse,
body.sidebar-collapsed .menu-label,
body.sidebar-collapsed .menu-caret,
body.sidebar-collapsed .menu-children,
body.sidebar-collapsed .menu-scrollbar {
    display: none !important;
}

body.sidebar-collapsed .menu-tree {
    padding: 14px 8px;
}

body.sidebar-collapsed .menu-section {
    margin-bottom: 6px;
}

body.sidebar-collapsed .menu-item,
body.sidebar-collapsed .menu-depth-1 .menu-item,
body.sidebar-collapsed .menu-depth-2 .menu-item,
body.sidebar-collapsed .menu-depth-3 .menu-item {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 38px;
    padding: 0;
}

body.sidebar-collapsed .menu-icon,
body.sidebar-collapsed .menu-bullet {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #d7edf8;
}

.workspace {
    display: grid;
    grid-template-rows: 44px 48px auto 1fr;
    grid-auto-rows: auto;
    min-width: 0;
    height: 100vh;
    background: #eef3f8;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 460px) auto;
    align-items: center;
    gap: 18px;
    padding: 0 14px 0 12px;
    color: #d7e6ef;
    background: linear-gradient(90deg, #062d43 0%, #073c59 55%, #062d43 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.top-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hamburger {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #d7e6ef;
    background: transparent;
    border-radius: 4px;
}

.hamburger:hover {
    background: rgba(255, 255, 255, .1);
}

.top-left span {
    color: #a9c0cf;
    font-size: 15px;
}

.top-left strong {
    color: #fff;
    font-size: 16px;
}

.top-search {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr 22px;
    align-items: center;
    height: 32px;
    padding: 0 7px 0 11px;
    color: #a9c0cf;
    background: rgba(5, 27, 43, .18);
    border: 1px solid rgba(190, 218, 234, .35);
    border-radius: 5px;
    cursor: text;
}

.top-search:focus-within {
    border-color: rgba(56, 164, 235, .9);
    box-shadow: 0 0 0 2px rgba(14, 132, 216, .18);
}

.top-search input {
    min-width: 0;
    height: 100%;
    color: #eaf6fb;
    background: transparent;
    border: 0;
    outline: 0;
}

.top-search input::placeholder {
    color: #b4c7d3;
}

.search-clear {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #c8dde8;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    cursor: pointer;
}

.search-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.search-clear.hidden {
    visibility: hidden;
    pointer-events: none;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-button,
.account-entry,
.avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #d8edf8;
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.icon-button:hover {
    background: rgba(255, 255, 255, .1);
}

.icon-button.text-button {
    width: auto;
    min-width: 42px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.icon-button:active,
.hamburger:active,
.account-entry:active,
.avatar:active {
    transform: translateY(1px);
}

.account-entry {
    grid-template-columns: 30px auto;
    gap: 7px;
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 8px 0 1px;
    color: #eaf6fb;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
}

.account-entry:hover {
    background: rgba(255, 255, 255, .12);
}

.avatar {
    width: 30px;
    height: 30px;
    color: #fff;
    font-weight: 800;
    background: var(--blue);
    border-radius: 50%;
}

.has-badge {
    position: relative;
}

.has-badge::after {
    position: absolute;
    top: 3px;
    right: 1px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    content: "8";
    color: #fff;
    background: #e5484d;
    border-radius: 50%;
    font-size: 10px;
}

.top-user {
    color: #eaf6fb;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

body.theme-light .topbar {
    color: #24445b;
    background: linear-gradient(90deg, #f8fbfd 0%, #eef6fb 100%);
    border-bottom-color: #cadbe8;
}

body.theme-light .hamburger,
body.theme-light .icon-button,
body.theme-light .account-entry,
body.theme-light .top-user {
    color: #234157;
}

body.theme-light .account-entry {
    background: rgba(9, 55, 83, .05);
}

body.theme-light .account-entry:hover {
    background: rgba(9, 55, 83, .1);
}

body.theme-light .top-left strong {
    color: #0f2a3f;
}

body.theme-light .top-left span {
    color: #597487;
}

body.theme-light .top-search {
    color: #5f798a;
    background: #fff;
    border-color: #c9dae6;
}

body.theme-light .top-search input {
    color: #173044;
}

body.theme-light .top-search input::placeholder {
    color: #6f8797;
}

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0 14px 0 18px;
    background: #f7fafc;
    border-bottom: 1px solid var(--line);
}

.workbench-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.workbench-tabs button {
    height: 46px;
    padding: 0 14px;
    color: #607287;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 14px;
}

.workbench-tabs button.active {
    color: var(--blue-dark);
    border-bottom-color: var(--blue);
    font-weight: 800;
}

.grid-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.grid-tools button {
    height: 34px;
    padding: 0 7px;
    color: #283d52;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
}

.grid-tools button:hover {
    color: var(--blue-dark);
    background: #eaf3f9;
}

.grid-tools button.is-active {
    color: var(--blue-dark);
    background: #eaf3f9;
    font-weight: 800;
}

.bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: #eaf3f9;
    border: 1px solid #cfe3f1;
    border-radius: 6px;
}

.bulk-actions.hidden {
    display: none;
}

.bulk-count {
    color: #31546b;
    font-size: 13px;
    font-weight: 800;
}

.grid-tools .bulk-actions button,
.security-panel-actions .bulk-actions button {
    height: 28px;
    padding: 0 7px;
    background: #ffffff;
    border: 1px solid #cfe3f1;
}

.grid-tools .bulk-actions button.danger,
.security-panel-actions .bulk-actions button.danger {
    color: #b42318;
    border-color: #f3c6c1;
}

.security-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.row-action-cell {
    min-width: 170px;
    text-align: center;
    white-space: nowrap;
}

.row-action-head {
    width: 170px;
    text-align: center;
    vertical-align: middle;
}

.row-action-btn {
    height: 26px;
    margin: 0 3px;
    padding: 0 6px;
    color: #2f536b;
    background: #f7fbfd;
    border: 1px solid #d9e7f0;
    border-radius: 4px;
    font-size: 12px;
}

.row-action-btn:hover {
    color: var(--blue-dark);
    background: #eaf3f9;
}

.row-action-btn.danger {
    color: #b42318;
    border-color: #f3c6c1;
}

.action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 3px;
    padding: 0 5px;
    color: #fff;
    background: var(--blue);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
}

button.permission-disabled,
button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

button.permission-disabled:hover,
button:disabled:hover {
    color: inherit;
    background: transparent;
}

.data-workbench {
    display: grid;
    grid-row: 4;
    grid-template-rows: 1fr 42px;
    min-height: 0;
    margin: 0;
    background: #fff;
    overflow: hidden;
}

.grid-frame {
    min-height: 0;
    overflow: auto;
    background: #fff;
}

.erp-table {
    width: 100%;
    min-width: 1240px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.erp-table-panel {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.erp-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    color: #52677a;
    background: #fbfdff;
    border-bottom: 1px solid var(--line);
}

.erp-table-toolbar-main,
.erp-table-toolbar-view {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.erp-table-toolbar-main {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.erp-table-toolbar-view {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}

.erp-table-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 28px;
    padding: 0 8px;
    color: #52677a;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.erp-table-toolbar button:hover {
    color: var(--blue-dark);
    background: #eaf3f9;
}

.erp-table-toolbar-view button {
    min-width: 30px;
    padding: 0 7px;
}

.erp-table-scroll {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: #fff;
    border-top: 0;
    scrollbar-gutter: stable;
}

.erp-table-panel .erp-table th,
.erp-table-panel .erp-table td {
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
}

.erp-table-panel .erp-table th {
    color: #28445b;
    background: #f2f7fb;
    font-weight: 900;
}

.erp-table-panel .check-col {
    width: 34px;
    min-width: 34px;
    text-align: center;
}

body .erp-table input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--blue);
    vertical-align: middle;
}

#ordersTable .col-check {
    width: 34px;
}

#ordersTable .col-index {
    width: 62px;
}

#ordersTable .col-image {
    width: 76px;
}

#ordersTable .col-group {
    width: 120px;
}

#ordersTable .col-order {
    width: 150px;
}

#ordersTable .col-date {
    width: 150px;
}

#ordersTable .col-status {
    width: 130px;
}

#ordersTable .col-customer {
    width: 230px;
}

#ordersTable .col-currency {
    width: 80px;
}

#ordersTable .col-total {
    width: 150px;
}

#ordersTable .col-lines {
    width: 80px;
}

#ordersTable .generic-col-actions {
    width: 170px;
}

#genericTable .generic-col-check {
    width: 34px;
}

#genericTable .generic-col-index {
    width: 62px;
}

#genericTable .generic-col-code {
    width: 180px;
}

#genericTable .generic-col-name {
    width: 320px;
}

#genericTable .generic-col-status {
    width: 140px;
}

#genericTable .generic-col-module {
    width: 180px;
}

#genericTable .generic-col-date {
    width: 160px;
}

#genericTable .generic-col-actions {
    width: 170px;
}

.audit-table {
    min-width: 1280px;
}

.audit-table .audit-col-detail {
    width: 520px;
}

.audit-table td.audit-detail-cell {
    height: auto;
    min-width: 360px;
    overflow: visible;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.erp-table th,
.erp-table td {
    height: 46px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.erp-table th {
    position: relative;
    color: #28445b;
    font-weight: 700;
    background: #f2f7fb;
}

.erp-table .table-state-row td {
    height: 64px;
    color: #6a7d8f;
    background: #ffffff;
    text-align: center;
    font-weight: 700;
}

.erp-table .table-state-error td {
    color: #b42318;
    background: #fff8f7;
}

.erp-table th[data-draggable-column="true"] {
    position: relative;
    cursor: grab;
    user-select: none;
}

.erp-table th[data-draggable-column="true"]:active {
    cursor: grabbing;
}

.column-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    user-select: none;
    touch-action: none;
}

.column-resize-handle::after {
    position: absolute;
    top: 7px;
    right: 3px;
    bottom: 7px;
    width: 2px;
    content: "";
    background: transparent;
    border-radius: 2px;
}

.column-resize-handle:hover::after,
body.is-column-resizing .column-resize-handle::after {
    background: rgba(11, 132, 216, .55);
}

body.is-column-resizing {
    cursor: col-resize;
    user-select: none;
}

body.is-column-resizing * {
    cursor: col-resize !important;
}

.erp-table th.column-dragging {
    opacity: .48;
}

.erp-table th.drag-before::before,
.erp-table th.drag-after::after {
    position: absolute;
    top: 7px;
    bottom: 7px;
    width: 3px;
    content: "";
    background: var(--blue);
    border-radius: 3px;
}

.erp-table th.drag-before::before {
    left: 0;
}

.erp-table th.drag-after::after {
    right: 0;
}

.erp-table tr:hover td {
    background: #f4fbff;
}

.erp-table tr.selected td {
    background: #e9f5fb;
}

.erp-floating-table-placeholder {
    display: grid;
    place-items: center;
    min-height: 120px;
    color: #6a7d8f;
    background: #f7fbff;
    border: 1px dashed #bfd2e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.erp-floating-table-window {
    position: fixed;
    z-index: 9200;
    display: grid;
    grid-template-rows: 38px minmax(0, 1fr);
    min-width: 320px;
    min-height: 220px;
    overflow: hidden;
    color: #20384d;
    background: #fff;
    border: 1px solid #b9ccdc;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(14, 32, 48, .28);
}

.erp-floating-table-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0 8px 0 12px;
    cursor: move;
    user-select: none;
    background: #f5f9fc;
    border-bottom: 1px solid #d7e4ef;
}

.erp-floating-table-titlebar strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.erp-floating-table-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.erp-floating-table-controls button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #29465d;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 900;
}

.erp-floating-table-controls button:hover {
    color: var(--blue-dark);
    background: #e5f1f8;
}

.erp-floating-table-body {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.erp-floating-table-body > .erp-table-panel {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) auto;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.erp-floating-table-body .erp-table-scroll {
    min-height: 0;
    border-radius: 0;
}

.erp-floating-table-body [data-floating-table-action="detach"] {
    display: none;
}

.erp-floating-table-window.is-maximized {
    border-radius: 8px;
}

.erp-floating-table-window.is-maximized .erp-floating-table-titlebar {
    cursor: move;
}

.erp-floating-table-resize {
    position: absolute;
    z-index: 2;
    user-select: none;
    touch-action: none;
}

.erp-floating-table-resize[data-floating-table-resize="n"],
.erp-floating-table-resize[data-floating-table-resize="s"] {
    left: 10px;
    right: 10px;
    height: 8px;
    cursor: ns-resize;
}

.erp-floating-table-resize[data-floating-table-resize="n"] {
    top: -4px;
}

.erp-floating-table-resize[data-floating-table-resize="s"] {
    bottom: -4px;
}

.erp-floating-table-resize[data-floating-table-resize="e"],
.erp-floating-table-resize[data-floating-table-resize="w"] {
    top: 10px;
    bottom: 10px;
    width: 8px;
    cursor: ew-resize;
}

.erp-floating-table-resize[data-floating-table-resize="e"] {
    right: -4px;
}

.erp-floating-table-resize[data-floating-table-resize="w"] {
    left: -4px;
}

.erp-floating-table-resize[data-floating-table-resize="ne"],
.erp-floating-table-resize[data-floating-table-resize="nw"],
.erp-floating-table-resize[data-floating-table-resize="se"],
.erp-floating-table-resize[data-floating-table-resize="sw"] {
    width: 14px;
    height: 14px;
}

.erp-floating-table-resize[data-floating-table-resize="ne"] {
    top: -5px;
    right: -5px;
    cursor: nesw-resize;
}

.erp-floating-table-resize[data-floating-table-resize="nw"] {
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
}

.erp-floating-table-resize[data-floating-table-resize="se"] {
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;
}

.erp-floating-table-resize[data-floating-table-resize="sw"] {
    bottom: -5px;
    left: -5px;
    cursor: nesw-resize;
}

.erp-floating-table-window.is-maximized .erp-floating-table-resize {
    display: none;
}

body.is-floating-table-moving,
body.is-floating-table-resizing {
    user-select: none;
}

body.is-floating-table-moving * {
    cursor: move !important;
}

body.is-floating-table-resizing * {
    cursor: nwse-resize !important;
}

.account-center {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    min-height: 100%;
    padding: 18px;
    background: #eef4f8;
}

.account-panel-head span,
.account-metric em,
.security-card em,
.account-admin-actions span {
    color: #6f8192;
    font-style: normal;
}

.account-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.account-hero,
.account-panel,
.account-metric {
    background: #fff;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
}

.account-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
}

.account-hero-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.account-hero-copy span {
    color: #0b7ac8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-hero-copy h2 {
    margin: 0;
    color: #14314a;
    font-size: 25px;
    letter-spacing: 0;
}

.account-hero-copy p {
    max-width: 680px;
    margin: 0;
    color: #5e7284;
    line-height: 1.55;
}

.account-health {
    display: grid;
    gap: 5px;
    min-width: 260px;
    padding: 14px 16px;
    background: #f4faf7;
    border: 1px solid #cce8dd;
    border-radius: 7px;
}

.account-health strong {
    color: #0f755e;
    font-size: 17px;
}

.account-health span {
    color: #53796c;
    font-size: 12px;
}

.account-health button {
    justify-self: start;
    margin-top: 5px;
    padding: 6px 10px;
    color: #0f755e;
    font-weight: 700;
    background: #fff;
    border: 1px solid #b8ded0;
    border-radius: 5px;
}

.account-health button:hover {
    background: #e9f7f1;
}

.account-metric-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.account-metric {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px;
}

.account-metric span {
    color: #60778b;
    font-size: 12px;
    font-weight: 800;
}

.account-metric strong {
    color: #173047;
    font-size: 25px;
}

.account-metric em {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.account-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
}

.account-profile-panel,
.account-preferences-panel,
.account-admin-panel {
    grid-column: span 2;
}

.account-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-panel-head > div {
    display: grid;
    gap: 2px;
}

.account-panel-head strong {
    color: #18334a;
    font-size: 18px;
}

.account-panel-head button,
.account-admin-actions button,
.account-access-grid button {
    min-height: 34px;
    padding: 0 12px;
    color: #135783;
    background: #f3f9fe;
    border: 1px solid #cce1f0;
    border-radius: 5px;
    font-weight: 800;
}

.account-panel-head button:hover,
.account-admin-actions button:hover,
.account-access-grid button:hover {
    color: #fff;
    background: #057dd5;
    border-color: #057dd5;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.account-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.account-field span {
    color: #546d82;
    font-size: 12px;
    font-weight: 800;
}

.account-field input,
.account-field select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    color: #1d354b;
    background: #fff;
    border: 1px solid #cbdce8;
    border-radius: 5px;
    outline: 0;
}

.account-field.readonly input {
    background: #f7fafc;
}

.security-card-list {
    display: grid;
    gap: 9px;
}

.security-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px;
    background: #f8fbfd;
    border: 1px solid #d8e5ee;
    border-left: 4px solid #7aa8c6;
    border-radius: 6px;
}

.security-card span {
    color: #536c82;
    font-weight: 800;
}

.security-card strong {
    color: #173047;
}

.security-card em {
    grid-column: 1 / -1;
    font-size: 12px;
}

.security-card-ok {
    border-left-color: #12a878;
}

.security-card-info {
    border-left-color: #057dd5;
}

.security-card-warn {
    border-left-color: #d68b13;
}

.account-permission-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.account-permission-strip span {
    padding: 5px 9px;
    color: #11654f;
    background: #ecfbf5;
    border: 1px solid #c8ecdf;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.account-access-grid,
.account-admin-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.account-admin-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-access-grid button,
.account-admin-actions button {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
    min-height: 68px;
    text-align: left;
}

.account-access-grid button:disabled,
.account-admin-actions button:disabled {
    color: #7d8797;
    background: #f3f6fa;
    border-color: #e0e7f0;
    cursor: not-allowed;
    opacity: .78;
}

.account-access-grid span {
    color: inherit;
    font-size: 12px;
    opacity: .78;
}

.check-col {
    text-align: center;
}

.row-index {
    color: #6f8091;
    text-align: center;
}

.numeric {
    text-align: right;
}

.thumb {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .16), transparent),
        radial-gradient(circle at 35% 30%, #d5dde5, #acb7c3 70%);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    color: #fff;
    background: var(--green);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.status-pill.draft {
    color: #334155;
    background: #e2e8f0;
}

.status-pill.unapproved {
    color: #7a4b00;
    background: #fff0c2;
}

.status-pill.approved {
    background: #0f9f6e;
}

.status-pill.completed {
    background: #2563eb;
}

.status-pill.enabled {
    background: var(--green);
}

.status-pill.success {
    background: var(--green);
}

.status-pill.failed {
    background: #d64550;
}

.status-pill.denied {
    background: #f59f00;
}

.status-pill.disabled,
.status-pill.voided {
    background: #778391;
}

.file-console {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    background: #fff;
}

.file-settings-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 220px)) minmax(360px, 1fr);
    gap: 14px 16px;
    align-items: start;
    padding: 14px 18px;
    background: #f8fbfd;
    border-bottom: 1px solid var(--line);
}

.file-limit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 12px;
    grid-column: 1 / -1;
    min-width: 0;
}

.file-system-settings-grid,
.file-decimal-settings-grid {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
    min-width: 0;
}

.file-system-settings-grid {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.file-decimal-settings-grid {
    grid-template-columns: repeat(6, minmax(110px, 1fr));
}

.file-limit-field,
.file-filter-control,
.file-system-setting-field,
.file-decimal-setting-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.file-limit-field > span:first-child,
.file-filter-control > span,
.file-system-setting-field > span,
.file-decimal-setting-field > span {
    color: #5c7084;
    font-size: 12px;
    font-weight: 800;
}

.file-limit-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    overflow: hidden;
    height: 34px;
    background: #fff;
    border: 1px solid #cbd9e4;
    border-radius: 4px;
}

.file-limit-input input,
.file-filter-control select,
.file-system-setting-field input,
.file-decimal-setting-field input {
    width: 100%;
    height: 34px;
    background: #fff;
    border: 1px solid #cbd9e4;
    border-radius: 4px;
    outline: 0;
}

.file-limit-input input {
    height: 100%;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
}

.file-limit-input em {
    height: 100%;
    display: grid;
    place-items: center;
    color: #708497;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    background: #eef5fa;
    border-left: 1px solid #d6e1ea;
}

.file-filter-control select {
    padding: 0 10px;
}

@media (max-width: 980px) {
    .file-settings-panel {
        grid-template-columns: 1fr;
    }

    .file-limit-grid,
    .file-system-settings-grid,
    .file-decimal-settings-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 640px) {
    .file-limit-grid,
    .file-system-settings-grid,
    .file-decimal-settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-console {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 18px;
    background: #f6f9fc;
    min-height: 100%;
}

.settings-form-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.settings-form-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px;
}

.settings-form-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-form-title > span {
    color: #5c7084;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-form-title > strong {
    color: #1f2d3d;
    font-size: 18px;
    font-weight: 800;
}

.settings-form-title > em {
    color: #5c7084;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

button[data-action="add-footer-account"] {
    height: 34px;
    padding: 0 16px;
    background: #0f7b6c;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

button[data-action="add-footer-account"]:hover {
    background: #0d6658;
}

button[data-action="add-footer-account"]::before {
    content: "+ ";
    font-size: 16px;
    line-height: 1;
}

.company-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px 14px;
    min-width: 0;
}

.parameter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px 18px;
    min-width: 0;
}

.company-field,
.parameter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.company-field > span,
.parameter-field > span {
    color: #5c7084;
    font-size: 12px;
    font-weight: 800;
}

.parameter-field > span em.param-unit {
    color: #8a98a8;
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
}

.company-field input,
.parameter-field input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #cbd9e4;
    border-radius: 4px;
    outline: 0;
}

.company-field input:focus,
.parameter-field input:focus {
    border-color: #5b8fc6;
    box-shadow: 0 0 0 2px rgba(91, 143, 198, 0.18);
}

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
}

.settings-form-actions button {
    height: 32px;
    padding: 0 16px;
    background: #1f6fb4;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

.settings-form-actions button:hover {
    background: #195a93;
}

@media (max-width: 980px) {
    .parameter-grid {
        grid-template-columns: 1fr;
    }

    .company-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .company-grid {
        grid-template-columns: 1fr;
    }
}

.footer-accounts-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-accounts-empty {
    padding: 28px 20px;
    background: #f5f9fd;
    border: 1px dashed #c5d6e3;
    border-radius: 4px;
    color: #6b7c8e;
    font-size: 13px;
    text-align: center;
}

.footer-account-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) auto;
    gap: 12px 14px;
    padding: 12px 14px;
    background: #fafcfe;
    border: 1px solid #e2eaf2;
    border-radius: 4px;
    align-items: end;
}

.footer-account-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.footer-account-field > span {
    color: #5c7084;
    font-size: 11px;
    font-weight: 800;
}

.footer-account-field input {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #cbd9e4;
    border-radius: 3px;
    outline: 0;
}

.footer-account-field input:focus {
    border-color: #5b8fc6;
    box-shadow: 0 0 0 2px rgba(91, 143, 198, 0.18);
}

.footer-account-row button[data-action="remove-footer-account"] {
    height: 30px;
    padding: 0 12px;
    background: #fbe9e7;
    color: #b3261e;
    border: 1px solid #f3b9b4;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
}

.footer-account-row button[data-action="remove-footer-account"]:hover {
    background: #f8d7d2;
}

@media (max-width: 900px) {
    .footer-account-row {
        grid-template-columns: 1fr;
    }
}

.settings-form-hint {
    color: #5c7084;
    font-size: 12px;
    font-style: italic;
}

.units-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2eaf2;
    border-radius: 4px;
    overflow: hidden;
}

.units-table-row {
    display: grid;
    grid-template-columns: 100px minmax(120px, 1.2fr) minmax(120px, 1.2fr) 90px 90px 80px 70px minmax(150px, 1.4fr);
    gap: 0;
    border-bottom: 1px solid #e2eaf2;
}

.units-table-row:last-child {
    border-bottom: none;
}

.units-table-row > div {
    padding: 8px 10px;
    border-right: 1px solid #e2eaf2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.units-table-row > div:last-child {
    border-right: none;
}

.units-table-head {
    background: #eef3f9;
    font-weight: 800;
    color: #1f2d3d;
}

.units-table-row[data-unit-row]:hover {
    background: #f6f9fc;
}

.units-table-row button {
    height: 26px;
    padding: 0 10px;
    margin-right: 6px;
    background: #1f6fb4;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
}

.units-table-row button.danger {
    background: #b3261e;
}

.settings-form-search {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-form-search > span {
    color: #5c7084;
    font-size: 11px;
    font-weight: 800;
}

.settings-form-search input {
    height: 30px;
    width: 240px;
    padding: 0 10px;
    border: 1px solid #cbd9e4;
    border-radius: 3px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.modal-dialog {
    width: min(560px, 96vw);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e2eaf2;
    font-weight: 800;
    color: #1f2d3d;
}

.modal-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    color: #5c7084;
    cursor: pointer;
}

.modal-body {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    overflow-y: auto;
}

.unit-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.unit-form-field > span {
    color: #5c7084;
    font-size: 11px;
    font-weight: 800;
}

.unit-form-field input[type="text"],
.unit-form-field input[type="number"] {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #cbd9e4;
    border-radius: 3px;
}

.unit-form-field input:focus {
    border-color: #5b8fc6;
    box-shadow: 0 0 0 2px rgba(91, 143, 198, 0.18);
    outline: 0;
}

.unit-form-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    grid-column: span 2;
}

.modal-footer {
    padding: 12px 18px;
    border-top: 1px solid #e2eaf2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-footer button {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
    background: #eef3f9;
    color: #1f2d3d;
}

.modal-footer button.primary {
    background: #1f6fb4;
    color: #fff;
}

.record-permission-dialog {
    width: min(620px, 96vw);
}

.record-permission-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #e2eaf2;
    color: #455d73;
}

.record-permission-summary strong {
    color: #1f2d3d;
    font-size: 16px;
}

.record-permission-body {
    max-height: 52vh;
    overflow: auto;
    padding: 12px 18px;
}

.record-permission-table th,
.record-permission-table td {
    height: 34px;
}

.record-permission-table td:first-child {
    display: grid;
    gap: 2px;
}

.record-permission-table td:first-child span {
    color: #6b8194;
    font-size: 11px;
}

.record-permission-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 640px) {
    .modal-body {
        grid-template-columns: 1fr;
    }

    .unit-form-checkbox {
        grid-column: span 1;
    }
}

.file-table-frame {
    min-height: 0;
    overflow: auto;
}

.file-table {
    min-width: 1460px;
}

.file-table th,
.file-table td {
    height: 112px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.file-table th {
    height: 56px;
}

.file-table .file-col-check {
    width: 42px;
}

.file-table .file-col-index {
    width: 72px;
}

.file-table .file-col-preview {
    width: 190px;
}

.file-table .file-col-name {
    width: 280px;
}

.file-table .file-col-kind {
    width: 100px;
}

.file-table .file-col-size {
    width: 110px;
}

.file-table .file-col-uploader {
    width: 140px;
}

.file-table .file-col-source {
    width: 240px;
}

.file-table .file-col-state {
    width: 120px;
}

.file-table .file-col-date {
    width: 170px;
}

.file-thumb {
    display: grid;
    place-items: center;
    width: 166px;
    height: 94px;
    margin: 0 auto;
    overflow: hidden;
    background: #f4f8fb;
    border: 1px solid #c8d9e6;
    border-radius: 6px;
    cursor: zoom-in;
}

button.file-thumb {
    padding: 0;
}

.file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.file-thumb-empty {
    color: #708497;
    cursor: default;
    border-style: dashed;
    font-size: 12px;
    font-weight: 800;
}

button.file-thumb-empty {
    cursor: zoom-in;
}

.file-name-cell {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.file-name-cell strong,
.file-name-cell span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-name-cell strong {
    color: #203142;
}

.file-name-cell span {
    color: #76889a;
    font-size: 12px;
}

.file-kind {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    color: #17537a;
    background: #eaf4fb;
    border: 1px solid #c9ddec;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
}

.file-kind-image {
    color: #0f755e;
    background: #e7f7f2;
    border-color: #c6eadf;
}

.file-kind-video {
    color: #7357b8;
    background: #f1edff;
    border-color: #d8cffb;
}

.file-kind-document {
    color: #9a5b00;
    background: #fff4d8;
    border-color: #f2d89b;
}

.audit-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 12px 18px;
    background: #f8fbfd;
    border-bottom: 1px solid var(--line);
}

.audit-filters label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.audit-filters span {
    color: #5c7084;
    font-size: 12px;
    font-weight: 700;
}

.audit-filters input,
.audit-filters select {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cbd9e4;
    border-radius: 4px;
    outline: 0;
}

.audit-filters button {
    height: 32px;
    padding: 0 14px;
    color: #fff;
    background: var(--blue);
    border-radius: 4px;
    font-weight: 700;
}

.more-action-menu,
.window-settings-menu,
.top-action-menu {
    position: fixed;
    z-index: 60;
    display: grid;
    gap: 2px;
    width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid #b9cfdf;
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(4, 22, 38, .22);
}

.window-settings-menu {
    width: 220px;
}

.more-action-menu.hidden,
.window-settings-menu.hidden,
.top-action-menu.hidden {
    display: none;
}

.more-action-menu button,
.window-settings-menu button,
.top-action-menu button {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px;
    color: #263d52;
    background: transparent;
    border-radius: 3px;
    text-align: left;
}

.more-action-menu button,
.window-settings-menu button {
    grid-template-columns: 22px 1fr;
}

.more-action-menu button:hover,
.window-settings-menu button:hover,
.top-action-menu button:hover {
    color: #075f9f;
    background: #edf7ff;
}

.more-action-menu button.danger {
    color: #b4232d;
}

.more-action-menu span,
.window-settings-menu span,
.top-action-menu span {
    color: #0b84d8;
    text-align: center;
}

.top-action-menu {
    z-index: 70;
    width: 230px;
    padding: 0;
    overflow: hidden;
}

.top-action-panel {
    display: grid;
    gap: 4px;
    padding: 8px;
}

.top-action-panel strong {
    display: block;
    padding: 4px 7px 6px;
    color: #0f2d43;
    font-size: 13px;
    border-bottom: 1px solid #e4edf4;
}

.top-action-panel button {
    min-height: 32px;
    color: #28425a;
    font-size: 13px;
}

.top-action-panel > span {
    padding: 6px 8px 4px;
    color: #6a8395;
    line-height: 18px;
    text-align: left;
}

.notice-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px;
    color: #304b60;
    border-radius: 4px;
    background: #f3f8fc;
}

.notice-item b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #fff;
    background: #0b84d8;
    border-radius: 50%;
    font-size: 12px;
}

.notice-item span {
    color: #304b60;
    line-height: 18px;
    text-align: left;
}

.filter-panel {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: hidden;
    margin: 0 16px;
    background: #fff;
    border: 1px solid #d2e0ea;
    border-top: 0;
    box-shadow: 0 4px 12px rgba(15, 35, 52, .06);
}

.filter-panel.hidden {
    display: none;
}

.security-console {
    display: grid;
    gap: 10px;
    min-height: 0;
    align-content: start;
    grid-template-rows: auto auto;
    padding: 12px;
    color: #17202e;
    background: #eef3f8;
}

.security-summary-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.security-metric {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(24, 36, 52, .035);
}

.security-metric-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--security-accent, #1469ff);
    background: var(--security-soft, #eef5ff);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}

.security-metric em,
.security-metric small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #6b778a;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-metric strong {
    display: block;
    min-width: 0;
    margin: 3px 0 2px;
    overflow: hidden;
    color: #182338;
    font-size: 20px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-tone-blue { --security-accent: #1469ff; --security-soft: #eef5ff; }
.security-tone-green { --security-accent: #16825d; --security-soft: #eef8f4; }
.security-tone-violet { --security-accent: #6952d9; --security-soft: #f2f0ff; }
.security-tone-amber { --security-accent: #b56a00; --security-soft: #fbf3e8; }
.security-tone-red { --security-accent: #c83e4d; --security-soft: #fbf0f2; }
.security-tone-cyan { --security-accent: #0f8b9d; --security-soft: #eaf8fb; }

.security-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 10px;
    min-height: 0;
    align-items: start;
}

.security-list-panel,
.security-side-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(24, 36, 52, .04);
}

.security-list-panel {
    display: grid;
    grid-template-rows: auto auto auto;
    align-self: start;
    overflow: hidden;
}

.security-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 11px 14px;
    border-bottom: 1px solid #e6edf5;
}

.security-panel-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.security-panel-head span {
    color: #758194;
    font-size: 11px;
    font-weight: 900;
}

.security-panel-head strong {
    color: #17202e;
    font-size: 17px;
}

.security-panel-head em {
    min-width: 0;
    overflow: hidden;
    color: #667386;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.security-panel-actions button,
.security-quick-action {
    height: 30px;
    padding: 0 10px;
    color: #174fba;
    background: #f4f8ff;
    border: 1px solid #cfe0f5;
    border-radius: 6px;
    font-weight: 900;
}

.security-view-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 40px;
    padding: 0 14px;
    background: #fbfdff;
    border-bottom: 1px solid #e6edf5;
}

.security-strip-item {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 6px 12px;
    border-right: 1px solid #edf2f7;
}

.security-strip-item:last-child {
    border-right: 0;
}

.security-strip-item b {
    color: #6a788c;
    font-size: 11px;
    font-weight: 900;
}

.security-strip-item em {
    min-width: 0;
    overflow: hidden;
    color: #1e2b43;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-table-frame {
    min-height: 0;
    overflow: visible;
    padding-bottom: 18px;
}

.security-table-frame .erp-table {
    min-width: 1040px;
    height: auto;
}

.security-table-frame .generic-col-actions,
.numbering-table .generic-col-actions,
.print-template-table .generic-col-actions,
.import-export-table .generic-col-actions,
.workflow-table .generic-col-actions {
    width: 170px;
}

.security-table-frame .erp-table th {
    top: 0;
    height: 38px;
    color: #32445a;
    background: #f6f9fc;
    border-bottom-color: #dbe5ee;
    font-size: 13px;
}

.security-table-frame .erp-table td {
    height: 38px;
    border-bottom-color: #e8eef5;
    font-size: 13px;
}

.security-table-frame .erp-table tr.selected td {
    background: #e9f5fb;
}

.security-side-panel {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    height: max-content;
}

.security-side-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.security-side-title {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
}

.security-side-title span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #0f5f9c;
    background: #eef6fb;
    border-radius: 6px;
    font-weight: 900;
}

.security-side-title strong {
    color: #17202e;
    font-size: 15px;
}

.security-side-title em {
    color: #718095;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.security-risk-list,
.security-quick-grid {
    display: grid;
    gap: 9px;
}

.security-risk-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 62px;
    padding: 9px;
    text-align: left;
    background: #fbfcfe;
    border: 1px solid #e2e9f1;
    border-radius: 7px;
}

.security-risk-item > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--security-accent, #1469ff);
    background: var(--security-soft, #eef5ff);
    border-radius: 6px;
}

.security-risk-item > span::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    border-radius: 4px;
}

.security-risk-item strong {
    display: block;
    min-width: 0;
    color: #17202e;
    font-size: 13px;
    line-height: 1.25;
}

.security-risk-item em {
    display: block;
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    color: #667386;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.security-risk-item b {
    padding: 3px 6px;
    color: var(--security-accent, #1469ff);
    background: var(--security-soft, #eef5ff);
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
}

.security-risk-blue { --security-accent: #1469ff; --security-soft: #eef5ff; }
.security-risk-green { --security-accent: #16825d; --security-soft: #eef8f4; }
.security-risk-amber { --security-accent: #b56a00; --security-soft: #fbf3e8; }
.security-risk-red { --security-accent: #c83e4d; --security-soft: #fbf0f2; }

.security-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-quick-action {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: 38px;
    min-width: 0;
    padding: 0 9px;
    color: #24324b;
    background: #fbfcff;
    text-align: left;
}

.security-quick-action span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--security-accent, #1469ff);
    background: var(--security-soft, #eef5ff);
    border-radius: 7px;
    font-weight: 900;
}

.security-quick-action strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-panel-actions button:hover,
.security-risk-item:hover,
.security-quick-action:hover {
    border-color: #89b8f3;
    box-shadow: 0 0 0 2px rgba(20, 105, 255, .08);
}

.dashboard-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(286px, 320px);
    align-items: start;
    gap: 10px;
    min-height: calc(100vh - var(--topbar-height) - var(--tabs-height) - var(--status-height));
    padding: 12px;
    color: #17202e;
    background: #f5f7fb;
}

.dashboard-title-stack {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-eyebrow {
    color: #758194;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-title-stack h2 {
    margin: 0;
    color: #17202e;
    font-size: 25px;
    line-height: 1.08;
}

.dashboard-title-stack p {
    margin: 0;
    color: #667386;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.dashboard-main-column,
.dashboard-side-column {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(320px, 420px);
    align-items: center;
    gap: 10px;
    min-height: 58px;
}

.dashboard-ai-command {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px;
    color: #273246;
    text-align: left;
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(24, 36, 52, .05);
}

.dashboard-ai-command span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #1469ff;
    background: #eef5ff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-ai-command strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-priority-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 12px;
}

.dashboard-priority-card,
.dashboard-health-card,
.dashboard-panel,
.dashboard-profile-card {
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(24, 36, 52, .045);
}

.dashboard-priority-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 210px);
    gap: 14px;
    min-height: 138px;
    padding: 15px;
}

.dashboard-priority-copy {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
}

.dashboard-priority-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 23px;
    line-height: 1.16;
}

.dashboard-priority-copy p {
    max-width: 620px;
    margin: 0;
    color: #5f6d7f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.dashboard-next-action {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    color: #f8fbff;
    text-align: left;
    background: #111827;
    border: 1px solid #111827;
    border-radius: 8px;
}

.dashboard-next-action span {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    color: #b9f4dc;
    background: rgba(22, 130, 93, .22);
    border: 1px solid rgba(185, 244, 220, .32);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-next-action strong {
    font-size: 17px;
    line-height: 1.22;
}

.dashboard-next-action em {
    color: #cbd5e1;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.dashboard-health-card {
    display: grid;
    align-content: space-between;
    gap: 12px;
    min-height: 138px;
    padding: 14px;
}

.dashboard-health-body {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dashboard-score-ring {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: #102b3e;
    background:
        radial-gradient(circle closest-side, #fff 69%, transparent 70%),
        conic-gradient(#1f8f78 var(--score), #dbe5ec 0);
    border-radius: 50%;
}

.dashboard-score-ring strong {
    margin-top: 4px;
    font-size: 19px;
    line-height: .8;
}

.dashboard-score-ring span {
    color: #6a7b88;
    font-size: 9px;
    font-weight: 900;
}

.dashboard-health-body strong {
    color: #17202e;
    font-size: 16px;
    line-height: 1.28;
}

.dashboard-health-body p {
    margin: 4px 0 0;
    color: #667386;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.dashboard-health-card button,
.dashboard-panel-head button,
.dashboard-lane button,
.dashboard-profile-card button {
    height: 30px;
    padding: 0 10px;
    color: #174fba;
    background: #f4f8ff;
    border: 1px solid #cfe0f5;
    border-radius: 7px;
    font-weight: 900;
}

.dashboard-ai-command:hover,
.dashboard-next-action:hover,
.dashboard-health-card button:hover,
.dashboard-panel-head button:hover,
.dashboard-lane button:hover,
.dashboard-exception:hover,
.dashboard-workspace-tile:hover,
.dashboard-flow-insight:hover,
.dashboard-profile-card button:hover {
    border-color: #89b8f3;
    box-shadow: 0 0 0 2px rgba(20, 105, 255, .08);
}

.dashboard-signal-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-signal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 8px;
    min-height: 102px;
    padding: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(24, 36, 52, .035);
}

.dashboard-signal::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--metric-accent, #1469ff);
}

.dashboard-tone-blue { --metric-accent: #1469ff; --metric-soft: #edf5ff; }
.dashboard-tone-green { --metric-accent: #16825d; --metric-soft: #eef8f4; }
.dashboard-tone-amber { --metric-accent: #b56a00; --metric-soft: #fbf3e8; }
.dashboard-tone-red { --metric-accent: #c83e4d; --metric-soft: #fbf0f2; }
.dashboard-tone-violet { --metric-accent: #6952d9; --metric-soft: #f2f0ff; }

.dashboard-signal span {
    display: block;
    min-width: 0;
    color: #677386;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
}

.dashboard-signal strong {
    display: block;
    min-width: 0;
    margin-top: 7px;
    overflow: hidden;
    color: #17202e;
    font-size: 22px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-signal em,
.dashboard-signal small {
    display: block;
    min-width: 0;
    margin-top: 5px;
    overflow: hidden;
    color: #667386;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-signal small {
    color: var(--metric-accent, #1469ff);
    font-weight: 900;
}

.dashboard-spark {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 50px;
    padding: 6px;
    background: var(--metric-soft, #f2f6f9);
    border: 1px solid rgba(189, 207, 219, .5);
    border-radius: 8px;
}

.dashboard-spark i {
    flex: 1 1 0;
    min-width: 4px;
    background: var(--metric-accent, #1469ff);
    border-radius: 5px 5px 2px 2px;
    opacity: .86;
}

.dashboard-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(330px, .96fr);
    gap: 12px;
}

.dashboard-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    color: #293544;
}

.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
}

.dashboard-panel-head div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-panel-head span {
    color: #758194;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-panel-head strong {
    color: #17202e;
    font-size: 17px;
}

.dashboard-panel-head b {
    flex: 0 0 auto;
    padding: 6px 9px;
    color: #174fba;
    background: #eef5ff;
    border: 1px solid #d7e7ff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    font-style: normal;
}

.dashboard-lanes,
.dashboard-exception-list,
.dashboard-agent-list {
    display: grid;
    gap: 8px;
}

.dashboard-lane {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 9px;
    min-height: 60px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
}

.dashboard-lane-name {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-lane-name strong {
    color: #17202e;
    font-size: 14px;
}

.dashboard-lane-name span {
    color: #748094;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-lane-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dashboard-lane-flow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #d8e1ec;
}

.dashboard-node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 28px;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-node-done { background: #16825d; }
.dashboard-node-active { background: #1469ff; }
.dashboard-node-warn { background: #b56a00; }
.dashboard-node-wait { background: #a8b3c0; }

.dashboard-exception {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 10px;
    text-align: left;
    background: #fbfcfe;
    border: 1px solid #e0e7f0;
    border-radius: 8px;
}

.dashboard-exception i {
    display: grid;
    place-items: center;
    height: 30px;
    color: #fff;
    background: #16825d;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-exception-high i { background: #c83e4d; }
.dashboard-exception-warn i { background: #b56a00; }

.dashboard-exception strong,
.dashboard-agent strong,
.dashboard-workspace-tile strong,
.dashboard-flow-insight strong {
    display: block;
    min-width: 0;
    color: #17202e;
    font-size: 13px;
}

.dashboard-exception em,
.dashboard-agent em,
.dashboard-flow-insight em {
    display: block;
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
    color: #667386;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.dashboard-exception b {
    color: #17202e;
    font-size: 16px;
    text-align: right;
}

.dashboard-side-column {
    position: sticky;
    top: 0;
}

.dashboard-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
}

.dashboard-profile-card div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.dashboard-profile-card span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    color: #fff;
    background: #1469ff;
    border-radius: 8px;
    font-weight: 900;
}

.dashboard-profile-card strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #17202e;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-profile-card em {
    display: block;
    margin-top: 2px;
    color: #667386;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-ai-summary {
    display: grid;
    gap: 8px;
    padding: 13px;
    color: #fff;
    background: #111827;
    border-radius: 8px;
}

.dashboard-ai-summary span {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-ai-summary strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
}

.dashboard-ai-summary p {
    margin: 0;
    color: #d6dde8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.dashboard-agent {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 9px;
    background: #f8fafc;
    border: 1px solid #e0e7f0;
    border-radius: 8px;
}

.dashboard-agent i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: #1469ff;
    border-radius: 8px;
    font-style: normal;
    font-weight: 900;
}

.dashboard-agent-green i { background: #16825d; }
.dashboard-agent-violet i { background: #6952d9; }
.dashboard-agent-red i { background: #c83e4d; }

.dashboard-agent b {
    color: #17202e;
    font-size: 13px;
}

.dashboard-workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-workspace-tile,
.dashboard-flow-insight {
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e0e7f0;
    border-radius: 8px;
}

.dashboard-workspace-tile {
    min-height: 64px;
    padding: 10px;
}

.dashboard-workspace-tile span {
    display: block;
    margin-top: 6px;
    color: #667386;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-flow-insight {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 10px;
}

.dashboard-flow-insight b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: #1469ff;
    border-radius: 8px;
    font-size: 13px;
}

.dashboard-flow-insight i {
    color: #16825d;
    font-style: normal;
    font-size: 18px;
    font-weight: 900;
}

@media (max-width: 1500px) {
    .dashboard-workbench {
        grid-template-columns: 1fr;
    }

    .dashboard-side-column {
        position: static;
        grid-template-columns: minmax(240px, .75fr) minmax(280px, 1fr);
        align-items: start;
    }

    .dashboard-profile-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1180px) {
    .dashboard-signal-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-body-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dashboard-topbar,
    .dashboard-priority-row,
    .dashboard-priority-card,
    .dashboard-side-column {
        grid-template-columns: 1fr;
    }

    .dashboard-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-lane,
    .dashboard-exception {
        grid-template-columns: 1fr;
    }

    .dashboard-lane button,
    .dashboard-exception b {
        justify-self: start;
    }
}

@media (max-width: 620px) {
    .dashboard-signal-grid,
    .dashboard-workspace-grid {
        grid-template-columns: 1fr;
    }
}

.filter-strip {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(320px, 1fr) auto 28px;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 5px 10px;
    color: #19354d;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fc 100%);
}

.filter-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.filter-summary span {
    color: #7890a6;
    font-size: 11px;
}

.filter-summary strong {
    font-size: 15px;
}

.filter-close-button {
    width: 26px;
    height: 26px;
    color: #587087;
    background: transparent;
    border-radius: 3px;
    font-size: 22px;
    line-height: 1;
}

.filter-close-button:hover {
    color: var(--blue);
    background: #edf7ff;
}

.filter-form {
    display: grid;
    gap: 0;
    padding: 0;
}

.filter-inline-controls,
.filter-quick-grid,
.filter-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(118px, 180px);
    gap: 7px;
}

.filter-inline-controls .filter-field {
    gap: 0;
}

.filter-inline-controls .filter-field span {
    display: none;
}

.filter-advanced-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-top: 6px;
}

.filter-field-wide {
    grid-column: span 1;
}

.filter-field {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.filter-field span {
    color: #33516b;
    font-size: 10px;
    font-weight: 700;
}

.filter-field input,
.filter-field select {
    width: 100%;
    height: 26px;
    padding: 0 7px;
    color: #263d52;
    background: #fff;
    border: 1px solid #c9d9e6;
    border-radius: 3px;
    outline: 0;
    font-size: 13px;
}

.filter-field input:focus,
.filter-field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(0, 133, 216, .12);
}

.filter-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 22px;
    padding: 0;
    overflow: hidden;
}

.filter-chip-row.muted {
    color: #7890a6;
    font-size: 12px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 170px;
    height: 20px;
    padding: 0 8px;
    color: #1b5e8f;
    background: #edf7ff;
    border: 1px solid #cae3f6;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-advanced,
.filter-dynamic {
    display: grid;
    gap: 0;
    padding: 0 10px 6px;
    border-top: 1px solid #e3edf5;
}

.filter-advanced summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 22px;
    color: #254960;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 800;
}

.filter-advanced summary::-webkit-details-marker {
    display: none;
}

.filter-advanced summary::before {
    content: "▸";
    width: 16px;
    color: #0b84d8;
}

.filter-advanced[open] summary::before {
    content: "▾";
}

.filter-advanced summary span {
    margin-right: auto;
}

.filter-advanced summary small {
    color: #7890a6;
    font-size: 11px;
    font-weight: 700;
}

.filter-dynamic b {
    color: #19354d;
    font-size: 13px;
}

.filter-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 0;
    align-self: end;
}

.filter-panel-footer button {
    height: 28px;
    padding: 0 13px;
    color: #24506f;
    background: #fff;
    border: 1px solid #c7d8e5;
    border-radius: 3px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .filter-quick-grid,
    .filter-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-field-wide {
        grid-column: span 2;
    }
}

.filter-panel-footer button.primary {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}

.filter-empty {
    display: grid;
    gap: 8px;
    padding: 16px;
    color: #587087;
}

.filter-empty.compact {
    padding: 8px 10px;
    border-top: 1px solid #e3edf5;
}

.filter-empty strong {
    color: #19354d;
}

#masterDataDrawer,
.master-modal-backdrop,
.master-drawer {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: rgba(15, 23, 31, .46);
    backdrop-filter: blur(1px);
    z-index: 24;
}

#masterDataDrawer.hidden,
.master-modal-backdrop.hidden,
.master-drawer.hidden {
    display: none;
}

#masterDataDrawer .master-modal,
.master-modal,
.master-panel {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: min(1100px, calc(100vw - 180px));
    min-width: min(900px, calc(100vw - 48px));
    height: min(690px, calc(100vh - 92px));
    min-height: min(590px, calc(100vh - 48px));
    max-height: min(760px, calc(100vh - 48px));
    background: #fff;
    border: 1px solid #b8ccda;
    border-radius: 6px;
    box-shadow: 0 24px 72px rgba(4, 22, 38, .34);
    overflow: hidden;
    transform: none;
}

body #masterDataDrawer.master-modal-backdrop:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 26px !important;
}

body #masterDataDrawer .master-modal {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(1100px, calc(100vw - 180px)) !important;
    min-width: min(900px, calc(100vw - 48px)) !important;
    height: min(690px, calc(100vh - 92px)) !important;
    min-height: min(590px, calc(100vh - 48px)) !important;
    max-height: min(760px, calc(100vh - 48px)) !important;
    margin: 0 auto !important;
    transform: none !important;
}

body #masterDataDrawer .master-modal.is-maximized {
    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    height: calc(100vh - 28px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
}

body #masterDataDrawer:has(.master-modal.is-maximized) {
    padding: 14px !important;
}

body.density-comfortable #masterDataDrawer .master-modal,
body.density-comfortable .document-modal {
    font-size: 14px;
}

body.density-comfortable .master-form {
    gap: 2px 46px;
    padding-top: 18px;
    padding-bottom: 12px;
}

body.density-comfortable .master-field {
    min-height: 36px;
}

body.density-comfortable .modal-commands,
body.density-comfortable .master-commands {
    gap: 6px;
}

.master-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    flex: 0 0 40px;
    min-height: 40px;
    padding: 0 10px 0 22px;
    color: #fff;
    background: linear-gradient(90deg, #0576cf 0%, #0788d9 76%, #066dbe 100%);
}

.master-title-stack span,
.master-title-stack strong {
    display: block;
}

.master-title-stack {
    min-width: 86px;
}

.master-title-stack span {
    font-size: 11px;
    opacity: .86;
}

.master-title-stack strong {
    font-size: 17px;
    line-height: 1.1;
}

.master-header .modal-window-actions button {
    width: 30px;
    height: 30px;
    color: #fff;
    background: transparent;
    border-radius: 4px;
    font-size: 22px;
}

.master-header .modal-window-actions button:hover {
    background: rgba(255, 255, 255, .16);
}

.master-commands {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-self: start;
    min-width: 0;
    min-height: 32px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
}

.master-commands button {
    height: 28px;
    padding: 0 5px;
    color: rgba(255, 255, 255, .94);
    background: transparent;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1;
}

.master-commands button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .15);
}

.master-tabs {
    display: flex;
    align-items: end;
    gap: 16px;
    flex: 0 0 32px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

#masterDataDrawer .master-modal:has(.generic-line-section:not(.hidden)) .master-tabs {
    order: 4;
    flex-basis: 30px;
    padding: 0 22px;
    border-top: 1px solid #edf3f7;
}

.master-tabs button {
    height: 30px;
    padding: 0;
    color: #67798c;
    background: transparent;
    border-bottom: 2px solid transparent;
}

.master-tabs button.active {
    color: var(--blue-dark);
    border-bottom-color: var(--blue);
    font-weight: 700;
}

.master-form {
    display: grid;
    align-content: start;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 14px 28px 8px;
    overflow: auto;
    background: #fff;
}

.master-loading-state {
    display: grid;
    grid-column: 1 / -1;
    place-items: center;
    min-height: 220px;
    color: #4d6378;
    font-size: 14px;
}

#masterDataDrawer .master-modal:has(.generic-line-section:not(.hidden)) .master-form {
    order: 3;
}

#masterDataDrawer .master-modal:has(.generic-line-section:not(.hidden)) .generic-line-section {
    order: 5;
}

#masterDataDrawer .master-modal:has(.generic-line-section:not(.hidden)) .master-footer {
    order: 6;
}

#masterDataDrawer .master-modal:has(.generic-line-section.hidden) .master-form {
    flex: 1 1 360px;
    max-height: none;
}

#masterDataDrawer .master-modal:has(.generic-line-section:not(.hidden)) .master-form {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 6px;
}

.master-context-panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 12px;
    flex: 0 0 108px;
    padding: 0 22px 14px;
    background: #fff;
}

.master-context-panel.hidden {
    display: none;
}

.master-context-panel.focus-mode {
    flex: 1 1 auto;
    align-content: start;
    padding-top: 20px;
}

.master-context-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d9e5ee;
    background: #fbfdff;
}

.master-context-card strong {
    color: #263d52;
    font-size: 13px;
}

.master-context-card span {
    overflow: hidden;
    color: #5e7185;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-context-card b {
    color: #0b5f9f;
    font-weight: 800;
}

.master-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.master-context-actions button {
    height: 24px;
    padding: 0 8px;
    color: #31506a;
    background: #fff;
    border: 1px solid #c8d8e4;
    border-radius: 3px;
    font-size: 12px;
}

.master-context-actions button:hover {
    color: var(--blue-dark);
    border-color: var(--blue);
}

.master-field {
    display: grid;
    grid-template-columns: 18px 94px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 30px;
}

.master-field.tab-hidden {
    display: none;
}

.tab-hidden {
    display: none !important;
}

.master-field.wide {
    grid-column: 1 / -1;
    grid-template-columns: 18px 94px minmax(0, 1fr);
}

.master-field .field-icon {
    color: #0b84d8;
    font-weight: 800;
    text-align: center;
    font-size: 13px;
}

.master-field .field-label {
    min-width: 0;
    overflow: hidden;
    color: #2a465c;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-field input,
.master-field select,
.master-field textarea {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #334155;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #d5dee7;
    border-radius: 0;
    outline: 0;
}

.master-field input,
.master-field select {
    height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-field textarea {
    min-height: 58px;
    padding: 6px 0;
    resize: vertical;
}

.master-field textarea.json-editor {
    min-height: 118px;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 12px;
}

.master-field textarea.code-editor {
    min-height: 108px;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
}

.master-field input:focus,
.master-field select:focus,
.master-field textarea:focus {
    border-bottom-color: #0b84d8;
    box-shadow: none;
}

.master-field.locked input,
.master-field.locked select,
.master-field.locked textarea {
    color: #6f7f91;
    background: #f4f7fa;
}

.master-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 31px;
    color: #334155;
    font-size: 13px;
}

.master-check input {
    width: 16px;
    height: 16px;
}

.approval-status-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.approval-status-option {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: 36px;
    color: #53667a;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 850;
}

.approval-status-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.approval-status-option:has(input:checked),
.approval-status-option.is-selected {
    color: #0b5f99;
    background: #edf7ff;
    border-color: #0b84d8;
    box-shadow: 0 0 0 3px rgba(11, 132, 216, .08);
}

.approval-status-option:has(input[value="approved"]:checked) {
    color: #0f7a55;
    background: #eaf8f2;
    border-color: #12b886;
}

.approval-status-option:has(input[value="disabled"]:checked) {
    color: #b33145;
    background: #fbedf0;
    border-color: #e07b8a;
}

.approval-status-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: .72;
}

.role-permissions {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-height: 220px;
}

.role-permissions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #2a465c;
    font-size: 12px;
}

.role-permission-tools {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
    gap: 8px;
    align-items: center;
}

.role-permission-search {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    height: 32px;
    min-width: 0;
    padding: 0 8px;
    color: #7b8fa2;
    background: #fff;
    border: 1px solid #d9e5ee;
}

.role-permission-search input {
    min-width: 0;
    height: 100%;
    color: #22384d;
    background: transparent;
    border: 0;
    outline: 0;
}

.role-permission-tools button {
    height: 32px;
    padding: 0 10px;
    color: #244058;
    background: #fff;
    border: 1px solid #d9e5ee;
}

.role-permission-tools button:hover {
    border-color: #9fc4dc;
    background: #f3f9fd;
}

.role-permission-tools button.active {
    color: #075f91;
    border-color: #8ec8e8;
    background: #e8f5fc;
}

.role-permission-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 390px;
    overflow: auto;
    padding: 10px;
    background: #f8fbfd;
    border: 1px solid #d9e5ee;
}

.role-permission-module,
.role-permission-resource {
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e9f0;
}

.role-permission-module[open] > summary .permission-node-caret,
.role-permission-resource[open] > summary .permission-node-caret {
    transform: rotate(90deg);
}

.role-permission-module > summary,
.role-permission-resource > summary {
    display: grid;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
    list-style: none;
}

.role-permission-module > summary::-webkit-details-marker,
.role-permission-resource > summary::-webkit-details-marker {
    display: none;
}

.role-permission-module > summary {
    grid-template-columns: 16px 14px minmax(0, 1fr) auto;
    min-height: 38px;
    padding: 0 10px;
    color: #1f364b;
    background: #eef6fb;
}

.role-permission-module > summary strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-permission-module > summary em,
.role-permission-resource > summary em {
    color: #70879a;
    font-style: normal;
    font-size: 11px;
}

.permission-node-caret {
    display: inline-grid;
    place-items: center;
    width: 14px;
    color: #6f8799;
    font-size: 11px;
    transition: transform .16s ease;
}

.role-permission-resources {
    display: grid;
    gap: 6px;
    padding: 8px;
}

.role-permission-resource {
    border-color: #e6edf3;
}

.role-permission-resource > summary {
    grid-template-columns: 16px 14px minmax(0, 1fr) auto;
    min-height: 36px;
    padding: 0 9px;
    background: #fff;
}

.permission-resource-title {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.permission-resource-title strong,
.permission-resource-title em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-resource-title strong {
    color: #20384d;
    font-size: 13px;
}

.role-permission-resource > summary b {
    color: #547087;
    font-size: 11px;
}

.role-permission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 9px 9px 39px;
}

.role-permission-actions label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 7px;
    color: #3b5269;
    background: #f5f9fc;
    border: 1px solid #dce8f1;
    font-size: 12px;
}

.role-permission-actions label:has(input:checked) {
    color: #075f91;
    background: #e8f5fc;
    border-color: #a7cfe6;
}

.role-record-permissions {
    margin: 0 9px 10px 39px;
    border: 1px solid #dce8f1;
    background: #fbfdff;
}

.role-record-permissions-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 0 8px;
    border-bottom: 1px solid #e5eef5;
    color: #385168;
    font-size: 12px;
    font-weight: 800;
}

.role-record-permissions-title span {
    color: #6b8194;
    font-size: 11px;
}

.role-record-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 180px;
    overflow: auto;
    padding: 8px;
}

.role-record-permission-grid label {
    display: grid;
    grid-template-columns: 16px 72px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 24px;
    padding: 0 6px;
    background: #f6f9fc;
    border: 1px solid #dce8f1;
    color: #3b5269;
    font-size: 12px;
}

.role-record-permission-grid label:has(input:checked) {
    color: #075f91;
    background: #e8f5fc;
    border-color: #a7cfe6;
}

.role-record-permission-grid em {
    overflow: hidden;
    color: #6b8194;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-permission-module input,
.role-permission-resource input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.permission-filter-hidden {
    display: none !important;
}

.user-role-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-height: 260px;
    overflow: auto;
    padding: 10px;
    background: #f8fbfd;
    border: 1px solid #d9e5ee;
}

.user-role-option {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    color: #2f455b;
    background: #fff;
    border: 1px solid #dce8f1;
}

.user-role-option input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.user-role-option strong,
.user-role-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role-option small {
    color: #6e8091;
    font-size: 11px;
}

#masterDataDrawer .master-modal.user-master-modal {
    width: min(1040px, calc(100vw - 120px)) !important;
    height: min(720px, calc(100vh - 76px)) !important;
    min-width: min(860px, calc(100vw - 48px)) !important;
    min-height: 0 !important;
    max-height: min(720px, calc(100vh - 76px)) !important;
}

#masterDataDrawer .master-modal.user-master-modal .master-form {
    flex: 1 1 auto;
    display: block;
    min-height: 0;
    max-height: none;
    padding: 14px 18px 16px;
    overflow: auto;
    background: #eef3f8;
}

.user-form-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
    min-height: 0;
}

.user-form-shell.tab-hidden,
.user-role-panel.tab-hidden {
    display: none !important;
}

.user-identity-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(260px, .72fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
}

.user-avatar-xl {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: linear-gradient(135deg, #0f7fd2, #12a6a0);
    border-radius: 12px;
    font-size: 24px;
    font-weight: 900;
}

.user-identity-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.user-identity-main span,
.user-identity-main em,
.user-card-head em,
.user-security-note span {
    color: #6f7f91;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.user-identity-main strong {
    overflow: hidden;
    color: #172338;
    font-size: 22px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.user-identity-kpis span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    background: #f7fbff;
    border: 1px solid #e0ebf4;
    border-radius: 8px;
}

.user-identity-kpis b {
    overflow: hidden;
    color: #162842;
    font-size: 16px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-kpis em {
    overflow: hidden;
    color: #6a7b8d;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.user-status-badge.is-enabled {
    color: #0f7a55;
    background: #eaf8f2;
}

.user-status-badge.is-disabled {
    color: #b33145;
    background: #fbedf0;
}

.user-form-card,
.user-role-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.user-main-card,
.user-summary-card {
    padding: 14px;
}

.user-account-card {
    display: grid;
    gap: 14px;
}

.user-card-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.user-account-card .user-card-head {
    margin-bottom: 0;
}

.user-card-head > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #0b70c9;
    background: #edf6ff;
    border-radius: 8px;
    font-weight: 900;
}

.user-card-head strong {
    display: block;
    color: #1b2b42;
    font-size: 15px;
}

.user-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.user-field-grid .master-field {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    min-height: 42px;
}

.user-field-grid .master-field.wide {
    grid-column: 1 / -1;
    grid-template-columns: 110px minmax(0, 1fr);
}

.user-field-grid .master-field .field-icon {
    display: none;
}

.user-field-grid .master-field .field-label {
    color: #53667a;
    font-size: 13px;
    font-weight: 800;
}

.user-field-grid .master-field input {
    height: 36px;
    padding: 0 10px;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 6px;
}

.user-field-grid .master-field input:focus {
    background: #fff;
    border-color: #0b84d8;
    box-shadow: 0 0 0 3px rgba(11, 132, 216, .1);
}

.user-summary-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.user-summary-list span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 0 10px;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 6px;
}

.user-summary-list b {
    color: #617386;
    font-size: 12px;
}

.user-summary-list em {
    min-width: 0;
    overflow: hidden;
    color: #22344c;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-security-note {
    display: grid;
    gap: 8px;
}

.user-security-note.compact {
    padding-top: 10px;
    border-top: 1px solid #edf3f8;
}

.user-security-note strong {
    color: #1b2b42;
    font-size: 14px;
}

.user-security-note span {
    display: block;
    padding-left: 10px;
    border-left: 3px solid #d7e7f5;
    line-height: 1.55;
}

.user-role-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.user-role-panel .role-permissions-header {
    min-height: 36px;
}

.user-role-panel .role-permissions-header div {
    display: grid;
    gap: 2px;
}

.user-role-panel .role-permissions-header strong {
    color: #1b2b42;
    font-size: 15px;
}

.user-role-panel .role-permissions-header span {
    color: #6f7f91;
    font-size: 12px;
    font-weight: 800;
}

#masterDataDrawer .user-master-modal .user-role-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    padding: 0;
    background: transparent;
    border: 0;
}

#masterDataDrawer .user-master-modal .user-role-option {
    min-height: 58px;
    border-radius: 8px;
}

.user-switch-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 12px;
    background: #f8fbfd;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    cursor: pointer;
}

.user-switch-row.inline {
    min-height: 54px;
    margin: 0;
}

.user-switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.user-switch-row > span {
    position: relative;
    width: 42px;
    height: 24px;
    background: #c8d4df;
    border-radius: 999px;
    transition: background .18s ease;
}

.user-switch-row > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    content: "";
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(20, 35, 50, .2);
    transition: transform .18s ease;
}

.user-switch-row input:checked + span {
    background: #16a574;
}

.user-switch-row input:checked + span::after {
    transform: translateX(18px);
}

.user-switch-row strong,
.user-switch-row em {
    display: block;
}

.user-switch-row strong {
    color: #1b2b42;
    font-size: 14px;
}

.user-switch-row em {
    margin-top: 3px;
    color: #6f7f91;
    font-style: normal;
    font-size: 12px;
}

.user-empty-state {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 120px;
    color: #73869a;
    background: #f8fbfd;
    border: 1px dashed #ccdbe8;
    border-radius: 8px;
    font-weight: 800;
}

#masterDataDrawer .master-modal.security-object-modal {
    width: min(1080px, calc(100vw - 120px)) !important;
    height: min(720px, calc(100vh - 76px)) !important;
    min-width: min(860px, calc(100vw - 48px)) !important;
}

#masterDataDrawer .master-modal.security-object-modal .master-form {
    flex: 1 1 auto;
    display: block;
    min-height: 0;
    max-height: none;
    padding: 14px 18px 16px;
    overflow: auto;
    background: #eef3f8;
}

#masterDataDrawer .master-modal.security-object-modal.user-master-modal {
    width: min(1040px, calc(100vw - 120px)) !important;
    height: min(720px, calc(100vh - 76px)) !important;
    min-width: min(860px, calc(100vw - 48px)) !important;
    min-height: 0 !important;
    max-height: min(720px, calc(100vh - 76px)) !important;
}

#masterDataDrawer .master-modal.security-object-modal.user-master-modal .master-form {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none !important;
}

.security-object-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
}

.security-object-shell.tab-hidden,
.security-object-panel.tab-hidden {
    display: none !important;
}

.security-object-hero {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
}

.security-object-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: linear-gradient(135deg, #1358d8, #16a574);
    border-radius: 12px;
    font-size: 22px;
    font-weight: 900;
}

.security-object-mark.scope-mark {
    background: linear-gradient(135deg, #0d8aa8, #16a574);
}

.security-object-mark.config-mark {
    background: linear-gradient(135deg, #0b74d1, #7d5cff);
}

.security-object-mark.workflow-mark {
    background: linear-gradient(135deg, #0f8b9d, #16a574);
}

.security-object-mark.print-mark {
    background: linear-gradient(135deg, #0b74d1, #ff8a00);
}

.security-object-mark.import-export-mark {
    background: linear-gradient(135deg, #0f8b9d, #7d5cff);
}

.security-object-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.security-object-title span,
.security-object-title em,
.security-object-head em {
    color: #6f7f91;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.security-object-title em,
.security-object-head em,
.user-card-head em,
.role-permissions-header div span,
.user-security-note,
.security-side-title em,
.permission-resource-title em,
.template-helper-box span {
    display: none !important;
}

.security-object-title strong {
    overflow: hidden;
    color: #172338;
    font-size: 22px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-object-status {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.security-object-status.is-enabled {
    color: #0f7a55;
    background: #eaf8f2;
}

.security-object-status.is-disabled {
    color: #b33145;
    background: #fbedf0;
}

.security-object-card,
.security-object-panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.security-object-main,
.security-object-aside {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 14px;
}

.security-object-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.security-object-head > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #0b70c9;
    background: #edf6ff;
    border-radius: 8px;
    font-weight: 900;
}

.security-object-head strong {
    display: block;
    color: #1b2b42;
    font-size: 15px;
}

.security-object-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.security-object-fields .master-field {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    min-height: 42px;
}

.security-object-fields .master-field.wide {
    grid-column: 1 / -1;
    grid-template-columns: 96px minmax(0, 1fr);
}

.security-object-fields .master-field .field-icon {
    display: none;
}

.security-object-fields .master-field .field-label {
    color: #53667a;
    font-size: 13px;
    font-weight: 800;
}

.security-object-fields .master-field input,
.security-object-fields .master-field select,
.security-object-fields .master-field textarea {
    padding: 0 10px;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 6px;
}

.security-object-fields .master-field input,
.security-object-fields .master-field select {
    height: 36px;
}

.security-object-fields .master-field textarea {
    min-height: 84px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.security-object-fields .master-field input:focus,
.security-object-fields .master-field select:focus,
.security-object-fields .master-field textarea:focus {
    background: #fff;
    border-color: #0b84d8;
    box-shadow: 0 0 0 3px rgba(11, 132, 216, .1);
}

.security-object-facts {
    display: grid;
    gap: 8px;
}

.security-object-facts span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    padding: 0 10px;
    overflow: hidden;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 6px;
}

.security-object-facts b {
    flex: 0 0 auto;
    max-width: 96px;
    overflow: hidden;
    color: #617386;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-object-facts em {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #22344c;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-object-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.security-object-panel .role-permissions-header {
    min-height: 36px;
}

.security-object-panel .role-permissions-header div {
    display: grid;
    gap: 2px;
}

.security-object-panel .role-permissions-header strong {
    color: #1b2b42;
    font-size: 15px;
}

.security-object-panel .role-permissions-header span {
    color: #6f7f91;
    font-size: 12px;
    font-weight: 800;
}

#masterDataDrawer .security-object-modal .role-permission-list {
    max-height: none;
    padding: 0;
    background: transparent;
    border: 0;
}

#masterDataDrawer .security-object-modal .role-permission-module,
#masterDataDrawer .security-object-modal .role-permission-resource {
    border-radius: 8px;
}

#masterDataDrawer .security-object-modal .user-role-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    padding: 0;
    background: transparent;
    border: 0;
}

#masterDataDrawer .security-object-modal .user-role-option {
    min-height: 58px;
    border-radius: 8px;
}

#masterDataDrawer .master-modal.master-object-modal {
    --document-content-x: 16px;
    width: min(1280px, calc(100vw - 72px)) !important;
    height: min(820px, calc(100vh - 56px)) !important;
    min-height: 0 !important;
    max-height: min(820px, calc(100vh - 56px)) !important;
    min-width: min(980px, calc(100vw - 48px)) !important;
    border-color: #d5e2ed;
    background: #eef3f8;
}

#masterDataDrawer .master-modal.master-object-modal.is-maximized {
    height: calc(100vh - 28px) !important;
    max-height: calc(100vh - 28px) !important;
}

#masterDataDrawer .master-object-modal .master-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 52px 42px;
    gap: 0;
    flex-basis: 94px;
    min-height: 94px;
    padding: 0;
    color: #17324a;
    background: #fff;
    border-bottom: 1px solid #e3ebf2;
}

#masterDataDrawer .master-object-modal .master-title-stack {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    min-width: 0;
    padding: 0 14px 0 24px;
}

#masterDataDrawer .master-object-modal .master-title-stack span {
    display: none;
    color: #6f7f91;
    opacity: 1;
    font-weight: 800;
}

#masterDataDrawer .master-object-modal .master-title-stack strong {
    min-width: 0;
    overflow: hidden;
    color: #16263a;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#masterDataDrawer .master-object-modal .master-commands {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    justify-self: stretch;
    gap: 8px;
    min-height: 42px;
    padding: 0 22px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border-top: 1px solid #e3ebf2;
    scrollbar-width: thin;
}

#masterDataDrawer .master-object-modal .master-commands button {
    height: 30px;
    padding: 0 5px;
    color: #2f4154;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}

#masterDataDrawer .master-object-modal .master-commands button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

#masterDataDrawer .master-object-modal .master-header .modal-window-actions button {
    color: #24455f;
}

#masterDataDrawer .master-object-modal .master-header .modal-window-actions {
    grid-column: 2;
    grid-row: 1;
    padding: 0 14px;
}

#masterDataDrawer .master-object-modal .master-header .modal-window-actions button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

#masterDataDrawer .master-object-modal .master-tabs {
    flex: 0 0 52px;
    align-items: center;
    align-self: center;
    width: calc(100% - (var(--document-content-x) * 2));
    min-width: 0;
    min-height: 44px;
    margin: 10px 0 8px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
    scrollbar-width: thin;
}

#masterDataDrawer .master-object-modal .master-tabs button {
    height: 38px;
    font-size: 14px;
}

#masterDataDrawer .master-object-modal .master-form {
    display: block;
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none !important;
    padding: 0;
    overflow: auto;
    background: #eef3f8;
    scrollbar-gutter: stable;
}

#masterDataDrawer .master-object-modal .master-context-panel {
    display: none;
}

#masterDataDrawer .master-object-modal .master-commands [data-master-action="new"],
#masterDataDrawer .master-object-modal .master-commands [data-master-action="print"],
#masterDataDrawer .master-object-modal .master-commands [data-master-action="prev"],
#masterDataDrawer .master-object-modal .master-commands [data-master-action="next"],
#masterDataDrawer .master-object-modal .master-commands [data-master-action="more"],
#masterDataDrawer .master-object-modal .master-commands .command-separator {
    display: none !important;
}

#masterDataDrawer .master-object-modal.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-object-modal.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-object-modal.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-object-modal.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-object-modal.is-draft-record .master-commands [data-master-action="delete"] {
    display: none !important;
}

#masterDataDrawer .master-object-modal.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-object-modal.is-disabled-record .master-commands [data-master-action="disable"] {
    display: none !important;
}

#masterDataDrawer .master-object-product-groups .master-commands [data-master-action="copy"],
#masterDataDrawer .master-object-product-groups .master-commands [data-master-action="delete"],
#masterDataDrawer .master-object-customer-groups .master-commands [data-master-action="copy"],
#masterDataDrawer .master-object-customer-groups .master-commands [data-master-action="delete"],
#masterDataDrawer .master-object-supplier-groups .master-commands [data-master-action="copy"],
#masterDataDrawer .master-object-supplier-groups .master-commands [data-master-action="delete"] {
    display: none !important;
}

#masterDataDrawer .master-modal.master-object-header-footers {
    width: min(1128px, calc(100vw - 96px)) !important;
}

#masterDataDrawer .master-object-header-footers .master-object-shell {
    grid-template-columns: minmax(0, 1fr);
}

#masterDataDrawer .master-object-header-footers .master-object-aside {
    display: none;
}

#masterDataDrawer .master-object-header-footers .master-object-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#masterDataDrawer .master-object-header-footers [data-master-field-key="headerText"],
#masterDataDrawer .master-object-header-footers [data-master-field-key="footerText"] {
    grid-template-columns: 72px minmax(0, 1fr);
}

#masterDataDrawer .master-object-header-footers [data-master-field-key="headerText"] textarea,
#masterDataDrawer .master-object-header-footers [data-master-field-key="footerText"] textarea {
    min-height: 190px;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.55;
    resize: vertical;
}

#masterDataDrawer .master-object-header-footers [data-master-field-key="remarks"] textarea {
    min-height: 132px;
    resize: vertical;
}

#masterDataDrawer .master-object-customer-products .master-object-shell,
#masterDataDrawer .master-object-supplier-products .master-object-shell {
    grid-template-columns: minmax(0, 1fr);
}

#masterDataDrawer .master-object-customer-products .master-object-fields,
#masterDataDrawer .master-object-supplier-products .master-object-fields {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.party-product-picker-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-width: 0;
}

.party-product-picker-field button {
    min-width: 58px;
    height: 36px;
    padding: 0 10px;
    color: #21445f;
    background: #f4f9fc;
    border: 1px solid #c9dbe8;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

.party-product-picker-field button:hover:not(:disabled) {
    color: #0b75c9;
    background: #edf7ff;
    border-color: #9cc8e8;
}

.party-product-picker-field button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.party-product-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(16, 30, 45, .28);
}

.party-product-picker-backdrop.hidden {
    display: none;
}

.party-product-picker-dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(920px, calc(100vw - 56px));
    max-height: min(680px, calc(100vh - 56px));
    overflow: hidden;
    background: #fff;
    border: 1px solid #ccddea;
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(14, 31, 50, .28);
}

.party-product-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px 0 18px;
    color: #172d42;
    border-bottom: 1px solid #e2ebf2;
}

.party-product-picker-header strong {
    font-size: 16px;
}

.party-product-picker-header button {
    width: 32px;
    height: 32px;
    color: #41576b;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 20px;
    line-height: 1;
}

.party-product-picker-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 14px;
    background: #f6f9fc;
    border-bottom: 1px solid #e2ebf2;
}

.party-product-picker-search input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #cbdbe7;
    border-radius: 6px;
}

.party-product-picker-search button,
.party-product-picker-table button {
    height: 32px;
    padding: 0 12px;
    color: #fff;
    background: #0b75c9;
    border: 0;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 800;
}

.party-product-picker-table-wrap {
    min-height: 0;
    overflow: auto;
}

.party-product-picker-table {
    min-width: 860px;
}

.party-product-picker-table th,
.party-product-picker-table td {
    height: 38px;
    padding: 0 10px;
    white-space: nowrap;
}

#masterDataDrawer .master-object-customer-products [data-master-field-key="packingTop"],
#masterDataDrawer .master-object-customer-products [data-master-field-key="packingBottom"],
#masterDataDrawer .master-object-customer-products [data-master-field-key="packingMark"],
#masterDataDrawer .master-object-customer-products [data-master-field-key="remarkTop"],
#masterDataDrawer .master-object-customer-products [data-master-field-key="remarkBottom"],
#masterDataDrawer .master-object-customer-products [data-master-field-key="remarks"],
#masterDataDrawer .master-object-supplier-products [data-master-field-key="packingTop"],
#masterDataDrawer .master-object-supplier-products [data-master-field-key="packingBottom"],
#masterDataDrawer .master-object-supplier-products [data-master-field-key="packingMark"],
#masterDataDrawer .master-object-supplier-products [data-master-field-key="remarkTop"],
#masterDataDrawer .master-object-supplier-products [data-master-field-key="remarkBottom"],
#masterDataDrawer .master-object-supplier-products [data-master-field-key="remarks"] {
    grid-template-columns: 92px minmax(0, 1fr);
}

#masterDataDrawer .master-object-customer-products [data-master-field-key="packingTop"] textarea,
#masterDataDrawer .master-object-customer-products [data-master-field-key="packingBottom"] textarea,
#masterDataDrawer .master-object-customer-products [data-master-field-key="remarkTop"] textarea,
#masterDataDrawer .master-object-customer-products [data-master-field-key="remarkBottom"] textarea,
#masterDataDrawer .master-object-supplier-products [data-master-field-key="packingTop"] textarea,
#masterDataDrawer .master-object-supplier-products [data-master-field-key="packingBottom"] textarea,
#masterDataDrawer .master-object-supplier-products [data-master-field-key="remarkTop"] textarea,
#masterDataDrawer .master-object-supplier-products [data-master-field-key="remarkBottom"] textarea {
    min-height: 132px;
    resize: vertical;
}

#masterDataDrawer .master-object-customer-products [data-master-field-key="packingMark"] textarea,
#masterDataDrawer .master-object-customer-products [data-master-field-key="remarks"] textarea,
#masterDataDrawer .master-object-supplier-products [data-master-field-key="packingMark"] textarea,
#masterDataDrawer .master-object-supplier-products [data-master-field-key="remarks"] textarea {
    min-height: 110px;
    resize: vertical;
}

.party-product-lines-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    background: #fff;
}

.party-product-lines-scroll {
    min-width: 0;
    overflow: auto;
    border-top: 1px solid #e3edf5;
    scrollbar-gutter: stable;
}

.party-product-lines-table {
    width: max-content;
    min-width: 1120px;
    border-collapse: collapse;
    table-layout: fixed;
}

.party-product-lines-table th,
.party-product-lines-table td {
    height: 36px;
    padding: 0 8px;
    border-right: 1px solid #e3edf5;
    border-bottom: 1px solid #e3edf5;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
}

.party-product-lines-table th {
    color: #496176;
    background: #f6f9fc;
    font-weight: 800;
}

.party-product-lines-table input,
.party-product-lines-table select {
    width: 100%;
    min-width: 88px;
    height: 34px;
    overflow: hidden;
    border: 0;
    outline: 0;
    padding: 0 8px;
    background: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-product-lines-table tr.selected td {
    background: #edf6ff;
}

.party-product-lines-actions {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-top: 0;
    background: #fbfdff;
}

.party-product-lines-actions button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #c8d8e6;
    border-radius: 6px;
    color: #24516f;
    background: #fff;
    font-weight: 800;
}

.party-master-lines-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    background: #fff;
}

.party-master-lines-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fbfdff;
}

.party-master-lines-actions button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #c8d8e6;
    border-radius: 6px;
    color: #24516f;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

.party-master-lines-actions button:hover {
    border-color: #0b84d8;
    color: #0b84d8;
}

.party-master-lines-scroll {
    min-width: 0;
    overflow: auto;
    border-top: 1px solid #d7e4ef;
    background: #fff;
    scrollbar-gutter: stable;
}

.party-master-lines-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.party-master-lines-table th,
.party-master-lines-table td {
    height: 36px;
    padding: 0 8px;
    border-right: 1px solid #e3edf5;
    border-bottom: 1px solid #e3edf5;
    text-align: left;
    white-space: nowrap;
    background: #fff;
}

.party-master-lines-table th {
    height: 36px;
    color: #496176;
    background: #f6f9fc;
    font-weight: 800;
}

.party-master-lines-table .row-index,
.party-master-lines-table .row-sort {
    width: 44px;
    min-width: 44px;
    text-align: center;
    color: #6a7f91;
}

.party-master-lines-table input[type="text"],
.party-master-lines-table input[type="email"],
.party-master-lines-table input[type="file"] {
    width: 100%;
    height: 34px;
    min-width: 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: transparent;
    color: #15263a;
    padding: 0 8px;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-master-file-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.party-master-file-cell input[readonly] {
    color: #475569;
}

.party-master-file-button {
    height: 26px;
    padding: 0 10px;
    border: 1px solid #c8d8e6;
    border-radius: 4px;
    background: #f8fbff;
    color: #24516f;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.party-master-file-button:hover {
    border-color: #0b84d8;
    color: #0b84d8;
}

.party-master-lines-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-left: 0;
}

.party-master-lines-table tr.selected td {
    background: #edf6ff;
}

.master-object-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
    padding: 0 var(--document-content-x) 14px;
}

.master-object-summary {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.master-object-tabs-slot {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
}

.master-object-tabs-slot .master-tabs {
    width: 100% !important;
    margin: 0;
    box-sizing: border-box;
}

.master-object-summary-bar {
    grid-template-columns: 40px minmax(118px, 170px) minmax(0, 1fr);
    min-height: 66px;
    padding: 8px 10px;
    overflow: visible;
}

.master-object-summary-bar .document-summary-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 16px;
}

.master-object-summary-bar .document-summary-title {
    gap: 1px;
}

.master-object-summary-bar .document-summary-title strong {
    font-size: 16px;
}

.master-object-summary-bar .document-summary-title span {
    color: #6f7f91;
    font-size: 11px;
    font-weight: 900;
}

.master-object-kpis span[data-summary-kind="datetime"] {
    flex: 1.35 0 176px;
    min-width: 176px;
}

.master-object-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: linear-gradient(135deg, #0b74d1, #16a574);
    border-radius: 12px;
    font-size: 21px;
    font-weight: 900;
}

.master-mark-customer {
    background: linear-gradient(135deg, #0b74d1, #16a574);
}

.master-mark-supplier {
    background: linear-gradient(135deg, #5b6ff0, #0f8b9d);
}

.master-mark-product {
    background: linear-gradient(135deg, #0b74d1, #ff8a00);
}

.master-mark-warehouse {
    background: linear-gradient(135deg, #0f8b9d, #16a574);
}

.master-mark-bank {
    background: linear-gradient(135deg, #0f7a55, #0b74d1);
}

.master-mark-org {
    background: linear-gradient(135deg, #334155, #0f8b9d);
}

.master-mark-employee {
    background: linear-gradient(135deg, #1358d8, #16a574);
}

.master-mark-unit {
    background: linear-gradient(135deg, #0f8b9d, #5b6ff0);
}

.master-mark-category {
    background: linear-gradient(135deg, #0b74d1, #6952d9);
}

.master-mark-currency {
    background: linear-gradient(135deg, #0f7a55, #16a574);
}

.master-mark-tax {
    background: linear-gradient(135deg, #b56a00, #0b74d1);
}

.master-mark-barcode {
    background: linear-gradient(135deg, #334155, #5b6ff0);
}

.master-mark-store {
    background: linear-gradient(135deg, #ff8a00, #0f8b9d);
}

.master-mark-department {
    background: linear-gradient(135deg, #334155, #16a574);
}

.master-mark-position {
    background: linear-gradient(135deg, #6952d9, #0b74d1);
}

.master-mark-zone {
    background: linear-gradient(135deg, #0f8b9d, #334155);
}

.master-mark-bin {
    background: linear-gradient(135deg, #16a574, #0b74d1);
}

.master-object-title {
    display: grid;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.master-object-title span,
.master-object-title em,
.master-object-card-title em,
.master-object-section-head em {
    color: #6f7f91;
    font-style: normal;
    font-size: 12px;
    font-weight: 750;
}

.master-object-title em,
.master-object-card-title em,
.master-object-section-head em {
    display: none !important;
}

.master-object-title span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #0b70c9;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-object-title strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #172338;
    font-size: 22px;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-object-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 120px;
    height: 28px;
    overflow: hidden;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-object-status.is-enabled,
.master-object-status.is-approved {
    color: #0f7a55;
    background: #eaf8f2;
}

.master-object-status.is-unapproved {
    color: #8a5a00;
    background: #fff2c9;
}

.master-object-status.is-disabled {
    color: #b33145;
    background: #fbedf0;
}

.master-object-main,
.master-object-aside {
    display: grid;
    gap: 0;
    min-width: 0;
}

.master-object-section,
.master-object-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 12px clamp(24px, 2.2vw, 34px) 18px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.master-object-section.tab-hidden {
    display: none !important;
}

.master-object-section-head,
.master-object-card-title {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.master-object-section-head > div,
.master-object-card-title > div {
    min-width: 0;
    overflow: hidden;
}

.master-object-section-head > span,
.master-object-card-title > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #0b70c9;
    background: #edf6ff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.master-object-section-head strong,
.master-object-card-title strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #1b2b42;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-object-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 12px clamp(32px, 4vw, 72px);
    align-items: start;
    width: min(1560px, 100%);
    margin: 0 auto;
    padding: 10px 4px 0;
}

.master-object-fields .master-field {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    min-height: 34px;
}

.master-object-fields .master-field.wide {
    grid-column: 1 / -1;
    grid-template-columns: max-content minmax(0, 1fr);
}

.master-object-fields .master-field.master-name-field {
    grid-column: 1 / -1;
}

.master-object-fields .master-field.master-code-field input {
    text-transform: uppercase;
}

.master-object-fields .master-field .field-icon {
    display: none;
}

.master-object-fields .master-field .field-label {
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    color: #496176;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-object-fields .master-field input,
.master-object-fields .master-field select,
.master-object-fields .master-field textarea {
    padding: 0 6px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d8e4ef;
    border-radius: 0;
}

.master-object-fields .master-field input,
.master-object-fields .master-field select {
    height: 30px;
}

.master-object-fields .master-field textarea {
    min-height: 84px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.master-object-fields .master-field input:focus,
.master-object-fields .master-field select:focus,
.master-object-fields .master-field textarea:focus {
    background: #fff;
    border-bottom-color: var(--blue);
    box-shadow: none;
}

.master-object-fields .master-field.master-image-field,
.master-object-fields .master-field:has(.product-image-slot) {
    grid-column: span 1;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    min-height: 252px;
}

.product-image-slot {
    display: grid;
    grid-template-rows: minmax(180px, 1fr) 32px;
    gap: 8px;
    min-width: 0;
}

.product-image-preview {
    display: grid;
    place-items: center;
    min-height: 180px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f4f8fb;
    border: 1px dashed #c5d7e5;
    border-radius: 6px;
    cursor: zoom-in;
}

.product-image-preview.is-empty,
.product-image-preview.is-disabled {
    cursor: default;
}

.product-image-preview.is-loading-thumbnail {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)),
        #f4f8fb;
    background-size: 180px 100%, 100% 100%;
    background-position: -180px 0, 0 0;
    background-repeat: no-repeat;
    animation: product-image-thumb-loading 1.15s linear infinite;
}

.product-image-preview img {
    width: 100%;
    height: 100%;
    max-height: 240px;
    object-fit: contain;
}

@keyframes product-image-thumb-loading {
    to {
        background-position: calc(100% + 180px) 0, 0 0;
    }
}

.product-image-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.product-image-actions button,
.currency-rate-actions button,
.currency-rate-table button {
    height: 30px;
    min-width: 58px;
    padding: 0 12px;
    color: #17537a;
    background: #f1f7fc;
    border: 1px solid #cbddea;
    border-radius: 6px;
    font-weight: 850;
}

.product-image-actions button:disabled,
.currency-rate-actions button:disabled,
.currency-rate-table button:disabled {
    color: #9aaaba;
    cursor: not-allowed;
    background: #f5f7f9;
}

.product-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 34px;
    background: rgba(9, 23, 38, .72);
}

.product-image-viewer.hidden {
    display: none;
}

.product-image-viewer-canvas {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: grab;
}

.product-image-viewer-canvas:active {
    cursor: grabbing;
}

.product-image-viewer img {
    max-width: min(96vw, 1280px);
    max-height: 92vh;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
    transform-origin: center center;
    transition: transform .08s linear;
    user-select: none;
    will-change: transform;
}

.product-image-viewer-tools {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: center;
}

.product-image-viewer button {
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 850;
}

.currency-rate-panel {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    min-width: 0;
}

.currency-rate-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 6px;
}

.currency-rate-table th,
.currency-rate-table td {
    height: 40px;
    padding: 6px 8px;
    background: #fff;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
}

.currency-rate-table th {
    color: #53667a;
    background: #f8fbfd;
    font-size: 12px;
    font-weight: 900;
}

.currency-rate-table th:last-child,
.currency-rate-table td:last-child {
    width: 74px;
    text-align: center;
}

.currency-rate-table input {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 5px;
}

.currency-rate-actions {
    display: flex;
    justify-content: flex-end;
}

.product-group-items-panel {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    min-width: 0;
}

.product-group-items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 6px;
}

.product-group-items-table th,
.product-group-items-table td {
    height: 42px;
    padding: 6px 8px;
    background: #fff;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
}

.product-group-items-table th {
    color: #53667a;
    background: #f8fbfd;
    font-size: 12px;
    font-weight: 900;
}

.product-group-items-table th:first-child,
.product-group-items-table td:first-child {
    width: 62px;
    text-align: center;
}

.product-group-items-table tr.selected td {
    background: #eef7ff;
}

.product-group-items-table input {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 5px;
}

.product-group-items-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.product-group-items-actions button {
    height: 30px;
    min-width: 58px;
    padding: 0 12px;
    color: #17537a;
    background: #f1f7fc;
    border: 1px solid #cbddea;
    border-radius: 6px;
    font-weight: 850;
}

.product-condition-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 12px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    background: #fff;
}

.product-condition-actions {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: #fbfdff;
}

.product-condition-actions button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #c8d8e6;
    border-radius: 6px;
    color: #24516f;
    background: #fff;
    font-weight: 800;
}

.product-condition-scroll {
    min-width: 0;
    overflow: auto;
    border-top: 1px solid #e3edf5;
    scrollbar-gutter: stable;
}

.product-condition-table {
    width: max-content;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.product-condition-table th,
.product-condition-table td {
    height: 36px;
    padding: 0 8px;
    border-right: 1px solid #e3edf5;
    border-bottom: 1px solid #e3edf5;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
}

.product-condition-table th {
    color: #496176;
    background: #f6f9fc;
    font-weight: 800;
}

.product-condition-table input {
    width: 100%;
    min-width: 78px;
    height: 34px;
    padding: 0 8px;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-condition-table tr.selected td {
    background: #edf6ff;
}

.master-object-facts,
.master-object-tips {
    display: grid;
    gap: 8px;
}

.master-object-facts span,
.master-object-tips span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: 0 14px;
    overflow: hidden;
    color: #3b5269;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 750;
}

.master-object-facts b {
    flex: 0 0 auto;
    max-width: 112px;
    overflow: hidden;
    color: #617386;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-object-facts em {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #22344c;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#masterDataDrawer .master-modal.generic-object-modal {
    width: min(1220px, calc(100vw - 96px)) !important;
    height: min(720px, calc(100vh - 76px)) !important;
    min-width: min(980px, calc(100vw - 48px)) !important;
    min-height: 0 !important;
    max-height: min(760px, calc(100vh - 48px)) !important;
    border-color: #d5e2ed;
    background: #eef3f8;
}

#masterDataDrawer .master-modal.generic-object-modal.is-maximized {
    height: calc(100vh - 28px) !important;
    max-height: calc(100vh - 28px) !important;
}

#masterDataDrawer .generic-object-modal .master-header {
    flex-basis: 52px;
    min-height: 52px;
    color: #17324a;
    background: #fff;
    border-bottom: 1px solid #dce7f0;
}

#masterDataDrawer .generic-object-modal .master-title-stack span {
    color: #6f7f91;
    opacity: 1;
    font-weight: 800;
}

#masterDataDrawer .generic-object-modal .master-title-stack strong {
    color: #16263a;
    font-size: 18px;
}

#masterDataDrawer .generic-object-modal .master-commands button {
    color: #24455f;
    font-weight: 700;
}

#masterDataDrawer .generic-object-modal .master-commands button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

#masterDataDrawer .generic-object-modal .master-header .modal-window-actions button {
    color: #24455f;
}

#masterDataDrawer .generic-object-modal .master-header .modal-window-actions button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

#masterDataDrawer .master-modal.generic-object-modal .master-commands [data-master-action="new"],
#masterDataDrawer .master-modal.generic-object-modal .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-modal .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-modal .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-modal .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-modal .master-commands .command-separator {
    display: none !important;
}

#masterDataDrawer .master-modal.generic-object-modal.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-modal.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-modal.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-modal.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-modal.is-draft-record .master-commands [data-master-action="delete"] {
    display: none !important;
}

#masterDataDrawer .master-modal.generic-object-modal.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-modal.is-disabled-record .master-commands [data-master-action="disable"] {
    display: none !important;
}

#masterDataDrawer .master-modal.generic-object-reports .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-reports .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-reports .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-reports .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-analytics .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-analytics .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-analytics .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-analytics .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-agent .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-agent .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-agent .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-agent .master-commands [data-master-action="more"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-reports .master-commands .command-separator,
#masterDataDrawer .master-modal.generic-object-analytics .master-commands .command-separator,
#masterDataDrawer .master-modal.generic-object-agent .master-commands .command-separator {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-reports.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-reports.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-reports.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-reports.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-reports.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .master-modal.generic-object-analytics.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-analytics.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-analytics.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-analytics.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-analytics.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .master-modal.generic-object-agent.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-agent.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-agent.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-agent.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-agent.is-draft-record .master-commands [data-master-action="delete"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-reports.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-reports.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-analytics.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-analytics.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-agent.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-agent.is-disabled-record .master-commands [data-master-action="disable"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-integration .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-integration .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-integration .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-integration .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-config .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-config .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-config .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-config .master-commands [data-master-action="more"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-integration .master-commands .command-separator,
#masterDataDrawer .master-modal.generic-object-config .master-commands .command-separator {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-integration.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-integration.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-integration.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-integration.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-integration.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .master-modal.generic-object-config.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-config.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-config.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-config.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-config.is-draft-record .master-commands [data-master-action="delete"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-integration.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-integration.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-config.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-config.is-disabled-record .master-commands [data-master-action="disable"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-warehouse .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-warehouse .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-warehouse .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-warehouse .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-production .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-production .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-production .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-production .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-quality .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-quality .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-quality .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-quality .master-commands [data-master-action="more"],
#masterDataDrawer .master-modal.generic-object-transport .master-commands [data-master-action="print"],
#masterDataDrawer .master-modal.generic-object-transport .master-commands [data-master-action="prev"],
#masterDataDrawer .master-modal.generic-object-transport .master-commands [data-master-action="next"],
#masterDataDrawer .master-modal.generic-object-transport .master-commands [data-master-action="more"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-warehouse .master-commands .command-separator,
#masterDataDrawer .master-modal.generic-object-production .master-commands .command-separator,
#masterDataDrawer .master-modal.generic-object-quality .master-commands .command-separator,
#masterDataDrawer .master-modal.generic-object-transport .master-commands .command-separator {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-warehouse.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-warehouse.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-warehouse.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-warehouse.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-warehouse.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .master-modal.generic-object-production.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-production.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-production.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-production.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-production.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .master-modal.generic-object-quality.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-quality.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-quality.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-quality.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-quality.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .master-modal.generic-object-transport.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .master-modal.generic-object-transport.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .master-modal.generic-object-transport.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-transport.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-transport.is-draft-record .master-commands [data-master-action="delete"] {
    display: none;
}

#masterDataDrawer .master-modal.generic-object-warehouse.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-warehouse.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-production.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-production.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-quality.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-quality.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .master-modal.generic-object-transport.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .master-modal.generic-object-transport.is-disabled-record .master-commands [data-master-action="disable"] {
    display: none;
}

#masterDataDrawer .generic-object-modal .master-tabs {
    order: 2 !important;
    flex-basis: 42px !important;
    align-items: center;
    background: #fbfdff;
    border-top: 0 !important;
}

#masterDataDrawer .generic-object-modal .master-form,
#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section:not(.hidden)) .master-form,
#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section.hidden) .master-form {
    order: 3 !important;
    display: block;
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #eef3f8;
}

#masterDataDrawer .generic-object-modal .master-context-panel {
    display: none;
}

#masterDataDrawer .generic-object-modal .generic-line-section {
    order: 4 !important;
    flex: 0 0 210px;
    margin: 0 14px 12px;
    overflow: hidden;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section:not(.hidden):not(.tab-hidden)) .master-form {
    flex: 0 0 auto !important;
    max-height: none !important;
    padding-bottom: 8px;
    overflow: visible;
}

#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section:not(.hidden):not(.tab-hidden)) .generic-object-shell {
    display: block;
}

#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section:not(.hidden):not(.tab-hidden)) .generic-object-main,
#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section:not(.hidden):not(.tab-hidden)) .generic-object-aside {
    display: none !important;
}

#masterDataDrawer .master-modal.generic-object-modal:has(.generic-line-section:not(.hidden):not(.tab-hidden)) .generic-line-section {
    flex: 1 1 auto;
    min-height: 260px;
}

#masterDataDrawer .generic-object-modal .generic-line-section.tab-hidden {
    display: none !important;
}

#masterDataDrawer .generic-object-modal .master-footer {
    order: 5 !important;
}

.generic-object-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
}

.generic-object-hero {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(240px, 380px);
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    min-height: 88px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.generic-object-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: linear-gradient(135deg, #0b74d1, #16a574);
    border-radius: 12px;
    font-size: 21px;
    font-weight: 900;
}

.generic-mark-finance {
    background: linear-gradient(135deg, #0f7a55, #0b74d1);
}

.generic-mark-warehouse {
    background: linear-gradient(135deg, #0f8b9d, #16a574);
}

.generic-mark-purchase {
    background: linear-gradient(135deg, #5b6ff0, #0f8b9d);
}

.generic-mark-sales {
    background: linear-gradient(135deg, #0b74d1, #ff8a00);
}

.generic-mark-crm {
    background: linear-gradient(135deg, #1358d8, #7d5cff);
}

.generic-mark-assets {
    background: linear-gradient(135deg, #334155, #0b74d1);
}

.generic-mark-integration {
    background: linear-gradient(135deg, #0f8b9d, #5b6ff0);
}

.generic-mark-config {
    background: linear-gradient(135deg, #334155, #16a574);
}

.generic-mark-planning {
    background: linear-gradient(135deg, #0b74d1, #5b6ff0);
}

.generic-mark-production {
    background: linear-gradient(135deg, #334155, #ff8a00);
}

.generic-mark-quality {
    background: linear-gradient(135deg, #0f7a55, #16a574);
}

.generic-mark-transport {
    background: linear-gradient(135deg, #0f8b9d, #334155);
}

.generic-mark-project {
    background: linear-gradient(135deg, #6952d9, #0b74d1);
}

.generic-mark-channel {
    background: linear-gradient(135deg, #ff8a00, #0b74d1);
}

.generic-mark-reports {
    background: linear-gradient(135deg, #0b74d1, #0f8b9d);
}

.generic-mark-analytics {
    background: linear-gradient(135deg, #1358d8, #16a574);
}

.generic-mark-agent {
    background: linear-gradient(135deg, #0f8b9d, #6952d9);
}

.generic-object-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.generic-object-title span,
.generic-object-title em,
.generic-object-card-title em,
.generic-object-section-head em {
    color: #6f7f91;
    font-style: normal;
    font-size: 12px;
    font-weight: 750;
}

.generic-object-title em,
.generic-object-card-title em,
.generic-object-section-head em,
.document-summary-title em {
    display: none !important;
}

.generic-object-title strong {
    overflow: hidden;
    color: #172338;
    font-size: 22px;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generic-object-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.generic-object-kpis span {
    display: grid;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    padding: 9px 10px;
    overflow: hidden;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 8px;
}

.generic-object-kpis b {
    color: #6f7f91;
    font-size: 11px;
}

.generic-object-kpis em {
    overflow: hidden;
    color: #172338;
    font-style: normal;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generic-object-main,
.generic-object-aside {
    display: grid;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.generic-object-section,
.generic-object-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 14px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.generic-object-section.tab-hidden {
    display: none !important;
}

.generic-object-section-head,
.generic-object-card-title {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.generic-object-section-head > span,
.generic-object-card-title > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #0b70c9;
    background: #edf6ff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.generic-object-section-head strong,
.generic-object-card-title strong {
    display: block;
    color: #1b2b42;
    font-size: 15px;
}

.generic-object-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.generic-object-fields .master-field {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    min-height: 42px;
}

.generic-object-fields .master-field.wide {
    grid-column: 1 / -1;
    grid-template-columns: 96px minmax(0, 1fr);
}

.generic-object-fields .master-field .field-icon {
    display: none;
}

.generic-object-fields .master-field .field-label {
    color: #53667a;
    font-size: 13px;
    font-weight: 800;
}

.generic-object-fields .master-field input,
.generic-object-fields .master-field select,
.generic-object-fields .master-field textarea {
    padding: 0 10px;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 6px;
}

.generic-object-fields .master-field input,
.generic-object-fields .master-field select {
    height: 36px;
}

.generic-object-fields .master-field textarea {
    min-height: 84px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.generic-object-fields .master-field input:focus,
.generic-object-fields .master-field select:focus,
.generic-object-fields .master-field textarea:focus {
    background: #fff;
    border-color: #0b84d8;
    box-shadow: 0 0 0 3px rgba(11, 132, 216, .1);
}

.generic-object-facts,
.generic-object-tips {
    display: grid;
    gap: 8px;
}

.generic-object-facts span,
.generic-object-tips span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    padding: 0 10px;
    overflow: hidden;
    color: #3b5269;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 750;
}

.generic-object-facts b {
    flex: 0 0 auto;
    max-width: 96px;
    overflow: hidden;
    color: #617386;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generic-object-facts em {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #22344c;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#masterDataDrawer .master-modal.security-object-modal,
#masterDataDrawer .master-modal.config-object-modal {
    height: min(720px, calc(100vh - 76px)) !important;
    min-height: 0 !important;
    max-height: min(720px, calc(100vh - 76px)) !important;
    background: #eef3f8;
}

#masterDataDrawer .master-modal.security-object-modal.is-maximized,
#masterDataDrawer .master-modal.config-object-modal.is-maximized {
    height: calc(100vh - 28px) !important;
    max-height: calc(100vh - 28px) !important;
}

#masterDataDrawer .security-object-modal .master-header,
#masterDataDrawer .config-object-modal .master-header {
    flex-basis: 52px;
    min-height: 52px;
    color: #17324a;
    background: #fff;
    border-bottom: 1px solid #dce7f0;
}

#masterDataDrawer .security-object-modal .master-title-stack span,
#masterDataDrawer .config-object-modal .master-title-stack span {
    color: #6f7f91;
    opacity: 1;
    font-weight: 800;
}

#masterDataDrawer .security-object-modal .master-title-stack strong,
#masterDataDrawer .config-object-modal .master-title-stack strong {
    color: #16263a;
    font-size: 18px;
}

#masterDataDrawer .security-object-modal .master-commands button,
#masterDataDrawer .config-object-modal .master-commands button {
    color: #24455f;
    font-weight: 700;
}

#masterDataDrawer .security-object-modal .master-commands button:hover,
#masterDataDrawer .config-object-modal .master-commands button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

#masterDataDrawer .security-object-modal .master-header .modal-window-actions button,
#masterDataDrawer .config-object-modal .master-header .modal-window-actions button {
    color: #24455f;
}

#masterDataDrawer .security-object-modal .master-header .modal-window-actions button:hover,
#masterDataDrawer .config-object-modal .master-header .modal-window-actions button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

#masterDataDrawer .security-object-modal .master-tabs,
#masterDataDrawer .config-object-modal .master-tabs {
    flex-basis: 42px;
    align-items: center;
    background: #fbfdff;
}

#masterDataDrawer .master-modal.security-object-modal .master-form,
#masterDataDrawer .master-modal.config-object-modal .master-form {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: auto;
}

#masterDataDrawer .security-object-modal .master-commands [data-master-action="print"],
#masterDataDrawer .security-object-modal .master-commands [data-master-action="new"],
#masterDataDrawer .security-object-modal .master-commands [data-master-action="prev"],
#masterDataDrawer .security-object-modal .master-commands [data-master-action="next"],
#masterDataDrawer .security-object-modal .master-commands [data-master-action="more"],
#masterDataDrawer .config-object-modal .master-commands [data-master-action="new"],
#masterDataDrawer .config-object-modal .master-commands [data-master-action="print"],
#masterDataDrawer .config-object-modal .master-commands [data-master-action="prev"],
#masterDataDrawer .config-object-modal .master-commands [data-master-action="next"],
#masterDataDrawer .config-object-modal .master-commands [data-master-action="more"] {
    display: none;
}

#masterDataDrawer .security-object-modal .master-commands .command-separator,
#masterDataDrawer .config-object-modal .master-commands .command-separator {
    display: none;
}

#masterDataDrawer .security-object-modal.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .security-object-modal.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .security-object-modal.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .security-object-modal.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .security-object-modal.is-draft-record .master-commands [data-master-action="delete"],
#masterDataDrawer .config-object-modal.is-draft-record .master-commands [data-master-action="copy"],
#masterDataDrawer .config-object-modal.is-draft-record .master-commands [data-master-action="restore"],
#masterDataDrawer .config-object-modal.is-draft-record .master-commands [data-master-action="disable"],
#masterDataDrawer .config-object-modal.is-draft-record .master-commands [data-master-action="enable"],
#masterDataDrawer .config-object-modal.is-draft-record .master-commands [data-master-action="delete"] {
    display: none;
}

#masterDataDrawer .security-object-modal.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .security-object-modal.is-disabled-record .master-commands [data-master-action="disable"],
#masterDataDrawer .config-object-modal.is-enabled-record .master-commands [data-master-action="enable"],
#masterDataDrawer .config-object-modal.is-disabled-record .master-commands [data-master-action="disable"] {
    display: none;
}

#masterDataDrawer .user-master-modal .master-commands [data-master-action="new"],
#masterDataDrawer .user-master-modal .master-commands [data-master-action="copy"],
#masterDataDrawer .user-master-modal .master-commands [data-master-action="restore"],
#masterDataDrawer .user-master-modal .master-commands [data-master-action="print"],
#masterDataDrawer .user-master-modal .master-commands [data-master-action="prev"],
#masterDataDrawer .user-master-modal .master-commands [data-master-action="next"],
#masterDataDrawer .user-master-modal .master-commands [data-master-action="more"],
#masterDataDrawer .user-master-modal .master-commands .command-separator {
    display: none !important;
}

.numbering-sample-box {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    background: #f8fbfd;
    border: 1px solid #dbe7f0;
    border-radius: 8px;
}

.numbering-sample-box span {
    display: block;
    min-height: 38px;
    overflow: hidden;
    color: #0b5f9f;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 18px;
    font-weight: 900;
    line-height: 38px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.numbering-sample-box.compact span {
    font-size: 16px;
}

.numbering-sample-box div {
    display: flex;
    gap: 8px;
}

.numbering-sample-box button {
    height: 30px;
    padding: 0 12px;
    color: #174fba;
    background: #fff;
    border: 1px solid #c8d8e4;
    border-radius: 6px;
    font-weight: 800;
}

.numbering-sample-box button:hover {
    color: var(--blue-dark);
    border-color: var(--blue);
}

#masterDataDrawer .config-object-modal .workflow-step-panel {
    min-height: 0;
}

#masterDataDrawer .config-object-modal .workflow-steps-header {
    min-height: 38px;
}

#masterDataDrawer .config-object-modal .workflow-steps-header > div:first-child {
    display: grid;
    gap: 2px;
}

#masterDataDrawer .config-object-modal .workflow-steps-header strong {
    color: #1b2b42;
    font-size: 15px;
}

#masterDataDrawer .config-object-modal .workflow-steps-header span {
    color: #6f7f91;
    font-size: 12px;
    font-weight: 800;
}

#masterDataDrawer .config-object-modal .workflow-step-grid {
    border-radius: 8px;
    background: #fff;
}

.template-code-grid {
    display: grid;
    gap: 12px;
}

.template-code-grid .master-field {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
}

.template-code-grid .master-field .field-icon {
    display: none;
}

.template-code-grid .master-field .field-label {
    color: #53667a;
    font-size: 13px;
    font-weight: 800;
}

.template-code-grid .master-field textarea {
    min-height: 108px;
    padding: 10px;
    background: #f8fbfd;
    border: 1px solid #cedde8;
    border-radius: 6px;
}

.template-helper-box {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background: #f8fbfd;
    border: 1px solid #dbe7f0;
    border-radius: 8px;
}

.template-helper-box strong {
    color: #1b2b42;
    font-size: 14px;
}

.template-helper-box span {
    color: #6f7f91;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.template-helper-box button {
    justify-self: start;
    height: 30px;
    padding: 0 12px;
    color: #174fba;
    background: #fff;
    border: 1px solid #c8d8e4;
    border-radius: 6px;
    font-weight: 800;
}

.template-helper-box button:hover {
    color: var(--blue-dark);
    border-color: var(--blue);
}

.template-toggle-row {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.template-toggle-row .user-switch-row {
    min-height: 62px;
}

.inline-checks {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 36px;
    color: #334155;
    font-size: 13px;
}

.inline-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inline-checks input {
    width: 16px;
    height: 16px;
}

.split-inputs {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px;
}

.numbering-preview,
.print-template-preview,
.import-export-sample {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fbfd;
    border: 1px solid #d9e5ee;
}

.numbering-preview div,
.print-template-preview div,
.import-export-sample div {
    display: grid;
    gap: 4px;
}

.numbering-preview strong,
.print-template-preview strong,
.import-export-sample strong {
    color: #2a465c;
    font-size: 12px;
}

.numbering-preview span {
    color: #0b5f9f;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 18px;
    font-weight: 800;
}

.print-template-preview span,
.import-export-sample span {
    color: #61758a;
    font-size: 12px;
    white-space: pre-wrap;
}

.numbering-preview button,
.print-template-preview button,
.import-export-sample button {
    height: 30px;
    padding: 0 12px;
    color: #31506a;
    background: #fff;
    border: 1px solid #c8d8e4;
    border-radius: 4px;
}

.numbering-preview button:hover,
.print-template-preview button:hover,
.import-export-sample button:hover {
    color: var(--blue-dark);
    border-color: var(--blue);
}

.workflow-steps {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
}

.workflow-steps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #2a465c;
    font-size: 12px;
}

.workflow-steps-header div {
    display: flex;
    gap: 8px;
}

.workflow-steps-header button {
    height: 28px;
    padding: 0 8px;
    color: #31506a;
    background: #fff;
    border: 1px solid #c8d8e4;
    border-radius: 4px;
}

.workflow-step-grid {
    overflow: auto;
    border: 1px solid #d9e5ee;
}

.workflow-step-grid table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
}

.workflow-step-grid th,
.workflow-step-grid td {
    height: 34px;
    padding: 4px 6px;
    border-right: 1px solid #e3ebf2;
    border-bottom: 1px solid #e3ebf2;
    font-size: 12px;
}

.workflow-step-grid th {
    color: #28445b;
    background: #f2f7fb;
}

.workflow-step-grid input,
.workflow-step-grid select,
.workflow-step-grid textarea {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #d5dee7;
    border-radius: 3px;
}

.workflow-step-grid textarea {
    height: 30px;
    padding: 5px 6px;
    resize: vertical;
}

.master-footer {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 36px;
    padding: 0 14px 0 20px;
    color: #6a7c8d;
    background: #f7fafc;
    border-top: 1px solid #dde8f0;
    font-size: 12px;
}

.master-footer > span:empty {
    display: none;
}

.master-footer:has(> span:empty) {
    justify-content: flex-end;
}

.master-footer div {
    display: flex;
    gap: 8px;
}

.master-footer button {
    height: 28px;
    min-width: 64px;
    padding: 0 11px;
    color: #31506a;
    background: #fff;
    border: 1px solid #c8d8e4;
    border-radius: 4px;
    font-weight: 700;
}

.master-footer button.primary {
    color: #fff;
    background: #0788d9;
    border-color: #0788d9;
}

.master-footer button:hover {
    border-color: #0788d9;
}

.generic-line-section {
    display: grid;
    grid-template-rows: 32px minmax(0, 1fr) 32px;
    flex: 1 1 276px;
    min-height: 150px;
    padding: 0 20px 10px;
    background: #fff;
    border-top: 1px solid #e2ebf2;
    overflow: hidden;
}

#masterDataDrawer .master-modal:has(.generic-line-section:not(.hidden)) .master-context-panel:not(.focus-mode) {
    display: none;
}

.generic-line-section.hidden {
    display: none;
}

.generic-line-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #263d52;
    font-size: 12px;
    border-top: 1px solid #f2f6fa;
}

.generic-line-left,
.generic-line-tools {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.generic-line-left strong {
    margin-right: 8px;
    color: #20364a;
    font-size: 13px;
    font-weight: 800;
}

.generic-line-tools {
    justify-content: flex-end;
    margin-left: auto;
}

.generic-line-toolbar button {
    height: 25px;
    padding: 0 5px;
    color: #2f5068;
    background: #fff;
    border: 0;
    border-radius: 3px;
    font-size: 12px;
}

.generic-line-tools button {
    min-width: 24px;
    border-left: 1px solid #e1e9f0;
    border-radius: 0;
}

.generic-line-toolbar button:hover {
    color: var(--blue-dark);
    background: #edf7ff;
}

.generic-line-scroll {
    overflow: auto;
    border: 1px solid #d9e5ee;
    background: #fff;
}

.generic-line-table {
    min-width: 1040px;
}

.generic-line-table th,
.generic-line-table td {
    height: 30px;
    padding: 0 7px;
    font-size: 12px;
}

.generic-line-table th {
    color: #253d52;
    background: #eef5fa;
    font-weight: 800;
}

.generic-line-table .row-index {
    width: 46px;
    min-width: 46px;
    text-align: center;
}

.generic-line-table td[contenteditable="true"] {
    outline: 0;
}

.generic-line-table td[contenteditable="true"]:focus {
    background: #fffceb;
    box-shadow: inset 0 0 0 1px #f5c542;
}

.generic-line-table tr.selected td {
    background: #e9f6ff;
}

.generic-line-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    color: #1f3347;
    background: #fbfdff;
    border: 1px solid #d9e5ee;
    border-top: 0;
    font-size: 12px;
    font-weight: 700;
}

.list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 16px;
    color: #53677b;
    background: #f8fbfd;
    border-top: 1px solid var(--line);
    font-size: 12px;
}

#footerHint:empty {
    display: none;
}

.footer-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7d8f;
}

.footer-metrics strong {
    color: #1f3347;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(28, 36, 44, .42);
    z-index: 20;
}

.modal-backdrop.hidden {
    display: none;
}

.document-modal {
    --document-content-x: 16px;
    display: grid;
    grid-template-rows: 52px 42px auto minmax(0, 1fr);
    width: min(1280px, calc(100vw - 72px));
    height: min(820px, calc(100vh - 56px));
    min-width: min(980px, calc(100vw - 48px));
    min-height: min(680px, calc(100vh - 56px));
    background: #eef3f8;
    border: 1px solid #d5e2ed;
    border-radius: 6px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.document-modal.is-maximized {
    width: calc(100vw - 28px);
    min-width: 0;
    height: calc(100vh - 28px);
    min-height: 0;
}

.modal-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 24px;
    color: #17324a;
    background: #fff;
    border-bottom: 1px solid #dce7f0;
}

.modal-title {
    font-size: 18px;
    font-weight: 800;
}

.modal-window-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-window-actions button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #24455f;
    background: transparent;
    border-radius: 4px;
    font-size: 20px;
}

.modal-window-actions button:hover {
    color: #0a6fc4;
    background: #edf6ff;
}

.modal-commands {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #e3ebf2;
}

.document-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px var(--document-content-x) 8px;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    background: #eef3f8;
    z-index: 3;
}

.document-summary-bar,
.document-summary-hero,
.document-summary-side,
.document-summary-tips {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 12px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.document-summary-bar {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(118px, 170px) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 66px;
    padding: 8px 10px;
    overflow: visible;
}

.document-summary-hero {
    display: grid;
    grid-template-columns: 54px minmax(160px, .5fr) minmax(340px, 1fr);
    align-items: center;
    gap: 12px;
}

.document-summary-mark {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 900;
}

.document-summary-bar .document-summary-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 16px;
}

.document-mark-sales {
    background: linear-gradient(135deg, #0b74d1, #ff8a00);
}

.document-mark-purchase {
    background: linear-gradient(135deg, #5b6ff0, #0f8b9d);
}

.document-mark-receipt {
    background: linear-gradient(135deg, #0f8b9d, #16a574);
}

.document-summary-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.document-summary-title span {
    color: #6f7f91;
    font-size: 11px;
    font-weight: 900;
}

.document-summary-title strong {
    overflow: hidden;
    color: #172338;
    font-size: 22px;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-summary-bar .document-summary-title {
    gap: 1px;
}

.document-summary-bar .document-summary-title strong {
    font-size: 16px;
}

.document-summary-title em {
    overflow: hidden;
    color: #6f7f91;
    font-style: normal;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-summary-kpis {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.document-summary-kpis span,
.document-summary-side span,
.document-summary-tips span {
    display: grid;
    gap: 3px;
    flex: 1 1 104px;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    padding: 7px 9px;
    overflow: visible;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 7px;
}

.document-summary-bar .document-summary-kpis span {
    min-height: 42px;
    padding: 6px 8px;
}

.document-summary-kpis span[data-summary-kind="datetime"] {
    flex: 1.35 0 176px;
    min-width: 176px;
    overflow: visible;
}

.document-summary-side span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
}

.document-summary-kpis b,
.document-summary-side b {
    min-width: 0;
    overflow: visible;
    color: #6f7f91;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.18;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.document-summary-side b {
    flex: 0 0 auto;
    max-width: 112px;
}

.document-summary-kpis em,
.document-summary-side em {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    color: #172338;
    font-style: normal;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.document-summary-kpis span[data-summary-kind="datetime"] em {
    overflow: visible;
    font-size: 12px;
    text-overflow: clip;
    white-space: nowrap;
    word-break: normal;
}

.document-summary-side em {
    flex: 1 1 auto;
    text-align: left;
}

.document-summary-side,
.document-summary-tips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
}

.document-summary-tips {
    grid-template-columns: 1fr;
}

.document-summary-tips span {
    display: flex;
    align-items: center;
    min-height: 28px;
    color: #3b5269;
    font-size: 12px;
    font-weight: 750;
}

.modal-commands button {
    height: 30px;
    padding: 0 5px;
    color: #2f4154;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
}

.modal-commands button:hover {
    color: var(--blue-dark);
    background: #edf7ff;
}

#modalBackdrop .document-modal.is-draft-record .modal-commands button:not([data-modal-action="save"]),
#modalBackdrop .document-modal.is-draft-record .modal-commands .command-separator {
    display: none !important;
}

.command-separator {
    width: 1px;
    height: 20px;
    background: #dce5ed;
}

.form-area {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 12px clamp(32px, 4vw, 72px);
    align-items: start;
    width: min(1560px, 100%);
    margin: 0 auto;
    padding: 10px 4px 0;
    background: #fff;
}

.document-body-scroll {
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background: #eef3f8;
}

.document-form-panel {
    align-self: start;
    justify-self: center;
    width: calc(100% - (var(--document-content-x) * 2));
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: calc(100% - 14px);
    margin: 0 0 14px;
    padding: 12px clamp(24px, 2.2vw, 34px) 18px;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: none;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.form-column {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
}

.field {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 34px;
    gap: 12px;
}

.field-icon {
    display: none;
}

.field-label {
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    color: #496176;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field input,
.field select {
    width: 100%;
    min-width: 0;
    height: 30px;
    color: #334155;
    padding: 0 6px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d8e4ef;
    border-radius: 0;
    outline: 0;
}

.field input:focus,
.field select:focus {
    background: #fff;
    border-bottom-color: var(--blue);
    box-shadow: none;
}

.field input[readonly] {
    color: #6b7c8f;
    background: transparent;
}

.field.locked input {
    color: #5d6b7a;
}

.field[data-document-group]::before {
    display: none;
}

.field[data-document-group="identity"] { --document-group-color: #0b74d1; }
.field[data-document-group="party"] { --document-group-color: #16a574; }
.field[data-document-group="schedule"] { --document-group-color: #5b6ff0; }
.field[data-document-group="money"] { --document-group-color: #b56a00; }
.field[data-document-group="source"] { --document-group-color: #0f8b9d; }
.field[data-document-group="status"] { --document-group-color: #c83e4d; }

#status {
    justify-self: stretch;
    width: 100%;
    height: 30px;
    color: #0f7a55;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #c8eadb;
    border-radius: 0;
}

.tabs {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: end;
    gap: 18px;
    justify-self: center;
    align-self: start;
    width: calc(100% - (var(--document-content-x) * 2));
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
    scrollbar-width: thin;
}

.tabs button {
    height: 38px;
    padding: 0;
    color: #67798c;
    background: transparent;
    border-bottom: 2px solid transparent;
}

.tabs button.active {
    color: var(--blue-dark);
    border-bottom-color: var(--blue);
    font-weight: 700;
}

.line-section {
    display: grid;
    grid-template-rows: 40px 1fr 40px;
    justify-self: center;
    width: calc(100% - (var(--document-content-x) * 2));
    min-height: 0;
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.line-section.hidden {
    display: none;
}

.line-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    border: 0;
    border-bottom: 0;
    background: #fbfdff;
}

.line-toolbar > div {
    display: flex;
    align-items: center;
    min-width: 0;
}

.line-toolbar-view {
    justify-content: flex-end;
    gap: 2px;
}

.line-toolbar button {
    height: 32px;
    padding: 0 10px;
    color: #52677a;
    background: transparent;
}

.line-toolbar button:hover {
    color: var(--blue-dark);
}

.line-grid {
    min-height: 0;
    overflow: auto;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    scrollbar-gutter: stable;
}

.line-table {
    min-width: 2760px;
}

.line-table:not(.line-table-sales) {
    min-width: 1180px;
}

.line-table .line-col-check {
    width: 34px;
}

.line-table .line-col-image {
    width: 86px;
}

.line-table .line-col-number {
    width: 46px;
}

.line-table .line-col-product {
    width: 118px;
}

.line-table .line-col-customer-product {
    width: 132px;
}

.line-table .line-col-description {
    width: 150px;
}

.line-table .line-col-quote {
    width: 130px;
}

.line-table .line-col-quantity {
    width: 92px;
}

.line-table .line-col-unit {
    width: 68px;
}

.line-table .line-col-customer-order {
    width: 160px;
}

.line-table .line-col-pack {
    width: 96px;
}

.line-table .line-col-warehouse {
    width: 86px;
}

.line-table .line-col-date {
    width: 112px;
}

.line-table .line-col-price {
    width: 112px;
}

.line-table .line-col-discount {
    width: 96px;
}

.line-table .line-col-amount {
    width: 110px;
}

.line-table .line-col-detail {
    width: 92px;
}

.line-table th,
.line-table td {
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
}

.line-table .thumb {
    width: 26px;
    height: 26px;
    border: 1px solid #d6e0e8;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .34), transparent),
        repeating-linear-gradient(135deg, #95a3ae 0 3px, #c7d0d7 3px 6px);
}

.line-bulk-count {
    min-width: 50px;
    padding: 0 6px;
    color: #6b7f91;
    font-size: 12px;
    font-weight: 800;
}

.line-image-cell {
    padding: 0 4px !important;
}

.line-image-slot {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.line-image-preview {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px !important;
    padding: 0 !important;
    overflow: hidden;
    color: #60778b;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .34), transparent),
        repeating-linear-gradient(135deg, #95a3ae 0 3px, #c7d0d7 3px 6px);
    border: 1px solid #d6e0e8;
    border-radius: 50%;
}

.line-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.line-image-preview span {
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
}

.line-image-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

.line-image-tools button {
    height: 24px;
    padding: 0 4px;
    color: #52677a;
    font-size: 11px;
    background: transparent;
}

.line-image-tools button:disabled {
    color: #a8b7c3;
    cursor: not-allowed;
}

.line-image-slot.is-readonly .line-image-preview {
    cursor: default;
}

.line-table td[contenteditable="true"] {
    outline: 0;
}

.line-table td[contenteditable="true"]:focus {
    background: #fffceb;
    box-shadow: inset 0 0 0 1px #f5c542;
}

.line-table tr.selected td {
    background: #e9f6ff;
}

.order-extra-section {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    justify-self: center;
    width: calc(100% - (var(--document-content-x) * 2));
    min-height: 280px;
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
    scrollbar-gutter: stable;
}

.order-extra-section.hidden {
    display: none;
}

.order-extra-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px 28px;
    align-content: start;
    overflow: auto;
    padding: 22px 20px 24px;
}

.order-extra-field {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 38px;
}

.order-extra-field.wide {
    grid-column: 1 / -1;
    align-items: start;
}

.order-extra-field span {
    color: #496176;
    font-weight: 700;
}

.order-extra-field input,
.order-extra-field textarea {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-bottom: 1px solid #d8e4ef;
    outline: 0;
    background: transparent;
    color: #15263a;
    padding: 4px 6px;
}

.order-extra-field textarea {
    min-height: 96px;
    resize: vertical;
    border: 1px solid #d8e4ef;
    border-radius: 6px;
}

.order-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px 34px;
    align-content: start;
    overflow: auto;
    padding: 18px 20px 24px;
}

.order-address-panel {
    display: grid;
    grid-template-rows: 40px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.order-address-toolbar {
    min-width: 0;
    padding: 0;
}

.order-address-grid {
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--line);
    scrollbar-gutter: stable;
}

.order-address-table {
    min-width: 1600px;
}

.order-address-table .order-address-col-check {
    width: 34px;
}

.order-address-table .order-address-col-number {
    width: 46px;
}

.order-address-table .order-address-col-type {
    width: 112px;
}

.order-address-table .order-address-col-code,
.order-address-table .order-address-col-postal {
    width: 126px;
}

.order-address-table .order-address-col-contact {
    width: 118px;
}

.order-address-table .order-address-col-email {
    width: 190px;
}

.order-address-table .order-address-col-phone {
    width: 130px;
}

.order-address-table .order-address-col-address {
    width: 220px;
}

.order-address-table th,
.order-address-table td {
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
}

.order-address-table td {
    padding: 0;
}

.order-address-table input,
.order-address-table select {
    width: 100%;
    height: 35px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #15263a;
    padding: 0 8px;
    font: inherit;
}

.order-address-table select {
    appearance: auto;
}

.order-address-table input:focus,
.order-address-table select:focus {
    background: #fffceb;
    box-shadow: inset 0 0 0 1px #f5c542;
}

.order-address-table tr.selected td {
    background: #e9f6ff;
}

.order-extra-lines-panel {
    display: grid;
    grid-template-rows: 38px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding: 10px 20px 22px;
}

.order-extra-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.order-extra-actions button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #c8d8e6;
    border-radius: 6px;
    color: #24516f;
    background: #fff;
    font-weight: 800;
}

.order-extra-lines-scroll {
    min-height: 0;
    overflow: auto;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
}

.order-extra-lines-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.order-extra-lines-table th,
.order-extra-lines-table td {
    height: 42px;
    border-right: 1px solid #e3edf5;
    border-bottom: 1px solid #e3edf5;
    padding: 0;
}

.order-extra-lines-table th {
    padding: 0 8px;
    color: #496176;
    background: #f6f9fc;
    text-align: left;
    font-weight: 800;
}

.order-extra-lines-table .row-index {
    width: 48px;
    text-align: center;
    color: #6a7f91;
}

.order-extra-lines-table input {
    width: 100%;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #15263a;
    padding: 0 8px;
}

.order-extra-lines-table tr.selected td {
    background: #edf6ff;
}

.line-section.erp-table-panel,
.order-address-panel.erp-table-panel,
.order-extra-lines-panel.erp-table-panel,
.generic-line-section.erp-table-panel,
.product-condition-panel.erp-table-panel,
.party-product-lines-panel.erp-table-panel,
.party-master-lines-panel.erp-table-panel,
.currency-rate-panel.erp-table-panel,
.product-group-items-panel.erp-table-panel,
.workflow-step-panel.erp-table-panel {
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.order-extra-lines-panel.erp-table-panel,
.currency-rate-panel.erp-table-panel,
.product-group-items-panel.erp-table-panel,
.workflow-step-panel.erp-table-panel {
    display: grid;
    grid-template-rows: 40px minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    margin-top: 12px;
    padding: 0;
}

.generic-line-section.erp-table-panel {
    grid-template-rows: 40px minmax(0, 1fr) 32px;
    padding: 0;
    border-top: 1px solid #d7e4ef;
}

.line-toolbar.erp-table-toolbar,
.generic-line-toolbar.erp-table-toolbar,
.order-extra-actions.erp-table-toolbar,
.product-condition-actions.erp-table-toolbar,
.party-product-lines-actions.erp-table-toolbar,
.party-master-lines-actions.erp-table-toolbar,
.currency-rate-actions.erp-table-toolbar,
.product-group-items-actions.erp-table-toolbar,
.workflow-steps-header.erp-table-toolbar {
    min-height: 40px;
    margin: 0;
    padding: 0 10px;
    background: #fbfdff;
    border: 0;
    border-bottom: 1px solid var(--line);
}

.line-toolbar.erp-table-toolbar button,
.generic-line-toolbar.erp-table-toolbar button,
.order-extra-actions.erp-table-toolbar button,
.product-condition-actions.erp-table-toolbar button,
.party-product-lines-actions.erp-table-toolbar button,
.party-master-lines-actions.erp-table-toolbar button,
.currency-rate-actions.erp-table-toolbar button,
.product-group-items-actions.erp-table-toolbar button,
.workflow-steps-header.erp-table-toolbar button {
    height: 32px;
    min-width: 28px;
    padding: 0 8px;
    color: #52677a;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
}

.line-toolbar.erp-table-toolbar button:hover,
.generic-line-toolbar.erp-table-toolbar button:hover,
.order-extra-actions.erp-table-toolbar button:hover,
.product-condition-actions.erp-table-toolbar button:hover,
.party-product-lines-actions.erp-table-toolbar button:hover,
.party-master-lines-actions.erp-table-toolbar button:hover,
.currency-rate-actions.erp-table-toolbar button:hover,
.product-group-items-actions.erp-table-toolbar button:hover,
.workflow-steps-header.erp-table-toolbar button:hover {
    color: var(--blue-dark);
    background: #eaf3f9;
}

.order-extra-lines-scroll.erp-table-scroll,
.product-condition-scroll.erp-table-scroll,
.party-product-lines-scroll.erp-table-scroll,
.party-master-lines-scroll.erp-table-scroll,
.currency-rate-scroll.erp-table-scroll,
.product-group-items-scroll.erp-table-scroll,
.workflow-step-grid.erp-table-scroll {
    border: 0;
    border-radius: 0;
}

.order-extra-lines-table,
.currency-rate-table,
.product-group-items-table,
.workflow-step-table {
    width: 100%;
    border: 0;
    border-radius: 0;
}

.currency-rate-table input,
.product-group-items-table input,
.workflow-step-table input,
.workflow-step-table select,
.workflow-step-table textarea {
    height: 34px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.currency-rate-table th:last-child,
.currency-rate-table td:last-child {
    width: auto;
    text-align: left;
}

.currency-rate-table .row-index,
.product-group-items-table .row-index {
    width: 50px;
    text-align: center;
    color: #6a7f91;
}

.order-status-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
    padding: 14px 16px;
    color: #263b52;
}

.order-status-editor-card,
.order-status-summary-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
}

.order-status-editor-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.order-status-summary-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(21, 38, 58, .04);
}

.order-status-section-title {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 0;
}

.order-status-section-title span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #056ebc;
    background: #edf6ff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.order-status-section-title strong {
    display: block;
    min-width: 0;
    color: #15263a;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-status-edit-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.order-status-edit-row > span {
    color: #40586f;
    font-size: 13px;
    font-weight: 900;
}

.order-status-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.order-status-choice-row button {
    min-width: 84px;
    height: 34px;
    padding: 0 12px;
    color: #4b6278;
    background: #f8fbfd;
    border: 1px solid #cddce8;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}

.order-status-choice-row button.active {
    color: #006fb8;
    background: #edf7ff;
    border-color: #0b84d8;
    box-shadow: 0 0 0 3px rgba(11, 132, 216, .12);
}

.order-status-summary-list {
    display: grid;
    gap: 8px;
}

.order-status-summary-list span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    min-width: 0;
    max-width: 100%;
    padding: 0 14px;
    overflow: hidden;
    background: #f8fbfd;
    border: 1px solid #e1ebf2;
    border-radius: 6px;
}

.order-status-summary-list span[data-summary-kind="datetime"] {
    min-width: 0;
}

.order-status-summary-list b,
.order-status-summary-list em {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

.order-status-summary-list span[data-summary-kind="datetime"] em {
    overflow: hidden;
    font-size: 12px;
    text-overflow: clip;
    white-space: nowrap;
    word-break: normal;
}

.order-status-summary-list b {
    flex: 0 0 auto;
    max-width: 112px;
    color: #668094;
    font-size: 12px;
    font-weight: 900;
}

.order-status-summary-list em {
    flex: 1 1 auto;
    color: #172338;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-align: right;
}

@media (max-width: 1120px) {
    .order-status-panel {
        grid-template-columns: 1fr;
    }
}

.line-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    color: #2f4154;
    background: #fbfdff;
    border: 0;
    font-size: 13px;
    font-weight: 700;
}

.toast {
    position: fixed;
    top: clamp(120px, 14vh, 180px);
    left: 50%;
    width: max-content;
    min-width: 260px;
    max-width: min(520px, calc(100vw - 48px));
    padding: 13px 18px;
    color: #fff;
    background: rgba(12, 46, 64, .94);
    border-radius: 7px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 1.5;
    transform: translateX(-50%);
    z-index: 9100;
}

.toast.hidden {
    display: none;
}

body.account-page .list-toolbar,
body.account-page .list-footer {
    display: none;
}

body.security-ledger-page .list-footer {
    display: none;
}

body.security-ledger-page .workspace {
    grid-template-rows: 44px 48px 1fr;
}

body.security-ledger-page #filterPanel {
    display: none;
}

body.security-ledger-page .data-workbench {
    grid-row: 3;
    grid-template-rows: 1fr;
}

body.security-ledger-page #pageContent {
    display: block;
    min-height: 0;
}

body.account-page .workspace {
    grid-template-rows: 44px 1fr;
    background: #eef3f8;
}

body.account-page .data-workbench {
    grid-row: 2;
    grid-template-rows: 1fr;
    background: #f5f7fb;
}

body.account-page .grid-frame {
    background: #f5f7fb;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.account-overview {
    min-height: 100%;
    padding: 16px;
    background: #f5f7fb;
    overflow: auto;
}

.account-overview-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.account-center-v3 {
    display: block;
    align-items: start;
    padding: 16px;
    background: #f5f7fb;
}

.account-center-v3 .account-main {
    gap: 12px;
}

.account-hero-v3 {
    min-height: 112px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(32, 45, 75, .045);
}

.account-surface-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.account-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.account-stack > .account-card,
.account-center-v3 > .account-card {
    align-self: start;
    width: 100%;
    grid-column: auto !important;
}

.account-center-v3 .account-card {
    padding: 15px;
    box-shadow: 0 8px 24px rgba(32, 45, 75, .045);
}

.account-center-v3 .account-card-title {
    margin-bottom: 12px;
}

.account-center-v3 .account-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.account-center-v3 .account-shortcut {
    min-height: 64px;
}

.account-center-v3 .account-shortcut span {
    width: 34px;
    height: 34px;
}

.account-center-v3 .account-favorite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-center-v3 .account-permissions-card,
.account-center-v3 .account-admin-card {
    display: grid;
    gap: 12px;
}

.account-center-v3 .account-admin-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-center-v3 .account-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-empty {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    color: #5e6c82;
    background: #f7fafc;
    border: 1px dashed #cfdbea;
    border-radius: 8px;
}

.account-empty strong {
    color: #25314d;
    font-size: 13px;
}

.account-empty span {
    font-size: 12px;
    line-height: 1.45;
}

.account-card {
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(32, 45, 75, .05);
}

.account-profile-card-v2,
.account-company-card,
.account-score-card {
    grid-column: span 3;
}

.account-risk-card,
.account-mfa-card,
.account-events-card {
    grid-column: span 3;
}

.account-devices-card,
.account-login-card,
.account-message-card {
    grid-column: span 3;
}

.account-api-card,
.account-shortcut-card {
    grid-column: span 6;
}

.account-favorites-card,
.account-subscription-card,
.account-storage-card {
    grid-column: span 3;
}

.account-profile-top {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px 16px;
    align-items: center;
    position: relative;
    padding-right: 88px;
}

.account-photo {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .28), transparent 46%),
        linear-gradient(135deg, #1a67ff, #10c5a5);
    border-radius: 50%;
    font-size: 34px;
    font-weight: 900;
    box-shadow: inset 0 0 0 6px #eef4ff;
}

.account-profile-top strong {
    display: block;
    color: #202b46;
    font-size: 19px;
    line-height: 1.18;
    word-break: keep-all;
}

.account-profile-top span {
    display: inline-flex;
    margin-top: 5px;
    padding: 3px 8px;
    color: #2167d8;
    background: #eef5ff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.account-profile-top button,
.account-card-title button,
.account-line-button,
.account-add-button,
.account-risk-item button {
    height: 32px;
    padding: 0 12px;
    color: #1b6aff;
    background: #fff;
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    font-weight: 800;
}

.account-profile-top button {
    position: absolute;
    top: 18px;
    right: 0;
}

.account-profile-top button:hover,
.account-card-title button:hover,
.account-line-button:hover,
.account-add-button:hover,
.account-risk-item button:hover {
    color: #fff;
    background: #1b6aff;
    border-color: #1b6aff;
}

.account-profile-meta,
.account-info-table {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.account-info-table.compact {
    margin-top: 12px;
}

.account-info-line {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.account-info-line span {
    color: #7b87a0;
    font-size: 12px;
    font-weight: 800;
}

.account-info-line strong {
    min-width: 0;
    color: #25314d;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 15px;
    color: #fff;
    background: linear-gradient(135deg, #121852, #132a78);
    border-radius: 8px;
}

.account-plan-card span {
    display: block;
    margin-bottom: 7px;
    font-weight: 900;
}

.account-plan-card strong {
    color: #dae7ff;
    font-size: 12px;
}

.account-plan-card button {
    color: #1a2b68;
    background: #fff;
    border-radius: 8px;
    font-weight: 900;
}

.account-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.account-card-title strong {
    min-width: 0;
    color: #1f2a45;
    font-size: 16px;
}

.account-score-body {
    display: grid;
    grid-template-columns: 134px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.account-score-ring {
    --angle: calc(var(--score) * 3.6deg);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: conic-gradient(#216bff var(--angle), #edf3fb 0);
}

.account-score-ring::before {
    position: absolute;
    inset: 16px;
    content: "";
    background: #fff;
    border-radius: 50%;
}

.account-score-value,
.account-score-ring em {
    position: relative;
    z-index: 1;
}

.account-score-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    color: #1d2a48;
    line-height: 1;
}

.account-score-value strong {
    font-size: 27px;
    letter-spacing: 0;
}

.account-score-value span {
    font-size: 14px;
    font-weight: 900;
}

.account-score-ring em {
    max-width: 78px;
    color: #6f7d96;
    font-size: 12px;
    font-style: normal;
    line-height: 1.25;
    text-align: center;
}

.account-score-list,
.account-risk-list,
.account-device-list,
.account-login-list,
.account-notice-list,
.account-api-list,
.account-event-list {
    display: grid;
    gap: 9px;
}

.account-check-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    color: #53617a;
    font-size: 13px;
}

.account-check-row::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 3px;
    background: #1aa46f;
    border-radius: 50%;
}

.account-check-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-check-row strong,
.account-mfa-status span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 7px;
    color: #16a06d;
    background: #e8fbf3;
    border-radius: 999px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-check-warn::before {
    background: #ff8a00;
}

.account-check-warn strong {
    color: #bc6500;
    background: #fff4e4;
}

.account-check-info::before {
    background: #2a8eff;
}

.account-check-info strong {
    color: #1d66c7;
    background: #edf6ff;
}

.account-check-danger::before {
    background: #f0445f;
}

.account-check-danger strong {
    color: #dc2d4a;
    background: #fff0f3;
}

.account-risk-item,
.account-device,
.account-notice,
.account-event {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.account-risk-item > span,
.account-device > span,
.account-notice > span,
.account-event > span,
.account-favorite > span,
.account-shortcut > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: #eef5ff;
    border-radius: 50%;
}

.account-risk-item > span::before,
.account-device > span::before,
.account-notice > span::before,
.account-event > span::before,
.account-favorite > span::before,
.account-shortcut > span::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    border-radius: 4px;
}

.account-risk-red > span {
    color: #f0445f;
    background: #fff0f3;
}

.account-risk-orange > span {
    color: #ff8a00;
    background: #fff5e8;
}

.account-risk-item strong,
.account-device strong,
.account-notice strong,
.account-event strong,
.account-api-key strong {
    display: block;
    color: #26324e;
    font-size: 13px;
}

.account-risk-item em,
.account-device em,
.account-notice em,
.account-event em,
.account-api-key span {
    display: block;
    margin-top: 3px;
    color: #7b87a0;
    font-size: 12px;
    font-style: normal;
}

.account-device b,
.account-login b,
.account-api-key em {
    padding: 3px 7px;
    color: #1aa46f;
    background: #eafbf4;
    border-radius: 999px;
    font-size: 11px;
}

.account-login {
    display: grid;
    grid-template-columns: 126px 52px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
    color: #6f7c95;
    font-size: 12px;
}

.account-login strong {
    color: #26324e;
}

.account-login em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.account-login b.danger {
    color: #e34b5f;
    background: #fff0f3;
}

.account-notice-orange > span {
    color: #ff8a00;
    background: #fff5e8;
}

.account-notice-blue > span {
    color: #1b6aff;
    background: #eef5ff;
}

.account-notice-green > span {
    color: #11a874;
    background: #e9fbf3;
}

.account-notice-violet > span {
    color: #7d5cff;
    background: #f1edff;
}

.account-notice b {
    color: #8b95a9;
    font-size: 12px;
}

.account-mfa-status {
    display: grid;
    gap: 8px;
}

.account-mfa-status strong {
    color: #26324e;
    font-size: 13px;
}

.account-api-summary {
    color: #1b6aff;
    font-size: 12px;
    font-weight: 900;
}

.account-api-key {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 94px 34px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e7ecf4;
    border-radius: 8px;
}

.account-api-key span,
.account-api-key b,
.account-api-key em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-api-key b {
    color: #7b87a0;
    font-size: 12px;
}

.account-api-key button {
    width: 34px;
    height: 20px;
    background: #1b6aff;
    border-radius: 999px;
}

.account-add-button {
    justify-self: start;
    margin-top: 10px;
}

.account-favorite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.account-favorite,
.account-shortcut {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #25314d;
    background: transparent;
    text-align: left;
}

.account-favorite strong,
.account-favorite em,
.account-shortcut strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-favorite em,
.account-shortcut strong {
    grid-column: 2;
    color: #7b87a0;
    font-size: 12px;
    font-style: normal;
}

.account-favorite strong {
    color: #25314d;
    font-size: 13px;
}

.account-tone-blue > span,
.account-dot-blue span {
    color: #1b6aff;
    background: #eef5ff;
}

.account-tone-cyan > span,
.account-dot-cyan span {
    color: #17b8c5;
    background: #e9fbfd;
}

.account-tone-orange > span,
.account-dot-orange span {
    color: #ff8a00;
    background: #fff5e8;
}

.account-tone-red > span {
    color: #f0445f;
    background: #fff0f3;
}

.account-tone-violet > span,
.account-dot-violet span {
    color: #7d5cff;
    background: #f1edff;
}

.account-tone-green > span,
.account-dot-green span {
    color: #10a66d;
    background: #e9fbf3;
}

.account-tone-mint > span {
    color: #08a98f;
    background: #e6fbf7;
}

.account-tone-sky > span {
    color: #2a8eff;
    background: #edf6ff;
}

.account-tone-gray > span,
.account-dot-gray span {
    color: #6f7c95;
    background: #f0f3f8;
}

.account-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}

.account-shortcut {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    min-height: 78px;
}

.account-shortcut span {
    width: 44px;
    height: 44px;
}

.account-shortcut strong {
    grid-column: 1;
    color: #25314d;
}

.account-storage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6f7c95;
}

.account-storage-head strong {
    color: #1c2945;
    font-size: 27px;
}

.account-storage-bar {
    height: 9px;
    margin: 14px 0;
    background: #edf2fb;
    border-radius: 999px;
    overflow: hidden;
}

.account-storage-bar i {
    display: block;
    height: 100%;
    background: #1b6aff;
}

.account-storage-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
}

.account-storage-legend-wide {
    grid-template-columns: 1fr;
}

.account-storage-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: #6f7c95;
    font-size: 12px;
}

.account-storage-item span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.account-storage-item strong {
    color: #52617b;
}

.account-storage-item em {
    font-style: normal;
}

.account-page-footer {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: none;
    margin: 18px auto 0;
    color: #8b95aa;
    font-size: 12px;
}

@media (max-width: 1320px) {
    .account-surface-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .account-surface-grid .account-stack:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (max-width: 1180px) {
    .security-summary-row {
        grid-template-columns: repeat(5, minmax(132px, 1fr));
        overflow-x: auto;
    }

    .security-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .security-side-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-center-v3 {
        padding: 14px;
    }

    .account-surface-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .account-surface-grid .account-stack:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .account-profile-card-v2,
    .account-company-card,
    .account-score-card,
    .account-risk-card,
    .account-devices-card,
    .account-login-card,
    .account-message-card,
    .account-mfa-card,
    .account-events-card,
    .account-favorites-card,
    .account-subscription-card,
    .account-storage-card {
        grid-column: span 4;
    }

    .account-api-card,
    .account-shortcut-card {
        grid-column: span 8;
    }

    .account-favorite-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-shortcut-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .security-side-panel {
        grid-template-columns: 1fr;
    }

    .security-panel-actions {
        flex-wrap: wrap;
    }

    .account-center-v3 {
        padding: 12px;
    }

    .account-profile-card-v2,
    .account-company-card,
    .account-score-card,
    .account-risk-card,
    .account-devices-card,
    .account-login-card,
    .account-message-card,
    .account-mfa-card,
    .account-events-card,
    .account-favorites-card,
    .account-subscription-card,
    .account-storage-card {
        grid-column: span 6;
    }

    .account-api-card,
    .account-shortcut-card {
        grid-column: span 12;
    }

    .account-score-body {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .account-score-ring {
        width: 112px;
        height: 112px;
    }

    .account-score-ring::before {
        inset: 14px;
    }
}

@media (max-width: 760px) {
    .security-console {
        padding: 10px;
    }

    .security-summary-row,
    .security-quick-grid {
        grid-template-columns: 1fr;
    }

    body.account-page .workspace {
        grid-template-rows: 44px 1fr;
    }

    .account-surface-grid,
    .account-surface-grid .account-stack:last-child {
        grid-template-columns: 1fr;
    }

    .account-hero-v3 {
        align-items: stretch;
        flex-direction: column;
    }

    .account-overview {
        padding: 12px;
    }

    .account-profile-card-v2,
    .account-company-card,
    .account-score-card,
    .account-risk-card,
    .account-devices-card,
    .account-login-card,
    .account-message-card,
    .account-mfa-card,
    .account-events-card,
    .account-api-card,
    .account-favorites-card,
    .account-shortcut-card,
    .account-subscription-card,
    .account-storage-card {
        grid-column: span 12;
    }

    .account-score-body,
    .account-profile-top,
    .account-login,
    .account-api-key {
        grid-template-columns: 1fr;
    }

    .account-profile-top {
        padding-right: 0;
    }

    .account-profile-top button {
        position: static;
        justify-self: start;
    }

    .account-favorite-grid,
    .account-shortcut-grid,
    .account-storage-legend {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .login-screen {
        grid-template-columns: minmax(0, 1fr);
        background: #edf3f6;
    }

    .login-visual {
        min-height: 420px;
        padding: 34px;
    }

    .login-panel-wrap {
        min-height: auto;
        padding: 28px;
    }

    .app-shell {
        grid-template-columns: 214px 1fr;
    }

    .topbar {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 380px) auto;
    }

    .document-modal {
        width: 94vw;
        min-width: 760px;
    }

    .top-user {
        display: none;
    }

    .account-center {
        grid-template-columns: 1fr;
    }

    .account-form-grid,
    .account-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .login-visual {
        min-height: auto;
        padding: 24px;
    }

    .login-visual-top strong {
        font-size: 32px;
    }

    .login-panel-wrap {
        padding: 18px;
    }

    .login-panel {
        padding: 24px;
    }

    .login-kpi-row {
        grid-template-columns: 1fr;
    }

    .login-map {
        grid-auto-rows: 38px;
    }

    #masterDataDrawer,
    .master-modal-backdrop,
    .master-drawer {
        padding: 12px;
    }

    #masterDataDrawer .master-modal,
    .master-modal,
    .master-panel {
        width: calc(100vw - 24px);
        min-width: 0;
        height: calc(100vh - 24px) !important;
        min-height: 0 !important;
        max-height: calc(100vh - 24px);
    }

    .master-form {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .master-field,
    .master-field.wide {
        grid-template-columns: 22px 92px minmax(0, 1fr);
    }

    .master-tabs {
        gap: 12px;
        overflow-x: auto;
        padding: 0 16px;
    }

    .master-context-panel {
        grid-template-columns: 1fr;
        flex-basis: auto;
    }

    .role-permission-list {
        grid-template-columns: 1fr;
    }

    .user-role-list {
        grid-template-columns: 1fr;
    }

    .master-footer {
        align-items: stretch;
        flex-direction: column;
        height: auto;
        padding: 10px 14px;
    }

    .master-footer div {
        justify-content: flex-end;
    }

    .account-center {
        padding: 12px;
    }

    .account-grid,
    .account-form-grid,
    .account-metric-row,
    .account-access-grid,
    .account-admin-actions {
        grid-template-columns: 1fr;
    }

    .account-profile-panel,
    .account-preferences-panel,
    .account-admin-panel {
        grid-column: span 1;
    }

    .account-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .account-health {
        min-width: 0;
    }
}