:root {
    --page-bg: #000000;
    --shell-bg: #000000;
    --shell-bg-soft: #070707;
    --shell-line: rgba(255, 255, 255, 0.06);
    --topbar-height: 68px;
    --active-zone-gap: 18px;
    --content-bg: #191d25;
    --content-bg-2: #202530;
    --content-bg-3: #252b37;
    --content-line: rgba(255, 255, 255, 0.06);
    --text: #f5f7fb;
    --text-soft: #c7cfde;
    --text-muted: #8b96aa;
    --text-faint: #5f697b;
    --accent: #1fb9ff;
    --accent-soft: rgba(31, 185, 255, 0.16);
    --positive: #53d57b;
    --positive-soft: rgba(83, 213, 123, 0.14);
    --warning: #f1c160;
    --warning-soft: rgba(241, 193, 96, 0.15);
    --danger: #ff6a6a;
    --danger-soft: rgba(255, 106, 106, 0.15);
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 11px;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
}

.inline-action-form .action-button {
    border: 0;
    cursor: pointer;
}

body[data-theme="light"] {
    --page-bg: #ffffff;
    --shell-bg: #ffffff;
    --shell-bg-soft: #f5f7fa;
    --shell-line: rgba(16, 24, 40, 0.08);
    --content-bg: #ffffff;
    --content-bg-2: #f7f9fc;
    --content-bg-3: #eef3f8;
    --content-line: rgba(16, 24, 40, 0.08);
    --text: #0c1220;
    --text-soft: #2d3748;
    --text-muted: #5e6b80;
    --text-faint: #7d8899;
    --warning: #7a5100;
    --warning-soft: rgba(241, 193, 96, 0.24);
    --shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: Manrope, Inter, "Segoe UI", sans-serif;
    font-synthesis-weight: none;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    background: var(--page-bg);
    color: var(--text);
    text-rendering: geometricPrecision;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-body {
    min-height: 100vh;
    background: var(--page-bg);
}

.shell-frame {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--page-bg);
}

.sidenav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 88px;
    flex: 0 0 88px;
    padding-top: calc(var(--topbar-height) + var(--active-zone-gap));
    min-height: 100vh;
    max-height: 100vh;
    overflow: visible;
    z-index: 20;
    transition: padding-top 0.18s ease;
}

.sidenav-panel {
    position: relative;
    width: 88px;
    min-height: calc(100vh - var(--topbar-height) - var(--active-zone-gap));
    max-height: calc(100vh - var(--topbar-height) - var(--active-zone-gap));
    background: rgba(8, 10, 14, 0.20);
    padding: 18px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.16);
    transition: width 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, min-height 0.18s ease, max-height 0.18s ease;
}

body.has-shell-scroll .sidenav {
    padding-top: var(--topbar-height);
}

body.has-shell-scroll .sidenav-panel {
    min-height: calc(100vh - var(--topbar-height));
    max-height: calc(100vh - var(--topbar-height));
}

.sidenav:hover .sidenav-panel,
.sidenav:focus-within .sidenav-panel {
    width: 244px;
    background: rgba(8, 10, 14, 0.27);
    box-shadow: 18px 0 32px rgba(0, 0, 0, 0.24);
}

body[data-theme="light"] .sidenav-panel {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

body[data-theme="light"] .sidenav:hover .sidenav-panel,
body[data-theme="light"] .sidenav:focus-within .sidenav-panel {
    background: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

.brand-logo,
.login-logo {
    display: block;
    width: auto;
}

.brand-logo {
    width: 60px;
    min-width: 60px;
    max-width: 100%;
    height: auto;
}

.login-logo {
    height: 34px;
}

.menu-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: none;
}

.menu-list::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.menu-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-group summary {
    list-style: none;
    cursor: pointer;
}

.menu-group summary::-webkit-details-marker {
    display: none;
}

.menu-item {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.menu-label,
.menu-badge,
.menu-caret,
.submenu-list {
    transition: opacity 0.18s ease, max-width 0.22s ease, transform 0.22s ease, padding 0.22s ease, max-height 0.22s ease;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
}

body[data-theme="light"] .menu-item:hover {
    background: rgba(15, 23, 42, 0.05);
}

body[data-theme="light"] .sidenav {
    border-right-color: transparent;
}

body[data-theme="light"] .submenu-item {
    color: #5f697d;
}

.menu-item.active {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
}

.menu-item.active:hover,
body[data-theme="light"] .menu-item.active,
body[data-theme="light"] .menu-item.active:hover {
    background: transparent;
}

.menu-item.active .menu-label,
.menu-item.active .menu-icon,
.menu-item.active .menu-badge {
    color: var(--accent);
}

.menu-item-group {
    list-style: none;
}

.menu-icon,
.menu-icon svg,
.menu-caret svg,
.circle-button svg,
.switch-dot svg,
.action-button i svg,
.save-button i svg,
.crumb-sep svg,
.filter-chip i svg {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-icon {
    flex: 0 0 18px;
}

.menu-caret {
    display: inline-flex;
    color: var(--text-faint);
    transition: transform 0.18s ease, color 0.18s ease;
}

.menu-group[open] > .menu-item-group .menu-caret,
.menu-group-submenu[open] > .submenu-item-group .menu-caret {
    transform: rotate(90deg);
}

.menu-group.active[open] > .menu-item-group .menu-caret,
.menu-group-submenu.active[open] > .submenu-item-group .menu-caret {
    color: var(--accent);
}

.submenu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 4px 40px;
    overflow: hidden;
}

.submenu-list-nested {
    padding: 4px 0 2px 16px;
}

.submenu-item {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    color: var(--text-faint);
    font-size: 0.77rem;
    font-weight: 600;
    transition: color 0.18s ease;
}

.submenu-item-group {
    justify-content: space-between;
    gap: 10px;
}

.submenu-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.submenu-item-group .menu-caret {
    margin-left: auto;
}

.submenu-item-nested {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.submenu-item-deep {
    min-height: 32px;
    font-size: 0.75rem;
}

.submenu-list-deep {
    padding-left: 14px;
}

.submenu-item-nested::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    margin-right: 10px;
    opacity: 0.38;
}

.submenu-item:hover,
.submenu-item.active,
body[data-theme="light"] .submenu-item:hover,
body[data-theme="light"] .submenu-item.active {
    color: var(--accent);
}

.submenu-item.active .submenu-link,
.submenu-item:hover .submenu-link {
    color: inherit;
}

.menu-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 500;
}

.menu-badge {
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
}

.main-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 68px;
    padding: 14px 20px;
    background: var(--shell-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body[data-theme="light"] .topbar {
    border-bottom-color: transparent;
}

.topbar-left,
.breadcrumbs,
.topbar-right,
.user-box,
.panel-actions,
.stat-topline,
.bar-head,
.filter-row {
    display: flex;
    align-items: center;
}

.topbar-left {
    gap: 18px;
    min-width: 0;
    flex: 1;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    flex: 0 0 60px;
}

.breadcrumbs {
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.crumb {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 600;
}

.crumb.current {
    color: var(--text-soft);
}

.crumb-sep {
    color: var(--text-faint);
    display: inline-flex;
}

.topbar-right {
    gap: 12px;
    flex-wrap: wrap;
}

.user-menu {
    position: relative;
}

.user-menu summary {
    list-style: none;
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body[data-theme="light"] .theme-switch {
    background: transparent;
}

.sidenav:not(:hover):not(:focus-within) .menu-item {
    justify-content: center;
    padding: 0;
    gap: 0;
    min-height: 50px;
}

.sidenav:not(:hover):not(:focus-within) .menu-label,
.sidenav:not(:hover):not(:focus-within) .menu-badge,
.sidenav:not(:hover):not(:focus-within) .menu-caret {
    width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-8px);
}

.sidenav:not(:hover):not(:focus-within) .menu-icon,
.sidenav:not(:hover):not(:focus-within) .menu-icon svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

.sidenav:not(:hover):not(:focus-within) .submenu-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.switch-dot,
.circle-button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.switch-dot svg {
    width: 18px;
    height: 18px;
}

.circle-button {
    width: 32px;
    height: 32px;
}

.circle-button svg {
    width: 20px;
    height: 20px;
}

.switch-dot.active,
.switch-dot:hover,
.circle-button:hover {
    color: var(--text);
}

body[data-theme="light"] .switch-dot.active,
body[data-theme="light"] .switch-dot:hover,
body[data-theme="light"] .circle-button:hover {
    background: transparent;
}

.user-box {
    gap: 8px;
    min-height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

body[data-theme="light"] .user-box {
    background: transparent;
}

.user-meta {
    text-align: right;
}

.user-meta strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-soft);
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}

body[data-theme="light"] .avatar {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-soft);
}

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--content-bg-2) 0%, var(--content-bg) 100%);
    border: 1px solid var(--content-line);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
    display: grid;
    gap: 12px;
    z-index: 30;
}

.user-menu-person {
    display: grid;
    gap: 4px;
}

.user-menu-person strong {
    font-size: 0.88rem;
    font-weight: 700;
}

.user-menu-person span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.user-menu-logout {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font: inherit;
    transition: background 0.18s ease, transform 0.18s ease;
}

.user-menu-logout:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

body[data-theme="light"] .user-menu-logout {
    background: rgba(15, 23, 42, 0.04);
}

body[data-theme="light"] .user-menu-logout:hover {
    background: rgba(15, 23, 42, 0.08);
}

.page-section {
    flex: 1;
    min-height: 0;
    padding: var(--active-zone-gap) 0 0;
    display: flex;
    flex-direction: column;
}

body[data-theme="light"] .main-shell,
body[data-theme="light"] .page-section {
    background: #ffffff;
}

body.is-loading .panel-surface {
    opacity: 0.82;
    transition: opacity 0.16s ease;
}

.panel-surface {
    flex: 1;
    min-height: 100%;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #1c2029 0%, #171b23 100%);
    border: 1px solid var(--content-line);
    padding: 14px 16px 18px;
    box-shadow: var(--shadow);
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.panel-surface.panel-surface-tabs {
    padding-top: 8px;
}

body[data-theme="light"] .panel-surface {
    background: linear-gradient(180deg, #edf1f5 0%, #e6ebf1 100%);
    box-shadow: none;
    border-color: rgba(15, 23, 42, 0.05);
}

.panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 4px 2px 14px;
}

.panel-surface.panel-surface-tabs .panel-head {
    padding-top: 0;
    gap: 10px;
}

.panel-head-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.page-heading-compact {
    min-width: 0;
}

.page-heading-compact h2 {
    margin: 0;
    font-size: clamp(1.4rem, 1.7vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.page-heading-compact p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.panel-surface.panel-surface-tabs .panel-head-main,
.panel-surface.panel-surface-tabs .panel-actions {
    align-self: start;
}

.panel-head-main h2 {
    margin: 0;
    font-size: clamp(1.9rem, 2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.panel-head-main p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.panel-actions {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: center;
}

.panel-head-filters,
.panel-state {
    grid-column: 1 / -1;
}

.panel-head.panel-head-tabs.panel-head-has-filters,
.panel-head.panel-head-tabs.panel-head-has-state {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.panel-head.panel-head-tabs.panel-head-has-filters .panel-head-filters,
.panel-head.panel-head-tabs.panel-head-has-state .panel-state {
    grid-column: auto;
    align-self: center;
    justify-self: end;
}

.panel-head-filters {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: nowrap;
}

.panel-head-table-toolbar {
    min-width: 0;
    width: max-content;
    margin-left: auto;
    justify-self: end;
    align-self: center;
}

.panel-head-table-toolbar:empty {
    display: none;
}

.panel-head-table-toolbar .table-toolbar {
    margin: 0;
    justify-content: flex-end;
}

.panel-head-table-toolbar .table-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: 0;
}

.panel-head-table-toolbar .table-toolbar-meta {
    display: none;
}

.panel-head.panel-head-finance-promoted-toolbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: clamp(12px, 2vw, 42px);
    padding-top: 0;
    padding-bottom: 8px;
}

.panel-head.panel-head-finance-promoted-toolbar:has(.panel-actions) {
    grid-template-columns: minmax(0, 1fr) auto max-content;
}

.panel-surface.panel-surface-tabs .panel-head.panel-head-finance-promoted-toolbar {
    padding-top: 0;
    padding-bottom: 8px;
}

.panel-head.panel-head-finance-promoted-toolbar .panel-head-main {
    min-width: 0;
    overflow: hidden;
}

.panel-head.panel-head-finance-promoted-toolbar .panel-head-main,
.panel-head.panel-head-finance-promoted-toolbar .panel-actions,
.panel-head.panel-head-finance-promoted-toolbar .panel-head-table-toolbar {
    align-self: center;
}

.panel-head-module-filters {
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

.panel-head.panel-head-finance-promoted-toolbar .panel-head-module-filters,
.panel-head.panel-head-finance-promoted-toolbar .tabs-inline,
.panel-head.panel-head-finance-promoted-toolbar .warehouse-panel-head-filters,
.panel-head.panel-head-finance-promoted-toolbar .employees-scope-tabs {
    align-items: center;
    min-height: 34px;
}

.panel-head-module-filters .filter-chip {
    min-height: 34px;
}

.panel-head.panel-head-counterparties:not(.panel-head-finance-promoted-toolbar) {
    grid-template-columns: auto max-content;
    padding-bottom: 12px;
}

.panel-head.panel-head-counterparties:not(.panel-head-finance-promoted-toolbar):has(.panel-actions) {
    grid-template-columns: auto max-content;
}

.panel-head.panel-head-counterparties.panel-head-finance-promoted-toolbar {
    padding-bottom: 12px;
}

.panel-head.panel-head-counterparties.panel-head-finance-promoted-toolbar:has(.panel-actions) {
    grid-template-columns: minmax(0, 1fr) auto max-content;
}

.panel-head.panel-head-counterparties .panel-actions {
    justify-self: start;
}

.panel-head.panel-head-counterparties .panel-head-table-toolbar {
    justify-self: end;
}

.panel-head-table-toolbar .table-toolbar-leading-action {
    min-height: 34px;
    white-space: nowrap;
}

.panel-head.panel-head-finance-promoted-toolbar .tabs-inline {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.panel-head.panel-head-finance-promoted-toolbar .warehouse-panel-head-filters {
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.panel-head.panel-head-finance-promoted-toolbar .warehouse-panel-head-filters::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.panel-head.panel-head-finance-promoted-toolbar .warehouse-panel-head-filters .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.panel-head.panel-head-investors-toolbar .tabs-inline {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 0 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

.panel-head.panel-head-investors-toolbar .tabs-inline::-webkit-scrollbar {
    height: 6px;
}

.panel-head.panel-head-investors-toolbar .tabs-inline::-webkit-scrollbar-track {
    background: transparent;
}

.panel-head.panel-head-investors-toolbar .tabs-inline::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.34);
    border-radius: 999px;
}

.panel-head.panel-head-investors-toolbar .tabs-inline .tab-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.table-card .table-filter-row {
    margin: 0 0 12px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--border);
}

.table-card .table-filter-row .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar {
    max-width: min(52vw, 760px);
    margin-left: clamp(8px, 1.6vw, 32px);
    overflow-x: auto;
    scrollbar-width: none;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-toolbar {
    min-width: max-content;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-toolbar-actions {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.panel-head-table-toolbar .table-period,
.panel-head-table-toolbar .table-period-select,
.panel-head-table-toolbar .table-tool-button,
.panel-head-table-toolbar .table-search,
.panel-head-table-toolbar .table-search input {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-tool-button,
.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-period {
    white-space: nowrap;
    align-items: center;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-period {
    padding-right: 10px;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-period-select {
    padding-right: 10px;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-period-caret svg,
.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-tool-button svg,
.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-search svg {
    width: 14px;
    height: 14px;
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .table-search {
    width: clamp(118px, 10vw, 180px);
    min-width: 118px;
    gap: 6px;
}

.panel-head-table-toolbar .table-search input::placeholder {
    font-size: 0.76rem;
    font-weight: 500;
}

.action-button,
.save-button,
.filter-chip,
.tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-button,
.filter-chip {
    position: relative;
    min-height: 34px;
    padding: 0 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: color 0.18s ease;
}

.action-button:hover,
.filter-chip:hover {
    background: transparent;
    color: var(--text-soft);
}

body[data-theme="light"] .save-button,
body[data-theme="light"] .action-button,
body[data-theme="light"] .filter-chip {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

body[data-theme="light"] .action-button:hover,
body[data-theme="light"] .filter-chip:hover {
    background: transparent;
    color: var(--text-soft);
}

.action-button.primary,
.filter-chip.accent,
.action-button.full-width {
    color: var(--accent);
    border-color: transparent;
    background: transparent;
}

.action-button.erp-green-action {
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--positive);
    gap: 7px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    transition: background 160ms ease, color 160ms ease;
}

.action-button.erp-green-action i,
.action-button.erp-green-action i svg,
.action-button.icon-positive i,
.action-button.icon-positive i svg {
    color: var(--positive);
    stroke: currentColor;
}

.action-button.erp-green-action:hover,
.action-button.erp-green-action:focus-visible {
    background: rgba(83, 213, 123, 0.16);
    color: var(--positive);
    outline: none;
}

body[data-theme="light"] .action-button.erp-green-action:hover,
body[data-theme="light"] .action-button.erp-green-action:focus-visible {
    background: rgba(16, 185, 129, 0.12);
}

.action-button.full-width {
    width: 100%;
}

.save-button {
    min-height: 34px;
    padding: 0 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.save-button:hover {
    color: var(--text);
}

.panel-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 34px;
    padding: 0 2px 8px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.panel-state span {
    color: var(--text-muted);
    margin-right: 0;
}

.panel-state strong {
    font-size: 0.8rem;
    font-weight: 800;
}

.tone-positive {
    color: var(--positive);
}

.tone-danger {
    color: var(--danger);
}

.tone-warning {
    color: var(--warning);
}

.tone-accent {
    color: var(--accent);
}

.tone-muted {
    color: var(--text-muted);
}

.tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    border: 0;
    margin-bottom: 10px;
}

.tabs-inline {
    display: inline-flex;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: visible;
    min-height: 34px;
}

.tab-button {
    position: relative;
    min-height: 34px;
    padding: 0 2px 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.tab-button:hover {
    background: transparent;
    color: var(--text-soft);
}

body[data-theme="light"] .tab-button:hover {
    background: transparent;
}

.tab-button.active {
    color: var(--text);
    font-weight: 800;
}

.tab-button.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

body[data-theme="light"] .tab-button.active {
    color: #0c1220;
}

body[data-theme="light"] .tab-button.active::after {
    background: #0c1220;
}

.flash-banner {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(83, 213, 123, 0.18);
    background: rgba(83, 213, 123, 0.1);
    color: var(--positive);
    font-size: 0.85rem;
    font-weight: 700;
}

body:has(.hr-schedule-board) .flash-banner,
body:has(.hr-broadcasts-shell) .flash-banner {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 2400;
    width: min(360px, calc(100vw - 32px));
    margin: 0;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
    animation: hrToastFade 3.6s ease forwards;
}

.employee-modal-flash {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 2600;
    width: min(360px, calc(100vw - 32px));
    margin: 0;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
    animation: hrToastFade 3.6s ease forwards;
}

.bal-overlay-toast {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 2600;
    width: min(360px, calc(100vw - 32px));
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(83, 213, 123, 0.18);
    background: color-mix(in srgb, var(--surface-elevated) 92%, rgba(83, 213, 123, 0.12));
    color: var(--positive);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    font-weight: 700;
    pointer-events: none;
    animation: hrToastFade 3.6s ease forwards;
}

.bal-overlay-toast.error {
    border-color: rgba(255, 116, 116, 0.2);
    background: color-mix(in srgb, var(--surface-elevated) 90%, rgba(255, 116, 116, 0.14));
    color: var(--danger);
}

.bal-overlay-toast.warning {
    border-color: rgba(255, 193, 87, 0.24);
    background: color-mix(in srgb, var(--surface-elevated) 90%, rgba(255, 193, 87, 0.14));
    color: var(--warning);
}

@keyframes hrToastFade {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    10%, 78% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
    }
}

.flash-banner.error {
    border-color: rgba(255, 116, 116, 0.18);
    background: rgba(255, 116, 116, 0.1);
    color: var(--danger);
}

.flash-banner.warning {
    border-color: rgba(241, 193, 96, 0.18);
    background: rgba(241, 193, 96, 0.12);
    color: var(--warning);
}

.filter-row {
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin: 2px 0 16px;
}

.filter-chip {
    color: var(--text-faint);
}

.filter-chip,
.table-tool-button,
.table-search {
    line-height: 1;
}

.filter-chip.cash-scope {
    min-height: 34px;
    padding: 0 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.filter-chip.cash-scope:hover {
    background: transparent;
    color: var(--text-soft);
}

body[data-theme="light"] .filter-chip.cash-scope {
    border-color: transparent;
    background: transparent;
}

body[data-theme="light"] .filter-chip.cash-scope:hover {
    background: transparent;
    color: var(--text-soft);
}

.filter-chip.active {
    color: var(--text);
    background: transparent;
    font-weight: 800;
}

.filter-row:has(.item-category-tab),
.filter-row:has(.finance-income-source-tab),
.filter-row:has(.finance-expense-section-tab),
.panel-head-module-filters:has(.finance-region-tab),
.subfilter-row:has(.finance-region-tab),
.subfilter-row:has(.turnover-item-tab),
.subfilter-row:has(.turnover-family-tab),
.tertiary-filter-row:has(.turnover-variant-tab),
.subfilter-row:has(.finance-product-tab),
.tertiary-filter-row:has(.finance-product-tab),
.tertiary-filter-row:has(.finance-variant-tab),
.quaternary-filter-row:has(.finance-variant-tab),
.quinary-filter-row:has(.finance-region-tab),
.subfilter-row:has(.finance-founder-tab),
.filter-row:has(.order-region-tab),
.subfilter-row:has(.order-region-tab),
.tertiary-filter-row:has(.order-product-tab),
.quaternary-filter-row:has(.order-variant-tab),
.filter-row:has(.warehouse-material-scope-tab),
.subfilter-row:has(.warehouse-material-group-tab),
.subfilter-row:has(.warehouse-product-tab),
.tertiary-filter-row:has(.warehouse-product-tab),
.quaternary-filter-row:has(.warehouse-variant-tab) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.42) transparent;
}

.filter-row:has(.hr-filter-chip),
.subfilter-row:has(.hr-filter-chip),
.subfilter-row:has(.hr-employee-section-chip) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.42) transparent;
}

.filter-row:has(.hr-filter-chip) .filter-chip,
.subfilter-row:has(.hr-filter-chip) .filter-chip,
.subfilter-row:has(.hr-employee-section-chip) .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.subfilter-row:has(.finance-product-tab)::-webkit-scrollbar,
.filter-row:has(.finance-expense-section-tab)::-webkit-scrollbar,
.panel-head-module-filters:has(.finance-region-tab)::-webkit-scrollbar,
.subfilter-row:has(.finance-region-tab)::-webkit-scrollbar,
.tertiary-filter-row:has(.finance-product-tab)::-webkit-scrollbar,
.tertiary-filter-row:has(.finance-variant-tab)::-webkit-scrollbar,
.quaternary-filter-row:has(.finance-variant-tab)::-webkit-scrollbar,
.quinary-filter-row:has(.finance-region-tab)::-webkit-scrollbar,
.subfilter-row:has(.finance-founder-tab)::-webkit-scrollbar,
.filter-row:has(.order-region-tab)::-webkit-scrollbar,
.subfilter-row:has(.order-region-tab)::-webkit-scrollbar,
.tertiary-filter-row:has(.order-product-tab)::-webkit-scrollbar,
.quaternary-filter-row:has(.order-variant-tab)::-webkit-scrollbar,
.filter-row:has(.warehouse-material-scope-tab)::-webkit-scrollbar,
.subfilter-row:has(.warehouse-material-group-tab)::-webkit-scrollbar,
.subfilter-row:has(.warehouse-product-tab)::-webkit-scrollbar,
.tertiary-filter-row:has(.warehouse-product-tab)::-webkit-scrollbar,
.quaternary-filter-row:has(.warehouse-variant-tab)::-webkit-scrollbar {
    height: 3px;
}

.subfilter-row:has(.finance-product-tab)::-webkit-scrollbar-track,
.panel-head-module-filters:has(.finance-region-tab)::-webkit-scrollbar-track,
.subfilter-row:has(.finance-region-tab)::-webkit-scrollbar-track,
.tertiary-filter-row:has(.finance-product-tab)::-webkit-scrollbar-track,
.tertiary-filter-row:has(.finance-variant-tab)::-webkit-scrollbar-track,
.quaternary-filter-row:has(.finance-variant-tab)::-webkit-scrollbar-track,
.quinary-filter-row:has(.finance-region-tab)::-webkit-scrollbar-track,
.subfilter-row:has(.finance-founder-tab)::-webkit-scrollbar-track,
.filter-row:has(.order-region-tab)::-webkit-scrollbar-track,
.subfilter-row:has(.order-region-tab)::-webkit-scrollbar-track,
.tertiary-filter-row:has(.order-product-tab)::-webkit-scrollbar-track,
.quaternary-filter-row:has(.order-variant-tab)::-webkit-scrollbar-track,
.filter-row:has(.warehouse-material-scope-tab)::-webkit-scrollbar-track,
.subfilter-row:has(.warehouse-material-group-tab)::-webkit-scrollbar-track,
.subfilter-row:has(.warehouse-product-tab)::-webkit-scrollbar-track,
.tertiary-filter-row:has(.warehouse-product-tab)::-webkit-scrollbar-track,
.quaternary-filter-row:has(.warehouse-variant-tab)::-webkit-scrollbar-track {
    background: transparent;
}

.subfilter-row:has(.finance-product-tab)::-webkit-scrollbar-thumb,
.panel-head-module-filters:has(.finance-region-tab)::-webkit-scrollbar-thumb,
.subfilter-row:has(.finance-region-tab)::-webkit-scrollbar-thumb,
.tertiary-filter-row:has(.finance-product-tab)::-webkit-scrollbar-thumb,
.tertiary-filter-row:has(.finance-variant-tab)::-webkit-scrollbar-thumb,
.quaternary-filter-row:has(.finance-variant-tab)::-webkit-scrollbar-thumb,
.quinary-filter-row:has(.finance-region-tab)::-webkit-scrollbar-thumb,
.subfilter-row:has(.finance-founder-tab)::-webkit-scrollbar-thumb,
.filter-row:has(.order-region-tab)::-webkit-scrollbar-thumb,
.subfilter-row:has(.order-region-tab)::-webkit-scrollbar-thumb,
.tertiary-filter-row:has(.order-product-tab)::-webkit-scrollbar-thumb,
.quaternary-filter-row:has(.order-variant-tab)::-webkit-scrollbar-thumb,
.filter-row:has(.warehouse-material-scope-tab)::-webkit-scrollbar-thumb,
.subfilter-row:has(.warehouse-material-group-tab)::-webkit-scrollbar-thumb,
.subfilter-row:has(.warehouse-product-tab)::-webkit-scrollbar-thumb,
.tertiary-filter-row:has(.warehouse-product-tab)::-webkit-scrollbar-thumb,
.quaternary-filter-row:has(.warehouse-variant-tab)::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.42);
    border-radius: 999px;
}

.item-category-tab,
.turnover-item-tab,
.turnover-family-tab,
.turnover-variant-tab,
.finance-product-tab,
.finance-variant-tab,
.finance-founder-tab,
.order-region-tab,
.order-product-tab,
.order-variant-tab,
.warehouse-material-scope-tab,
.warehouse-material-group-tab,
.warehouse-product-tab,
.warehouse-variant-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.filter-chip.cash-scope.active {
    background: transparent;
}

.table-card:has(.finance-journal-table) .table-scroll {
    min-height: clamp(360px, 48vh, 560px);
    scrollbar-gutter: stable;
}

body[data-theme="light"] .filter-chip.active {
    background: transparent;
}

body[data-theme="light"] .filter-chip.cash-scope.active {
    background: transparent;
}

.filter-row .filter-chip.active::after,
.subfilter-row .filter-chip.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

body[data-theme="light"] .filter-row .filter-chip.active::after,
body[data-theme="light"] .subfilter-row .filter-chip.active::after {
    background: #0c1220;
}

.module-filter-stack {
    display: contents;
}

.module-filter-stack.production-navigation-stack {
    display: block;
    width: 100%;
}

.production-primary-head {
    padding: 0 2px 8px;
}

.production-primary-head .production-scope-top {
    width: 100%;
    min-height: 34px;
    margin: 0;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.production-primary-head .production-scope-top::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.production-primary-head .production-scope-top .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.production-navigation-stack > .filter-row {
    margin-top: 0;
}

.panel-surface:has(> .panel-head.panel-head-clients-toolbar) {
    --clients-tab-row-height: 34px;
    --clients-tab-stack-gap: 10px;
}

.panel-head.panel-head-clients-toolbar {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0 clamp(12px, 2vw, 34px);
}

.panel-head.panel-head-clients-toolbar .panel-head-main,
.panel-head.panel-head-clients-toolbar .panel-head-table-toolbar {
    align-self: center;
}

.panel-head.panel-head-clients-toolbar .panel-head-main,
.panel-head.panel-head-clients-toolbar .panel-head-module-filters,
.panel-head.panel-head-clients-toolbar .clients-panel-toolbar {
    min-height: var(--clients-tab-row-height);
}

.panel-head.panel-head-clients-toolbar .panel-head-module-filters {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.panel-head.panel-head-clients-toolbar .panel-head-module-filters::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.panel-head.panel-head-clients-toolbar .panel-head-module-filters .filter-chip,
.clients-tab-stack .filter-chip {
    min-height: var(--clients-tab-row-height);
    box-sizing: border-box;
    white-space: nowrap;
}

.panel-head.panel-head-clients-toolbar .clients-panel-toolbar {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

.panel-head.panel-head-clients-toolbar .clients-panel-toolbar .table-toolbar-actions {
    align-items: center;
    flex-wrap: nowrap;
}

.panel-head.panel-head-nomenclature-toolbar .finance-panel-toolbar {
    max-width: min(50vw, 720px);
}

.settings-nomenclature-tab-stack > .quinary-filter-row {
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--clients-tab-row-height);
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0;
    scrollbar-width: none;
}

.settings-nomenclature-tab-stack > .quinary-filter-row::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.settings-nomenclature-tab-stack > .quinary-filter-row .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.clients-tab-stack {
    display: flex;
    flex-direction: column;
    gap: var(--clients-tab-stack-gap);
    margin: 0;
}

.clients-tab-stack:has(> .module-filter-row-before-summary) {
    margin-top: 0;
}

.clients-tab-stack > .module-filter-row-before-summary {
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--clients-tab-row-height);
    margin: 0;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.clients-tab-stack > .module-filter-row-before-summary + .module-filter-row-before-summary {
    margin-top: 0;
}

.clients-tab-stack > .module-filter-row-before-summary::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.clients-tab-stack:has(> .module-filter-row-before-summary) + .stats-grid {
    margin-top: var(--clients-tab-stack-gap);
}

.filter-chip.select i {
    transform: rotate(90deg);
    color: var(--text-muted);
}

.filter-dropdown {
    position: relative;
}

.filter-dropdown summary {
    list-style: none;
    cursor: pointer;
}

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

.filter-dropdown[open] .filter-chip.select i {
    transform: rotate(180deg);
}

.panel-head-filters .filter-dropdown {
    flex: 0 0 auto;
}

.panel-head-filters .filter-chip {
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 700;
    gap: 6px;
    justify-content: flex-start;
}

.panel-head-filters .filter-chip:hover,
.panel-head-filters .filter-chip.active,
body[data-theme="light"] .panel-head-filters .filter-chip,
body[data-theme="light"] .panel-head-filters .filter-chip:hover,
body[data-theme="light"] .panel-head-filters .filter-chip.active {
    background: transparent;
    border-color: transparent;
    color: var(--text);
}

.panel-head-filters .filter-chip.period-select {
    width: 100%;
}

.panel-head-filters .filter-chip.period-year {
    min-width: 70px;
    font-variant-numeric: tabular-nums;
}

.panel-head-filters .filter-chip.period-month {
    min-width: 112px;
}

.panel-head-filters .filter-chip span {
    white-space: nowrap;
}

.panel-head-filters .filter-chip .chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.panel-head-filters .filter-chip.select i,
.panel-head-filters .filter-dropdown[open] .filter-chip.select i {
    transform: rotate(90deg);
    color: var(--text-faint);
    margin-left: 2px;
}

.panel-head-filters .filter-chip.period-report {
    min-width: auto;
    color: #ffffff;
    gap: 6px;
}

.panel-head-filters .filter-chip.period-report:hover,
body[data-theme="light"] .panel-head-filters .filter-chip.period-report:hover {
    color: #ffffff;
}

.panel-head-filters .filter-chip.period-report .chip-icon svg {
    width: 16px;
    height: 16px;
}

body[data-theme="light"] .panel-head-filters .filter-chip.period-report,
body[data-theme="light"] .panel-head-filters .filter-chip.period-report:hover {
    color: var(--text);
}

.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 168px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 18, 0.96);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}

body[data-theme="light"] .filter-dropdown-menu {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.12);
}

.filter-option {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.filter-option:hover,
.filter-option.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

body[data-theme="light"] .filter-option:hover,
body[data-theme="light"] .filter-option.active {
    background: rgba(15, 23, 42, 0.06);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

[data-kpi-panel][hidden] {
    display: none !important;
}

.stat-card,
.content-card,
.login-card,
.showcase-card {
    background: linear-gradient(180deg, var(--content-bg-2) 0%, var(--content-bg) 100%);
    border: 1px solid var(--content-line);
    border-radius: var(--radius-lg);
}

.stat-card {
    padding: 16px 18px;
}

.stat-card-link {
    color: inherit;
    display: block;
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.stat-card-link:hover {
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}

.stat-card-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.stat-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-topline {
    flex: 1;
    justify-content: space-between;
    gap: 10px;
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    flex: 0 0 42px;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
}

body[data-theme="light"] .stat-icon {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.06);
}

.stat-topline span {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stat-topline em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-card strong {
    display: block;
    margin-top: 10px;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.stat-card.metric-investor-dual {
    min-height: 156px;
}

.stat-card.metric-investor-dual strong {
    letter-spacing: 0;
}

.investor-kpi-dual {
    display: grid;
    gap: 5px;
    line-height: 1.08;
    min-height: 54px;
    white-space: nowrap;
}

.investor-kpi-usd {
    display: block;
    color: var(--text);
    font-size: 1.82rem;
    font-weight: 850;
    letter-spacing: 0;
    white-space: nowrap;
}

.investor-kpi-uzs {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: 0;
    opacity: 0.68;
    white-space: nowrap;
}

.stat-card p {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.stat-card.metric-stable {
    min-height: 148px;
}

.stat-card.metric-stable p {
    min-height: calc(0.8rem * 1.55 * 2);
}

.metric-positive {
    box-shadow: inset 0 0 0 1px rgba(83, 213, 123, 0.08);
}

.metric-warning {
    box-shadow: inset 0 0 0 1px rgba(241, 193, 96, 0.08);
}

.metric-danger {
    box-shadow: inset 0 0 0 1px rgba(255, 106, 106, 0.08);
}

.metric-accent {
    box-shadow: inset 0 0 0 1px rgba(31, 185, 255, 0.08);
}

.liquid-kpi-grid {
    perspective: 1200px;
}

.liquid-kpi-card {
    --liquid-tint: rgba(31, 185, 255, 0.08);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(circle at 84% 88%, var(--liquid-tint) 0%, transparent 32%),
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 18%, rgba(255, 255, 255, 0.09) 56%, rgba(255, 255, 255, 0.14) 100%),
        linear-gradient(145deg, rgba(75, 91, 118, 0.3) 0%, rgba(25, 31, 43, 0.28) 34%, rgba(12, 15, 22, 0.26) 62%, rgba(99, 116, 146, 0.18) 100%);
    backdrop-filter: blur(34px) saturate(205%) contrast(1.06) brightness(1.03);
    -webkit-backdrop-filter: blur(34px) saturate(205%) contrast(1.06) brightness(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 22px 20px 34px rgba(255, 255, 255, 0.03),
        inset -18px -24px 36px rgba(7, 10, 16, 0.22),
        0 24px 42px rgba(0, 0, 0, 0.26);
    isolation: isolate;
}

.liquid-kpi-card::before,
.liquid-kpi-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.liquid-kpi-card::before {
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0) 64%),
        radial-gradient(circle at 88% 18%, rgba(164, 202, 255, 0.14) 0%, transparent 20%);
    opacity: 0.96;
}

.liquid-kpi-card::after {
    inset: auto 8% 10% 8%;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 18%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.26) 82%, transparent 100%);
    opacity: 0.9;
    filter: blur(0.2px);
}

.liquid-kpi-card > :not(.liquid-kpi-layer) {
    position: relative;
    z-index: 2;
}

.liquid-kpi-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.liquid-kpi-card .stat-topline span,
.liquid-kpi-card p {
    color: rgba(236, 242, 250, 0.8);
}

.liquid-kpi-card strong {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 1px 16px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(7, 10, 16, 0.16);
}

.liquid-kpi-rim {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.18),
        inset 0 -14px 22px rgba(255, 255, 255, 0.02),
        inset 14px 14px 24px rgba(255, 255, 255, 0.03),
        inset -22px -20px 30px rgba(6, 9, 14, 0.18);
    opacity: 0.95;
}

.liquid-kpi-sheen {
    inset: 1px 1px 42% 1px;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 24%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.04) 76%, transparent 100%);
    filter: blur(1px);
    opacity: 0.9;
    mix-blend-mode: screen;
}

.liquid-kpi-lens {
    inset: -18% 36% 30% -12%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.24) 16%, rgba(154, 205, 255, 0.12) 30%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(-8deg);
    filter: blur(12px);
    opacity: 0.92;
    mix-blend-mode: screen;
}

.liquid-kpi-caustic {
    inset: 52% -10% -24% 22%;
    background:
        radial-gradient(ellipse at 30% 34%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(118, 172, 255, 0.05) 36%, transparent 72%),
        linear-gradient(102deg, transparent 0%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0) 66%);
    transform: rotate(6deg);
    filter: blur(15px);
    opacity: 0.68;
}

.liquid-kpi-card.metric-positive {
    --liquid-tint: rgba(83, 213, 123, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 22px 20px 34px rgba(255, 255, 255, 0.03),
        inset -18px -24px 36px rgba(7, 10, 16, 0.22),
        0 24px 42px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(83, 213, 123, 0.08);
}

.liquid-kpi-card.metric-warning {
    --liquid-tint: rgba(241, 193, 96, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 22px 20px 34px rgba(255, 255, 255, 0.03),
        inset -18px -24px 36px rgba(7, 10, 16, 0.22),
        0 24px 42px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(241, 193, 96, 0.08);
}

.liquid-kpi-card.metric-danger {
    --liquid-tint: rgba(255, 106, 106, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 22px 20px 34px rgba(255, 255, 255, 0.03),
        inset -18px -24px 36px rgba(7, 10, 16, 0.22),
        0 24px 42px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 106, 106, 0.08);
}

.liquid-kpi-card.metric-accent {
    --liquid-tint: rgba(31, 185, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 22px 20px 34px rgba(255, 255, 255, 0.03),
        inset -18px -24px 36px rgba(7, 10, 16, 0.22),
        0 24px 42px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(31, 185, 255, 0.08);
}

body[data-theme="light"] .liquid-kpi-card {
    border-color: rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.46) 38%, rgba(255, 255, 255, 0.58) 100%),
        linear-gradient(135deg, rgba(219, 228, 239, 0.72) 0%, rgba(244, 247, 251, 0.56) 52%, rgba(255, 255, 255, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -14px 24px rgba(15, 23, 42, 0.03),
        0 18px 28px rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .liquid-kpi-card .stat-topline span,
body[data-theme="light"] .liquid-kpi-card p {
    color: rgba(58, 68, 82, 0.78);
}

body[data-theme="light"] .liquid-kpi-rim,
body[data-theme="light"] .liquid-kpi-sheen,
body[data-theme="light"] .liquid-kpi-lens,
body[data-theme="light"] .liquid-kpi-caustic {
    opacity: 0.55;
}

.content-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.dashboard-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-context {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 28px;
    margin: -2px 0 12px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0;
}

.dashboard-context > span:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-left: 14px;
    vertical-align: -2px;
    background: var(--content-line);
}

.dashboard-live i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 4px rgba(83, 213, 123, 0.1);
    animation: dashboardLivePulse 2.4s ease-in-out infinite;
}

@keyframes dashboardLivePulse {
    0%, 100% { opacity: 0.68; box-shadow: 0 0 0 3px rgba(83, 213, 123, 0.08); }
    50% { opacity: 1; box-shadow: 0 0 0 6px rgba(83, 213, 123, 0.02); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-live i { animation: none; }
}

.dashboard-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
}

.dashboard-kpi {
    min-width: 0;
    min-height: 138px;
    padding: 17px 20px 16px;
    color: inherit;
    text-decoration: none;
    border-right: 1px solid var(--content-line);
    background: transparent;
    box-shadow: none;
    transition: background 150ms ease, color 150ms ease;
}

.dashboard-kpi:last-child {
    border-right: 0;
}

.dashboard-kpi:hover,
.dashboard-kpi:focus-visible {
    color: inherit;
    background: rgba(107, 220, 255, 0.045);
    outline: none;
}

body[data-theme="light"] .dashboard-kpi:hover,
body[data-theme="light"] .dashboard-kpi:focus-visible {
    background: rgba(12, 85, 145, 0.035);
}

.dashboard-kpi-head,
.dashboard-kpi-value {
    display: flex;
    align-items: center;
}

.dashboard-kpi-head {
    justify-content: space-between;
    gap: 12px;
}

.dashboard-kpi-head span {
    min-width: 0;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-kpi-head em {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 720;
    letter-spacing: 0;
}

.dashboard-kpi-value {
    gap: 9px;
    margin-top: 14px;
}

.dashboard-kpi-value i {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
}

.dashboard-kpi-value i svg {
    width: 18px;
    height: 18px;
}

.dashboard-kpi-value strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.56rem;
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: 0;
}

.dashboard-kpi p {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.48;
}

.dashboard-empty-state {
    min-height: 236px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
}

.dashboard-empty-state.compact {
    min-height: 72px;
    justify-content: flex-start;
    text-align: left;
    border-top: 0;
}

.table-empty-cell {
    height: 88px;
    color: var(--text-muted);
    text-align: center;
}

.dashboard-analytics {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 22px 30px;
    align-items: start;
    margin-bottom: 18px;
}

.dashboard-stage {
    min-width: 0;
}

.dashboard-chart-stage,
.dashboard-side-stage,
.dashboard-focus-stage {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.dashboard-chart-stage {
    padding-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-side-stack {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.dashboard-focus-stage {
    grid-column: 1 / -1;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-stage-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.dashboard-stage-head-chart {
    margin-bottom: 14px;
}

.dashboard-stage-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.dashboard-stage-kicker {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-stage-head h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0;
}

.dashboard-stage-head p {
    margin: 0;
    max-width: 320px;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

.content-card {
    padding: 16px;
}

.content-card.wide {
    grid-column: 1 / -1;
    grid-row: span 1;
}

.employees-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.22fr);
    align-items: start;
}

.employees-side,
.employees-filters,
.employee-form,
.employee-profile-grid,
.permissions-panel,
.permissions-panel-head,
.employees-list,
.employee-list-row {
    display: flex;
}

.employees-side,
.employees-filters,
.employee-form,
.permissions-panel,
.permissions-panel-head,
.employees-list,
.employee-list-row {
    flex-direction: column;
}

.employees-directory,
.employees-form-card {
    padding: 18px 20px;
}

.employees-side {
    gap: 14px;
}

.employees-filters {
    gap: 14px;
    margin-bottom: 16px;
}

.employees-search {
    min-width: 100%;
}

.employees-filter-grid,
.employee-form-grid,
.employee-profile-grid,
.permissions-grid {
    display: grid;
    gap: 18px 24px;
}

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

.employees-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-secondary-link {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.employee-secondary-link:hover {
    color: var(--text);
}

.employees-list {
    gap: 10px;
}

.employee-list-row {
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-theme="light"] .employee-list-row {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.employee-list-row:hover,
.employee-list-row.selected {
    transform: translateY(-1px);
    border-color: rgba(107, 220, 255, 0.22);
    background: rgba(107, 220, 255, 0.06);
}

body[data-theme="light"] .employee-list-row:hover,
body[data-theme="light"] .employee-list-row.selected {
    border-color: rgba(12, 85, 145, 0.18);
    background: rgba(12, 85, 145, 0.05);
}

.employee-list-head,
.employee-list-meta,
.employee-list-badges,
.employee-list-foot,
.employee-toggle-row,
.employee-badge-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.employee-list-head {
    justify-content: space-between;
}

.employee-list-head strong {
    display: block;
    color: var(--text);
}

.employee-list-head span,
.employee-list-meta span,
.employee-list-foot span,
.employee-form-note {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.employee-list-meta span::after {
    content: "•";
    margin-left: 8px;
    color: var(--text-faint);
}

.employee-list-meta span:last-child::after {
    display: none;
}

.employee-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    justify-self: start;
}

.employee-field[hidden] {
    display: none !important;
}

.employee-field-full {
    grid-column: 1 / -1;
}

.employee-modal-form .employee-form-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: end;
    gap: 26px 30px;
}

.employee-field-wide {
    max-width: 460px;
}

.employee-field-medium {
    max-width: 340px;
}

.employee-field-compact {
    max-width: 190px;
}

.employee-field-phone {
    max-width: 250px;
}

.employee-modal-form .employee-field-wide,
.employee-modal-form .employee-field-medium,
.employee-modal-form .employee-field-compact,
.employee-modal-form .employee-field-phone {
    max-width: 100%;
}

.employee-warehouse-grid {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
}

.employee-warehouse-grid[hidden] {
    display: none !important;
}

.employee-warehouse-grid .employee-field {
    min-width: 0;
}

.employee-field span {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.employee-field-note {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.employee-field-error {
    color: #ff7c8b;
    font-size: 0.78rem;
    line-height: 1.35;
}

.employee-field-note strong {
    color: var(--text);
    font-weight: 700;
}

.employee-input,
.employee-select {
    min-height: 42px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: var(--text);
    padding: 0 0 10px;
    font: inherit;
    outline: none;
    box-shadow: none;
}

.employee-input::placeholder {
    color: var(--text-muted);
}

.employee-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(244, 247, 255, 0.78) 50%),
        linear-gradient(135deg, rgba(244, 247, 255, 0.78) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) calc(50% - 3px),
        calc(100% - 9px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color-scheme: dark;
}

body[data-theme="light"] .employee-input,
body[data-theme="light"] .employee-select {
    border-bottom-color: rgba(15, 23, 42, 0.18);
}

body[data-theme="light"] .employee-select {
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.72) 50%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.72) 50%, transparent 50%);
    color-scheme: light;
}

.employee-input:focus,
.employee-select:focus {
    border-bottom-color: rgba(107, 220, 255, 0.86);
    box-shadow: none;
}

.employee-field.is-invalid .employee-input,
.employee-field.is-invalid .employee-select {
    border-bottom-color: rgba(255, 124, 139, 0.88);
}

.employee-select option {
    background: #11151c;
    color: rgba(244, 247, 255, 0.96);
}

body[data-theme="light"] .employee-select option {
    background: #ffffff;
    color: #0f172a;
}

.employee-warehouse-country-field[hidden] {
    display: none;
}

.client-module-form .employee-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 28px 34px;
}

.client-module-form .employee-field,
.client-module-form .employee-field-full {
    max-width: 100%;
}

.warehouse-transfer-form .employee-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 30px;
}

.warehouse-transfer-source-note {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.warehouse-transfer-source-note strong {
    color: var(--text);
    font-weight: 700;
}

.warehouse-transfer-source-note span {
    color: var(--text-faint);
    margin-left: 10px;
}

.module-form-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

body[data-theme="light"] .module-form-tabs {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.025);
}

.module-form-tab {
    appearance: none;
    flex: 1 1 0;
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.module-form-tab.is-active {
    color: var(--text);
    background: rgba(107, 220, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(107, 220, 255, 0.2);
}

body[data-theme="light"] .module-form-tab.is-active {
    background: rgba(12, 85, 145, 0.08);
    box-shadow: inset 0 0 0 1px rgba(12, 85, 145, 0.14);
}

.module-form-panel[hidden] {
    display: none !important;
}

.supplier-module-form .module-form-tabs {
    gap: 20px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.supplier-module-form .module-form-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 2px 8px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 0.88rem;
    background: transparent;
    box-shadow: none;
}

.supplier-module-form .module-form-tab.is-active,
body[data-theme="light"] .supplier-module-form .module-form-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
    box-shadow: none;
}

.client-photo-form-block {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.supplier-offers-form-block {
    margin-top: 0;
}

.supplier-offers-form-block .client-photo-form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.supplier-offers-form-block .client-photo-form-head p {
    max-width: 520px;
    margin: 0;
    color: var(--text-faint);
    font-size: 0.82rem;
    line-height: 1.45;
}

.supplier-offers-editor-list {
    display: grid;
    gap: 12px;
}

.supplier-offer-editor-row {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--content-line);
    border-radius: 16px;
    background: transparent;
}

.supplier-offer-editor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.supplier-offer-editor-actions {
    justify-content: flex-end;
    padding-top: 0;
}

.supplier-offer-editor-badge,
.supplier-offers-empty {
    color: var(--text-faint);
    font-size: 0.82rem;
}

.supplier-offers-empty {
    padding: 18px;
    border: 1px dashed var(--content-line);
    border-radius: 16px;
}

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

.client-geo-form-block {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.client-photo-form-head h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.client-photo-form-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.client-photo-upload-button,
.client-photo-preview-button {
    width: 138px;
    aspect-ratio: 1 / 1;
    border-radius: 26px;
}

.client-photo-upload-button {
    position: relative;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.client-photo-upload-button::before {
    content: "+";
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

.client-photo-upload-button:hover {
    transform: translateY(-1px);
    border-color: rgba(107, 220, 255, 0.28);
    background: rgba(107, 220, 255, 0.05);
    color: var(--text);
}

.client-photo-upload-button.is-filled {
    border-color: rgba(107, 220, 255, 0.28);
    background: rgba(107, 220, 255, 0.07);
    color: var(--text);
}

.client-photo-upload-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.client-photo-upload-button span {
    max-width: 88px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
}

.client-photo-preview-shell {
    display: grid;
    gap: 10px;
}

.client-photo-preview-shell[hidden] {
    display: none;
}

.client-photo-preview-button {
    padding: 0;
    border: 0;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        rgba(255, 255, 255, 0.02);
    background-position: 0 0, 9px 9px, 0 0;
    background-size: 18px 18px, 18px 18px, auto;
    cursor: pointer;
}

.client-photo-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.client-photo-remove-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.client-photo-remove-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.client-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 228px));
    justify-content: flex-start;
    align-items: start;
    gap: 18px 24px;
}

.client-tile {
    display: grid;
    width: 228px;
    gap: 12px;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    transition: border-color 0.18s ease, opacity 0.18s ease;
    box-sizing: border-box;
}

.client-tile:hover {
    border-left-color: rgba(107, 220, 255, 0.28);
    opacity: 0.98;
}

.client-tile-media,
.client-tile-image,
.client-tile-fallback {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
}

.client-tile-media {
    display: block;
    overflow: hidden;
}

.client-tile-image {
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.client-tile-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(69, 192, 255, 0.16), rgba(31, 98, 163, 0.24));
    color: var(--text);
    font-size: 1.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.client-tile-copy {
    display: grid;
    gap: 8px;
    align-content: start;
}

.client-tile-name {
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.client-tile-location {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.client-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
}

.client-detail-summary {
    display: grid;
    gap: 18px;
    margin-bottom: 2px;
}

.item-catalog-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 228px));
    justify-content: flex-start;
    align-items: start;
    gap: 18px 24px;
}

.item-catalog-tile {
    display: grid;
    width: 228px;
    gap: 12px;
    padding: 0 0 0 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.18s ease, opacity 0.18s ease;
    box-sizing: border-box;
}

.item-catalog-tile:hover {
    border-left-color: rgba(107, 220, 255, 0.28);
    opacity: 0.98;
}

.item-catalog-tile-media-shell {
    display: grid;
    gap: 10px;
}

.item-catalog-tile-media,
.item-catalog-tile-image,
.item-catalog-tile-fallback {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
}

.item-catalog-tile-media {
    display: block;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.item-catalog-tile-media.is-multi {
    cursor: grab;
}

.item-catalog-tile-media-shell.is-dragging .item-catalog-tile-media.is-multi {
    cursor: grabbing;
}

.item-catalog-tile-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.28s ease;
    will-change: transform;
}

.item-catalog-tile-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.item-catalog-tile-image {
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    -webkit-user-drag: none;
}

.item-catalog-tile-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 8px;
    padding: 0 4px;
}

.item-catalog-tile-dot {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: width 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}

.item-catalog-tile-dot:hover,
.item-catalog-tile-dot:focus-visible {
    background: rgba(107, 220, 255, 0.46);
    outline: none;
}

.item-catalog-tile-dot.is-active {
    width: 18px;
    background: rgba(107, 220, 255, 0.8);
}

.item-catalog-tile-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(107, 220, 255, 0.16), rgba(31, 98, 163, 0.24));
    color: var(--text);
    font-size: 1.38rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.item-catalog-tile-copy {
    display: grid;
    gap: 8px;
}

.item-catalog-tile-name {
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.item-catalog-tile-category {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.item-catalog-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
}

.item-detail-shell {
    display: grid;
    gap: 18px;
}

.item-detail-hero {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 18px 22px;
    align-items: start;
}

.item-detail-media-column {
    display: grid;
    gap: 12px;
}

.item-detail-main-media,
.item-detail-main-image,
.item-detail-main-fallback {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
}

.item-detail-main-media {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.item-detail-main-image {
    display: block;
    object-fit: cover;
}

.item-detail-main-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(107, 220, 255, 0.16), rgba(31, 98, 163, 0.24));
    color: var(--text);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.item-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 84px));
    gap: 10px;
}

.item-detail-gallery-image {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.item-detail-copy {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.item-detail-copy-head {
    display: grid;
    gap: 10px;
}

.item-detail-name {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.item-detail-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--text-soft);
}

.item-detail-description {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.65;
}

.item-detail-video-link {
    color: var(--accent);
    font-weight: 700;
    width: fit-content;
}

.item-detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.item-detail-fact {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.item-detail-fact span {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.item-detail-fact strong {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.45;
}

.item-detail-balances {
    display: grid;
    gap: 14px;
}

.item-detail-table-heading {
    display: grid;
    gap: 4px;
    padding-top: 2px;
}

.item-detail-table-heading h4 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.item-detail-table-heading p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.item-gallery-form-row,
.item-video-form-row {
    align-items: flex-start;
}

.item-gallery-preview-column,
.item-video-current {
    min-width: 0;
    flex: 1 1 420px;
    display: grid;
    gap: 12px;
}

.item-gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 12px;
}

.item-gallery-preview-grid[hidden] {
    display: none;
}

.item-gallery-preview-card,
.item-gallery-preview-button,
.item-gallery-preview-pending {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        rgba(255, 255, 255, 0.03);
    background-position: 0 0, 9px 9px, 0 0;
    background-size: 18px 18px, 18px 18px, auto;
    padding: 8px;
    display: grid;
    gap: 8px;
}

.item-gallery-preview-card {
    position: relative;
    cursor: grab;
    transition: border-color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.item-gallery-preview-card.is-dragging {
    opacity: 0.58;
    cursor: grabbing;
}

.item-gallery-preview-card.is-drop-target {
    border-color: rgba(95, 255, 122, 0.46);
    transform: translateY(-2px);
}

.item-gallery-preview-card .item-gallery-preview-button {
    border: 0;
    border-radius: 14px;
    background: transparent;
    background-image: none;
    background-position: initial;
    background-size: initial;
    padding: 0;
    display: block;
    gap: 0;
}

.item-gallery-preview-button {
    cursor: pointer;
}

.item-gallery-preview-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.item-gallery-preview-caption {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-soft);
    word-break: break-word;
}

.item-gallery-remove-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(8, 18, 14, 0.82);
    color: #7dff8d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.item-gallery-remove-button:hover,
.item-gallery-remove-button:focus-visible {
    background: rgba(95, 255, 122, 0.18);
    border-color: rgba(95, 255, 122, 0.42);
    outline: none;
}

.item-gallery-drag-handle {
    position: absolute;
    left: 10px;
    top: 10px;
    min-width: 30px;
    height: 24px;
    border-radius: 999px;
    background: rgba(8, 18, 14, 0.72);
    color: rgba(255, 255, 255, 0.68);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 1px;
    pointer-events: none;
}

.item-video-current-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(95, 255, 122, 0.22);
    color: var(--text);
    text-decoration: none;
    background: rgba(95, 255, 122, 0.08);
    width: fit-content;
}

.item-video-current-link[hidden] {
    display: none;
}

.item-video-note {
    margin: 0;
}

@media (max-width: 980px) {
    .item-detail-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .item-catalog-tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
        gap: 16px;
    }

    .item-catalog-tile {
        width: 100%;
    }

    .item-detail-gallery {
        grid-template-columns: repeat(auto-fill, minmax(72px, 72px));
    }

    .item-detail-gallery-image {
        width: 72px;
        height: 72px;
    }

    .item-gallery-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.client-location-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 18px 22px;
    align-items: start;
}

.client-location-main {
    min-width: 0;
}

.client-location-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.client-location-map-panel {
    display: grid;
    gap: 0;
    align-content: start;
    position: relative;
    width: min(100%, 380px);
    min-width: 0;
    justify-self: end;
    align-self: start;
}

.client-location-map-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 3;
    pointer-events: none;
}

.client-location-map-head .action-button {
    pointer-events: auto;
    background: rgba(11, 16, 25, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.client-location-map-panel > .hr-location-display-map,
.client-location-preview-map {
    width: 100%;
    min-height: 320px;
    aspect-ratio: 1 / 1;
    justify-self: start;
}

.client-registry-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) auto auto;
    gap: 16px 18px;
    align-items: end;
    margin-bottom: 18px;
}

.client-registry-search,
.client-registry-selects label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.client-registry-search span,
.client-registry-selects label span,
.client-fact span {
    color: var(--text-faint);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.client-registry-search input,
.client-registry-selects .employee-select {
    min-height: 42px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: var(--text);
    padding: 0 0 10px;
    font: inherit;
    outline: none;
    box-shadow: none;
}

.client-registry-search input::placeholder {
    color: var(--text-muted);
}

.client-registry-search input:focus,
.client-registry-selects .employee-select:focus {
    border-bottom-color: rgba(107, 220, 255, 0.86);
}

.client-registry-selects {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 220px));
    gap: 14px;
}

.client-registry-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.client-registry-toolbar-actions .action-button {
    min-width: 112px;
}

.client-detail-summary-text {
    margin: 0;
    max-width: 760px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.client-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 220px));
    gap: 14px 20px;
}

.client-fact {
    display: grid;
    gap: 8px;
    width: min(100%, 220px);
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.client-fact strong {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
}

.client-overview-matrix {
    display: grid;
    gap: 10px;
}

.client-overview-about-panel {
    margin-top: 0;
}

.client-overview-tab-panel {
    display: grid;
    gap: 14px;
    margin-top: 0;
    min-width: 0;
}

.client-overview-tab-panel > .card-head {
    border-bottom: 1px solid var(--content-line);
    padding-bottom: 10px;
}

.client-overview-tab-panel > .card-head h4 {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0;
}

.client-overview-tab-panel > .card-head p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 4px 0 0;
}

.client-overview-tab-panel .client-representatives {
    margin-top: 0;
}

.card-head-actions.client-detail-action-row {
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
}

body[data-theme="light"] .client-registry-search input,
body[data-theme="light"] .client-registry-selects .employee-select,
body[data-theme="light"] .client-fact {
    border-bottom-color: rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .client-photo-upload-button {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.02);
}

body[data-theme="light"] .item-gallery-preview-card,
body[data-theme="light"] .item-gallery-preview-button,
body[data-theme="light"] .item-gallery-preview-pending {
    background:
        linear-gradient(45deg, rgba(15, 23, 42, 0.05) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, 0.05) 75%),
        linear-gradient(45deg, rgba(15, 23, 42, 0.05) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, 0.05) 75%),
        rgba(15, 23, 42, 0.03);
    background-position: 0 0, 9px 9px, 0 0;
    background-size: 18px 18px, 18px 18px, auto;
    border-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .item-gallery-preview-card .item-gallery-preview-button {
    background: transparent;
    border-color: transparent;
}

body[data-theme="light"] .item-gallery-remove-button,
body[data-theme="light"] .item-gallery-drag-handle {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(15, 23, 42, 0.12);
    color: #1db13b;
}

body[data-theme="light"] .item-video-current-link {
    background: rgba(29, 177, 59, 0.08);
    border-color: rgba(29, 177, 59, 0.18);
}

body[data-theme="light"] .client-location-map-head .action-button {
    background: rgba(255, 255, 255, 0.88);
}

body[data-theme="light"] .client-photo-preview-image,
body[data-theme="light"] .client-tile-image,
body[data-theme="light"] .client-tile {
    border-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .item-catalog-tile-image,
body[data-theme="light"] .item-catalog-tile {
    border-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .item-catalog-tile-dot {
    background: rgba(15, 23, 42, 0.18);
}

body[data-theme="light"] .item-catalog-tile-dot:hover,
body[data-theme="light"] .item-catalog-tile-dot:focus-visible {
    background: rgba(12, 85, 145, 0.44);
}

body[data-theme="light"] .item-catalog-tile-dot.is-active {
    background: rgba(12, 85, 145, 0.82);
}

body[data-theme="light"] .client-photo-preview-button {
    background:
        linear-gradient(45deg, rgba(15, 23, 42, 0.05) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, 0.05) 75%),
        linear-gradient(45deg, rgba(15, 23, 42, 0.05) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, 0.05) 75%),
        rgba(15, 23, 42, 0.02);
    background-position: 0 0, 9px 9px, 0 0;
    background-size: 18px 18px, 18px 18px, auto;
}

body[data-theme="light"] .client-tile {
    background: transparent;
    border-left-color: rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .client-tile:hover {
    background: transparent;
    border-left-color: rgba(12, 85, 145, 0.22);
}

@media (max-width: 820px) {
    .client-module-form .employee-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .warehouse-transfer-form .employee-form-grid {
        grid-template-columns: 1fr;
    }

    .client-registry-toolbar {
        grid-template-columns: 1fr;
    }

    .employee-warehouse-grid {
        grid-template-columns: 1fr;
    }

    .client-location-shell {
        grid-template-columns: 1fr;
    }

    .client-location-map-panel {
        transform: none;
        justify-self: stretch;
        width: 100%;
    }
}

.employee-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.permissions-panel {
    gap: 12px;
    margin-top: 4px;
}

details.permissions-panel > summary.permissions-panel-head {
    align-items: center;
    cursor: pointer;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    min-height: 34px;
    user-select: none;
}

details.permissions-panel > summary.permissions-panel-head::-webkit-details-marker {
    display: none;
}

details.permissions-panel > summary.permissions-panel-head::marker {
    content: "";
}

details.permissions-panel > summary.permissions-panel-head span {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 22px;
    justify-content: center;
    width: 22px;
}

details.permissions-panel > summary.permissions-panel-head svg {
    height: 13px;
    transform: rotate(90deg);
    transition: transform 0.16s ease, color 0.16s ease;
    width: 13px;
}

details.permissions-panel[open] > summary.permissions-panel-head svg {
    transform: rotate(-90deg);
}

.permissions-panel-inline {
    margin: 14px 0;
}

.permissions-panel-head strong {
    color: var(--text);
    font-size: 0.92rem;
}

.permissions-panel-head span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

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

.permission-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}

.permission-card.effective {
    border-bottom-color: rgba(107, 220, 255, 0.2);
}

.permission-card.is-direct {
    border-bottom-color: rgba(135, 255, 164, 0.26);
}

body[data-theme="light"] .permission-card {
    border-bottom-color: rgba(15, 23, 42, 0.1);
    background: transparent;
}

.permission-card input {
    margin-top: 2px;
}

.employee-checkbox input,
.permission-card input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    outline: none;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

body[data-theme="light"] .employee-checkbox input,
body[data-theme="light"] .permission-card input {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.98);
}

.employee-checkbox input:hover,
.permission-card input:hover,
.employee-checkbox input:focus-visible,
.permission-card input:focus-visible {
    border-color: rgba(107, 220, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(107, 220, 255, 0.1);
}

.employee-checkbox input:checked,
.permission-card input:checked {
    border-color: rgba(107, 220, 255, 0.78);
    background: linear-gradient(180deg, rgba(69, 192, 255, 0.96) 0%, rgba(48, 124, 255, 0.92) 100%);
}

.employee-checkbox input:checked::after,
.permission-card input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid rgba(255, 255, 255, 0.98);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.permission-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.permission-copy strong {
    color: var(--text);
    font-size: 0.82rem;
}

.permission-copy span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.settings-roles-list {
    display: grid;
    gap: 12px;
}

.settings-role-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.4fr) auto;
    padding: 16px 18px;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.settings-role-card:hover,
.settings-role-card:focus-visible {
    background: rgba(107, 220, 255, 0.06);
    border-color: rgba(107, 220, 255, 0.28);
    transform: translateY(-1px);
}

.settings-role-card-main,
.settings-role-card-metrics {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.settings-role-card-main strong {
    font-size: 0.98rem;
}

.settings-role-card-main small,
.settings-role-card-copy,
.settings-role-card-metrics i {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.45;
}

.settings-role-card-metrics {
    align-items: flex-end;
    white-space: nowrap;
}

.settings-role-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-role-detail-head {
    align-items: center;
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.settings-role-detail-head h2 {
    font-size: 1.35rem;
    letter-spacing: 0;
    margin: 0 0 4px;
}

.settings-role-detail-head p,
.settings-role-lock-note,
.settings-role-save-state {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0;
}

.settings-role-save-state,
.settings-role-lock-note {
    background: rgba(135, 255, 164, 0.08);
    border: 1px solid rgba(135, 255, 164, 0.16);
    border-radius: 8px;
    color: var(--positive);
    padding: 10px 12px;
}

.settings-role-lock-note {
    background: rgba(255, 202, 87, 0.08);
    border-color: rgba(255, 202, 87, 0.18);
    color: var(--warning);
}

.settings-role-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto;
    max-width: 820px;
    width: min(100%, 820px);
}

.settings-access-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.settings-access-node {
    display: flex;
    flex-direction: column;
}

.settings-access-row {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 12px 16px;
}

.settings-access-row.depth-0 {
    background: rgba(107, 220, 255, 0.08);
    border-bottom: 1px solid rgba(107, 220, 255, 0.12);
}

.settings-access-row.depth-1 {
    padding-left: 24px;
}

.settings-access-row.depth-2 {
    padding-left: 56px;
}

.settings-access-node + .settings-access-node > .settings-access-row,
.settings-access-children > .settings-access-node + .settings-access-node > .settings-access-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.settings-access-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-access-copy strong {
    color: var(--text);
    font-size: 0.88rem;
}

.settings-access-copy span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.bal-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 44px;
}

.bal-switch input {
    opacity: 0;
    position: absolute;
}

.bal-switch span {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    display: block;
    height: 24px;
    position: relative;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    width: 44px;
}

.bal-switch span::after {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    content: "";
    height: 18px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform 160ms ease, background 160ms ease;
    width: 18px;
}

.bal-switch input:checked + span {
    background: linear-gradient(135deg, rgba(40, 208, 128, 0.94), rgba(0, 172, 116, 0.92));
    border-color: rgba(135, 255, 164, 0.45);
}

.bal-switch input:checked + span::after {
    background: #fff;
    transform: translateX(20px);
}

.bal-switch input:indeterminate + span {
    background: rgba(255, 202, 87, 0.18);
    border-color: rgba(255, 202, 87, 0.36);
}

.bal-switch input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(107, 220, 255, 0.14);
}

.bal-switch input:disabled + span {
    cursor: not-allowed;
    opacity: 0.68;
}

.settings-role-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.settings-utility-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
    max-width: 860px;
    width: min(100%, 860px);
}

.settings-utility-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.settings-utility-form h3 {
    font-size: 1rem;
    letter-spacing: 0;
    margin: 0 0 16px;
}

.settings-utility-form {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    box-shadow: none;
    padding: 18px 0 0;
}

.settings-utility-form .module-form-grid {
    align-items: end;
    display: grid;
    gap: 16px 22px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.settings-utility-form .module-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.settings-utility-form .module-form-field > span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.settings-utility-form input,
.settings-utility-form select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 0;
    color: var(--text);
    min-height: 42px;
    padding: 8px 0;
}

.settings-utility-form input:focus,
.settings-utility-form select:focus {
    border-bottom-color: var(--accent);
    box-shadow: none;
    outline: none;
}

.settings-data-form {
    --settings-data-border: rgba(148, 163, 184, 0.32);
    --settings-data-soft: rgba(148, 163, 184, 0.1);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    box-shadow: none;
    margin: 0 0 18px;
    padding: 18px 0 0;
}

.settings-data-form-grid {
    align-items: end;
    display: grid;
    gap: 16px 22px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.settings-data-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.settings-data-field > span {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.settings-data-form input,
.settings-data-form select,
.settings-data-review-actions input,
.settings-data-review-actions select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--settings-data-border);
    border-radius: 0;
    color: var(--text);
    min-height: 42px;
    padding: 8px 0;
}

.settings-data-form input:focus,
.settings-data-form select:focus,
.settings-data-review-actions input:focus,
.settings-data-review-actions select:focus {
    border-bottom-color: var(--accent);
    box-shadow: none;
    outline: none;
}

.settings-data-form input[type="file"] {
    color: var(--text-muted);
}

.settings-data-action-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 42px;
}

.settings-data-primary-action,
.settings-data-secondary-action,
.settings-data-danger-action {
    cursor: pointer;
    white-space: nowrap;
}

.settings-data-danger-action {
    color: var(--danger);
}

.settings-data-danger-action:hover,
.settings-data-danger-action:focus-visible {
    color: #ff9a9a;
}

.settings-data-danger-link {
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
    border-radius: 0;
    color: var(--danger);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0;
    min-height: 34px;
    padding: 0 0 5px;
    text-align: left;
}

.settings-data-danger-link:hover,
.settings-data-danger-link:focus-visible {
    border-bottom-color: var(--danger);
    color: #ff9a9a;
    outline: none;
}

.settings-data-danger-confirm {
    white-space: nowrap;
}

.settings-data-modal[hidden] {
    display: none;
}

body.modal-open {
    overflow: hidden;
}

.settings-data-modal {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}

.settings-data-modal-backdrop {
    background: rgba(15, 23, 42, 0.58);
    border: 0;
    bottom: 0;
    cursor: pointer;
    left: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.settings-data-modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-width: min(520px, 100%);
    padding: 24px;
    position: relative;
    width: 100%;
}

.settings-data-modal-title {
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 10px;
}

.settings-data-modal-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 18px;
}

.settings-code-cell {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    min-width: 126px;
}

.settings-code-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.settings-code-visible .settings-code-value {
    color: var(--text);
    font-size: 1.3em;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1;
    text-rendering: geometricPrecision;
}

.settings-code-eye {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
    width: 28px;
}

body[data-theme="light"] .settings-code-eye {
    background: rgba(15, 23, 42, 0.05);
}

.settings-code-eye:hover,
.settings-code-eye:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    outline: none;
}

body[data-theme="light"] .settings-code-eye:hover,
body[data-theme="light"] .settings-code-eye:focus-visible {
    background: rgba(15, 23, 42, 0.08);
}

.settings-code-eye:disabled {
    cursor: wait;
    opacity: 0.58;
}

.settings-code-eye svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 16px;
}

.settings-code-eye-off-icon,
.settings-code-visible .settings-code-eye-icon {
    display: none;
}

.settings-code-visible .settings-code-eye-off-icon {
    display: block;
}

.settings-code-error {
    color: var(--danger);
    font-size: 0.72rem;
    white-space: nowrap;
}

.settings-data-confirm-modal {
    align-items: center;
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 24px;
    position: fixed;
    z-index: 3200;
}

.settings-data-confirm-backdrop {
    background: rgba(6, 10, 16, 0.42);
    border: 0;
    cursor: default;
    inset: 0;
    padding: 0;
    position: absolute;
}

.settings-data-confirm-card {
    background: rgba(11, 16, 24, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
    display: grid;
    gap: 14px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 22px;
    position: relative;
    width: 100%;
}

body[data-theme="light"] .settings-data-confirm-card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.settings-data-confirm-close {
    background: transparent;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    font: inherit;
    font-size: 1.22rem;
    font-weight: 620;
    line-height: 1;
    padding: 2px;
    position: absolute;
    right: 10px;
    top: 9px;
}

.settings-data-confirm-close:hover,
.settings-data-confirm-close:focus-visible {
    background: transparent;
    color: var(--danger);
    outline: none;
}

.settings-data-confirm-card p {
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 720;
    line-height: 1.35;
    margin: 0;
    padding-right: 18px;
    text-align: center;
}

.settings-data-confirm-card span {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: center;
}

.settings-data-confirm-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 2px;
}

.settings-data-confirm-actions button {
    background: rgba(255, 255, 255, 0.03);
    border: 0;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    min-height: 38px;
}

.settings-data-confirm-actions .settings-data-confirm-yes {
    color: var(--danger);
}

.settings-data-confirm-actions .settings-data-confirm-no {
    color: var(--text);
}

body[data-theme="light"] .settings-data-confirm-actions button {
    background: rgba(15, 23, 42, 0.04);
}

.settings-data-confirm-actions button:hover,
.settings-data-confirm-actions button:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    outline: none;
}

.settings-data-confirm-actions .settings-data-confirm-yes:hover,
.settings-data-confirm-actions .settings-data-confirm-yes:focus-visible {
    color: var(--danger);
}

body[data-theme="light"] .settings-data-confirm-actions button:hover,
body[data-theme="light"] .settings-data-confirm-actions button:focus-visible {
    background: rgba(15, 23, 42, 0.06);
}

.settings-data-note {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.settings-data-section-title {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 18px 0 10px;
}

.lots-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lots-operational-route {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.lots-operational-route-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 12px;
}

.lots-operational-route-head strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 800;
}

.lots-operational-route-head span {
    color: var(--text-faint);
    font-size: 0.76rem;
    font-weight: 700;
}

.lots-operational-steps {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.lots-operational-step {
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: 9px;
    min-height: 68px;
    padding: 10px;
}

.lots-operational-step-dot {
    border-radius: 999px;
    flex: 0 0 10px;
    height: 10px;
    margin-top: 4px;
    width: 10px;
}

.lots-operational-step strong {
    color: var(--text);
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
}

.lots-operational-step em {
    color: var(--text-faint);
    display: block;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 4px;
}

.lots-operational-step.is-done {
    background: rgba(34, 197, 94, 0.07);
    border-color: rgba(34, 197, 94, 0.22);
}

.lots-operational-step.is-done .lots-operational-step-dot {
    background: #22c55e;
}

.lots-operational-step.is-active {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.28);
}

.lots-operational-step.is-active .lots-operational-step-dot {
    background: #0ea5e9;
}

.lots-operational-step.is-pending {
    background: rgba(148, 163, 184, 0.06);
}

.lots-operational-step.is-pending .lots-operational-step-dot {
    background: rgba(148, 163, 184, 0.75);
}

.lots-detail-section {
    border-top: 1px solid var(--border);
    padding-top: 2px;
}

.lots-detail-section > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    list-style: none;
    min-height: 42px;
}

.lots-detail-section > summary::-webkit-details-marker {
    display: none;
}

.lots-detail-section > summary span {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 800;
}

.lots-detail-section > summary em {
    color: var(--text-faint);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 700;
    margin-left: auto;
}

.lots-detail-section > summary i {
    color: var(--text-faint);
    font-style: normal;
    transition: transform 0.18s ease;
}

.lots-detail-section[open] > summary i {
    transform: rotate(90deg);
}

.settings-data-batch {
    border-top: 1px solid var(--border);
    margin-top: 18px;
    padding-top: 2px;
}

.settings-data-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}

.settings-data-counters span {
    border-bottom: 1px solid var(--settings-data-border);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0 0 7px;
}

.settings-data-apply-form {
    margin: 8px 0 14px;
}

.settings-data-review-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: min(760px, 100%);
}

.settings-data-review-actions input,
.settings-data-review-actions select {
    font-size: 0.78rem;
    min-width: 150px;
}

.settings-data-review-actions .settings-data-primary-action,
.settings-data-review-actions .settings-data-secondary-action,
.settings-data-review-actions .settings-data-danger-action {
    min-height: 30px;
    padding-bottom: 6px;
}

.settings-data-hash {
    background: var(--settings-data-soft);
    border-bottom: 1px solid var(--settings-data-border);
    color: var(--text);
    display: block;
    font-size: 0.78rem;
    margin: 8px 0 14px;
    max-width: 100%;
    overflow-x: auto;
    padding: 10px 0;
    white-space: nowrap;
}

.settings-data-empty {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 16px 0 10px;
    padding-top: 14px;
}

.settings-data-analytics-panel {
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.settings-data-imports-table td,
.settings-data-cleanup-table td,
.settings-data-export-table td,
.settings-data-readiness-table td,
.settings-data-staging-table td,
.settings-data-review-table td {
    vertical-align: top;
}

body[data-theme="light"] .settings-data-form {
    --settings-data-border: rgba(71, 85, 105, 0.28);
    --settings-data-soft: rgba(15, 23, 42, 0.04);
}

@media (max-width: 720px) {
    .settings-data-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-data-action-row,
    .settings-data-action-row .settings-data-primary-action,
    .settings-data-action-row .settings-data-secondary-action,
    .settings-data-action-row .settings-data-danger-action {
        justify-content: flex-start;
        width: 100%;
    }

    .settings-data-review-actions {
        min-width: 0;
    }

    .settings-data-review-actions input,
    .settings-data-review-actions select {
        min-width: min(100%, 220px);
    }
}

.production-utility-report-table .production-stock-matrix-utility-cell {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.15;
    min-width: 118px;
    text-align: center;
    text-decoration: none;
}

.settings-monthly-table th,
.settings-monthly-table td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.settings-monthly-table th:first-child,
.settings-monthly-table td:first-child {
    text-align: left;
}

.settings-monthly-cell,
.settings-monthly-stack {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.15;
    min-width: 112px;
    text-align: center;
}

.settings-monthly-cell strong {
    color: var(--accent);
}

.settings-monthly-cell span,
.settings-monthly-stack span {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.settings-monthly-stack b {
    color: var(--text);
    font-weight: 700;
}

body[data-theme="light"] .settings-role-card,
body[data-theme="light"] .settings-access-block {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .settings-access-row.depth-0 {
    background: rgba(14, 165, 233, 0.08);
    border-bottom-color: rgba(14, 165, 233, 0.12);
}

body[data-theme="light"] .settings-access-node + .settings-access-node > .settings-access-row,
body[data-theme="light"] .settings-access-children > .settings-access-node + .settings-access-node > .settings-access-row {
    border-top-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 760px) {
    .settings-role-card {
        grid-template-columns: 1fr;
    }

    .settings-role-card-metrics {
        align-items: flex-start;
    }

    .settings-role-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.employee-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.employee-profile-cell {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 0 13px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0;
    background: transparent;
}

body[data-theme="light"] .employee-profile-cell {
    border-bottom-color: rgba(15, 23, 42, 0.16);
    background: transparent;
}

.employee-profile-cell span {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.employee-profile-cell strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
}

.employee-form-note {
    margin: 4px 0 0;
}

.employee-submit {
    align-self: flex-start;
    margin-top: 2px;
}

.employees-empty {
    margin-top: 0;
}

.employees-table-actions {
    margin-bottom: 12px;
}

.employees-table-card .data-table thead th {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.employees-table-card .data-table tbody tr:first-child td {
    border-top-color: transparent;
}

body[data-theme="light"] .employees-table-card .data-table thead th {
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.22);
}

body[data-theme="light"] .employees-table-card .data-table tbody tr:first-child td {
    border-top-color: transparent;
}

.employee-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px;
    overflow-y: auto;
}

.employee-modal-shell,
.employee-modal-card,
.hr-location-map-suggestions,
.hr-location-assignment-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 245, 104, 0.42) transparent;
}

.employee-modal-shell::-webkit-scrollbar,
.employee-modal-card::-webkit-scrollbar,
.hr-location-map-suggestions::-webkit-scrollbar,
.hr-location-assignment-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.employee-modal-shell::-webkit-scrollbar-track,
.employee-modal-card::-webkit-scrollbar-track,
.hr-location-map-suggestions::-webkit-scrollbar-track,
.hr-location-assignment-list::-webkit-scrollbar-track {
    background: transparent;
}

.employee-modal-shell::-webkit-scrollbar-thumb,
.employee-modal-card::-webkit-scrollbar-thumb,
.hr-location-map-suggestions::-webkit-scrollbar-thumb,
.hr-location-assignment-list::-webkit-scrollbar-thumb {
    background: rgba(188, 245, 104, 0.36);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.module-modal-shell {
    display: none;
}

.module-modal-shell.is-open,
.module-modal-shell:target {
    display: flex;
}

.employee-modal-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(6, 10, 16, 0.66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.employee-modal-card {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: calc(100vh - 64px);
    margin: auto 0;
    padding: 20px;
    overflow: auto;
}

.employee-modal-head,
.employee-modal-actions,
.employee-modal-head-actions {
    display: flex;
    align-items: center;
}

.employee-modal-head {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.module-form-inline-shell {
    padding: 18px;
}

.module-form-inline-card {
    display: grid;
    gap: 14px;
}

.module-form-inline-head {
    margin-bottom: 0;
}

.employee-modal-head-actions {
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.employee-modal-summary {
    margin-bottom: 14px;
}

.employee-modal-flash {
    margin: 0 0 14px;
}

.employee-modal-form {
    gap: 16px;
}

.hr-location-form .employee-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hr-location-form .employee-field {
    gap: 8px;
}

.hr-location-form .employee-input,
.hr-location-form .employee-select {
    min-height: 44px;
    padding: 0 4px 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-theme="light"] .hr-location-form .employee-input,
body[data-theme="light"] .hr-location-form .employee-select {
    border-bottom-color: rgba(15, 23, 42, 0.18);
    background: transparent;
}

.hr-location-form .employee-input::placeholder,
.hr-location-form .employee-select::placeholder {
    color: var(--text-muted);
}

.hr-location-form .employee-input:focus,
.hr-location-form .employee-select:focus {
    border-bottom-color: #bcf568;
    box-shadow: none;
}

.hr-location-form textarea.employee-input {
    min-height: 88px;
    padding: 12px 0 10px;
    resize: vertical;
}

.hr-location-form .employee-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.76) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.76) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

body[data-theme="light"] .hr-location-form .employee-select {
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.72) 50%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.72) 50%, transparent 50%);
}

.hr-location-form .employee-select option {
    background: #0b0f15;
    color: #f6fbff;
}

body[data-theme="light"] .hr-location-form .employee-select option {
    background: #ffffff;
    color: #0f172a;
}

.employee-modal-actions {
    justify-content: flex-start;
    gap: 14px;
}

.employee-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.employee-history-card {
    padding: 16px;
}

.hr-employee-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 248px));
    gap: 16px;
}

.hr-employee-tile {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hr-employee-tile-avatar,
.hr-employee-tile-photo,
.hr-employee-tile-fallback {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.hr-employee-tile-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
}

.hr-employee-tile-photo {
    object-fit: cover;
    display: block;
}

.hr-employee-tile-fallback {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: linear-gradient(145deg, rgba(69, 192, 255, 0.16), rgba(31, 98, 163, 0.24));
}

.hr-employee-tile-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.hr-employee-tile-name {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
}

.hr-employee-tile-role,
.hr-employee-tile-location {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.hr-employee-tile-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.hr-detail-sections {
    grid-template-columns: 1fr;
    gap: 10px;
}

.hr-detail-sections .employee-history-card {
    padding: 14px 0 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: none;
}

.hr-detail-sections .employee-history-card .card-head {
    margin-bottom: 10px;
}

.hr-profile-hero {
    padding: 18px 20px;
}

.hr-profile-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.hr-profile-photo-shell {
    flex: 0 0 108px;
}

.hr-photo-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    border-radius: 28px;
    cursor: pointer;
}

.hr-profile-photo,
.hr-profile-photo-fallback {
    width: 108px;
    height: 108px;
    border-radius: 28px;
}

.hr-profile-photo {
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.hr-profile-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(69, 192, 255, 0.16), rgba(31, 98, 163, 0.24));
    color: var(--text);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid rgba(107, 220, 255, 0.2);
}

.hr-profile-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.hr-profile-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}

.hr-profile-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.hr-profile-meta-grid {
    margin-bottom: 0;
}

.filter-chip.hr-employee-section-chip {
    min-height: 34px;
    padding: 0 2px 8px;
    font-size: 0.84rem;
}

.filter-chip.hr-employee-period-chip {
    font-size: 0.9rem;
    margin-left: 4px;
}

.hr-detail-sections .employee-history-card {
    padding: 0 0 24px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--content-line);
    border-radius: 0;
    box-shadow: none;
}

.hr-detail-sections .employee-history-card .card-head {
    margin-bottom: 14px;
}

.hr-detail-sections .employee-history-card.hr-section-wide {
    grid-column: 1 / -1;
}

.hr-detail-sections .employee-history-card.stock-detail-section {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hr-detail-sections .employee-history-card.stock-detail-section .card-head {
    margin-bottom: 12px;
}

.stock-live-list {
    display: grid;
    gap: 0;
}

.stock-live-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--content-line);
}

.stock-live-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.stock-live-main strong {
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.25;
}

.stock-live-main span,
.stock-live-values span,
.stock-live-values small,
.stock-live-empty span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.stock-live-values {
    display: grid;
    gap: 4px;
    text-align: right;
    white-space: nowrap;
}

.stock-live-values .stock-live-qty {
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 800;
}

.stock-live-empty {
    display: grid;
    gap: 6px;
    padding: 18px 0;
    border-bottom: 1px solid var(--content-line);
}

.stock-live-empty strong {
    color: var(--text);
}

.hr-inline-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hr-inline-actions form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.hr-inline-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.hr-inline-button:hover,
.hr-inline-button:focus-visible {
    color: var(--danger);
}

.hr-inline-button:hover,
.hr-inline-button:focus-visible,
.hr-inline-actions a:hover {
    color: var(--text);
}

.hr-photo-modal-card {
    width: min(920px, 100%);
}

.communications-person-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.communications-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 44px;
}

.communications-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(182, 255, 128, 0.16);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.communications-person-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.communications-person-copy strong,
.communications-person-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.communications-person-copy span {
    color: rgba(171, 233, 129, 0.88);
    font-size: 0.82rem;
}

.communications-detail-shell {
    display: grid;
    gap: 14px;
}

.communications-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.communications-toolbar-search {
    flex: 1 1 320px;
}

.communications-toolbar-date {
    flex: 0 1 180px;
}

.communications-load-more {
    display: flex;
    justify-content: center;
}

.communications-empty {
    padding: 20px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    text-align: center;
}

.communications-transcript {
    display: grid;
    gap: 10px;
}

.communications-date-separator {
    display: flex;
    justify-content: center;
    margin: 4px 0 2px;
}

.communications-date-separator span {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.communications-bubble-row {
    display: flex;
    justify-content: flex-start;
}

.communications-bubble-row.is-own {
    justify-content: flex-end;
}

.communications-bubble {
    max-width: min(760px, 82%);
    padding: 13px 15px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.communications-bubble.is-own {
    background: rgba(182, 255, 128, 0.18);
}

.communications-bubble-author {
    margin-bottom: 6px;
    color: rgba(171, 233, 129, 0.9);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.communications-bubble-body {
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.6;
}

.communications-bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.communications-attachment-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 0.8rem;
    text-decoration: none;
}

.communications-bubble-meta {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.hr-photo-modal-frame {
    padding: 8px 0 0;
}

.hr-photo-modal-image {
    display: block;
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.03);
}

.hr-location-map-shell {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.hr-location-map-toolbar {
    display: grid;
    gap: 6px;
    position: relative;
    z-index: 4;
}

.hr-location-map-search {
    position: relative;
}

.hr-location-map-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.hr-location-map-frame {
    min-height: 540px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(70, 182, 255, 0.18), transparent 50%),
        rgba(255, 255, 255, 0.03);
}

body[data-theme="light"] .hr-location-map-frame {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top, rgba(70, 182, 255, 0.12), transparent 50%),
        rgba(255, 255, 255, 0.96);
}

.hr-location-map-frame .maplibregl-canvas,
.hr-location-map-frame .maplibregl-control-container,
.hr-location-map-frame .maplibregl-popup,
.bal-map-frame .maplibregl-canvas,
.bal-map-frame .maplibregl-control-container,
.bal-map-frame .maplibregl-popup,
.hr-geo-route-map .maplibregl-canvas,
.hr-geo-route-map .maplibregl-control-container,
.hr-geo-route-map .maplibregl-popup,
.hr-location-map-suggestions {
    font-family: "Manrope", system-ui, sans-serif;
}

.bal-map-shell {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body[data-theme="light"] .bal-map-shell {
    border-color: transparent;
    background: transparent;
}

.bal-map-status {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.bal-map-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 760px;
}

.bal-map-search input[type="search"] {
    min-width: min(100%, 320px);
    flex: 1 1 320px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    padding: 0 12px;
    font: inherit;
}

body[data-theme="light"] .bal-map-search input[type="search"] {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
}

.bal-map-search button,
.bal-map-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid rgba(183, 255, 58, 0.24);
    background: rgba(183, 255, 58, 0.08);
    color: var(--accent);
    font: inherit;
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.bal-map-search-clear {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

.bal-map-frame {
    position: relative;
    min-height: clamp(640px, 72vh, 880px);
    border-radius: 12px;
    overflow: hidden;
    border: 0;
    background: transparent;
}

body[data-theme="light"] .bal-map-frame {
    border-color: transparent;
    background: transparent;
}

.bal-map-empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.86rem;
    text-align: center;
    pointer-events: none;
}

.bal-map-frame .maplibregl-popup-content {
    display: grid;
    gap: 4px;
    min-width: 170px;
    border-radius: 12px;
    color: #0f172a;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.78rem;
}

.bal-map-frame .maplibregl-popup-content strong,
.bal-map-frame .maplibregl-popup-content span,
.bal-map-frame .maplibregl-popup-content small {
    display: block;
}

.bal-map-popup-link {
    color: #166534;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}

.bal-map-status[data-tone="positive"] {
    color: var(--positive);
}

.bal-map-status[data-tone="warning"] {
    color: var(--warning);
}

@media (max-width: 720px) {
    .bal-map-shell {
        gap: 10px;
    }

    .bal-map-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .bal-map-search input[type="search"],
    .bal-map-search button,
    .bal-map-search-clear {
        width: 100%;
        min-width: 0;
    }

    .bal-map-frame {
        min-height: 360px;
        height: min(62svh, 520px);
    }

    .bal-map-frame .maplibregl-popup-content {
        max-width: calc(100vw - 32px);
        min-width: 0;
    }
}

.hr-geo-stack {
    display: grid;
    gap: 18px;
}

.hr-geo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.hr-geo-panel,
.hr-geo-map-panel,
.hr-geo-privacy-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="light"] .hr-geo-panel,
body[data-theme="light"] .hr-geo-map-panel,
body[data-theme="light"] .hr-geo-privacy-card {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.hr-geo-panel-head,
.hr-geo-route-actions,
.hr-geo-route-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}

.hr-geo-panel-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.hr-geo-panel-head span,
.hr-geo-route-actions span,
.hr-geo-empty-note,
.hr-geo-privacy-card span {
    color: var(--muted);
}

.hr-geo-route-summary {
    justify-content: flex-start;
}

.hr-geo-route-summary span,
.hr-geo-route-actions span {
    font-size: 13px;
}

.hr-geo-route-map {
    min-height: 460px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(183, 255, 58, 0.14), transparent 52%),
        rgba(255, 255, 255, 0.035);
}

body[data-theme="light"] .hr-geo-route-map {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top, rgba(183, 255, 58, 0.11), transparent 52%),
        rgba(255, 255, 255, 0.96);
}

@media (min-width: 1180px) {
    .hr-geo-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    }
}

@media (max-width: 720px) {
    .hr-geo-panel,
    .hr-geo-map-panel,
    .hr-geo-privacy-card {
        padding: 14px;
        border-radius: 18px;
    }

    .hr-geo-route-map {
        min-height: 340px;
    }
}

.hr-location-map-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 24;
    display: grid;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(11, 15, 21, 0.92);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

body[data-theme="light"] .hr-location-map-suggestions {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.98);
}

.hr-location-map-suggestion {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.hr-location-map-suggestion:hover,
.hr-location-map-suggestion:focus-visible {
    background: rgba(191, 255, 98, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.hr-location-map-suggestion-label {
    font-size: 0.95rem;
    font-weight: 700;
}

.hr-location-map-suggestion-address {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.employee-field-note[data-hr-location-map-status][data-tone="positive"] {
    color: #7ce5a1;
}

.employee-field-note[data-hr-location-map-status][data-tone="warning"] {
    color: #ffd27a;
}

.employee-field-note[data-hr-location-map-status][data-tone="neutral"] {
    color: var(--text-muted);
}

.hr-location-map-status {
    min-height: 0;
    margin: 0;
}

.hr-location-empty {
    padding: 24px 22px;
}

.hr-location-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
    gap: 18px;
}

.hr-location-tile {
    display: grid;
    gap: 12px;
}

.hr-location-tile-media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.hr-location-tile-media:hover,
.hr-location-tile-media:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(188, 245, 104, 0.46);
    outline: none;
}

.hr-location-tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hr-location-tile-fallback {
    display: grid;
    place-items: center;
    color: var(--text);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(145deg, rgba(69, 192, 255, 0.16), rgba(31, 98, 163, 0.24));
}

.hr-location-tile-copy {
    display: grid;
    gap: 6px;
}

.hr-location-tile-name {
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 800;
    text-decoration: none;
}

.hr-location-tile-name:hover,
.hr-location-tile-name:focus-visible {
    color: #bcf568;
    outline: none;
}

.hr-location-tile-address {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.hr-location-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.hr-location-detail-shell {
    display: grid;
    grid-template-columns: minmax(520px, 0.7fr) minmax(720px, 1fr);
    grid-template-areas:
        "main map"
        "hub map"
        "assigned worktime"
        "attendance attendance";
    gap: 14px 16px;
    align-items: start;
}

.hr-location-detail-main {
    grid-area: main;
}

.hr-location-detail-hero {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.hr-location-detail-media {
    width: 100%;
}

.hr-location-detail-photo-button,
.hr-location-detail-photo,
.hr-location-detail-photo-fallback {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 34px;
}

.hr-location-detail-photo-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hr-location-detail-photo {
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.hr-location-detail-photo-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(69, 192, 255, 0.16), rgba(31, 98, 163, 0.24));
    color: var(--text);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hr-location-detail-copy {
    display: grid;
    gap: 14px;
    min-width: 0;
    align-content: start;
}

.hr-location-detail-name {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.28rem, 2vw, 1.72rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.hr-location-detail-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hr-location-detail-address {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
}

.hr-location-detail-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.hr-location-detail-facts {
    display: grid;
    width: min(100%, 520px);
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
    gap: 12px 16px;
    justify-content: start;
}

.hr-location-detail-fact {
    display: grid;
    gap: 8px;
    width: min(100%, 180px);
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    justify-self: start;
}

body[data-theme="light"] .hr-location-detail-fact {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.hr-location-detail-fact span {
    color: var(--text-faint);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hr-location-detail-fact strong {
    color: var(--text);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.5;
}

.hr-location-detail-map-panel {
    grid-area: map;
    display: grid;
    gap: 0;
    align-content: start;
    position: relative;
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

.hr-location-detail-map-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 3;
    pointer-events: none;
}

.hr-location-detail-map-head .action-button {
    pointer-events: auto;
    background: rgba(11, 16, 25, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hr-location-display-map {
    aspect-ratio: 1 / 1;
    min-height: 420px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(70, 182, 255, 0.14), transparent 52%),
        rgba(255, 255, 255, 0.03);
}

.hr-location-detail-map-panel > .hr-location-display-map {
    width: 100%;
    height: clamp(620px, 72vh, 980px);
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    justify-self: stretch;
}

.hr-location-hub {
    grid-area: hub;
    display: grid;
    gap: 10px;
    width: min(100%, 980px);
}

.hr-location-stream-head > span,
.hr-location-stream-head > a {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.hr-location-stream-head > a:hover,
.hr-location-stream-head > a:focus-visible {
    color: var(--text);
    outline: none;
}

.hr-location-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
    gap: 10px 18px;
}

.hr-location-hub-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 0 12px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.hr-location-hub-link:hover,
.hr-location-hub-link:focus-visible {
    color: var(--text);
    transform: translateX(2px);
    border-bottom-color: rgba(182, 255, 128, 0.34);
    outline: none;
}

.hr-location-hub-link i {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--text);
    background: rgba(182, 255, 128, 0.14);
}

.hr-location-hub-link i svg {
    width: 18px;
    height: 18px;
}

.hr-location-hub-link span {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.hr-location-hub-link strong,
.hr-location-hub-link small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-location-hub-link strong {
    color: var(--text);
    font-size: 0.9rem;
}

.hr-location-hub-link small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.hr-location-hub-link b {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
}

body[data-theme="light"] .hr-location-hub-link {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .hr-location-display-map {
    border-color: rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top, rgba(70, 182, 255, 0.1), transparent 52%),
        rgba(255, 255, 255, 0.96);
}

body[data-theme="light"] .hr-location-detail-map-head .action-button {
    background: rgba(255, 255, 255, 0.88);
}

.hr-location-display-map-large {
    min-height: min(76vh, 820px);
}

.hr-location-display-map-empty {
    display: grid;
    place-items: center;
    min-height: inherit;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}

.hr-location-stream {
    display: grid;
    gap: 10px;
    width: 100%;
}

.hr-location-stream-assigned {
    grid-area: assigned;
    margin-top: -2px;
}

.hr-location-stream-attendance {
    grid-area: attendance;
    margin-top: 2px;
}

.hr-location-stream-worktime {
    grid-area: worktime;
    margin-top: -2px;
}

.hr-location-stream-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hr-location-stream-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}

.hr-location-person-list {
    display: grid;
    width: min(100%, 980px);
}

.hr-location-stream-empty {
    margin: 0;
    padding: 12px 0 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.hr-location-person-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0 18px;
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.hr-location-person-row.is-compact {
    grid-template-columns: auto minmax(0, 1fr);
}

.hr-location-person-row.is-compact::after {
    right: auto;
    width: clamp(220px, 38%, 340px);
}

.hr-location-person-row::after {
    content: "";
    position: absolute;
    left: 64px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.hr-location-person-row:hover,
.hr-location-person-row:focus-visible {
    color: var(--text);
    transform: translateX(2px);
    outline: none;
}

body[data-theme="light"] .hr-location-person-row::after {
    background: rgba(15, 23, 42, 0.08);
}

.hr-location-person-avatar {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(182, 255, 128, 0.16);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    object-fit: cover;
}

.hr-location-person-avatar-image {
    display: block;
}

.hr-location-person-main,
.hr-location-person-meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hr-location-person-main strong,
.hr-location-person-main span,
.hr-location-person-meta,
.hr-location-person-trailing {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-location-person-main span,
.hr-location-person-meta {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.hr-location-person-meta,
.hr-location-person-trailing {
    text-align: right;
}

.hr-location-person-trailing {
    font-size: 0.84rem;
    font-weight: 700;
}

.hr-location-worktime-list {
    display: grid;
}

.hr-location-worktime-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0 16px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hr-location-worktime-row:hover,
.hr-location-worktime-row:focus-visible {
    color: var(--text);
    outline: none;
}

.hr-location-worktime-row span {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.hr-location-worktime-row strong,
.hr-location-worktime-row small,
.hr-location-worktime-row b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-location-worktime-row strong {
    color: var(--text);
    font-size: 0.88rem;
}

.hr-location-worktime-row small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.hr-location-worktime-row b {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
}

body[data-theme="light"] .hr-location-worktime-row {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.hr-location-employee-modal {
    z-index: 66;
}

.hr-location-employee-card,
.hr-location-map-modal-card {
    width: min(1080px, 100%);
}

.hr-location-employee-head {
    display: grid;
    grid-template-columns: minmax(128px, 164px) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.hr-location-employee-media {
    width: 100%;
}

.hr-location-employee-photo-button,
.hr-location-employee-photo,
.hr-location-employee-photo-fallback {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
}

.hr-location-employee-photo-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hr-location-employee-photo {
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.hr-location-employee-photo-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(69, 192, 255, 0.16), rgba(31, 98, 163, 0.24));
    color: var(--text);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hr-location-employee-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.hr-location-employee-copy strong {
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 800;
}

.hr-location-employee-copy span {
    color: var(--text-muted);
    line-height: 1.55;
}

.hr-location-employee-period-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hr-location-employee-history-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.hr-location-employee-history-date {
    min-width: 220px;
}

.hr-location-employee-history-date input {
    width: 100%;
}

.hr-location-employee-history-pager {
    margin-top: 8px;
}

.hr-location-employee-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    margin-bottom: 20px;
}

.hr-location-employee-stat {
    display: grid;
    gap: 8px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .hr-location-employee-stat {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.hr-location-employee-stat span {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hr-location-employee-stat strong {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
}

.hr-location-employee-stream {
    gap: 14px;
}

.hr-location-employee-attendance-list {
    display: grid;
}

.hr-location-employee-attendance-row {
    display: grid;
    grid-template-columns: 100px 84px 84px minmax(120px, 140px) minmax(0, 1fr) 82px;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .hr-location-employee-attendance-row {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.hr-location-employee-attendance-day,
.hr-location-employee-attendance-time,
.hr-location-employee-attendance-meta,
.hr-location-employee-attendance-hours {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.hr-location-employee-attendance-status {
    font-size: 0.84rem;
    font-weight: 700;
}

.hr-location-employee-attendance-hours {
    text-align: right;
}

.hr-location-photo-shell {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.hr-location-photo-head {
    margin-bottom: 0;
}

.hr-location-photo-grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.hr-location-photo-name {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.hr-location-photo-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.hr-location-photo-add,
.hr-location-photo-preview {
    width: 112px;
    height: 112px;
    border-radius: 24px;
}

.hr-location-photo-add {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.02);
    color: #bcf568;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hr-location-photo-add span {
    font-size: 2rem;
    line-height: 1;
    font-weight: 300;
}

.hr-location-photo-add:hover,
.hr-location-photo-add:focus-visible {
    border-color: rgba(188, 245, 104, 0.52);
    background: rgba(188, 245, 104, 0.06);
    transform: translateY(-1px);
    outline: none;
}

body[data-theme="light"] .hr-location-photo-add {
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(15, 23, 42, 0.02);
}

body[data-theme="light"] .hr-location-photo-add:hover,
body[data-theme="light"] .hr-location-photo-add:focus-visible {
    border-color: rgba(84, 117, 18, 0.42);
    background: rgba(188, 245, 104, 0.08);
}

.hr-location-photo-item {
    position: relative;
    width: 112px;
    height: 112px;
}

.hr-location-photo-item[hidden] {
    display: none;
}

.hr-location-photo-preview {
    display: block;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.hr-location-photo-preview:hover,
.hr-location-photo-preview:focus-visible {
    border-color: rgba(188, 245, 104, 0.5);
    transform: translateY(-1px);
    outline: none;
}

body[data-theme="light"] .hr-location-photo-preview {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.hr-location-photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hr-location-photo-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #ff4d4d;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 2px 6px rgba(6, 10, 16, 0.42);
    transition: transform 0.18s ease, color 0.18s ease;
}

.hr-location-photo-remove:hover,
.hr-location-photo-remove:focus-visible {
    color: #ff2f2f;
    transform: scale(1.08);
    outline: none;
}

.hr-location-assignment-shell {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.hr-location-assignment-head {
    margin-bottom: 0;
}

.hr-location-assignment-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.hr-location-assignment-summary strong {
    color: var(--text);
    font-size: 0.88rem;
}

.hr-location-assignment-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hr-location-assignment-tabs .tab-button {
    padding-bottom: 6px;
}

.hr-location-assignment-list {
    display: grid;
    gap: 0;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

.hr-location-assignment-item {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    transition: color 0.18s ease;
}

.hr-location-assignment-item::after {
    content: "";
    position: absolute;
    left: 78px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .hr-location-assignment-item::after {
    background: rgba(15, 23, 42, 0.08);
}

.hr-location-assignment-item:hover .hr-location-assignment-copy strong,
.hr-location-assignment-item.is-selected .hr-location-assignment-copy strong {
    color: #7ce5a1;
}

.hr-location-assignment-item input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    cursor: pointer;
    outline: none;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

body[data-theme="light"] .hr-location-assignment-item input {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.98);
}

.hr-location-assignment-item input:hover,
.hr-location-assignment-item input:focus-visible {
    border-color: rgba(107, 220, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(107, 220, 255, 0.1);
}

.hr-location-assignment-item input:checked {
    border-color: rgba(107, 220, 255, 0.78);
    background: linear-gradient(180deg, rgba(69, 192, 255, 0.96) 0%, rgba(48, 124, 255, 0.92) 100%);
}

.hr-location-assignment-item input:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hr-location-assignment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    background: rgba(107, 220, 255, 0.1);
}

.hr-location-assignment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hr-location-assignment-avatar-fallback {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hr-location-assignment-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.hr-location-assignment-copy strong {
    color: var(--text);
    font-size: 0.92rem;
}

.hr-location-assignment-copy span {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.hr-location-assignment-status {
    align-self: start;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hr-location-assignment-status.is-active {
    color: #7ce5a1;
}

.hr-location-assignment-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hr-location-assignment-pager span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.hr-location-assignment-empty,
.hr-location-assignment-empty-static {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}


.employee-history-scroll {
    max-height: 320px;
}

.hr-detail-sections:has(> .history-stock-period) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

.hr-detail-sections > .history-stock-period {
    min-width: 0;
}

.employee-history-pager,
.employee-history-actions {
    display: flex;
    align-items: center;
}

.employee-history-pager {
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.employee-history-actions {
    gap: 10px;
    margin-left: auto;
}

.employee-history-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.card-head {
    margin-bottom: 14px;
}

.card-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.card-head-copy {
    min-width: 0;
}

.card-head-button-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.card-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.card-head p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.chart-frame {
    min-height: 276px;
}

.dashboard-chart-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-chart-stat {
    padding: 0 0 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
}

body[data-theme="light"] .dashboard-chart-stats,
body[data-theme="light"] .dashboard-chart-stat {
    border-color: rgba(15, 23, 42, 0.08);
}

.chart-svg {
    width: 100%;
    height: auto;
}

.chart-axis {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}

body[data-theme="light"] .chart-axis {
    stroke: rgba(15, 23, 42, 0.12);
}

.chart-grid {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    stroke-dasharray: 5 8;
}

body[data-theme="light"] .chart-grid {
    stroke: rgba(15, 23, 42, 0.06);
}

.chart-area {
    fill: url(#balChartArea);
}

.chart-line {
    fill: none;
    stroke: url(#balChartLine);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-guide-current {
    stroke: rgba(77, 181, 255, 0.28);
    stroke-width: 1;
    stroke-dasharray: 4 8;
}

.chart-point {
    fill: #42abff;
    stroke: rgba(8, 14, 22, 0.88);
    stroke-width: 1.8;
}

.chart-point-current-ring {
    fill: rgba(66, 171, 255, 0.1);
    stroke: rgba(120, 212, 255, 0.42);
    stroke-width: 1.2;
}

.chart-point-current {
    fill: #78d4ff;
    stroke: rgba(8, 14, 22, 0.92);
    stroke-width: 2.2;
}

.chart-value-pill {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(120, 212, 255, 0.24);
    stroke-width: 1;
}

.chart-svg text {
    fill: #70809a;
    font-family: Manrope, Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
}

body[data-theme="light"] .chart-point {
    stroke: #f8fafc;
}

body[data-theme="light"] .chart-point-current {
    stroke: #f8fafc;
}

body[data-theme="light"] .chart-point-current-ring {
    stroke: rgba(12, 85, 145, 0.18);
}

body[data-theme="light"] .chart-value-pill {
    fill: rgba(255, 255, 255, 0.9);
    stroke: rgba(12, 85, 145, 0.14);
}

body[data-theme="light"] .chart-svg text {
    fill: #6b778c;
}

.chart-y-label,
.chart-x-label {
    fill: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.chart-value-text {
    fill: var(--text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.bar-list,
.focus-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bar-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-bar-list {
    gap: 14px;
}

.dashboard-bar-item {
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.dashboard-bar-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-bar-item:hover {
    transform: translateX(2px);
    border-bottom-color: rgba(107, 220, 255, 0.18);
}

.bar-head {
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
}

.bar-head span {
    color: var(--text-soft);
}

.bar-track {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

body[data-theme="light"] .bar-track {
    background: rgba(15, 23, 42, 0.08);
}

.bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #29b5ff 0%, #2f7dff 100%);
}

.bar-fill.alt {
    background: linear-gradient(90deg, #53d57b 0%, #29b5ff 100%);
}

.dashboard-focus-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
}

.focus-list.dashboard-chart-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.focus-item {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body[data-theme="light"] .focus-item {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.06);
}

.dashboard-focus-item {
    padding: 0 0 14px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.dashboard-chart-stat span,
.dashboard-focus-item span,
.dashboard-stage .chart-x-label,
.dashboard-stage .chart-y-label,
.dashboard-stage .chart-value-text {
    letter-spacing: 0;
}

.dashboard-focus-item:hover {
    transform: translateY(-1px);
    border-bottom-color: rgba(107, 220, 255, 0.22);
}

body[data-theme="light"] .dashboard-chart-stage {
    border-right-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .dashboard-focus-stage,
body[data-theme="light"] .dashboard-bar-item,
body[data-theme="light"] .dashboard-focus-item {
    border-color: rgba(15, 23, 42, 0.08);
}

.focus-item span {
    display: block;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.focus-item strong {
    display: block;
    margin-top: 8px;
    font-size: 1rem;
}

.focus-item p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.table-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.table-card .card-head {
    margin-bottom: 14px;
    padding: 0;
}

.table-card .card-head-actions:has(.table-head-filter-row) {
    align-items: center;
}

.table-card .card-head-actions:has(.table-head-filter-row) .card-head-copy {
    flex: 1 1 auto;
    overflow: hidden;
}

.table-card .card-head-actions:has(.table-head-filter-row) .card-head-button-row {
    flex: 0 0 auto;
}

.table-card .table-head-filter-row {
    flex-wrap: nowrap;
    margin: 0;
    padding: 2px 2px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.42) transparent;
}

.table-card .table-head-filter-row::-webkit-scrollbar {
    height: 3px;
}

.table-card .table-head-filter-row::-webkit-scrollbar-track {
    background: transparent;
}

.table-card .table-head-filter-row::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.42);
    border-radius: 999px;
}

.table-card .table-head-filter-row .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.table-card .main-warehouse-compact-card-head,
.table-card .micro-card-head {
    margin-bottom: 10px;
}

.table-card .main-warehouse-compact-card-head h3,
.table-card .micro-card-head h3 {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.55;
}

.table-toolbar,
.table-toolbar-meta,
.table-toolbar-actions,
.table-search,
.table-period,
.table-head-cell,
.table-filter-popover-actions {
    display: flex;
    align-items: center;
}

.table-toolbar {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.table-toolbar-meta {
    display: none;
    min-height: 34px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.table-toolbar-actions {
    margin-left: auto;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
}

.table-tool-button {
    position: relative;
    min-height: 34px;
    padding: 0 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.table-tool-button:hover,
.table-tool-button.active {
    color: var(--text);
}

.table-tool-button:disabled {
    opacity: 0.56;
    cursor: wait;
}

.table-tool-button.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

body[data-theme="light"] .table-tool-button.active::after {
    background: #0c1220;
}

.table-tool-button svg,
.table-head-trigger svg,
.table-period-caret svg {
    width: 16px;
    height: 16px;
}

.kpi-toggle-button {
    min-width: 40px;
    min-height: 34px;
    flex: 0 0 auto;
    justify-content: center;
    padding: 0 2px 8px;
    color: var(--accent);
    line-height: 1;
}

.kpi-toggle-button:hover,
.kpi-toggle-button.is-expanded {
    color: var(--text);
}

.kpi-toggle-button svg {
    width: 34px;
    height: 34px;
    transition: transform 0.16s ease;
}

.kpi-toggle-button svg path {
    stroke-width: 1.2;
}

.kpi-toggle-button.is-expanded svg {
    transform: rotate(180deg);
}

.panel-head.panel-head-finance-promoted-toolbar .finance-panel-toolbar .kpi-toggle-button svg {
    width: 32px;
    height: 32px;
}

.table-period {
    position: relative;
    min-height: 34px;
    padding: 0 14px 8px 0;
    color: var(--text-muted);
}

.table-period:hover {
    color: var(--text);
}

.table-period-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    outline: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 14px 0 0;
    cursor: pointer;
}

.table-period-caret {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    color: currentColor;
    pointer-events: none;
}

.table-tool-menu {
    position: relative;
}

.table-tool-menu summary {
    list-style: none;
}

.table-tool-menu summary::-webkit-details-marker {
    display: none;
}

.table-tool-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 18, 0.96);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 30;
}

.table-tool-menu-panel-floating {
    position: fixed;
    right: auto;
    top: auto;
    z-index: 5000;
    max-height: min(420px, calc(100vh - 96px));
    overflow: auto;
}

.table-tool-menu-trigger.active {
    color: var(--accent);
}

body[data-theme="light"] .table-tool-menu-panel {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.12);
}

.table-column-option,
.table-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    color: var(--text-soft);
    font-size: 0.78rem;
}

.table-column-option input,
.table-filter-option input {
    accent-color: var(--accent);
}

.table-filter-link {
    text-decoration: none;
    border-radius: 10px;
    padding: 7px 8px;
}

.table-filter-link:hover,
.table-filter-link.is-active {
    color: var(--accent);
    background: rgba(43, 179, 107, 0.12);
}

.table-column-option-master {
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
    color: var(--text);
}

body[data-theme="light"] .table-column-option-master {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.table-search {
    min-width: min(320px, 42vw);
    min-height: 34px;
    gap: 10px;
    padding: 0 0 8px;
    color: var(--text-muted);
}

.table-search svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.table-search input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    outline: none;
    padding: 0;
    font: inherit;
}

.table-search input::placeholder {
    color: var(--text-faint);
}

.table-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    max-height: clamp(360px, calc(100vh - var(--topbar-height) - 240px), 760px);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.028);
    isolation: isolate;
    scrollbar-gutter: stable;
    overscroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.table-scroll::before {
    content: "";
    display: none;
    position: absolute;
    inset: 0 0 auto 0;
    height: 52px;
    border-radius: 16px 16px 0 0;
    background: rgba(44, 53, 67, 0.96);
    pointer-events: none;
    z-index: 0;
}

body[data-theme="light"] .table-scroll {
    background: rgba(255, 255, 255, 0.98);
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

body[data-theme="light"] .table-scroll::before {
    background: rgba(208, 216, 228, 0.98);
}

.table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

body[data-theme="light"] .table-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
}

.data-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

body[data-theme="light"] .data-table {
    border-color: rgba(15, 23, 42, 0.14);
}

.data-table thead th {
    background: rgba(44, 53, 67, 0.96);
    color: var(--text-muted);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 13px 12px;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 12;
    backdrop-filter: blur(8px);
    box-shadow: none;
}

body[data-theme="light"] .data-table thead th {
    background: rgba(208, 216, 228, 0.98);
    box-shadow: none;
}

.data-table thead th:first-child {
    border-top-left-radius: 16px;
}

.data-table thead th:last-child {
    border-top-right-radius: 16px;
}

.table-head-cell {
    justify-content: space-between;
    gap: 10px;
}

.table-head-label {
    flex: 1;
}

.table-head-trigger {
    border: 0;
    background: transparent;
    color: var(--text-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.data-table thead th:hover .table-head-trigger,
.data-table thead th.is-filtered .table-head-trigger,
.table-head-trigger.is-active {
    color: var(--text);
}

.table-filter-popover {
    position: fixed;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 18, 0.98);
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.28);
    z-index: 60;
}

body[data-theme="light"] .table-filter-popover {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 28px rgba(15, 23, 42, 0.12);
}

.table-filter-popover-title {
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
}

.table-filter-popover-hint {
    margin: 4px 0 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.table-filter-popover-actions {
    gap: 10px;
    margin-bottom: 10px;
}

.table-popover-button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.table-popover-button:hover {
    color: var(--text);
}

.table-filter-list {
    max-height: min(320px, 42vh);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.table-filter-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.table-pagination,
.table-pagination-pages {
    display: flex;
    align-items: center;
}

.table-pagination {
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
}

.table-pagination-summary {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-align: right;
}

.table-pagination-pages {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.table-page-button {
    position: relative;
    min-height: 32px;
    padding: 0 2px 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.table-page-button:hover {
    color: var(--text);
}

.table-page-button.active {
    color: var(--text);
    font-weight: 800;
}

.table-page-button.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

body[data-theme="light"] .table-page-button.active::after {
    background: #0c1220;
}

.table-page-button[disabled] {
    opacity: 0.34;
    pointer-events: none;
}

.table-page-gap {
    color: var(--text-faint);
    font-size: 0.8rem;
    font-weight: 700;
}

.data-table tbody td {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-size: 0.79rem;
    line-height: 1.45;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.028);
}

.data-table tbody tr:first-child td {
    border-top: 0;
}

body[data-theme="light"] .data-table tbody td {
    border-top-color: rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-soft);
}

body[data-theme="light"] .data-table tbody tr:first-child td {
    border-top: 0;
}

.turnover-table {
    min-width: 820px;
    table-layout: fixed;
}

.turnover-table thead th,
.turnover-table tbody td {
    border-left: 1px solid rgba(255, 255, 255, 0.055);
}

.turnover-table thead th:first-child,
.turnover-table tbody td:first-child {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    border-left: 0;
}

.turnover-table thead th:nth-child(2),
.turnover-table tbody td:nth-child(2) {
    width: 148px;
    min-width: 148px;
}

.turnover-table:not(.turnover-detail-table) thead th:nth-child(n+3),
.turnover-table:not(.turnover-detail-table) tbody td:nth-child(n+3) {
    text-align: center;
}

.turnover-expense-year-table {
    min-width: 960px;
    table-layout: auto;
}

.turnover-expense-year-table thead th:first-child,
.turnover-expense-year-table tbody td:first-child,
.turnover-region-year-table thead th:first-child,
.turnover-region-year-table tbody td:first-child {
    width: 148px;
    min-width: 148px;
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
    text-align: left;
    white-space: nowrap;
}

.turnover-expense-year-table thead th:nth-child(n+2),
.turnover-expense-year-table tbody td:nth-child(n+2) {
    min-width: 138px;
    text-align: center;
}

.finance-turnover-road {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-turnover-road-separator {
    color: #38bdf8;
    font-weight: 700;
    opacity: 0.9;
}

.turnover-table thead th {
    box-shadow: none;
}

body[data-theme="light"] .turnover-table thead th,
body[data-theme="light"] .turnover-table tbody td {
    border-left-color: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .turnover-table thead th:first-child,
body[data-theme="light"] .turnover-table tbody td:first-child {
    border-left: 0;
}

.turnover-detail-table {
    min-width: 1420px;
    table-layout: auto;
}

.turnover-detail-item {
    display: grid;
    gap: 5px;
    min-width: 130px;
}

.turnover-detail-item strong {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.25;
}

.turnover-detail-item span {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.2;
}

.warehouse-bonus-detail-item {
    min-width: 150px;
}

.turnover-party-cell {
    min-width: 170px;
    white-space: normal;
    vertical-align: top;
}

.turnover-detail-table .turnover-party-cell {
    min-width: 190px;
}

.turnover-party-main {
    font-weight: 800;
    color: var(--text);
}

.turnover-party-meta,
.turnover-party-note {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.turnover-party-note {
    max-width: 360px;
}

.warehouse-bonus-note-latest {
    color: var(--text);
}

.warehouse-bonus-note-latest span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.warehouse-bonus-note-form textarea.employee-input {
    min-width: 180px;
}

.warehouse-bonus-note-cell {
    min-width: 210px;
    vertical-align: top;
}

.turnover-media-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.turnover-media-row.warehouse-stage-artifacts {
    gap: 3px;
    margin-top: 7px;
}

.turnover-detail-table .turnover-media-row {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    min-width: 127px;
    width: max-content;
    max-width: none;
    height: auto;
    white-space: nowrap;
}

.turnover-detail-table .turnover-media-row.warehouse-stage-artifacts {
    height: 30px;
}

.turnover-detail-table .turnover-media-row .media-cell-button {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.turnover-detail-table .turnover-media-row .media-cell-button i {
    width: 22px;
    height: 22px;
}

.turnover-detail-table .turnover-media-row .media-cell-button i svg {
    width: 22px;
    height: 22px;
}

.cash-turnover-note-cell {
    min-width: 220px;
}

.accounting-overview-ledger-table {
	min-width: 1780px;
	table-layout: fixed;
	--accounting-overview-day-width: 32px;
	--accounting-overview-data-width: calc((1780px - var(--accounting-overview-day-width)) / 11);
}

.accounting-overview-ledger-table thead th,
.accounting-overview-ledger-table tbody td {
	width: var(--accounting-overview-data-width);
	min-width: var(--accounting-overview-data-width);
	max-width: var(--accounting-overview-data-width);
	padding: 8px 10px;
	line-height: 1.22;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
}

.accounting-overview-ledger-table thead th:first-child,
.accounting-overview-ledger-table tbody td:first-child {
	width: var(--accounting-overview-day-width);
	min-width: var(--accounting-overview-day-width);
	max-width: var(--accounting-overview-day-width);
	padding-left: 4px;
	padding-right: 4px;
}

.accounting-overview-ledger-table .turnover-party-cell,
.accounting-overview-ledger-table .accounting-dual-amount-cell,
.accounting-overview-ledger-table .accounting-document-cell,
.accounting-overview-ledger-table .cash-turnover-note-cell {
	min-width: 0;
}

.accounting-overview-ledger-table .accounting-dual-amount {
	gap: 2px;
}

.accounting-overview-ledger-table .accounting-document-status {
	gap: 2px;
	line-height: 1.15;
}

.accounting-overview-ledger-table .accounting-document-cell,
.accounting-overview-ledger-table .accounting-document-status,
.accounting-overview-ledger-table .accounting-document-status strong,
.accounting-overview-ledger-table .accounting-document-status .table-link,
.accounting-overview-ledger-table .accounting-document-status span {
	white-space: nowrap;
}

.accounting-overview-ledger-table .cash-turnover-note-cell,
.accounting-overview-ledger-table .cash-turnover-note-cell * {
	max-width: 100%;
}

.accounting-overview-ledger-table .cash-turnover-note-form textarea.employee-input {
	min-height: 42px;
}

.accounting-dual-amount-cell {
	min-width: 128px;
	vertical-align: middle;
}

.cash-dual-amount-cell {
	min-width: 128px;
	vertical-align: middle;
}

.table-cell-link {
	display: block;
	text-decoration: none;
}

.accounting-dual-amount {
	display: grid;
	gap: 3px;
	line-height: 1.16;
	white-space: nowrap;
	justify-items: center;
	text-align: center;
}

.accounting-dual-amount-local {
	color: #13783a;
	font-size: 0.82rem;
	font-weight: 700;
}

.accounting-dual-amount-usd {
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 700;
}

.cash-dual-amount {
	display: grid;
	gap: 3px;
	line-height: 1.16;
	white-space: nowrap;
	justify-items: center;
	text-align: center;
}

.cash-dual-amount-usd {
	color: #13783a;
	font-size: 0.82rem;
	font-weight: 700;
}

.cash-dual-amount-local {
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 700;
}

.investor-company-turnover-cell-wrap {
    --investor-turnover-percent-width: 52px;
    min-width: 270px;
    padding: 0 !important;
    vertical-align: middle;
    border-left: 1px solid rgba(255, 255, 255, 0.055);
}

.investor-company-turnover-table thead th:nth-child(n+2) {
    text-align: center;
    line-height: 1.25;
}

.investor-company-turnover-table .table-cell-link {
    display: block;
    width: 100%;
}

.investor-company-turnover-group-head {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    font-weight: 800;
}

.investor-company-turnover-subhead {
    min-width: 126px;
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0;
    padding-left: 9px;
    padding-right: 35px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.investor-company-turnover-table thead th.investor-company-turnover-subhead {
    text-align: center;
}

.investor-company-turnover-country-table .investor-company-turnover-subhead {
    padding-left: 28px;
    padding-right: 16px;
}

.investor-company-turnover-subhead-expense {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    color: #d96b6b;
}

.investor-company-turnover-subhead-profit {
    border-left: 1px solid rgba(255, 255, 255, 0.045);
    color: #43a76a;
}

.investor-company-turnover-total-head,
.investor-company-turnover-total-cell {
    background: rgba(48, 145, 96, 0.08);
}

body[data-theme="light"] .investor-company-turnover-total-head,
body[data-theme="light"] .investor-company-turnover-total-cell {
    background: rgba(17, 126, 73, 0.08);
}

body[data-theme="light"] .investor-company-turnover-cell-wrap,
body[data-theme="light"] .investor-company-turnover-group-head,
body[data-theme="light"] .investor-company-turnover-subhead-expense {
    border-left-color: rgba(15, 23, 42, 0.09);
}

body[data-theme="light"] .investor-company-turnover-subhead-profit {
    border-left-color: rgba(15, 23, 42, 0.065);
}

.investor-company-turnover-cell {
    display: grid;
    grid-template-columns: minmax(128px, 1fr) minmax(128px, 1fr);
    gap: 0;
    align-items: center;
}

.investor-company-turnover-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--investor-turnover-percent-width, 52px);
    gap: 6px;
    align-items: center;
    line-height: 1.12;
    min-height: 58px;
    padding: 10px 9px;
    text-align: right;
    white-space: nowrap;
}

a.investor-company-turnover-side {
    color: inherit;
    text-decoration: none;
    transition: background 0.16s ease;
}

a.investor-company-turnover-side:hover {
    background: rgba(48, 145, 96, 0.08);
}

body[data-theme="light"] a.investor-company-turnover-side:hover {
    background: rgba(17, 126, 73, 0.08);
}

.investor-company-turnover-subproduct-table .investor-company-turnover-side {
    grid-template-columns: max-content var(--investor-turnover-percent-width, 52px);
    justify-content: center;
}

.investor-company-turnover-subproduct-table .investor-company-turnover-amount {
    width: max-content;
    min-width: 86px;
}

.investor-company-turnover-profit {
    border-left: 1px solid rgba(255, 255, 255, 0.045);
}

body[data-theme="light"] .investor-company-turnover-profit {
    border-left-color: rgba(15, 23, 42, 0.065);
}

.investor-company-turnover-amount {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.investor-company-turnover-percent {
    width: var(--investor-turnover-percent-width, 52px);
    min-width: var(--investor-turnover-percent-width, 52px);
    border-left: 1px solid rgba(255, 255, 255, 0.13);
    padding-left: 6px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: left;
}

body[data-theme="light"] .investor-company-turnover-percent {
    border-left-color: rgba(15, 23, 42, 0.16);
}

.investor-company-turnover-expense .investor-company-turnover-usd {
    color: #c43e3e;
    font-weight: 800;
}

.investor-company-turnover-expense .investor-company-turnover-local {
    color: #d96b6b;
    font-size: 0.78rem;
    font-weight: 700;
}

.investor-company-turnover-profit .investor-company-turnover-usd {
    color: #148a49;
    font-weight: 800;
}

.investor-company-turnover-profit .investor-company-turnover-local {
    color: #43a76a;
    font-size: 0.78rem;
    font-weight: 700;
}

.turnover-outflow-split {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	white-space: nowrap;
}

.turnover-outflow-split a {
	text-decoration: none;
}

.turnover-outflow-actual {
	color: inherit;
	font-weight: 700;
}

.turnover-outflow-separator {
	color: var(--text-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

.turnover-outflow-pending {
	color: var(--warning);
	font-size: 0.82rem;
	font-weight: 800;
}

.turnover-expense-unresolved {
	background: rgba(210, 62, 62, 0.16) !important;
	box-shadow: none;
}

body[data-theme="light"] .turnover-expense-unresolved {
	background: rgba(210, 62, 62, 0.14) !important;
}

.accounting-turnover-outflow-split {
	width: 100%;
}

.accounting-turnover-outflow-split .turnover-outflow-pending .accounting-dual-amount-local,
.accounting-turnover-outflow-split .turnover-outflow-pending .accounting-dual-amount-usd {
	color: var(--warning);
}

.table-date-filter-input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	font: inherit;
	padding: 8px 0;
	outline: none;
}

.table-date-filter-input:focus {
	border-bottom-color: var(--accent);
}

.accounting-document-cell {
	min-width: 118px;
	vertical-align: top;
}

.data-table tbody td.accounting-document-cell.cell-danger,
.data-table tbody td.accounting-document-cell.cell-positive {
	border-radius: 8px;
	box-shadow: none;
}

.data-table tbody td.accounting-document-cell.cell-danger {
	color: #7f1d1d;
}

.data-table tbody td.accounting-document-cell.cell-positive {
	color: #14532d;
}

body[data-theme="light"] .data-table tbody td.accounting-document-cell.cell-danger {
	color: #7f1d1d;
}

body[data-theme="light"] .data-table tbody td.accounting-document-cell.cell-positive {
	color: #14532d;
}

body:not([data-theme="light"]) .data-table tbody td.accounting-document-cell.cell-danger {
	color: #fee2e2;
}

body:not([data-theme="light"]) .data-table tbody td.accounting-document-cell.cell-positive {
	color: #dcfce7;
}

body:not([data-theme="light"]) .accounting-dual-amount-local {
	color: #bbf7d0;
}

.settings-price-forms {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0 0 16px;
}

.settings-price-form {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0 0 6px;
}

body[data-theme="light"] .settings-price-form {
	background: transparent;
	border-bottom-color: rgba(15, 23, 42, 0.12);
}

.settings-price-line-form {
	--price-form-accent: var(--accent);
	border-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

.settings-price-form-head {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin: 0 0 12px;
}

.settings-price-form h3 {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text);
}

.settings-price-form-head span {
	color: var(--text-muted);
	font-size: 0.74rem;
	line-height: 1.35;
	text-align: right;
}

.settings-price-form-layout {
	align-items: center;
	display: grid;
	gap: clamp(18px, 2.2vw, 34px);
	grid-template-columns: minmax(310px, 340px) minmax(320px, 500px) minmax(0, 1fr);
	justify-content: stretch;
}

.settings-price-form-fields {
	justify-self: start;
	min-width: 0;
	width: min(420px, 100%);
}

.settings-price-form-stack {
	display: grid;
	gap: 14px;
}

.settings-price-item-preview {
	align-self: center;
	display: grid;
	gap: 9px;
	justify-self: start;
	min-width: 0;
	width: min(340px, 100%);
}

.settings-price-item-preview-media {
	align-items: center;
	aspect-ratio: 1 / 1;
	border: 0;
	border-radius: 8px;
	display: grid;
	justify-items: center;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.settings-price-item-preview-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.settings-price-item-preview-fallback {
	align-items: center;
	color: var(--text);
	display: flex;
	font-size: 1.2rem;
	font-weight: 760;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.settings-price-dual-field {
	border: 0;
	display: grid;
	gap: 7px;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.settings-price-dual-field > legend {
	color: var(--text-muted);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	padding: 0;
}

.settings-price-dual-input {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-price-triple-input {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-price-dual-cell {
	align-items: baseline;
	border: 0.5px solid rgba(148, 163, 184, 0.22);
	border-radius: 8px;
	display: flex;
	gap: 8px;
	min-width: 0;
	padding: 7px 10px 8px;
	transition: border-color 0.16s ease, color 0.16s ease;
}

body[data-theme="light"] .settings-price-dual-cell {
	border-color: rgba(15, 23, 42, 0.14);
}

.settings-price-dual-cell.is-active {
	border-color: rgba(31, 185, 255, 0.72);
	box-shadow: none;
}

body[data-theme="light"] .settings-price-dual-cell.is-active {
	border-color: rgba(31, 185, 255, 0.9);
	box-shadow: none;
}

.settings-price-dual-cell > span {
	color: var(--text-muted);
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 560;
	line-height: 1.1;
	order: 2;
}

.settings-price-dual-cell.is-active > span {
	color: var(--price-form-accent, var(--accent));
}

.settings-price-markup-cell .settings-price-markup-caption {
	display: inline-block;
	max-width: 82px;
	opacity: 1;
	overflow: hidden;
	transition: max-width 0.16s ease, opacity 0.16s ease;
	white-space: nowrap;
}

.settings-price-markup-cell:focus-within .settings-price-markup-caption,
.settings-price-markup-cell.is-active:focus-within .settings-price-markup-caption {
	max-width: 0;
	opacity: 0;
}

.settings-price-dual-cell.is-invalid {
	border-color: var(--danger) !important;
	animation: settingsPriceAmountShake 0.22s ease;
}

.settings-price-dual-cell.is-invalid > span {
	color: var(--danger);
}

.settings-price-line-form .module-form-field.is-invalid select,
.settings-price-line-form .module-form-field.is-invalid input,
.settings-price-line-form .module-form-field.is-invalid .settings-price-item-pill,
.settings-price-line-form .module-form-field.is-invalid .settings-price-datetime-trigger {
	border-bottom-color: var(--danger) !important;
	animation: settingsPriceAmountShake 0.22s ease;
}

.settings-price-line-form .module-form-field.is-invalid > span {
	color: var(--danger);
}

.settings-price-cost-warning {
	color: var(--warning);
}

.settings-price-form .settings-price-dual-cell input {
	border: 0;
	flex: 1 1 auto;
	font-size: 0.98rem;
	line-height: 1.1;
	min-height: 28px;
	min-width: 0;
	order: 1;
	padding: 0;
	text-align: right;
}

.settings-price-form .settings-price-dual-cell input:focus {
	border: 0;
}

.settings-price-form .settings-price-dual-cell input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.settings-price-form .settings-price-dual-cell input[type="number"]::-webkit-inner-spin-button,
.settings-price-form .settings-price-dual-cell input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.settings-price-item-preview-copy {
	display: grid;
	gap: 3px;
	min-width: 0;
	text-align: center;
}

.settings-price-item-preview-copy strong {
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 720;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-price-item-preview-copy span {
	color: var(--text-muted);
	font-size: 0.72rem;
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-price-form .module-form-grid {
	align-items: end;
	display: grid;
	gap: 14px 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-price-form .module-form-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.settings-price-field-hint,
.settings-price-cost-stack-note {
	color: var(--text-muted);
	font-size: 0.82rem;
	line-height: 1.35;
}

.settings-price-cost-stack {
	margin-top: 14px;
}

.settings-price-cost-stack h3 {
	color: var(--text);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 10px;
}

.price-list-cost-stack-table {
	min-width: 980px;
}

.settings-price-form .module-form-field > span,
.settings-price-form .settings-price-segment-field > legend {
	color: var(--text-muted);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	padding: 0;
}

.settings-price-form input,
.settings-price-form select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.32);
	border-radius: 0;
	color: var(--text);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 500;
	min-height: 40px;
	outline: none;
	padding: 8px 0;
	width: 100%;
}

.settings-price-form select {
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(244, 247, 255, 0.72) 50%),
		linear-gradient(135deg, rgba(244, 247, 255, 0.72) 50%, transparent 50%);
	background-position:
		calc(100% - 13px) calc(50% - 2px),
		calc(100% - 8px) calc(50% - 2px);
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	color-scheme: dark;
	padding-right: 30px;
}

body[data-theme="light"] .settings-price-form input,
body[data-theme="light"] .settings-price-form select {
	border-bottom-color: rgba(15, 23, 42, 0.14);
	color-scheme: light;
}

body[data-theme="light"] .settings-price-form select {
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.66) 50%),
		linear-gradient(135deg, rgba(15, 23, 42, 0.66) 50%, transparent 50%);
}

.settings-price-form select option {
	background: #11151c;
	color: rgba(244, 247, 255, 0.96);
}

body[data-theme="light"] .settings-price-form select option {
	background: #ffffff;
	color: #0f172a;
}

.settings-price-form input:focus,
.settings-price-form select:focus {
	border-bottom-color: var(--price-form-accent, var(--accent));
	box-shadow: none;
}

.settings-price-line-form input,
.settings-price-line-form select {
	caret-color: var(--price-form-accent, var(--accent));
}

.settings-price-datetime-control {
	display: block;
	position: relative;
}

.settings-price-datetime-control input {
	padding-right: 42px;
}

.settings-price-datetime-control input[type="hidden"] {
	display: none;
}

.settings-price-datetime-control.is-enhanced {
	display: grid;
	min-width: 0;
}

.settings-price-datetime-control.is-enhanced input {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 50%;
	width: 1px;
}

.settings-price-datetime-trigger {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.32);
	color: var(--text);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 500;
	justify-content: space-between;
	min-height: 40px;
	padding: 8px 0;
	text-align: left;
	width: 100%;
}

body[data-theme="light"] .settings-price-datetime-trigger {
	border-bottom-color: rgba(15, 23, 42, 0.14);
}

.settings-price-datetime-trigger:focus-visible,
.settings-price-datetime-control.is-open .settings-price-datetime-trigger {
	border-bottom-color: var(--price-form-accent, var(--accent));
	outline: none;
}

.settings-price-datetime-control input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	height: 34px;
	opacity: 0;
	position: absolute;
	right: 0;
	width: 34px;
	z-index: 2;
}

.settings-price-datetime-icon {
	align-items: center;
	bottom: 6px;
	color: var(--text-muted);
	display: inline-flex;
	height: 28px;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	right: 0;
	width: 28px;
}

.settings-price-datetime-icon svg {
	display: block;
	height: 20px;
	width: 20px;
}

.settings-price-datetime-trigger .settings-price-datetime-icon {
	bottom: auto;
	color: var(--text-muted);
	flex: 0 0 auto;
	height: 22px;
	position: static;
	right: auto;
	width: 22px;
}

.settings-price-datetime-trigger:hover .settings-price-datetime-icon,
.settings-price-datetime-trigger:focus-visible .settings-price-datetime-icon,
.settings-price-datetime-control.is-open .settings-price-datetime-icon {
	color: var(--price-form-accent, var(--accent));
}

.settings-price-datetime-control:focus-within input {
	border-bottom-color: var(--price-form-accent, var(--accent));
}

.settings-price-datetime-control:focus-within .settings-price-datetime-icon,
.settings-price-datetime-control:hover .settings-price-datetime-icon {
	color: var(--price-form-accent, var(--accent));
}

.settings-price-datetime-popover {
	background: rgba(10, 15, 22, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
	color: var(--text);
	display: grid;
	gap: 10px;
	padding: 12px;
	position: fixed;
	z-index: 80;
}

body[data-theme="light"] .settings-price-datetime-popover {
	background: rgba(255, 255, 255, 0.99);
	border-color: rgba(15, 23, 42, 0.1);
	box-shadow: 0 18px 30px rgba(15, 23, 42, 0.14);
}

.settings-price-calendar-head,
.settings-price-calendar-weekdays,
.settings-price-calendar-grid,
.settings-price-calendar-time,
.settings-price-calendar-actions {
	display: grid;
	gap: 6px;
}

.settings-price-calendar-head {
	align-items: center;
	grid-template-columns: 32px minmax(0, 1fr) 32px;
}

.settings-price-calendar-head strong {
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 750;
	text-align: center;
	text-transform: capitalize;
}

.settings-price-calendar-nav,
.settings-price-calendar-day,
.settings-price-calendar-actions button {
	background: transparent;
	border: 0;
	color: var(--text-muted);
	cursor: pointer;
	font: inherit;
}

.settings-price-calendar-nav {
	border-radius: 8px;
	font-size: 1.28rem;
	height: 32px;
	line-height: 1;
}

.settings-price-calendar-nav:hover,
.settings-price-calendar-nav:focus-visible,
.settings-price-calendar-actions button:hover,
.settings-price-calendar-actions button:focus-visible {
	background: rgba(31, 185, 255, 0.1);
	color: var(--price-form-accent, var(--accent));
	outline: none;
}

.settings-price-calendar-weekdays,
.settings-price-calendar-grid {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.settings-price-calendar-weekdays span {
	color: var(--text-muted);
	font-size: 0.68rem;
	font-weight: 700;
	text-align: center;
}

.settings-price-calendar-day,
.settings-price-calendar-empty {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	display: grid;
	font-size: 0.78rem;
	font-weight: 650;
	place-items: center;
}

.settings-price-calendar-day:hover,
.settings-price-calendar-day:focus-visible {
	background: rgba(31, 185, 255, 0.1);
	color: var(--text);
	outline: none;
}

.settings-price-calendar-day.is-today {
	color: var(--price-form-accent, var(--accent));
}

.settings-price-calendar-day.is-selected {
	background: rgba(31, 185, 255, 0.16);
	color: var(--price-form-accent, var(--accent));
}

.settings-price-calendar-time {
	align-items: center;
	grid-template-columns: minmax(0, 1fr) 72px 72px;
}

.settings-price-calendar-time span {
	color: var(--text-muted);
	font-size: 0.76rem;
	font-weight: 700;
}

.settings-price-calendar-time select {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.32);
	color: var(--text);
	font: inherit;
	font-size: 0.78rem;
	min-height: 32px;
	outline: none;
	text-align: center;
}

body[data-theme="light"] .settings-price-calendar-time select {
	border-bottom-color: rgba(15, 23, 42, 0.14);
}

.settings-price-calendar-time select:focus {
	border-bottom-color: var(--price-form-accent, var(--accent));
}

.settings-price-calendar-actions {
	grid-template-columns: 1fr 1fr;
}

.settings-price-calendar-actions button {
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	min-height: 34px;
}

.settings-price-segment-field {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.settings-price-segment {
	background: transparent;
	border: 0;
	border-radius: 0;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-top: 7px;
	overflow: hidden;
	padding: 0;
}

body[data-theme="light"] .settings-price-segment {
	background: transparent;
	border-color: transparent;
}

.settings-price-segment label {
	cursor: pointer;
	min-width: 0;
}

.settings-price-segment input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.settings-price-segment span {
	align-items: center;
	border-radius: 6px;
	border-bottom: 1px solid transparent;
	color: var(--text-muted);
	display: flex;
	font-size: 0.78rem;
	font-weight: 700;
	justify-content: center;
	min-height: 32px;
	padding: 0 10px;
	transition: border-color 0.16s ease, color 0.16s ease;
	white-space: nowrap;
}

.settings-price-segment input:checked + span {
	background: transparent;
	border-bottom-color: var(--price-form-accent, var(--accent));
	color: var(--price-form-accent, var(--accent));
}

body[data-theme="light"] .settings-price-segment input:checked + span {
	background: transparent;
	border-bottom-color: var(--price-form-accent, var(--accent));
	color: var(--price-form-accent, var(--accent));
}

.settings-price-segment input:focus-visible + span {
	box-shadow: none;
	color: var(--price-form-accent, var(--accent));
}

.settings-price-item-pill {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.32);
	border-radius: 0;
	display: flex;
	gap: 8px;
	min-height: 40px;
	padding: 8px 0;
}

body[data-theme="light"] .settings-price-item-pill {
	background: transparent;
	border-color: rgba(15, 23, 42, 0.14);
}

.settings-price-item-pill strong {
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-price-item-pill small {
	color: var(--text-muted);
	font-size: 0.74rem;
	font-weight: 650;
	white-space: nowrap;
}

.settings-price-form .settings-role-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

.settings-price-form .settings-role-actions .btn {
	min-height: 0;
	padding: 0;
}

.settings-price-text-action,
.settings-price-form .settings-role-actions .settings-price-text-action {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 750;
	line-height: 1.2;
	min-height: 0;
	padding: 0;
	text-decoration: none;
	text-underline-offset: 4px;
}

.settings-price-text-action:hover,
.settings-price-text-action:focus-visible {
	background: transparent;
	color: var(--text);
	text-decoration: underline;
}

.settings-price-line-form .settings-role-actions .settings-price-text-action {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--positive);
	justify-content: center;
	min-height: 40px;
	padding: 0 14px;
	width: 100%;
}

body[data-theme="light"] .settings-price-line-form .settings-role-actions .settings-price-text-action {
	border-color: transparent;
	color: var(--positive);
}

.settings-price-line-form .settings-role-actions .settings-price-text-action:hover,
.settings-price-line-form .settings-role-actions .settings-price-text-action:focus-visible {
	background: rgba(83, 213, 123, 0.18);
	border-color: transparent;
	color: var(--positive);
	text-decoration: none;
}

.settings-price-forms > .settings-role-save-state {
	grid-column: 1 / -1;
	margin: 0;
}

.settings-price-success-overlay {
	align-items: center;
	background: rgba(6, 10, 16, 0.18);
	display: grid;
	inset: 0;
	justify-items: center;
	pointer-events: none;
	position: fixed;
	z-index: 3000;
}

.settings-price-success-card {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	display: grid;
	gap: 2px;
	justify-items: center;
	min-width: 0;
	padding: 0;
	transform: translateY(-4px);
	animation: settingsPriceSuccessCard 2.6s ease forwards;
}

body[data-theme="light"] .settings-price-success-card {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.settings-price-success-animation {
	display: grid;
	height: 222px;
	place-items: center;
	width: 222px;
}

.settings-price-success-animation svg {
	display: block;
	height: 100%;
	width: 100%;
}

.settings-price-success-card strong {
	color: var(--positive);
	font-size: 0.88rem;
	font-weight: 760;
	line-height: 1.2;
}

.settings-price-success-fallback {
	border: 1px solid rgba(83, 213, 123, 0.42);
	border-radius: 50%;
	display: grid;
	height: 74px;
	place-items: center;
	width: 74px;
}

.settings-price-success-fallback::before {
	border-bottom: 3px solid var(--positive);
	border-right: 3px solid var(--positive);
	content: "";
	height: 28px;
	transform: rotate(45deg) translate(-2px, -3px);
	width: 15px;
}

@keyframes settingsPriceSuccessCard {
	0% {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
	12%, 78% {
		opacity: 1;
		transform: translateY(-4px) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px) scale(0.99);
	}
}

@keyframes settingsPriceAmountShake {
	0%, 100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-3px);
	}
	50% {
		transform: translateX(3px);
	}
	75% {
		transform: translateX(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.settings-price-success-card {
		animation: none;
	}

	.settings-price-dual-cell.is-invalid {
		animation: none;
	}

	.settings-price-line-form .module-form-field.is-invalid select,
	.settings-price-line-form .module-form-field.is-invalid input,
	.settings-price-line-form .module-form-field.is-invalid .settings-price-item-pill,
	.settings-price-line-form .module-form-field.is-invalid .settings-price-datetime-trigger {
		animation: none;
	}
}

@media (max-width: 760px) {
	.settings-price-triple-input {
		grid-template-columns: 1fr;
	}
}

.settings-customer-discount-table-head {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: flex-start;
	margin: 0 0 12px;
	min-width: 0;
}

.settings-customer-discount-table-head h3 {
	color: var(--text-muted);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.55;
	margin: 0;
}

.settings-customer-discount-list-action {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--positive);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.84rem;
	font-weight: 700;
	gap: 7px;
	justify-content: center;
	line-height: 1;
	min-height: 38px;
	padding: 0 18px;
	text-align: center;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
	white-space: nowrap;
}

.settings-customer-discount-list-plus {
	align-items: center;
	color: var(--positive);
	display: inline-flex;
	font-size: 1.08rem;
	font-weight: 800;
	height: 16px;
	justify-content: center;
	line-height: 1;
	width: 16px;
}

.settings-customer-discount-list-action:hover,
.settings-customer-discount-list-action:focus-visible {
	background: rgba(83, 213, 123, 0.16);
	color: var(--positive);
	outline: none;
}

body[data-theme="light"] .settings-customer-discount-list-action:hover,
body[data-theme="light"] .settings-customer-discount-list-action:focus-visible {
	background: rgba(16, 185, 129, 0.12);
}

.settings-utility-save-action {
	width: fit-content;
}

.settings-current-discounts h4 {
	color: var(--text-muted);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0;
}

.table-scroll:has(.settings-customer-discount-add-customers-table) {
	max-height: clamp(520px, calc(100vh - var(--topbar-height) - 168px), 860px);
}

.settings-customer-discount-add-customers-table .table-head-cell {
	gap: 5px;
	justify-content: flex-start;
}

.settings-customer-discount-add-customers-table .table-head-label {
	flex: 0 1 auto;
}

.settings-customer-discount-add-customers-table .table-head-trigger {
	color: var(--text-muted);
	flex: 0 0 auto;
}

.settings-customer-discount-add-customers-table .table-head-trigger:hover,
.settings-customer-discount-add-customers-table .table-head-trigger.is-active {
	color: var(--accent);
}

.table-column-search-input {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.32);
	color: var(--text);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 500;
	min-height: 38px;
	outline: none;
	padding: 8px 0;
	width: 100%;
}

.table-column-search-input:focus {
	border-bottom-color: rgba(107, 220, 255, 0.9);
}

body[data-theme="light"] .table-column-search-input {
	border-bottom-color: rgba(15, 23, 42, 0.18);
}

.settings-customer-discount-detail {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.settings-customer-discount-identity {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	display: grid;
	padding: 16px;
}

body[data-theme="light"] .settings-customer-discount-identity {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(15, 23, 42, 0.08);
}

.settings-current-discounts-head {
	color: var(--text);
	font-size: 0.86rem;
	font-weight: 760;
	letter-spacing: 0;
	padding-bottom: 0;
}

.settings-current-discounts-head {
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.24);
	padding-bottom: 8px;
}

body[data-theme="light"] .settings-current-discounts-head {
	border-bottom-color: rgba(15, 23, 42, 0.14);
}

.settings-customer-discount-identity-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.settings-customer-discount-identity-grid span {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.settings-customer-discount-identity-grid small {
	color: var(--text-muted);
	font-size: 0.68rem;
	font-weight: 700;
}

.settings-customer-discount-identity-grid strong {
	color: var(--text);
	font-size: 0.8rem;
	font-weight: 650;
	min-width: 0;
	overflow-wrap: anywhere;
	white-space: normal;
}

.settings-customer-discount-identity span,
.settings-customer-discount-identity em,
.settings-current-discounts p,
.settings-current-discount-row em {
	color: var(--text-muted);
	font-size: 0.76rem;
	font-style: normal;
}

.settings-current-discounts {
	display: grid;
	gap: 12px;
}

.settings-current-discounts-table-wrap {
	overflow-x: auto;
}

.settings-current-discounts-table {
	border-collapse: collapse;
	min-width: 760px;
	width: 100%;
}

.settings-current-discounts-table th,
.settings-current-discounts-table td {
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.16);
	font-size: 0.76rem;
	padding: 9px 10px;
	text-align: left;
	vertical-align: middle;
}

body[data-theme="light"] .settings-current-discounts-table th,
body[data-theme="light"] .settings-current-discounts-table td {
	border-bottom-color: rgba(15, 23, 42, 0.1);
}

.settings-current-discounts-table th {
	color: var(--text-muted);
	font-weight: 760;
}

.settings-current-discounts-empty {
	color: var(--text-muted);
	text-align: center;
}

.customer-discount-value-cell {
	--customer-discount-percent-col: 54px;
	--customer-discount-divider-gap: 10px;
	--customer-discount-divider-axis: calc(var(--customer-discount-percent-col) + var(--customer-discount-divider-gap) + 0.5px);
	min-width: 238px;
	vertical-align: middle;
}

.customer-discount-value {
	align-items: center;
	display: inline-grid;
	gap: var(--customer-discount-divider-gap);
	grid-template-columns: var(--customer-discount-percent-col) 1px minmax(118px, auto);
	line-height: 1.1;
	min-width: 210px;
}

.customer-discount-history-table thead th:nth-child(3) .table-head-cell {
	justify-content: flex-start;
	min-width: 210px;
}

.customer-discount-history-table thead th:nth-child(3) .table-head-label {
	flex: 0 0 129px;
	text-align: center;
}

.customer-discount-history-table td.customer-discount-status-cell {
	background: transparent !important;
	font-weight: 700;
	white-space: nowrap;
}

.customer-discount-percent {
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 420;
	justify-self: end;
	text-align: right;
	white-space: nowrap;
}

.customer-discount-divider {
	align-self: stretch;
	background: rgba(148, 163, 184, 0.24);
	min-height: 36px;
	width: 0.5px;
}

body[data-theme="light"] .customer-discount-divider {
	background: rgba(15, 23, 42, 0.16);
}

.customer-discount-amount .accounting-dual-amount {
	justify-items: start;
	text-align: left;
}

.settings-discount-stop-form {
	margin: 0;
}

.settings-discount-stop-action {
	background: transparent;
	border: 0;
	color: var(--danger);
	cursor: pointer;
	font: inherit;
	font-size: 0.76rem;
	font-weight: 650;
	padding: 0;
}

.settings-discount-stop-action:hover,
.settings-discount-stop-action:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.settings-discount-stop-modal {
	align-items: center;
	display: grid;
	inset: 0;
	justify-items: center;
	position: fixed;
	z-index: 3200;
}

.settings-discount-stop-backdrop {
	background: rgba(6, 10, 16, 0.36);
	border: 0;
	cursor: default;
	inset: 0;
	position: absolute;
}

.settings-discount-stop-card {
	background: rgba(11, 16, 24, 0.98);
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: 8px;
	box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
	display: grid;
	gap: 18px;
	max-width: min(390px, calc(100vw - 32px));
	padding: 22px;
	position: relative;
	width: 100%;
}

.settings-discount-stop-close {
	background: transparent;
	border: 0;
	color: var(--danger);
	cursor: pointer;
	font: inherit;
	font-size: 1.22rem;
	font-weight: 620;
	line-height: 1;
	padding: 2px;
	position: absolute;
	right: 10px;
	top: 9px;
}

.settings-discount-stop-close:hover,
.settings-discount-stop-close:focus-visible {
	background: transparent;
	color: var(--danger);
	outline: none;
}

body[data-theme="light"] .settings-discount-stop-card {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(15, 23, 42, 0.1);
	box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.settings-discount-stop-card p {
	color: var(--text);
	font-size: 0.92rem;
	font-weight: 620;
	line-height: 1.35;
	margin: 0;
	text-align: center;
}

.settings-discount-stop-actions {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
}

.settings-discount-stop-actions button {
	background: rgba(255, 255, 255, 0.03);
	border: 0;
	border-radius: 8px;
	color: var(--text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 720;
	min-height: 38px;
}

body[data-theme="light"] .settings-discount-stop-actions button {
	background: rgba(15, 23, 42, 0.04);
}

.settings-discount-stop-actions button:hover,
.settings-discount-stop-actions button:focus-visible {
	background: rgba(255, 255, 255, 0.03);
	color: var(--text-muted);
	outline: none;
}

body[data-theme="light"] .settings-discount-stop-actions button:hover,
body[data-theme="light"] .settings-discount-stop-actions button:focus-visible {
	background: rgba(15, 23, 42, 0.04);
	color: var(--text-muted);
}

.settings-customer-discount-form {
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

.settings-customer-discount-form-shell {
	display: grid;
	gap: 14px;
	margin-inline: auto;
	max-width: 980px;
	width: min(100%, 980px);
}

.settings-customer-discount-picker {
	position: relative;
}

.settings-customer-discount-picker-trigger {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid rgba(107, 220, 255, 0.54);
	color: var(--text);
	cursor: pointer;
	display: flex;
	font: inherit;
	justify-content: space-between;
	min-height: 42px;
	outline: none;
	padding: 8px 0;
	text-align: left;
	width: 100%;
}

body[data-theme="light"] .settings-customer-discount-picker-trigger {
	border-bottom-color: rgba(0, 132, 184, 0.5);
}

.settings-customer-discount-picker.is-open .settings-customer-discount-picker-trigger,
.settings-customer-discount-picker-trigger:focus-visible {
	border-bottom-color: var(--accent);
}

.settings-customer-discount-picker-trigger strong {
	font-size: 0.84rem;
	font-weight: 650;
}

.settings-customer-discount-picker-trigger small {
	color: var(--text-muted);
	font-size: 0.72rem;
	font-weight: 650;
}

.settings-customer-discount-picker-popover {
	background: #0a111c;
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 8px;
	box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34);
	display: grid;
	gap: 10px;
	grid-template-rows: minmax(0, 1fr) auto;
	left: 0;
	max-height: min(420px, calc(100vh - 220px));
	overflow: hidden;
	padding: 12px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 40;
}

.settings-customer-discount-picker-popover[hidden] {
	display: none !important;
}

body[data-theme="light"] .settings-customer-discount-picker-popover {
	background: #ffffff;
	border-color: rgba(15, 23, 42, 0.12);
	box-shadow: 0 22px 58px rgba(15, 23, 42, 0.14);
}

.settings-customer-discount-picker-search {
	display: grid;
	gap: 5px;
}

.settings-customer-discount-picker-search span {
	color: var(--text-muted);
	font-size: 0.68rem;
	font-weight: 700;
}

.settings-customer-discount-picker-search input {
	background: transparent;
	border: 0;
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.34);
	color: var(--text);
	font: inherit;
	outline: none;
	padding: 7px 0;
}

.settings-customer-discount-picker-search input:focus {
	border-bottom-color: var(--accent);
}

.settings-customer-discount-picker-list {
	display: grid;
	gap: 4px;
	max-height: 300px;
	overflow: auto;
	padding-right: 2px;
}

.settings-customer-discount-picker-option {
	align-items: center;
	border-radius: 8px;
	cursor: pointer;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 8px;
}

.settings-customer-discount-picker-option:hover,
.settings-customer-discount-picker-option.is-selected {
	background: rgba(83, 213, 123, 0.08);
}

.settings-customer-discount-picker-option input {
	appearance: none;
	accent-color: var(--positive);
	align-items: center;
	align-self: center;
	border: 0.5px solid rgba(148, 163, 184, 0.34);
	border-radius: 50%;
	box-sizing: border-box;
	display: grid;
	flex: 0 0 20px;
	height: 20px;
	justify-items: center;
	margin: 0;
	min-height: 20px;
	min-width: 20px;
	place-items: center;
	transform: translateY(-2px);
	width: 20px;
}

body[data-theme="light"] .settings-customer-discount-picker-option input {
	border-color: rgba(15, 23, 42, 0.22);
}

.settings-customer-discount-picker-option input::before {
	background: transparent;
	border: solid #07111f;
	border-width: 0 2px 2px 0;
	content: "";
	height: 8.5px;
	opacity: 0;
	transform: translateY(-1.5px) rotate(45deg) scale(0.72);
	transform-origin: center;
	transition: opacity 0.14s ease, transform 0.14s ease;
	width: 4.5px;
}

.settings-customer-discount-picker-option input:checked {
	background: var(--positive);
	border-color: var(--positive);
}

.settings-customer-discount-picker-option input:checked::before {
	opacity: 1;
	transform: translateY(-1.5px) rotate(45deg) scale(1);
}

.settings-customer-discount-picker-option span {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.settings-customer-discount-picker-option strong {
	color: var(--text);
	font-size: 0.8rem;
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-customer-discount-picker-option small,
.settings-customer-discount-picker-empty,
.settings-customer-discount-empty,
.settings-customer-discount-preview {
	color: var(--text-muted);
	font-size: 0.72rem;
	font-weight: 600;
}

.settings-customer-discount-preview.is-warning {
	color: var(--warning);
}

.settings-customer-discount-editor-list {
	display: grid;
	gap: 10px;
}

.settings-customer-discount-editor-row {
	border-bottom: 0.5px solid rgba(148, 163, 184, 0.18);
	display: grid;
	gap: 10px;
	padding: 0 0 12px;
}

body[data-theme="light"] .settings-customer-discount-editor-row {
	border-bottom-color: rgba(15, 23, 42, 0.1);
}

.settings-customer-discount-editor-head {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.settings-customer-discount-editor-head span {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.settings-customer-discount-editor-head strong {
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 720;
}

.settings-customer-discount-editor-head small {
	color: var(--text-muted);
	font-size: 0.72rem;
	font-weight: 600;
}

.settings-customer-discount-submit {
	background: transparent;
	border: 0;
	color: var(--positive);
	cursor: pointer;
	font: inherit;
	font-size: 0.76rem;
	font-weight: 720;
	padding: 0;
}

.settings-customer-discount-submit:hover,
.settings-customer-discount-submit:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.settings-bonus-program-editor-grid {
    align-items: end;
    grid-template-columns: minmax(86px, 108px) minmax(70px, 90px) minmax(210px, 1fr) minmax(220px, 1.2fr);
}

.settings-bonus-program-quantity-field {
    min-width: 0;
}

.settings-bonus-program-single-input {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
}

.settings-bonus-program-quantity-control {
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 7px 9px 8px;
    background: transparent;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.settings-bonus-program-quantity-control input {
    width: 100%;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
}

.settings-bonus-program-quantity-control:focus-within {
    border-color: rgba(31, 185, 255, 0.72);
}

body[data-theme="light"] .settings-bonus-program-quantity-control:focus-within {
    border-color: rgba(31, 185, 255, 0.9);
}

.settings-bonus-program-quantity-control:focus-within .settings-bonus-program-unit {
    color: var(--price-form-accent, var(--accent));
}

.settings-bonus-program-quantity-control .settings-bonus-program-unit {
    font-size: 0.72rem;
    font-weight: 650;
    max-width: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-customer-discount-remove {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--danger, #ef4444);
	cursor: pointer;
	display: inline-grid;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 500;
	height: 28px;
	justify-items: center;
	line-height: 1;
	padding: 0;
	width: 28px;
}

.settings-customer-discount-remove:hover,
.settings-customer-discount-remove:focus-visible {
	background: rgba(239, 68, 68, 0.12);
	outline: none;
}

.settings-customer-discount-editor-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(300px, 1.45fr) minmax(155px, 0.72fr) minmax(190px, 1fr);
}

.settings-customer-discount-triple-input {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-customer-discount-amount-field .settings-price-dual-cell {
	min-height: 42px;
}

.settings-customer-discount-amount-field .settings-price-dual-cell input {
	font-size: 0.92rem;
}

.settings-customer-discount-actions {
	justify-content: center;
}

.settings-customer-discount-form .settings-role-actions .settings-customer-discount-submit {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--positive);
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	text-decoration: none;
	width: 100%;
}

.settings-customer-discount-form .settings-role-actions .settings-customer-discount-submit:hover,
.settings-customer-discount-form .settings-role-actions .settings-customer-discount-submit:focus-visible {
	background: rgba(83, 213, 123, 0.18);
	color: var(--positive);
	text-decoration: none;
}

.settings-customer-discount-form .is-invalid {
	animation: settingsPriceAmountShake 0.28s ease;
}

.settings-customer-discount-form .is-invalid input,
.settings-customer-discount-form .is-invalid .settings-customer-discount-picker-trigger,
.settings-customer-discount-form .is-invalid .settings-price-dual-cell,
.settings-customer-discount-form .is-invalid .settings-bonus-program-quantity-control,
.settings-customer-discount-form .settings-bonus-program-quantity-control.is-invalid {
	border-bottom-color: var(--danger, #ef4444) !important;
	border-color: var(--danger, #ef4444) !important;
}

.item-price-shortcut .accounting-dual-amount {
	min-width: 0;
}

.item-price-shortcut {
	display: inline-grid;
	justify-items: center;
	width: 100%;
	color: inherit;
}

.item-price-shortcut:hover .accounting-dual-amount-local,
.item-price-shortcut:focus-visible .accounting-dual-amount-local {
	color: var(--positive);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

	.settings-price-form .module-form-grid {
		grid-template-columns: 1fr;
	}

	.settings-price-form-layout {
		grid-template-columns: 1fr;
	}

	.settings-price-item-preview {
		grid-template-columns: 88px minmax(0, 1fr);
		align-items: center;
	}

	.settings-price-item-preview-copy {
		text-align: left;
	}

	.settings-price-form-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.settings-price-form-head span {
		text-align: left;
	}

	.settings-customer-discount-identity-grid,
	.settings-customer-discount-editor-grid {
		grid-template-columns: 1fr;
	}

	.settings-customer-discount-table-head {
		align-items: stretch;
		flex-direction: column;
	}

	.settings-customer-discount-list-action {
		width: 100%;
	}

	.settings-customer-discount-picker-popover {
		position: static;
	}

	.settings-current-discounts-table {
		min-width: 640px;
	}
}

.accounting-document-status {
    display: grid;
    gap: 4px;
    line-height: 1.25;
}

.accounting-document-status strong,
.accounting-document-status .table-link {
    font-weight: 850;
}

.accounting-document-status span {
	color: currentColor;
	opacity: 0.78;
	font-size: 0.78rem;
}

.cash-turnover-note-form {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.cash-turnover-note-form textarea.employee-input {
    min-height: 54px;
    resize: vertical;
}

.cash-turnover-note-form .table-link {
    justify-self: start;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.turnover-media-dot {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

.turnover-media-dot.muted {
    opacity: 0.45;
}

body[data-theme="light"] .turnover-media-dot {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.035);
}

.test-access-banner,
.employee-test-access {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid rgba(241, 193, 96, 0.22);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-elevated) 90%, rgba(241, 193, 96, 0.12));
}

.test-access-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.test-access-banner strong,
.employee-test-access strong {
    display: block;
}

.test-access-banner span,
.employee-test-access span {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.employee-test-access-head,
.employee-test-access-current,
.employee-test-access-form {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.employee-test-access-current {
    justify-content: flex-start;
    margin: 12px 0;
}

.employee-test-access-form {
    margin-top: 12px;
}

.data-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.072);
}

body[data-theme="light"] .data-table tbody tr:hover td {
    background: rgba(15, 23, 42, 0.035);
}

.data-table tbody tr:hover td.turnover-expense-unresolved {
    background: rgba(210, 62, 62, 0.2) !important;
}

body[data-theme="light"] .data-table tbody tr:hover td.turnover-expense-unresolved {
    background: rgba(210, 62, 62, 0.18) !important;
}

.row-warning-soft td {
    background: rgba(101, 76, 26, 0.22);
}

body[data-theme="light"] .row-warning-soft td {
    background: rgba(241, 193, 96, 0.12);
}

.row-danger-soft td {
    background: rgba(93, 37, 42, 0.28);
}

body[data-theme="light"] .row-danger-soft td {
    background: rgba(255, 106, 106, 0.1);
}

.row-accent-soft td {
    background: rgba(18, 75, 99, 0.24);
}

body[data-theme="light"] .row-accent-soft td {
    background: rgba(31, 185, 255, 0.08);
}

.client-ledger-row-money td {
    background: rgba(28, 185, 122, 0.08);
}

body[data-theme="light"] .client-ledger-row-money td {
    background: rgba(34, 197, 94, 0.08);
}

.client-ledger-row-product td {
    background: rgba(255, 106, 106, 0.08);
}

body[data-theme="light"] .client-ledger-row-product td {
    background: rgba(239, 68, 68, 0.07);
}

.client-ledger-row-neutral td {
    background: rgba(148, 163, 184, 0.06);
}

body[data-theme="light"] .client-ledger-row-neutral td {
    background: rgba(100, 116, 139, 0.06);
}

.data-table tbody tr.client-ledger-row-money:hover td {
    background: rgba(28, 185, 122, 0.13);
}

body[data-theme="light"] .data-table tbody tr.client-ledger-row-money:hover td {
    background: rgba(34, 197, 94, 0.12);
}

.data-table tbody tr.client-ledger-row-product:hover td {
    background: rgba(255, 106, 106, 0.12);
}

body[data-theme="light"] .data-table tbody tr.client-ledger-row-product:hover td {
    background: rgba(239, 68, 68, 0.1);
}

.data-table tbody tr.client-ledger-row-neutral:hover td {
    background: rgba(148, 163, 184, 0.1);
}

body[data-theme="light"] .data-table tbody tr.client-ledger-row-neutral:hover td {
    background: rgba(100, 116, 139, 0.1);
}

.row-total td {
    background: rgba(44, 54, 74, 0.5);
    font-weight: 700;
}

body[data-theme="light"] .row-total td {
    background: rgba(15, 23, 42, 0.06);
}

.data-table tbody tr.row-warning-soft:hover td {
    background: rgba(101, 76, 26, 0.34);
}

body[data-theme="light"] .data-table tbody tr.row-warning-soft:hover td {
    background: rgba(241, 193, 96, 0.16);
}

.data-table tbody tr.row-danger-soft:hover td {
    background: rgba(93, 37, 42, 0.38);
}

body[data-theme="light"] .data-table tbody tr.row-danger-soft:hover td {
    background: rgba(255, 106, 106, 0.14);
}

.data-table tbody tr.row-accent-soft:hover td {
    background: rgba(18, 75, 99, 0.34);
}

body[data-theme="light"] .data-table tbody tr.row-accent-soft:hover td {
    background: rgba(31, 185, 255, 0.12);
}

.data-table tbody tr.row-total:hover td {
    background: rgba(58, 70, 94, 0.64);
}

body[data-theme="light"] .data-table tbody tr.row-total:hover td {
    background: rgba(15, 23, 42, 0.08);
}

.data-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
}

.data-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
}

.cell-strong {
    color: var(--text);
    font-weight: 800;
}

.table-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 140ms ease, border-color 140ms ease;
}

.table-link:hover {
    color: var(--text);
    border-color: currentColor;
}

.cell-muted {
    color: var(--text-muted);
}

.cell-positive {
    color: var(--positive);
}

.cell-warning {
    color: var(--warning);
}

.cell-danger {
    color: var(--danger);
}

.cell-accent {
    color: var(--accent);
}

.data-table td.turnover-negative-value,
.data-table td.turnover-negative-value .table-link,
.history-value-negative {
    color: var(--danger) !important;
}

.history-value-unknown {
    color: var(--danger) !important;
}

.warehouse-bonus-media {
    align-items: center;
    color: var(--accent);
    display: inline-flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.warehouse-bonus-media svg {
    height: 18px;
    width: 18px;
}

.warehouse-bonus-media.is-muted {
    color: var(--text-muted);
    opacity: 0.45;
}

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

.cash-refund-actions form {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.cash-refund-return-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--positive);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 6px 10px;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.cash-refund-return-button:hover,
.cash-refund-return-button:focus-visible {
    background: color-mix(in srgb, var(--positive) 14%, transparent);
    color: var(--positive);
    outline: none;
}

.cash-refund-return-button:active {
    transform: translateY(1px);
}

.cash-refund-actions input[type="number"] {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    max-width: 92px;
    padding: 4px 2px;
}

.cash-main-refund-detail-table tbody tr.row-danger-soft td {
    background: rgba(128, 42, 48, 0.34);
}

body[data-theme="light"] .cash-main-refund-detail-table tbody tr.row-danger-soft td {
    background: rgba(255, 106, 106, 0.16);
}

.cash-main-refund-detail-table tbody tr.row-warning-soft td {
    background: rgba(132, 92, 30, 0.34);
}

body[data-theme="light"] .cash-main-refund-detail-table tbody tr.row-warning-soft td {
    background: rgba(241, 193, 96, 0.18);
}

.cash-main-refund-detail-table tbody tr.row-positive-soft td {
    background: rgba(31, 128, 82, 0.28);
}

body[data-theme="light"] .cash-main-refund-detail-table tbody tr.row-positive-soft td {
    background: rgba(34, 197, 94, 0.14);
}

.data-table.cash-main-refund-detail-table tbody tr.row-danger-soft:hover td {
    background: rgba(128, 42, 48, 0.44);
}

body[data-theme="light"] .data-table.cash-main-refund-detail-table tbody tr.row-danger-soft:hover td {
    background: rgba(255, 106, 106, 0.2);
}

.data-table.cash-main-refund-detail-table tbody tr.row-warning-soft:hover td {
    background: rgba(132, 92, 30, 0.44);
}

body[data-theme="light"] .data-table.cash-main-refund-detail-table tbody tr.row-warning-soft:hover td {
    background: rgba(241, 193, 96, 0.24);
}

.data-table.cash-main-refund-detail-table tbody tr.row-positive-soft:hover td {
    background: rgba(31, 128, 82, 0.36);
}

body[data-theme="light"] .data-table.cash-main-refund-detail-table tbody tr.row-positive-soft:hover td {
    background: rgba(34, 197, 94, 0.18);
}

.cash-refund-date-cell {
    min-width: 126px;
}

.cash-refund-date-main,
.cash-refund-date-note {
    display: block;
    line-height: 1.25;
}

.cash-refund-date-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 3px;
}

.text-danger {
    color: var(--danger) !important;
}

.settings-regions-preview,
.settings-regions-preview-form {
    margin-top: 14px;
}

.settings-regions-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.settings-regions-preview ul {
    margin: 0;
    padding-left: 18px;
}

.data-table.production-stock-matrix th,
.data-table.production-stock-matrix td {
    vertical-align: middle;
    white-space: nowrap;
}

.data-table.production-stock-matrix td.production-stock-matrix-cell,
.data-table.production-stock-matrix td.production-stock-matrix-utility-cell,
.data-table.production-stock-matrix td.production-stock-matrix-product-cell {
    min-width: 118px;
}

.production-stock-matrix-pair,
.production-stock-matrix-product {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.15;
}

.production-stock-matrix-received {
    color: var(--positive);
    font-weight: 700;
}

.production-stock-matrix-spent {
    color: var(--danger);
    font-weight: 700;
}

.production-stock-matrix-utility-amount {
    color: var(--accent);
    font-weight: 700;
}

.production-stock-matrix-utility-cost {
    color: var(--text-muted);
    font-weight: 700;
}

.production-stock-matrix-pair a {
    text-decoration: none;
}

.production-stock-matrix-pair a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.production-stock-matrix-product span {
    color: var(--accent);
    font-weight: 700;
}

.production-stock-matrix-empty {
    color: var(--text-muted);
}

.data-table td.badge,
.data-table td.cell-positive.badge,
.data-table td.cell-warning.badge,
.data-table td.cell-danger.badge,
.data-table td.cell-accent.badge,
.data-table td.cell-muted.badge {
    font-weight: 700;
    white-space: nowrap;
}

.data-table td.cell-positive.badge {
    background: rgba(83, 213, 123, 0.12);
}

.data-table td.cell-warning.badge {
    background: rgba(241, 193, 96, 0.18);
    color: #fff0c0;
}

body[data-theme="light"] .data-table td.cell-warning.badge {
    background: rgba(241, 193, 96, 0.3);
    color: #5e3d00;
}

.data-table td.cell-danger.badge {
    background: rgba(255, 106, 106, 0.14);
}

.data-table td.cell-accent.badge {
    background: rgba(31, 185, 255, 0.14);
}

.data-table td.cell-muted.badge {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
}

body[data-theme="light"] .data-table td.cell-muted.badge {
    background: rgba(15, 23, 42, 0.05);
}

.table-select,
.table-textarea,
.login-form input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(11, 16, 25, 0.82);
    color: var(--text);
    padding: 10px 12px;
    outline: none;
}

body[data-theme="light"] .table-select,
body[data-theme="light"] .table-textarea,
body[data-theme="light"] .login-form input {
    border-color: rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: var(--text);
}

.table-select:focus,
.table-textarea:focus,
.login-form input:focus {
    border-color: rgba(31, 185, 255, 0.24);
    box-shadow: 0 0 0 3px rgba(31, 185, 255, 0.08);
}

.table-select {
    min-width: 156px;
}

.table-textarea {
    min-width: 230px;
    resize: vertical;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-positive {
    color: var(--positive);
    background: var(--positive-soft);
}

.status-warning {
    color: var(--warning);
    background: var(--warning-soft);
}

body[data-theme="light"] .status-warning {
    color: #5e3d00;
    background: rgba(241, 193, 96, 0.28);
}

.status-info,
.status-muted {
    color: var(--accent);
    background: var(--accent-soft);
}

.status-danger {
    color: var(--danger);
    background: var(--danger-soft);
}

.status-accent {
    color: var(--accent);
    background: var(--accent-soft);
}

.warehouse-table .cell-strong {
    white-space: nowrap;
}

.warehouse-stage-cell {
    display: grid;
    gap: 8px;
    min-width: 122px;
}

.warehouse-stage-value {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--text);
    white-space: nowrap;
}

.warehouse-stage-artifacts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.warehouse-stage-artifacts .media-cell-button {
    width: 34px;
    height: 34px;
}

.warehouse-stage-artifacts .media-cell-button i,
.warehouse-stage-artifacts .media-cell-button i svg {
    width: 24px;
    height: 24px;
}

.production-lifecycle-table th,
.production-lifecycle-table td {
    vertical-align: middle;
}

.production-lifecycle-table .production-goods-cell {
    display: grid;
    gap: 4px;
    min-width: 170px;
}

.production-lifecycle-table .production-goods-cell small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.25;
}

.media-cell-button {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 140ms ease, opacity 140ms ease;
}

.media-cell-button:hover {
    color: var(--text);
}

.media-cell-button i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.media-cell-button i svg {
    width: 46px;
    height: 46px;
}

.warehouse-audio-play i {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.warehouse-audio-play i svg {
    width: 56px;
    height: 56px;
}

.media-cell-button.inactive,
.media-cell-button[disabled] {
    color: var(--text-faint);
    opacity: 0.72;
    cursor: not-allowed;
}

body[data-theme="light"] .media-cell-button {
    background: transparent;
}

body[data-theme="light"] .media-cell-button.inactive,
body[data-theme="light"] .media-cell-button[disabled] {
    background: transparent;
}

.warehouse-media-modal {
    z-index: 72;
}

.warehouse-media-modal[hidden] {
    display: none !important;
}

.warehouse-media-card {
    width: min(720px, 100%);
}

.warehouse-media-head {
    margin-bottom: 10px;
}

.warehouse-media-head .card-head h3,
.warehouse-media-head h3 {
    margin: 0;
    font-size: 1rem;
}

.warehouse-media-head p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.warehouse-media-icon-button {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.warehouse-media-icon-button:hover {
    color: var(--text);
}

.warehouse-media-icon-button i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.warehouse-media-icon-button i svg {
    width: 26px;
    height: 26px;
}

.warehouse-media-icon-button.danger {
    color: var(--danger);
}

.media-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.media-icon {
    display: inline-flex;
    min-width: 28px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--content-line);
}

.media-icon svg {
    width: 16px;
    height: 16px;
}

.media-icon.document-preview-link {
    text-decoration: none;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.media-icon.document-preview-link:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    transform: translateY(-1px);
}

.media-icon.document-download-link {
    min-width: 20px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    transition: color 0.16s ease, transform 0.16s ease;
}

.media-icon.document-download-link:hover {
    transform: translateY(-1px);
}

.media-icon.document-download-link svg {
    width: 18px;
    height: 18px;
}

.media-icon-positive {
    color: var(--positive);
    border-color: color-mix(in srgb, var(--positive) 52%, transparent);
}

.media-icon-warning {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 52%, transparent);
}

.media-icon-danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 52%, transparent);
}

.media-icon-muted {
    opacity: 0.55;
}

.data-table tbody tr.row-focus td {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.data-table tbody td.turnover-focus-cell {
    background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.turnover-drilldown-table tbody tr.row-focus td,
.turnover-drilldown-table tbody td.turnover-focus-cell {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: none;
    outline: 0;
}

.turnover-drilldown-table tbody tr.row-focus td:first-child,
.turnover-drilldown-table tbody td.turnover-focus-cell:first-child {
    border-left-color: transparent;
}

body[data-theme="light"] .turnover-drilldown-table tbody tr.row-focus td,
body[data-theme="light"] .turnover-drilldown-table tbody td.turnover-focus-cell {
    border-left-color: transparent;
    border-right-color: transparent;
}

body[data-theme="light"] .turnover-drilldown-table tbody tr.row-focus td:first-child,
body[data-theme="light"] .turnover-drilldown-table tbody td.turnover-focus-cell:first-child {
    border-left-color: transparent;
}

.turnover-drilldown-table tbody tr.row-total td {
    font-weight: 700;
}

.document-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 24px;
}

.document-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.58);
    cursor: default;
}

.document-preview-card {
    position: relative;
    z-index: 1;
    width: min(1120px, 94vw);
    height: min(820px, 88vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--content-line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.document-preview-header,
.document-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--content-line);
}

.document-preview-footer {
    border-top: 1px solid var(--content-line);
    border-bottom: 0;
}

.document-preview-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.document-preview-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--content-line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.document-preview-close:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--content-line));
}

.document-preview-close svg {
    width: 17px;
    height: 17px;
}

.document-preview-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #101418;
}

.warehouse-media-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    justify-content: center;
}

.warehouse-media-chip {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.warehouse-media-chip.active {
    border-color: rgba(31, 185, 255, 0.28);
    color: var(--text);
    background: rgba(31, 185, 255, 0.08);
}

.warehouse-media-body {
    display: grid;
    gap: 14px;
}

.warehouse-stage-body,
.warehouse-status-body {
    display: grid;
    gap: 14px;
}

.warehouse-stage-note {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 14, 22, 0.9);
    border-radius: 18px;
    line-height: 1.55;
}

.warehouse-stage-files {
    display: grid;
    gap: 10px;
}

.warehouse-stage-file-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.warehouse-stage-file-link:hover {
    color: var(--text);
}

.warehouse-stage-empty {
    margin: 0;
    color: var(--text-muted);
}

.warehouse-status-field {
    display: grid;
    gap: 8px;
    color: var(--text-soft);
    font-size: 0.78rem;
}

.warehouse-status-textarea {
    min-width: 100%;
    min-height: 128px;
}

.warehouse-status-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}

.warehouse-status-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.warehouse-status-upload-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(31, 185, 255, 0.08);
    color: var(--text-soft);
    font-size: 0.76rem;
}

.warehouse-hidden-fields {
    display: none !important;
}

.warehouse-audio-panel,
.warehouse-image-panel {
    display: block;
}

.warehouse-audio-panel[hidden],
.warehouse-image-panel[hidden] {
    display: none !important;
}

.warehouse-audio-shell,
.warehouse-image-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(10, 14, 22, 0.9);
    padding: 12px;
}

body[data-theme="light"] .warehouse-audio-shell,
body[data-theme="light"] .warehouse-image-panel,
body[data-theme="light"] .warehouse-media-chip,
body[data-theme="light"] .warehouse-stage-note {
    border-color: rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.warehouse-audio-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.warehouse-audio-play {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.warehouse-audio-play:hover {
    color: var(--text);
}

.warehouse-wave-shell {
    position: relative;
    min-width: 0;
    height: 88px;
    display: flex;
    align-items: center;
}

.warehouse-wave-shell canvas {
    width: 100%;
    height: 88px;
    display: block;
    cursor: pointer;
}

.warehouse-audio-range {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.warehouse-audio-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    min-width: 62px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.warehouse-image-panel {
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px 6px 6px;
}

.warehouse-image-panel img {
    width: 100%;
    max-width: 100%;
    max-height: min(72vh, 560px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 16, 20, 0.96);
    object-fit: contain;
    display: block;
}

.warehouse-image-panel[data-state="loading"] img,
.warehouse-image-panel[data-state="error"] img {
    display: none;
}

.item-upload-progress {
    display: grid;
    gap: 8px;
    width: 100%;
    grid-column: 1 / -1;
    margin-block: 12px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.item-upload-progress progress {
    width: 100%;
    height: 8px;
    accent-color: var(--accent, #497d2b);
}

.item-upload-progress[data-state="error"] {
    color: var(--danger, #b42318);
}

.item-upload-progress[hidden] {
    display: none;
}

.warehouse-image-status {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.warehouse-image-status[hidden],
.warehouse-image-status button[hidden] {
    display: none;
}

.warehouse-image-panel[data-state="loading"] .warehouse-image-status::before {
    content: "";
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: warehouse-image-loading 0.8s linear infinite;
}

@keyframes warehouse-image-loading {
    to { transform: rotate(360deg); }
}

.action-button.danger {
    color: var(--danger);
}

.action-button.danger:hover {
    color: #ff9b9b;
}

.employee-modal-head-actions form {
    margin: 0;
}

.employee-modal-head-actions button.action-button {
    font: inherit;
    cursor: pointer;
}

.hr-media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hr-explanatory-attachment {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
    max-width: 240px;
}

.hr-explanatory-attachment img {
    width: 150px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(188, 245, 104, 0.18);
}

.hr-explanatory-attachment audio {
    width: 220px;
}

.hr-explanatory-table-media {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hr-explanatory-table-media a:not(.media-cell-button) {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--text);
    background: rgba(188, 245, 104, 0.08);
    border: 1px solid rgba(188, 245, 104, 0.18);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.placeholder-card {
    margin-top: 14px;
}

.login-body {
    min-height: 100vh;
    margin: 0;
    background: var(--shell-bg);
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--shell-bg);
}

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.login-brand {
    display: inline-flex;
    align-items: center;
}

.login-panel-solo {
    padding: 0;
}

.login-brand-stack {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    text-decoration: none;
}

.login-logo-large {
    height: 54px;
}

.login-brand-auth {
    gap: 7px;
}

.login-brand-mark {
    width: 148px;
    display: flex;
    justify-content: center;
}

.login-logo-wordmark {
    display: block;
    width: 148px;
    height: 53px;
    object-fit: contain;
}

.login-brand-subtitle {
    display: block;
    width: 140.89px;
    transform: translateX(-7.13px);
    color: #ffffff;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: 8.14px;
    font-weight: 500;
    letter-spacing: 7.73px;
    line-height: 1.1875;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.login-brand-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.login-brand-copy strong {
    color: #f6fbff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.login-brand-copy span {
    color: rgba(128, 197, 255, 0.92);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.login-card {
    width: min(420px, 100%);
    padding: 24px;
}

.login-card-minimal {
    display: grid;
    justify-items: center;
    gap: 26px;
    width: min(420px, 100%);
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.login-copy-minimal {
    text-align: center;
    width: 100%;
}

.login-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.04;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 100;
    letter-spacing: 0.015em;
    color: rgba(255, 255, 255, 0.5);
}

.login-alert {
    margin: 0;
    padding: 12px 0 14px;
    border-radius: 0;
    color: #ff8f8f;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 116, 116, 0.25);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-form-minimal {
    gap: 18px;
    width: min(360px, 100%);
}

.login-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-field {
    position: relative;
}

.login-form label span {
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.login-form input {
    min-height: 48px;
}

.login-form-minimal input {
    min-height: 56px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #f6fbff;
    font-size: 1rem;
}

.login-form-minimal input::placeholder {
    color: rgba(214, 229, 241, 0.52);
}

.login-form-minimal input:focus {
    border-bottom-color: #bcf568;
    background: transparent;
    box-shadow: none;
}

.login-form-minimal input:-webkit-autofill,
.login-form-minimal input:-webkit-autofill:hover,
.login-form-minimal input:-webkit-autofill:focus,
.login-form-minimal input:-webkit-autofill:active {
    -webkit-text-fill-color: #f6fbff;
    caret-color: #f6fbff;
    border-bottom-color: rgba(255, 255, 255, 0.18);
    -webkit-box-shadow: 0 0 0 1000px var(--shell-bg) inset;
    box-shadow: 0 0 0 1000px var(--shell-bg) inset;
    transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s;
}

.login-form-minimal input:-webkit-autofill:focus {
    border-bottom-color: #bcf568;
}

.login-submit {
    margin-top: 10px;
    min-height: 52px;
}

@media (max-width: 1180px) {
    .panel-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .production-primary-head .panel-head-table-toolbar {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        justify-self: stretch;
        overflow-x: auto;
    }

    .production-primary-head .finance-panel-toolbar {
        max-width: 100%;
        margin-left: 0;
    }

    .production-primary-head .table-toolbar-actions {
        justify-content: flex-start;
    }

    .panel-actions {
        justify-content: flex-start;
    }

    .panel-state {
        text-align: left;
    }

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

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

    .dashboard-kpi:nth-child(2) {
        border-right: 0;
    }

    .dashboard-kpi:nth-child(-n + 2) {
        border-bottom: 1px solid var(--content-line);
    }

    .content-card.wide {
        grid-row: span 1;
    }

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

    .dashboard-chart-stage {
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

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

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

    .focus-list.dashboard-chart-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .shell-frame {
        flex-direction: column;
    }

    .sidenav {
        position: static;
        width: 100%;
        flex-basis: auto;
        padding-top: 0;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .sidenav-panel {
        width: 100%;
        min-height: auto;
        max-height: none;
        background: var(--shell-bg);
        padding-top: 18px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .menu-item {
        justify-content: flex-start;
        padding: 0 12px;
        gap: 10px;
    }

    .menu-label,
    .menu-badge,
    .menu-caret {
        width: auto;
        max-width: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: none;
    }

    .submenu-list {
        max-height: none;
        padding: 0 0 4px 40px;
        opacity: 1;
        pointer-events: auto;
    }

    .menu-list {
        max-height: 240px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-left,
    .topbar-right,
    .breadcrumbs {
        width: 100%;
    }

    .topbar-left {
        gap: 12px;
    }

    .stats-grid,
    .showcase-grid,
    .dashboard-layout,
    .employees-layout,
    .employees-filter-grid,
    .employee-profile-grid,
    .permissions-grid,
    .employee-history-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-context {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .dashboard-context > span:not(:last-child)::after {
        margin-left: 12px;
    }

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

    .dashboard-kpi,
    .dashboard-kpi:nth-child(2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--content-line);
    }

    .dashboard-kpi:last-child {
        border-bottom: 0;
    }

    .dashboard-side-stack,
    .dashboard-focus-list {
        grid-template-columns: 1fr;
    }

    .focus-list.dashboard-chart-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-stage-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-modal-form .employee-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-panel {
        padding: 28px;
    }

    .hr-profile-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .hr-location-detail-hero {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }

    .hr-location-detail-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "map"
            "hub"
            "assigned"
            "worktime"
            "attendance";
    }

    .hr-location-detail-map-panel {
        margin-left: 0;
        width: 100%;
        max-width: none;
    }

    .hr-location-employee-head {
        grid-template-columns: 1fr;
    }

    .hr-location-employee-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-location-employee-attendance-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .page-section {
        padding: 14px 0 0 14px;
    }

    .panel-surface,
    .login-card {
        padding: 14px;
    }

    .login-card-minimal {
        padding: 0;
    }

    .theme-switch,
    .user-box {
        width: 100%;
        justify-content: space-between;
    }

    .user-menu {
        width: 100%;
    }

    .user-menu-panel {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .topbar-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-right {
        width: 100%;
    }

    .employees-directory,
    .employees-form-card {
        padding: 16px;
    }

    .employee-modal-shell {
        padding: 14px;
    }

    .employee-modal-card {
        max-height: calc(100vh - 28px);
        padding: 16px;
    }

    .employee-modal-head,
    .employee-modal-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .hr-location-map-search-row {
        grid-template-columns: 1fr;
    }

    .hr-location-map-frame {
        min-height: 360px;
    }

    .hr-location-form .employee-form-grid,
    .hr-location-assignment-list {
        grid-template-columns: 1fr;
    }

    .client-module-form .employee-form-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .client-registry-selects {
        grid-template-columns: 1fr;
    }

    .employee-modal-form .employee-form-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .client-photo-upload-button,
    .client-photo-preview-button {
        width: 124px;
    }

    .client-tile-grid,
    .hr-location-tile-grid {
        grid-template-columns: 1fr;
    }

    .client-tile {
        width: 100%;
        padding-left: 0;
        border-left: 0;
    }

    .hr-location-assignment-item {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .hr-location-assignment-status {
        grid-column: 3;
        margin-left: 54px;
    }

    .hr-location-detail-facts,
    .hr-location-employee-stats {
        grid-template-columns: 1fr;
    }

    .client-fact-grid,
    .client-detail-summary .hr-location-detail-facts {
        grid-template-columns: 1fr;
    }

    .hr-location-detail-hero {
        grid-template-columns: 1fr;
    }

    .hr-location-person-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .hr-location-person-meta,
    .hr-location-person-trailing {
        grid-column: 2;
        text-align: left;
    }

    .hr-location-display-map {
        min-height: 320px;
    }

    .hr-location-employee-attendance-row {
        grid-template-columns: 1fr 1fr;
    }

    .hr-location-employee-history-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .hr-location-detail-media,
    .hr-location-employee-media {
        max-width: 220px;
    }
}
.data-table tbody tr.row-clickable td {
    cursor: pointer;
}

.data-table tbody tr.row-clickable:focus-visible td {
    outline: 2px solid rgba(107, 220, 255, 0.54);
    outline-offset: -2px;
}

.hr-statistics-overview {
    display: grid;
    gap: 26px;
}

.hr-statistics-period {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: -4px;
}

.hr-statistics-period strong {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    letter-spacing: 0;
    line-height: 1.05;
}

.hr-statistics-period > span:not(.hr-statistics-filter-state) {
    border-radius: 999px;
    background: rgba(104, 224, 185, 0.12);
    color: var(--accent);
    font-weight: 700;
    padding: 10px 18px;
}

.hr-statistics-filter-state {
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0;
}

.hr-statistics-period a,
.hr-statistics-refresh {
    color: var(--text-muted);
    font-weight: 700;
    border-bottom: 2px solid var(--content-line);
    padding-bottom: 4px;
}

.hr-statistics-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hr-statistics-refresh svg {
    width: 18px;
    height: 18px;
}

.hr-statistics-main {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.8fr);
    gap: 22px;
    align-items: stretch;
}

.hr-statistics-rings {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 18px;
}

.hr-stat-ring {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 24px 18px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.06);
    min-height: 226px;
}

.hr-stat-ring-chart {
    position: relative;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.hr-stat-ring-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.hr-stat-ring-track,
.hr-stat-ring-progress {
    fill: none;
    stroke-width: 17;
}

.hr-stat-ring-track {
    stroke: rgba(148, 163, 184, 0.22);
}

.hr-stat-ring-progress {
    stroke: var(--accent);
    stroke-linecap: round;
}

.hr-stat-ring.danger .hr-stat-ring-progress {
    stroke: var(--danger);
}

.hr-stat-ring.warning .hr-stat-ring-progress {
    stroke: var(--warning);
}

.hr-stat-ring.neutral .hr-stat-ring-progress {
    stroke: var(--accent);
}

.hr-stat-ring-center {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 3px;
    line-height: 1;
}

.hr-stat-ring-chart strong {
    font-size: 1.72rem;
}

.hr-stat-ring-center small {
    font-size: 0.86rem;
    font-weight: 800;
}

.hr-stat-ring-center small.positive {
    color: var(--positive);
}

.hr-stat-ring-center small.negative {
    color: var(--danger);
}

.hr-stat-ring-center small.neutral {
    color: var(--text-muted);
}

.hr-stat-ring span {
    font-weight: 700;
    color: var(--text-muted);
}

.hr-statistics-average {
    padding: 22px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.06);
    display: grid;
    align-content: center;
}

.hr-statistics-average h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
}

.hr-statistics-average dl {
    margin: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hr-statistics-average div,
.hr-rank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hr-statistics-average dt {
    color: var(--text-muted);
}

.hr-statistics-average dd {
    margin: 0;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.hr-average-badge {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 900;
}

.hr-average-badge.positive {
    background: rgba(104, 224, 185, 0.18);
    color: var(--positive);
}

.hr-average-badge.negative {
    background: rgba(255, 93, 122, 0.14);
    color: var(--danger);
}

.hr-ranking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.hr-ranking-head h3 {
    margin: 0;
    font-size: 1.1rem;
}

.hr-ranking-head span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.hr-ranking-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--content-line);
}

.hr-ranking-tab {
    position: relative;
    padding: 0 0 12px;
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}

.hr-ranking-tab.active {
    color: var(--accent);
}

.hr-ranking-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
}

.hr-ranking-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(138px, 1fr));
    gap: 16px;
}

.hr-rank-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    padding: 18px 14px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.07);
    min-height: 174px;
    text-align: center;
    transition: transform 0.16s ease, background 0.16s ease;
}

.hr-rank-card:hover {
    transform: translateY(-2px);
    background: rgba(148, 163, 184, 0.12);
}

.hr-rank-photo-wrap {
    position: relative;
    width: 72px;
    height: 72px;
}

.hr-rank-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
}

.hr-rank-avatar-fallback {
    display: grid;
    place-items: center;
}

.hr-rank-place {
    position: absolute;
    left: -6px;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #061018;
    font-size: 0.78rem;
    font-weight: 800;
}

.hr-rank-value {
    position: absolute;
    left: 21px;
    bottom: 0;
    min-width: 52px;
    max-width: 102px;
    border-radius: 999px;
    background: rgba(244, 247, 255, 0.9);
    color: #101827;
    padding: 5px 11px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

body[data-theme="light"] .hr-rank-value {
    background: rgba(255, 255, 255, 0.94);
    color: #162033;
}

.hr-ranking-cards.danger .hr-rank-place {
    background: var(--danger);
    color: #ffffff;
}

.hr-ranking-cards.warning .hr-rank-place {
    background: var(--warning);
    color: #14100a;
}

.hr-ranking-cards.positive .hr-rank-place {
    background: var(--positive);
    color: #061018;
}

.hr-rank-card strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.hr-rank-card small {
    color: var(--text-muted);
    line-height: 1.25;
}

.hr-rank-empty {
    color: var(--text-muted);
}

.hr-schedule-board {
    display: grid;
    gap: 18px;
}

.hr-schedule-tabs {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    overflow-x: auto;
    border-bottom: 1px solid var(--content-line);
    scrollbar-width: none;
}

.hr-schedule-tabs::-webkit-scrollbar {
    display: none;
}

.hr-schedule-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 0 0 14px;
    color: var(--text-muted);
    font-weight: 650;
    white-space: nowrap;
}

.hr-schedule-tab.active {
    color: var(--accent);
}

.hr-schedule-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
}

.hr-schedule-toolbar,
.hr-schedule-period-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hr-schedule-toolbar {
    justify-content: space-between;
}

.hr-schedule-action {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-soft);
    font-weight: 750;
    min-height: 42px;
    white-space: nowrap;
}

.hr-schedule-action svg {
    width: 21px;
    height: 21px;
}

.hr-schedule-action.primary svg,
.hr-schedule-action.muted svg {
    color: var(--accent);
}

.hr-schedule-action.muted {
    color: var(--text-muted);
}

.hr-schedule-filter-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hr-schedule-dropdown {
    position: relative;
}

.hr-schedule-dropdown summary {
    min-width: 180px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--content-line);
    background: rgba(148, 163, 184, 0.035);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    list-style: none;
}

.hr-schedule-dropdown summary::-webkit-details-marker {
    display: none;
}

.hr-schedule-dropdown summary svg {
    width: 18px;
    height: 18px;
}

.hr-schedule-dropdown[open] summary svg {
    transform: rotate(90deg);
}

.hr-schedule-dropdown > div {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    max-height: 280px;
    overflow: auto;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--content-line);
    background: var(--content-bg);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 220, 255, 0.42) transparent;
}

.hr-schedule-dropdown > div::-webkit-scrollbar,
.hr-schedule-shell::-webkit-scrollbar,
.hr-schedule-popover::-webkit-scrollbar,
.hr-schedule-action-panels::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.hr-schedule-dropdown > div::-webkit-scrollbar-thumb,
.hr-schedule-shell::-webkit-scrollbar-thumb,
.hr-schedule-popover::-webkit-scrollbar-thumb,
.hr-schedule-action-panels::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(107, 220, 255, 0.42);
}

.hr-schedule-dropdown > div::-webkit-scrollbar-track,
.hr-schedule-shell::-webkit-scrollbar-track,
.hr-schedule-popover::-webkit-scrollbar-track,
.hr-schedule-action-panels::-webkit-scrollbar-track {
    background: transparent;
}

.hr-schedule-dropdown-option {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.hr-schedule-dropdown-option:hover,
.hr-schedule-dropdown-option.active {
    background: rgba(107, 220, 255, 0.08);
    color: var(--text);
}

.hr-schedule-period-row {
    justify-content: flex-start;
}

.hr-schedule-period-pill,
.hr-schedule-view-switch,
.hr-schedule-mode-icons {
    min-height: 46px;
    border-radius: 12px;
    background: rgba(107, 220, 255, 0.07);
    display: inline-flex;
    align-items: center;
}

.hr-schedule-period-pill {
    gap: 18px;
    padding: 0 18px;
    color: var(--accent);
}

.hr-schedule-period-pill a {
    color: var(--accent);
    font-size: 1.75rem;
    line-height: 1;
}

.hr-schedule-period-pill strong {
    min-width: 178px;
    text-align: center;
    font-weight: 800;
}

.hr-schedule-period-pill button {
    min-width: 178px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.hr-schedule-view-switch {
    gap: 14px;
    padding: 0 16px;
    color: var(--text-muted);
}

.hr-schedule-view-switch > span {
    font-weight: 750;
}

.hr-schedule-view-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-weight: 700;
}

.hr-schedule-view-option i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.48);
    box-shadow: inset 0 0 0 4px transparent;
}

.hr-schedule-view-option.active {
    color: var(--accent);
}

.hr-schedule-view-option.active i {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 5px var(--content-bg);
    background: var(--accent);
}

.hr-schedule-mode-icons {
    padding: 0 10px;
    gap: 6px;
}

.hr-schedule-mode-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--text-muted);
    display: grid;
    place-items: center;
}

a.hr-schedule-mode-icon {
    text-decoration: none;
}

.hr-schedule-mode-icon.active {
    background: rgba(107, 220, 255, 0.12);
    color: var(--accent);
}

.hr-schedule-mode-icon svg {
    width: 20px;
    height: 20px;
}

.hr-schedule-range-toggle {
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 760;
    padding: 8px 0;
    cursor: pointer;
}

.hr-schedule-range-toggle.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.hr-schedule-shell {
    overflow: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 220, 255, 0.32) transparent;
}

.hr-schedule-layout {
    --people-width: 262px;
    --day-width: 154px;
    --schedule-row-height: 79px;
    --schedule-field-width: var(--day-width);
    --schedule-total-width: calc(var(--people-width) + var(--schedule-field-width));
    --schedule-columns: repeat(1, minmax(var(--day-width), 1fr));
    width: 100%;
    min-width: max(100%, var(--schedule-total-width));
    display: grid;
    grid-template-columns: var(--people-width) minmax(var(--schedule-field-width), 1fr);
    align-items: start;
    border-top: 0;
}

.hr-schedule-layout.hr-schedule-days-1 {
    --schedule-field-width: 154px;
    --schedule-total-width: 416px;
    --schedule-columns: repeat(1, minmax(var(--day-width), 1fr));
    width: max-content;
    min-width: var(--schedule-total-width);
    grid-template-columns: var(--people-width) var(--schedule-field-width);
}

.hr-schedule-layout.hr-schedule-days-7 {
    --schedule-field-width: 1078px;
    --schedule-total-width: 1340px;
    --schedule-columns: repeat(7, minmax(var(--day-width), 1fr));
}

.hr-schedule-layout.hr-schedule-days-28 {
    --schedule-field-width: 4312px;
    --schedule-total-width: 4574px;
    --schedule-columns: repeat(28, minmax(var(--day-width), 1fr));
}

.hr-schedule-layout.hr-schedule-days-29 {
    --schedule-field-width: 4466px;
    --schedule-total-width: 4728px;
    --schedule-columns: repeat(29, minmax(var(--day-width), 1fr));
}

.hr-schedule-layout.hr-schedule-days-30 {
    --schedule-field-width: 4620px;
    --schedule-total-width: 4882px;
    --schedule-columns: repeat(30, minmax(var(--day-width), 1fr));
}

.hr-schedule-layout.hr-schedule-days-31 {
    --schedule-field-width: 4774px;
    --schedule-total-width: 5036px;
    --schedule-columns: repeat(31, minmax(var(--day-width), 1fr));
}

.hr-schedule-people-column {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--content-bg);
    border-right: 1px solid var(--content-line);
    box-shadow: 12px 0 22px rgba(0, 0, 0, 0.12);
    isolation: isolate;
}

.hr-schedule-field {
    width: 100%;
    min-width: var(--schedule-field-width);
    background: transparent;
}

.hr-schedule-sort-row,
.hr-schedule-day-head {
    height: 52px;
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-sort-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 18px 0 0;
    color: var(--text-muted);
    font-weight: 700;
    background: var(--content-bg);
}

.hr-schedule-sort-row strong {
    color: var(--text);
}

.hr-schedule-search-form {
    gap: 8px;
}

.hr-schedule-search-input {
    min-width: 0;
    width: 100%;
    margin-left: 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    padding: 5px 0;
    outline: none;
}

.hr-schedule-search-input::placeholder {
    color: var(--text-soft);
}

.hr-schedule-search-input:focus {
    border-bottom-color: var(--accent);
}

.hr-schedule-days-row {
    display: grid;
    grid-template-columns: var(--schedule-columns);
}

.hr-schedule-day-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-left: 0;
    color: var(--text-muted);
    font-weight: 800;
}

.hr-schedule-day-head strong {
    color: var(--text);
    font-size: 0.98rem;
}

.hr-schedule-day-head span {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.hr-schedule-day-head.weekend {
    background: rgba(148, 163, 184, 0.028);
}

.hr-schedule-cells-grid {
    display: grid;
    grid-template-columns: var(--schedule-columns);
    grid-auto-rows: var(--schedule-row-height);
}

.hr-schedule-employee {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--schedule-row-height);
    padding: 12px 10px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-employee.is-schedule-filtered {
    display: none;
}

.hr-schedule-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 0.76rem;
    font-weight: 800;
}

.hr-schedule-employee-copy {
    min-width: 0;
}

.hr-schedule-employee strong {
    display: block;
    line-height: 1.2;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-schedule-employee span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.86rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-schedule-cell {
    display: grid;
    align-content: center;
    justify-items: center;
    height: var(--schedule-row-height);
    min-height: var(--schedule-row-height);
    padding: 9px 8px;
    border-left: 1px solid rgba(148, 163, 184, 0.08);
    border-bottom: 1px solid var(--content-line);
    background: transparent;
    cursor: pointer;
    outline: none;
    user-select: none;
    touch-action: pan-x pan-y;
}

.hr-schedule-shell.is-range-mode .hr-schedule-cell {
    touch-action: none;
}

.hr-schedule-cell.is-schedule-filtered {
    display: none;
}

.hr-schedule-cell-button {
    appearance: none;
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.hr-schedule-cell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 10px;
}

.hr-schedule-shift-card {
    position: relative;
    display: grid;
    align-content: center;
    gap: 5px;
    min-height: 56px;
    width: 100%;
    max-width: 138px;
    border: 2px solid rgba(104, 224, 185, 0.7);
    border-radius: 8px;
    padding: 8px 9px;
    background: rgba(104, 224, 185, 0.11);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.hr-schedule-shift-card strong {
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
    font-size: 0.89rem;
}

.hr-schedule-shift-card small {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.hr-schedule-cell.warning .hr-schedule-shift-card {
    border-color: rgba(104, 224, 185, 0.72);
    background: rgba(104, 224, 185, 0.09);
}

.hr-schedule-cell.danger .hr-schedule-shift-card {
    border-color: rgba(255, 93, 122, 0.72);
    background: rgba(255, 93, 122, 0.045);
}

.hr-schedule-cell.muted .hr-schedule-shift-card {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(148, 163, 184, 0.018);
}

.hr-schedule-cell.empty .hr-schedule-cell-button {
    min-height: 56px;
}

.hr-schedule-empty-plus {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 10px 24px rgba(46, 196, 142, 0.18);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
}

.hr-schedule-cell.leave .hr-schedule-shift-card {
    border-color: rgba(139, 114, 255, 0.74);
    background: rgba(139, 114, 255, 0.055);
}

.hr-schedule-cell.positive .hr-schedule-shift-card {
    border-color: rgba(104, 224, 185, 0.78);
}

.hr-schedule-actual {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.hr-schedule-actual.positive {
    color: var(--positive);
}

.hr-schedule-actual.warning {
    color: var(--danger);
}

.hr-schedule-cell em {
    display: none;
}

.hr-schedule-cell-indicators {
    position: absolute;
    right: 6px;
    bottom: 5px;
    display: inline-flex;
    gap: 4px;
}

.hr-schedule-cell-indicators i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--content-bg);
}

.hr-schedule-cell-indicators i.reminder {
    background: var(--warning);
}

.hr-schedule-cell.is-range-selected {
    background: rgba(107, 220, 255, 0.09);
}

.hr-schedule-cell.is-active .hr-schedule-shift-card,
.hr-schedule-cell.is-range-selected .hr-schedule-shift-card {
    border-color: var(--accent);
    background: rgba(107, 220, 255, 0.13);
    box-shadow: 0 0 0 3px rgba(107, 220, 255, 0.14), 0 10px 26px rgba(14, 165, 233, 0.13);
}

.hr-schedule-cell.is-active .hr-schedule-empty-plus,
.hr-schedule-cell.is-range-selected .hr-schedule-empty-plus {
    box-shadow: 0 0 0 4px rgba(107, 220, 255, 0.18), 0 10px 24px rgba(46, 196, 142, 0.22);
    transform: scale(1.04);
}

.hr-schedule-cell.is-active .hr-schedule-shift-card::after,
.hr-schedule-cell.is-range-selected .hr-schedule-shift-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(107, 220, 255, 0.38);
    animation: hrScheduleCellPulse 1.2s ease-out 1;
    pointer-events: none;
}

.hr-schedule-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 4px 2px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.hr-schedule-pager a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 800;
    border-bottom: 1px solid currentColor;
}

@keyframes hrScheduleCellPulse {
    from {
        opacity: 0.85;
        transform: scale(0.98);
    }
    to {
        opacity: 0;
        transform: scale(1.08);
    }
}

.hr-schedule-popover {
    position: fixed;
    z-index: 2000;
    width: min(360px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 28px));
    overflow: auto;
    border: 1px solid var(--content-line);
    border-radius: 16px;
    background: var(--content-bg);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
    padding: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 220, 255, 0.42) transparent;
    overscroll-behavior: contain;
}

.hr-schedule-popover[hidden] {
    display: none;
}

.hr-schedule-popover h3 {
    margin: 0;
    font-size: 0.98rem;
}

.hr-schedule-popover p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.hr-schedule-popover-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
    padding: 10px 0;
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-popover-meta span {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hr-schedule-popover-meta strong {
    display: block;
    margin-top: 2px;
    font-size: 0.86rem;
}

.hr-schedule-popover summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    color: var(--text);
    font-weight: 750;
}

.hr-schedule-popover summary::-webkit-details-marker {
    display: none;
}

.hr-schedule-popover summary svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.hr-schedule-popover form {
    display: grid;
    gap: 8px;
    padding: 0;
}

.hr-schedule-popover input,
.hr-schedule-popover select,
.hr-schedule-popover textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    padding: 7px 0;
    outline: none;
}

.hr-schedule-popover textarea {
    min-height: 64px;
    resize: vertical;
}

.hr-schedule-popover input:focus,
.hr-schedule-popover select:focus,
.hr-schedule-popover textarea:focus {
    border-bottom-color: var(--accent);
}

.hr-schedule-popover button {
    justify-self: start;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
}

.hr-schedule-popover .danger button {
    background: var(--danger);
}

.hr-schedule-action-sheet {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 12px 0;
}

.hr-schedule-action-sheet.is-column {
    grid-template-columns: 1fr;
}

.hr-schedule-action-sheet button,
.hr-schedule-action-sheet a,
.hr-schedule-one-click button {
    border: 1px solid var(--content-line);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.035);
    color: var(--text);
    min-height: 42px;
    width: 100%;
    padding: 9px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 780;
    text-decoration: none;
    cursor: pointer;
}

.hr-schedule-one-click {
    width: 100%;
}

.hr-schedule-action-sheet button.active {
    border-color: rgba(107, 220, 255, 0.45);
    background: rgba(107, 220, 255, 0.1);
    color: var(--accent);
}

.hr-schedule-action-sheet button.danger {
    color: var(--danger);
    border-color: rgba(255, 93, 122, 0.3);
    background: rgba(255, 93, 122, 0.04);
}

.hr-schedule-action-sheet svg,
.hr-schedule-one-click svg {
    width: 17px;
    height: 17px;
    color: var(--accent);
}

.hr-schedule-action-sheet button.danger svg,
.hr-schedule-delete-form .danger-submit svg {
    color: var(--danger);
}

.hr-schedule-action-panels {
    border-top: 1px solid var(--content-line);
    padding-top: 12px;
    max-height: min(420px, 44vh);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 220, 255, 0.42) transparent;
}

.hr-schedule-action-panels [data-schedule-panel] {
    padding-right: 2px;
}

.hr-schedule-popover label,
.hr-schedule-tool-form label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 760;
}

.hr-schedule-checkline,
.hr-schedule-checks label {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: start;
}

.hr-schedule-bal-check {
    display: inline-flex !important;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    align-items: center;
    gap: 9px !important;
    color: var(--text) !important;
    font-size: 0.82rem !important;
}

.hr-schedule-bal-check input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.52);
    border-radius: 6px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.hr-schedule-bal-check input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.hr-schedule-bal-check input[type="checkbox"]:checked::after {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.hr-schedule-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hr-schedule-attachments {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hr-schedule-attachment-button {
    min-width: 0;
}

.hr-schedule-attachment-button button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--content-line);
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.035);
    color: var(--text);
    padding: 9px 8px;
}

.hr-schedule-attachment-button button svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.hr-schedule-attachment-button button.is-recording,
.hr-schedule-attachment-button button[data-recording="true"] {
    color: var(--danger);
    border-color: rgba(255, 93, 122, 0.35);
    background: rgba(255, 93, 122, 0.05);
}

.hr-schedule-attachment-button small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.hr-schedule-selection-note {
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
    padding: 10px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.hr-schedule-delete-form .danger-submit {
    background: var(--danger);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hr-schedule-delete-form .danger-submit svg {
    width: 17px;
    height: 17px;
    color: #fff;
}

.hr-schedule-optional-note {
    border: 0;
}

.hr-schedule-optional-note summary {
    padding: 4px 0;
    color: var(--accent);
}

.hr-schedule-tool-form {
    margin-top: 12px;
}

.hr-schedule-utility-panel {
    display: grid;
    gap: 14px;
    padding: 22px 0;
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-utility-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.hr-schedule-utility-head h3,
.hr-schedule-utility-empty h3 {
    margin: 0;
    color: var(--text);
}

.hr-schedule-utility-head p,
.hr-schedule-utility-empty p {
    margin: 5px 0 0;
    color: var(--text-muted);
}

.hr-schedule-utility-grid {
    display: grid;
    gap: 8px;
}

.hr-schedule-utility-grid.compact {
    gap: 6px;
}

.hr-schedule-utility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-utility-row strong,
.hr-schedule-utility-row span {
    display: block;
}

.hr-schedule-utility-row span,
.hr-schedule-utility-row em {
    color: var(--text-muted);
    font-size: 0.83rem;
    font-style: normal;
}

.hr-schedule-inline-form,
.hr-schedule-create-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, minmax(96px, 1fr));
    align-items: end;
}

.hr-schedule-inline-form input,
.hr-schedule-create-strip input,
.hr-schedule-create-strip select {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.34);
    background: transparent;
    color: var(--text);
    padding: 6px 0;
}

.hr-schedule-inline-form button,
.hr-schedule-create-strip button {
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    padding: 8px 12px;
    font-weight: 800;
}

.hr-schedule-utility-subtitle {
    margin: 8px 0 0;
    color: var(--text);
}

.hr-schedule-empty {
    background: var(--content-bg);
    color: var(--text-muted);
    padding: 24px;
    border-left: 1px solid rgba(148, 163, 184, 0.08);
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-utility-empty {
    display: grid;
    gap: 10px;
    padding: 28px 0;
    border-top: 1px solid var(--content-line);
    border-bottom: 1px solid var(--content-line);
}

.hr-schedule-utility-empty h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.hr-schedule-utility-empty p {
    margin: 0;
    max-width: 560px;
    color: var(--text-muted);
    line-height: 1.55;
}

.notifications-overview-grid,
.notifications-preview-shell {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.notifications-preview-shell {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.notifications-preview-card,
.notifications-phone-preview,
.notifications-popup-preview {
    border-bottom: 1px solid var(--content-line);
    padding: 0 0 16px;
}

.notifications-preview-card span,
.notifications-phone-preview span,
.notifications-popup-preview span {
    color: var(--text-muted);
    display: block;
    font-size: 0.78rem;
    margin-bottom: 8px;
}

.notifications-preview-card strong,
.notifications-phone-preview strong,
.notifications-popup-preview strong {
    color: var(--text);
    display: block;
    font-size: 1.22rem;
    letter-spacing: 0;
}

.notifications-preview-card p,
.notifications-phone-preview p,
.notifications-popup-preview p,
.notifications-composer-help span {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 8px 0 0;
}

.notifications-composer-help {
    border-top: 1px solid var(--content-line);
    display: grid;
    gap: 6px;
    margin-top: 12px;
    padding-top: 14px;
}

.notifications-composer-help strong {
    color: var(--text);
    font-size: 0.92rem;
}

.notifications-campaign-detail {
    border-bottom: 1px solid var(--content-line);
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.notifications-campaign-detail dl {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    margin: 0;
}

.notifications-campaign-detail dt {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.notifications-campaign-detail dd {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 3px 0 0;
}

.notifications-campaign-detail p {
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.notifications-campaign-image {
    border: 1px solid var(--content-line);
    border-radius: 8px;
    display: block;
    max-height: 240px;
    max-width: min(420px, 100%);
    object-fit: cover;
}

.hr-broadcasts-shell {
    display: grid;
    gap: 18px;
}

.hr-broadcasts-head,
.hr-broadcast-history-head {
    align-items: center;
    border-bottom: 1px solid var(--content-line);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
}

.hr-broadcasts-head-compact {
    border-bottom: 0;
    justify-content: flex-end;
    padding-bottom: 0;
}

.hr-broadcasts-head h3,
.hr-broadcast-history-head h3 {
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0;
}

.hr-broadcast-submit-row p {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0;
}

.hr-broadcasts-audience,
.hr-broadcast-readonly {
    background: var(--content-bg);
    border: 1px solid var(--content-line);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 12px;
    white-space: nowrap;
}

.hr-broadcast-readonly {
    border-radius: 8px;
    white-space: normal;
}

.hr-broadcast-composer {
    border-bottom: 1px solid var(--content-line);
    display: grid;
    gap: 16px;
    padding: 0 0 18px;
    position: relative;
}

.hr-broadcast-composer-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(360px, 1fr) minmax(340px, 0.95fr);
}

.hr-broadcast-compose-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.hr-broadcast-message,
.hr-broadcast-filters label,
.hr-broadcast-user-search {
    display: grid;
    gap: 7px;
}

.hr-broadcast-message span,
.hr-broadcast-filters label > span,
.hr-broadcast-user-search span,
.hr-broadcast-audience-title span,
.hr-broadcast-user-picker summary small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.hr-broadcast-message textarea,
.hr-broadcast-filters input,
.hr-broadcast-filters select,
.hr-broadcast-user-search input {
    background: var(--content-bg);
    border: 1px solid var(--content-line);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    min-height: 42px;
    padding: 10px 12px;
}

.hr-broadcast-message textarea {
    min-height: 154px;
    resize: vertical;
}

.hr-broadcast-filters {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hr-broadcast-audience-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: 12px;
    padding: 0;
}

.hr-broadcast-audience-title,
.hr-broadcast-user-picker summary {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.hr-broadcast-audience-title strong,
.hr-broadcast-user-picker strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
}

.hr-broadcast-check,
.hr-broadcast-user-option {
    align-items: center;
    color: var(--text);
    cursor: pointer;
    display: flex;
    gap: 10px;
}

.hr-broadcast-check input,
.hr-broadcast-user-option input {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: var(--content-bg);
    border: 1px solid color-mix(in srgb, var(--text-muted) 34%, var(--content-line));
    border-radius: 5px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 17px;
    justify-content: center;
    margin: 0;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    width: 17px;
}

.hr-broadcast-check input::after,
.hr-broadcast-user-option input::after {
    border-bottom: 2px solid #06131a;
    border-left: 2px solid #06131a;
    content: "";
    height: 4px;
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg);
    transition: opacity 0.12s ease;
    width: 8px;
}

.hr-broadcast-check input:checked,
.hr-broadcast-user-option input:checked {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.hr-broadcast-check input:checked::after,
.hr-broadcast-user-option input:checked::after {
    opacity: 1;
}

.hr-broadcast-user-picker {
    border: 1px solid var(--content-line);
    border-radius: 8px;
    display: grid;
    overflow: hidden;
}

.hr-broadcast-user-picker summary {
    cursor: pointer;
    list-style: none;
    min-height: 46px;
    padding: 0 12px;
}

.hr-broadcast-user-picker summary::-webkit-details-marker {
    display: none;
}

.hr-broadcast-user-picker summary > span {
    display: grid;
    gap: 2px;
}

.hr-broadcast-user-picker summary i {
    border-bottom: 2px solid var(--text-muted);
    border-right: 2px solid var(--text-muted);
    display: inline-block;
    height: 8px;
    transform: rotate(45deg);
    transition: transform 0.16s ease;
    width: 8px;
}

.hr-broadcast-user-picker[open] summary {
    border-bottom: 1px solid var(--content-line);
}

.hr-broadcast-user-picker[open] summary i {
    transform: rotate(225deg);
}

.hr-broadcast-user-search {
    padding: 12px 12px 8px;
}

.hr-broadcast-user-list {
    display: grid;
    max-height: 280px;
    overflow: auto;
    padding: 0 12px;
}

.hr-broadcast-user-option {
    border-bottom: 1px solid var(--content-line);
    min-height: 52px;
    padding: 9px 0;
    transition: background 0.16s ease, color 0.16s ease;
}

.hr-broadcast-user-option:last-child {
    border-bottom: 0;
}

.hr-broadcast-user-option:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    margin-inline: -8px;
    padding-inline: 8px;
}

.hr-broadcast-user-option span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hr-broadcast-user-option small,
.hr-broadcast-user-empty,
.hr-broadcast-user-more {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.hr-broadcast-user-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

.hr-broadcast-user-avatar-fallback {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 14%, var(--content-bg));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--content-line));
    color: var(--text);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 600;
    justify-content: center;
}

.hr-broadcast-user-empty {
    border: 1px solid var(--content-line);
    border-radius: 8px;
    margin: 12px;
    padding: 12px;
}

.hr-broadcast-user-more {
    padding: 0 12px 12px;
}

.hr-broadcast-attachments {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hr-broadcast-file {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--content-line);
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    gap: 9px;
    min-height: 42px;
    min-width: 0;
    padding: 8px 0 9px;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.hr-broadcast-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-broadcast-file:hover,
.hr-broadcast-file.has-file {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--content-line));
    color: var(--text);
}

.hr-broadcast-file svg {
    color: var(--accent);
    stroke: currentColor;
}

.hr-broadcast-file svg,
.hr-broadcast-row-stats svg,
.hr-broadcast-attachment-chips svg,
.hr-broadcast-attachment-preview svg,
.hr-broadcast-table svg {
    height: 18px;
    width: 18px;
}

.hr-broadcast-file input {
    display: none;
}

.hr-broadcast-submit-row {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.hr-broadcast-submit-row p:empty {
    display: none;
}

.hr-broadcast-submit-row p.is-error {
    color: var(--danger);
    display: block;
    font-weight: 500;
}

.hr-broadcast-submit-row button {
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 62%, var(--content-line));
    border-radius: 0;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    min-height: 34px;
    padding: 0 0 6px;
    transition: border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.hr-broadcast-submit-row button:hover {
    border-color: var(--accent);
    color: color-mix(in srgb, var(--accent) 82%, #ffffff);
}

.hr-broadcast-submit-row button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.hr-schedule-secondary-link {
    border: 1px solid var(--content-line);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.hr-broadcast-history,
.hr-broadcast-detail {
    display: grid;
    gap: 12px;
}

.hr-broadcast-history .table-scroll {
    max-height: 560px;
}

.hr-broadcast-history-head {
    border-bottom: 0;
    padding-bottom: 4px;
}

.hr-broadcast-history-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.hr-broadcast-history-search {
    align-items: center;
    border-bottom: 1px solid var(--content-line);
    color: var(--text-muted);
    display: inline-flex;
    gap: 8px;
    min-height: 34px;
    padding: 0 0 7px;
}

.hr-broadcast-history-search span {
    font-size: 0.76rem;
    font-weight: 500;
}

.hr-broadcast-history-search input {
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    min-width: 190px;
    outline: none;
}

.hr-broadcast-view-toggle,
.hr-broadcast-pagination {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.hr-broadcast-view-toggle a,
.hr-broadcast-pagination a,
.hr-broadcast-pagination span,
.hr-broadcast-pagination strong {
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 0 6px;
    text-decoration: none;
}

.hr-broadcast-view-toggle a.is-active,
.hr-broadcast-pagination strong {
    background: transparent;
    border-color: var(--accent);
    color: var(--text);
    font-weight: 600;
}

.hr-broadcast-table {
    min-width: 920px;
}

.hr-broadcast-table td {
    vertical-align: middle;
}

.hr-broadcast-table tbody tr {
    cursor: pointer;
}

.hr-broadcast-list,
.hr-broadcast-recipient-list {
    display: grid;
}

.hr-broadcast-recipient-section {
    display: grid;
    gap: 10px;
}

.hr-broadcast-recipient-section.is-loading {
    opacity: 0.62;
    pointer-events: none;
}

.hr-broadcast-recipient-list {
    max-height: min(420px, 42vh);
    overflow: auto;
    padding-right: 4px;
}

.hr-broadcast-row,
.hr-broadcast-recipient-row {
    align-items: center;
    border-bottom: 1px solid var(--content-line);
    color: inherit;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px 0;
    text-decoration: none;
}

.hr-broadcast-row.is-active {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    margin-inline: -8px;
    padding-inline: 8px;
}

.hr-broadcast-row-main,
.hr-broadcast-recipient-row div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.hr-broadcast-row-main strong,
.hr-broadcast-recipient-row strong {
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 600;
}

.hr-broadcast-row-main span,
.hr-broadcast-recipient-row span,
.hr-broadcast-recipient-row em {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-style: normal;
}

.hr-broadcast-row-stats,
.hr-broadcast-attachment-chips,
.hr-broadcast-attachment-icons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.hr-broadcast-row-stats span,
.hr-broadcast-attachment-chips small {
    align-items: center;
    border: 1px solid var(--content-line);
    border-radius: 999px;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 500;
    gap: 5px;
    padding: 5px 8px;
}

.hr-broadcast-attachment-icons .media-cell-button {
    height: 30px;
    width: 30px;
}

.hr-broadcast-attachment-icons .media-cell-button i,
.hr-broadcast-attachment-icons .media-cell-button i svg {
    height: 22px;
    width: 22px;
}

.hr-broadcast-detail-modal[hidden] {
    display: none !important;
}

.hr-broadcast-detail-card {
    max-height: min(760px, calc(100vh - 48px));
    max-width: min(760px, calc(100vw - 40px));
    overflow: auto;
    position: relative;
    width: min(760px, calc(100vw - 40px));
}

.hr-broadcast-detail-close {
    position: absolute;
    right: 16px;
    top: 14px;
    z-index: 2;
}

.hr-broadcast-detail-summary {
    align-items: flex-start;
    border-bottom: 1px solid var(--content-line);
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 42px 14px 0;
}

.hr-broadcast-detail-summary h3,
.hr-broadcast-detail-summary p,
.hr-broadcast-detail-body {
    margin: 0;
}

.hr-broadcast-detail-summary h3 {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
}

.hr-broadcast-detail-summary p,
.hr-broadcast-detail-body {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.hr-broadcast-detail-body {
    border-bottom: 1px solid var(--content-line);
    padding: 0 0 12px;
    white-space: pre-wrap;
}

.hr-broadcast-detail-attachments {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.hr-broadcast-attachment-preview {
    align-items: center;
    background: var(--content-bg);
    border: 1px solid var(--content-line);
    border-radius: 8px;
    color: var(--text);
    display: flex;
    gap: 9px;
    min-height: 46px;
    overflow: hidden;
    padding: 9px 10px;
    text-decoration: none;
}

.hr-broadcast-attachment-preview.is-media {
    align-items: stretch;
    display: grid;
    gap: 7px;
    padding: 8px;
}

.hr-broadcast-attachment-preview.is-media img {
    border-radius: 6px;
    height: 112px;
    object-fit: cover;
    width: 100%;
}

.hr-broadcast-attachment-preview.is-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.hr-broadcast-attachment-preview audio,
.hr-broadcast-attachment-preview video {
    max-height: 160px;
    width: 100%;
}

.settings-regions-warehouse-cell {
    display: grid;
    gap: 3px;
    min-width: 180px;
}

.settings-regions-warehouse-cell strong {
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
}

.settings-regions-warehouse-cell span,
.settings-regions-warehouse-cell em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.25;
}

.client-ledger-section {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.client-ledger-section .card-head {
    border-bottom: 1px solid var(--content-line);
    padding-bottom: 10px;
}

.client-ledger-section .card-head h4 {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0;
}

.client-ledger-section .card-head p {
    color: var(--muted);
    font-size: 12px;
    margin: 4px 0 0;
}

.client-representatives {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    min-width: 0;
}

.client-representatives .card-head {
    border-bottom: 1px solid var(--content-line);
    margin-bottom: 0;
    padding-bottom: 10px;
}

.client-representatives .card-head h4 {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0;
}

.client-representatives .card-head p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 4px 0 0;
}

.client-representative-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 1fr) minmax(170px, 0.8fr) auto;
    padding: 14px;
    border: 1px solid var(--content-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-subtle) 84%, transparent);
}

.client-representative-form label {
    display: grid;
    gap: 5px;
}

.client-representative-form label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.client-representative-form input {
    background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
    border: 1px solid var(--content-line);
    border-radius: 8px;
    color: var(--text);
    min-height: 34px;
    padding: 7px 9px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.client-representative-form input:focus {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--content-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    background: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
}

.client-representatives .inline-form {
    display: inline-flex;
    margin: 0;
}

.client-representatives .client-representative-action,
.client-representative-form .client-representative-submit {
    min-height: 34px;
    padding-bottom: 8px;
    white-space: nowrap;
}

.client-representatives .client-representative-action {
    font-size: 0.78rem;
}

.client-representative-form .client-representative-submit {
    justify-self: start;
    font-weight: 700;
}

@media (max-width: 920px) {
    .client-representative-form {
        grid-template-columns: 1fr;
    }

    .hr-statistics-rings,
    .hr-ranking-cards,
    .hr-statistics-main,
    .hr-statistics-average dl,
    .notifications-overview-grid,
    .notifications-preview-shell,
    .hr-broadcast-composer-grid,
    .hr-broadcast-attachments {
        grid-template-columns: 1fr;
    }

    .notifications-campaign-detail dl {
        grid-template-columns: 1fr 1fr;
    }

    .hr-broadcast-submit-row,
    .hr-broadcasts-head,
    .hr-broadcast-history-head,
    .hr-broadcast-row,
    .hr-broadcast-recipient-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .hr-broadcast-submit-row {
        flex-direction: column;
    }
}

.settings-unique-ids-legend {
    margin: 12px 0 18px;
    max-width: 1120px;
    font-size: 13px;
    line-height: 1.6;
}

.settings-unique-ids-legend p + p {
    margin-top: 8px;
}

.settings-unique-ids-table td {
    vertical-align: top;
    white-space: normal;
    min-width: 100px;
    max-width: 320px;
    overflow-wrap: anywhere;
}

.table-card:has(.settings-unique-ids-table),
.table-scroll:has(.settings-unique-ids-table) {
    min-width: 0;
    max-width: 100%;
}

.settings-unique-ids-table .unique-id-code,
.settings-unique-ids-table .unique-id-field {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    min-width: 180px;
}

.settings-unique-ids-table .unique-id-rule {
    min-width: 240px;
    line-height: 1.55;
}

.settings-unique-ids-table summary {
    cursor: pointer;
}

.settings-unique-ids-table details code,
.settings-unique-ids-table details pre {
    display: block;
    max-width: 260px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .panel-surface:has(.settings-unique-ids-table) .panel-head.panel-head-finance-promoted-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-surface:has(.settings-unique-ids-table) .panel-head .finance-panel-toolbar {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        justify-self: stretch;
        overflow: visible;
    }

    .panel-surface:has(.settings-unique-ids-table) .panel-head .finance-panel-toolbar .table-toolbar,
    .panel-surface:has(.settings-unique-ids-table) .panel-head .finance-panel-toolbar .table-toolbar-actions {
        min-width: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .panel-surface:has(.settings-unique-ids-table) .panel-head .finance-panel-toolbar .table-search {
        flex: 1 1 14rem;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    .panel-surface:has(.settings-unique-ids-table) .panel-head .finance-panel-toolbar .table-search input {
        min-width: 0;
    }
}