/* Tokens */
:root {
  interpolate-size: allow-keywords;
  --color-app-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f7f4;
  --color-table-heading: var(--color-surface-hover);
  --color-surface-hover: #f1efea;
  --color-sidebar: #100c0d;
  --color-sidebar-hover: #242424;
  --color-sidebar-border: #303030;
  --color-text-primary: #171717;
  --color-text-secondary: #6f6d68;
  --color-text-tertiary: #9b9993;
  --color-text-inverse: #ffffff;
  --color-border: #e3e0d9;
  --color-border-strong: #d0ccc3;
  --color-accent: #f7c774;
  --color-accent-hover: #dda84d;
  --color-accent-soft: #fff3dc;
  --color-table-row-hover: rgba(247, 199, 116, .18);
  --color-success: #3e7c4a;
  --color-success-soft: #edf6ee;
  --color-warning: #a86c13;
  --color-warning-soft: #fff5e3;
  --color-info: #2f6fa7;
  --color-info-soft: #ecf4fb;
  --color-danger: #b44747;
  --color-danger-soft: #fbeded;
  --portal-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 2 5 6 9 2' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --color-status-success-text: #ffffff;
  --color-status-success-background: #099b49;
  --color-status-warning-text: #ffffff;
  --color-status-warning-background: #f89200;
  --color-status-info-text: #ffffff;
  --color-status-info-background: #1973e1;
  --color-status-danger-text: #ffffff;
  --color-status-danger-background: #f41f20;
  --color-status-neutral-text: #ffffff;
  --color-status-neutral-background: #5f5c57;
  --color-status-muted-strong-text: #ffffff;
  --color-status-muted-strong-background: #939699;
  --color-status-teal-text: #ffffff;
  --color-status-teal-background: #5bc0de;
  --color-tooltip-background: #252b30;
  --color-tooltip-text: #ffffff;
  --shadow-card: 0 1px 3px rgba(23, 23, 23, 0.04);
  --shadow-dropdown: 0 8px 24px rgba(23, 23, 23, 0.10);
  --font-xs: 14px; --line-xs: 20px;
  --font-sm: 14px; --line-sm: 20px;
  --font-base: 16px; --line-base: 24px;
  --font-lg: 18px; --line-lg: 26px;
  --font-xl: 20px; --line-xl: 28px;
  --font-2xl: 24px; --line-2xl: 32px;
  --font-3xl: 32px; --line-3xl: 40px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --control-height: 40px;
  --table-row-height: 42px;
  --portal-header-height: 60px;
  --modal-panel-width: 650px;
  --modal-panel-width-wide: 800px;
  --modal-panel-width-split: 1050px;
  --portal-notification-width: 380px;
  --portal-notification-exit-duration: .28s;
  --breakpoint-mobile-max: 767px;
  --breakpoint-tablet-min: 768px;
  --breakpoint-tablet-max: 1023px;
  --breakpoint-desktop-min: 1024px;
  --table-entity-font-weight: 400;
  --table-total-font-weight: 500;
  --table-entity-link-color: #1973e1;
  --table-actions-gap: 16px;
  --status-menu-badge-max-width: 190px;
  --radius-control: 10px;
  --radius-surface: 10px;
  --radius-option: 7px;
  --radius-status: 6px;
  --radius-checkbox: 4px;
  --radius-round: 999px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, dl, dd { margin: 0; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

/* Base */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none; touch-action: pan-x pan-y; }
body { min-width: 320px; background: var(--color-app-bg); color: var(--color-text-primary); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--font-sm); line-height: var(--line-sm); }
h1 { font-size: var(--font-2xl); line-height: var(--line-3xl); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: var(--font-xl); line-height: var(--line-xl); font-weight: 600; }
h3 { font-size: var(--font-lg); line-height: var(--line-lg); font-weight: 600; }
button { color: inherit; }
:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Layout */
.app-shell { min-width: 0; max-width: 100%; min-height: 100vh; }
.app-main { min-width: 0; max-width: 100%; min-height: 100vh; margin-left: 210px; }
.page-navigation-loader { position: fixed; z-index: 29; inset: 0 0 0 210px; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--color-app-bg); color: var(--color-text-secondary); }
[data-page-content].is-navigating { visibility: hidden; }
.page { position: relative; width: 100%; min-width: 0; max-width: 1540px; margin: 0 auto; padding: 18px; }
[data-page-content] { min-width: 0; max-width: 100%; }
[data-page-content] > * { min-width: 0; max-width: 100%; }
.portal-page-version { padding: 16px 16px calc(8px + env(safe-area-inset-bottom)); color: var(--color-text-tertiary); font-size: 13px; line-height: 18px; text-align: center; user-select: none; }
.portal-update-required,
.portal-update-required body { overflow: hidden; }
.portal-update-overlay { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(16, 12, 13, .58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.portal-update-dialog { display: flex; width: min(420px, 100%); flex-direction: column; align-items: center; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-dropdown); text-align: center; }
.portal-update-dialog__icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 18px; border-radius: var(--radius-round); background: var(--color-accent-soft); color: var(--color-accent-hover); font-size: 28px; line-height: 1; animation: async-spin 1.2s linear infinite; }
.portal-update-dialog h2 { margin: 0; font-size: var(--font-xl); line-height: var(--line-xl); }
.portal-update-dialog p { margin: 10px 0 0; color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); }
.portal-update-dialog small { margin-top: 8px; color: var(--color-text-tertiary); font-size: var(--font-sm); line-height: var(--line-sm); }
.portal-update-dialog__button { min-width: 180px; margin-top: 24px; }
.portal-tooltip {
  width: max-content;
  max-width: min(360px, calc(100vw - 36px));
  padding: 7px 9px;
  border-radius: var(--radius-option);
  background: var(--color-tooltip-background);
  color: var(--color-tooltip-text);
  box-shadow: var(--shadow-dropdown);
  font-size: var(--font-sm);
  line-height: var(--line-sm);
  font-weight: 400;
}
.portal-tooltip.is-floating {
  position: fixed;
  z-index: 1000;
  display: block;
  opacity: 1;
  pointer-events: none;
}
.portal-tooltip strong { color: inherit; font-weight: 400; }
.portal-tooltip::after {
  position: absolute;
  left: var(--tooltip-arrow-left, 50%);
  border: 6px solid transparent;
  content: "";
  transform: translateX(-50%);
}
.portal-tooltip--above::after { top: 100%; border-top-color: var(--color-tooltip-background); }
.portal-tooltip--below::after { bottom: 100%; border-bottom-color: var(--color-tooltip-background); }
.deadline-value { position: relative; display: inline-flex; min-width: 0; align-items: center; cursor: help; }
.data-table td > .deadline-value { display: flex; width: max-content; }
.deadline-value--status { min-width: 110px; }
.deadline-value__content { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 4px; white-space: nowrap; }
.deadline-value__icon { width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: url("/assets/icons/clock.svg") center / contain no-repeat; mask: url("/assets/icons/clock.svg") center / contain no-repeat; }
.deadline-value__icon--due { -webkit-mask-image: url("/assets/icons/flash.svg"); mask-image: url("/assets/icons/flash.svg"); }
.deadline-value__icon.is-overdue { background: #f41f20; }
.deadline-value__label.is-overdue { color: #f41f20; }
@media (max-width: 767px) {
  .deadline-value { cursor: pointer; }
}
.page-header { position: relative; margin-bottom: 24px; }
.page-header p { margin-top: 4px; color: var(--color-text-secondary); font-size: var(--font-base); line-height: var(--line-base); }
.page-header__title-row { position: relative; display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; }
.page-header__help { position: relative; display: inline-grid; width: 16px; height: 16px; flex: 0 0 16px; padding: 0; place-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-round); background: var(--color-surface); color: var(--color-text-secondary); font: inherit; font-size: 11px; line-height: 1; font-weight: 600; cursor: help; }
.page-header__help:hover, .page-header__help:focus { border-color: var(--color-accent); color: var(--color-text-primary); outline: none; }
.page-header__help-tooltip { position: absolute; z-index: 95; top: calc(100% + 8px); left: 50%; opacity: 0; pointer-events: none; text-align: left; transform: translate(-50%, -4px); transition: opacity .15s ease, transform .15s ease; }
.page-header__help:hover .page-header__help-tooltip { opacity: 1; transform: translate(-50%, 0); }
.page-header--action { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.section-navigation { display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; row-gap: 0; margin-bottom: 16px; overflow: hidden; }
.section-navigation--nested-actions { margin-bottom: 0; }
.section-navigation > :is(a, button) { position: relative; padding: 10px 0 12px; border: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.section-navigation > :is(a, button)::before { position: absolute; right: -100vw; bottom: 0; left: -100vw; height: 1px; background: var(--color-border); content: ""; pointer-events: none; }
.section-navigation > :is(a, button)::after { position: absolute; right: -10px; bottom: 0; left: -10px; height: 3px; background: transparent; content: ""; }
.section-navigation > :is(a, button):first-child::after { left: 0; }
.section-navigation > :is(a, button):last-child::after { right: 0; }
.section-navigation > :is(a, button):hover { color: var(--color-text-primary); }
.section-navigation > :is(a, button):not(.is-active):hover::after { background: var(--color-border-strong); }
.section-navigation > :is(a, button).is-active { color: var(--color-text-primary); pointer-events: none; }
.section-navigation > :is(a, button).is-active::after { background: var(--color-accent); }

/* Sidebar */
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: 210px; flex-direction: column; background: var(--color-sidebar); color: var(--color-text-inverse); }
.sidebar__brand { position: relative; display: grid; height: 144px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--color-sidebar-border); }
.sidebar__brand img { display: block; width: 139px; height: auto; }
.sidebar__brand::after { position: absolute; top: 50%; left: 50%; width: 139px; height: 112px; background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .75) 48%, transparent 68%); background-position: 160% 0; background-size: 250% 100%; content: ""; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); -webkit-mask: url("/assets/images/logo.webp") center / contain no-repeat; mask: url("/assets/images/logo.webp") center / contain no-repeat; animation: logo-shine 6s ease-in-out infinite; }
@keyframes logo-shine {
  0%, 68% { background-position: 160% 0; opacity: 0; }
  72% { opacity: .65; }
  88% { background-position: -160% 0; opacity: .65; }
  92%, 100% { background-position: -160% 0; opacity: 0; }
}
.sidebar__nav { margin-top: 12px; padding: 16px 0; border-top: 1px solid var(--color-sidebar-border); }
.nav-link { position: relative; display: flex; min-height: 44px; align-items: center; gap: 16px; margin: 4px 12px; padding: 10px 12px; overflow: hidden; border-radius: var(--radius-control); color: var(--color-text-tertiary); font-size: var(--font-sm); line-height: var(--line-sm); transition: background-color .2s, color .2s; }
.nav-link__icon { width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; mask: var(--nav-icon) center / contain no-repeat; -webkit-mask: var(--nav-icon) center / contain no-repeat; }
.nav-link__icon--news { --nav-icon: url("/assets/icons/news.svg"); }
.nav-link__icon--checklist { --nav-icon: url("/assets/icons/checklist.svg"); }
.nav-link__icon--catalog { --nav-icon: url("/assets/icons/catalog.svg"); }
.nav-link__icon--money { --nav-icon: url("/assets/icons/money.svg"); }
.nav-link__icon--warehouse { --nav-icon: url("/assets/icons/warehouse.svg"); }
.nav-link__icon--orders { --nav-icon: url("/assets/icons/orders.svg"); }
.nav-link__icon--people { --nav-icon: url("/assets/icons/people.svg"); }
.nav-link__icon--send { --nav-icon: url("/assets/icons/send.svg"); }
.nav-link__icon--library { --nav-icon: url("/assets/icons/library.svg"); }
.nav-link__icon--inbox { --nav-icon: url("/assets/icons/inbox.svg"); }
.nav-link__icon--settings { --nav-icon: url("/assets/icons/settings.svg"); }
.nav-link__badge { display: inline-grid; min-width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; padding: 0 5px; place-items: center; border-radius: var(--radius-round); background: var(--color-danger); color: var(--color-text-inverse); font-size: 11px; font-weight: 600; line-height: 18px; }
.nav-link:hover { background: var(--color-sidebar-hover); color: var(--color-text-inverse); }
.nav-link.is-active { background: var(--color-sidebar-hover); color: var(--color-text-inverse); }
.nav-link.is-active { pointer-events: none; cursor: default; }
.nav-link.is-active::before { position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--radius-control) 0 0 var(--radius-control); background: var(--color-accent); content: ""; }
.sidebar__account { display: block; margin: 16px 12px 4px; padding: 12px; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius-surface); transition: background-color .2s, border-color .2s; }
.sidebar__account:hover { background: var(--color-sidebar-hover); }
.sidebar__account.is-active { border-color: var(--color-accent); background: var(--color-sidebar-hover); }
.sidebar__account-main { display: flex; align-items: center; gap: 12px; }
.sidebar__account strong, .sidebar__account small { display: block; }
.sidebar__account small { color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }
.sidebar__level { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-sidebar-border); }
.sidebar__level-heading, .sidebar__level-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sidebar__level-heading span, .sidebar__level-caption { color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }
.sidebar__level-heading strong { color: var(--color-accent); font-size: var(--font-sm); line-height: var(--line-sm); }
.sidebar__level .progress { height: 5px; margin: 8px 0 6px; background: var(--color-sidebar-border); }
.sidebar__level-caption span:last-child { text-align: right; }
.account-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--color-accent); border-radius: var(--radius-round); color: var(--color-accent); font-size: var(--font-xs); }
.sidebar-backdrop { display: none; }
.sidebar__collapse { display: none; }
.mobile-header { display: none; }
.mobile-menu-button { display: none; width: 36px; height: 36px; margin-bottom: 16px; padding: 0; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); cursor: pointer; }
.mobile-header-logo { display: none; }
.mobile-header-logo img { display: block; width: 48px; height: auto; }

/* Shared UI */
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-card); }
.button { display: inline-flex; min-height: var(--control-height); align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; cursor: pointer; transition: background-color .2s, border-color .2s; }
.button--primary, .button--compact { background: var(--color-accent); color: var(--color-text-primary); }
.button--secondary { border-color: var(--color-border-strong); background: var(--color-surface); }
.button--delete-icon { width: var(--control-height); min-width: var(--control-height); height: var(--control-height); padding: 0; flex: 0 0 var(--control-height); border-color: var(--color-status-danger-background); background: var(--color-status-danger-background); color: var(--color-text-inverse); }
.button__delete-icon { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("/assets/icons/trash.svg") center / contain no-repeat; mask: url("/assets/icons/trash.svg") center / contain no-repeat; }
.button--compact { min-height: 36px; padding: 0 12px; font-size: var(--font-xs); }
.button--full { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button svg { width: 18px; height: 18px; }
.button.is-busy { position: relative; }
.button.is-busy:disabled { opacity: 1; cursor: wait; }
.button.is-busy .button__content { visibility: hidden; }
.button__spinner { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; border-radius: var(--radius-round); transform: translate(-50%, -50%); animation: button-spinner-rotate .7s linear infinite; }
.portal-plus { position: relative; display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; color: inherit; }
.portal-plus::before,
.portal-plus::after { position: absolute; top: 50%; left: 50%; display: block; width: 10px; height: 1.5px; border-radius: var(--radius-round); background: currentColor; content: ""; transform: translate(-50%, -50%); }
.portal-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes button-spinner-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (hover: hover) and (pointer: fine) {
  .button--primary:hover, .button--compact:hover { background: var(--color-accent-hover); }
  .button--secondary:hover, .events-pagination__page:not(.is-active):hover { background: var(--color-surface-hover); }
  .button--delete-icon:hover { border-color: var(--color-danger); background: var(--color-danger); }
  .custom-select__group-toggle:hover { background: var(--color-surface-hover); }
  .custom-select__tree-row:hover { background: var(--color-surface-hover); }
}
.section-actions { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; flex-wrap: wrap; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading h2 { font-size: var(--font-lg); line-height: var(--line-lg); }
.text-link, .accent-text { color: var(--color-accent-hover); }
.text-link:hover { text-decoration: underline; }
.eyebrow { color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); text-transform: uppercase; letter-spacing: .04em; }
.progress { height: 8px; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-hover); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.table-scroll { position: relative; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: none; overscroll-behavior-y: auto; }
.modal-list-table { width: max-content; min-width: 100%; table-layout: auto; }
.modal-list-table .table-overflow-tooltip,
.modal-list-table .table-overflow-tooltip__value { width: max-content; min-width: max-content; max-width: none; overflow: visible; text-overflow: clip; }
.table-panel { margin-top: var(--table-actions-gap); }
.panel:has(> .table-scroll) { overflow: hidden; }
.panel:has(> .table-overlay-loader) { position: relative; overflow: hidden; }
.table-overlay-loader { position: absolute; z-index: 3; inset: 45px 0 var(--table-overlay-bottom, 0); border-radius: var(--table-overlay-radius, 0 0 var(--radius-surface) var(--radius-surface)); background: var(--color-surface); color: var(--color-text-secondary); }
.table-overlay-loader:not([hidden]) { display: block; }
.table-overlay-loader .async-spinner { width: 24px; height: 24px; }
.table-panel--loading { height: 89px; min-height: 89px; max-height: 89px; overflow: hidden; }
.table-loading-scope, .list-filter-bar__dependent-scope { display: contents; }
[data-table-loading-scope].is-table-loading [data-table-loading-content] { display: none !important; }
[data-table-loading-scope].is-table-loading [data-table-pagination] { display: none; }
.panel:has(.table-panel--loading) > [data-table-pagination] { display: none; }
.sticky-table-header { position: fixed; z-index: 24; top: 0; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-table-heading); box-shadow: 0 3px 8px rgba(16, 12, 13, .08); pointer-events: none; }
.sticky-table-header:has([data-table-sort-key], .table-sort-trigger, .table-sort) { pointer-events: auto; }
.sticky-table-header__table { table-layout: fixed; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.resizable-data-table.is-column-layout-fixed { table-layout: fixed; }
.table-resizable-heading { position: relative; }
.table-column-resizer { display: none; }
.table-overflow-tooltip { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.table-overflow-tooltip__value { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-tree-cell { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; padding-left: calc(var(--table-tree-depth, 0) * 20px); }
.table-tree-cell__toggle,
.table-tree-cell__spacer { position: relative; width: 18px; height: var(--table-row-height); flex: 0 0 18px; padding: 0; border: 0; background: transparent; }
.table-tree-cell__toggle { color: var(--color-text-secondary); cursor: pointer; }
.table-tree-cell__toggle::before { position: absolute; top: 50%; left: 50%; width: 10px; height: 8px; background: currentColor; content: ""; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: translate(-50%, -50%); transition: transform .2s ease; }
.table-tree-cell__toggle[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(180deg); }
.table-tree-cell__content { min-width: 0; flex: 0 1 auto; }
.table-tree-cell__count { display: inline-flex; min-width: 22px; height: 22px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 5px; border-radius: var(--radius-round); background: var(--color-surface-hover); color: var(--color-text-secondary); font-size: var(--font-xs); line-height: 1; font-weight: 400; }
.table-tree-empty { color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); }
.data-table tbody tr.table-tree-row.is-group { background: var(--color-surface-muted); }
.resizable-data-table.is-column-layout-fixed td { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .table-column-resizer { position: absolute; z-index: 2; top: 0; right: -5px; display: block; width: 10px; min-width: 10px; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; cursor: col-resize; touch-action: none; }
  .table-column-resizer::after { position: absolute; top: 8px; bottom: 8px; left: 4px; width: 1px; background: transparent; content: ""; transition: background-color .15s ease; }
  .table-column-resizer:hover::after, .table-column-resizer:focus-visible::after, .table-column-resizer.is-resizing::after { background: var(--color-border); }
  .table-column-resizer:focus-visible { box-shadow: inset 0 0 0 1px var(--color-accent); }
  body.is-table-column-resizing, body.is-table-column-resizing * { cursor: col-resize !important; user-select: none !important; }
}
.data-table a:not(.button), .users-table a:not(.button) { color: var(--table-entity-link-color); }
.table-sort-heading { padding: 0 !important; }
.table-sort-trigger { display: flex; width: 100%; height: var(--table-row-height); align-items: center; gap: 8px; padding: 0 14px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.table-sort-trigger .table-sort-indicator { position: relative; width: 10px; height: var(--line-xs); flex: 0 0 10px; align-self: center; opacity: 0; transition: opacity .15s ease; }
.table-sort-trigger .table-sort-indicator::after { position: absolute; top: 50%; left: 0; width: 10px; height: 8px; background: var(--color-text-secondary); content: ""; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: translateY(-50%) rotate(180deg); }
.table-sort-trigger[data-table-sort-direction="asc"] .table-sort-indicator { opacity: 1; }
.table-sort-trigger[data-table-sort-direction="desc"] .table-sort-indicator { opacity: 1; }
.table-sort-trigger[data-table-sort-direction="desc"] .table-sort-indicator::after { transform: translateY(-50%); }
.table-sort-trigger:not([data-table-sort-direction="asc"]):not([data-table-sort-direction="desc"]):is(:hover, :focus-visible) .table-sort-indicator { opacity: .55; }
body[data-portal-area="erp"]:not([data-table-sort-ready="true"]) .table-sort-indicator { opacity: 0 !important; }
.table-sort-trigger:focus-visible { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.data-table tfoot, .data-table tfoot tr, .data-table tfoot td,
.users-table tfoot, .users-table tfoot tr, .users-table tfoot td { background: var(--color-table-heading); }
.data-table tbody tr { transition: background-color .15s ease; }
.data-table tbody tr:hover { background: var(--color-table-row-hover); }
.data-table tbody tr:has(a[data-table-row-primary-link]) { cursor: pointer; }
.data-table tbody tr.table-empty-row:hover { background: transparent; }
.data-table .table-empty-row td { height: var(--table-row-height); padding: 0 16px; color: var(--color-text-secondary); }
.data-table .table-empty-row__content { position: absolute; top: 43px; right: 0; left: 0; display: flex; height: 42px; align-items: center; justify-content: center; padding: 0 16px; text-align: center; }
.data-table th, .users-table th { color: var(--color-text-primary); font-size: var(--font-xs); line-height: var(--line-xs); font-weight: 500; }
.data-table th, .data-table td { padding: 0 16px; border-bottom: 1px solid var(--color-border); vertical-align: middle; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tfoot tr:last-child td { border-bottom: 0; }
.table-inline-value, .table-inline-input { width: 100%; min-width: 0; max-width: 100%; height: var(--control-height); padding: 0 12px; border-radius: var(--radius-control); color: var(--color-text-primary); font: inherit; line-height: inherit; text-align: right; }
.table-inline-value { display: flex; align-items: center; justify-content: flex-end; border: 1px solid transparent; background: transparent; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.table-inline-editor { display: block; width: 100%; min-width: 0; max-width: 100%; }
.table-inline-input { display: block; border: 1px solid var(--color-border); background: var(--color-surface); }
.table-inline-input:focus { border-color: var(--color-accent); outline: none; }
.status { display: inline-flex !important; width: fit-content; margin-bottom: 0; padding: 2px 8px; border: 1px solid transparent; border-radius: var(--radius-status); font-size: var(--font-xs); line-height: var(--line-xs); }
.status--success { --status-background: var(--color-status-success-background); background: var(--status-background); color: var(--color-status-success-text); }
.status--warning { --status-background: var(--color-status-warning-background); background: var(--status-background); color: var(--color-status-warning-text); }
.status--info { --status-background: var(--color-status-info-background); background: var(--status-background); color: var(--color-status-info-text); }
.status--danger { --status-background: var(--color-status-danger-background); background: var(--status-background); color: var(--color-status-danger-text); }
.status--neutral { --status-background: var(--color-status-neutral-background); background: var(--status-background); color: var(--color-status-neutral-text); }
.status--muted-strong { --status-background: var(--color-status-muted-strong-background); background: var(--status-background); color: var(--color-status-muted-strong-text); }
.status--teal { --status-background: var(--color-status-teal-background); background: var(--status-background); color: var(--color-status-teal-text); }
.status--ms {
  color: var(--status-color);
  background: color-mix(in srgb, var(--status-color) 16%, #fff);
  border-color: color-mix(in srgb, var(--status-color) 42%, #fff);
}
.search-field { position: relative; display: flex; align-items: center; }
.list-filter-bar { width: 100%; min-width: 0; }
.list-filter-bar__primary { display: flex; width: 100%; min-width: 0; align-items: center; gap: 10px; }
.list-filter-bar__primary > .button { flex: 0 0 auto; }
.list-filter-bar__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.list-filter-bar__primary > .filter-toolbar { min-width: 0; flex: 1 1 auto; justify-content: flex-end; gap: 10px; }
.list-filter-bar > .filter-options--collapsible { width: 100%; }
.list-filter-bar > .saved-filters,
.list-filter-bar > .list-filter-bar__dependent-scope > .saved-filters,
.section-actions > .saved-filters { width: 100%; flex: 1 0 100%; }
.saved-filters { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 10px; }
.saved-filters.is-disabled { opacity: .45; }
.saved-filters.is-disabled :is(button, a, [draggable="true"]) { cursor: not-allowed; }
.saved-filter-item { display: inline-flex; min-height: 40px; max-width: min(480px, 100%); align-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); transition: background-color .2s, border-color .2s; }
.saved-filter-item:has(.saved-filter.is-active) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.saved-filter { display: flex; min-width: 0; min-height: 38px; flex: 1 1 auto; align-items: center; overflow: hidden; padding: 7px 0 7px 12px; border: 0; background: transparent; color: var(--color-text-primary); text-align: left; cursor: pointer; }
.saved-filter-item:not(:has(.saved-filter__manage)) .saved-filter { padding-right: 12px; }
.saved-filters.is-reordering .saved-filter-item:not(:has(.saved-filter__manage)) .saved-filter { padding-right: 0; }
.saved-filter strong { min-width: 0; overflow: hidden; flex: 0 1 auto; font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.saved-filter__count { display: inline-flex; min-width: 22px; height: 22px; flex: 0 0 auto; align-items: center; justify-content: center; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-round); background: var(--color-surface-hover); color: var(--color-text-primary); font-size: var(--font-sm); line-height: 1; }
.saved-filter__manage { flex: 0 0 30px; opacity: 0; transition: opacity .2s; }
.saved-filter__manage svg { transform: translateX(-3px); }
.saved-filter__manage:focus-visible { opacity: 1; }
.users-table__menu-trigger.saved-filter__drag-handle { display: none; flex: 0 0 30px; cursor: grab; }
.saved-filter__drag-handle:active { cursor: grabbing; }
.saved-filter__drag-handle svg { width: 12.5px; height: 18px; }
.saved-filters.is-reordering .saved-filter__manage { display: none; }
.saved-filters.is-reordering .users-table__menu-trigger.saved-filter__drag-handle { display: inline-grid; }
.sortable-row__drag-preview .saved-filter__manage { display: none; }
.sortable-row__drag-preview .users-table__menu-trigger.saved-filter__drag-handle { display: inline-grid; }
.saved-filters.is-reordering .saved-filter-item[data-filter-manageable="true"] { animation: saved-filter-jiggle .18s ease-in-out infinite alternate; will-change: transform; }
.saved-filters.is-reordering .saved-filter-item[data-filter-manageable="true"]:nth-child(2n) { animation-delay: -.06s; animation-direction: alternate-reverse; }
.saved-filters.is-reordering .saved-filter-item[data-filter-manageable="true"]:nth-child(3n) { animation-delay: -.12s; }
.saved-filters.is-reordering .saved-filter-item.is-dragging { animation: none; opacity: .65; }
.saved-filter-form { display: grid; gap: 14px; }
.saved-filter-form .check-field { align-items: flex-start; font-size: var(--font-sm); line-height: var(--line-sm); }
.saved-filter-form .check-field input { margin-top: 2px; }
@keyframes saved-filter-jiggle {
  from { transform: translateY(-.4px) rotate(-1deg); }
  to { transform: translateY(.4px) rotate(1deg); }
}
@media (hover: hover) and (pointer: fine) {
  .saved-filter-item:hover { background: var(--color-surface-hover); }
  .saved-filter-item:hover .saved-filter__manage { opacity: 1; }
}
@media (hover: none) {
  .saved-filter__manage { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .saved-filters.is-reordering .saved-filter-item[data-filter-manageable="true"] { animation: none; }
}
.filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.filter-controls > .search-field, .filter-controls > .select-field { width: 260px; max-width: 100%; flex: 0 0 260px; }
.filter-toolbar { display: flex; align-items: center; gap: 12px; }
.filter-toolbar > .search-field { width: 260px; max-width: 100%; flex: 0 1 260px; }
.filter-options { margin-top: 12px; padding: 12px; border: 1px solid var(--color-accent); border-radius: var(--radius-surface); background: var(--color-accent-soft); }
.filter-options--collapsible { position: relative; z-index: 2; display: none; height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; overflow: clip; border-top-width: 0; border-bottom-width: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: height .2s ease, margin-top .2s ease, margin-bottom .2s ease, padding-top .2s ease, padding-bottom .2s ease, border-width .2s ease, opacity .16s ease, visibility 0s linear .2s, display .2s allow-discrete; }
.filter-options--collapsible.is-open { display: flex; height: auto; margin-top: 12px; padding-top: 12px; padding-bottom: 12px; border-top-width: 1px; border-bottom-width: 1px; visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.list-filter-bar > .filter-options--collapsible.is-open { margin-top: 0; }
@starting-style {
  .filter-options--collapsible.is-open { height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; opacity: 0; }
}
.filter-toggle { width: 40px; flex: 0 0 40px; gap: 0; padding: 0; border-color: var(--color-border); background: var(--color-surface); font-size: 0; font-weight: 400; }
.filter-toggle::after { width: 18px; height: 18px; background: currentColor; content: ""; -webkit-mask: url("/assets/icons/filter.svg") center / contain no-repeat; mask: url("/assets/icons/filter.svg") center / contain no-repeat; }
.filter-toggle[aria-expanded="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.filter-toggle:disabled { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-primary); opacity: 1; }
.filter-reset { width: auto; min-height: 40px; flex: 0 0 auto; padding: 0 8px; border: 0; background: transparent; color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 400; text-align: left; cursor: pointer; transition: color .15s; }
.filter-reset:hover { color: var(--color-text-primary); }
.search-field svg { position: absolute; left: 12px; color: var(--color-text-secondary); }
.search-field input, .select-field select, .form-field input, .form-field select { width: 100%; height: var(--control-height); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); }
.search-field input:focus, .select-field select:focus, .form-field input:focus, .form-field select:focus { border-color: var(--color-accent); outline: none; }
.search-field input { padding: 0 40px 0 40px; }
.search-field input[type="search"] { appearance: none; -webkit-appearance: none; }
.search-field input[type="search"]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.search-field input:disabled { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-primary); opacity: 1; }
.search-field:has(input:disabled) svg { color: var(--color-text-secondary); opacity: 1; }
.search-field__clear { position: absolute; right: 10px; display: grid; width: 24px; height: 24px; appearance: none; place-items: center; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--color-text-secondary); font: inherit; font-size: 0; line-height: 1; cursor: pointer; }
.search-field__clear::before,
.search-field__clear::after { position: absolute; display: block; width: 10px; height: 1.5px; border-radius: var(--radius-round); background: currentColor; content: ""; }
.search-field__clear::before { transform: rotate(45deg); }
.search-field__clear::after { transform: rotate(-45deg); }
.search-field__clear:hover { border: 0; background: transparent; box-shadow: none; color: var(--color-text-secondary); }
.search-field__clear:disabled { cursor: not-allowed; opacity: 1; }
.select-field select { min-width: 180px; padding: 0 36px 0 12px; }
.check-field { display: flex; align-items: center; gap: 8px; cursor: pointer; }
input[type="checkbox"] { display: grid; width: 16px; height: 16px; flex: 0 0 16px; margin: 0; appearance: none; -webkit-appearance: none; place-content: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-checkbox); background: var(--color-surface); cursor: pointer; }
input[type="checkbox"]::after { width: 5px; height: 9px; border: solid var(--color-text-primary); border-width: 0 2px 2px 0; content: ""; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform .1s ease; }
input[type="checkbox"]:checked { border-color: var(--color-accent); background: var(--color-accent); }
input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
input[type="checkbox"]:indeterminate { border-color: var(--color-accent); background: var(--color-accent); }
input[type="checkbox"]:indeterminate::after { width: 8px; height: 2px; border: 0; border-radius: var(--radius-round); background: var(--color-text-primary); transform: none; }
input[type="checkbox"]:disabled { cursor: not-allowed; }
input[type="checkbox"]:disabled:not(:checked):not(:indeterminate) { background: var(--color-surface-muted); }
:is(label, .check-field, .role-permission):has(input[type="checkbox"]:disabled) { cursor: not-allowed; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.empty-state { padding: 40px 24px; color: var(--color-text-secondary); text-align: center; }
.async-loader { display: grid; min-height: 220px; place-content: center; justify-items: center; gap: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); color: var(--color-text-secondary); box-shadow: var(--shadow-card); }
.section-loading-boundary { display: grid; min-height: 220px; place-items: center; color: var(--color-text-secondary); }
.section-loading-row { position: fixed; z-index: 29; inset: 0 0 0 210px; display: grid; height: auto; min-height: 0; place-items: center; border: 0; background: transparent; color: var(--color-text-secondary); box-shadow: none; pointer-events: none; }
.section-loading-row .async-spinner { width: 24px; height: 24px; }
.async-spinner { display: inline-block; width: 32px; height: 32px; flex: 0 0 auto; border: 3px solid var(--color-accent-soft); border-top-color: var(--color-accent); border-radius: var(--radius-round); animation: async-spin .8s linear infinite; }
.async-spinner + span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.async-error { display: grid; min-height: 180px; place-content: center; justify-items: center; gap: 16px; padding: 24px; color: var(--color-text-secondary); text-align: center; }
.toast { position: fixed; z-index: 60; top: 10px; left: 50%; display: flex; width: max-content; max-width: calc(100% - 32px); min-height: 48px; align-items: center; gap: 10px; padding: 11px 15px; overflow: hidden; border: 1px solid var(--color-accent-hover); border-radius: var(--radius-surface); background: var(--color-accent); color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 600; box-shadow: var(--shadow-dropdown); opacity: 0; pointer-events: none; transform: translate(-50%, -10px) rotateX(-18deg) scale(.88); transform-origin: top center; }
.toast::before { position: absolute; top: -40%; bottom: -40%; left: -30%; width: 22%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); content: ""; transform: skewX(-18deg); }
.toast.is-visible { animation: toast-pulse-in .48s cubic-bezier(.2, .9, .25, 1.15) both; }
.toast.is-visible::before { animation: toast-shine .72s .16s ease-out both; }
.toast.is-visible .toast__icon { animation: toast-icon-pulse .58s .18s ease-out both; }
.toast.is-leaving { animation: toast-lift-out .32s cubic-bezier(.55, .06, .68, .19) both; }
.toast__icon { position: relative; z-index: 1; display: grid; width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--radius-round); background: rgba(255, 255, 255, .72); line-height: 1; place-items: center; }
.toast__text { position: relative; z-index: 1; }
.toast.is-error, .toast.is-success { background: var(--color-accent); }

@keyframes toast-pulse-in {
  to { opacity: 1; transform: translate(-50%, 0) rotateX(0) scale(1); }
}
@keyframes toast-lift-out {
  from { opacity: 1; filter: blur(0); transform: translate(-50%, 0) rotateX(0) scale(1); }
  to { opacity: 0; filter: blur(2px); transform: translate(-50%, -18px) rotateX(12deg) scale(.94); }
}
@keyframes toast-icon-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); transform: scale(.7); }
  55% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); transform: scale(1.16); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
}
@keyframes toast-shine {
  from { left: -30%; }
  to { left: 120%; }
}
.portal-notification-layer { position: fixed; z-index: 100; top: var(--space-4); right: var(--space-4); width: min(var(--portal-notification-width), calc(100vw - (var(--space-4) * 2))); pointer-events: none; }
.portal-notification-layer--inline { position: static; width: 100%; pointer-events: auto; }
.portal-notification { position: relative; display: grid; min-height: 96px; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: start; gap: var(--space-3); padding: var(--space-4); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-dropdown); opacity: 0; pointer-events: auto; }
.portal-notification__icon { position: relative; display: grid; width: 40px; height: 40px; border-radius: var(--radius-round); background: var(--color-accent-soft); color: var(--color-accent-hover); place-items: center; }
.portal-notification__icon::before { width: 20px; height: 20px; background: currentColor; content: ""; -webkit-mask: url("/assets/icons/checklist.svg") center / contain no-repeat; mask: url("/assets/icons/checklist.svg") center / contain no-repeat; }
.portal-notification__open { display: grid; min-width: 0; grid-column: 1 / 3; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.portal-notification__body { min-width: 0; }
.portal-notification__title { display: block; padding-right: var(--space-1); font-size: var(--font-base); line-height: var(--line-base); font-weight: 600; overflow-wrap: anywhere; }
.portal-notification__message { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); overflow-wrap: anywhere; }
.portal-notification__meta { display: flex; min-height: 24px; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }
.portal-notification__close { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: currentColor; opacity: .62; }
.portal-notification__close::before, .portal-notification__close::after { position: absolute; top: 13px; left: 8px; width: 12px; height: 1.5px; border-radius: var(--radius-round); background: currentColor; content: ""; }
.portal-notification__close::before { transform: rotate(45deg); }
.portal-notification__close::after { transform: rotate(-45deg); }
.portal-notification--surface { border-left: 4px solid var(--color-accent); }
.portal-notification.is-clickable { cursor: pointer; }
.portal-notification__open:focus-visible { border-radius: var(--radius-control); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.portal-notification--surface.is-visible { animation: portal-notification-surface-in .32s ease-out both; }
.portal-notification--surface.is-leaving { animation: portal-notification-surface-out var(--portal-notification-exit-duration) ease-in both; }
.portal-notification-layer--inline .portal-notification { animation: none; opacity: 1; transform: none; }
@keyframes portal-notification-surface-in {
  from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes portal-notification-surface-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(28px); }
}
.portal-notification-bell { position: relative; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; }
.portal-notification-bell.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text-primary); }
.portal-notification-bell__icon { width: 20px; height: 20px; background: currentColor; -webkit-mask: url("/assets/icons/bell.svg") center / contain no-repeat; mask: url("/assets/icons/bell.svg") center / contain no-repeat; }
.portal-notification-bell__badge { position: absolute; top: -6px; right: -6px; display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: var(--radius-round); background: var(--color-danger); color: var(--color-text-inverse); font-size: 11px; line-height: 18px; font-weight: 600; }
.portal-notification-bell--desktop { position: absolute; z-index: 20; top: 12px; right: 18px; }
.portal-notification-bell--mobile { display: none; }
@media (hover: hover) and (pointer: fine) {
  .portal-notification-bell:not(.is-active):hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
  .portal-notification.is-clickable:hover { background: var(--color-surface-hover); }
  .portal-notification-center__item:hover { background: var(--color-surface-hover); }
  .portal-notification-center__item.is-unread:hover { background: var(--color-accent-soft); }
}
[data-notification-modal] .modal-panel { width: 500px; }
.portal-notification-center { display: grid; gap: var(--space-6); }
.portal-notification-center__actions { display: flex; justify-content: flex-end; }
.portal-notification-center__group { display: grid; gap: var(--space-3); }
.portal-notification-center__group > h3 { color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; }
.portal-notification-center__items { display: grid; gap: var(--space-2); }
.portal-notification-center__item { display: grid; width: 100%; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-text-primary); font: inherit; text-align: left; cursor: pointer; }
.portal-notification-center__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.portal-notification-center__item.is-unread { border-color: var(--color-accent); background: var(--color-accent-soft); }
.portal-notification-center__item-icon { display: grid; width: 40px; height: 40px; border-radius: var(--radius-round); background: var(--color-accent-soft); color: var(--color-accent-hover); place-items: center; }
.portal-notification-center__item.is-unread .portal-notification-center__item-icon { background: var(--color-accent); color: var(--color-text-primary); }
.portal-notification-center__item-icon::before { width: 20px; height: 20px; background: currentColor; content: ""; -webkit-mask: url("/assets/icons/bell.svg") center / contain no-repeat; mask: url("/assets/icons/bell.svg") center / contain no-repeat; }
.portal-notification-center__item-body { min-width: 0; }
.portal-notification-center__item-body strong { display: block; font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 600; overflow-wrap: anywhere; }
.portal-notification-center__item-body p { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); overflow-wrap: anywhere; }
.portal-notification-center__item-body time { display: block; margin-top: var(--space-2); color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }
.portal-notification-center__empty { min-height: 180px; }
@keyframes async-spin {
  to { transform: rotate(360deg); }
}

/* Metrics */
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric-card { min-height: 120px; padding: 20px; }
.metric-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.metric-card__badge { display: grid; min-width: 32px; height: 28px; margin-top: 2px; padding: 0 8px; place-items: center; border-radius: var(--radius-status); background: var(--color-surface-muted); color: var(--color-accent-hover); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 600; }
.metric-card__badge--accent { background: var(--color-accent-soft); }
.metric-mark { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: var(--radius-checkbox); }
.metric-card p { color: var(--color-text-secondary); }
.metric-card strong { display: block; margin-top: 4px; font-size: 28px; line-height: 34px; font-weight: 600; }
.metric-level { margin-top: 8px; }
.metric-level__caption { display: flex; justify-content: space-between; gap: 8px; color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); }
.metric-level__caption span:last-child { color: var(--color-text-tertiary); }
.metric-level .progress { height: 6px; margin-top: 6px; }
.tile-carousel { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.tile-carousel::-webkit-scrollbar { display: none; }
.tile-carousel.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; user-select: none; }
.tile-carousel__item { position: relative; display: flex; min-width: 0; height: 80px; min-height: 80px; max-height: 80px; flex: 0 0 auto; align-items: center; gap: 10px; overflow: hidden; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-text-primary); font: inherit; text-align: left; transition: background-color .2s, border-color .2s; }
button.tile-carousel__item { cursor: pointer; }
.tile-carousel__item.is-page-start { scroll-snap-align: start; scroll-snap-stop: always; }
.tile-carousel.is-dragging .tile-carousel__item { cursor: grabbing; }
.tile-carousel__item.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); }
@media (hover: hover) and (pointer: fine) {
  button.tile-carousel__item:not(.is-active):hover { background: var(--color-surface-hover); }
}
.tile-carousel__icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: var(--radius-round); background: var(--tile-carousel-soft); color: var(--tile-carousel-color); }
.tile-carousel__icon:not(.tile-carousel__icon--text)::before { width: 20px; height: 20px; background: currentColor; content: ""; -webkit-mask: var(--tile-carousel-icon) center / contain no-repeat; mask: var(--tile-carousel-icon) center / contain no-repeat; }
.tile-carousel__icon--text { font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; }
.tile-carousel__content { display: grid; min-width: 0; gap: 0; }
.tile-carousel__label { max-width: 100%; color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 400; white-space: nowrap; }
.tile-carousel__content strong { color: var(--color-text-primary); font-size: var(--font-lg); line-height: var(--line-lg); font-weight: var(--table-total-font-weight); }
.tile-carousel__spinner { width: var(--font-lg); height: var(--font-lg); border-width: 2px; vertical-align: middle; }
.tile-carousel__item--info { --tile-carousel-color: var(--color-status-info-background); --tile-carousel-soft: var(--color-info-soft); --tile-carousel-icon: url("/assets/icons/star.svg"); }
.tile-carousel__item--teal { --tile-carousel-color: var(--color-status-teal-background); --tile-carousel-soft: var(--color-info-soft); --tile-carousel-icon: url("/assets/icons/people.svg"); }
.tile-carousel__item--urgent { --tile-carousel-color: #f41f20; --tile-carousel-soft: var(--color-danger-soft); --tile-carousel-icon: url("/assets/icons/fire.svg"); }
.tile-carousel__item--warning { --tile-carousel-color: var(--color-status-warning-background); --tile-carousel-soft: var(--color-warning-soft); --tile-carousel-icon: url("/assets/icons/clock.svg"); }
.tile-carousel__item--overdue { --tile-carousel-color: #f41f20; --tile-carousel-soft: var(--color-danger-soft); --tile-carousel-icon: url("/assets/icons/flash.svg"); }
.tile-carousel__item--overdue-status { --tile-carousel-color: #f41f20; --tile-carousel-soft: var(--color-danger-soft); --tile-carousel-icon: url("/assets/icons/clock.svg"); }
.tile-carousel__item--danger { --tile-carousel-color: #f41f20; --tile-carousel-soft: var(--color-danger-soft); --tile-carousel-icon: url("/assets/icons/heart-broken.svg"); }
.tile-carousel__item--success { --tile-carousel-color: var(--color-status-success-background); --tile-carousel-soft: var(--color-success-soft); --tile-carousel-icon: url("/assets/icons/ruble.svg"); }
.tile-carousel-pagination { display: flex; min-height: 18px; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.tile-carousel-pagination[hidden] { display: none; }
.tile-carousel-pagination__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--radius-round); background: var(--color-border-strong); cursor: pointer; transition: width .15s, background-color .15s; }
.tile-carousel-pagination__dot.is-active { width: 18px; border-radius: var(--radius-round); background: var(--color-accent); }
/* Shared catalog elements */
.filter-chip { min-height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.filter-chip:hover { color: var(--color-text-primary); }
.filter-chip.is-active { border-bottom-color: var(--color-accent); color: var(--color-text-primary); }
.section-caption { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 8px; }
.section-caption span { color: var(--color-text-secondary); }

.events-pagination { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.events-pagination__navigation { display: flex; min-width: 0; align-items: center; gap: 6px; }
.events-pagination__pages { display: inline-flex; align-items: center; gap: 6px; }
.events-pagination__pages--mobile { display: none; }
.events-pagination__page { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); font-size: var(--font-sm); cursor: pointer; }
.events-pagination__page.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); font-weight: 600; }
.pagination-arrow { display: inline-flex; width: 24px; height: 42px; flex: 0 0 24px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); cursor: pointer; }
.pagination-arrow::before { width: 10px; height: 8px; background: var(--color-text-secondary); content: ""; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; }
.pagination-arrow--prev::before { transform: rotate(90deg); }
.pagination-arrow--next::before { transform: rotate(-90deg); }
.pagination-arrow:hover { color: var(--color-accent-hover); }
.pagination-arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pagination-arrow:disabled { color: var(--color-text-tertiary); cursor: default; }
.events-pagination__dots { display: inline-flex; width: 16px; height: 42px; flex: 0 0 16px; align-items: center; justify-content: center; padding: 0; color: var(--color-text-secondary); font-size: var(--font-sm); }
.events-pagination__meta { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.events-pagination__size { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font-size: var(--font-sm); white-space: nowrap; }
.events-pagination__size .custom-select { width: 72px; }
.events-pagination__size .custom-select__trigger { height: 34px; padding: 0 28px 0 10px; }
.events-pagination__size .custom-select__arrow { right: 10px; }
.events-pagination__total { color: var(--color-text-secondary); font-size: var(--font-sm); white-space: nowrap; }
.events-pagination__total strong { color: var(--color-text-primary); font-weight: var(--table-total-font-weight); }
@media (max-width: 767px) {
  .events-pagination { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
  .events-pagination__navigation { order: 1; width: auto; min-width: 0; flex: 1 1 auto; justify-content: flex-start; flex-wrap: wrap; gap: 2px; }
  .events-pagination__pages { min-width: 0; gap: 2px; }
  .events-pagination__pages--desktop { display: none; }
  .events-pagination__pages--mobile { display: inline-flex; }
  .events-pagination__navigation .pagination-arrow { width: 20px; flex-basis: 20px; }
  .events-pagination__navigation .events-pagination__dots { width: 10px; flex-basis: 10px; }
  .events-pagination__meta { order: 2; width: auto; min-height: 42px; flex: 0 0 auto; justify-content: flex-end; gap: 0; margin-left: auto; }
  .events-pagination__size > span { display: none; }
  .events-pagination__size .custom-select__trigger { height: 32px; }
}
.form-section { padding: 20px; }
.form-section h2 { margin-bottom: 16px; font-size: var(--font-lg); line-height: var(--line-lg); }
.modal-form-sections { display: grid; gap: 28px; }
.modal-form-sections > .form-section { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.modal-form-sections > .form-section > .form-grid { grid-template-columns: minmax(0, 1fr); }
.image-gallery-uploader {
  min-width: 0;
  padding: 16px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-surface);
  background: var(--color-surface-muted);
  transition: border-color .2s, background-color .2s;
}
.image-gallery-uploader.is-drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.image-gallery-uploader.is-invalid { border-color: var(--color-danger); }
.image-gallery-uploader.is-readonly { cursor: default; }
.image-gallery-uploader__empty {
  display: grid;
  min-height: 96px;
  place-items: center;
  color: var(--color-text-secondary);
}
.image-gallery-uploader__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.image-gallery-uploader__item,
.image-gallery-uploader__uploading {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.image-gallery-uploader__item[draggable="true"] { cursor: grab; }
.image-gallery-uploader__item.is-dragging { cursor: grabbing; opacity: .72; }
.image-gallery-uploader__preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.image-gallery-uploader__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-gallery-uploader__main {
  position: absolute;
  top: 8px;
  left: 8px;
  pointer-events: none;
}
.image-gallery-uploader__drag {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
  pointer-events: none;
}
.image-gallery-uploader__drag svg { width: 16px; height: 16px; }
.image-gallery-uploader__delete {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-danger);
  background: var(--color-surface);
  cursor: pointer;
}
.image-gallery-uploader__uploading {
  display: grid;
  place-items: center;
}
.image-gallery-uploader__add { margin-top: 12px; }
.image-gallery-uploader__add .portal-plus { margin-right: 8px; }
.image-lightbox { position: fixed; z-index: 10050; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(16, 12, 13, .68); }
.image-lightbox.is-open { animation: image-lightbox-overlay-in .2s ease-out both; }
.image-lightbox.is-closing { animation: image-lightbox-overlay-out .2s ease-out both; pointer-events: none; }
.image-lightbox__dialog { position: relative; display: grid; width: min(660px, 100%); height: min(720px, calc(100vh - 48px)); height: min(720px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 16px; padding: 42px 24px 20px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-dropdown); }
.image-lightbox__dialog:focus { outline: none; }
.image-lightbox.is-open .image-lightbox__dialog { animation: image-lightbox-dialog-in .2s ease-out both; }
.image-lightbox.is-closing .image-lightbox__dialog { animation: image-lightbox-dialog-out .2s ease-in both; }
.image-lightbox__loader { display: none; grid-row: 1; }
.image-lightbox.is-loading .image-lightbox__loader { display: grid; place-items: center; }
.image-lightbox.is-loading .image-lightbox__dialog img,
.image-lightbox.is-loading .image-lightbox__dialog p,
.image-lightbox.is-loading .image-lightbox__counter,
.image-lightbox.is-loading .image-lightbox__nav,
.image-lightbox.is-error .image-lightbox__dialog img { display: none; }
.image-lightbox.is-error .image-lightbox__dialog p { display: none; }
.image-lightbox__dialog img { display: block; width: 100%; height: 100%; min-height: 0; grid-row: 1; object-fit: contain; }
.image-lightbox__nav { position: absolute; z-index: 1; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); font-size: 0; cursor: pointer; transform: translateY(-50%); }
.image-lightbox__nav::before { width: 10px; height: 8px; background: var(--color-text-primary); content: ""; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; }
.image-lightbox__nav--prev::before { transform: rotate(90deg); }
.image-lightbox__nav--next::before { transform: rotate(-90deg); }
.image-lightbox__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.image-lightbox__nav--prev { left: 10px; }
.image-lightbox__nav--next { right: 10px; }
.image-lightbox__counter { grid-row: 2; color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; }
.image-lightbox__dialog p { grid-row: 3; color: var(--color-text-primary); font-weight: 500; text-align: center; overflow-wrap: anywhere; }
.image-lightbox__close { position: absolute; top: 10px; right: 10px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); font-size: 0; cursor: pointer; }
.image-lightbox__close::before, .image-lightbox__close::after { position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: var(--radius-round); background: currentColor; content: ""; }
.image-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.image-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .image-lightbox__nav:hover,
  .image-lightbox__close:hover { background: var(--color-surface-hover); }
}
@keyframes image-lightbox-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes image-lightbox-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes image-lightbox-dialog-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes image-lightbox-dialog-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } }
@media (max-width: 767px) {
  .image-lightbox { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .image-lightbox__dialog { width: 100%; height: 100%; max-height: 100%; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-lightbox,
  .image-lightbox__dialog { animation: none !important; }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--single { grid-template-columns: minmax(0, 1fr); }
.form-field { display: grid; gap: 4px; color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); }
label.form-field { pointer-events: none; }
label.form-field :is(input, select, textarea, button, a, [tabindex]) { pointer-events: auto; }
.form-field:has(input[required]:not(:disabled), select[required]:not(:disabled), textarea[required]:not(:disabled)) > span:first-child::after { color: var(--color-accent); content: " *"; }
.form-field--required > span:first-child::after { color: var(--color-accent); content: " *"; }
.form-field__counted-label { position: relative; padding-right: 80px; }
.form-field__counted-label small { position: absolute; right: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.form-field__input-wrap { position: relative; display: block; }
.form-field__input-wrap:has(.form-field__lookup-loading) > input { padding-right: 40px; }
.form-field__lookup-loading { position: absolute; top: 50%; right: 12px; display: flex; align-items: center; pointer-events: none; transform: translateY(-50%); }
.form-field__lookup-loading .async-spinner { width: 16px; height: 16px; border-width: 2px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field input, .form-field select { padding: 0 12px; color: var(--color-text-primary); }
.form-field input:focus { border-color: var(--color-accent); }
.select-field select, .form-field select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 2 5 6 9 2' stroke='%236f6d68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 8px;
  cursor: pointer;
  transition: box-shadow .2s, background-color .2s;
}
.select-field select:hover, .form-field select:hover { border-color: var(--color-border-strong); }
.select-field select:focus-visible, .form-field select:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.select-field select:disabled, .form-field select:disabled { background-color: var(--color-surface-muted); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 2 5 6 9 2' stroke='%239b9993' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); color: var(--color-text-tertiary); cursor: not-allowed; }
.select-field select option, .form-field select option { background: var(--color-surface); color: var(--color-text-primary); }
.custom-select { position: relative; width: 100%; color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); }
.custom-select__native { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; opacity: 0; pointer-events: none; }
.custom-select__trigger { display: flex; width: 100%; height: var(--control-height); align-items: center; justify-content: space-between; gap: 12px; padding: 0 40px 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); text-align: left; cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.custom-select__trigger::placeholder { color: var(--color-text-primary); opacity: 1; }
.custom-select__trigger:hover { border-color: var(--color-border-strong); }
.custom-select__trigger:focus,
.custom-select.is-open .custom-select__trigger,
.custom-select:has(.custom-select__trigger[aria-expanded="true"]) .custom-select__trigger { border-color: var(--color-accent); outline: none; }
.custom-select:has(.custom-select__native.is-invalid) .custom-select__trigger { border-color: var(--color-danger); }
.custom-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select__arrow { position: absolute; top: 50%; right: 16px; width: 10px; height: 8px; background: var(--color-text-secondary); pointer-events: none; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: translateY(-50%); transition: transform .2s; }
.custom-select.is-open .custom-select__arrow,
.custom-select:has(.custom-select__trigger[aria-expanded="true"]) .custom-select__arrow { transform: translateY(-50%) rotate(180deg); }
.custom-select.is-disabled .custom-select__trigger { background: var(--color-surface-muted); color: var(--color-text-tertiary); cursor: not-allowed; }
.custom-select.is-disabled .custom-select__arrow { background: var(--color-text-tertiary); }
.measurement-input { display: grid; grid-template-columns: minmax(0, 1fr) 84px; min-width: 0; }
.measurement-input > input { position: relative; z-index: 1; min-width: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); }
.measurement-input > .custom-select { min-width: 0; margin-left: -1px; }
.measurement-input > .custom-select .custom-select__trigger { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.measurement-input > .custom-select .custom-select__trigger:focus { position: relative; z-index: 2; }
.iti .iti__arrow { display: block; width: 10px !important; height: 8px !important; flex: 0 0 10px; margin-top: 0 !important; margin-bottom: 0 !important; border: 0 !important; background: var(--color-text-secondary) !important; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: translateY(1px); }
.iti .iti__arrow--up { transform: translateY(1px) rotate(180deg); }
.custom-select__menu { position: fixed; z-index: 80; padding: 6px; overflow-y: auto; overscroll-behavior: none; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-dropdown); }
.custom-select__group-section + .custom-select__group-section { margin-top: 4px; }
.custom-select__group-toggle { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 10px; padding: 8px 14px 8px calc(14px + var(--custom-select-group-depth, 0) * 20px); border: 0; border-radius: var(--radius-option); background: var(--color-surface-muted); color: var(--color-text-primary); text-align: left; cursor: pointer; }
.custom-select__group-chevron { width: 10px; height: 8px; flex: 0 0 10px; background: var(--color-text-secondary); -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transition: transform .2s ease; }
.custom-select__group-toggle[aria-expanded="true"] .custom-select__group-chevron { transform: rotate(180deg); }
.custom-select__group-name { min-width: 0; flex: 1; font-weight: 500; }
.custom-select__group-count { color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); font-weight: 400; }
.custom-select__group-options { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .2s ease, opacity .2s ease; }
.custom-select__group-toggle[aria-expanded="true"] + .custom-select__group-options { grid-template-rows: 1fr; opacity: 1; }
.custom-select__group-options-inner { min-height: 0; overflow: hidden; }
.custom-select__group-options-inner > .custom-select__group-section:first-child { margin-top: 4px; }
.custom-select__group-options .custom-select__option:first-child { margin-top: 4px; }
.custom-select__group-options .custom-select__option { padding-left: calc(34px + var(--custom-select-group-depth, 0) * 20px); }
.custom-select__option + .custom-select__tree-section,
.custom-select__tree-section + .custom-select__tree-section { margin-top: 4px; }
.custom-select__tree-row { display: flex; min-height: 40px; align-items: center; padding-left: calc(10px + var(--custom-select-group-depth, 0) * 20px); border-radius: var(--radius-option); background: var(--color-surface-muted); }
.custom-select__tree-row.is-selected { background: var(--color-accent-soft); }
.custom-select__tree-toggle,
.custom-select__tree-spacer { display: grid; width: 24px; height: 36px; flex: 0 0 24px; padding: 0; border: 0; background: transparent; place-items: center; }
.custom-select__tree-toggle { color: var(--color-text-secondary); cursor: pointer; }
.custom-select__tree-toggle[aria-expanded="true"] .custom-select__group-chevron { transform: rotate(180deg); }
.custom-select__tree-row .custom-select__option { width: auto; min-width: 0; min-height: 40px; flex: 1; margin: 0; padding: 8px 10px 8px 4px; background: transparent; font-weight: 400; }
.custom-select__tree-row .custom-select__option:hover,
.custom-select__tree-row .custom-select__option.is-selected { background: transparent; }
.custom-select__tree-row .custom-select__option--checkbox.is-selected::after { left: 9px; }
.custom-select__tree-label { min-width: 0; flex: 1; padding: 8px 10px 8px 4px; }
.custom-select__tree-row > .custom-select__group-count { padding-right: 10px; }
.custom-select__tree-row.is-expanded + .custom-select__group-options { grid-template-rows: 1fr; opacity: 1; }
.custom-select__group-options-inner > .custom-select__tree-section:first-child { margin-top: 4px; }
.custom-select__option { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--color-text-primary); text-align: left; cursor: pointer; }
.custom-select__option + .custom-select__option { margin-top: 4px; }
.custom-select__option.has-separator { position: relative; margin-top: 13px; }
.custom-select__option.has-separator::after { position: absolute; top: -7px; right: 0; left: 0; border-top: 1px solid var(--color-border); content: ""; pointer-events: none; }
.custom-select__option:hover, .custom-select__option.is-active { background: var(--color-surface-hover); }
.custom-select__option.is-selected { background: var(--color-accent-soft); font-weight: 600; }
.custom-select__option--checkbox { position: relative; justify-content: flex-start; }
.custom-select__option--checkbox::before { width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-checkbox); background: var(--color-surface); content: ""; }
.custom-select__option--checkbox.is-selected::before { border-color: var(--color-accent); background: var(--color-accent); }
.custom-select__option--checkbox.is-selected::after { position: absolute; left: 15px; width: 5px; height: 9px; border: solid var(--color-text-primary); border-width: 0 2px 2px 0; content: ""; transform: translateY(-1px) rotate(45deg); }
.custom-select__option:disabled { color: var(--color-text-tertiary); cursor: not-allowed; }
.custom-select__empty { padding: 14px 10px; color: var(--color-text-secondary); text-align: center; }
.custom-select__status { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--color-text-secondary); text-align: center; cursor: default; }
.custom-select__status.is-error { color: var(--color-text-primary); cursor: pointer; }
.custom-select__spinner { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent); border-top-color: var(--color-accent); border-radius: var(--radius-round); animation: async-spin .7s linear infinite; }
.form-field .iti { width: 100%; color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); }
.form-field .iti__selected-country-primary { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.form-field .iti__selected-country-primary:hover { background: var(--color-surface-hover); }
.iti--container { z-index: 100; }
.iti__dropdown-content { overscroll-behavior: none; border-color: var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-dropdown); }
.iti__country-list, .ql-picker-options { overscroll-behavior: none; }
.iti__search-input { height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text-primary); }
.iti__search-input:focus { border-color: var(--color-accent); outline: none; }
.iti__country:hover, .iti__country.iti__highlight { background: var(--color-surface-hover); }
.iti__country-check-svg { display: none; }
.form-field input.is-invalid, .form-field select.is-invalid, .form-field textarea.is-invalid { border-color: var(--color-danger); }
.form-field [data-required-target].is-invalid { border-color: var(--color-danger); }
.form-field :is(input, select, textarea):is([readonly], :disabled),
.form-field .custom-select__trigger:disabled {
  background-color: var(--color-surface-muted);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
label:has(:is(input, select, textarea):is([readonly], :disabled)),
:is(input, select, textarea, button):disabled,
:is(input, textarea)[readonly],
[aria-disabled="true"] { cursor: not-allowed; }
.linked-entity-field { position: relative; display: grid; gap: 4px; }
.linked-entity-field__control { position: relative; }
.linked-entity-field__control:has(.linked-entity-field__create:not([hidden])) > input { padding-right: 44px; }
.linked-entity-field__control:has(.linked-entity-field__link:not([hidden])) > input { color: transparent; }
.linked-entity-field.is-linked input[readonly] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text-primary); font-weight: 500; }
.linked-entity-field.is-linked .linked-entity-field__control:has(.linked-entity-field__link:not([hidden])) > input[readonly] { color: transparent; }
.linked-entity-field.is-linked .linked-entity-field__control > input[readonly] { padding-right: 44px; }
.linked-entity-field__link { position: absolute; z-index: 1; inset: 0; display: flex; min-width: 0; align-items: center; padding: 0 12px; overflow: hidden; border: 1px solid var(--color-accent); border-radius: var(--radius-control); background: var(--color-accent-soft); color: var(--color-text-primary); font-weight: 500; }
.linked-entity-field__control:has(.linked-entity-field__clear:not([hidden])) .linked-entity-field__link { padding-right: 44px; }
.linked-entity-field__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linked-entity-field__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.linked-entity-field__identifier { overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); text-overflow: ellipsis; white-space: nowrap; }
:is(.linked-entity-field__clear, .linked-entity-field__create) { position: absolute; z-index: 2; top: 50%; right: 10px; display: grid; width: 24px; height: 24px; appearance: none; place-items: center; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--color-text-secondary); font: inherit; font-size: 0; line-height: 1; cursor: pointer; transform: translateY(-50%); }
:is(.linked-entity-field__clear, .linked-entity-field__create)::before,
:is(.linked-entity-field__clear, .linked-entity-field__create)::after { position: absolute; display: block; width: 10px; height: 1.5px; border-radius: var(--radius-round); background: currentColor; content: ""; }
.linked-entity-field__create::after { transform: rotate(90deg); }
.linked-entity-field__clear::before { transform: rotate(45deg); }
.linked-entity-field__clear::after { transform: rotate(-45deg); }
:is(.linked-entity-field__clear, .linked-entity-field__create):hover { border: 0; background: transparent; box-shadow: none; color: var(--color-text-secondary); }
.linked-entity-autocomplete { position: relative; }
.linked-entity-autocomplete .linked-entity-field__create { top: 50%; margin: 0; align-self: auto; transform: translateY(-50%); }
.linked-entity-autocomplete__menu { position: absolute; z-index: 95; top: calc(100% + 6px); left: 0; display: grid; width: 100%; max-height: min(320px, calc(100vh - 24px)); align-content: start; gap: 4px; padding: 6px; overscroll-behavior: none; }
.linked-entity-autocomplete__menu[hidden] { display: none; }
.linked-entity-autocomplete__option { display: block; }
.linked-entity-autocomplete__option + .linked-entity-autocomplete__option { margin-top: 0; }
.linked-entity-autocomplete__name { display: block; overflow: hidden; color: var(--color-text-primary); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.linked-entity-autocomplete__meta { display: block; margin-top: 0; overflow: hidden; color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); text-overflow: ellipsis; white-space: nowrap; }
.documents-card { padding: 20px; text-align: center; }
.documents-card h2 { text-align: left; font-size: var(--font-lg); line-height: var(--line-lg); }
.verified-mark { display: grid; width: 64px; height: 64px; margin: 20px auto 12px; place-items: center; border-radius: var(--radius-round); background: var(--color-success-soft); color: var(--color-success); font-size: var(--font-2xl); line-height: var(--line-2xl); }
.document-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); text-align: left; }
.document-row div { flex: 1; }
.document-row strong, .document-row small { display: block; }
.document-row small { color: var(--color-success); }
.document-row button { width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); cursor: pointer; }
.document-icon { color: var(--color-accent-hover); font-size: var(--font-xl); line-height: var(--line-xl); }
.manager-card { display: flex; align-items: center; gap: 12px; margin: 16px 0; text-align: left; }
.manager-card strong, .manager-card small { display: block; }
.manager-card small { color: var(--color-text-secondary); }
.not-found { display: grid; min-height: calc(100vh - 152px); place-content: center; justify-items: center; text-align: center; }
.not-found > span { color: var(--color-accent); font-size: var(--font-3xl); line-height: var(--line-3xl); font-weight: 700; }
.not-found p { margin: 8px 0 24px; color: var(--color-text-secondary); }

.password-field { position: relative; display: block; }
.password-field input { padding-right: 84px; }
.password-field button { position: absolute; inset: 0 10px 0 auto; border: 0; background: transparent; color: #b7b1aa; font-size: var(--font-xs); cursor: pointer; }
.field-error { display: none; }
.access-state { display: grid; min-height: 420px; padding: 40px; place-content: center; justify-items: center; text-align: center; }
.access-state__code { color: var(--color-accent-hover); font-size: var(--font-3xl); line-height: var(--line-3xl); font-weight: 700; }
.access-state p { max-width: 520px; margin: 8px 0 24px; color: var(--color-text-secondary); }

/* Administration */
.page-back { display: inline-block; margin-bottom: 8px; color: var(--color-text-secondary); font-size: var(--font-xs); }
.page-back:hover { color: var(--color-text-primary); }
.page-back--after-description { display: inline-flex; align-items: center; margin-top: 12px; margin-bottom: 0; font-size: var(--font-sm); line-height: var(--line-sm); }
.admin-metrics { margin-bottom: 16px; }
.admin-links { display: grid; overflow: hidden; }
.admin-links a { display: grid; gap: 2px; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.admin-links a:last-child { border-bottom: 0; }
.admin-links a:hover { background: var(--color-surface-muted); }
.admin-links span { color: var(--color-text-secondary); }
.admin-filters .search-field, .admin-filters .select-field, .admin-filters .select-field select { width: 100%; min-width: 0; }
.admin-user-list, .settings-user-list, .settings-role-list { position: relative; overflow: hidden; }
.table-loader__content { display: flex; height: var(--table-row-height); align-items: center; justify-content: center; gap: 10px; padding: 0; }
.users-table--settings { min-width: 1000px; }
.users-table--roles { min-width: 720px; }
.users-table th, .users-table td { vertical-align: middle; }
.data-table thead, .users-table thead { background: var(--color-table-heading); }
.data-table thead tr, .data-table tbody tr, .data-table tfoot tr,
.data-table thead th, .data-table tbody td, .data-table tfoot td,
.users-table thead tr, .users-table tbody tr, .users-table tfoot tr,
.users-table thead th, .users-table tbody td, .users-table tfoot td { height: var(--table-row-height); }
.users-table thead th, .users-table tbody td { padding-top: 0; padding-bottom: 0; }
.users-table td small { margin-top: 2px; color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); }
.table-cell-stack { display: grid; gap: 2px; }
.table-cell-secondary { color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); white-space: nowrap; }
.users-table__name, .users-table tbody td:nth-child(2) strong { font-weight: var(--table-entity-font-weight); }
.users-table--roles tbody td:first-child strong { font-weight: var(--table-entity-font-weight); }
.users-table__name { color: var(--table-entity-link-color); cursor: pointer; }
.users-table__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.directory-entry-name.is-inactive .users-table__name,
.users-table__name.directory-entry-name.is-inactive { text-decoration: line-through; }
.directory-entry-name.is-inactive .users-table__name:hover,
.users-table__name.directory-entry-name.is-inactive:hover { text-decoration: line-through underline; }
.users-table__actions-heading, .users-table__actions { width: 48px; padding-inline: 10px !important; text-align: center; }
.users-table:has(> thead > tr > .users-table__actions-heading:first-child) > thead > tr > :nth-child(2),
.users-table:has(> thead > tr > .users-table__actions-heading:first-child) > tbody > tr > :nth-child(2) { padding-left: 0; }
.users-table:has(> thead > tr > .users-table__actions-heading:first-child) > thead > tr > :nth-child(2) .table-sort-trigger { padding-left: 0; }
.users-table__selection { width: 32px; min-width: 32px; max-width: 32px; padding: 0 !important; }
.users-table__selection input[type="checkbox"] { margin-right: 4px; margin-left: auto; }
.users-table__selection input[type="checkbox"]:not(:checked):not(:indeterminate) { background: var(--color-surface); }
.users-table tbody tr.is-selected,
.users-table tbody tr.is-selected:hover { background: var(--color-accent-soft); }
.users-table__selection input:indeterminate { border-color: var(--color-accent); background: var(--color-accent); }
.users-table__selection input:indeterminate::after { width: 8px; height: 2px; border: 0; background: var(--color-text-primary); transform: none; }
.users-table:has(> thead > tr > .users-table__selection:first-child) > thead > tr > .users-table__actions-heading:nth-child(2),
.users-table:has(> thead > tr > .users-table__selection:first-child) > tbody > tr > .users-table__actions:nth-child(2) { width: 36px; padding-inline: 3px !important; }
.users-table:has(> thead > tr > .users-table__selection:first-child) > thead > tr > :nth-child(3),
.users-table:has(> thead > tr > .users-table__selection:first-child) > tbody > tr > :nth-child(3) { padding-left: 4px; }
.users-table:has(> thead > tr > .users-table__selection:first-child) > thead > tr > :nth-child(3) .table-sort-trigger { padding-left: 4px; }
.table-bulk-actions { position: fixed; z-index: 28; right: 0; bottom: 0; left: 210px; display: flex; min-height: 56px; align-items: center; gap: 12px; padding: 8px 18px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 -3px 8px rgba(16, 12, 13, .08); }
.table-bulk-actions__trigger::after { width: 10px; height: 8px; margin-left: 2px; background: var(--color-text-secondary); content: ""; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transition: transform .15s ease; }
.table-bulk-actions__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.table-bulk-actions__count { color: var(--color-text-secondary); font-size: var(--font-sm); line-height: var(--line-sm); }
.table-bulk-actions__count strong { color: var(--color-text-primary); font-weight: var(--table-total-font-weight); }
.table-bulk-actions__clear { display: grid; width: 32px; height: 32px; margin-left: auto; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-secondary); font-size: 22px; line-height: 1; cursor: pointer; }
.page:has(.table-bulk-actions:not([hidden])) { padding-bottom: 74px; }
@media (hover: hover) and (pointer: fine) {
  .table-bulk-actions__clear:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
}
.users-table__menu-trigger { display: inline-grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); cursor: pointer; vertical-align: middle; }
.users-table__menu-trigger svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.users-table__menu-trigger:hover, .users-table__menu-trigger[aria-expanded="true"] { color: var(--color-text-primary); }
.sortable-row__content { display: flex; align-items: center; gap: 10px; }
.sortable-row__handle { display: block; width: 13px; height: 18px; flex: 0 0 13px; color: var(--color-text-primary); cursor: grab; }
.sortable-row__handle:active { cursor: grabbing; }
.sortable-row__handle svg { display: block; width: 12.5px; height: 18px; fill: currentColor; stroke: none; }
.sortable-row__drag-preview { position: fixed; top: -1000px; left: -1000px; display: flex; width: max-content; align-items: center; gap: 10px; pointer-events: none; }
.sortable-row__drag-label { color: var(--color-text-primary); white-space: nowrap; }
[data-touch-reorder-active] [data-touch-reorder-item],
[data-touch-reorder-active] [data-touch-reorder-item] * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (hover: none), (pointer: coarse) {
  [data-touch-reorder-active] [data-touch-reorder-item],
  [data-touch-reorder-active] [data-touch-reorder-item] * {
    -webkit-user-drag: none;
  }
  [data-touch-reorder-active] [data-touch-reorder-item] {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
  }
  [data-touch-reorder-active] [data-touch-reorder-item].is-touch-reorder-pending,
  [data-touch-reorder-active].is-touch-reordering [data-touch-reorder-item] { cursor: grabbing; }
}
.data-table tbody:has(> .sortable-row.is-dragging) > .sortable-row:hover { background: transparent; }
.data-table tbody > .sortable-row.is-dragging,
.data-table tbody > .sortable-row.is-dragging:hover { background: var(--color-table-row-hover); }
.data-table tbody > .sortable-row.is-dragging > :is(td, th),
.data-table tbody > .sortable-row.is-dragging:hover > :is(td, th) { background: var(--color-table-row-hover); }
.data-table tbody > .sortable-row.is-dragging > :is(td, th) > * { opacity: .45; }
.users-table__status-trigger { font-family: inherit; cursor: pointer; }
.users-actions-menu { position: fixed; z-index: 90; width: max-content; min-width: 180px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-dropdown); }
.users-actions-menu__item { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--color-text-primary); text-align: left; cursor: pointer; }
.users-actions-menu__item + .users-actions-menu__item { margin-top: 4px; }
.users-actions-menu__item:hover { background: var(--color-surface-hover); }
.users-actions-menu__item.is-selected { background: var(--color-accent-soft); font-weight: 600; }
.users-actions-menu__item:disabled:not(.is-selected) { color: var(--color-text-tertiary); cursor: not-allowed; }
.users-actions-menu__item.is-busy { position: relative; }
.users-actions-menu__item.is-busy::before { opacity: 0; }
.users-actions-menu__item.is-busy .button__content { visibility: hidden; }
.users-status-menu .users-actions-menu__item { min-height: 32px; padding: 4px 6px; }
.users-status-menu .users-actions-menu__item.is-selected { font-weight: inherit; }
.users-status-menu .users-actions-menu__item > .status { max-width: min(100%, var(--status-menu-badge-max-width)); }
.users-status-menu__heading { padding: 8px 10px 4px; color: var(--color-text-primary); font-size: var(--font-xs); line-height: var(--line-xs); font-weight: 400; }
.users-status-menu__heading:not(:first-child) { margin-top: 6px; padding-top: 10px; }
.users-actions-menu__item--danger { color: var(--color-danger); }
.users-actions-menu__item--edit::before,
.users-actions-menu__item--duplicate::before,
.users-actions-menu__item--send::before,
.users-actions-menu__item--reorder::before,
.users-actions-menu__item--restore::before,
.users-actions-menu__item--delete::before,
.users-actions-menu__item--password-reset::before,
.users-actions-menu__item--visibility::before,
.users-actions-menu__item--view::before,
.users-actions-menu > .custom-select__option::before { width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; content: ""; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.users-actions-menu__item--edit::before { -webkit-mask-image: url("/assets/icons/pencil.svg"); mask-image: url("/assets/icons/pencil.svg"); }
.users-actions-menu__item--duplicate::before { -webkit-mask-image: url("/assets/icons/copy.svg"); mask-image: url("/assets/icons/copy.svg"); }
.users-actions-menu__item--send::before { -webkit-mask-image: url("/assets/icons/send.svg"); mask-image: url("/assets/icons/send.svg"); }
.users-actions-menu__item--reorder::before { -webkit-mask-image: url("/assets/icons/sort-horizontal.svg"); mask-image: url("/assets/icons/sort-horizontal.svg"); }
.users-actions-menu__item--restore::before { -webkit-mask-image: url("/assets/icons/undo.svg"); mask-image: url("/assets/icons/undo.svg"); }
.users-actions-menu__item--delete::before { -webkit-mask-image: url("/assets/icons/trash.svg"); mask-image: url("/assets/icons/trash.svg"); }
.users-actions-menu__item--password-reset::before { -webkit-mask-image: url("/assets/icons/password-reset.svg"); mask-image: url("/assets/icons/password-reset.svg"); }
.users-actions-menu__item--visibility::before { -webkit-mask-image: url("/assets/icons/eye.svg"); mask-image: url("/assets/icons/eye.svg"); }
.users-actions-menu__item--view::before { -webkit-mask-image: url("/assets/icons/eye.svg"); mask-image: url("/assets/icons/eye.svg"); }
.users-actions-menu > .custom-select__option::before { -webkit-mask-image: url("/assets/icons/pencil.svg"); mask-image: url("/assets/icons/pencil.svg"); }
.admin-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 16px; }
.admin-form-layout--single { grid-template-columns: minmax(0, 1fr); }
.admin-form-layout > div { display: grid; gap: 16px; }
.user-form-actions { display: flex !important; justify-content: flex-start; }
.admin-form-aside { padding: 20px; }
.admin-form-aside h2 { font-size: var(--font-lg); line-height: var(--line-lg); }
.admin-form-aside > p { margin: 8px 0 16px; color: var(--color-text-secondary); }
.admin-form-aside dl { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.admin-form-aside dl div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.admin-form-aside dt { color: var(--color-text-secondary); }
.admin-form-aside dd { text-align: right; }
.form-hint { margin-top: 12px; color: var(--color-text-secondary); font-size: var(--font-xs); line-height: var(--line-xs); }

/* Global modal panel */
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }
.modal-panel-overlay { position: fixed; z-index: 50; inset: 0; display: flex; justify-content: flex-end; overscroll-behavior: none; }
.modal-panel-overlay::before { position: absolute; inset: 0; background: rgba(16, 12, 13, .55); opacity: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); content: ""; }
.modal-panel-overlay.is-open::before { animation: modal-overlay-in .2s ease-out both; }
.modal-panel-overlay.is-closing::before { animation: modal-overlay-out .2s ease-out both; }
.modal-panel-overlay.is-closing { display: flex; pointer-events: none; }
.modal-panel-overlay.is-closing :is(.linked-entity-autocomplete__menu, .ql-picker-options, .ql-tooltip),
.confirm-modal.is-closing :is(.custom-select__menu, [role="listbox"], [role="menu"]) { display: none !important; }
.modal-panel { position: relative; z-index: 1; display: flex; width: var(--modal-panel-width); max-width: 92vw; height: 100vh; height: 100dvh; flex-direction: column; overflow: hidden; border-left: 1px solid var(--color-border); background: var(--color-surface); box-shadow: -12px 0 36px rgba(16, 12, 13, .18); transform: translateX(100%); }
.modal-panel--wide { width: var(--modal-panel-width-wide); }
.modal-panel-overlay.is-open .modal-panel { transform: translateX(0); animation: modal-panel-in .2s ease-out both; }
.modal-panel-overlay.is-open.is-continuing::before { opacity: 1; animation: none; }
.modal-panel-overlay.is-open.is-continuing .modal-panel { transform: translateX(0); animation: none; }
.modal-panel-overlay.is-closing .modal-panel { animation: modal-panel-out .2s ease-out both; }
.modal-panel__main { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.modal-panel__header { display: flex; min-height: var(--portal-header-height); flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.modal-panel__header h2 { display: flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; font-size: var(--font-lg); line-height: var(--line-lg); text-overflow: ellipsis; white-space: nowrap; }
.modal-panel__header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.modal-panel__aside-open { display: none; min-height: 36px; padding-block: 6px; }
.modal-panel__close { position: relative; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); font-size: 0; cursor: pointer; }
.modal-panel__close::before, .modal-panel__close::after { position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 1px; background: currentColor; content: ""; }
.modal-panel__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-panel__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-panel__close:hover { background: var(--color-surface-hover); }
.modal-panel__body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: var(--color-surface); }
.modal-panel__footer { display: flex; min-height: 64px; flex: 0 0 auto; align-items: center; padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.modal-panel__footer > .button:last-child { margin-left: auto; }
.modal-panel__footer .modal-form-actions { display: flex; width: 100%; align-items: center; gap: 10px; padding: 0; flex-wrap: wrap; }
.modal-panel__footer .modal-form-actions > .button:last-child { margin-left: auto; }
.modal-form-actions__primary { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.modal-panel__body:has(.modal-panel__loading) { display: grid; }
.modal-panel__body:has(.modal-panel__loading) > form { display: grid; min-height: 100%; }
.modal-panel__loading { display: grid; width: 100%; height: 100%; min-height: 0; place-content: center; justify-items: center; gap: 12px; color: var(--color-text-secondary); }
.modal-panel--split { width: var(--modal-panel-width-split); max-width: 96vw; flex-direction: row; }
.modal-panel--split > .modal-panel__main { flex: 1 1 650px; }
.modal-panel__aside { display: flex; min-width: 0; min-height: 0; flex: 0 0 400px; flex-direction: column; border-left: 1px solid var(--color-border); background: var(--color-surface-muted); }
.confirm-modal { position: fixed; z-index: 100; inset: 0; display: grid; padding: 20px; overscroll-behavior: none; place-items: center; background: rgba(16, 12, 13, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.confirm-modal.is-open { animation: confirm-modal-in .2s ease-out both; }
.confirm-modal.is-closing { animation: confirm-modal-out .2s ease-out both; pointer-events: none; }
.confirm-modal__dialog { width: min(420px, 100%); padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); box-shadow: var(--shadow-dropdown); }
.confirm-modal__dialog h2 { font-size: var(--font-lg); line-height: var(--line-lg); }
.confirm-modal__dialog p { margin-top: 10px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.confirm-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.confirm-modal__submit { border-color: var(--color-status-danger-background); background: var(--color-status-danger-background); color: var(--color-text-inverse); }
.confirm-modal__submit:hover { border-color: var(--color-status-danger-background); background: var(--color-status-danger-background); }
[data-modal] .form-field > span:first-child { color: var(--color-text-primary); }
[data-user-modal] .admin-form-layout { display: block; }
[data-user-modal] .admin-form-layout > div { gap: 28px; }
[data-user-modal] .form-grid { grid-template-columns: 1fr; }
[data-user-modal] .form-section,
[data-user-modal] .admin-form-aside { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-user-modal] .form-section h2,
[data-user-modal] .admin-form-aside h2 { font-size: var(--font-base); line-height: var(--line-base); }
[data-user-modal] .admin-form-aside { margin-top: 28px; }
.form-field textarea { width: 100%; min-height: 96px; padding: 10px 12px; resize: vertical; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: var(--font-sm); line-height: var(--line-sm); }
.form-field textarea:focus { border-color: var(--color-accent); outline: none; }
.form-hint { color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }
@keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-panel-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes modal-panel-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes confirm-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-modal-out { from { opacity: 1; } to { opacity: 0; } }

/* Responsive */
@media (min-width: 1024px) {
  .page-header[data-module-assets] { margin-top: -18px; }
  .page-header[data-module-assets]::after { position: absolute; top: 59px; right: -18px; left: -18px; border-bottom: 1px solid var(--color-border); content: ""; pointer-events: none; }
  .page-header[data-module-assets] .page-header__title-row { height: 60px; }
  .sidebar, .app-main, .sidebar__brand, .sidebar__brand img, .page-navigation-loader { transition: width .2s ease, margin-left .2s ease, left .2s ease, height .2s ease; }
  .sidebar__collapse { position: absolute; z-index: 32; top: 0; right: -15px; display: block; width: 15px; height: 100%; padding: 0; appearance: none; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--color-text-secondary); cursor: pointer; transition: background-color .15s ease; }
  .sidebar__collapse-arrow { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; }
  .sidebar__collapse-arrow::before { width: 10px; height: 8px; background: var(--color-text-secondary); content: ""; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: translateX(2px) rotate(90deg); transition: transform .2s ease; }
  .sidebar__collapse:focus-visible { outline: none; }
  .sidebar__collapse:hover, .sidebar__collapse:focus-visible { background: var(--color-border); }
  .sidebar__collapse:hover .sidebar__collapse-arrow,
  .sidebar__collapse:focus-visible .sidebar__collapse-arrow { opacity: 1; }
  .app-shell.is-sidebar-compact .sidebar { width: 72px; }
  .app-shell.is-sidebar-compact .app-main { margin-left: 72px; }
  .app-shell.is-sidebar-compact .page-navigation-loader,
  .app-shell.is-sidebar-compact .section-loading-row { left: 72px; }
  .app-shell.is-sidebar-compact .table-bulk-actions { left: 72px; }
  .app-shell.is-sidebar-compact .page { max-width: none; margin: 0; }
  .app-shell.is-sidebar-compact .sidebar__brand { height: 88px; }
  .app-shell.is-sidebar-compact .sidebar__brand img { width: 62px; }
  .app-shell.is-sidebar-compact .sidebar__brand::after { width: 62px; height: 72px; }
  .app-shell.is-sidebar-compact .sidebar__collapse-arrow::before { transform: translateX(-2px) rotate(-90deg); }
  .app-shell.is-sidebar-compact .sidebar__account { position: relative; margin-inline: 8px; padding: 8px; }
  .app-shell.is-sidebar-compact .sidebar__account-main { justify-content: center; }
  .app-shell.is-sidebar-compact .sidebar__account-main > div:last-child,
  .app-shell.is-sidebar-compact .sidebar__level,
  .app-shell.is-sidebar-compact .nav-link__label { display: none; }
  .app-shell.is-sidebar-compact .nav-link { justify-content: center; gap: 0; margin-inline: 8px; padding-inline: 0; overflow: visible; pointer-events: auto; }
  .app-shell.is-sidebar-compact .nav-link__badge { position: absolute; top: 7px; right: 7px; width: 7px; min-width: 7px; height: 7px; padding: 0; color: transparent; font-size: 0; line-height: 0; }
  .app-shell.is-sidebar-compact [data-sidebar-tooltip] { position: relative; }
  .app-shell.is-sidebar-compact [data-sidebar-tooltip]::after { position: absolute; z-index: 40; top: 50%; left: calc(100% + 10px); padding: 7px 10px; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius-option); background: var(--color-sidebar-hover); color: var(--color-text-inverse); box-shadow: var(--shadow-dropdown); content: attr(data-sidebar-tooltip); font-size: var(--font-xs); line-height: var(--line-xs); opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .15s ease, transform .15s ease; white-space: nowrap; }
  .app-shell.is-sidebar-compact [data-sidebar-tooltip]:hover::after { opacity: 1; transform: translate(0, -50%); }
}
@media (max-width: 1023px) {
  .app-main { margin-left: 0; }
  .portal-notification-layer:not(.portal-notification-layer--inline) { top: calc(var(--portal-header-height) + var(--space-3)); }
  .table-bulk-actions { left: 0; padding-right: 12px; padding-left: 12px; }
  .page-navigation-loader, .section-loading-row { left: 0; }
  .page { position: relative; }
  .mobile-header { position: fixed; z-index: 24; top: 0; right: 0; left: 0; display: block; height: 60px; background: var(--color-sidebar); }
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 25; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(23,23,23,.45); }
  body.menu-open .sidebar-backdrop { display: block; }
  .mobile-menu-button { position: absolute; z-index: 2; top: 12px; left: 18px; display: grid; margin: 0; border-color: var(--color-accent); background: var(--color-sidebar); color: var(--color-accent); }
  .mobile-header-logo { position: absolute; z-index: 2; top: 0; left: 50%; display: grid; width: 48px; height: 60px; place-items: center; transform: translateX(-50%); }
  .portal-notification-bell--desktop { display: none; }
  .portal-notification-bell--mobile { position: absolute; z-index: 2; top: 12px; right: 18px; display: grid; border-color: var(--color-accent); background: var(--color-sidebar); color: var(--color-accent); }
  .portal-notification-bell--mobile.is-active { background: var(--color-sidebar-hover); color: var(--color-accent); }
  .sticky-table-header { z-index: 23; top: 60px; }
  [data-page-content] .page-header[data-module-assets] { padding-top: 50px; }
  [data-page-content] .page-header[data-module-assets] h1 { display: flex; min-height: 0; align-items: center; padding-left: 0; }
  [data-page-content] .page-header[data-module-assets] p { margin-top: 8px; padding-left: 0; }
  [data-page-content] .page-back--after-description { position: absolute; z-index: 2; top: 20px; left: 78px; margin: 0; }
  [data-page-content] [data-module-assets]:not(.page-header):has(.page-back--after-description):not(:has(.page-heading--with-menu)) { padding-top: 56px; }
  [data-page-content] [data-module-assets]:has(.page-heading--with-menu) { padding-top: 56px; }
  .page-heading--with-menu { display: flex; min-height: 0; align-items: center; padding-left: 0; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-form-layout { grid-template-columns: 1fr; }
  .admin-user-list, .settings-user-list, .settings-role-list { overflow-x: auto; }
  .modal-panel--split { width: 100vw; max-width: 100vw; }
  .modal-panel--split > .modal-panel__main,
  .modal-panel--split > .modal-panel__aside { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .2s ease, visibility .2s ease; }
  .modal-panel--split > .modal-panel__main { z-index: 1; background: var(--color-surface); transform: translateX(0); }
  .modal-panel--split > .modal-panel__aside { z-index: 2; border-left: 0; transform: translateX(100%); visibility: hidden; pointer-events: none; }
  .modal-panel--split.is-aside-open > .modal-panel__main { transform: translateX(-100%); visibility: hidden; pointer-events: none; }
  .modal-panel--split.is-aside-open > .modal-panel__aside { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .modal-panel__aside-open { display: inline-flex; }
}
@media (max-width: 767px) {
  .portal-notification { grid-template-columns: 36px minmax(0, 1fr) 28px; padding: var(--space-3); }
  .portal-notification__open { grid-template-columns: 36px minmax(0, 1fr); }
  .portal-notification__icon { width: 36px; height: 36px; }
  .entity-mobile-card__header { display: flex; height: 44px; align-items: center; padding: 0 6px 0 12px; border-bottom: 1px solid var(--color-border); background: var(--color-table-heading); }
  .entity-mobile-card__identity { display: flex; width: 100%; min-width: 0; align-items: center; gap: 12px; }
  .entity-mobile-card__identity > input[type="checkbox"] { flex: 0 0 auto; }
  .entity-mobile-card__identity .users-table__menu-trigger { flex: 0 0 32px; margin-left: auto; }
  .entity-mobile-card__primary { min-width: 0; max-width: 100%; flex: 1 1 auto; overflow: hidden; color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: var(--table-entity-font-weight); text-overflow: ellipsis; white-space: nowrap; }
  .entity-mobile-card__primary > :is(a, span, strong, div) { min-width: 0; max-width: 100%; }
  .page-header--action { align-items: flex-start; flex-direction: column; }
  .metrics-grid, .form-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 100px; }
  .form-field--wide { grid-column: auto; }
  .list-filter-bar__primary > .filter-toolbar { flex: 1 1 0; }
  .filter-controls { align-items: stretch; }
  .filter-controls > .search-field, .filter-controls > .select-field { width: 100%; flex-basis: 100%; }
  .modal-panel { width: 100vw; max-width: 100vw; }
  [data-user-modal] .form-grid { grid-template-columns: 1fr; }
  [data-user-modal] .user-form-actions { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .async-spinner, .custom-select__spinner { animation: none; }
  .sidebar__brand::after { animation: none; }
  .portal-notification, .portal-notification::before { animation: none !important; }
  .portal-notification.is-visible { opacity: 1; transform: none; }
  .modal-panel-overlay::before, .modal-panel, .modal-panel__main, .modal-panel__aside, .confirm-modal { animation: none !important; }
  .modal-panel-overlay.is-open::before { opacity: 1; }
}

.activity-feed { display: flex; width: 100%; min-width: 0; min-height: 0; flex: 1; flex-direction: column; background: var(--color-surface-muted); }
.activity-feed__mobile-header { display: none; }
.activity-feed__tabs { display: flex; height: 60px; flex: 0 0 60px; align-items: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid transparent; }
.activity-feed__tab { min-width: 0; flex: 1; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--color-surface-hover); color: var(--color-text-secondary); font: inherit; font-size: var(--font-sm); line-height: var(--line-sm); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.activity-feed__tab.is-active { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-primary); }
@media (hover: hover) and (pointer: fine) {
  .activity-feed__tab:not(.is-active):hover { background: var(--color-border); }
}
.activity-feed__list { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 20px; overflow-y: auto; overscroll-behavior: none; padding: 12px 20px 20px; }
.activity-feed__loading { display: grid; min-height: 42px; flex: 0 0 auto; place-items: center; }
.activity-feed__loading--initial { min-height: 0; flex: 1 1 auto; }
.activity-feed__empty { padding: 24px 4px; color: var(--color-text-tertiary); font-size: var(--font-sm); line-height: var(--line-sm); text-align: center; }
.activity-feed__day-group { position: relative; display: grid; gap: 12px; }
.activity-feed__day-group:not(.is-first)::before { position: absolute; z-index: 0; top: -20px; left: 15px; width: 2px; height: 68px; background: var(--color-accent); content: ""; }
.activity-feed__day { color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; text-align: center; }
.activity-feed__timeline { display: grid; gap: 14px; }
.activity-feed-item { position: relative; display: flex; min-width: 0; min-height: 32px; align-items: flex-start; gap: 10px; }
.activity-feed-item::before { position: absolute; top: -14px; bottom: -14px; left: 15px; width: 2px; background: var(--color-accent); content: ""; }
.activity-feed-item.is-first::before { top: 16px; }
.activity-feed-item.is-last::before { bottom: 0; }
.activity-feed-item__marker { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; cursor: default; }
.activity-feed-item__icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--color-accent); border-radius: var(--radius-option); background: var(--color-accent); color: var(--color-text-primary); }
.activity-feed-item__icon::before { width: 15px; height: 15px; background: currentColor; content: ""; -webkit-mask: url("/assets/icons/pencil.svg") center / contain no-repeat; mask: url("/assets/icons/pencil.svg") center / contain no-repeat; }
.activity-feed-item__icon--created { background: var(--color-accent); color: var(--color-text-primary); }
.activity-feed-item__icon--created::before { content: none; }
.activity-feed-item__icon--created .portal-plus { width: 10px; height: 10px; }
.activity-feed-item__icon--comment::before { -webkit-mask-image: url("/assets/icons/pencil.svg"); mask-image: url("/assets/icons/pencil.svg"); }
.activity-feed-item__icon--people::before { -webkit-mask-image: url("/assets/icons/people.svg"); mask-image: url("/assets/icons/people.svg"); }
.activity-feed-item__icon--clock::before { -webkit-mask-image: url("/assets/icons/clock.svg"); mask-image: url("/assets/icons/clock.svg"); }
.activity-feed-item__icon--urgent::before { -webkit-mask-image: url("/assets/icons/fire.svg"); mask-image: url("/assets/icons/fire.svg"); }
.activity-feed-item__icon--viewed::before { -webkit-mask-image: url("/assets/icons/eye.svg"); mask-image: url("/assets/icons/eye.svg"); }
.activity-feed-item__tooltip.is-floating { position: fixed; z-index: 1000; display: grid; gap: 2px; opacity: 1; pointer-events: none; white-space: nowrap; transform: translateY(-100%); --tooltip-arrow-left: 14px; }
.activity-feed-item__body { min-width: 0; flex: 1; }
.activity-feed-item__head { display: flex; min-width: 0; min-height: 32px; align-items: center; gap: 8px; }
.activity-feed-item__head strong { min-width: 0; color: var(--color-text-primary); font-size: var(--font-sm); line-height: var(--line-sm); font-weight: 500; overflow-wrap: anywhere; }
.activity-feed-item__head time { flex: 0 0 auto; margin-left: auto; color: var(--color-text-tertiary); font-size: var(--font-xs); line-height: var(--line-xs); }
.activity-feed-item__status { margin-top: 7px; }
.activity-feed-item__changes { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.activity-feed-item__changes li { display: block; min-width: 0; padding: 8px 10px; border-radius: var(--radius-option); background: var(--color-accent-soft); font-size: var(--font-xs); line-height: var(--line-xs); overflow-wrap: anywhere; }
.activity-feed-item__change-label { display: block; color: var(--color-text-primary); }
.activity-feed-item__changes del,
.activity-feed-item__changes ins { display: inline; text-decoration: none; }
.activity-feed-item__changes del { color: var(--color-text-primary); text-decoration: line-through; }
.activity-feed-item__changes ins { color: var(--color-text-primary); }
.activity-feed-item__change-arrow { display: inline-block; width: 10px; height: 8px; background: var(--color-text-secondary); vertical-align: middle; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: rotate(-90deg); }
.activity-feed-item__message-row { position: relative; display: flex; width: 100%; min-width: 0; align-items: center; margin-top: 3px; }
.activity-feed-item__message { position: relative; width: 100%; min-width: 0; flex: 1 1 auto; margin: 0; padding: 8px 12px; border-radius: var(--radius-option); background: var(--color-surface); color: var(--color-text-primary); font-size: var(--font-sm); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.activity-feed-item__message-row:has(.activity-feed-item__delete, .activity-feed-item__restore) .activity-feed-item__message { padding-right: 44px; }
.activity-feed-item.is-deleted .activity-feed-item__message { color: var(--color-text-tertiary); text-decoration: line-through; }
.activity-feed-item__delete,
.activity-feed-item__restore.button,
.activity-feed-item__restore.button.is-busy { position: absolute; top: 50%; right: 6px; display: grid; width: 28px; height: 28px; min-height: 28px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--color-text-tertiary); cursor: pointer; transform: translateY(-50%); }
.activity-feed-item__delete > span { width: 15px; height: 15px; background: currentColor; -webkit-mask: url("/assets/icons/trash.svg") center / contain no-repeat; mask: url("/assets/icons/trash.svg") center / contain no-repeat; }
.activity-feed-item__restore-icon { display: block; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("/assets/icons/undo.svg") center / contain no-repeat; mask: url("/assets/icons/undo.svg") center / contain no-repeat; }
.activity-feed-item__restore.is-busy .activity-feed-item__restore-icon { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .activity-feed-item__delete,
  .activity-feed-item__restore { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
  .activity-feed-item:hover .activity-feed-item__delete,
  .activity-feed-item:hover .activity-feed-item__restore,
  .activity-feed-item:focus-within .activity-feed-item__delete,
  .activity-feed-item:focus-within .activity-feed-item__restore { opacity: 1; visibility: visible; pointer-events: auto; }
  .activity-feed-item__delete:hover { background: var(--color-danger-soft); color: var(--color-status-danger-background); }
  .activity-feed-item__restore:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
}
.activity-feed__composer { display: flex; min-height: 64px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid transparent; background: var(--color-surface-muted); }
.activity-feed__composer textarea { width: 100%; min-width: 0; height: 40px; min-height: 40px; max-height: 40px; padding: 9px 12px; resize: none; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); outline: 0; background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: var(--font-sm); line-height: 20px; }
.activity-feed__composer textarea:focus { border-color: var(--color-accent); }
.activity-feed__composer textarea:disabled { cursor: not-allowed; }
.activity-feed__send { position: relative; width: 40px; height: 40px; min-height: 40px; flex: 0 0 40px; padding: 0; }
.activity-feed__send::before { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; background: currentColor; content: ""; -webkit-mask: url("/assets/icons/send.svg") center / contain no-repeat; mask: url("/assets/icons/send.svg") center / contain no-repeat; transform: translate(-50%, -50%); }
.activity-feed__send.is-busy::before { opacity: 0; }

@media (max-width: 1023px) {
  .activity-feed__mobile-header { display: flex; height: 60px; min-height: 60px; flex: 0 0 60px; align-items: center; gap: 0; padding: 0 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
  .activity-feed__mobile-header h3 { min-width: 0; overflow: hidden; font-size: var(--font-lg); line-height: var(--line-lg); text-overflow: ellipsis; white-space: nowrap; }
  .activity-feed__back { display: grid; width: 28px; height: 36px; flex: 0 0 28px; padding: 0; place-items: center start; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); cursor: pointer; }
  .activity-feed__back > span { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--portal-chevron-image) center / contain no-repeat; mask: var(--portal-chevron-image) center / contain no-repeat; transform: rotate(90deg); }
  .activity-feed__tabs { height: 60px; flex-basis: 60px; }
  .activity-feed__composer { padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
}