:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #17212b;
  --muted: #66717f;
  --line: #d9e0e7;
  --primary: #1468d8;
  --primary-dark: #0d4ea6;
  --danger: #c93f3f;
  --ok-bg: #e9f7ef;
  --warn-bg: #fff5df;
  --attachment-group-modal-width: 1080px;
  --attachment-group-modal-max-width: 96vw;
  --attachment-group-modal-max-height: 88vh;
  --z-list-sticky: 40;
  --z-list-sticky-select: 45;
  --z-list-body-sticky: 12;
  --z-page-floating: 220;
  --z-toolbar-floating: 240;
  --z-topbar: 300;
  --z-topbar-floating: 320;
  --z-modal: 1200;
  --z-modal-high: 1250;
  --z-alert: 1320;
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  --page-left-gap: 3em;
  --page-right-gap: 3em;
  --topbar-height: 64px;
  --window-shelf-height: 53px;
  --list-text-align: left;
  --list-default-column-width: 128px;
  --list-default-row-height: 42px;
  --list-row-hover-color: #edf8f5;
  overflow-y: auto;
}

body.login-page-body {
  background: #fdeff4;
}

body.page-scrollbar-scope-below_shelf:not(.login-page-body):not(.modal-frame) {
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

body.page-scrollbar-scope-below_shelf:not(.login-page-body):not(.modal-frame) .topbar,
body.page-scrollbar-scope-below_shelf:not(.login-page-body):not(.modal-frame) .window-shelf {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}

body.page-scrollbar-scope-below_shelf:not(.login-page-body):not(.modal-frame) .page {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px min(var(--page-right-gap), 10vw) 48px min(var(--page-left-gap), 10vw);
}

html:has(body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame) [data-global-list-scope]) {
  overflow-y: hidden;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) {
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .topbar,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .window-shelf {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 12px min(var(--page-right-gap), 10vw) 16px min(var(--page-left-gap), 10vw);
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .global-page-layout-canteen,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) [data-global-page-layout="canteen"] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .messages,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .page-header,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .company-view-switch,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .stats-row,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .stat-grid,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .toolbar {
  flex: 0 0 auto;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) [data-global-list-scope] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) [data-global-list-scope-tabs],
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .global-list-scope-row,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .canteen-ledger-command-row {
  flex: 0 0 auto;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .global-list-wrap,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .canteen-data-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .canteen-ledger-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-list-body-sticky);
  flex: 0 0 auto;
}

a {
  color: var(--primary);
  text-decoration: none;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 0 18px 0 12px;
  background: #ffffff;
  color: #163047;
  border-bottom: 1px solid #e3e9f2;
  box-shadow: 0 1px 0 rgba(22, 48, 71, 0.04);
  flex-wrap: nowrap;
  row-gap: 4px;
}

.topbar-brand-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-height: 58px;
  color: #20384f;
  cursor: default;
  text-decoration: none;
}

.topbar-brand-mark.is-logo-hidden {
  width: 0;
  min-height: 58px;
  overflow: hidden;
}

.topbar-brand-icon {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.topbar-menu-mark {
  display: inline-grid;
  width: 22px;
  gap: 4px;
}

.topbar-menu-mark span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.topbar-brand-text {
  letter-spacing: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar-search {
  position: relative;
  z-index: var(--z-topbar);
  display: flex;
  flex: 0 0 auto;
  width: 12em;
  min-width: 12em;
  max-width: 12em;
  align-items: center;
}

.topbar-search-field {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}

.topbar-search-icon {
  position: absolute;
  left: 12px;
  width: 13px;
  height: 13px;
  border: 2px solid #7c8da5;
  border-radius: 50%;
  pointer-events: none;
}

.topbar-search-icon::after {
  position: absolute;
  right: -6px;
  bottom: -5px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #7c8da5;
  content: "";
  transform: rotate(45deg);
}

.topbar-search input {
  width: 100%;
  height: 38px;
  border: 1px solid #cbd8e8;
  border-radius: 4px;
  background: #ffffff;
  color: #21384d;
  font-size: 14px;
  outline: none;
  padding: 0 38px 0 38px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-search input:focus {
  border-color: #2d84d6;
  box-shadow: 0 0 0 3px rgba(45, 132, 214, 0.12);
}

.topbar-search-clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.topbar-search-clear:hover,
.topbar-search-clear:focus-visible {
  background: #edf4fb;
  color: #0f70c8;
}

.topbar-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-topbar-floating);
  display: grid;
  width: min(520px, calc(100vw - 36px));
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9e5f2;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(18, 42, 68, 0.16);
}

.topbar-search-panel[hidden] {
  display: none;
}

.topbar-search-panel strong {
  color: #1b2f44;
  font-size: 15px;
}

.topbar-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-search-tags button {
  min-height: 28px;
  border: 1px solid #d7e2ef;
  border-radius: 4px;
  background: #ffffff;
  color: #35516a;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 10px;
}

.topbar-search-tags button:hover,
.topbar-search-tags button:focus-visible {
  border-color: #8bb8e6;
  background: #eef6ff;
  color: #0f70c8;
}

.topbar-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
}

.topbar-search-result {
  display: grid;
  gap: 3px;
  min-height: 46px;
  border: 1px solid #e3eaf3;
  border-radius: 4px;
  color: #23384f;
  text-decoration: none;
  padding: 8px 10px;
}

.topbar-search-result:hover,
.topbar-search-result:focus-visible {
  border-color: #9bc4ee;
  background: #f2f8ff;
  color: #0f70c8;
}

.topbar-search-result span {
  font-size: 14px;
  font-weight: 700;
}

.topbar-search-result small,
.topbar-search-empty {
  color: #75869a;
  font-size: 12px;
}

.brand {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #163047;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.main-menu-link {
  width: auto;
  min-width: 56px;
  padding: 0 8px;
  font-size: 16px;
  text-decoration: none;
}

.brand:hover {
  background: #c1def8;
  color: #0f2a42;
}

.home-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 19px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 2px;
  margin-top: 5px;
}

.home-icon::before {
  position: absolute;
  top: -9px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transform-origin: center;
}

.home-icon-door {
  position: absolute;
  bottom: -2px;
  left: 7px;
  width: 7px;
  height: 10px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.topnav {
  display: flex;
  min-width: 0;
  align-items: center;
  align-self: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 2px;
  overflow: visible;
  white-space: nowrap;
}

.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-trigger,
.topnav > a {
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  border: 0;
  background: transparent;
  border-bottom: 3px solid transparent;
  padding: 0 13px;
  color: #26384a;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.nav-trigger:hover,
.nav-trigger:focus,
.nav-group:focus-within .nav-trigger,
.nav-group.is-open .nav-trigger,
.nav-group:hover .nav-trigger,
.topnav > a:hover {
  background: transparent;
  border-bottom-color: #0f70c8;
  color: #0f70c8;
}

.nav-menu {
  position: fixed;
  top: var(--topbar-height, 58px);
  right: 0;
  left: 0;
  z-index: var(--z-topbar-floating);
  display: none;
  width: 100vw;
  min-width: 0;
  max-width: none;
  max-height: calc(100vh - var(--topbar-height, 58px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-top: 1px solid #edf1f6;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(28, 44, 64, 0.12);
}

.nav-menu-right {
  right: auto;
  left: 18px;
}

.nav-group.is-open .nav-menu,
.nav-group:focus-within .nav-menu {
  display: block;
}

.nav-mega-inner {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  min-height: 350px;
  margin: 0;
}

.nav-mega-side {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 350px;
  padding: 34px 34px 28px;
  background: #f7f9fc;
  color: #20384f;
}

.nav-mega-side-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
}

.nav-mega-side-title span {
  color: #101b2a;
  font-size: 28px;
}

.nav-mega-side p {
  margin: 0;
  color: #7d8998;
  font-size: 15px;
  line-height: 1.9;
  white-space: normal;
}

.nav-mega-side small {
  color: #a0a8b3;
  font-size: 13px;
}

.nav-mega-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 28px 44px;
  padding: 34px 44px 38px;
}

.nav-menu a {
  color: #26384a;
  font-size: 15px;
  font-weight: 500;
  white-space: normal;
}

.nav-menu a:hover,
.nav-menu a:focus {
  background: transparent;
  color: #0f70c8;
}

.nav-subgroup {
  display: block;
  min-width: 0;
  padding: 0;
  border-top: 0;
}

.nav-subgroup-wide {
  display: grid;
  grid-column: span 2;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.nav-mega-section {
  display: grid;
  align-content: start;
  gap: 12px;
}

.nav-mega-section-single {
  gap: 0;
}

.nav-subgroup:first-child {
  border-top: 0;
}

.nav-subtrigger {
  display: inline-flex;
  align-items: start;
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: #18283a;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
  white-space: normal;
}

.nav-mega-heading {
  line-height: 1.3;
}

.nav-subtrigger-link {
  color: #18283a;
}

.nav-subtrigger:hover,
.nav-subtrigger:focus {
  background: transparent;
  color: #0f70c8;
}

.nav-submenu {
  display: grid;
  min-width: 0;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav-submenu-two-column {
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 8px 22px;
  max-width: min(430px, 100%);
}

.nav-submenu a {
  display: inline-flex;
  width: fit-content;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #6d7a88;
  font-size: 14px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nav-submenu-two-column a {
  width: 100%;
  min-width: 0;
}

.window-shelf {
  position: sticky;
  top: var(--topbar-height, 64px);
  z-index: var(--z-toolbar-floating);
  display: flex;
  min-height: 40px;
  align-items: center;
  border-bottom: 1px solid #bfd9f1;
  background: #eef7ff;
  padding: 6px 16px;
  box-shadow: 0 4px 14px rgba(22, 48, 71, 0.08);
}

body:not(.login-page-body):not(.modal-frame) {
  padding-top: var(--topbar-height, 64px);
}

body:not(.login-page-body):not(.modal-frame):has(.window-shelf:not([hidden])) {
  padding-top: calc(var(--topbar-height, 64px) + var(--window-shelf-height, 53px));
}

body:not(.login-page-body):not(.modal-frame) .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  min-height: var(--topbar-height, 64px);
}

body:not(.login-page-body):not(.modal-frame) .window-shelf {
  position: fixed;
  top: var(--topbar-height, 64px);
  right: 0;
  left: 0;
  min-height: var(--window-shelf-height, 53px);
}

body.page-scrollbar-scope-below_shelf:not(.login-page-body):not(.modal-frame) .topbar,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

body.page-scrollbar-scope-below_shelf:not(.login-page-body):not(.modal-frame) .window-shelf,
body.list-page-layout-fixed_list:not(.login-page-body):not(.modal-frame):has([data-global-list-scope]) .window-shelf {
  position: fixed;
  top: var(--topbar-height, 64px);
  right: 0;
  left: 0;
}

.window-shelf[hidden] {
  display: none !important;
}

.window-shelf-list {
  display: flex;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 1px;
}

.window-shelf-company-switch {
  position: relative;
  flex: 0 0 auto;
  margin-right: 8px;
}

.window-shelf-company-switch[open]::before {
  position: absolute;
  z-index: var(--z-toolbar-floating);
  top: 100%;
  left: 0;
  width: min(440px, 86vw);
  height: 8px;
  content: "";
}

.window-shelf-company-switch summary {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  border: 1px solid #9ec7e9;
  border-radius: 6px;
  background: #ffffff;
  color: #174765;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 12px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.08);
}

.window-shelf-company-switch summary::-webkit-details-marker {
  display: none;
}

.window-shelf-company-switch summary::after {
  color: #4c7a9e;
  content: "▾";
  font-size: 12px;
}

.window-shelf-company-switch[open] summary,
.window-shelf-company-switch summary:hover,
.window-shelf-company-switch summary:focus-visible {
  border-color: #67aee4;
  background: #dff0ff;
  color: #0f2a42;
  outline: none;
}

.window-shelf-company-label {
  color: #476070;
  font-weight: 700;
}

.window-shelf-company-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-toolbar-floating);
  display: grid;
  min-width: 220px;
  max-width: min(440px, 86vw);
  max-height: 320px;
  gap: 5px;
  overflow: auto;
  border: 1px solid #b9d7ee;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 14px 28px rgba(25, 58, 88, 0.16);
}

.window-shelf-company-menu a {
  border-radius: 6px;
  color: #29465a;
  font-size: 13px;
  line-height: 1.35;
  padding: 7px 9px;
  text-decoration: none;
}

.window-shelf-company-menu a:hover,
.window-shelf-company-menu a:focus-visible {
  background: #edf7ff;
  outline: none;
}

.window-shelf-company-menu a.selected {
  background: #d6f3df;
  color: #135c31;
  font-weight: 800;
}

.window-shelf-workbench {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid #9ec7e9;
  border-radius: 6px;
  background: #ffffff;
  color: #174765;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  margin-right: 8px;
  padding: 5px 12px 5px 9px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.08);
}

.window-shelf-workbench:hover,
.window-shelf-workbench:focus-visible {
  border-color: #67aee4;
  background: #dff0ff;
  color: #0f2a42;
  outline: none;
}

.window-shelf-workbench-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.window-shelf-workbench-icon::before,
.window-shelf-workbench-icon::after {
  position: absolute;
  content: "";
  background: currentColor;
}

.window-shelf-workbench-icon::before {
  top: 5px;
  right: 2px;
  left: 2px;
  height: 2px;
}

.window-shelf-workbench-icon::after {
  top: 2px;
  bottom: 2px;
  left: 5px;
  width: 2px;
}

.global-record-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
}

.global-record-actions-title {
  color: #476070;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.global-record-action-button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid #9fc4e5;
  border-radius: 6px;
  padding: 5px 10px;
  background: #fff;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.08);
}

.global-record-action-button:hover,
.global-record-action-button:focus-visible {
  border-color: #76addd;
  background: #dff0ff;
  outline: none;
}

.global-record-action-button.danger-action {
  border-color: #efb6b6;
  background: #fff7f7;
  color: #a92828;
}

.global-record-action-button.is-action-denied,
.compact-list-action.is-action-denied,
.primary-button.is-action-denied,
.primary-link.is-action-denied,
.secondary-button.is-action-denied {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #8795a6;
  box-shadow: none;
  cursor: not-allowed;
}

.global-record-action-button.is-action-denied:hover,
.global-record-action-button.is-action-denied:focus-visible,
.compact-list-action.is-action-denied:hover,
.compact-list-action.is-action-denied:focus-visible,
.primary-link.is-action-denied:hover,
.primary-link.is-action-denied:focus-visible {
  border-color: #c8d3df;
  background: #edf2f7;
  color: #6e7d8f;
}

.global-import-export {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: 10px;
}

.global-import-export-trigger {
  min-height: 30px;
  border: 1px solid #9fc4e5;
  border-radius: 6px;
  padding: 5px 13px;
  background: #fff;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.08);
}

.global-import-export-trigger:hover,
.global-import-export-trigger:focus-visible {
  border-color: #76addd;
  background: #dff0ff;
  outline: none;
}

.global-import-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-toolbar-floating);
  display: grid;
  min-width: 210px;
  gap: 5px;
  border: 1px solid #b9d1e7;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 50, 75, 0.18);
}

.global-import-export-menu[hidden] {
  display: none;
}

.global-import-export-item {
  display: flex;
  min-height: 32px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: #f4f9fd;
  color: var(--primary-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.global-import-export-item:hover,
.global-import-export-item:focus-visible {
  background: #e2f1ff;
  color: #0f2a42;
  outline: none;
}

.global-import-export-item.is-action-denied {
  background: #f4f7fb;
  color: #8795a6;
  cursor: not-allowed;
}

.global-import-export-item.is-action-denied:hover,
.global-import-export-item.is-action-denied:focus-visible {
  background: #edf2f7;
  color: #6e7d8f;
}

.global-import-export-empty {
  display: block;
  border-radius: 6px;
  padding: 8px 10px;
  background: #f6f8fb;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.global-import-export-form {
  display: grid;
  gap: 5px;
}

.global-import-export-upload {
  position: relative;
  overflow: hidden;
}

.global-import-export-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.global-import-export .file-upload-name {
  padding: 0 2px;
  font-size: 12px;
}

.global-help-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.global-help-button,
.global-help-edit-link {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid #9fc4e5;
  border-radius: 6px;
  padding: 5px 13px;
  background: #fff;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.08);
}

.global-help-button:hover,
.global-help-button:focus-visible,
.global-help-edit-link:hover,
.global-help-edit-link:focus-visible {
  border-color: #76addd;
  background: #dff0ff;
  color: #0f2a42;
  outline: none;
}

.window-shelf-item {
  position: relative;
  display: inline-flex;
  max-width: 210px;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid #a9cceb;
  border-radius: 6px;
  background: #ffffff;
  color: #24435d;
  cursor: grab;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 27px 5px 10px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.08);
}

.window-shelf-item:hover,
.window-shelf-item:focus-within {
  border-color: #76addd;
  background: #dff0ff;
  color: #0f2a42;
}

.window-shelf-item-current {
  border-color: #209c63;
  background: #d8f4e4;
  color: #123d2c;
  box-shadow: inset 0 0 0 1px rgba(32, 156, 99, 0.22), 0 2px 8px rgba(22, 86, 58, 0.12);
}

.window-shelf-item-current:hover,
.window-shelf-item-current:focus-within {
  border-color: #168153;
  background: #c9efd9;
  color: #0f3023;
}

.window-shelf-item-current .window-shelf-link {
  font-weight: 900;
}

.window-shelf-item.dragging {
  opacity: 0.56;
}

.window-shelf-link {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-shelf-close {
  position: absolute;
  top: 1px;
  right: 3px;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #66717f;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.window-shelf-close:hover,
.window-shelf-close:focus-visible {
  background: #ffe0e0;
  color: #9b2525;
}

.window-shelf-context-menu {
  position: fixed;
  z-index: var(--z-toolbar-floating);
  display: grid;
  min-width: 136px;
  gap: 4px;
  border: 1px solid #b8d1e9;
  border-radius: 8px;
  padding: 7px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(18, 42, 68, 0.2);
}

.window-shelf-context-menu[hidden] {
  display: none;
}

.window-shelf-context-menu button {
  display: flex;
  min-height: 32px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: #f5f9fd;
  color: #24425d;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 10px;
  text-align: left;
}

.window-shelf-context-menu button:hover,
.window-shelf-context-menu button:focus-visible {
  background: #dff0ff;
  color: #0f70c8;
  outline: none;
}

.module-help-entry {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 auto 10px;
  max-width: 1200px;
}

.module-help-button,
.module-help-edit-link {
  min-height: 32px;
  border: 1px solid #a7c5eb;
  border-radius: 6px;
  background: #f8fbff;
  color: #1f4f8f;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.module-help-edit-link {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.module-help-modal[hidden] {
  display: none;
}

.module-help-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.module-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.module-help-card {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(76vh, 720px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.24);
}

.module-help-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.module-help-header h2,
.module-help-header p {
  margin: 0;
}

.module-help-header p {
  color: var(--muted);
  font-size: 13px;
}

.module-help-close {
  width: 34px;
  height: 34px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff7f7;
  color: #991b1b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.module-help-content {
  padding: 18px 20px 22px;
  line-height: 1.75;
}

.module-help-content p {
  margin-top: 0;
}

.module-help-media-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.module-help-media-item {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid #d9e6f2;
  border-radius: 6px;
  background: #f8fbff;
}

.module-help-media-item img,
.module-help-media-item video {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 4px;
  background: #0f172a;
}

.module-help-media-item figcaption {
  color: #4b5d72;
  font-size: 13px;
  font-weight: 700;
  word-break: break-all;
}

.modal-frame {
  background: #f7fbff;
}

.modal-frame .page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px;
}

.modal-frame .page-header {
  margin-bottom: 14px;
}

.modal-frame .page-header > a.secondary-link,
.modal-frame .page-header > .button-row {
  display: none !important;
}

.modal-frame .page-header .action-row,
.modal-frame .messages {
  display: none;
}

.app-message-modal[hidden] {
  display: none;
}

.app-message-modal {
  position: fixed;
  z-index: var(--z-alert);
  top: var(--app-message-top, 0);
  left: var(--app-message-left, 0);
  display: grid;
  width: var(--app-message-width, 100vw);
  height: var(--app-message-height, 100vh);
  place-items: center;
  padding: 18px;
}

.app-message-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
}

.app-message-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(640px, calc(100% - 28px));
  gap: 22px;
  border: 1px solid #bfd7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  padding: 24px 28px 22px;
}

.app-message-body {
  display: grid;
  gap: 10px;
}

.app-message-body h2 {
  margin: 0;
  color: #17212b;
  font-size: 22px;
  line-height: 1.25;
}

.app-message-body p {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.app-message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.app-message-actions button[hidden] {
  display: none;
}

.app-message-ok,
.app-message-cancel {
  min-width: 82px;
}

.create-record-modal[hidden] {
  display: none;
}

.create-record-modal {
  position: fixed;
  z-index: var(--z-modal-high);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.create-record-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.create-record-modal.is-nested-create-record .create-record-backdrop {
  background: rgba(15, 23, 42, 0.36);
}

.create-record-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1100px, 96vw);
  height: min(860px, 92vh);
  overflow: hidden;
  border: 1px solid #b8d8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.create-record-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-bottom: 1px solid #d8e8f7;
  padding: 12px 16px;
  background: #f8fbff;
}

.global-popup-window-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.global-popup-window-close {
  order: 1;
}

.global-popup-window-minimize {
  order: 2;
}

.global-popup-window-maximize {
  order: 3;
}

.global-popup-window-button {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), 0 1px 2px rgba(15, 23, 42, 0.12);
}

.global-popup-window-button::before,
.global-popup-window-button::after {
  position: absolute;
  content: "";
}

.global-popup-window-close {
  background: #ff5f57;
}

.global-popup-window-close::before,
.global-popup-window-close::after {
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(95, 23, 23, 0.72);
  opacity: 1;
  transform: rotate(45deg);
}

.global-popup-window-close::after {
  transform: rotate(-45deg);
}

.global-popup-window-minimize {
  background: #ffbd2e;
}

.global-popup-window-minimize::before {
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.72);
}

.global-popup-window-maximize {
  background: #2ecb64;
}

.global-popup-window-maximize::before {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(17, 63, 38, 0.72);
  border-radius: 2px;
}

.is-windows-controls .create-record-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 0 16px;
  background: #ffffff;
}

.is-windows-controls .create-record-header strong {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.is-windows-controls .global-popup-window-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  gap: 0;
}

.is-windows-controls .global-popup-window-minimize {
  order: 1;
}

.is-windows-controls .global-popup-window-maximize {
  order: 2;
}

.is-windows-controls .global-popup-window-close {
  order: 3;
}

.is-windows-controls .global-popup-window-button {
  width: 46px;
  height: 44px;
  flex: 0 0 46px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.is-windows-controls .global-popup-window-button:hover,
.is-windows-controls .global-popup-window-button:focus-visible {
  outline: none;
  transform: none;
}

.is-windows-controls .global-popup-window-minimize:hover,
.is-windows-controls .global-popup-window-minimize:focus-visible,
.is-windows-controls .global-popup-window-maximize:hover,
.is-windows-controls .global-popup-window-maximize:focus-visible {
  background: #e5e9ef;
}

.is-windows-controls .global-popup-window-close:hover,
.is-windows-controls .global-popup-window-close:focus-visible {
  background: #e81123;
}

.is-windows-controls .global-popup-window-close::before,
.is-windows-controls .global-popup-window-close::after {
  width: 13px;
  height: 1.5px;
  background: #111827;
  opacity: 1;
}

.is-windows-controls .global-popup-window-close:hover::before,
.is-windows-controls .global-popup-window-close:hover::after,
.is-windows-controls .global-popup-window-close:focus-visible::before,
.is-windows-controls .global-popup-window-close:focus-visible::after {
  background: #ffffff;
}

.is-windows-controls .global-popup-window-minimize::before {
  width: 12px;
  height: 1.5px;
  background: #111827;
}

.is-windows-controls .global-popup-window-maximize::before {
  width: 11px;
  height: 11px;
  border: 1.5px solid #111827;
  border-radius: 0;
}

.is-windows-controls.is-maximized .global-popup-window-maximize::before {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  transform: translate(-2px, 2px);
}

.is-windows-controls.is-maximized .global-popup-window-maximize::after {
  width: 10px;
  height: 10px;
  border: 1.5px solid #111827;
  background: transparent;
  transform: translate(2px, -2px);
}

.global-popup-window-button:hover,
.global-popup-window-button:focus-visible {
  outline: 3px solid rgba(49, 127, 246, 0.24);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.is-windows-controls .global-popup-window-button:hover,
.is-windows-controls .global-popup-window-button:focus-visible {
  outline: none;
  outline-offset: 0;
  transform: none;
}

.create-record-card.is-maximized {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-width: none;
  max-height: none;
}

.global-popup-window-task {
  cursor: pointer;
  padding-right: 10px;
}

.global-popup-window-task::after {
  display: none;
}

.global-popup-task-fallback[hidden] {
  display: none;
}

.global-popup-task-fallback {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: calc(var(--z-modal-high) + 2);
  max-width: min(520px, calc(100vw - 36px));
}

.global-popup-task-fallback-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.global-popup-task-fallback .global-popup-window-task {
  cursor: pointer;
  padding-right: 10px;
}

.create-record-header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-record-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7fbff;
}

@media (max-width: 720px) {
  .create-record-modal {
    padding: 8px;
  }

  .create-record-card {
    width: 100%;
    height: calc(100vh - 16px);
  }

  .create-record-header {
    gap: 10px;
    padding: 10px 12px;
  }

  .global-popup-window-controls {
    gap: 8px;
  }

  .global-popup-window-button {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .modal-frame .page {
    padding: 12px;
  }
}

.module-help-tree {
  display: grid;
  gap: 8px;
}

.module-help-tree-node {
  display: grid;
  gap: 6px;
}

.module-help-tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px 8px calc(10px + var(--depth, 0) * 22px);
}

.module-help-tree-row > div:first-child {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.module-help-tree-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.module-help-tree-children {
  display: grid;
  gap: 6px;
}

.topuser {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
  color: #163047;
  font-size: 16px;
  white-space: nowrap;
}

.topbar.topbar-fit-one-line {
  flex-wrap: nowrap;
}

.topbar.topbar-menu-fits .topnav {
  overflow: visible;
}

.topbar.topbar-fit-one-line .topnav {
  flex: 1 1 auto;
  overflow: visible;
}

.topbar.topbar-fit-one-line .topuser {
  flex: 0 0 auto;
}

.topuser-logout-stack {
  display: flex;
  min-width: 58px;
  align-items: center;
  gap: 4px;
}

.topuser-online {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #16713a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 0 2px;
  text-decoration: none;
  white-space: nowrap;
}

.topuser-online:hover,
.topuser-online:focus-visible {
  background: transparent;
  color: #0f5b2f;
}

.topuser-account-row {
  position: relative;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
}

.topuser-account-trigger {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 0;
  background: transparent;
  color: #163047;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  gap: 5px;
  padding: 4px 6px;
}

.topuser-caret {
  color: #45647d;
  font-size: 14px;
  line-height: 1;
}

.topuser-name {
  display: block;
  max-width: 120px;
  overflow: hidden;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topuser-account-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-topbar-floating);
  display: none;
  min-width: 118px;
  border: 1px solid #a9cceb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 48, 71, 0.18);
  padding: 4px;
}

.topuser-account-row:hover .topuser-account-dropdown,
.topuser-account-row:focus-within .topuser-account-dropdown {
  display: grid;
}

.topuser-account-dropdown a {
  display: block;
  border-radius: 5px;
  color: #24435d;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.topuser-account-dropdown a:hover,
.topuser-account-dropdown a:focus {
  background: #e8f4ff;
  color: #0f2a42;
}

.topuser form {
  margin: 0;
}

.topuser-button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid #9fc2e2;
  border-radius: 6px;
  background: #eef7ff;
  color: #163047;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.topuser-button:hover {
  background: #c1def8;
  color: #0f2a42;
}

.logout-button {
  border-color: #d8b9b9;
  background: #fff4f4;
  color: #9b2525;
}

.logout-button:hover {
  border-color: #c93333;
  background: #ffe0e0;
  color: #7d1f1f;
}

.logout-close-form {
  position: absolute;
  top: 7px;
  right: 10px;
}

.logout-close-button {
  display: inline-flex;
  width: 38px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid #92b6d6;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fbff 0%, #dcefff 100%);
  box-shadow: 0 1px 2px rgba(22, 48, 71, 0.14);
  color: #163047;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.logout-close-button:hover {
  border-color: #c93333;
  background: linear-gradient(180deg, #ef6b6b 0%, #c93333 100%);
  box-shadow: 0 2px 6px rgba(158, 37, 37, 0.24);
  color: #ffffff;
}

.window-close-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.24);
}

.window-close-icon::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  border-top: 2px solid currentColor;
  content: "";
}

.window-close-icon-x {
  position: absolute;
  right: 3px;
  bottom: 2px;
  display: block;
  width: 8px;
  height: 8px;
}

.window-close-icon-x::before,
.window-close-icon-x::after {
  position: absolute;
  top: 3px;
  left: 0;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  content: "";
}

.window-close-icon-x::before {
  transform: rotate(45deg);
}

.window-close-icon-x::after {
  transform: rotate(-45deg);
}

.account-arrow-link {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #163047;
  font-size: 15px;
  line-height: 1;
}

.account-arrow-link:hover {
  background: #c1def8;
  color: #0f2a42;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page {
  width: calc(100vw - min(var(--page-left-gap), 10vw) - min(var(--page-right-gap), 10vw));
  max-width: calc(100vw - min(var(--page-left-gap), 10vw) - min(var(--page-right-gap), 10vw));
  margin: 20px min(var(--page-right-gap), 10vw) 48px min(var(--page-left-gap), 10vw);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
}

.page-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.finance-integration-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.finance-invoice-upload-form {
  margin: 0;
}

.finance-invoice-upload-zone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: min(560px, 48vw);
  min-height: 38px;
  padding: 8px 10px;
}

.finance-invoice-upload-zone strong {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-invoice-upload-zone .invoice-ocr-message {
  flex: 1 0 100%;
  min-height: 0;
}

.finance-invoice-upload-zone .invoice-record-box,
.finance-invoice-upload-zone .attachment-upload-queue {
  flex: 1 0 100%;
}

@media (max-width: 900px) {
  .finance-integration-actions,
  .finance-invoice-upload-form,
  .finance-invoice-upload-zone {
    width: 100%;
  }

  .finance-integration-actions {
    justify-content: stretch;
  }

  .finance-invoice-upload-zone strong {
    white-space: normal;
  }
}

.global-page-title-inline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.global-page-title-inline p {
  margin: 0;
}

.global-page-title-with-action {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.global-page-title-button {
  display: inline-flex;
  min-width: 76px;
  min-height: 24px;
  margin-bottom: 2px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8cde3;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
  box-shadow: 0 1px 2px rgba(18, 59, 98, 0.08);
  color: #245276;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.global-page-title-button:hover,
.global-page-title-button:focus-visible {
  border-color: #7fb0da;
  background: #eaf4ff;
  box-shadow: 0 2px 5px rgba(18, 59, 98, 0.12);
  color: #0f3a62;
  outline: none;
}

.global-page-title-button:active {
  background: #dceeff;
  box-shadow: inset 0 1px 2px rgba(18, 59, 98, 0.14);
}

.global-filter-region[hidden],
.canteen-filter-region[hidden] {
  display: none;
}

.global-filter-region {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 16px;
}

form.toolbar[method="get"],
form.inline-form[method="get"],
form.employee-filter-form[method="get"] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 16px;
}

.global-filter-region input,
.global-filter-region select,
.global-filter-region button,
.global-filter-region a,
form.toolbar[method="get"] input,
form.toolbar[method="get"] select,
form.toolbar[method="get"] button,
form.toolbar[method="get"] a,
form.inline-form[method="get"] input,
form.inline-form[method="get"] select,
form.inline-form[method="get"] button,
form.inline-form[method="get"] a,
form.employee-filter-form[method="get"] input,
form.employee-filter-form[method="get"] select,
form.employee-filter-form[method="get"] button,
form.employee-filter-form[method="get"] a {
  min-height: 48px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
}

.global-filter-region input,
.global-filter-region select,
form.toolbar[method="get"] input,
form.toolbar[method="get"] select,
form.inline-form[method="get"] input,
form.inline-form[method="get"] select,
form.employee-filter-form[method="get"] input,
form.employee-filter-form[method="get"] select {
  flex: 0 0 var(--global-filter-width, var(--qualification-filter-width, 12em));
  width: var(--global-filter-width, var(--qualification-filter-width, 12em));
  max-width: 100%;
}

.global-filter-region input[type="search"],
form.toolbar[method="get"] input[type="search"],
form.inline-form[method="get"] input[type="search"],
form.employee-filter-form[method="get"] input[type="search"] {
  --global-filter-width: var(--qualification-filter-width, 18em);
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  white-space: nowrap;
  scrollbar-width: thin;
}

.global-filter-region input[type="date"],
form.toolbar[method="get"] input[type="date"],
form.inline-form[method="get"] input[type="date"],
form.employee-filter-form[method="get"] input[type="date"] {
  --global-filter-width: 11em;
}

.global-filter-region button,
.global-filter-region a,
form.toolbar[method="get"] button,
form.toolbar[method="get"] a,
form.inline-form[method="get"] button,
form.inline-form[method="get"] a,
form.employee-filter-form[method="get"] button,
form.employee-filter-form[method="get"] a {
  flex: 0 0 auto;
}

.global-filter-region a,
form.toolbar[method="get"] a,
form.inline-form[method="get"] a,
form.employee-filter-form[method="get"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd8e8;
  background: #f8fbff;
  color: #165ca8;
  padding: 0 20px;
}

.panel,
.notice-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.notice-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--warn-bg);
}

.notice-panel[hidden] {
  display: none;
}

.notice-panel div {
  display: grid;
  gap: 6px;
}

.mobile-workbench {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  background: #f8fcff;
}

.mobile-workbench-head,
.mobile-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-workbench h2 {
  margin: 0;
  font-size: 20px;
}

.mobile-eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mobile-workbench-stats,
.mobile-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mobile-workbench-stats div {
  display: grid;
  gap: 4px;
  border: 1px solid #d7e8f6;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.mobile-workbench-stats span,
.mobile-next-step span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mobile-workbench-stats strong {
  font-size: 24px;
}

.mobile-action-grid .primary-link,
.mobile-action-grid .secondary-link {
  min-height: 44px;
}

.mobile-scan-panel {
  display: grid;
  gap: 16px;
}

.mobile-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mobile-scan-file-button {
  cursor: pointer;
}

.mobile-scan-camera {
  overflow: hidden;
  border: 1px solid #d7e8f6;
  border-radius: 8px;
  background: #0f172a;
}

.mobile-scan-camera video {
  display: block;
  width: 100%;
  max-height: 56vh;
  object-fit: cover;
}

.mobile-scan-status {
  margin: 0;
  border: 1px solid #d7e8f6;
  border-radius: 8px;
  background: #f8fcff;
  color: #173552;
  padding: 12px;
  font-weight: 700;
}

.mobile-scan-status.error {
  border-color: #efb8b8;
  background: #fff3f3;
  color: #9f1f1f;
}

.mobile-scan-manual {
  display: grid;
  gap: 8px;
}

.mobile-scan-manual label {
  font-weight: 800;
}

.attachment-package-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 160px));
  gap: 10px;
  justify-content: start;
  margin: 16px 0;
}

.attachment-package-document {
  margin: 16px 0;
  background: #fbfdff;
}

.attachment-package-figure {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 1px solid #d7e8f6;
  border-radius: 8px;
  background: #f8fcff;
  padding: 6px;
}

.attachment-package-image-button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
}

.attachment-package-image-button:hover,
.attachment-package-image-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 113, 197, 0.18);
  outline: none;
}

.attachment-package-image-button img {
  display: block;
  width: 100%;
  height: 110px;
  max-height: 35vh;
  object-fit: contain;
  background: #ffffff;
}

.attachment-package-figure figcaption {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.mobile-todo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mobile-todo-group {
  display: grid;
  gap: 8px;
}

.mobile-todo-group h3 {
  margin: 0;
  color: #173552;
  font-size: 15px;
}

.mobile-todo-item {
  display: grid;
  gap: 3px;
  border: 1px solid #d7e8f6;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  padding: 10px;
}

.mobile-todo-item:hover,
.mobile-todo-item:focus {
  border-color: #8cbde7;
  background: #eef7ff;
  color: var(--text);
}

.mobile-todo-item span,
.mobile-todo-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.mobile-todo-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-next-step {
  border-top: 1px solid #d7e8f6;
  padding-top: 12px;
}

.auth-shell {
  display: grid;
  min-height: calc(100vh - 130px);
  place-items: center;
}

.auth-shell.wide {
  align-items: start;
  padding-top: 32px;
}

.auth-panel {
  width: min(460px, 100%);
}

.auth-shell.wide .auth-panel {
  width: min(840px, 100%);
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(360px, 480px);
  justify-content: center;
  gap: 24px;
  align-items: center;
  min-height: calc(100vh - 40px);
}

.login-showcase {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  min-height: 310px;
  height: min(50vh, 360px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101722;
}

.login-carousel {
  position: relative;
  min-height: 0;
}

.login-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.login-slide.active {
  opacity: 1;
}

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

.login-slide figcaption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: min(460px, calc(100% - 48px));
  border-radius: 6px;
  padding: 10px 14px;
  background: rgba(16, 23, 34, 0.72);
  color: #fff;
  font-weight: 700;
}

.login-slide-empty {
  background: linear-gradient(135deg, #1c2838, #34485f);
}

.login-filing {
  padding: 12px 18px;
  background: #0f1724;
  color: #dce6f2;
  text-align: center;
}

.login-filing a {
  color: #dce6f2;
}

.login-panel {
  display: grid;
  align-content: center;
  align-self: stretch;
  width: 100%;
  min-height: 520px;
  border: 0;
  background: #fff;
  box-shadow: none;
}

.auth-panel h1 {
  margin: 0;
}

.login-brand-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}

.login-brand-heading img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex: 0 0 auto;
}

.login-identity-label {
  display: flex;
  align-items: center;
  gap: 2em;
  min-width: 0;
}

.login-pending-review {
  color: var(--danger);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.login-input-wrap {
  position: relative;
  display: block;
}

.login-input-popover {
  position: absolute;
  left: 12px;
  top: calc(100% + 6px);
  z-index: 3;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  border: 1px solid #efb4b4;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff7f7;
  box-shadow: 0 8px 22px rgba(110, 31, 31, 0.16);
  color: var(--danger);
  font-weight: 800;
  line-height: 1.35;
}

.login-input-popover::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #efb4b4;
  border-left: 1px solid #efb4b4;
  background: #fff7f7;
  transform: rotate(45deg);
}

.stacked-form {
  display: grid;
  gap: 14px;
}

.compact-form {
  margin-bottom: 16px;
}

.sub-section-title {
  margin-top: 18px;
}

.sub-section-title h3 {
  margin: 0;
  font-size: 16px;
}

.milestone-plan-form {
  min-width: 320px;
  margin-bottom: 0;
  gap: 10px;
}

.milestone-plan-form label {
  min-width: 0;
}

.milestone-plan-form input,
.milestone-plan-form select,
.milestone-plan-form textarea {
  width: 100%;
}

.finish-form {
  margin: 0 0 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.stacked-form.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.modal-frame .stacked-form {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px 18px;
}

body.modal-frame .stacked-form > label,
body.modal-frame .stacked-form > .form-field-block,
body.modal-frame .stacked-form > .attachment-field {
  display: grid;
  grid-template-columns: minmax(128px, 184px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

body.modal-frame .stacked-form > :not(label):not(.form-field-block):not(.attachment-field) {
  grid-column: 1 / -1;
}

body.modal-frame .stacked-form > label > span:first-child,
body.modal-frame .stacked-form > .form-field-block > .field-label,
body.modal-frame .stacked-form > .attachment-field > .field-label,
body.modal-frame .stacked-form > .attachment-field > span:first-child {
  grid-column: 1;
  padding-top: 9px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

body.modal-frame .stacked-form > label > input,
body.modal-frame .stacked-form > label > select,
body.modal-frame .stacked-form > label > textarea,
body.modal-frame .stacked-form > .form-field-block > input,
body.modal-frame .stacked-form > .form-field-block > select,
body.modal-frame .stacked-form > .form-field-block > textarea {
  grid-column: 2;
  width: 100%;
}

body.modal-frame .stacked-form > label > small,
body.modal-frame .stacked-form > label > .error,
body.modal-frame .stacked-form > label > .muted-line,
body.modal-frame .stacked-form > .form-field-block > small,
body.modal-frame .stacked-form > .attachment-field > small,
body.modal-frame .stacked-form > .attachment-field > .muted-line {
  grid-column: 2;
}

body.modal-frame .stacked-form > .span-2,
body.modal-frame .stacked-form > .notice,
body.modal-frame .stacked-form > .section-title-row,
body.modal-frame .stacked-form > .button-row,
body.modal-frame .stacked-form > button[type="submit"] {
  grid-column: 1 / -1;
}

body.modal-frame .stacked-form > label.checkbox-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

body.modal-frame .stacked-form > label.checkbox-line > input[type="checkbox"] {
  grid-column: 1;
  order: 0;
  margin-top: 0;
}

body.modal-frame .stacked-form > label.checkbox-line > span:first-child {
  grid-column: 2;
  padding-top: 0;
}

body.modal-frame .stacked-form input[type="checkbox"] {
  justify-self: start;
  margin-top: 4px;
}

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

.stacked-form label,
.stacked-form .attachment-field,
.stacked-form .form-field-block,
.form-grid .form-field-block {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.stacked-form label.register-password-field {
  align-self: start;
  align-content: start;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 600;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.expense-reimbursement-header-form,
.expense-reimbursement-line-form,
.expense-reimbursement-stage-payment-form {
  grid-auto-flow: row dense;
}

.expense-reimbursement-header-form .expense-reimbursement-header-field,
.expense-reimbursement-line-form .expense-reimbursement-line-field,
.expense-reimbursement-stage-payment-form .expense-reimbursement-stage-payment-field {
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.expense-reimbursement-header-field-meta,
.expense-reimbursement-header-field-control,
.expense-reimbursement-line-field-meta,
.expense-reimbursement-line-field-control,
.expense-reimbursement-stage-payment-field-meta,
.expense-reimbursement-stage-payment-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.expense-reimbursement-header-field-label,
.expense-reimbursement-line-field-label,
.expense-reimbursement-stage-payment-field-label {
  padding-top: 9px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.expense-reimbursement-header-field-control input,
.expense-reimbursement-header-field-control select,
.expense-reimbursement-header-field-control textarea,
.expense-reimbursement-header-field-control .amount-uppercase-field,
.expense-reimbursement-line-field-control input,
.expense-reimbursement-line-field-control select,
.expense-reimbursement-line-field-control textarea,
.expense-reimbursement-line-field-control .amount-uppercase-field,
.expense-reimbursement-stage-payment-field-control input,
.expense-reimbursement-stage-payment-field-control select,
.expense-reimbursement-stage-payment-field-control textarea,
.expense-reimbursement-stage-payment-field-control .amount-uppercase-field {
  width: 100%;
  min-width: 0;
}

.expense-reimbursement-header-field-control input[type="checkbox"],
.expense-reimbursement-line-field-control input[type="checkbox"],
.expense-reimbursement-stage-payment-field-control input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  justify-self: start;
  margin-top: 9px;
}

.expense-reimbursement-header-form .expense-reimbursement-header-actions,
.expense-reimbursement-line-form .expense-reimbursement-line-actions,
.expense-reimbursement-stage-payment-form .expense-reimbursement-stage-payment-actions {
  grid-column: 1 / -1;
}

.stacked-form input,
.stacked-form select,
.stacked-form textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.toolbar input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  background: #fff;
}

.stacked-form textarea {
  width: min(100%, var(--description-box-width, 100%));
  height: calc(98px * var(--description-box-height-scale, 0.5));
  min-height: 38px;
  resize: vertical;
}

.stacked-form.two-col label.span-2 > textarea,
.stacked-form.two-col .form-field-block.span-2 > textarea {
  width: min(100%, calc(((100% - 14px) / 2) * var(--description-box-width-scale, 1)));
}

.form-grid textarea {
  width: min(100%, var(--description-box-width, 100%));
  height: calc(82px * var(--description-box-height-scale, 0.5));
  min-height: 38px;
  resize: vertical;
}

.amount-uppercase-field {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.amount-uppercase-field > input,
.amount-uppercase-field > select,
.amount-uppercase-field > textarea {
  width: 100%;
  min-width: 0;
}

.amount-uppercase-hint {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.amount-uppercase-hint[hidden] {
  display: none !important;
}

body.modal-frame .stacked-form > label > .amount-uppercase-field,
body.modal-frame .stacked-form > .form-field-block > .amount-uppercase-field {
  grid-column: 2;
}

.form-grid label.span-2 > textarea,
.form-grid .form-field-block.span-2 > textarea {
  width: min(100%, calc(((100% - 16px) / 2) * var(--description-box-width-scale, 1)));
}

.stacked-form input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--primary);
}

.checkbox-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  column-gap: 10px;
  row-gap: 4px;
}

.checkbox-line input[type="checkbox"] {
  order: -1;
}

.checkbox-line small {
  grid-column: 2;
}

.form-grid input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--primary);
}

.company-multi-select {
  display: grid;
  gap: 0;
  max-height: 190px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 0;
  background: #fff;
  overflow-y: auto;
}

.company-field {
  text-align: left;
}

.company-field-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.project-config-special-field {
  display: grid;
  gap: 8px;
}

.project-config-special-field > span {
  font-weight: 700;
  color: var(--text-muted);
}

.project-config-global-searchable-select {
  display: block;
  width: min(100%, 760px);
}

.project-stage-template-page {
  display: grid;
  gap: 16px;
}

.project-stage-template-list-panel {
  width: 100%;
}

.project-stage-template-list-wrap {
  max-height: none;
}

.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] {
  min-width: 980px;
}

.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] th[data-column-key="sort_order"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] td[data-column-key="sort_order"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] th[data-column-key="default_due_days"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] td[data-column-key="default_due_days"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] th[data-column-key="status"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] td[data-column-key="status"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] th[data-column-key="actions"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] td[data-column-key="actions"] {
  width: 120px;
  min-width: 120px;
}

.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] th[data-column-key="code"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] td[data-column-key="code"] {
  min-width: 220px;
}

.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] th[data-column-key="company"],
.global-data-grid.project-stage-template-data-grid[data-auto-width-enabled="1"] td[data-column-key="company"] {
  min-width: 180px;
}

.project-stage-template-form .project-stage-template-field {
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.project-stage-template-field-meta,
.project-stage-template-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.project-stage-template-field-label {
  padding-top: 9px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.project-stage-template-field-control input,
.project-stage-template-field-control select,
.project-stage-template-field-control textarea {
  width: 100%;
}

.project-stage-template-field-control input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-top: 9px;
}

.project-stage-template-status-form {
  display: inline-flex;
  margin: 0;
}

.project-stage-template-status-button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.project-stage-template-status-button:hover,
.project-stage-template-status-button:focus-visible {
  outline: 3px solid rgba(49, 127, 246, 0.22);
  outline-offset: 2px;
}

.stacked-form.two-col input,
.stacked-form.two-col select {
  height: 38px;
}

.stacked-form.two-col input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
}

.project-application-form {
  grid-auto-flow: row dense;
}

.project-application-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  align-items: start;
  gap: 12px 28px;
}

.project-application-toggle-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 6px 10px;
  color: var(--text);
  font-weight: 600;
}

.project-application-toggle-label {
  line-height: 1.35;
}

.project-application-toggle-control {
  display: inline-flex;
  align-items: center;
}

.binary-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 48px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px 0 22px;
  background: #f3f4f6;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
}

.binary-toggle.is-on {
  justify-content: flex-start;
  border-color: #58b677;
  padding: 0 22px 0 8px;
  background: #58b677;
  color: #fff;
}

.binary-toggle-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease;
}

.binary-toggle.is-on .binary-toggle-knob {
  transform: translateX(20px);
}

.binary-toggle-text {
  position: relative;
  z-index: 1;
}

.project-application-form .project-application-field {
  grid-template-columns: minmax(128px, 168px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.project-application-form .project-application-field[hidden] {
  display: none !important;
}

.project-application-field-meta,
.project-application-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.project-application-field-label {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.required-star {
  display: inline-block;
  margin-right: 4px;
  color: var(--danger);
  font-weight: 800;
}

.project-application-field-control input,
.project-application-field-control select {
  width: 100%;
}

.project-application-field-control textarea {
  width: min(100%, var(--description-box-width, 100%));
}

.project-application-field-control input[type="checkbox"] {
  justify-self: start;
  margin-top: 4px;
}

.project-external-create-toggle {
  justify-self: start;
}

.project-external-create-panel {
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.project-external-create-panel[hidden] {
  display: none;
}

.project-external-create-panel .button-row.compact {
  justify-content: flex-start;
}

.project-external-create-panel .primary-button,
.project-external-create-panel .secondary-button {
  min-height: 34px;
  padding: 6px 12px;
}

.login-page-setting-form .login-page-setting-field {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.login-page-setting-field-meta,
.login-page-setting-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.login-page-setting-field-label {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.login-page-setting-field-control input,
.login-page-setting-field-control select,
.login-page-setting-field-control textarea {
  width: 100%;
}

.login-page-setting-field-control input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  justify-self: start;
  margin-top: 4px;
}

.login-page-setting-field-control ul {
  width: 100%;
}

.login-page-setting-field-control #id_canteen_enabled_companies {
  display: grid;
  gap: 8px;
}

.login-page-setting-field-control #id_canteen_enabled_companies > div > label,
.login-page-setting-field-control ul li label {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.login-page-setting-field-control #id_canteen_enabled_companies > div > label input[type="checkbox"],
.login-page-setting-field-control ul li input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

.contract-setting-form .contract-setting-field {
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.contract-setting-field-meta,
.contract-setting-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.contract-setting-field-label {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.contract-setting-field-control input,
.contract-setting-field-control select,
.contract-setting-field-control textarea {
  width: 100%;
}

.contract-setting-field-control input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  justify-self: start;
  margin-top: 4px;
}

.expense-config-form .expense-config-field {
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.expense-config-field-meta,
.expense-config-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.expense-config-field-label {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.expense-config-field-control input,
.expense-config-field-control select,
.expense-config-field-control textarea {
  width: 100%;
}

.expense-config-field-control input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  justify-self: start;
  margin-top: 4px;
}

.company-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.company-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.company-option.selected {
  background: #e7f7ed;
  color: #237343;
  font-weight: 700;
}

.company-option:hover {
  background: #f4f8fd;
}

.global-searchable-select {
  position: relative;
}

.global-searchable-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.global-searchable-control {
  position: relative;
}

.global-searchable-input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  background: #fff;
  padding-right: 34px;
}

.global-searchable-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 50%;
  background: #666;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.global-searchable-clear:hover,
.global-searchable-clear:focus-visible {
  background: var(--danger);
  outline: none;
}

.global-searchable-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: none;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.14);
}

.global-searchable-options.open {
  display: block;
}

.global-searchable-option {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 9px 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.global-searchable-option:hover,
.global-searchable-option:focus-visible,
.global-searchable-option.is-selected {
  background: #e7f7ed;
  color: #237343;
  font-weight: 700;
}

.global-searchable-empty {
  padding: 9px 11px;
  color: var(--muted);
}

.transient-toast {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 80;
  max-width: min(340px, calc(100vw - 32px));
  border: 1px solid #f1b7b7;
  border-radius: 6px;
  padding: 10px 14px;
  background: #fff2f2;
  color: var(--danger);
  font-weight: 700;
  box-shadow: 0 16px 36px rgba(31, 41, 55, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.transient-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.registration-review-form {
  display: block;
}

.review-static-info {
  margin-bottom: 16px;
}

.review-info-grid {
  margin-top: 10px;
}

.review-check-field {
  display: grid;
  gap: 8px;
}

.review-check-list ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-check-list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-weight: 600;
  color: var(--text);
}

.choice-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-chip-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.choice-chip-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-chip-option.selected {
  border-color: #2f9d57;
  background: #dff5e8;
  color: #176d39;
  font-weight: 700;
}

.choice-chip-option:hover {
  border-color: #84c69b;
  background: #f0fbf4;
}

.permission-menu-editor {
  display: grid;
  gap: 10px;
}

.permission-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.permission-menu-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.permission-action-section {
  background: #f6fff8;
}

.permission-risk-guide {
  display: grid;
  gap: 8px;
  border: 1px solid #c7dfc8;
  border-radius: 8px;
  padding: 10px;
  background: #f8fff9;
}

.permission-risk-guide > strong {
  color: #1f5b33;
}

.permission-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.permission-risk-grid div {
  display: grid;
  gap: 3px;
}

.permission-risk-grid span,
.permission-action-hint {
  color: #34513d;
}

.permission-risk-grid small,
.permission-action-hint {
  font-size: 12px;
  line-height: 1.5;
}

.permission-print-template-badge {
  display: inline-flex;
  width: fit-content;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #d6e4f0;
  background: #f3f8fc;
  color: #36556d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.permission-print-template-badge.is-enabled,
.permission-print-template-badge.is-ready {
  border-color: #b8ddc7;
  background: #ecf8f0;
  color: #24553a;
}

.permission-print-template-badge.is-warning {
  border-color: #f0cc8a;
  background: #fff4df;
  color: #7a4a12;
}

.permission-print-template-badge.is-disabled {
  border-color: #ead7a7;
  background: #fff8e7;
  color: #70531b;
}

.permission-menu-heading {
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--text);
}

.choice-chip-option.permission-menu-child {
  margin-left: 14px;
}

.basic-data-modal.permission-group-modal {
  position: fixed;
  top: var(--permission-modal-top, calc(var(--topbar-height, 64px) + 52px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 16;
  display: grid;
  align-items: start;
  justify-items: stretch;
  padding: 8px min(var(--page-right-gap), 10vw) 12px min(var(--page-left-gap), 10vw);
  overflow-x: hidden;
  overflow-y: hidden;
}

.basic-data-modal-card.permission-group-modal-card {
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: calc(100vh - var(--permission-modal-top, 116px) - 20px);
  max-height: calc(100vh - var(--permission-modal-top, 116px) - 20px);
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.permission-group-modal-card .basic-data-modal-header {
  flex: 0 0 auto;
  margin-bottom: 10px;
}

.permission-authorization-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin: -2px 0 12px;
  padding-bottom: 10px;
}

.permission-tool-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b7d1e7;
  border-radius: 6px;
  background: #f8fcff;
  color: #21465f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 12px;
  text-decoration: none;
}

.permission-tool-button:hover,
.permission-tool-button:focus-visible {
  border-color: #78afd9;
  background: #e9f5ff;
  outline: none;
}

.permission-authorization-form {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: visible;
}

.permission-authorization-form-add {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.permission-authorization-form-edit {
  grid-template-rows: minmax(0, 1fr) auto;
}

.permission-save-toast {
  position: fixed;
  z-index: 1500;
  top: calc(var(--permission-modal-top, 0px) + ((100vh - var(--permission-modal-top, 0px)) / 2));
  left: 50%;
  min-width: 220px;
  border: 1px solid #90c9a4;
  border-radius: 12px;
  background: #f1fff5;
  box-shadow: 0 18px 45px rgba(27, 74, 39, 0.18);
  color: #14753a;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  padding: 18px 28px;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.permission-save-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.permission-identity-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(120px, 0.5fr);
  gap: 10px;
}

.permission-identity-grid-compact {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}

.permission-status-inline {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid #c7d8e7;
  border-radius: 8px;
  background: #f8fcff;
  color: #334d63;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 9px;
}

.permission-card-status-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.permission-status-choice {
  display: inline-flex;
  min-width: 46px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1dbe4;
  border-radius: 999px;
  background: #f7f9fb;
  color: #5f6c78;
  cursor: pointer;
  font-weight: 900;
  padding: 4px 10px;
}

.permission-status-choice[aria-pressed="true"].is-on {
  border-color: #73c792;
  background: #dff5e8;
  color: #176d39;
}

.permission-status-choice[aria-pressed="true"].is-off {
  border-color: #f0cf8d;
  background: #fff1cc;
  color: #8a5600;
}

.permission-status-choice:hover,
.permission-status-choice:focus-visible {
  border-color: #78afd9;
  background: #eef7ff;
  outline: none;
}

.permission-status-choice:disabled {
  cursor: wait;
  opacity: 0.72;
}

.permission-business-conflicts {
  display: grid;
  gap: 6px;
  border: 1px solid #f0c36a;
  border-radius: 8px;
  background: #fff8e5;
  color: #6d4b00;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 12px;
}

.permission-business-conflicts strong {
  color: #9a5a00;
  font-weight: 900;
}

.permission-business-conflicts div {
  display: grid;
  gap: 3px;
}

.permission-business-conflicts small {
  color: #7c5a1a;
  font-weight: 700;
  line-height: 1.5;
}

.permission-conflict-mini {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid #f0b8b8;
  border-radius: 999px;
  background: #fff1f0;
  color: #b42318;
  font-size: 11px;
  font-weight: 900;
  margin-top: 4px;
  padding: 2px 7px;
}

.permission-authorization-shell {
  display: grid;
  min-height: 0;
  gap: 10px;
  grid-template-columns: minmax(190px, 1.25fr) minmax(120px, 0.72fr) minmax(280px, 1.42fr) minmax(220px, 1fr);
  overflow: visible;
}

.permission-auth-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - var(--permission-modal-top, 116px) - 126px);
  flex-direction: column;
  border: 1px solid #bccbd8;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

.permission-auth-panel-title {
  border-bottom: 1px solid #b5cadb;
  background: #cfe4f4;
  color: #17334a;
  font-size: 14px;
  font-weight: 900;
  padding: 9px 10px;
}

.permission-auth-panel-title-with-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.permission-auth-panel-title-with-note small {
  color: #51718a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.permission-auth-panel-title-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.permission-tree-list,
.permission-catalog-list,
.permission-table-wrap {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
}

.permission-auth-tree .permission-tree-list,
.permission-auth-catalog .permission-catalog-list,
.permission-auth-modules .permission-table-wrap {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.permission-auth-modules .permission-table-wrap {
  overflow-x: auto;
}

.permission-tree-list {
  padding: 8px;
}

.permission-tree-list details {
  margin-bottom: 4px;
}

.permission-company-summary {
  border-bottom: 1px solid #e1edf6;
  margin-bottom: 6px;
}

.permission-tree-list summary {
  cursor: pointer;
  color: #1d3d54;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 2px;
}

.permission-tree-list summary small {
  color: var(--muted);
  font-weight: 700;
  margin-left: 6px;
}

.permission-tree-list ul {
  display: grid;
  gap: 3px;
  margin: 2px 0 6px 18px;
  padding: 0;
}

.permission-tree-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #34495d;
  font-size: 12px;
  list-style: none;
  padding: 2px 0;
}

.permission-tree-list li::before {
  color: #46a66a;
  content: "●";
  font-size: 8px;
  margin-right: 4px;
}

.permission-tree-list li small {
  color: var(--muted);
}

.permission-group-summary-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.permission-group-summary-card {
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.permission-group-summary-card.is-current {
  border-color: #78b7e3;
  box-shadow: inset 3px 0 0 #2f80d9;
}

.permission-group-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f7fbff;
  padding: 8px 9px !important;
}

.permission-group-summary-card.is-current .permission-group-summary-title {
  background: #ecf7ff;
}

.permission-group-summary-name {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

.permission-group-summary-name strong,
.permission-group-summary-name a {
  color: #1d3d54;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.permission-group-summary-name a:hover,
.permission-group-summary-name a:focus-visible {
  color: #0f70c8;
  text-decoration: underline;
  outline: none;
}

.permission-group-name-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
}

.permission-group-name-action {
  border: 1px solid #b9d4ec;
  border-radius: 5px;
  background: #f7fbff;
  color: #245475;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
}

.permission-group-name-action:hover,
.permission-group-name-action:focus-visible {
  border-color: #6ca6d9;
  background: #eef7ff;
  outline: none;
}

.permission-group-name-action.danger {
  border-color: #f0b8b8;
  color: #b83232;
}

.permission-group-name-action.danger:hover,
.permission-group-name-action.danger:focus-visible {
  border-color: #e36b6b;
  background: #fff3f3;
}

.permission-group-rename-box {
  align-items: center;
  border-top: 1px solid #e6eef6;
  display: flex;
  gap: 7px;
  padding: 8px 10px;
}

.permission-group-rename-box[hidden] {
  display: none;
}

.permission-group-rename-box input {
  border: 1px solid #c7d7e5;
  border-radius: 5px;
  color: #1d3447;
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  padding: 7px 8px;
}

.permission-group-rename-box input:focus {
  border-color: #4f9cdf;
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 156, 223, 0.16);
}

.permission-group-summary-meta {
  display: grid;
  gap: 6px;
  border-top: 1px solid #e6eef6;
  padding: 8px 10px;
}

.permission-group-summary-meta div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #20384d;
  font-size: 12px;
}

.permission-group-summary-meta span {
  color: #667789;
  font-weight: 800;
}

.permission-group-summary-meta strong,
.permission-group-summary-meta a {
  color: #1f374b;
  font-weight: 900;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.permission-group-summary-meta a {
  color: #2b66b1;
  text-decoration: none;
}

.permission-group-summary-meta a:hover,
.permission-group-summary-meta a:focus-visible {
  text-decoration: underline;
}

.permission-group-employee-title {
  border-top: 1px solid #e6eef6;
  color: #607387;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px 0;
}

.permission-group-employee-list {
  margin: 4px 10px 10px !important;
}

.permission-catalog-list {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
}

.permission-catalog-list a,
.permission-catalog-list button {
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: #263e52;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 8px;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.permission-catalog-list a:hover,
.permission-catalog-list a:focus-visible,
.permission-catalog-list a.is-current,
.permission-catalog-list button:hover,
.permission-catalog-list button:focus-visible,
.permission-catalog-list button.is-current {
  background: #eef7ff;
  outline: none;
}

.permission-auth-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.permission-auth-table th,
.permission-auth-table td {
  border: 1px solid #c8d4de;
  color: #22313f;
  font-size: 13px;
  padding: 7px 8px;
  vertical-align: middle;
}

.permission-auth-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #bfd7ea;
  color: #23455d;
  font-weight: 900;
}

.permission-auth-table tr.is-selected td {
  background: #edf9f0;
}

.permission-auth-table tr.is-active-module td {
  background: #e7f2ff;
  box-shadow: inset 3px 0 0 #2f80ed;
}

.permission-auth-table tr.permission-auth-group-row td {
  background: #e8f5ff;
  color: #17334a;
  font-weight: 900;
}

.permission-auth-table tr.permission-auth-group-row:hover td {
  background: #e1f0fb;
}

.permission-module-action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.permission-module-action-toggle {
  display: inline-flex;
  min-width: 56px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid #8ebbe0;
  border-radius: 999px;
  background: #f6fbff;
  color: #21465f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
}

.permission-module-action-toggle[aria-pressed="true"] {
  border-color: #73c792;
  background: #dff5e8;
  color: #176d39;
}

.permission-module-action-toggle:hover,
.permission-module-action-toggle:focus-visible {
  border-color: #2f80ed;
  background: #e9f5ff;
  outline: none;
}

.permission-auth-table tr.is-jump-target td {
  background: #fff5cf;
  box-shadow: inset 0 0 0 2px #e2aa3d;
}

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

.permission-row-no {
  width: 54px;
  text-align: center;
}

.permission-state-col {
  width: 96px;
  text-align: center;
}

.permission-auth-name {
  display: block;
  min-height: 24px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.45;
}

.permission-depth-1 {
  padding-left: 16px;
}

.permission-depth-2 {
  padding-left: 32px;
}

.permission-auth-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.permission-state-pill {
  display: inline-flex;
  min-width: 42px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1dbe4;
  border-radius: 999px;
  background: #f7f9fb;
  color: #5f6c78;
  cursor: pointer;
  font-weight: 900;
}

.permission-auth-checkbox:checked + .permission-state-pill {
  border-color: #4fb477;
  background: #dff5e8;
  color: #176d39;
}

.permission-other-settings {
  min-height: 0;
  max-height: 170px;
  border: 1px solid #bfd4e5;
  border-radius: 6px;
  overflow: auto;
}

.permission-other-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 10px;
}

.permission-other-row .permission-auth-name {
  color: #334d63;
}

.permission-group-modal-card .permission-risk-guide {
  max-height: 110px;
  overflow: auto;
}

.permission-group-modal-card .modal-actions {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 0;
}

.permission-floating-backdrop[hidden],
.permission-floating-panel[hidden] {
  display: none !important;
}

.permission-floating-backdrop {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: rgba(20, 35, 49, 0.28);
}

.permission-floating-panel {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(920px, calc(100% - 56px));
  max-height: min(680px, calc(100% - 56px));
  flex-direction: column;
  border: 1px solid #9fc3e0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(18, 40, 58, 0.26);
  transform: translate(-50%, -50%);
}

.permission-guide-panel {
  width: min(820px, calc(100% - 56px));
}

.permission-floating-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #c7d8e7;
  background: #eef7ff;
  padding: 14px 16px;
}

.permission-floating-header h3 {
  margin: 0;
  color: #17334a;
  font-size: 20px;
  font-weight: 900;
}

.permission-floating-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.permission-floating-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px;
}

.permission-floating-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  border-top: 1px solid #d6e3ee;
  padding: 12px 16px;
}

.permission-other-field {
  display: grid;
  gap: 5px;
}

.permission-other-field > span {
  color: #334d63;
  font-size: 13px;
  font-weight: 900;
}

.permission-other-field small {
  color: var(--muted);
}

@media (max-width: 980px) {
  .basic-data-modal.permission-group-modal {
    padding: 6px;
  }

  .permission-group-modal-card {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .permission-identity-grid,
  .permission-authorization-shell {
    grid-template-columns: 1fr;
  }

  .permission-tree-list,
  .permission-catalog-list,
  .permission-table-wrap {
    max-height: 320px;
  }

}

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

.stacked-form ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.span-2 {
  grid-column: 1 / -1;
}

.primary-button,
.primary-link,
.secondary-button,
.secondary-link,
.toolbar button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.primary-button,
.primary-link {
  background: var(--primary);
  color: #fff;
}

.primary-button:hover,
.primary-link:hover {
  background: var(--primary-dark);
  color: #fff;
}

.secondary-link,
.secondary-button,
.toolbar button {
  background: #eef4fb;
  border-color: #c8d7e8;
  color: var(--primary-dark);
}

.secondary-link.is-action-denied,
.secondary-button.is-action-denied {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #8795a6;
  box-shadow: none;
  cursor: not-allowed;
}

.secondary-link.is-action-denied:hover,
.secondary-link.is-action-denied:focus-visible,
.secondary-button.is-action-denied:hover,
.secondary-button.is-action-denied:focus-visible {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #8795a6;
  box-shadow: none;
  outline: none;
}

.list-action-tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.list-import-tools {
  align-items: center;
}

.list-import-file-control {
  max-width: min(420px, 100%);
}

.inline-mini-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.inline-mini-link:hover,
.inline-mini-link:focus {
  color: var(--primary-dark);
  text-decoration: underline;
}

.ghost-button {
  background: transparent;
  border-color: #617086;
  color: #fff;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

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

.form-actions.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 440px) minmax(0, 1fr);
  justify-content: stretch;
}

.form-actions.split .secondary-link {
  grid-column: 1;
  justify-self: start;
  width: auto;
}

.form-actions .compact-submit {
  grid-column: 2;
  justify-self: center;
  width: 100%;
}

.toolbar input {
  max-width: 420px;
}

.toolbar select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}

.employee-filter-form input {
  min-width: 240px;
}

.employee-filter-form select {
  min-width: 150px;
}

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

.table-actions .inline-form {
  margin: 0;
}

.reset-password-form input {
  display: none;
}

.muted-text {
  margin: 0 0 14px;
  color: var(--muted);
}

.muted-inline {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
}

.inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 8px 8px 0;
}

.inline-form input,
.inline-form select {
  min-height: 30px;
  width: 160px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
}

.inline-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 600;
}

.detail-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
}

.detail-grid dt {
  color: var(--muted);
  font-weight: 700;
}

.detail-grid dd {
  margin: 0;
  min-width: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.button-row .inline-form {
  margin: 0;
}

.compact-inline-form {
  margin: 0;
}

.compact-inline-form .primary-button,
.compact-inline-form .secondary-button {
  min-height: 30px;
  padding: 4px 10px;
}

.table-wrap {
  overflow-x: auto;
}

.registration-basic-data-table-wrap {
  overflow: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 700;
  background: #f8fafc;
}

.status-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  background: #edf5ff;
  color: #0f5db8;
}

.thumb-image {
  width: 120px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #fff;
}

.status-ok {
  background: var(--ok-bg);
  color: #237343;
}

.status-warning {
  background: var(--warn-bg);
  color: #8a5a00;
}

.status-danger {
  background: #fde8e8;
  color: var(--danger);
}

.status-muted {
  background: #eef2f6;
  color: var(--muted);
}

.project-flow-panel {
  display: grid;
  gap: 12px;
}

.project-command-center {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.project-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.project-command-card {
  min-height: 136px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.project-command-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-command-card strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-command-card p {
  display: -webkit-box;
  min-height: 42px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-command-card .secondary-link {
  justify-self: start;
}

.project-command-current,
.project-command-action {
  border-left-color: #0f5db8;
  background: #f8fbff;
}

.project-command-danger {
  border-left-color: var(--danger);
  background: #fff8f8;
}

.project-command-warning {
  border-left-color: #c98500;
  background: #fffaf0;
}

.project-command-ok {
  border-left-color: #237343;
  background: #f7fcf9;
}

.project-command-owner {
  border-left-color: #64748b;
  background: #f8fafc;
}

.project-detail-overview {
  display: grid;
  gap: 12px;
}

.project-detail-usage-summary {
  margin-bottom: 0;
}

.project-usage-guide {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.project-usage-guide summary {
  cursor: pointer;
  color: #0f5db8;
  font-weight: 700;
}

.project-usage-guide[open] summary {
  margin-bottom: 10px;
}

.project-usage-guide p {
  margin: 10px 0 0;
}

.project-usage-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.project-usage-steps span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-left: 3px solid #0f5db8;
  padding-left: 10px;
}

.project-usage-steps strong {
  color: var(--text);
  font-size: 14px;
}

.project-usage-steps small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.project-phase-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.project-phase-nav-item {
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-content: center;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}

.project-phase-nav-item span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  grid-row: span 2;
  border-radius: 50%;
  background: #eaf3ff;
  color: #0f5db8;
  font-size: 13px;
  font-weight: 800;
}

.project-phase-nav-item strong {
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-phase-nav-item small {
  color: var(--muted);
  font-size: 12px;
}

.project-phase-nav-item.project-phase-current {
  border-color: #f2c56b;
  background: #fffaf0;
}

.project-phase-nav-item.project-phase-done {
  border-color: #b9e6c8;
  background: #f7fcf9;
}

.project-phase-nav-item.project-phase-skipped,
.project-phase-nav-item.project-phase-pending {
  background: #f8fafc;
}

.project-detail-focus-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.project-detail-focus-card {
  min-height: 138px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.project-detail-focus-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-detail-focus-card strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-detail-focus-card p {
  display: -webkit-box;
  min-height: 42px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-detail-focus-card .secondary-link {
  justify-self: start;
}

.project-focus-current {
  border-left-color: #0f5db8;
  background: #f8fbff;
}

.project-focus-danger {
  border-left-color: var(--danger);
  background: #fff8f8;
}

.project-focus-warning {
  border-left-color: #c98500;
  background: #fffaf0;
}

.project-focus-ok {
  border-left-color: #237343;
  background: #f7fcf9;
}

.project-focus-muted,
.project-focus-pending {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.project-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.project-detail-metrics a {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}

.project-detail-metrics span {
  color: var(--muted);
  font-size: 13px;
}

.project-detail-metrics strong {
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.25;
}

.project-detail-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-attention-panel {
  display: grid;
  gap: 12px;
}

.project-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.project-attention-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.project-attention-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.project-attention-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.project-attention-card .secondary-link {
  align-self: flex-start;
}

.project-attention-danger {
  border-left-color: var(--danger);
  background: #fff8f8;
}

.project-attention-warning {
  border-left-color: #c98500;
  background: #fffaf0;
}

.project-attention-ok {
  border-left-color: #237343;
  background: #f7fcf9;
}

.project-phase-overview-panel {
  display: grid;
  gap: 12px;
}

.project-phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}

.project-phase-card {
  min-height: 142px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-top-width: 4px;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.project-phase-head {
  display: grid;
  gap: 6px;
}

.project-phase-head strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.project-phase-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.project-phase-card .secondary-link {
  justify-self: start;
}

.project-phase-done {
  border-top-color: #237343;
  background: #f7fcf9;
}

.project-phase-current {
  border-top-color: #c98500;
  background: #fffaf0;
}

.project-phase-pending {
  border-top-color: #94a3b8;
  background: #f8fafc;
}

.project-phase-skipped {
  border-top-color: #cbd5e1;
  background: #f8fafc;
}

.project-phase-detail-panel {
  display: grid;
  gap: 12px;
}

.project-phase-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.project-phase-detail-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.project-phase-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-phase-detail-head strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.project-phase-detail-card dl {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}

.project-phase-detail-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.project-phase-detail-card dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.project-phase-detail-done {
  border-left-color: #237343;
  background: #f7fcf9;
}

.project-phase-detail-current {
  border-left-color: #0f5db8;
  background: #f8fbff;
}

.project-phase-detail-warning {
  border-left-color: #c98500;
  background: #fffaf0;
}

.project-phase-detail-danger {
  border-left-color: var(--danger);
  background: #fff8f8;
}

.project-phase-detail-skipped,
.project-phase-detail-pending {
  background: #f8fafc;
}

.project-stepper {
  display: grid;
  gap: 10px;
}

.project-stepper-main {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.project-stepper-stage {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.project-step {
  position: relative;
  min-height: 86px;
  display: grid;
  align-content: start;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 12px 12px 42px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}

.project-step::after {
  content: "";
  position: absolute;
  top: 23px;
  right: -11px;
  width: 20px;
  height: 2px;
  background: var(--line);
}

.project-step:last-child::after {
  display: none;
}

.project-step-index {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf5ff;
  color: #0f5db8;
  font-size: 12px;
  font-weight: 700;
}

.project-step strong {
  font-size: 14px;
}

.project-step small,
.project-step em {
  color: var(--muted);
  font-style: normal;
}

.project-step-done {
  border-color: #b7e3c7;
  background: #f7fcf9;
}

.project-step-done .project-step-index {
  background: var(--ok-bg);
  color: #237343;
}

.project-step-current {
  border-color: #f0cf89;
  background: #fffaf0;
}

.project-step-current .project-step-index {
  background: var(--warn-bg);
  color: #8a5a00;
}

.approval-flow-list {
  display: grid;
  gap: 12px;
}

.approval-flow-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.approval-flow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.approval-flow-head a {
  color: var(--text);
  text-decoration: none;
}

.approval-flow-meta {
  color: var(--muted);
  font-size: 13px;
}

.approval-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.approval-step {
  display: grid;
  gap: 3px;
  min-height: 74px;
  border-radius: 8px;
  padding: 10px;
}

.approval-step strong {
  color: var(--text);
}

.approval-step span,
.approval-step small,
.approval-step em {
  color: inherit;
  font-size: 13px;
  font-style: normal;
}

.factory-purchase-order-board {
  display: grid;
  gap: 14px;
}

.factory-purchase-order-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.factory-purchase-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 14px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
}

.factory-purchase-order-head strong {
  color: #dc2626;
}

.factory-purchase-order-body {
  display: grid;
  grid-template-columns: minmax(300px, 2.2fr) minmax(220px, 1.35fr) minmax(130px, .75fr) minmax(130px, .75fr) minmax(170px, 1fr) minmax(130px, .75fr) minmax(120px, .65fr) minmax(120px, .65fr);
  min-height: 180px;
}

.factory-purchase-order-body > div {
  padding: 14px 16px;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.factory-purchase-order-body > div:last-child {
  border-right: 0;
}

.factory-purchase-lines {
  justify-content: flex-start !important;
  gap: 12px;
}

.factory-purchase-line {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.factory-product-thumb {
  width: 76px;
  height: 76px;
  border-radius: 4px;
  background: #eef2f7;
  color: #64748b;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
}

.factory-purchase-line strong,
.factory-purchase-supplier strong,
.factory-purchase-contact strong {
  color: #374151;
}

.factory-purchase-line p,
.factory-purchase-supplier p,
.factory-purchase-amounts p {
  margin: 4px 0;
  color: #4b5563;
}

.factory-purchase-supplier .compact-dl {
  grid-template-columns: 76px minmax(0, 1fr);
  margin-top: 10px;
}

.factory-purchase-contact,
.factory-purchase-method,
.factory-purchase-payable,
.factory-purchase-actions,
.factory-purchase-review {
  align-items: center;
  text-align: center;
  gap: 8px;
}

.factory-purchase-amounts {
  align-items: flex-start;
}

.factory-purchase-amounts hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 8px 0;
}

.factory-purchase-actions,
.factory-purchase-review {
  justify-content: center;
}

.factory-purchase-actions .secondary-link,
.factory-purchase-review .ghost-action,
.factory-purchase-actions .ghost-action {
  width: 86px;
  justify-content: center;
}

.order-warning {
  color: #b91c1c !important;
}

@media (max-width: 1200px) {
  .factory-purchase-order-body {
    grid-template-columns: 1fr 1fr;
  }

  .factory-purchase-order-body > div {
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
  }
}

@media (max-width: 720px) {
  .factory-purchase-order-body {
    grid-template-columns: 1fr;
  }

  .factory-purchase-line {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .factory-product-thumb {
    width: 62px;
    height: 62px;
  }
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
}

.split-layout.narrow-side {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.main-column,
.side-column {
  display: grid;
  gap: 16px;
}

.sticky-panel {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

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

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

.stat-card {
  display: flex;
  min-height: auto;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-card span {
  color: var(--muted);
  line-height: 1.4;
}

.stat-card strong {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1.15;
}

.expense-todo-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.expense-todo-card {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.expense-todo-card:hover,
.expense-todo-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.expense-todo-card small {
  color: var(--muted);
  line-height: 1.45;
}

.expense-workbench-panel {
  display: grid;
  gap: 16px;
  background: #f8fbff;
}

.expense-workbench-panel .section-title {
  margin-bottom: 0;
}

.expense-workbench-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.expense-next-action {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid #b9d4f6;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #fff;
}

.expense-next-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.expense-next-action strong {
  font-size: 22px;
  line-height: 1.25;
}

.expense-next-action p {
  margin: 0;
  color: var(--muted);
}

.expense-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
}

.expense-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.expense-step:hover,
.expense-step:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.expense-step-number {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--primary);
  font-weight: 800;
}

.expense-step-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.expense-step-title {
  font-weight: 800;
}

.expense-step small {
  color: var(--muted);
  line-height: 1.4;
}

.expense-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expense-section-nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #cbd8e8;
  border-radius: 999px;
  background: #fff;
  color: #165ca8;
  font-weight: 700;
  text-decoration: none;
}

.expense-section-nav a:hover,
.expense-section-nav a:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.expense-analysis-details {
  display: grid;
  gap: 14px;
}

.expense-analysis-details > summary {
  width: fit-content;
  cursor: pointer;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f3f8ff;
  color: #165ca8;
  padding: 10px 14px;
  font-weight: 800;
}

.expense-analysis-body {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.two-panel-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
}

.canteen-chart-grid {
  display: grid;
  gap: 14px;
}

.canteen-chart {
  display: grid;
  gap: 8px;
}

.canteen-chart h3 {
  margin: 0;
  color: #24435d;
  font-size: 15px;
}

.canteen-chart-modal[hidden] {
  display: none;
}

.canteen-chart-modal {
  position: fixed;
  z-index: 1260;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.canteen-chart-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.canteen-chart-modal-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, 96vw);
  max-height: min(760px, 88vh);
  overflow: hidden;
  border: 1px solid #b8d8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.canteen-chart-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #d8e8f7;
  padding: 12px 16px;
  background: #f8fbff;
}

.canteen-chart-modal-header strong {
  color: var(--text);
  font-size: 18px;
}

.canteen-chart-modal-body {
  overflow: auto;
  padding: 16px;
}

.canteen-chart-row {
  display: grid;
  grid-template-columns: minmax(92px, 140px) minmax(110px, 1fr) minmax(116px, auto);
  gap: 10px;
  align-items: center;
  min-height: 30px;
}

.canteen-chart-label,
.canteen-chart-value {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.canteen-chart-value {
  text-align: right;
}

.canteen-chart-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.canteen-chart-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #32a866, #2f80ed);
}

.canteen-ledger-panel {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  transform: none;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.global-list-scope-row {
  display: flex;
  align-items: center;
  min-height: 46px;
  overflow: hidden;
  border-bottom: 1px solid #dce6f0;
  background: #fff;
}

.global-list-scope-tabs,
.canteen-ledger-tabs {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  min-height: 46px;
  overflow-x: auto;
  border-bottom: 1px solid #dce6f0;
  background: #fff;
}

.global-list-scope-row .global-list-scope-tabs,
.global-list-scope-row .canteen-ledger-tabs {
  border-bottom: 0;
}

.global-list-scope-tab,
.canteen-ledger-tab {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  padding: 0 18px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.global-list-scope-tab strong,
.canteen-ledger-tab strong {
  min-width: 20px;
  border-radius: 3px;
  padding: 1px 6px;
  background: #ff7048;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.global-list-scope-tab.active {
  border-color: #19a184;
  color: #087461;
}

.canteen-ledger-tab.active {
  border-color: #19a184;
  color: #087461;
}

.global-list-scope-tab.active strong {
  background: #19a184;
}

.canteen-ledger-tab.active strong {
  background: #19a184;
}

.canteen-list-adjust-hint {
  display: flex;
  justify-content: flex-start;
  flex: 1 1 220px;
  min-height: 34px;
  align-items: center;
  padding: 0;
  background: transparent;
  color: #66717f;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.global-list-scope-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  padding: 0 14px;
}

.qualification-scope-actions {
  padding-right: 14px;
}

.canteen-ledger-command-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  border-bottom: 1px solid #dce6f0;
  padding: 10px 14px;
  background: #f8fbff;
}

.canteen-ledger-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.compact-list-action {
  min-height: 34px;
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.global-list-wrap {
  max-height: 68vh;
  overflow-x: auto;
  overflow-y: scroll;
  border-bottom: 1px solid #dce6f0;
  scrollbar-gutter: stable;
}

.global-list-wrap[data-auto-height-enabled="0"],
.global-list-wrap[data-list-vertical-scrollbar-enabled="0"] {
  max-height: none;
  overflow-y: visible;
}

.global-data-grid {
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.global-data-grid[data-auto-width-enabled="1"] {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.global-data-grid th,
.global-data-grid td {
  width: var(--list-default-column-width);
  height: var(--list-default-row-height);
  border-right: 1px solid #e5edf5;
  border-bottom: 1px solid #dce6f0;
  padding: 7px 10px;
  text-align: var(--list-text-align);
  vertical-align: middle;
  white-space: var(--list-cell-white-space);
}

body.global-list-density-compact .global-data-grid th,
body.global-list-density-compact .global-data-grid td,
body.global-list-density-compact .canteen-data-grid th,
body.global-list-density-compact .canteen-data-grid td {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
}

body.global-list-density-comfortable .global-data-grid th,
body.global-list-density-comfortable .global-data-grid td,
body.global-list-density-comfortable .canteen-data-grid th,
body.global-list-density-comfortable .canteen-data-grid td {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 15px;
}

.global-data-grid thead {
  position: sticky;
  top: 0;
  z-index: 8;
}

.global-data-grid thead tr {
  position: sticky;
  top: 0;
  z-index: 8;
}

.global-data-grid th {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--list-header-color);
  color: #5f6f82;
  font-size: 13px;
  font-weight: 800;
  text-align: var(--list-header-text-align);
}

.global-data-grid[data-header-style="compact"] th {
  height: 34px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
}

.global-data-grid[data-header-style="prominent"] th {
  height: 48px;
  border-bottom: 2px solid #91afd3;
  padding: 10px 12px;
  color: #1f2b3a;
  font-size: 14px;
  font-weight: 900;
}

body.global-list-fixed-header-disabled .global-data-grid thead,
body.global-list-fixed-header-disabled .global-data-grid thead tr,
body.global-list-fixed-header-disabled .global-data-grid th,
body.global-list-fixed-header-disabled .canteen-data-grid thead,
body.global-list-fixed-header-disabled .canteen-data-grid thead tr,
body.global-list-fixed-header-disabled .canteen-data-grid th {
  position: static !important;
  top: auto !important;
}

.global-data-grid th.has-resize-handle,
.global-data-grid tr.has-row-resize-handle > td:first-child {
  position: relative;
}

.global-data-grid tbody tr:nth-child(even) {
  background: #f7f7f7;
}

.global-data-grid tbody tr:hover {
  background: var(--list-row-hover-color);
}

.global-data-grid tbody tr[data-record-selectable-row] {
  cursor: pointer;
}

.global-data-grid tbody tr[data-record-selectable-row] a,
.global-data-grid tbody tr[data-record-selectable-row] button,
.global-data-grid tbody tr[data-record-selectable-row] input,
.global-data-grid tbody tr[data-record-selectable-row] select,
.global-data-grid tbody tr[data-record-selectable-row] textarea,
.global-data-grid tbody tr[data-record-selectable-row] [role="button"] {
  cursor: auto;
}

.global-data-grid tbody tr.is-selected {
  background: #e8f3ff;
}

.global-data-grid .checkbox-column {
  width: 46px;
  text-align: center;
}

.global-data-grid[data-auto-width-enabled="1"] th,
.global-data-grid[data-auto-width-enabled="1"] td {
  width: auto;
  min-width: var(--list-default-column-width);
}

.global-data-grid[data-auto-width-enabled="1"] th[data-column-key="attachments"],
.global-data-grid[data-auto-width-enabled="1"] td[data-column-key="attachments"] {
  width: var(--list-attachment-column-width);
  min-width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.global-data-grid[data-nowrap-enabled="1"] th,
.global-data-grid[data-nowrap-enabled="1"] td {
  overflow-wrap: normal;
}

.global-data-grid[data-cell-scroll-enabled="1"] th,
.global-data-grid[data-cell-scroll-enabled="1"] td {
  overflow: hidden;
}

.global-data-grid[data-attachment-cell-scroll-enabled="1"] td[data-column-key="attachments"] {
  overflow: hidden;
}

.global-data-grid[data-cell-scroll-enabled="1"] .list-cell-scroll-content {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.global-data-grid[data-attachment-cell-scroll-enabled="1"] td[data-column-key="attachments"] > .list-cell-scroll-content {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.global-data-grid[data-cell-scroll-direction="rtl"] .list-cell-scroll-content {
  direction: rtl;
}

.global-data-grid .is-frozen-column {
  position: sticky;
  z-index: 4;
  box-shadow: 1px 0 0 #dce6f0;
}

.global-data-grid th.is-frozen-column {
  z-index: 7;
  background: var(--list-header-color);
}

.global-data-grid tbody td.is-frozen-column {
  background: #fff;
}

.global-data-grid tbody tr:nth-child(even) td.is-frozen-column {
  background: #f7f7f7;
}

.global-data-grid tbody tr:hover td.is-frozen-column {
  background: var(--list-row-hover-color);
}

.global-data-grid tbody tr.is-selected td.is-frozen-column {
  background: #e8f3ff;
}

.global-data-grid th[data-column-key="select"],
.global-data-grid td[data-column-key="select"],
.global-data-grid[data-auto-width-enabled="1"] th[data-column-key="select"],
.global-data-grid[data-auto-width-enabled="1"] td[data-column-key="select"] {
  position: sticky;
  left: 0;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  text-align: center;
  box-shadow: 1px 0 0 #dce6f0;
}

.global-data-grid th[data-column-key="select"] {
  z-index: 14;
  background: var(--list-header-color);
}

.global-data-grid td[data-column-key="select"] {
  z-index: 6;
  background: #fff;
}

.global-data-grid tbody tr:nth-child(even) td[data-column-key="select"] {
  background: #f7f7f7;
}

.global-data-grid tbody tr:hover td[data-column-key="select"] {
  background: var(--list-row-hover-color);
}

.global-data-grid tbody tr.is-selected td[data-column-key="select"] {
  background: #e8f3ff;
}

.global-data-grid th.has-reorder-handle {
  cursor: grab;
}

.global-data-grid th.column-drag-over {
  background: #d9ecff;
  outline: 2px solid #1468d8;
  outline-offset: -2px;
}

.global-data-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.global-data-grid .secondary-link {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid #c8d8ea;
  border-radius: 3px;
  padding: 3px 10px;
  background: #fff;
  color: #1c5fa8;
  font-size: 13px;
  text-decoration: none;
}

.global-data-grid .money-cell {
  font-variant-numeric: tabular-nums;
  text-align: var(--list-text-align);
}

.global-data-grid td[data-column-key="attachments"] {
  width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.global-data-grid[data-nowrap-enabled="1"] td[data-column-key="attachments"] {
  width: var(--list-attachment-column-width);
  min-width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.global-data-grid[data-nowrap-enabled="1"] .attachment-manage-list-compact {
  max-width: none;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.global-data-grid[data-attachment-cell-scroll-enabled="1"] .attachment-manage-list-compact {
  width: max-content;
  max-width: none;
}

.global-data-grid[data-nowrap-enabled="1"] .attachment-manage-list-compact .attachment-manage-item {
  flex: 0 0 auto;
}

/* 全局食堂采购式页面布局：调用 data-global-page-layout="canteen" / data-global-list-layout="canteen" 即继承当前食堂采购页面骨架。 */
.global-page-layout-canteen,
[data-global-page-layout="canteen"] {
  width: 100%;
}

.global-list-layout-canteen,
[data-global-list-layout="canteen"].panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.global-list-command-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dce6f0;
  padding: 10px 14px;
  background: #f4f8fc;
}

.global-list-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.global-list-grid-wrap-canteen {
  max-height: 68vh;
  overflow-x: auto;
  overflow-y: scroll;
  border-bottom: 1px solid #dce6f0;
  scrollbar-gutter: stable;
}

.global-list-grid-wrap-canteen[data-auto-height-enabled="0"],
.global-list-grid-wrap-canteen[data-list-vertical-scrollbar-enabled="0"] {
  max-height: none;
  overflow-y: visible;
}

.global-data-grid-canteen {
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.global-data-grid-canteen[data-auto-width-enabled="1"] {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.global-data-grid-canteen th,
.global-data-grid-canteen td {
  width: var(--list-default-column-width);
  height: var(--list-default-row-height);
  border-right: 1px solid #e5edf5;
  border-bottom: 1px solid #dce6f0;
  padding: 7px 10px;
  text-align: var(--list-text-align);
  vertical-align: middle;
  white-space: var(--list-cell-white-space);
}

.global-data-grid-canteen thead,
.global-data-grid-canteen thead tr,
.global-data-grid-canteen th {
  position: sticky;
  top: 0;
}

.global-data-grid-canteen thead,
.global-data-grid-canteen thead tr {
  z-index: 8;
}

.global-data-grid-canteen th {
  z-index: 9;
  background: var(--list-header-color);
  color: #5f6f82;
  font-size: 13px;
  font-weight: 800;
  text-align: var(--list-header-text-align);
}

.global-data-grid-canteen tbody tr:nth-child(even) {
  background: #f7f7f7;
}

.global-data-grid-canteen tbody tr:hover {
  background: var(--list-row-hover-color);
}

.global-data-grid-canteen tbody tr[data-record-selectable-row] {
  cursor: pointer;
}

.global-data-grid-canteen tbody tr.is-selected {
  background: #e8f3ff;
}

.global-data-grid-canteen th:nth-child(2),
.global-data-grid-canteen td:nth-child(2) {
  width: 118px;
}

.global-data-grid-canteen th:nth-child(3),
.global-data-grid-canteen td:nth-child(3) {
  width: 128px;
}

.global-data-grid-canteen th:nth-child(4),
.global-data-grid-canteen td:nth-child(4) {
  width: 160px;
}

.global-data-grid-canteen th:nth-child(5),
.global-data-grid-canteen td:nth-child(5) {
  width: 100px;
}

.global-data-grid-canteen th:nth-child(6),
.global-data-grid-canteen td:nth-child(6) {
  width: 98px;
}

.global-data-grid-canteen th:nth-child(7),
.global-data-grid-canteen td:nth-child(7) {
  width: 150px;
}

.global-data-grid-canteen th:nth-child(8),
.global-data-grid-canteen td:nth-child(8) {
  width: var(--list-attachment-column-width);
  min-width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.global-data-grid-canteen th:nth-child(9),
.global-data-grid-canteen td:nth-child(9) {
  width: 86px;
}

.global-data-grid-canteen th:nth-child(10),
.global-data-grid-canteen td:nth-child(10) {
  width: 100px;
}

.global-data-grid-canteen th:nth-child(11),
.global-data-grid-canteen td:nth-child(11) {
  width: 150px;
}

.global-module-preview-panel {
  display: grid;
  gap: 18px;
}

.global-module-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.global-module-example {
  display: grid;
  gap: 12px;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 16px;
  background: #fbfdff;
}

.global-module-preview-frame {
  display: grid;
  gap: 16px;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  overflow: visible;
}

.global-module-preview-frame .attachment-dropzone {
  margin: 0;
}

.global-module-attachment-preview {
  padding: 0;
  overflow: auto;
}

.global-module-attachment-card {
  width: 100%;
  max-height: none;
  box-shadow: none;
  border: 0;
  border-radius: 8px;
}

.global-module-attachment-card .attachment-group-table-wrap {
  max-height: min(420px, 54vh);
}

.global-module-record-action-table {
  margin: 0;
}

.global-module-popup-preview {
  overflow: hidden;
  background: #f8fbff;
}

.global-module-popup-card {
  position: static;
  width: 100%;
  height: auto;
  min-height: 260px;
  max-height: none;
  border-color: #abcceb;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.14);
}

.global-module-popup-card.create-record-card.is-maximized {
  width: 100%;
  height: auto;
}

.global-module-popup-body {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: #ffffff;
}

.global-module-popup-row {
  display: grid;
  grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 12px;
  background: #fbfdff;
}

.global-module-popup-row span {
  color: var(--muted);
}

.global-module-popup-taskbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.global-module-invoice-preview {
  grid-template-columns: minmax(0, 1fr);
}

.global-module-demo-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

.global-module-help-preview {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: start;
}

.global-module-help-card {
  position: static;
  width: 100%;
  max-height: none;
  box-shadow: none;
}

.global-module-help-media {
  min-height: 92px;
  align-items: center;
  justify-content: center;
  background: #f6f9fc;
}

.global-module-help-media > div {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px dashed #b7cadc;
  border-radius: 6px;
  color: #245e9f;
  font-weight: 700;
}

.global-module-canteen-table {
  max-height: 260px;
  overflow: auto;
}

.compact-section-title {
  margin-bottom: 0;
}

.global-module-demo-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.global-module-invoice-dropzone {
  display: grid;
  gap: 12px;
}

.global-module-invoice-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.global-module-invoice-fields label {
  display: grid;
  gap: 5px;
  margin: 0;
}

.global-module-searchable-preview {
  overflow: visible;
}

.global-module-searchable-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  width: 100%;
}

.global-module-searchable-demo label {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.global-module-searchable-demo label > span:first-child {
  color: var(--muted);
  font-weight: 700;
}

.global-module-canteen-demo {
  overflow: hidden;
  padding: 0;
}

.global-module-canteen-demo > .section-title {
  padding: 16px 16px 0;
}

.global-module-demo-list {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.global-module-demo-list .global-list-wrap {
  max-height: 360px;
}

.global-module-config-body .global-module-preview-panel {
  overflow: visible;
}

.global-module-config-body .global-module-demo-list {
  min-height: 0;
}

.global-module-config-body .global-module-demo-list .global-list-wrap {
  max-height: min(360px, 48vh);
  overflow-x: auto;
  overflow-y: auto;
}

.global-module-demo-list .global-list-grid-wrap-canteen {
  max-height: 320px;
}

.global-module-config-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.global-module-config-nav nav {
  display: grid;
  gap: 10px;
}

.global-module-config-nav a,
.global-module-config-card {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  background: #fbfdff;
}

.global-module-config-nav a.active,
.global-module-config-nav a:hover,
.global-module-config-card:hover {
  border-color: #87b4e5;
  background: #f1f7ff;
}

.global-module-config-nav a span,
.global-module-config-card small,
.global-module-config-card p {
  color: #66758a;
}

.global-module-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.global-module-config-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.global-module-config-info {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
}

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

  .global-module-invoice-fields {
    grid-template-columns: 1fr;
  }

  .global-module-help-preview {
    grid-template-columns: 1fr;
  }

  .global-module-popup-row {
    grid-template-columns: 1fr;
  }

  .global-module-config-shell,
  .global-module-config-grid,
  .global-module-config-info {
    grid-template-columns: 1fr;
  }
}

.canteen-data-grid-wrap {
  max-height: 68vh;
  overflow-x: auto;
  overflow-y: scroll;
  border-bottom: 1px solid #dce6f0;
  scrollbar-gutter: stable;
}

.canteen-data-grid-wrap[data-auto-height-enabled="0"],
.canteen-data-grid-wrap[data-list-vertical-scrollbar-enabled="0"] {
  max-height: none;
  overflow-y: visible;
}

.canteen-data-grid {
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.canteen-data-grid[data-auto-width-enabled="1"] {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.canteen-data-grid th,
.canteen-data-grid td {
  width: var(--list-default-column-width);
}

.canteen-data-grid th,
.canteen-data-grid td {
  height: var(--list-default-row-height);
  border-right: 1px solid #e5edf5;
  border-bottom: 1px solid #dce6f0;
  padding: 7px 10px;
  text-align: var(--list-text-align);
  vertical-align: middle;
  white-space: var(--list-cell-white-space);
}

.canteen-data-grid thead {
  position: sticky;
  top: 0;
  z-index: 8;
}

.canteen-data-grid thead tr {
  position: sticky;
  top: 0;
  z-index: 8;
}

.canteen-data-grid th {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--list-header-color);
  color: #5f6f82;
  font-size: 13px;
  font-weight: 800;
  text-align: var(--list-header-text-align);
}

.canteen-data-grid[data-header-style="compact"] th {
  height: 34px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
}

.canteen-data-grid[data-header-style="prominent"] th {
  height: 48px;
  border-bottom: 2px solid #91afd3;
  padding: 10px 12px;
  color: #1f2b3a;
  font-size: 14px;
  font-weight: 900;
}

.resizable-column-handle,
.resizable-row-handle {
  position: absolute;
  z-index: 5;
  background: transparent;
}

.resizable-column-handle {
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.resizable-row-handle {
  right: 0;
  bottom: -3px;
  left: 0;
  height: 6px;
  cursor: row-resize;
}

.canteen-data-grid th.has-resize-handle,
.canteen-data-grid tr.has-row-resize-handle > td:first-child {
  position: relative;
}

.resizable-column-handle:hover,
.resizable-row-handle:hover {
  background: rgba(20, 104, 216, 0.18);
}

.canteen-data-grid tbody tr:nth-child(even) {
  background: #f7f7f7;
}

.canteen-data-grid tbody tr:hover {
  background: var(--list-row-hover-color);
}

.canteen-data-grid tbody tr[data-record-selectable-row] {
  cursor: pointer;
}

.canteen-data-grid tbody tr[data-record-selectable-row] a,
.canteen-data-grid tbody tr[data-record-selectable-row] button,
.canteen-data-grid tbody tr[data-record-selectable-row] input,
.canteen-data-grid tbody tr[data-record-selectable-row] select,
.canteen-data-grid tbody tr[data-record-selectable-row] textarea,
.canteen-data-grid tbody tr[data-record-selectable-row] [role="button"] {
  cursor: auto;
}

.canteen-data-grid tbody tr.is-selected {
  background: #e8f3ff;
}

.canteen-data-grid .checkbox-column {
  width: 46px;
  text-align: center;
}

.canteen-data-grid th:nth-child(2),
.canteen-data-grid td:nth-child(2) {
  width: 118px;
}

.canteen-data-grid th:nth-child(3),
.canteen-data-grid td:nth-child(3) {
  width: 128px;
}

.canteen-data-grid th:nth-child(4),
.canteen-data-grid td:nth-child(4) {
  width: 160px;
}

.canteen-data-grid th:nth-child(5),
.canteen-data-grid td:nth-child(5) {
  width: 100px;
}

.canteen-data-grid th:nth-child(6),
.canteen-data-grid td:nth-child(6) {
  width: 98px;
}

.canteen-data-grid th:nth-child(7),
.canteen-data-grid td:nth-child(7) {
  width: 150px;
}

.canteen-data-grid th:nth-child(8),
.canteen-data-grid td:nth-child(8) {
  width: var(--list-attachment-column-width);
  min-width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.canteen-data-grid th:nth-child(9),
.canteen-data-grid td:nth-child(9) {
  width: 86px;
}

.canteen-data-grid th:nth-child(10),
.canteen-data-grid td:nth-child(10) {
  width: 100px;
}

.canteen-data-grid th:nth-child(11),
.canteen-data-grid td:nth-child(11) {
  width: 150px;
}

.canteen-data-grid[data-auto-width-enabled="1"] th,
.canteen-data-grid[data-auto-width-enabled="1"] td {
  width: auto;
  min-width: var(--list-default-column-width);
}

.canteen-data-grid[data-auto-width-enabled="1"] th[data-column-key="attachments"],
.canteen-data-grid[data-auto-width-enabled="1"] td[data-column-key="attachments"] {
  width: var(--list-attachment-column-width);
  min-width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.canteen-data-grid[data-nowrap-enabled="1"] th,
.canteen-data-grid[data-nowrap-enabled="1"] td {
  overflow-wrap: normal;
}

.canteen-data-grid[data-cell-scroll-enabled="1"] th,
.canteen-data-grid[data-cell-scroll-enabled="1"] td {
  overflow: hidden;
}

.canteen-data-grid[data-attachment-cell-scroll-enabled="1"] .canteen-attachment-cell {
  overflow: hidden;
}

.list-cell-scroll-content {
  display: block;
  max-width: 100%;
  text-align: inherit;
}

.canteen-data-grid[data-cell-scroll-enabled="1"] .list-cell-scroll-content {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.canteen-data-grid[data-attachment-cell-scroll-enabled="1"] .canteen-attachment-cell > .list-cell-scroll-content {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.canteen-data-grid[data-cell-scroll-direction="rtl"] .list-cell-scroll-content {
  direction: rtl;
}

.canteen-data-grid .is-frozen-column {
  position: sticky;
  z-index: 4;
  box-shadow: 1px 0 0 #dce6f0;
}

.canteen-data-grid th.is-frozen-column {
  z-index: 7;
  background: var(--list-header-color);
}

.canteen-data-grid tbody td.is-frozen-column {
  background: #fff;
}

.canteen-data-grid tbody tr:nth-child(even) td.is-frozen-column {
  background: #f7f7f7;
}

.canteen-data-grid tbody tr:hover td.is-frozen-column {
  background: var(--list-row-hover-color);
}

.canteen-data-grid tbody tr.is-selected td.is-frozen-column {
  background: #e8f3ff;
}

.canteen-data-grid th[data-column-key="select"],
.canteen-data-grid td[data-column-key="select"],
.canteen-data-grid[data-auto-width-enabled="1"] th[data-column-key="select"],
.canteen-data-grid[data-auto-width-enabled="1"] td[data-column-key="select"] {
  position: sticky;
  left: 0;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  text-align: center;
  box-shadow: 1px 0 0 #dce6f0;
}

.canteen-data-grid th[data-column-key="select"] {
  z-index: 14;
  background: var(--list-header-color);
}

.canteen-data-grid td[data-column-key="select"] {
  z-index: 6;
  background: #fff;
}

.canteen-data-grid tbody tr:nth-child(even) td[data-column-key="select"] {
  background: #f7f7f7;
}

.canteen-data-grid tbody tr:hover td[data-column-key="select"] {
  background: var(--list-row-hover-color);
}

.canteen-data-grid tbody tr.is-selected td[data-column-key="select"] {
  background: #e8f3ff;
}

.global-data-grid .sticky-select-column,
.canteen-data-grid .sticky-select-column,
[data-resizable-list] .sticky-select-column,
.global-data-grid th[data-column-key="select"],
.global-data-grid td[data-column-key="select"],
.canteen-data-grid th[data-column-key="select"],
.canteen-data-grid td[data-column-key="select"],
[data-resizable-list] th[data-column-key="select"],
[data-resizable-list] td[data-column-key="select"] {
  position: sticky !important;
  left: 0 !important;
  inset-inline-start: 0 !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  overflow: visible !important;
  background-clip: padding-box;
  text-align: center;
  box-shadow: 1px 0 0 #dce6f0, 6px 0 10px rgba(23, 33, 43, 0.06);
  transform: translateZ(0);
}

.global-data-grid thead,
.global-data-grid thead tr,
.canteen-data-grid thead,
.canteen-data-grid thead tr,
[data-resizable-list] thead,
[data-resizable-list] thead tr {
  z-index: var(--z-list-sticky) !important;
}

.global-data-grid thead .sticky-select-column,
.canteen-data-grid thead .sticky-select-column,
[data-resizable-list] thead .sticky-select-column,
.global-data-grid thead th[data-column-key="select"],
.canteen-data-grid thead th[data-column-key="select"],
[data-resizable-list] thead th[data-column-key="select"] {
  top: 0 !important;
  z-index: var(--z-list-sticky-select) !important;
  overflow: hidden !important;
  background: var(--list-header-color) !important;
  transform: none !important;
  vertical-align: middle;
}

.global-data-grid thead th[data-column-key="select"] input[type="checkbox"],
.canteen-data-grid thead th[data-column-key="select"] input[type="checkbox"],
[data-resizable-list] thead th[data-column-key="select"] input[type="checkbox"],
.global-data-grid thead .sticky-select-column input[type="checkbox"],
.canteen-data-grid thead .sticky-select-column input[type="checkbox"],
[data-resizable-list] thead .sticky-select-column input[type="checkbox"] {
  display: block;
  margin: 0 auto;
  transform: none;
}

.global-data-grid tbody .sticky-select-column,
.canteen-data-grid tbody .sticky-select-column,
[data-resizable-list] tbody .sticky-select-column,
.global-data-grid tbody td[data-column-key="select"],
.canteen-data-grid tbody td[data-column-key="select"],
[data-resizable-list] tbody td[data-column-key="select"] {
  z-index: var(--z-list-body-sticky) !important;
  background: #fff;
}

.global-data-grid tbody tr:nth-child(even) .sticky-select-column,
.canteen-data-grid tbody tr:nth-child(even) .sticky-select-column {
  background: #f7f7f7;
}

.global-data-grid tbody tr:hover .sticky-select-column,
.canteen-data-grid tbody tr:hover .sticky-select-column {
  background: var(--list-row-hover-color);
}

.global-data-grid tbody tr.is-selected .sticky-select-column,
.canteen-data-grid tbody tr.is-selected .sticky-select-column {
  background: #e8f3ff;
}

.canteen-data-grid th.has-reorder-handle {
  cursor: grab;
}

.canteen-data-grid th.column-drag-over {
  background: #d9ecff;
  outline: 2px solid #1468d8;
  outline-offset: -2px;
}

.column-chooser-panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal-high) + 20);
  display: grid;
  place-items: center;
  margin: 0;
  max-width: none;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.column-chooser-panel[hidden],
.column-chooser-panel.is-minimized {
  display: none !important;
}

.column-chooser-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.column-chooser-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 96vw);
  max-height: min(760px, 92vh);
  overflow: hidden;
  border: 1px solid #cbdced;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.column-chooser-panel.is-maximized {
  padding: 0;
}

.column-chooser-panel.is-maximized .column-chooser-card {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
}

.column-chooser-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #d8e8f7;
  padding: 12px 16px;
  background: #f8fbff;
}

.column-chooser-titlebar strong {
  color: #17212b;
  font-size: 18px;
  font-weight: 800;
}

.column-chooser-panel.is-windows-controls .column-chooser-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 0 16px;
  background: #ffffff;
}

.column-chooser-panel.is-windows-controls .column-chooser-titlebar strong {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.column-chooser-panel.is-windows-controls .column-chooser-window-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
}

.column-chooser-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
}

.column-chooser-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: #5f6f82;
  font-size: 12px;
}

.column-chooser-header strong {
  color: #1f2b3a;
  font-size: 13px;
}

.column-chooser-freeze-control {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e3ef;
  border-radius: 4px;
  padding: 5px 8px;
  background: #f8fbfe;
  color: #253244;
  font-size: 13px;
  font-weight: 700;
}

.column-chooser-freeze-control input {
  width: 64px;
  min-height: 28px;
  border: 1px solid #cbdced;
  border-radius: 4px;
  padding: 2px 6px;
}

.column-chooser-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.column-chooser-option {
  display: grid;
  grid-template-columns: auto minmax(68px, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid #d7e3ef;
  border-radius: 4px;
  padding: 4px 8px;
  background: #f8fbfe;
  color: #253244;
  font-size: 13px;
  font-weight: 700;
}

.column-chooser-option input {
  width: 14px;
  height: 14px;
}

.column-chooser-label {
  min-width: 0;
}

.column-align-select {
  min-height: 28px;
  border: 1px solid #cbdced;
  border-radius: 4px;
  padding: 2px 6px;
  background: #fff;
  color: #253244;
  font-size: 12px;
}

.column-chooser-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #edf3f8;
  padding-top: 8px;
}

.column-chooser-status {
  color: #5f6f82;
  font-size: 12px;
}

.canteen-data-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.canteen-data-grid .secondary-link {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid #c8d8ea;
  border-radius: 3px;
  padding: 3px 10px;
  background: #fff;
  color: #1c5fa8;
  font-size: 13px;
  text-decoration: none;
}

.canteen-data-grid .canteen-log-link {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.canteen-data-grid .canteen-log-link::after {
  margin-left: 5px;
  color: #4985bd;
  content: "›";
  font-weight: 900;
}

.canteen-data-grid .canteen-log-link:hover,
.canteen-data-grid .canteen-log-link:focus-visible {
  border-color: #7ab6e8;
  background: #e8f5ff;
  color: #0d4ea6;
  outline: none;
  transform: translateY(-1px);
}

.operation-change-list {
  display: grid;
  gap: 5px;
  min-width: 260px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.operation-change-list li {
  color: #263849;
  font-size: 13px;
  line-height: 1.45;
}

.operation-change-before {
  color: #9b3e3e;
  text-decoration: line-through;
}

.operation-change-after {
  color: #11693c;
  font-weight: 800;
}

.operation-actor-label {
  color: #5f6f82;
  font-size: 12px;
  font-weight: 800;
}

.operation-change-hint {
  margin: 0 0 6px;
  color: #8a6424;
  font-size: 12px;
  font-weight: 700;
}

.operation-change-missing {
  color: #9b3e3e;
  font-size: 12px;
  font-weight: 700;
}

.canteen-data-grid .money-cell {
  font-variant-numeric: tabular-nums;
  text-align: var(--list-text-align);
}

.canteen-note-cell {
  overflow: hidden;
  max-width: 150px;
  text-overflow: ellipsis;
}

.canteen-ledger-footer,
.global-list-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 10px 18px;
  background: #fff;
  border-top: 1px solid #d9dee5;
  overflow-x: auto;
  white-space: nowrap;
}

.canteen-page-links,
.canteen-page-jump-form,
.canteen-page-size-form,
.global-page-links,
.global-page-jump-form,
.global-page-size-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.canteen-page-links a,
.canteen-page-links span,
.global-page-links a,
.global-page-links span {
  display: inline-flex;
  min-width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.canteen-page-links a,
.global-page-links a {
  background: #fff;
}

.canteen-page-links .canteen-page-arrow,
.global-page-links .global-page-arrow {
  color: #0f172a;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.canteen-page-links .active,
.global-page-links .active {
  background: #08a394;
  color: #fff;
  font-weight: 700;
}

.canteen-page-links .disabled,
.canteen-page-links .ellipsis,
.global-page-links .disabled,
.global-page-links .ellipsis {
  color: #94a3b8;
}

.canteen-page-jump-form span,
.canteen-page-total,
.canteen-page-size-form span,
.global-page-jump-form span,
.global-page-total,
.global-page-size-form span {
  color: var(--muted);
  font-size: 13px;
}

.canteen-page-jump-form input,
.global-page-jump-form input {
  width: 48px;
  min-height: 32px;
  border: 1px solid #d8dee8;
  border-radius: 2px;
  text-align: center;
}

.canteen-page-jump-form button,
.global-page-jump-form button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #d8dee8;
  border-radius: 2px;
  background: #fff;
  color: #111827;
  font-weight: 700;
}

.canteen-page-size-form select,
.global-page-size-form select {
  min-height: 32px;
  border: 1px solid #d8dee8;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
}

.info-grid div {
  display: grid;
  gap: 4px;
}

.money-summary {
  margin-bottom: 16px;
}

.info-grid span,
.compact-dl dt,
.muted-line,
.field-hint {
  color: var(--muted);
}

.draft-status {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  background: #f0fdf4;
  color: #166534;
  font-size: 14px;
  line-height: 1.4;
}

.resume-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title h2,
.panel h2 {
  margin: 0;
  font-size: 17px;
}

.required-marker {
  margin-right: 4px;
  color: var(--danger);
  font-weight: 800;
}

.next-step-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
}

.next-step-strip span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.next-step-strip strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
}

.next-step-strip p {
  margin: 4px 0 0;
  color: var(--muted);
}

.record-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.record-card + .record-card {
  margin-top: 12px;
}

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

.record-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.compact-dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0 0 12px;
}

.compact-dl dd {
  margin: 0;
}

.timeline {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.timeline-item {
  border-left: 3px solid #cbd7e5;
  padding-left: 12px;
}

.timeline-item.important {
  border-left-color: var(--danger);
}

.timeline-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.attachment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.attachment-row a {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: #f8fafc;
}

.danger-cell {
  background: #ffe4e4;
  color: #8a2424;
  font-weight: 700;
}

.danger-cell small {
  display: block;
  margin-top: 3px;
  color: #9b3030;
  font-weight: 600;
}

.danger-inline {
  display: inline-flex;
  border-radius: 6px;
  padding: 3px 8px;
  background: #ffe4e4;
  color: #8a2424;
  font-weight: 700;
}

.mini-list {
  display: grid;
  gap: 4px;
}

.mini-list-row,
.department-tree-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.company-basic-data-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.data-warning-pill {
  border-radius: 999px;
  padding: 2px 7px;
  background: #fff1f0;
  color: #b42318;
  border: 1px solid #f4b8b0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.permission-inline-list {
  display: inline;
  color: #34495f;
  line-height: 1.7;
}

.permission-count-stack {
  display: inline-grid;
  gap: 3px;
  color: #34495f;
  font-size: 12px;
  line-height: 1.4;
}

.department-tree-item {
  padding-left: calc(var(--level, 0) * 18px);
}

.department-tree-item small {
  color: var(--muted);
}

.department-company-layout {
  display: grid;
  gap: 8px;
}

.department-company-group {
  position: relative;
  border: 1px solid #d3e3f3;
  border-radius: 6px;
  background: #f8fcff;
}

.department-company-group::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 12px;
  height: 100%;
  content: "";
}

.department-company-group:hover,
.department-company-group:focus-within {
  z-index: var(--z-page-floating);
}

.department-company-trigger {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  color: #24435d;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.department-company-summary {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
}

.department-company-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.department-company-count {
  margin-left: 2em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.department-company-trigger small {
  color: var(--muted);
  font-weight: 600;
}

.department-company-list {
  position: absolute;
  top: -1px;
  left: calc(100% + 12px);
  z-index: var(--z-page-floating);
  display: none;
  gap: 5px;
  width: min(360px, calc(100vw - 80px));
  max-height: 360px;
  overflow: auto;
  border: 1px solid #d3e3f3;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(22, 48, 71, 0.16);
}

.department-company-group:hover .department-company-list,
.department-company-group:focus-within .department-company-list {
  display: grid;
}

@media (max-width: 900px) {
  .registration-basic-data-table-wrap {
    overflow-x: auto;
  }

  .department-company-list {
    position: static;
    width: auto;
    margin: 0 8px 8px;
    border-radius: 6px;
    box-shadow: none;
  }
}

.basic-data-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.basic-data-toolbar h2 {
  margin: 0;
}

.basic-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.basic-data-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 24px;
}

.basic-data-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 33, 43, 0.42);
}

.basic-data-modal-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid #b8d8f7;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(23, 33, 43, 0.28);
  padding: 20px;
}

.basic-data-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.basic-data-modal-header h2 {
  margin: 0;
}

.basic-data-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.basic-data-modal-close {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #66717f;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.basic-data-modal-close:hover,
.basic-data-modal-close:focus {
  background: #ffe0e0;
  color: #9b2525;
}

.project-external-person-modal-card {
  width: min(760px, calc(100vw - 48px));
}

.project-external-person-modal {
  z-index: var(--z-modal-high);
}

.project-external-person-filter-region[hidden] {
  display: none !important;
}

.project-external-person-modal-page {
  padding: 0;
}

.project-external-person-modal-page .project-external-person-form-panel {
  margin: 0;
  border: 0;
  box-shadow: none;
}

.registration-log-modal[hidden] {
  display: none !important;
}

.registration-log-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 18px;
}

.registration-log-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.registration-log-modal-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  overflow: hidden;
  border: 1px solid #b8d8f7;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.registration-log-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d8e8f7;
  background: #f8fbff;
  padding: 12px 16px;
}

.registration-log-modal-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.registration-log-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.registration-log-modal-close {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #66717f;
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.registration-log-modal-close:hover,
.registration-log-modal-close:focus-visible {
  background: #ffe0e0;
  color: #9b2525;
  outline: none;
}

.registration-log-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #ffffff;
}

.registration-log-modal-body .table-wrap {
  max-height: none;
  width: 100%;
  overflow: auto;
}

.registration-log-modal-body table {
  min-width: 980px;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.department-submit-button {
  min-height: 45px;
  min-width: 144px;
  padding: 10px 24px;
  font-size: 18px;
  font-weight: 800;
}

.mini-edit-link {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.company-structure-panel {
  display: grid;
  gap: 14px;
}

.org-summary-row,
.org-node-meta,
.org-people-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.org-summary-row span,
.org-node-meta span {
  border-radius: 999px;
  background: #f2f7fb;
  padding: 3px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.org-tree {
  display: grid;
  gap: 10px;
}

.org-node {
  display: grid;
  gap: 8px;
  border-left: 3px solid #b8d8f7;
  padding: 10px 0 10px calc(12px + var(--level, 0) * 22px);
  background: #fbfdff;
}

.org-node-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.org-node-main small {
  display: block;
  color: var(--muted);
}

.org-person {
  border-radius: 6px;
  padding: 4px 8px;
  background: #eef8f1;
  color: #1d6d38;
  font-weight: 700;
}

.org-person.status-warning {
  background: #fff1d6;
  color: #8a5a00;
}

.org-unassigned {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.org-unassigned h3 {
  margin: 0;
  font-size: 15px;
}

.milestone-list {
  display: grid;
  gap: 10px;
}

.milestone-list-priority {
  margin-top: 10px;
}

.milestone-more {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.milestone-more summary {
  cursor: pointer;
  color: #0f5db8;
  font-weight: 700;
}

.milestone-item {
  display: grid;
  gap: 6px;
  border-left: 3px solid #c7d5e5;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.milestone-item.done {
  border-left-color: #2d9c57;
  background: #f1fbf5;
}

.milestone-item.reminder-danger {
  border-left-color: var(--danger);
  background: #fff5f5;
}

.milestone-item.reminder-warning {
  border-left-color: #d58a00;
  background: #fff9e8;
}

.milestone-item > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.milestone-item span,
.milestone-item small {
  color: var(--muted);
}

.milestone-item form {
  margin: 0;
}

.milestone-complete-form {
  display: grid;
  gap: 8px;
}

.milestone-complete-form textarea,
.milestone-complete-form input[type="file"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.milestone-complete-form .checkbox-line {
  margin: 0;
}

.approval-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.approval-box table {
  font-size: 13px;
}

.print-sheet {
  display: grid;
  gap: 16px;
}

.print-title {
  text-align: center;
}

.print-title h2 {
  margin: 0;
  font-size: 26px;
}

.print-title p {
  margin: 6px 0 0;
  color: var(--muted);
}

.print-table th {
  width: 180px;
}

.print-signature {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.print-signature div {
  min-height: 76px;
  border-bottom: 1px solid #999;
  color: var(--muted);
}

.ghost-action {
  width: fit-content;
  min-height: 30px;
  border: 1px solid #c8d7e8;
  border-radius: 6px;
  padding: 4px 10px;
  background: #fff;
  color: var(--primary-dark);
  cursor: pointer;
}

.danger-action {
  border-color: #f0c2c2;
  color: var(--danger);
}

.messages {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.message {
  border-radius: 6px;
  padding: 10px 12px;
  background: #eef4fb;
}

.message.success {
  background: var(--ok-bg);
}

.message.auto-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1500;
  min-width: 240px;
  max-width: min(420px, calc(100vw - 48px));
  transform: translate(-50%, -50%);
  border: 1px solid #bfe6cc;
  border-radius: 10px;
  padding: 18px 24px;
  background: #f0fbf4;
  box-shadow: 0 18px 50px rgba(16, 38, 65, 0.2);
  color: #126b3b;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.message.auto-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 8px));
}

.message.error,
.error {
  color: var(--danger);
}

.field-error {
  border: 1px solid #f0b7b7;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fde8e8;
  color: var(--danger);
  font-weight: 700;
}

.attachment-dropzone {
  display: grid;
  gap: 8px;
  border: 1px dashed #8bb5d8;
  border-radius: 6px;
  padding: 14px;
  background: #f8fbff;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.attachment-dropzone.dragging {
  border-color: #1f7a4d;
  background: #eefaf1;
}

.attachment-dropzone > input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.attachment-dropzone .attachment-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 7px;
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  min-height: 30px !important;
  border-color: #8cb7df;
  border-radius: 999px;
  padding: 5px 14px !important;
  background: #fff;
  box-shadow: 0 2px 6px rgba(31, 88, 132, 0.12);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
}

.attachment-dropzone .attachment-file-button input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}

.attachment-dropzone .attachment-file-button:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.attachment-dropzone .attachment-file-button:focus-visible {
  outline: 2px solid rgba(31, 113, 197, 0.28);
  outline-offset: 2px;
}

.attachment-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.file-upload-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.file-upload-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  max-width: fit-content;
  min-height: 30px;
  border: 1px solid #8cb7df;
  border-radius: 999px;
  padding: 5px 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(31, 88, 132, 0.12);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.file-upload-button:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

.file-upload-button.is-submitting {
  border-color: #87bce8;
  background: #eaf5ff;
  color: var(--primary-dark);
  cursor: wait;
}

.file-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.file-upload-button input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}

.file-upload-name {
  max-width: min(360px, 100%);
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-dropzone strong {
  color: var(--primary-dark);
  font-size: 14px;
}

.canteen-attachment-dropzone {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 58px;
  align-content: start;
  align-items: center;
  gap: 4px 8px;
  padding: 7px 10px;
}

.canteen-attachment-dropzone .attachment-file-button {
  margin-top: 0;
}

.qualification-batch-upload-form .normal-file-upload-dropzone,
.qualification-test-report-new-form .normal-file-upload-dropzone {
  min-height: 116px;
  align-content: start;
}

.normal-file-folder-upload-dropzone {
  grid-template-columns: minmax(0, 1fr);
  min-height: 240px;
  justify-items: stretch;
  align-content: center;
  padding: 24px;
  background: #fff;
}

.normal-file-folder-upload-dropzone.dragging {
  border-color: var(--primary);
  background: #f6fbff;
}

.normal-file-upload-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 172px;
  align-content: center;
  color: var(--text);
  text-align: center;
}

.normal-file-upload-empty[hidden] {
  display: none;
}

.normal-file-upload-empty-icon {
  position: relative;
  display: block;
  width: 58px;
  height: 70px;
  border-radius: 4px;
  background: #eef2f8;
  box-shadow: inset -6px 0 0 #d7deea;
}

.normal-file-upload-empty-icon::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 16px;
  width: 24px;
  height: 2px;
  background: #a4afbf;
  box-shadow: 0 10px 0 #a4afbf;
}

.normal-file-upload-empty-icon::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -8px;
  width: 18px;
  height: 18px;
  border: 4px solid var(--primary);
  border-radius: 50%;
  box-shadow: 10px 10px 0 -6px var(--primary);
}

.normal-file-upload-empty-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
}

.normal-file-upload-empty-text {
  color: #4d5b6c;
  font-size: 15px;
}

.normal-file-upload-empty-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.normal-file-upload-empty-button {
  min-height: 36px;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  padding: 0 18px;
  background: #fff;
  color: #2d3b4d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.normal-file-upload-empty-button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.normal-file-upload-empty-button:hover,
.normal-file-upload-empty-button:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 113, 197, 0.16);
  outline: none;
}

.normal-file-folder-upload-dropzone .normal-file-upload-fallback-button {
  display: none;
}

.normal-file-folder-upload-dropzone .normal-file-upload-choice {
  display: none;
}

.normal-file-folder-upload-dropzone .normal-file-upload-choice[hidden] {
  display: none;
}

.normal-file-upload-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.normal-file-upload-choice {
  position: relative;
  z-index: var(--z-page-floating);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
  border: 1px solid #d5e3f2;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 88, 132, 0.12);
}

.normal-file-upload-choice[hidden] {
  display: none;
}

.normal-file-upload-choice-title {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.normal-file-upload-choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 8px;
  border: 1px solid #bfd6ee;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fbff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.normal-file-upload-choice-card:hover {
  border-color: var(--primary);
  background: #eef7ff;
}

.normal-file-upload-choice-card strong {
  color: var(--primary-dark);
  font-size: 14px;
}

.normal-file-upload-choice-card small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.canteen-attachment-dropzone .canteen-dropzone-prompt {
  align-self: start;
  justify-self: start;
  margin: 0;
  font-size: 12px;
  text-align: left;
}

.canteen-attachment-dropzone .canteen-upload-status {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
}

.canteen-existing-attachments {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  border: 1px solid #d9e8f6;
  border-radius: 6px;
  padding: 12px 14px;
  background: #f8fbff;
}

.canteen-existing-attachments .field-label {
  color: var(--muted);
  font-weight: 800;
}

.selected-attachment-list {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.selected-attachment-list[hidden] {
  display: none;
}

.selected-attachment-item {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
}

.selected-attachment-item.is-uploading {
  border-color: #a9cdef;
  background: #f5fbff;
}

.selected-attachment-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.normal-file-folder-upload-dropzone .selected-attachment-item {
  width: 150px;
  justify-items: center;
}

.normal-file-folder-upload-dropzone .selected-attachment-name {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  clip: auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-attachment-thumbnail {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: #eef5fb;
  cursor: pointer;
}

.attachment-thumbnail-button {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: #eef5fb;
  cursor: pointer;
}

.attachment-thumbnail-button.is-action-denied,
.attachment-file-icon.is-action-denied {
  width: 52px;
  height: 52px;
  border-color: #d4dde8;
  background: #f3f6fa;
  color: #8795a6;
  box-shadow: none;
  cursor: not-allowed;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.selected-attachment-thumbnail:hover,
.selected-attachment-thumbnail:focus-visible,
.attachment-thumbnail-button:hover,
.attachment-thumbnail-button:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 113, 197, 0.16);
  outline: none;
}

.attachment-thumbnail-button.is-action-denied:hover,
.attachment-thumbnail-button.is-action-denied:focus-visible,
.attachment-file-icon.is-action-denied:hover,
.attachment-file-icon.is-action-denied:focus-visible {
  border-color: #d4dde8;
  background: #f3f6fa;
  color: #8795a6;
  box-shadow: none;
  outline: none;
}

.selected-attachment-thumbnail img,
.attachment-thumbnail-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-upload-state {
  display: none;
  align-items: center;
  gap: 5px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.attachment-upload-progress {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeaf7;
}

.attachment-upload-progress-bar {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #3ab779);
  animation: attachment-upload-progress 1s ease-in-out infinite;
}

.normal-file-upload-progress-panel {
  grid-column: 1 / -1;
  justify-self: start;
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 38, 65, 0.12);
}

.normal-file-upload-progress-panel[hidden] {
  display: none;
}

.normal-upload-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 22px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.normal-upload-progress-close {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}

.normal-upload-progress-close:hover,
.normal-upload-progress-close:focus-visible {
  background: #eef4fb;
  outline: none;
}

.normal-upload-progress-summary {
  display: grid;
  gap: 4px;
  border-left: 4px solid #9ec8f0;
  padding: 10px 24px 12px 20px;
  background: #f5f5f5;
  color: var(--text);
}

.normal-upload-progress-summary span {
  font-size: 14px;
  font-weight: 700;
}

.normal-upload-progress-summary small {
  color: #657386;
  font-size: 12px;
}

.normal-upload-progress-list {
  display: grid;
  max-height: 280px;
  overflow: auto;
  padding: 8px 22px 14px;
}

.normal-upload-progress-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
}

.normal-upload-progress-icon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 34px;
  border-radius: 4px;
  background: #e9eff8;
}

.normal-upload-progress-icon::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-top: 9px solid #c9d5e5;
  border-left: 9px solid transparent;
}

.normal-upload-progress-icon.is-folder {
  height: 22px;
  border-radius: 4px;
  background: var(--primary);
}

.normal-upload-progress-icon.is-folder::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 14px;
  height: 8px;
  border-radius: 4px 4px 0 0;
  background: var(--primary);
}

.normal-upload-progress-icon.is-folder::after {
  display: none;
}

.normal-upload-progress-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.normal-upload-progress-body strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.normal-upload-progress-body small {
  overflow: hidden;
  color: #657386;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.normal-upload-progress-meter {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #e3ebf5;
}

.normal-upload-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #2ab673);
  transition: width 0.18s ease;
}

.normal-upload-progress-spinner {
  width: 16px;
  height: 16px;
  border: 3px solid #e2e9f2;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: attachment-upload-spin 0.8s linear infinite;
}

.selected-attachment-item.is-uploading .attachment-upload-state {
  display: inline-flex;
}

.selected-attachment-item.is-uploading .attachment-upload-progress {
  display: block;
}

.selected-attachment-item.is-uploading .selected-attachment-remove {
  display: none;
}

.attachment-upload-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #cfe3f8;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: attachment-upload-spin 0.8s linear infinite;
}

@keyframes attachment-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes attachment-upload-progress {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(230%);
  }
}

.attachment-remove-x {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #f0b8b8;
  border-radius: 50%;
  padding: 0;
  background: #fff7f7;
  color: var(--danger);
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.attachment-remove-x:hover,
.attachment-remove-x:focus-visible {
  border-color: var(--danger);
  background: #ffecec;
  box-shadow: 0 0 0 3px rgba(177, 55, 55, 0.14);
  outline: none;
}

.attachment-remove-x.is-action-denied {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #9aa8b8;
  box-shadow: none;
  cursor: not-allowed;
}

.attachment-remove-x.is-action-denied:hover,
.attachment-remove-x.is-action-denied:focus-visible {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #9aa8b8;
  box-shadow: none;
  outline: none;
}

.attachment-remove-form {
  display: inline-grid;
  margin: 0;
}

.canteen-save-button {
  width: 100%;
}

.canteen-save-button:disabled {
  border-color: #a9bfd8;
  background: #a9bfd8;
  color: #fff;
  cursor: wait;
}

@media (max-width: 720px) {
  .canteen-attachment-dropzone {
    grid-template-columns: 1fr;
  }

  .canteen-attachment-dropzone .attachment-file-button,
  .canteen-attachment-dropzone .canteen-dropzone-prompt,
  .canteen-attachment-dropzone .canteen-upload-status {
    grid-column: 1 / -1;
  }

  .selected-attachment-item {
    grid-template-columns: auto auto;
  }
}

.invoice-ocr-message {
  min-height: 18px;
}

.invoice-record-box {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

.invoice-record-title {
  color: var(--primary-dark);
  font-size: 14px;
}

.invoice-record-table-wrap {
  overflow-x: auto;
}

.invoice-record-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 12px;
}

.invoice-record-table th,
.invoice-record-table td {
  border-bottom: 1px solid #e6eef5;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.invoice-record-table th {
  background: #f4f8fc;
  color: #415d78;
  font-weight: 800;
}

.attachment-upload-queue {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.attachment-upload-item {
  display: grid;
  grid-template-columns: 48px auto minmax(220px, 0.75fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}

.attachment-upload-preview {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #eef5fb;
  color: #4b6380;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
}

.attachment-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-upload-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.attachment-upload-details {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.attachment-upload-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
}

.attachment-upload-remove {
  border: 1px solid #f0b7b7;
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff6f6;
  color: var(--danger);
  font-weight: 700;
  cursor: pointer;
}

.attachment-upload-remove:hover {
  background: #fde8e8;
}

.attachment-invoice-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #415d78;
  font-size: 12px;
  font-weight: 700;
}

.attachment-invoice-note-field {
  align-self: start;
  margin-top: 3px;
}

.attachment-invoice-input,
.attachment-invoice-note {
  width: 100%;
  border: 1px solid #ccd9e5;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 500;
}

.attachment-invoice-note {
  min-height: 0;
  resize: none;
}

@media (max-width: 640px) {
  .attachment-upload-item {
    grid-template-columns: 48px auto;
  }

  .attachment-invoice-note-field,
  .attachment-upload-details {
    grid-column: 1 / -1;
  }
}

.attachment-manage-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.attachment-manage-item {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
}

.attachment-manage-item.attachment-soft-deleted {
  border-color: #f1b7b7;
  background: #fff8f8;
  color: #8a4b4b;
}

.attachment-manage-item.attachment-soft-deleted::after {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: rgba(218, 58, 58, 0.82);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.attachment-deleted-badge {
  border: 1px solid #f1b7b7;
  border-radius: 999px;
  background: #fff1f1;
  color: #b42318;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.attachment-manage-item.has-attachment-selector {
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.attachment-manage-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.attachment-file-icon {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  padding: 0;
  background: #eef5fb;
  color: #4b6380;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.attachment-file-download-icon {
  text-decoration: none;
}

.attachment-pdf-preview-icon {
  border-color: #f3b4b4;
  background: #fff4f4;
  color: #b42318;
  cursor: pointer;
}

.attachment-pdf-preview-icon.is-action-denied {
  cursor: not-allowed;
}

.attachment-folder-icon {
  position: relative;
  align-content: end;
  padding-bottom: 7px;
  border-color: #9fc2e8;
  background: linear-gradient(180deg, #eaf5ff 0%, #f7fbff 100%);
  color: #145a9c;
  font-size: 11px;
}

.attachment-folder-icon::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 30px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.74);
}

.attachment-folder-icon::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 17px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, 0.74);
}

.attachment-file-download-icon:hover,
.attachment-file-download-icon:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(31, 113, 197, 0.16);
  outline: none;
}

.attachment-manage-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.canteen-attachment-cell {
  width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.canteen-data-grid[data-nowrap-enabled="1"] .canteen-attachment-cell {
  width: var(--list-attachment-column-width);
  min-width: var(--list-attachment-column-width);
  max-width: var(--list-attachment-column-width);
}

.attachment-manage-list-compact {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
  vertical-align: middle;
}

.attachment-group-collapsed {
  overflow: visible;
}

.attachment-group-button {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid #b8cde2;
  border-radius: 999px;
  background: #f6fbff;
  color: #17324a;
  cursor: pointer;
  font-weight: 700;
  padding: 2px 8px 2px 7px;
  white-space: nowrap;
}

.attachment-group-button:hover,
.attachment-group-button:focus-visible {
  border-color: #2d84d6;
  background: #eef7ff;
  box-shadow: 0 0 0 3px rgba(45, 132, 214, 0.14);
  outline: none;
}

.attachment-group-button.is-action-denied {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #8795a6;
  box-shadow: none;
  cursor: not-allowed;
}

.attachment-group-button.is-action-denied:hover,
.attachment-group-button.is-action-denied:focus-visible {
  border-color: #d4dde8;
  background: #f4f7fb;
  color: #8795a6;
  box-shadow: none;
  outline: none;
}

.attachment-group-button strong {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #1f9d80;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 0 5px;
}

.attachment-group-button.is-action-denied strong {
  background: #cfd8e3;
  color: #5f7083;
}

.attachment-group-icon {
  position: relative;
  display: inline-block;
  width: 19px;
  height: 20px;
  flex: 0 0 auto;
}

.attachment-group-icon::before,
.attachment-group-icon::after {
  position: absolute;
  width: 13px;
  height: 16px;
  border: 1px solid #5f7892;
  border-radius: 3px;
  background: #ffffff;
  content: "";
}

.attachment-group-icon::before {
  top: 1px;
  left: 1px;
  transform: rotate(-5deg);
}

.attachment-group-icon::after {
  top: 3px;
  left: 5px;
  box-shadow: 0 2px 0 rgba(23, 50, 74, 0.08);
}

.attachment-group-modal[hidden] {
  display: none;
}

.attachment-group-modal {
  position: fixed;
  z-index: var(--z-modal-high);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.attachment-group-modal.is-delegated-from-edit {
  z-index: calc(var(--z-modal-high) + 120);
}

.attachment-group-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 28, 43, 0.48);
}

.attachment-group-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(var(--attachment-group-modal-width), var(--attachment-group-modal-max-width));
  max-height: var(--attachment-group-modal-max-height);
  gap: 14px;
  border: 1px solid #d3e1ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(13, 28, 43, 0.26);
  overflow: hidden;
  isolation: isolate;
  padding: 16px;
}

.attachment-group-card[data-attachment-dragged="1"] {
  position: absolute;
  margin: 0;
}

.attachment-group-card.is-maximized {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-width: none;
  max-height: none;
}

.attachment-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e2ebf4;
  padding-bottom: 12px;
}

.attachment-group-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.attachment-group-window-controls {
  align-self: flex-start;
  margin-top: 1px;
}

.attachment-group-modal.is-windows-controls .attachment-group-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 0 16px;
  background: #ffffff;
}

.attachment-group-modal.is-windows-controls .attachment-group-title-block {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 8px 0;
}

.attachment-group-modal.is-windows-controls .attachment-group-window-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  margin-top: 0;
}

.attachment-group-header[data-attachment-group-drag-handle] {
  cursor: move;
  user-select: none;
}

.attachment-group-header[data-attachment-group-drag-handle] button,
.attachment-group-header[data-attachment-group-drag-handle] a,
.attachment-group-header[data-attachment-group-drag-handle] input {
  cursor: pointer;
}

.attachment-group-bulk-actions {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  padding-top: 2px;
}

.attachment-group-bulk-actions[hidden],
.attachment-group-restore-actions[hidden] {
  display: none;
}

.attachment-group-bulk-button {
  min-height: 34px;
  white-space: nowrap;
}

.attachment-group-bulk-button:disabled {
  border-color: #d6e1ed;
  background: #f5f8fb;
  color: #95a3b3;
  cursor: not-allowed;
}

.attachment-download-status {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  max-width: min(520px, calc(100% - 72px));
  min-width: 220px;
  min-height: 44px;
  margin: 0;
  border: 1px solid #cfe0ef;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 40px rgba(13, 28, 43, 0.18);
  color: #64748b;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  padding: 12px 18px;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
}

.attachment-download-status:empty {
  display: none;
}

.attachment-download-status[data-state="loading"] {
  color: #1d5fa8;
}

.attachment-download-status[data-state="success"] {
  color: #13804f;
}

.attachment-download-status[data-state="error"] {
  color: #b42318;
}

.attachment-group-header h2 {
  margin: 0;
  color: #17212b;
  font-size: 20px;
  line-height: 1.25;
}

.attachment-group-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.attachment-group-list {
  min-height: 0;
  max-height: calc(88vh - 116px);
  overflow: auto;
  padding-right: 4px;
}

.attachment-group-card.is-maximized .attachment-group-list {
  max-height: none;
}

.attachment-group-card.is-adding-attachment .attachment-group-list {
  overflow: visible;
}

.attachment-group-list-module {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 10px;
}

.attachment-group-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.attachment-group-list-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #5f6f82;
  font-size: 13px;
  font-weight: 800;
}

.attachment-group-scope-tabs {
  min-height: 38px;
  border-bottom: 1px solid #dce6f0;
  background: transparent;
}

.attachment-group-scope-tab {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.attachment-group-scope-tab.active {
  border-color: #19a184;
  color: #087461;
}

.attachment-group-scope-tab.active strong {
  background: #19a184;
}

.attachment-group-restore-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.attachment-group-add-modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 18px;
}

.attachment-group-add-modal[hidden] {
  display: none;
}

.attachment-group-add-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(13, 28, 43, 0.36);
}

.attachment-group-add-card {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100% - 48px));
  max-height: min(72vh, calc(100% - 48px));
  display: grid;
  gap: 12px;
  overflow: auto;
  border: 1px solid #d3e1ef;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 18px 54px rgba(13, 28, 43, 0.24);
}

.attachment-group-add-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dce6f0;
  padding-bottom: 10px;
}

.attachment-group-add-header strong,
.attachment-group-add-header small {
  display: block;
}

.attachment-group-add-header small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.attachment-group-add-panel .normal-file-upload-dropzone {
  margin: 0;
}

.attachment-group-add-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #dce6f0;
  background: #fff;
  padding-top: 10px;
}

.attachment-group-table-wrap {
  display: block;
  max-height: calc(88vh - 158px);
  overflow: auto;
  border: 1px solid #dce6f0;
  border-radius: 6px;
  margin-bottom: 0;
  padding: 0;
}

.attachment-group-table {
  width: 100%;
  min-width: 920px;
  table-layout: auto;
}

.attachment-group-table th,
.attachment-group-table td {
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
}

.attachment-group-table th {
  background: #e5f2ee;
  color: #5f6f82;
}

.attachment-group-table th[data-column-key="select"],
.attachment-group-table td[data-column-key="select"] {
  position: sticky !important;
  left: 0 !important;
  inset-inline-start: 0 !important;
  z-index: 18 !important;
  background-clip: padding-box;
}

.attachment-group-table th[data-column-key="select"] {
  z-index: 46 !important;
  background: #e5f2ee !important;
}

.attachment-group-table tbody tr.attachment-manage-item td[data-column-key="select"] {
  background: inherit !important;
}

.attachment-select-all-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
  user-select: none;
}

.attachment-select-all-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.attachment-group-table .attachment-manage-item {
  display: table-row;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #fff;
}

.attachment-group-table .attachment-manage-item[hidden] {
  display: none;
}

.attachment-group-table .attachment-manage-item:nth-child(even) {
  background: #f7f7f7;
}

.attachment-group-table .attachment-manage-item:hover {
  background: #edf8f5;
}

.attachment-group-table .attachment-manage-item.attachment-soft-deleted {
  background: #fff8f8;
  color: #8a4b4b;
}

.attachment-group-table .attachment-manage-item.attachment-soft-deleted::after {
  display: none;
}

.attachment-group-table .attachment-folder-image-row {
  background: #fbfdfc;
  color: #48576a;
}

.attachment-group-table .attachment-folder-image-row:nth-child(even) {
  background: #f4faf8;
}

.attachment-group-table .attachment-folder-image-row:hover {
  background: #edf8f5;
}

.attachment-folder-image-branch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #6b7b8e;
  font-size: 18px;
  font-weight: 900;
}

.attachment-group-table .attachment-group-preview-cell {
  min-width: 84px;
}

.attachment-group-table .attachment-group-name-cell {
  max-width: 320px;
  text-align: left;
  white-space: normal;
}

.attachment-group-table .attachment-manage-name {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.attachment-folder-image-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #e8f6f2;
  color: #087461;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 8px;
}

.attachment-folder-image-name {
  display: block;
  color: #1b4f8d;
  font-weight: 900;
  margin-top: 4px;
}

.attachment-folder-image-path {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #718096;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-group-table .attachment-thumbnail-button,
.attachment-group-table .attachment-file-icon {
  width: 46px;
  height: 46px;
}

.attachment-group-table .attachment-group-row-actions {
  flex-wrap: nowrap;
  justify-content: center;
}

.attachment-group-table-action {
  min-height: 30px;
  padding: 4px 12px;
}

.attachment-group-bulk-button.danger-link {
  color: #b42318;
  border-color: #f4b4b4;
}

.attachment-log-link {
  min-height: 30px;
  justify-content: center;
}

.canteen-data-grid[data-nowrap-enabled="1"] .attachment-manage-list-compact {
  max-width: none;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.canteen-data-grid[data-nowrap-enabled="1"] .attachment-group-collapsed {
  overflow: visible;
}

.canteen-data-grid[data-attachment-cell-scroll-enabled="1"] .attachment-manage-list-compact {
  width: max-content;
  max-width: none;
}

.attachment-manage-list-compact .attachment-manage-item {
  grid-template-columns: auto auto auto;
  width: auto;
  min-width: 0;
  gap: 4px;
  border: 0;
  padding: 2px;
  background: transparent;
}

.attachment-manage-list-compact .attachment-manage-item.has-attachment-selector {
  grid-template-columns: auto auto auto auto auto;
}

.attachment-select-wrap {
  display: inline-grid;
  width: 24px;
  min-width: 24px;
  place-items: center;
  align-self: center;
}

.attachment-select-checkbox {
  width: 17px;
  height: 17px;
  accent-color: #1f9d80;
  cursor: pointer;
}

.attachment-select-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.canteen-data-grid[data-nowrap-enabled="1"] .attachment-manage-list-compact .attachment-manage-item {
  flex: 0 0 auto;
}

.attachment-manage-list-compact .attachment-manage-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.attachment-manage-list-compact .attachment-thumbnail-button,
.attachment-manage-list-compact .attachment-file-icon {
  width: 52px;
  height: 52px;
  font-size: 12px;
}

.attachment-manage-list-compact .attachment-remove-x {
  width: 22px;
  height: 22px;
  font-size: 18px;
}

.attachment-manage-list-compact .attachment-manage-actions {
  justify-content: flex-start;
}

.attachment-download-compact {
  min-height: 22px;
  border-radius: 50%;
  padding: 0 7px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 720px) {
  .attachment-manage-item {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .attachment-manage-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.attachment-preview-modal[hidden] {
  display: none;
}

.attachment-preview-modal {
  position: fixed;
  z-index: var(--z-modal-high);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.attachment-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 28, 43, 0.58);
}

.attachment-preview-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(960px, 96vw);
  max-height: 92vh;
  border: 1px solid #d8e4ef;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(13, 28, 43, 0.28);
}

.attachment-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attachment-preview-title-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.attachment-preview-title-wrap strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-title-wrap span {
  flex: 0 0 auto;
  color: #6b7788;
  font-size: 14px;
  font-weight: 700;
}

.attachment-preview-body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.attachment-preview-modal[data-preview-kind="pdf"] .attachment-preview-body {
  grid-template-columns: minmax(0, 1fr);
}

.attachment-preview-content {
  display: grid;
  min-height: min(72vh, 720px);
  place-items: center;
}

.attachment-preview-card img[hidden],
.attachment-preview-card iframe[hidden] {
  display: none;
}

.attachment-preview-nav {
  display: inline-grid;
  width: 44px;
  height: 64px;
  place-items: center;
  border: 1px solid #c7d7ec;
  border-radius: 8px;
  background: #f4f8fd;
  color: #13539a;
  cursor: pointer;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.attachment-preview-nav:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.attachment-preview-modal[data-preview-kind="pdf"] .attachment-preview-nav {
  display: none;
}

.attachment-preview-card img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 72px);
  margin: 0 auto;
  object-fit: contain;
}

.attachment-preview-card iframe {
  display: block;
  width: min(100%, 1080px);
  height: min(76vh, 760px);
  border: 1px solid #d8e4ef;
  border-radius: 6px;
  background: #f7f9fc;
}

.success-return-page {
  display: grid;
  min-height: calc(100vh - 64px);
  place-items: center;
  padding: 24px;
}

.success-toast {
  display: grid;
  width: min(420px, 100%);
  gap: 10px;
  border-radius: 8px;
  padding: 24px;
  background: #eef9f0;
  box-shadow: 0 18px 48px rgba(23, 33, 43, 0.16);
  text-align: center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.success-toast h1 {
  margin: 0;
  color: #166534;
  font-size: 26px;
}

.success-toast p {
  margin: 0;
  color: var(--text);
}

.success-toast small {
  color: var(--muted);
}

.success-toast .secondary-link {
  justify-self: center;
  margin-top: 4px;
}

.success-toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.captcha-box,
.account-preview {
  border: 1px dashed #adc2da;
  border-radius: 6px;
  padding: 10px 12px;
  background: #f8fbff;
}

.account-preview {
  border: none;
  background: #eef9f0;
}

.captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.captcha-row .captcha-box {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  white-space: nowrap;
}

.login-register-link {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
  text-align: right;
}

.empty {
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) and (pointer: coarse) {
  .topbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .topbar-brand-mark {
    min-height: 34px;
    font-size: 16px;
  }

  .topbar-search {
    flex: 1 0 100%;
    order: 2;
    max-width: none;
    min-width: 0;
  }

  .topbar-search input {
    height: 36px;
  }

  .topbar-search-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }

  .topbar-search-results {
    grid-template-columns: 1fr;
  }

  .topnav {
    align-items: center;
    flex: 1 0 100%;
    order: 3;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .topuser {
    order: 4;
    flex: 1 0 100%;
    padding-top: 0;
  }

  .nav-trigger,
  .topnav > a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 10px;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-menu-top, 54px);
    right: auto;
    left: var(--nav-menu-left, 10px);
    min-width: 160px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .nav-menu-right {
    right: auto;
    left: 10px;
  }

  .nav-submenu {
    display: grid;
    gap: 4px;
  }

  .nav-subgroup-wide {
    grid-column: span 2;
  }

  .nav-submenu-two-column {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 8px 16px;
    max-width: none;
  }

  .nav-mega-inner {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
  }

  .nav-mega-side {
    min-height: 0;
    gap: 8px;
    padding: 18px;
  }

  .nav-mega-side-title {
    font-size: 20px;
  }

  .nav-mega-side p {
    font-size: 14px;
    line-height: 1.6;
  }

  .nav-mega-columns {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 18px 20px;
    padding: 18px;
  }

  .nav-subgroup {
    gap: 2px;
  }

  .nav-subtrigger {
    font-size: 16px;
  }

  .topuser {
    justify-content: flex-end;
  }

  .window-shelf {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .window-shelf-list {
    width: auto;
    flex: 1 1 160px;
  }

  .window-shelf-workbench {
    margin-right: 4px;
  }

  .window-shelf-item {
    max-width: 180px;
  }

  .page {
    width: min(100% - 20px, 1440px);
  }

  .page-header,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .page-header > a,
  .toolbar button,
  .toolbar .secondary-link,
  .primary-button,
  .primary-link {
    width: 100%;
  }

  .stacked-form.two-col,
  body.modal-frame .stacked-form,
  .form-grid,
  .login-layout,
  .stat-grid,
  .mobile-workbench-stats,
  .mobile-action-grid,
  .split-layout,
  .split-layout.narrow-side,
  .two-panel-grid,
  .expense-workbench-layout,
  .expense-step-list,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .expense-step {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .expense-step .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  body.modal-frame .stacked-form > label,
  body.modal-frame .stacked-form > .form-field-block,
  body.modal-frame .stacked-form > .attachment-field {
    grid-template-columns: 1fr;
  }

  body.modal-frame .stacked-form > label > span:first-child,
  body.modal-frame .stacked-form > label > input,
  body.modal-frame .stacked-form > label > select,
  body.modal-frame .stacked-form > label > textarea,
  body.modal-frame .stacked-form > label > .amount-uppercase-field,
  body.modal-frame .stacked-form > label > small,
  body.modal-frame .stacked-form > label > .error,
  body.modal-frame .stacked-form > label > .muted-line,
  body.modal-frame .stacked-form > .form-field-block > .field-label,
  body.modal-frame .stacked-form > .form-field-block > input,
  body.modal-frame .stacked-form > .form-field-block > select,
  body.modal-frame .stacked-form > .form-field-block > textarea,
  body.modal-frame .stacked-form > .form-field-block > .amount-uppercase-field,
  body.modal-frame .stacked-form > .form-field-block > small,
  body.modal-frame .stacked-form > .attachment-field > .field-label,
  body.modal-frame .stacked-form > .attachment-field > span:first-child,
  body.modal-frame .stacked-form > .attachment-field > small,
  body.modal-frame .stacked-form > .attachment-field > .muted-line {
    grid-column: 1;
  }

  .project-application-form .project-application-field {
    grid-template-columns: 1fr;
  }

  .project-application-toggle-row {
    grid-template-columns: 1fr;
  }

  .login-page-setting-form .login-page-setting-field {
    grid-template-columns: 1fr;
  }

  .contract-setting-form .contract-setting-field {
    grid-template-columns: 1fr;
  }

  .project-stage-template-form .project-stage-template-field {
    grid-template-columns: 1fr;
  }

  .expense-reimbursement-header-form .expense-reimbursement-header-field,
  .expense-reimbursement-line-form .expense-reimbursement-line-field,
  .expense-reimbursement-stage-payment-form .expense-reimbursement-stage-payment-field {
    grid-template-columns: 1fr;
  }

  .expense-config-form .expense-config-field {
    grid-template-columns: 1fr;
  }

  .canteen-chart-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .canteen-chart-value {
    text-align: left;
  }

  .canteen-chart-modal {
    padding: 8px;
  }

  .canteen-chart-modal-card {
    width: 100%;
    max-height: calc(100vh - 16px);
  }

  .canteen-chart-modal-body {
    padding: 12px;
  }

  .sticky-panel {
    position: static;
    max-height: none;
  }

  .login-showcase {
    min-height: 180px;
    height: min(42vh, 240px);
  }

  .compact-dl {
    grid-template-columns: 1fr;
  }

  .compact-dl dt {
    margin-top: 6px;
  }

  .milestone-item > div,
  .timeline-meta {
    display: grid;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 13px;
  }

  .nav-subgroup-wide {
    grid-column: 1 / -1;
  }

  .nav-submenu-two-column {
    grid-template-columns: 1fr;
  }

  .page {
    width: calc(100% - 16px);
    margin-top: 12px;
  }

  .panel,
  .notice-panel {
    padding: 14px;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .mobile-workbench-head,
  .mobile-next-step {
    align-items: stretch;
    flex-direction: column;
  }

  .mobile-workbench-stats,
  .mobile-action-grid,
  .mobile-todo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-action-grid .primary-link,
  .mobile-action-grid .secondary-link,
  .mobile-next-step .secondary-link {
    width: 100%;
  }

  .mobile-todo-list {
    grid-template-columns: 1fr;
  }

  th,
  td {
    padding: 10px 8px;
  }

  .auth-shell {
    min-height: auto;
    place-items: start;
  }

  .auth-shell.wide {
    padding-top: 12px;
  }

}

body.login-page-body .page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

body.login-page-body .login-layout {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  min-height: 100vh;
}

body.login-page-body .login-showcase {
  align-self: center;
  justify-self: center;
  width: min(1040px, calc(100% - 64px));
  min-height: 620px;
  height: min(82vh, 720px);
  grid-template-rows: minmax(0, 1fr) 6.3em auto 0.3em;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #fdeff4;
}

body.login-page-body .login-carousel {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fdeff4;
}

body.login-page-body .login-slide img {
  background: #fdeff4;
}

body.login-page-body .login-filing {
  grid-row: 3;
  margin-top: 0;
  padding: 8px 12px;
  background: transparent;
  color: #66717f;
}

body.login-page-body .login-filing a {
  color: #66717f;
}

body.login-page-body .login-panel {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 5vh, 56px) clamp(28px, 4vw, 56px);
  background: #fff;
  box-shadow: none;
}

body.login-page-body .login-panel > * {
  width: min(460px, 100%);
  justify-self: center;
}

@media (max-width: 760px) {
  .form-actions.split {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) minmax(0, 1fr);
  }

  body.login-page-body .login-layout {
    grid-template-columns: 1fr;
  }

  body.login-page-body .login-showcase {
    width: min(100% - 20px, 520px);
    min-height: 360px;
    height: min(58vh, 520px);
    margin-top: 16px;
  }

  body.login-page-body .login-panel {
    width: min(100% - 20px, 520px);
    min-height: auto;
    margin: 16px auto 24px;
    border-radius: 8px;
  }
}

@media (max-width: 1024px) and (pointer: coarse) {
  body.login-page-body .page {
    display: grid;
    align-items: center;
  }

  body.login-page-body .login-layout {
    grid-template-columns: 1fr;
    align-items: center;
    min-height: 100vh;
  }

  body.login-page-body .login-showcase {
    display: none;
  }

  body.login-page-body .login-panel {
    width: min(100% - 24px, 520px);
    min-height: auto;
    margin: 24px auto;
    border-radius: 8px;
  }

  body.login-page-body .captcha-row {
    grid-template-columns: 1fr;
  }

  body.login-page-body .captcha-row .captcha-box {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  body.login-page-body .page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: clamp(12px, 4vw, 20px);
    box-sizing: border-box;
  }

  body.login-page-body .login-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: auto;
  }

  body.login-page-body .login-showcase {
    display: none;
  }

  body.login-page-body .login-panel {
    align-self: center;
    justify-self: center;
    width: min(92vw, 420px);
    min-height: auto;
    margin: 0;
    border-radius: 8px;
    padding: clamp(22px, 5vw, 36px);
    box-sizing: border-box;
  }

  body.login-page-body .login-panel > * {
    width: min(460px, 100%);
  }

  body.login-page-body .login-brand-heading {
    gap: 10px;
    margin-bottom: 18px;
  }

  body.login-page-body .login-brand-heading img {
    width: 56px;
    height: 56px;
  }

  body.login-page-body .login-brand-heading h1 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.2;
  }
}

@media (max-width: 420px) {
  body.login-page-body .login-panel {
    width: min(94vw, 380px);
    padding: 22px 18px;
  }

  body.login-page-body .login-brand-heading {
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 1024px) and (pointer: coarse), (max-width: 900px) {
  body.login-page-body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body.login-page-body .page {
    display: grid;
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    margin: 0;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    place-items: center;
    overflow-x: hidden;
  }

  body.login-page-body .login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding-inline: clamp(12px, 4vw, 20px);
    place-items: center;
  }

  body.login-page-body .login-showcase {
    display: none;
  }

  body.login-page-body .login-panel {
    align-self: center;
    justify-self: center;
    width: min(calc(100vw - 40px), 420px);
    max-width: 420px;
    margin-inline: auto;
    box-sizing: border-box;
  }
}

@media (max-width: 420px) {
  body.login-page-body .login-panel {
    width: min(calc(100vw - 24px), 380px);
    max-width: 380px;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .topbar,
  .messages,
  .no-print,
  form,
  .primary-button,
  .primary-link,
  .secondary-link,
  .ghost-action {
    display: none !important;
  }

  .page {
    width: 100%;
    margin: 0;
  }

  .panel,
  .notice-panel,
  .record-card {
    break-inside: avoid;
    border-color: #999;
    box-shadow: none;
  }

  .print-sheet {
    gap: 12px;
  }

  .print-title h2 {
    font-size: 22px;
  }

  .split-layout,
  .split-layout.narrow-side {
    grid-template-columns: 1fr;
  }

  th {
    background: #eee !important;
  }
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.summary-grid > div {
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
}

.summary-grid span {
  display: block;
  color: #66768a;
  font-size: 13px;
}

.summary-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  color: #172235;
}

.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.stage-node-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 180px;
}

.stage-node {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid #d6e0ec;
  padding: 2px 8px;
  font-size: 12px;
  color: #43546a;
  background: #f8fafc;
  white-space: nowrap;
}

.stage-node-done {
  border-color: #b9dfc9;
  color: #176c37;
  background: #eefaf3;
}

.stage-node-active {
  border-color: #91b8f5;
  color: #185abc;
  background: #eef5ff;
}

.stage-node-blocked {
  border-color: #f1b8b8;
  color: #9f2222;
  background: #fff1f1;
}

.danger-text {
  color: #b42318;
  font-size: 12px;
  font-weight: 700;
}

.warning-text {
  color: #a15c00;
  font-size: 12px;
  font-weight: 700;
}

.qualification-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.qualification-tab {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8d7e8;
  border-radius: 6px;
  background: #f8fbff;
  color: #24435d;
  font-weight: 700;
  padding: 6px 12px;
}

.qualification-tab:hover,
.qualification-tab:focus {
  border-color: #8cb7df;
  background: #eef7ff;
  color: #0d4ea6;
}

.qualification-tab.is-active {
  border-color: #66b088;
  background: #effaf3;
  color: #176c37;
}

.qualification-top-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: -4px 0 12px;
}

.qualification-page-layout .global-page-title-with-action {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.qualification-page-layout .global-page-title-with-action:has(.qualification-type-selector[open]) {
  z-index: var(--z-page-floating);
}

.company-contract-page-layout .global-page-title-with-action:has(.contract-type-selector[open]) {
  z-index: var(--z-page-floating);
}

.qualification-title-type-selector {
  display: inline-flex;
  width: min(180px, 28vw);
  min-width: 140px;
  vertical-align: middle;
}

.qualification-title-type-selector .qualification-type-selector {
  width: 100%;
}

.qualification-title-type-selector .qualification-type-selector summary {
  min-height: 34px;
  font-size: 16px;
  padding: 0 12px;
}

.qualification-type-control,
.qualification-filter-control {
  min-width: 0;
}

.qualification-type-selector {
  position: relative;
  width: 100%;
}

.qualification-type-selector[open] {
  z-index: var(--z-page-floating);
}

.qualification-type-selector summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #cbd8e8;
  border-radius: 6px;
  background: #fff;
  color: #1f2d3d;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  list-style: none;
  padding: 0 16px;
}

.qualification-type-selector summary::-webkit-details-marker {
  display: none;
}

.qualification-type-selector summary::after {
  color: #46586d;
  content: "⌄";
  font-size: 18px;
  font-weight: 900;
}

.qualification-type-selector[open] summary {
  border-color: #8fb6f2;
  box-shadow: 0 0 0 4px rgba(83, 142, 230, 0.2);
}

.qualification-type-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qualification-type-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-page-floating);
  display: grid;
  width: min(720px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 72px));
  overflow: hidden;
  border: 1px solid #d6e0ec;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(24, 42, 64, 0.16);
}

.qualification-type-menu input {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid #dce5ef;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 800;
  outline: none;
  padding: 0 14px;
}

.qualification-type-menu input:focus {
  box-shadow: inset 0 0 0 3px rgba(83, 142, 230, 0.26);
}

.qualification-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-height: min(572px, calc(100vh - 140px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qualification-type-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid #edf2f7;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 900;
  padding: 0 14px;
}

.qualification-type-option:hover,
.qualification-type-option:focus-visible,
.qualification-type-option.is-active {
  background: #effaf3;
  color: #11664e;
  outline: none;
}

.qualification-type-option strong {
  min-width: 28px;
  border-radius: 4px;
  background: #16a085;
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
  padding: 1px 8px;
  text-align: center;
}

.qualification-type-option:not(.is-active) strong {
  background: #ff6b4a;
}

.qualification-filter-control .qualification-filter-region {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 10px;
  align-items: stretch;
  margin: 0;
}

.qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  --qualification-filter-width: 13.5em;
}

.qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] input,
.qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] select {
  --qualification-filter-width: 13.5em;
  flex: 0 0 var(--qualification-filter-width, 10em);
  width: var(--qualification-filter-width, 10em);
}

.qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] button,
.qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] a {
  flex: 0 0 auto;
}

.qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] {
  display: grid;
  grid-template-columns:
    minmax(9em, 9em)
    minmax(10em, 10em)
    minmax(10em, 10em)
    minmax(10em, 10em)
    minmax(9em, 9em)
    minmax(10em, 10em)
    auto
    auto;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
}

.qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] input,
.qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] select {
  width: 100%;
  min-width: 0;
  flex: initial;
}

.qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] button,
.qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] a {
  width: auto;
  white-space: nowrap;
}

.qualification-filter-control .qualification-filter-region[hidden] {
  display: none;
}

.qualification-filter-control .qualification-filter-region input,
.qualification-filter-control .qualification-filter-region select,
.qualification-filter-control .qualification-filter-region button,
.qualification-filter-control .qualification-filter-region a {
  min-height: 48px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
}

.qualification-filter-control .qualification-filter-region input[type="search"] {
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  white-space: nowrap;
  scrollbar-width: thin;
}

.qualification-filter-control .qualification-filter-region a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd8e8;
  background: #f8fbff;
  color: #165ca8;
  padding: 0 20px;
}

.qualification-filter-form input[type="search"] {
  width: min(420px, 70vw);
}

@media (max-width: 1100px) {
  .qualification-filter-control .qualification-filter-region a,
  .qualification-filter-control .qualification-filter-region button {
    width: 100%;
  }

  .global-filter-region input,
  .global-filter-region select,
  .qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] input,
  .qualification-filter-control .qualification-filter-region[data-qualification-advanced-filter] select {
    flex-basis: 100%;
    width: 100%;
  }

  .qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] {
    grid-template-columns:
      minmax(9em, 1fr)
      minmax(10em, 1fr)
      minmax(10em, 1fr);
  }

  .qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] input,
  .qualification-filter-control .finance-payee-account-filter-region[data-qualification-advanced-filter="finance-payee-account"] select {
    flex-basis: auto;
    width: 100%;
  }

}

.row-select-label {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  border: 1px solid #c8d7e8;
  border-radius: 6px;
  background: #fff;
  color: #24435d;
  cursor: pointer;
  font-weight: 700;
  padding: 4px 8px;
}

.row-select-label:has(input:checked) {
  border-color: #66b088;
  background: #effaf3;
  color: #176c37;
}

.qualification-upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.qualification-upload-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  color: var(--muted);
  font-weight: 700;
}

.qualification-upload-role select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 5px 9px;
}

.qualification-batch-common {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid #cfe0ef;
  border-radius: 6px;
  padding: 12px;
  background: #f8fbff;
}

.company-qualification-form {
  grid-auto-flow: row dense;
}

.company-qualification-form .company-qualification-field,
.qualification-batch-common-grid .qualification-batch-common-field {
  grid-template-columns: minmax(128px, 184px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
}

.company-qualification-form .attachment-field {
  grid-column: 1 / -1;
  grid-template-columns: minmax(128px, 184px) minmax(0, 1fr);
  align-items: start;
  gap: 12px 14px;
}

.company-qualification-form .attachment-field > span:first-child {
  grid-column: 1;
  grid-row: 1;
  padding-top: 9px;
  color: var(--muted);
  font-weight: 800;
}

.company-qualification-form .qualification-attachment-upload-row,
.company-qualification-form .qualification-batch-common-row {
  grid-column: 2;
  display: grid;
  min-width: 0;
  gap: 10px;
}

.company-qualification-form .qualification-attachment-upload-row {
  grid-row: 1;
}

.company-qualification-form .qualification-batch-common-row {
  grid-row: 2;
}

.company-qualification-form .qualification-batch-common-row .qualification-batch-common {
  margin-top: 0;
}

.company-qualification-field-meta,
.company-qualification-field-control,
.qualification-batch-common-field-meta,
.qualification-batch-common-field-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-qualification-field-label,
.qualification-batch-common-field-label {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.company-qualification-field-control input,
.company-qualification-field-control select,
.company-qualification-field-control textarea,
.qualification-batch-common-field-control input,
.qualification-batch-common-field-control select,
.qualification-batch-common-field-control textarea {
  width: 100%;
}

.company-qualification-field-control input[type="checkbox"],
.qualification-batch-common-field-control input[type="checkbox"] {
  justify-self: start;
  margin-top: 4px;
}

.qualification-batch-common-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qualification-batch-common-head strong {
  display: block;
  color: var(--text);
}

.qualification-batch-common-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.qualification-batch-common-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qualification-batch-common-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 700;
}

.qualification-batch-common-grid input,
.qualification-batch-common-grid select,
.qualification-batch-common-grid textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: var(--text);
}

.qualification-batch-common-grid textarea {
  width: min(100%, var(--description-box-width, 100%));
  height: calc(82px * var(--description-box-height-scale, 0.5));
  min-height: 34px;
}

.qualification-attachment-classifier {
  display: grid;
  gap: 10px;
  border: 1px solid #d6e4f2;
  border-radius: 8px;
  padding: 12px 14px;
  background: #f7fbff;
}

.qualification-attachment-classifier[hidden] {
  display: none;
}

.qualification-attachment-classifier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.qualification-attachment-classifier-head strong {
  display: block;
  color: var(--text);
}

.qualification-attachment-classifier-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.qualification-attachment-classifier-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qualification-attachment-classifier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #dfebf6;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.qualification-attachment-classifier-file {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--text);
}

.qualification-attachment-classifier-file strong {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eaf4ff;
  color: var(--primary-dark);
  font-size: 12px;
}

.qualification-attachment-classifier-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qualification-attachment-classifier-row select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: var(--text);
}

.qualification-health-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  border: 1px solid #d6e4f2;
  border-radius: 6px;
  padding: 9px 12px;
  background: #f8fbff;
}

.qualification-health-head {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 150px;
}

.qualification-health-head strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.qualification-health-head span,
.qualification-health-head small {
  color: var(--muted);
  font-size: 12px;
}

.qualification-health-cards {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.qualification-health-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9e6f3;
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}

.qualification-health-card:hover,
.qualification-health-card:focus-visible,
.qualification-health-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 113, 197, 0.14);
  outline: none;
}

.qualification-health-card span {
  overflow: hidden;
  color: var(--muted);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qualification-health-card strong {
  min-width: 28px;
  border-radius: 999px;
  padding: 1px 8px;
  color: #fff;
  text-align: center;
  font-size: 14px;
}

.qualification-health-card.status-warning strong {
  background: #f59e0b;
}

.qualification-health-card.status-danger strong {
  background: #ef4444;
}

.qualification-health-attention {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.qualification-health-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e0e9f3;
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.qualification-health-row:hover,
.qualification-health-row:focus-visible,
.qualification-health-row.is-active {
  border-color: var(--primary);
  background: #eef8f5;
  outline: none;
}

.qualification-health-row span {
  flex: 0 0 auto;
  font-weight: 800;
}

.qualification-health-row small,
.qualification-health-empty {
  color: var(--muted);
}

.qualification-health-row small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qualification-health-inline-attention {
  grid-column: span 4;
  min-height: 42px;
}

@media (max-width: 920px) {
  .qualification-health-panel {
    grid-template-columns: 1fr;
  }

  .qualification-health-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .qualification-health-attention {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.attachment-package-card {
  display: grid;
  gap: 16px;
}

.attachment-package-head,
.attachment-package-print-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.attachment-package-head {
  justify-content: space-between;
}

.attachment-package-qr {
  display: inline-grid;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.attachment-package-qr .qr-svg {
  display: block;
  width: 116px;
  height: 116px;
  border: 1px solid #d8e3ef;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
}

.print-attachment-package .attachment-package-qr .qr-svg {
  width: 108px;
  height: 108px;
}

.print-attachment-list {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--text);
}

.read-only-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  border: 1px solid #f0c36a;
  border-left: 5px solid #d97706;
  border-radius: 6px;
  padding: 10px 14px;
  background: #fff7e6;
  color: #704700;
  font-weight: 700;
}

.read-only-banner span {
  color: #8a5b10;
  font-weight: 600;
}

.document-soft-deleted {
  color: #b42318;
  background: #fff1f0;
}

.document-soft-deleted td,
.document-soft-deleted .document-soft-deleted-text {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.document-soft-deleted a,
.document-soft-deleted button,
.document-soft-deleted .status-pill {
  text-decoration: none;
}

.company-data-current-view {
  display: grid;
  gap: 12px;
  border-left: 4px solid #2f80ed;
  background: #f8fbff;
}

.company-data-current-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.company-data-current-head strong {
  display: block;
  color: var(--text);
  font-size: 16px;
}

.company-data-current-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.company-data-company-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.company-data-company-switch-collapsed {
  justify-self: start;
}

.company-data-company-switch-collapsed summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid #bfd5ec;
  border-radius: 6px;
  padding: 5px 12px;
  background: #fff;
  color: #1f4f82;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.company-data-company-switch-collapsed summary::-webkit-details-marker {
  display: none;
}

.company-data-company-switch-collapsed summary::after {
  margin-left: 8px;
  color: #64748b;
  content: "▾";
  font-size: 12px;
}

.company-data-company-switch-collapsed[open] summary {
  margin-bottom: 10px;
  border-color: #1d7dd8;
  background: #e8f3ff;
  color: #0b5cad;
}

.company-data-company-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #bfd5ec;
  border-radius: 6px;
  padding: 6px 12px;
  background: #fff;
  color: #1f4f82;
  font-weight: 700;
  text-decoration: none;
}

.company-data-company-chip.selected {
  border-color: #1d7dd8;
  background: #e8f3ff;
  color: #0b5cad;
}

.company-data-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.company-data-module-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}

.company-data-module-card span {
  color: var(--muted);
  font-weight: 700;
}

.company-data-module-card strong {
  font-size: 30px;
  line-height: 1;
}

.company-data-module-card p {
  margin: 0;
  color: var(--muted);
}

.company-data-module-main {
  display: grid;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.company-data-module-sublinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.company-data-module-sublinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}

.company-data-module-sublinks a:hover {
  color: var(--primary);
}

.company-data-module-sublinks strong {
  min-width: 24px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.enterprise-workbench-header p {
  max-width: 820px;
}

.enterprise-workbench-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.enterprise-workbench-note {
  display: grid;
  gap: 8px;
}

.enterprise-workbench-note strong {
  color: #17324f;
  font-size: 18px;
}

.enterprise-workbench-note p,
.enterprise-quick-panel p {
  margin: 0;
  color: var(--muted);
}

.enterprise-workbench-grid {
  margin-bottom: 14px;
}

.enterprise-workbench-card {
  min-height: 142px;
}

.enterprise-quick-panel {
  display: grid;
  gap: 12px;
}

.enterprise-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.enterprise-quick-links .secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.enterprise-quick-links strong {
  color: #155fa4;
}

@media (max-width: 720px) {
  .company-qualification-form .company-qualification-field,
  .company-qualification-form .attachment-field,
  .qualification-batch-common-grid .qualification-batch-common-field {
    grid-template-columns: 1fr;
  }

  .company-qualification-form .attachment-field > span:first-child,
  .company-qualification-form .qualification-attachment-upload-row,
  .company-qualification-form .qualification-batch-common-row {
    grid-column: 1;
  }

  .company-qualification-form .qualification-attachment-upload-row,
  .company-qualification-form .qualification-batch-common-row {
    grid-row: auto;
  }

  .qualification-batch-common-grid {
    grid-template-columns: 1fr;
  }

  .qualification-attachment-classifier-list {
    grid-template-columns: 1fr;
  }

  .qualification-attachment-classifier-row {
    grid-template-columns: 1fr;
  }

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

  .qualification-health-attention {
    grid-template-columns: 1fr;
  }

  .attachment-package-head,
  .attachment-package-print-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-data-current-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.print-designer-page {
  min-height: calc(100vh - 96px);
  background: #f5f7fb;
  color: #172433;
}

.print-designer-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 10px 16px;
  border-bottom: 1px solid #d9e3ee;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.print-designer-cancel,
.print-designer-actions a,
.print-designer-actions button,
.print-sync-form button,
.print-template-list-head .small-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #c8d9ee;
  border-radius: 4px;
  background: #fff;
  color: #165ca8;
  font-weight: 700;
  text-decoration: none;
}

.print-designer-title {
  text-align: center;
}

.print-designer-title h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.print-designer-title p {
  margin: 3px 0 0;
  color: #687587;
  font-size: 13px;
}

.print-designer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.print-designer-actions .primary-button {
  border-color: #2f6fdb;
  background: #2f6fdb;
  color: #fff;
}

.print-designer-workbench {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: calc(100vh - 164px);
  min-height: 680px;
}

.print-designer-sidebar {
  overflow: auto;
  border-right: 1px solid #d9e3ee;
  background: #eef2f6;
}

.print-designer-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #d6e0ec;
  background: #fff;
}

.print-designer-tab {
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #526176;
  font-weight: 800;
  cursor: pointer;
}

.print-designer-tab.is-active {
  border-bottom-color: #2f6fdb;
  color: #12395c;
  background: #f8fbff;
}

.print-designer-tab-panel {
  display: none;
  padding: 16px;
}

.print-designer-tab-panel.is-active {
  display: block;
}

.print-designer-tip {
  margin: 0 0 12px;
  color: #7a8798;
  font-size: 13px;
  line-height: 1.5;
}

.print-module-field-select {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #43546b;
  font-weight: 800;
}

.print-module-field-select select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd8e6;
  border-radius: 4px;
  background: #fff;
  color: #172433;
  font: inherit;
}

.print-field-group {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.print-field-group h3 {
  margin: 0;
  color: #17324f;
  font-size: 15px;
}

.print-field-token {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dce6f1;
  border-radius: 4px;
  background: #fff;
  color: #172433;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.print-field-token strong {
  font-size: 14px;
}

.print-field-token small {
  color: #7a8798;
  line-height: 1.4;
}

.print-field-token:hover,
.print-field-token.is-copied {
  border-color: #6dabef;
  background: #edf6ff;
}

.print-field-token.is-copied {
  transform: translateY(-1px);
}

.print-designer-settings-form {
  display: block;
}

.print-designer-settings-grid {
  display: grid;
  gap: 10px;
}

.print-setting-field {
  display: grid;
  gap: 5px;
  color: #43546b;
  font-size: 13px;
  font-weight: 800;
}

.print-setting-field input,
.print-setting-field select,
.print-setting-field textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cbd8e6;
  border-radius: 4px;
  background: #fff;
  color: #172433;
  font: inherit;
  font-weight: 600;
}

.print-setting-field input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
}

.print-setting-field small,
.print-setting-field .errorlist {
  margin: 0;
  color: #8a5660;
  font-weight: 600;
  line-height: 1.4;
}

.print-template-list-card {
  margin: 0 16px 16px;
  border: 1px solid #d6e0ec;
  border-radius: 6px;
  background: #fff;
}

.print-template-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #e3ebf3;
}

.print-template-list-head strong {
  color: #17324f;
}

.print-sync-form {
  padding: 10px 12px;
  border-bottom: 1px solid #e3ebf3;
}

.print-sync-form button {
  width: 100%;
}

.print-template-list {
  display: grid;
  max-height: 260px;
  overflow: auto;
}

.print-template-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
}

.print-template-item.is-current {
  background: #eaf6ee;
}

.print-template-item.is-disabled {
  opacity: 0.78;
}

.print-template-item a {
  display: grid;
  gap: 2px;
  color: #17324f;
  font-weight: 800;
  text-decoration: none;
}

.print-template-item .print-template-permission-link {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid #d6e4f0;
  background: #f7fbff;
  color: #355973;
  font-size: 12px;
  font-weight: 800;
}

.print-template-item small {
  color: #718096;
  font-weight: 600;
}

.print-template-permission-missing {
  justify-self: start;
}

.print-template-layout-badge {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid #d6e4f0;
  background: #f3f8fc;
  color: #36556d;
  font-size: 12px;
  font-weight: 800;
}

.print-template-layout-badge.is-ready {
  border-color: #b8ddc7;
  background: #ecf8f0;
  color: #24553a;
}

.print-template-layout-badge.is-warning {
  border-color: #f0cc8a;
  background: #fff4df;
  color: #7a4a12;
}

.print-template-layout-badge.is-disabled {
  border-color: #ead7a7;
  background: #fff8e7;
  color: #70531b;
}

.print-template-item .ghost-danger {
  border: 1px solid #f1c3c3;
  border-radius: 4px;
  background: #fff7f7;
  color: #bb3434;
  font-weight: 800;
}

.print-designer-canvas {
  overflow: auto;
  min-width: 0;
  background: #f5f7fb;
}

.print-designer-toolbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 1080px;
  min-height: 58px;
  padding: 8px 18px;
  border-bottom: 1px solid #d9e3ee;
  background: rgba(255, 255, 255, 0.96);
}

.print-designer-toolbar button,
.print-designer-toolbar select {
  min-height: 32px;
  border: 1px solid #d2deeb;
  border-radius: 4px;
  background: #fff;
  color: #24364a;
  font-weight: 700;
}

.print-designer-toolbar button {
  min-width: 32px;
}

.toolbar-separator {
  width: 1px;
  height: 30px;
  background: #d4deea;
}

.toolbar-spacer {
  flex: 1;
}

.print-layout-workspace {
  display: grid;
  grid-template-columns: minmax(900px, 1fr) 320px;
  gap: 18px;
  min-width: 1280px;
  padding: 18px 26px 24px;
}

.print-designer-sheet-shell {
  min-width: 0;
  border: 1px solid #d5e1ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 36, 51, 0.06);
}

.print-layout-hint {
  padding: 12px 14px;
  border-bottom: 1px solid #dfe8f2;
  color: #607086;
  font-weight: 700;
}

.print-layout-table-wrap {
  position: relative;
  overflow: auto;
  height: min(760px, calc(100vh - 285px));
  min-height: 520px;
  background:
    linear-gradient(90deg, rgba(47, 111, 219, 0.05), transparent 520px),
    #f8fafc;
}

.print-layout-paper-boundary {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border: 2px solid rgba(47, 111, 219, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.print-layout-non-printable {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(181, 190, 202, 0.18) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(181, 190, 202, 0.18) 0 1px, transparent 1px 72px),
    rgba(226, 230, 236, 0.78);
  color: rgba(104, 117, 135, 0.72);
}

.print-layout-non-printable span {
  position: sticky;
  top: 18px;
  display: block;
  padding-top: 24px;
  color: rgba(104, 117, 135, 0.52);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0;
}

.print-layout-table {
  position: relative;
  z-index: 1;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  color: #172433;
  font-size: 13px;
}

.print-layout-table th,
.print-layout-table td {
  position: relative;
  height: 34px;
  min-width: 48px;
  border: 1px solid #dce5ef;
  padding: 4px 7px;
  line-height: 1.35;
  vertical-align: middle;
}

.print-layout-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #edf3f9;
  color: #687587;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.print-layout-corner {
  left: 0;
  z-index: 6 !important;
}

.print-layout-select-all {
  width: 100%;
  min-width: 38px;
  min-height: 24px;
  border: 1px solid #c8d7e8;
  border-radius: 4px;
  background: #fff;
  color: #4f5f73;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.print-layout-select-all:hover,
.print-layout-select-all:focus-visible {
  border-color: #2f6fdb;
  color: #2356b5;
  outline: none;
}

.print-layout-row-head {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 42px;
  background: #f3f6fa;
  color: #687587;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.print-layout-table td {
  background: #fff;
  color: #172433;
  cursor: text;
  outline: none;
  white-space: pre-wrap;
}

.print-layout-table td:hover {
  background: #f8fbff;
}

.print-layout-table td.is-in-range {
  background: #eaf4ff;
}

.print-layout-table td.is-selected {
  position: relative;
  z-index: 2;
  box-shadow: inset 0 0 0 2px #2f6fdb;
  background: #eef6ff;
}

.print-layout-table td.is-drop-target {
  background: #e7f8ef;
  box-shadow: inset 0 0 0 2px #31a66a;
}

.print-layout-col-resize,
.print-layout-row-resize {
  position: absolute;
  display: block;
  opacity: 0;
  transition: opacity 0.12s ease, background-color 0.12s ease;
}

.print-layout-col-resize {
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 8;
}

.print-layout-row-resize {
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 8px;
  cursor: row-resize;
  z-index: 8;
}

.print-layout-table th:hover .print-layout-col-resize,
.print-layout-table th:hover .print-layout-row-resize {
  opacity: 1;
  background: rgba(47, 111, 219, 0.24);
}

.is-print-resizing,
.is-print-resizing * {
  user-select: none !important;
}

.print-format-panel {
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding: 16px;
  border: 1px solid #d5e1ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 36, 51, 0.06);
}

.print-format-panel h2 {
  margin: 0 0 8px;
  color: #17324f;
  font-size: 18px;
}

.print-format-panel p {
  margin: 0 0 14px;
  color: #607086;
  font-weight: 800;
}

.print-format-panel label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #43546b;
  font-size: 13px;
  font-weight: 800;
}

.print-format-panel input,
.print-format-panel select,
.print-format-panel textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cbd8e6;
  border-radius: 4px;
  background: #fff;
  color: #172433;
  font: inherit;
  font-weight: 700;
}

.print-format-panel textarea {
  resize: vertical;
  line-height: 1.5;
}

.print-format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.print-format-grid label {
  margin-bottom: 0;
}

.print-number-stepper {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: stretch;
  width: 100%;
  min-height: 36px;
}

.print-number-stepper input {
  min-width: 0;
  border-radius: 0;
  text-align: center;
}

.print-number-stepper button {
  border: 1px solid #cbd8e6;
  background: #f7fbff;
  color: #165ca8;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.print-number-stepper button:first-child {
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.print-number-stepper button:last-child {
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

.print-number-stepper button:hover,
.print-number-stepper button:focus-visible {
  border-color: #2f6fdb;
  background: #edf6ff;
  color: #0f4da0;
  outline: none;
}

.print-format-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.print-format-buttons button {
  min-height: 34px;
  border: 1px solid #c8d9ee;
  border-radius: 4px;
  background: #f7fbff;
  color: #165ca8;
  font-weight: 800;
}

.print-designer-preview,
.print-designer-help-panel {
  min-width: 1280px;
  margin: 0 26px 28px;
  padding: 18px;
  border: 1px solid #d8e2ee;
  border-radius: 6px;
  background: #fff;
}

.print-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.print-preview-head h2,
.print-designer-help-panel h2 {
  margin: 0;
  color: #17324f;
  font-size: 20px;
}

.print-preview-head p,
.print-designer-help-panel p {
  margin: 0;
  color: #718096;
}

.print-template-preview-card {
  position: relative;
  max-width: 760px;
  min-height: 260px;
  padding: 28px;
  overflow: hidden;
}

.print-template-preview-card h3 {
  margin: 0 0 14px;
}

.print-template-preview-card table {
  width: 100%;
  border-collapse: collapse;
}

.print-template-preview-card th,
.print-template-preview-card td {
  padding: 9px 10px;
  border: 1px solid #d8e2ee;
  text-align: left;
}

.print-template-qr-box {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin: 0 18px 12px 0;
  border: 2px solid #172433;
  color: #172433;
  font-weight: 900;
}

.print-template-meta,
.print-template-footer {
  color: #607086;
}

.print-template-watermark {
  position: absolute;
  inset: 35% auto auto 34%;
  color: rgba(32, 43, 56, 0.12);
  font-size: 42px;
  font-weight: 900;
  transform: rotate(-18deg);
}

.print-template-signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.print-live-preview-modal[hidden] {
  display: none !important;
}

.print-live-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.print-live-preview-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #c8d9ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.24);
}

.print-live-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid #dce5ef;
}

.print-live-preview-head h2 {
  margin: 0;
  color: #172433;
  font-size: 22px;
}

.print-live-preview-head p {
  margin: 8px 0 0;
  color: #607086;
  font-weight: 700;
}

.print-live-preview-settings {
  display: grid;
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  gap: 8px;
  flex: 1 1 520px;
  min-width: 420px;
}

.print-live-preview-settings label {
  display: grid;
  gap: 4px;
  color: #43546b;
  font-size: 12px;
  font-weight: 800;
}

.print-live-preview-settings select,
.print-live-preview-settings input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbd8e6;
  border-radius: 4px;
  background: #fff;
  color: #172433;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.print-live-preview-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.print-live-preview-print {
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid #c8d9ee;
  border-radius: 4px;
  background: #fff;
  color: #165ca8;
  cursor: pointer;
  font-weight: 800;
}

.print-live-preview-close {
  border: 0;
  background: transparent;
  color: #5e6a78;
  cursor: pointer;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.print-live-preview-body {
  overflow: auto;
  padding: 28px;
  background: #f3f6fa;
}

.print-live-preview-paper {
  box-sizing: border-box;
  width: var(--print-preview-width, 794px);
  min-height: var(--print-preview-height, 1123px);
  margin: 0 auto;
  padding:
    var(--print-preview-margin-top, 0)
    var(--print-preview-margin-right, 0)
    var(--print-preview-margin-bottom, 0)
    var(--print-preview-margin-left, 0);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

.print-live-preview-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  color: #172433;
  font-size: 13px;
}

.print-live-preview-table td {
  min-width: 48px;
  padding: 4px 7px;
  border: 1px solid #4b5563;
  line-height: 1.35;
  vertical-align: middle;
  word-break: break-word;
}

.print-layout-render {
  width: 100%;
  overflow: hidden;
}

.print-layout-render-table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  color: #172433;
  font-size: 13px;
}

.print-layout-render-table td {
  min-width: 48px;
  padding: 4px 7px;
  border: 1px solid #4b5563;
  line-height: 1.35;
  vertical-align: middle;
  white-space: pre-wrap;
  word-break: break-word;
}

.print-layout-attachment-image {
  display: inline-block;
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  vertical-align: top;
}

.print-layout-attachment-file {
  display: inline-block;
  margin-right: 8px;
  color: #172433;
}

.has-print-live-preview-open {
  overflow: hidden;
}

@media print {
  html.has-print-live-preview-open body {
    background: #fff !important;
  }

  html.has-print-live-preview-open body * {
    visibility: hidden !important;
  }

  html.has-print-live-preview-open .print-live-preview-modal,
  html.has-print-live-preview-open .print-live-preview-modal * {
    visibility: visible !important;
  }

  html.has-print-live-preview-open .print-live-preview-modal {
    display: block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    background: #fff !important;
  }

  html.has-print-live-preview-open .print-live-preview-dialog {
    display: block !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  html.has-print-live-preview-open .print-live-preview-head {
    display: none !important;
  }

  html.has-print-live-preview-open .print-live-preview-body {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
  }

  html.has-print-live-preview-open .print-live-preview-paper {
    width: var(--print-preview-width, auto) !important;
    height: var(--print-preview-height, auto) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding:
      var(--print-preview-margin-top, 0)
      var(--print-preview-margin-right, 0)
      var(--print-preview-margin-bottom, 0)
      var(--print-preview-margin-left, 0) !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }
}

@media (max-width: 920px) {
  .print-designer-topbar {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .print-designer-title {
    text-align: left;
  }

  .print-designer-actions {
    flex-wrap: wrap;
  }

  .print-designer-workbench {
    grid-template-columns: 1fr;
    height: auto;
  }

  .print-designer-sidebar {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid #d9e3ee;
  }
}

.company-supplier-table th,
.company-supplier-table td {
  vertical-align: top;
}

.company-supplier-contact-cell {
  min-width: 150px;
  max-width: 220px;
  white-space: normal;
  line-height: 1.45;
}

.company-supplier-contact-cell small {
  white-space: normal;
}

.bank-account-company-select {
  min-height: 46px;
  height: 46px;
}

.qualification-attachment-edit-hint {
  margin: 8px 0 0;
  color: #c62828;
  font-weight: 700;
}

.global-module-amount-uppercase-preview {
  display: grid;
  gap: 14px;
}

.global-module-amount-uppercase-preview label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.global-module-amount-uppercase-samples {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.global-module-amount-uppercase-samples span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 640px) {
  .amount-uppercase-hint {
    max-width: 100%;
  }
}